/* Visão do Campo — o gráfico com zoom e a linha do tempo de evidências do detalhe de uma alteração (evidencias.js).
   Só as variáveis do :root de estilo.css (raios, espaços, cores, tipografia). Sem gradiente, sem sombra pesada, sem emoji. */

/* ------------------------------------------------------------------------------ gráfico com zoom */
.evid-quadro { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-1); }
.evid-palco { min-width: 0; container-type: inline-size; }
.evid-grafico { display: block; width: 100%; max-width: 460px; height: auto; overflow: visible; }   /* o desenho é em viewBox: sem teto, numa lateral larga o texto cresce junto */
.evid-g-eixo { stroke: var(--linha); stroke-width: 1; }
.evid-g-texto { fill: var(--tinta-2); font: 400 11px var(--mono); }
.evid-g-faixa { fill: var(--evid-cor); fill-opacity: .14; pointer-events: none; }
.evid-g-inicio { stroke: var(--evid-cor); stroke-width: 1.2; stroke-dasharray: 3 3; pointer-events: none; }
.evid-g-faixa-texto { fill: var(--evid-cor); font: 600 11px var(--ui); }
.evid-g-area { fill: none; stroke: var(--tinta-3); stroke-width: 1.8; stroke-linejoin: round; }
.evid-g-trecho { fill: none; stroke: var(--evid-cor); stroke-width: 2.4; stroke-linejoin: round; }
.evid-g-ponto-trecho { fill: var(--evid-cor); stroke: var(--superficie); stroke-width: 1.5; }
.evid-g-ponto-area { fill: var(--tinta-3); stroke: var(--superficie); stroke-width: 1.5; }
.evid-g-nome { font: 600 12px var(--ui); }
.evid-g-nome-trecho { fill: var(--evid-cor); }
.evid-g-nome-area { fill: var(--tinta-2); }
.evid-g-alvo { cursor: crosshair; touch-action: pan-y; }
.evid-g-guia { stroke: var(--tinta-2); stroke-width: 1; stroke-dasharray: 2 2; }
.evid-g-dica-fundo { fill: var(--superficie); stroke: var(--linha-forte); stroke-width: 1; filter: drop-shadow(0 3px 8px rgb(20 30 22 / .16)); }
.evid-g-dica-data { fill: var(--tinta); font: 600 12px var(--ui); }
.evid-g-dica-valores { fill: var(--tinta-2); font: 500 12px var(--mono); }
.evid-g-dica-rot { fill: var(--tinta-2); font: 400 12px var(--ui); }
.evid-g-dica-val { fill: var(--tinta); font: 600 12px var(--mono); }
.evid-g-dica-traco { stroke: var(--tinta-2); stroke-width: 1.5; stroke-dasharray: 3 2; }
.evid-g-dica-sep { stroke: var(--linha); stroke-width: 1; }
.evid-g-dica-val.evid-g-dif-abaixo { fill: var(--fogo); }
.evid-g-dica-val.evid-g-dif-acima { fill: var(--verde); }
/* o texto do SVG é em unidades do viewBox (340): numa coluna de 320–399 px ele encolhia para ~10 px. Ali ele sobe para 13
   (≥ 12 px na tela a partir de 320); com o gráfico no teto de 460 px fica o de sempre (11–12, ~15–16 px na tela) */
@container (max-width: 399px) {
  .evid-g-texto, .evid-g-faixa-texto, .evid-g-nome, .evid-g-dica-data, .evid-g-dica-valores, .evid-g-dica-rot, .evid-g-dica-val { font-size: 13px; }
}
/* de 400 px de coluna para cima o gráfico chega ao teto (460) e a escala passa de 1,2: o texto voltava a ~15–16 px, maior
   que o do cartão em volta. 10,5–11 dá ~12–14 px na tela (e 9,5–10 no teto), a mesma ordem do resto da lateral */
