/* ==========================================================================
   GRADE DE INDICADORES COM VARIAÇÃO — prefixo ind-
   Quatro a seis células em grade. Em cada uma: valor grande, rótulo em caixa
   alta, a variação com seta e palavra, e o período. Nenhum keyframe, nenhuma
   transição, nenhum script — a única coisa que se move é a entrada, e ela é
   o [data-rv] do core.

   Tokens usados:
     --fg               tinta do valor
     --fg-muted         rótulo, período, fonte, ressalva
     --rule             filete no topo de cada célula
     --accent           default de --ind-alta
     --accent-2         default de --ind-queda
     --display          face do valor e da linha de variação
     --sans             face do rótulo, do período e da ressalva
     --radius-pill      só via .pill do core, na data de referência
   Primitivas do core (usadas, não recopiadas): .wrap .sec-pad .sec-head
   .eyebrow h2.sec-title .sec-lead .pill

   O QUE MANTÉM A GRADE ALINHADA, e é a decisão de forma do componente.
   Número que dança na vertical estraga a leitura das seis células de uma vez,
   e o que faz um número dançar é o rótulo acima dele quebrar em duas linhas
   numa célula e em uma noutra. Duas saídas existiam:

     a) grid-template-rows:subgrid, com cada célula assinando as linhas do pai;
     b) ordenar a célula de modo que o vão elástico fique DEPOIS do valor.

   Escolhi (b), e não é economia de suporte — é que ela alinha as DUAS pontas
   de graça. O valor abre a célula, então o topo dele é o topo da célula, que
   é o mesmo em todas (item de grade nasce `stretch`). A variação é empurrada
   para o pé por `margin-top:auto`, então o pé dela também é comum. Sobra o
   rótulo no meio, e é ele que absorve a folga — que é exatamente o slot que
   pode ter uma linha ou três sem prejuízo. Subgrid resolveria o mesmo com
   uma dependência de versão de navegador e um `grid-row: span 3` que precisa
   ser mantido em sincronia com o número de filhos da célula.

   O filete de `border-top` na célula (e não na grade) existe por isso: ele
   desenha a linha em que os valores se alinham. Fica cortado pelo vão entre
   colunas de propósito — um filete por coluna lê como cabeçalho de tabela de
   relatório, que é o registro certo aqui; um filete corrido de ponta a ponta
   mais os verticais fechariam uma moldura e a peça passaria a ler como
   tabela de verdade.

   NÃO EXISTE @media(prefers-reduced-motion) NESTE ARQUIVO, e a ausência é
   deliberada: não há transição, animação nem transform animado para
   desligar. O único movimento da peça é a entrada por [data-rv], que o
   core/motion.css já desliga. A rotação da seta é estática — ela nunca
   interpola de um ângulo para outro.
   ========================================================================== */

/* Só a largura da coluna do cabeçalho: o resto — inclusive a centralização dos filhos vem do .sec-head do core (desde 2026-09-29) —
   vem da primitiva. */
.ind-head{--head-max:700px}

/* ---------------------------------------------------------------- a barra */
/* Data de referência à esquerda, procedência à direita. As duas respondem
   perguntas diferentes e nenhuma das duas é decoração: a pílula diz DE
   QUANDO o número é, a fonte diz DE ONDE ele veio. Indicador sem data
   envelhece em silêncio, e é por isso que ela mora aqui — encostada na
   grade — e não na letra miúda do rodapé da página. */
