/* Visão do Campo — série: o gráfico do ano em cada medida da lateral.
   Carrega depois de estilo.css. As cores saem das variáveis do tema, para o
   desenho acompanhar claro e escuro sem uma segunda tabela de cores. */

.serie { margin-top: 10px; }

/* `preserveAspectRatio: none` no SVG: o desenho ESTICA com a largura da medida,
   que é o que faz ele continuar legível quando a lateral é puxada e as medidas
   viram duas ou três colunas. A altura fica fixa. */
/* RECORTA. Era `overflow: visible` para o desenho não ser cortado nas pontas —
   e foi por essa porta que a faixa de uma medida invadiu a medida vizinha quando
   um ponto veio com dia fora do ano. A causa já está tratada no JS; isto é a
   segunda tranca, para que nenhum dado estranho consiga pintar fora da caixa.
   Nada legítimo é perdido: a escala vertical já deixa 12% de folga e o desenho
   ocupa de 8 a 74 numa viewBox de 92. */
.serie-svg { display: block; width: 100%; height: 92px; overflow: hidden; }

/* a faixa do padrão: presente sem competir com a linha */


/* O MEDIDO É A LINHA EM DESTAQUE; a referência é o cinza ao fundo (dono,
   2026-09-24: "coloque a atual como a de cor de destaque e a de referência como
   a cinza"). Estava ao contrário — a referência em verde, forte, e o medido em
   cinza —, e o olho ia primeiro para a linha que NÃO é a notícia: a referência
   é o pano de fundo contra o qual se lê o ano corrente, não o assunto.
   Também saiu daqui `.serie-linha-fora`, o trecho laranja: era uma terceira cor
   para duas linhas (ver `serie.js`). */
.serie-linha { fill: none; stroke: var(--verde); stroke-width: 1.9; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; }

/* ocorrência registrada pelo agrônomo */
.serie-evento { stroke: var(--tinta-3); stroke-width: 1; stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke; }

.serie-ponto { fill: var(--superficie); stroke: var(--verde); stroke-width: 1.3;
  vector-effect: non-scaling-stroke; cursor: pointer; }
.serie-ponto:hover, .serie-ponto:focus-visible { fill: var(--verde); outline: none; }

.serie-mes { fill: var(--tinta-3); font: 500 12.5px var(--mono); text-anchor: start; }

.serie-legenda { margin-top: 2px; font: 500 12px var(--mono); color: var(--tinta-3); }

/* a REFERÊNCIA, atrás: cinza e mais fina, para o medido passar por cima dela */
.serie-linha-ref { fill: none; stroke: var(--tinta-3); stroke-width: 1.3;
  vector-effect: non-scaling-stroke; }

/* O VÃO PREENCHIDO: a reta entre as duas leituras que cercam um buraco de nuvem.
   Tracejado e sem bolinha, porque ali ninguém mediu — a linha fica inteira sem
   afirmar medida que não houve. Desenhado POR CIMA da linha cheia, para apagar
   o traço contínuo naquele trecho. */


/* a dica de um ponto: aparece ao tocar, e não troca a data do mapa */
.serie { position: relative; }
.serie-dica {
  position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 8px));
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--r-s);
  padding: 5px 8px; box-shadow: 0 2px 8px rgba(14,17,15,0.18);
  font: 500 12px var(--mono); color: var(--tinta); white-space: nowrap;
  display: flex; flex-direction: column; gap: 1px; pointer-events: none;
}
.serie-dica.do-comeco { transform: translate(0, calc(-100% - 8px)); }
.serie-dica.do-fim { transform: translate(-100%, calc(-100% - 8px)); }
/* O BALÃO DESCE quando o ponto está no alto do desenho. Ele nasce ACIMA do
   ponto e, num ponto perto do topo, subia para fora do gráfico e tapava o
   cabeçalho da própria medida — o número e a palavra que ele existe para
   detalhar. As três combinações precisam da regra, porque `transform` é uma
   propriedade só: quem chega depois no arquivo vence. */
.serie-dica.embaixo { transform: translate(-50%, 8px); }
.serie-dica.embaixo.do-comeco { transform: translate(0, 8px); }
.serie-dica.embaixo.do-fim { transform: translate(-100%, 8px); }
.serie-dica b { font-weight: 700; }
.serie-dica .ref { color: var(--tinta-3); }

/* ------------------------------------------------------------------ eixos */
/* Grade fraca de propósito: quem salta aos olhos tem de ser a linha, não a régua. */
.serie-grade { stroke: var(--linha); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.55; }
.serie-grade-v { opacity: 0.3; }
/* o desenho é em unidades de `viewBox` (320 de largura) e a lateral o mostra a ~0,9 delas: 12,5 unidades chegam
   a ~12 px na tela. O piso de 12 px vale para o que se lê, gráfico incluso (auditoria D-05). */
.serie-eixo-y { fill: var(--tinta-3); font: 500 12.5px var(--mono); text-anchor: end;
  /* um halo da cor do fundo: a linha do gráfico passa por cima do rótulo do eixo e ele continuava legível */
  paint-order: stroke; stroke: var(--superficie); stroke-width: 4px; stroke-linejoin: round; }
.serie-grande .serie-mes, .serie-grande .serie-eixo-y { font-size: 14px; }
.serie-mes { text-anchor: middle; }
/* a passagem que a nuvem derrubou: discreta, no pé do desenho, sem competir com a linha */
.serie-nuvem { fill: var(--tinta-3); opacity: 0.55; }

