/*
 * A FOLHA DO ep-grafico.mjs — o que faltava para o módulo compartilhado estar
 * inteiro.
 *
 * O módulo emite `class="g-tick"`, `class="g-eixo-titulo"`, `class="g-capsula"`
 * e, pelo `ligarFoco`, `.guia-foco`, `.camada-foco` e as partes internas de
 * `.balao .linha` e `.canvas-legenda .chave`. Até aqui, nenhum arquivo
 * compartilhado descrevia essas classes: cada produto copiava o bloco na
 * própria folha, e oito folhas guardavam o MESMO texto.
 *
 * O defeito apareceu quando dois produtos novos não copiaram. Sem `.g-nota`,
 * o texto do SVG cai no padrão do navegador — 16 px onde o desenho foi
 * espaçado para 11 — e os rótulos passam a colidir. Nada avisa: o SVG
 * renderiza, o produto calcula, e só medindo a caixa do texto se descobre que
 * a fonte está 45 % maior do que a figura supõe.
 *
 * Quem escreve uma figura nova só precisa ligar esta folha ANTES da folha do
 * produto. As oito folhas antigas continuam válidas — elas declaram o mesmo
 * conteúdo — e migram uma a uma.
 */

/* -- o texto dentro do desenho ------------------------------------------- */

.g-tick {
  font: 400 11px var(--ep-fonte); fill: #62766e;
  font-variant-numeric: tabular-nums;
}
.g-eixo-titulo { font: 500 12px var(--ep-fonte); fill: #46655a; }
.g-rotulo-direto {
  font: 500 11.5px var(--ep-fonte); fill: #0b2b21;
  font-variant-numeric: tabular-nums;
}
.g-nota { font: 400 11px var(--ep-fonte); fill: #62766e; }
.g-capsula {
  font: 500 11.5px var(--ep-fonte); fill: #ffffff;
  font-variant-numeric: tabular-nums;
}

/* -- a leitura por foco, montada pelo ligarFoco --------------------------- */

.guia-foco { stroke: #0b2b21; stroke-width: 1; opacity: .22; pointer-events: none; }
.camada-foco rect { cursor: crosshair; }

/* O <em> do valor sairia em itálico e o <b> do rótulo em negrito: os dois
 * padrões do navegador brigam com a hierarquia do balão, onde quem pesa é o
 * número e não o nome dele. */
.balao .linha b { font-weight: 400; color: #a6cbbb; }
.balao .linha em { font-style: normal; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }

/* -- as chaves da legenda ------------------------------------------------- */

.canvas-legenda .chave i { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.canvas-legenda .chave svg { flex: none; }


/* ==========================================================================
 * O CARTÃO DE FIGURAS: barra de escolha, quadro do canvas, legenda e balão.
 *
 * Estava COPIADO na folha de cada produto, com um comentário em cada cópia
 * dizendo que o lugar dela era aqui. O oitavo produto foi escrito sem o
 * bloco e a página abriu com a barra de figuras e a legenda em texto corrido,
 * uma palavra colada na outra — e o auditor mecânico não viu nada de errado,
 * porque texto sem estilo não se sobrepõe e não perde contraste.
 *
 * É a segunda vez que essa duplicação cobra: antes foram `.wide` e `.pilula`
 * em quatro produtos. Agora ela mora num lugar só.
 * ======================================================================== */
.ferramentas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px 0 12px; border-bottom: 1px solid #e4efea; margin-bottom: 12px;
}
.ferramenta {
  display: grid; gap: 1px; text-align: left; cursor: pointer;
  border: 1px solid #d6e3dd; background: #fff; border-radius: 8px; padding: 6px 11px;
}
.ferramenta b { font-size: .76rem; font-weight: 600; color: #0b2b21; }
.ferramenta small { font-size: .66rem; color: #5a7469; }
.ferramenta.ativa { border-color: #0e6b4f; background: #0e6b4f; }
.ferramenta.ativa b, .ferramenta.ativa small { color: #fff; }

.canvas-wrap {
  position: relative;
  border: 1px solid #e4efea; border-radius: 12px; background: #fbfdfc; overflow: hidden;
}
.canvas-wrap svg { display: block; width: 100%; height: auto; }
.canvas-dica { margin: 8px 0 0; font-size: .73rem; color: #5a7469; min-height: 1.2em; }
.canvas-legenda { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.canvas-legenda .chave {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; color: #46655a; white-space: nowrap;
}

/* O balão do cursor. Um gráfico em HTML É interativo, e entregar SVG estático
 * desperdiça o único canal que o papel não tem. */
.balao {
  position: absolute; top: 11%; z-index: 3; pointer-events: none;
  min-width: 190px; max-width: 290px; padding: 10px 12px;
  background: #0b2b21; color: #e7f2ed; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(11, 43, 33, .22);
  font-size: .74rem; line-height: 1.45; display: grid; gap: 5px;
}
.balao[hidden] { display: none; }
.balao b { font-weight: 600; color: #fff; }
.balao .linha { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: baseline; }
.balao .linha i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.balao .linha small { grid-column: 2 / -1; color: #b9d4c8; font-size: .68rem; }

/* `[hidden]` PRECISA VENCER O `display` DA FOLHA-BASE.
 *
 * A folha-base declara `[hidden] { display: none }` sem `!important`, e logo
 * depois `.field-grid label:not(.checkbox) { display: flex }` — que tem
 * especificidade maior e vence. O resultado é um campo marcado como oculto que
 * continua na tela: "faixas por sentido" aparecia em pista simples, e só foi
 * pego olhando a página, porque `el(...).hidden` devolve `true` e a
 * conferência por propriedade não vê nada de errado.
 *
 * Vale para toda a família, e não só para este produto. */
.workspace [hidden] { display: none !important; }