@container (min-width: 400px) {
  .evid-g-texto, .evid-g-faixa-texto { font-size: 10.5px; }
  .evid-g-nome, .evid-g-dica-data, .evid-g-dica-valores, .evid-g-dica-rot, .evid-g-dica-val { font-size: 11px; }
}
@container (min-width: 460px) {   /* no teto (460 px, escala 1,35): ~13 px na tela */
  .evid-g-texto, .evid-g-faixa-texto { font-size: 9.5px; }
  .evid-g-nome, .evid-g-dica-data, .evid-g-dica-valores, .evid-g-dica-rot, .evid-g-dica-val { font-size: 10px; }
}
.evid-sem-dado { margin: 0; font: 400 var(--t-body-m) var(--ui); color: var(--tinta-2); }
/* o segmentado é o `.m3-seg` das Ferramentas; aqui só o alvo de toque de 48 px */
.evid-seg { align-self: stretch; max-width: 460px; }   /* a largura do gráfico: o segmentado não passa dele numa lateral larga */
.evid-seg[hidden] { display: none; }
.evid-seg button { min-height: var(--alvo-toque); }

/* ------------------------------------------------------------------------------ linha do tempo */
.evid-tempo { display: flex; flex-direction: column; gap: var(--e-2); }
.evid-lista { list-style: none; margin: 0; padding: 0; }
.evid-item, .evid-mais { position: relative; padding: 0 0 var(--e-4) var(--e-8); --evid-linha: var(--linha-forte); }
.evid-item { --evid-ponto: var(--evid-cor); }
.evid-tipo-registro { --evid-ponto: var(--tinta-3); }
/* a trilha: uma linha fina que liga a bolinha à seguinte; a primeira e a última têm só o meio caminho */
.evid-item::before, .evid-mais::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--evid-linha); }
.evid-primeiro::before { top: 10px; }
.evid-ultimo::before { bottom: auto; height: 10px; }
.evid-ultimo { padding-bottom: 0; }
.evid-primeiro.evid-ultimo::before { display: none; }
.evid-bolinha { position: absolute; left: 0; top: 2px; box-sizing: border-box; width: 16px; height: 16px; border-radius: var(--r-full);
  border: 2px solid var(--evid-ponto); background: var(--evid-ponto); }
/* vazada = terminou */
.evid-encerrada .evid-bolinha { background: var(--superficie); }
.evid-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evid-ancora { align-self: flex-start; font: 600 var(--t-label-s) var(--ui); letter-spacing: .04em; text-transform: uppercase; color: var(--evid-cor); }
.evid-data { font: 600 var(--t-body-m) var(--mono); color: var(--tinta); }
.evid-fato { font: 500 var(--t-body-m) var(--ui); color: var(--tinta); overflow-wrap: anywhere; }
.evid-detalhe { font: 400 var(--t-body-m) var(--ui); color: var(--tinta-2); overflow-wrap: anywhere; }
.evid-mais { padding-bottom: var(--e-2); }
.evid-mais-botao { min-height: var(--alvo-toque); padding: 0 var(--e-3); border: 1px solid var(--linha-forte); border-radius: var(--r-s);
  background: transparent; color: var(--tinta); font: 500 var(--t-body-m) var(--ui); cursor: pointer; }
.evid-mais-botao:hover { background: var(--superficie-2); }
.evid-mais-botao:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* a linha do normal e o que ela quer dizer */
.evid-g-normal { stroke: var(--tinta-2); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.evid-g-normal-texto { fill: var(--tinta-2); font: 400 11px var(--mono); pointer-events: none; }
.evid-nota-normal { margin: 4px 0 0; font: 400 12px/16px var(--ui); color: var(--tinta-2); }

.evid-g-normal-curva { fill: none; stroke-linejoin: round; }
.evid-g-nome-normal { fill: var(--tinta-2); }
.evid-g-ponto-normal { fill: var(--tinta-2); stroke: var(--superficie); stroke-width: 1; }
.evid-g-dica-normal { fill: var(--tinta-2); }