.ind-barra{
  margin-top:clamp(34px,5vh,56px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 22px;
}
.ind-fonte{
  font-family:var(--sans);
  font-size:12.5px;line-height:1.5;letter-spacing:normal;
  color:var(--fg-muted);
  max-width:52ch;
}

/* ---------------------------------------------------------------- a grade */
/* --ind-cols é o único ajuste de quantidade no desktop: 4 para quatro ou
   cinco indicadores, 3 para seis (duas fileiras de três). Acima de seis a
   peça deixa de ser grade e vira tabela — e para tabela existe
   listas/tabela-comparativa.

   O vão da fileira é bem maior que o da coluna, e tem de ser: é ele que faz
   o filete da segunda fileira ler como uma banda nova em vez de um risco
   solto embaixo da primeira. */
.ind-grade{
  --ind-cols:4;
  --ind-gap-col:clamp(18px,2.4vw,34px);
  --ind-gap-row:clamp(34px,4.6vh,54px);
  --ind-valor-fs:clamp(28px,3.2vw,44px);
  margin-top:clamp(20px,2.8vh,32px);
  display:grid;
  grid-template-columns:repeat(var(--ind-cols),minmax(0,1fr));
  column-gap:var(--ind-gap-col);
  row-gap:var(--ind-gap-row);
}

/* flex-direction:column em vez de grid dentro da célula: o `margin-top:auto`
   do §"o que mantém a grade alinhada" depende de haver folga distribuível, e
   em coluna flex ela existe sem declarar linha nenhuma. */
.ind-cel{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--rule);
  padding-top:clamp(15px,1.8vw,22px);
}

/* ---------------------------------------------------------------- o valor */
.ind-valor{
  font-family:var(--display);font-weight:700;
  font-size:var(--ind-valor-fs);
  line-height:.98;letter-spacing:-.03em;
  color:var(--fg);

  /* É dado tabular: seis células de números com avanço proporcional leem
     ragged mesmo lado a lado, porque o "1" estreito abre um vão que o "8"
     não abre. Aqui não há contagem para tremer (o componente não tem
     script) — o motivo é só a mancha. Se a --display do tema não tiver
     algarismos tabulares, nada quebra: só volta a ficar ragged. */
  font-variant-numeric:tabular-nums;

  /* Nunca quebra. Um valor em duas linhas empurra o rótulo e a célula deixa
     de parecer irmã das outras; e o transbordo é para ser visto e corrigido
     — o teto medido está na ficha. */
  white-space:nowrap;
}

/* O slot elástico da célula: uma a três linhas, e é aqui que a diferença de
   altura entre as células é absorvida. Sem max-width — a célula já é estreita
   e o rótulo tem de poder usar a largura toda. */
.ind-rotulo{
  font-family:var(--sans);
  font-size:11.5px;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-muted);
  margin-top:clamp(10px,1.2vw,14px);
}

/* ------------------------------------------------------------ a variação */
/* margin-top:auto empurra a linha para o pé da célula: com isso o pé da
   variação é comum a todas as células da fileira, do mesmo jeito que o topo
   do valor é. Precedente do gesto: .wealth-close do dados/painel-patrimonio.

   A COR VEM DE FALLBACK DENTRO DO var(), não de uma declaração em .ind. A
   diferença é a que o core documenta no --display-xl: declarado num
   ancestral do componente, o default venceria um --ind-alta que o TEMA
   pusesse no :root, e o parafuso pareceria não funcionar. Assim as duas
   portas ficam abertas — tema no :root, ou instância no .ind.

   POR QUE O DEFAULT NÃO É VERDE E VERMELHO. Não é só daltonismo (~8% dos
   homens) nem impressão monocromática: é que direção não é veredito. Nesta
   mesma grade o patrimônio SOBE (boa notícia) e o prazo do diagnóstico CAI
   (boa notícia também) — e num painel de mercado o IPCA subindo é notícia
   ruim. Um par verde/vermelho afirmaria julgamento que o dado não carrega.
   Os defaults são as duas matizes que todo tema já tem de definir, --accent
   e --accent-2: duas direções, duas cores de marca, nenhum veredito. Projeto
   que queira a convenção sobrescreve as duas variáveis, e a ficha diz em que
   caso isso é honesto.

   O NEUTRO É O DEFAULT DO SELETOR, de propósito: sem data-ind-dir, ou com
   valor escrito errado, a linha cai em "estável" com a seta de lado. Um
   atributo com typo nunca inventa uma alta. */
