/*
 * canvas.css — o contrato das regiões do Canvas
 * (CARD-PRODUCT-WORKSPACE-003).
 *
 * 🎯 **UMA definição, dois documentos.** O Portal desenha o Canvas para
 * as telas que ele próprio monta; o módulo GFT desenha as MESMAS três
 * regiões para o App que vive dentro do `iframe`. **Descrever o contrato
 * duas vezes seria vê-lo divergir na primeira correção** — e a divergência
 * apareceria como "a Farm não parece o resto do produto", que é
 * exatamente o que esta série de Cards veio eliminar.
 *
 * ♻️ **É o mesmo caminho que o `recommendation-view.css` já abriu**
 * (CARD-ARCH-001): arquivo na raiz do repositório, publicado nos dois
 * diretórios pelo `build-static.sh` e servido aos dois pelo dev-server.
 *
 * ⚠️ **A FRONTEIRA QUE ESTE ARQUIVO NÃO APAGA, e é preciso dizer:** as
 * regiões do Canvas do Portal e as do módulo são **nós diferentes, em
 * documentos diferentes**. Um `iframe` é um bloco só — ele não tem como
 * ocupar três irmãos no documento de fora. O que este arquivo garante é
 * que as duas famílias obedeçam ao **mesmo contrato**; tirar a Farm do
 * `iframe` é outro Card, e não cabe em "somente UX".
 *
 * ⛔ **Sem cor, sem fonte, sem animação.** Só estrutura — quem tem cor é
 * o resultado do cálculo.
 */

/* ─────────────── ④ A ÁREA PRINCIPAL — o fluxo principal ───────────────

   🔒 Entrada → ação, e nada opcional entre as duas. A regra é do
   CARD-PRODUCT-WORKSPACE-003 e do UX-02 do KB-204; aqui ela é só a
   caixa que a sustenta. */
.canvas__principal {
  display: flex;
  /* 📐 Coluna: no Portal ela hospeda um `iframe` só, mas no módulo ela
     hospeda entrada e ação, empilhadas. Uma linha as poria lado a lado. */
  flex-direction: column;
  gap: var(--espaco-5);
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* ─────────────── ⑦ A ÁREA DE RESULTADO ───────────────

   ⛔ Vazia, ela não ocupa um pixel — e quem decide isso é o `:empty`.
   Um `hidden` em JavaScript seria uma decisão que alguém esquece de
   reverter; `:empty` não tem como ficar desatualizado. */
/* ⚠️ **Sem `max-height` aqui, e a ausência é medida.** Uma percentagem
   só resolve contra altura definida — o Workspace do Portal tem uma, a
   página do módulo não. Deixá-la no contrato daria um teto que funciona
   de um lado e é ignorado do outro, que é pior que não ter. O teto do
   Portal vive no `portal.css`, onde a altura existe. */
.canvas__resultado {
  flex: none;
  padding: var(--espaco-3) var(--espaco-4);
  border-top: 1px solid var(--border-subtle);
}

.canvas__resultado:empty {
  display: none;
}

/* ─────────────── ⑧ A ÁREA AVANÇADA — sempre recolhida ───────────────

   ⚠️ Ela some enquanto o corpo estiver vazio. Um "Opções avançadas" que
   abre para o nada é o ruído que o CARD-PRODUCT-LAUNCH-004 passou o dia
   removendo da Farm — e ensina a não clicar antes de haver o que ver. */
.canvas__avancada {
  flex: none;
  border-top: 1px solid var(--border-subtle);
}

.canvas__avancada:has(.canvas__avancada-corpo:empty) {
  display: none;
}

.canvas__avancada-titulo {
  cursor: pointer;
  padding: var(--espaco-2) var(--espaco-4);
  color: var(--text-muted);
  font-size: var(--texto-md);
}

.canvas__avancada-titulo:hover {
  color: var(--text-primary);
}

.canvas__avancada-corpo {
  padding: 0 var(--espaco-4) var(--espaco-4);
  max-height: var(--avancada-altura-max);
  overflow-y: auto;
}