/* A superfície de canvas interativo dos produtos EP.
 *
 * Acompanha `ep-canvas-interativo.mjs`. O que esta folha cobre é a MOLDURA da interação —
 * a superfície, a barra de ferramentas, os controles de zoom, a faixa de modo e
 * a legenda. O desenho em si é SVG do produto, e usa as classes de
 * `ep-grafico.css`, que tem de ser ligada antes desta.
 *
 * O NOME LEVA "interativo" DE PROPÓSITO. Já existe `ep-canvas.mjs` no
 * repositório, e ele é outra coisa: um conjunto de primitivas de DESENHO —
 * cotas, glifos, escala gráfica, séries — usado por trinta produtos. Este é o
 * núcleo de INTERAÇÃO. Dois arquivos com o mesmo nome de conceito diferente é
 * convite ao acidente, e o acidente aconteceu: a primeira versão deste núcleo
 * foi escrita sobre `ep-canvas.mjs` e derrubou os trinta.
 *
 * Por que uma folha própria e não um bloco em ep-grafico.css: o cartão de
 * figura é ESTÁTICO — legenda, botões de figura, dica. O canvas é
 * INTERATIVO — cursor por ferramenta, estado de arrasto, snap, seleção. Juntar
 * os dois deixaria todo produto com figura carregando regra de canvas que ele
 * não usa, e foi o que tornou as folhas antigas difíceis de mexer.
 */

.canvas-superficie {
  position: relative;
  border: 1px solid #dfe8e4;
  border-radius: 12px;
  background: #fafcfb;
  overflow: hidden;
  /* A altura é do produto, porque ela depende do que se desenha: uma elevação
   * de viga é larga e baixa, uma seção composta é quase quadrada. O piso
   * impede que a grade nasça com 1 px enquanto a página se acomoda. */
  min-height: 260px;
}
.canvas-superficie svg {
  display: block;
  width: 100%;
  height: 100%;
  /* `touch-action: none` é o que faz o arrasto funcionar no trackpad e no
   * toque: sem ele o navegador rola a página em vez de dar pan no canvas. */
  touch-action: none;
  user-select: none;
}

/* -- a barra de ferramentas ------------------------------------------------ */
.canvas-ferramentas {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 0 10px;
}
.canvas-ferramentas button {
  display: grid; gap: 1px; text-align: left;
  padding: 6px 11px; border: 1px solid #d8e4df; border-radius: 9px;
  background: #fff; color: #0b2b21; cursor: pointer; font-family: inherit;
  font-size: .74rem; line-height: 1.2;
}
.canvas-ferramentas button small { color: #62766e; font-size: .64rem; }
.canvas-ferramentas button:hover { background: #f2f8f5; }
.canvas-ferramentas button.ativa {
  background: #0e6b4f; border-color: #0e6b4f; color: #fff;
}
.canvas-ferramentas button.ativa small { color: #cfe8dd; }
.canvas-ferramentas .separador { flex: 1; }

/* -- controles de vista, sobre a superfície -------------------------------- */
.canvas-vista {
  position: absolute; right: 10px; top: 10px;
  display: flex; gap: 4px; align-items: center;
  padding: 4px; border-radius: 9px;
  background: rgba(255, 255, 255, .92); border: 1px solid #dfe8e4;
}
.canvas-vista button {
  width: 26px; height: 26px; padding: 0; border-radius: 7px;
  border: 1px solid #d8e4df; background: #fff; color: #0b2b21;
  cursor: pointer; font-family: inherit; font-size: .82rem; line-height: 1;
}
.canvas-vista button:hover { background: #f2f8f5; }
.canvas-vista button.largo { width: auto; padding: 0 9px; font-size: .7rem; }
.canvas-vista output {
  min-width: 44px; text-align: center; font-size: .68rem; color: #46655a;
}

/* -- a faixa de modo: diz o que a ferramenta ativa faz --------------------- */
.canvas-modo {
  position: absolute; left: 10px; top: 10px;
  max-width: 58%;
  padding: 6px 10px; border-radius: 9px;
  background: rgba(255, 255, 255, .92); border: 1px solid #dfe8e4;
  font-size: .68rem; color: #46655a; line-height: 1.35;
}
.canvas-modo strong {
  display: block; font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: #0e6b4f;
}

/* -- a legenda do que está desenhado -------------------------------------- */
.canvas-chaves {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding-top: 9px; font-size: .68rem; color: #46655a;
}
.canvas-chaves .chave { display: inline-flex; align-items: center; gap: 6px; }
.canvas-chaves .chave i {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
}

/* O aviso de que o modelo não cabe ou está vazio, dentro da superfície. */
.canvas-superficie .vazio {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; padding: 24px; color: #62766e; font-size: .78rem;
  line-height: 1.5; pointer-events: none;
}