.ind-var{
  --ind-seta:90deg;
  color:var(--ind-estavel,var(--fg-muted));
  margin-top:auto;
  padding-top:clamp(14px,1.8vw,20px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  /* 5px é o espaço de palavra desta face neste corpo: "alta de" e o número
     leem como uma frase, não como duas colunas — com 7px a linha lia como
     três tokens soltos. A seta soma 2px de margin-right logo abaixo, para
     ficar com 7px: ela é outra classe de sinal, e colada ao texto na mesma
     medida das palavras viraria acento da primeira letra. */
  gap:2px 5px;
  font-family:var(--display);font-weight:700;
  font-size:13.5px;line-height:1.25;letter-spacing:normal;
}
.ind-var[data-ind-dir="alta"]{--ind-seta:0deg;color:var(--ind-alta,var(--accent))}
.ind-var[data-ind-dir="queda"]{--ind-seta:180deg;color:var(--ind-queda,var(--accent-2))}

/* UMA seta no markup, três direções no CSS. O ângulo vem do mesmo atributo
   que a cor, então os dois nunca podem divergir — que é a única divergência
   que o componente consegue impedir por construção (a palavra do
   .ind-var-dir, não; ver o gotcha da ficha).

   O transform mora AQUI, num descendente, e nunca no nó que leva o
   [data-rv]: o core termina o reveal com `[data-rv].in{transform:none}`,
   que vale (0,2,0) e apagaria a rotação em silêncio quando a dobra entrasse
   (contrato §5). O [data-rv] está no .ind-grade, três níveis acima. */
.ind-var-seta{
  flex:0 0 auto;
  display:inline-grid;place-items:center;
  width:12px;height:12px;
  margin-right:2px;
  transform:rotate(var(--ind-seta));
}
.ind-var-num{font-variant-numeric:tabular-nums}

/* O período não é direcional e por isso não recebe a cor: ele nomeia a
   janela em que a variação foi apurada, e a janela é fato, não movimento. */
.ind-var-per{
  font-family:var(--sans);font-weight:300;
  font-size:12.5px;line-height:1.4;letter-spacing:normal;
  color:var(--fg-muted);
  margin-top:5px;
}

/* ------------------------------------------------------------------- o pé */
/* A ressalva fica ao lado dos números que ela cobre. No rodapé da página ela
   é, na prática, invisível — e é justamente aqui que a pessoa está lendo o
   número. */
.ind-pe{margin-top:clamp(28px,4vh,48px)}
/* A tipografia inteira é a da primitiva .nota do core — este componente já
   escrevia a mesma receita à mão, inclusive o letter-spacing:normal. Resta a
   medida: 76ch acompanha a grade de seis indicadores. */
.ind-nota{--nota-max:76ch}

/* ---------------------------------------------------------------- mobile */
/* DUAS COLUNAS, NÃO UMA. Indicador é curto — um valor de poucos glifos, um
   rótulo de duas a cinco palavras — e em coluna única cada célula gasta a
   largura inteira do celular para mostrar "312". A grade de seis viraria uma
   rolagem de seis telas. Em duas colunas a fileira continua legível e a
   peça continua sendo uma GRADE, que é o que ela é.

   As colunas vão cravadas, sem passar por --ind-cols, e isso é de propósito:
   estilo inline vence media query, então quem escrevesse --ind-cols:4 no
   style de uma instância quebraria o mobile sem querer. O corpo do valor
   segue por variável porque ali o ajuste por projeto é legítimo — é medida,
   não estrutura. Mesma divisão que o prova/stats-contador-regua faz. */
@media(max-width:900px){
  .ind-grade{
    grid-template-columns:repeat(2,minmax(0,1fr));
    --ind-valor-fs:clamp(26px,4.4vw,38px);
  }
}
/* Abaixo de 560px o vão da coluna encolhe antes do corpo do número: é o vão
   que sobra, não o número. Medido a 320px de janela, que é o piso realista:
   "R$ 4,8 bi" (o valor mais largo que a ficha admite) ocupa 92,6px numa
   célula de 125,5px — 33px de sobra, com duas colunas de pé. */
@media(max-width:560px){
  .ind-grade{
    --ind-gap-col:clamp(14px,4vw,20px);
    --ind-valor-fs:clamp(24px,7vw,32px);
  }
  .ind-var{font-size:13px}
  .ind-rotulo{letter-spacing:.1em}
}