/* ---------------------------------------------- a legenda única, no topo */
.serie-legenda-topo {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px;
  font: 500 12px var(--mono); color: var(--tinta-2);
}
.serie-legenda-topo span { display: inline-flex; align-items: center; gap: 5px; }
.serie-amostra { display: inline-block; width: 16px; height: 0; flex: 0 0 16px; }
.serie-amostra.am-ref { border-top: 1.5px solid var(--tinta-3); }
.serie-amostra.am-ano { border-top: 2.2px solid var(--verde); }

/* a dica: uma linha por série, com o risinho da cor de cada uma */
.serie-dica .linha-ano, .serie-dica .linha-ref { display: inline-flex; align-items: center; gap: 5px; }
.serie-dica .linha-ano i { width: 12px; border-top: 2.2px solid var(--verde); }
.serie-dica .linha-ref i { width: 12px; border-top: 1.5px solid var(--tinta-3); }
.serie-legenda-topo .nota { color: var(--tinta-3); }

/* ------------------------------------------------------------------------
   O CAÇADOR DO PONTEIRO, o botão de tela cheia e os três grãos — tudo de
   2026-09-22, do mesmo pedido: "eu devo conseguir colocar o mouse por cima de
   qualquer lugar na linha", "ele deve ter um ícone de ver ele em tela cheia",
   "3 ícones ali para você clicar e mudar a forma de visualização".
   ------------------------------------------------------------------------ */

/* Sem preenchimento para os olhos, sólido para o ponteiro: é o que faz a dica
   abrir em qualquer lugar do desenho em vez de exigir mira na bolinha de 2,6. */
.serie-cacador { fill: transparent; pointer-events: all; cursor: crosshair; }

/* a virada do ano é a única linha vertical que se lê: sem ela, num eixo de três
   anos, "jan" aparece três vezes sem nada dizendo onde um ano acaba */
.serie-virada { opacity: 1; stroke: var(--linha-forte); }

.serie-expandir {
  position: absolute; top: 2px; right: 2px; width: 32px; height: 32px;
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--linha); border-radius: var(--r-s);
  background: var(--superficie); color: var(--tinta-2);
  opacity: 0; transition: opacity 0.12s, border-color 0.12s;
  cursor: pointer;
}
.serie-expandir svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* aparece ao passar o mouse na medida — e SEMPRE no foco por teclado, senão
   quem navega com Tab não tem como alcançá-lo */
.serie:hover .serie-expandir, .serie-expandir:focus-visible { opacity: 1; }
.serie-expandir:hover, .serie-expandir:focus-visible { border-color: var(--verde); color: var(--tinta); }
@media (hover: none) { .serie-expandir { opacity: 1; } }
/* no toque o botão ganha 48 px de acerto sem mudar de desenho (D-06) */
.serie-expandir::after { content: ''; position: absolute; inset: -8px; }

/* ---- a tela cheia do gráfico */
.modal-serie { width: min(1100px, 94vw); }
.serie-palco { margin-top: 10px; }
.serie-grande .serie-svg { height: 380px; }
.serie-grande .serie-legenda { margin-top: 6px; font-size: 12px; }
.serie-vazio { color: var(--tinta-3); font: 500 12px var(--ui); padding: 24px 0; text-align: center; }

/* UM GRUPO SEGMENTADO, nao tres pilulas (2026-09-24, da critica de design).
   Eram `border-radius: 999px` — a unica forma redonda da tela junto com o botao
   flutuante (que saiu), contra os 4px de todo o resto do produto. Pilula ao lado
   de retangulo nao le como escolha: le como peca de outro kit colada aqui.
   Encostados e com divisor de 1px, eles tambem dizem melhor o que sao: UMA
   escolha entre tres, nao tres botoes soltos. */
.serie-graos { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: var(--r-s); overflow: hidden; }
.serie-grao {
  padding: 0 16px; min-height: var(--alvo); border: 0; border-left: 1px solid var(--linha-forte);
  background: var(--superficie); color: var(--tinta-2);
  font: 600 12px var(--ui); cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.serie-grao:first-child { border-left: 0; }
.serie-grao:hover { background: var(--superficie-2); color: var(--tinta); }
.serie-grao[aria-pressed="true"] { background: var(--verde); color: #FFFFFF; }

.serie-dica .n { color: var(--tinta-3); }

/* A LINHA DO CURSOR e os anéis que marcam o ponto lido (2026-09-22). Sem eles a
   dica diz um número e o olho tem de adivinhar de qual bolinha ele saiu — e,
   com duas linhas pareadas, de qual das duas. `non-scaling-stroke` porque o
   desenho é esticado por `preserveAspectRatio: none`: sem isso o tracejado sai
   achatado num eixo e grosso no outro. */
.serie-cursor { stroke: var(--tinta-3); stroke-width: 1; stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke; pointer-events: none; opacity: 0.8; }
.serie-anel { fill: none; stroke: var(--verde); stroke-width: 1.8;
  vector-effect: non-scaling-stroke; pointer-events: none; }
.serie-anel-ref { stroke: var(--tinta-3); }

/* O ROTULO NA PONTA DE CADA LINHA, só no gráfico grande (2026-09-23). Duas
   linhas coloridas obrigavam a ir à legenda e voltar; escrito na ponta, o
   desenho se explica onde o olho já está. `text-anchor: end` para ele crescer
   para DENTRO do desenho: na ponta direita não há margem para crescer para
   fora. A sombra branca é o que o mantém legível quando cruza a outra linha. */
.serie-fim { font: 600 14px var(--mono); text-anchor: end;
  paint-order: stroke; stroke: var(--superficie); stroke-width: 3px;
  stroke-linejoin: round; }
.serie-fim-medido { fill: var(--verde); }
.serie-fim-ref { fill: var(--tinta-3); }
/* o rótulo da ponta ESQUERDA cresce para dentro, senão sai pela borda */
.serie-fim.serie-fim-inicio { text-anchor: start; }