/* ═══════════════════════════════════════════════════════════════════════
   AS CAMADAS — quem fica por cima, e por que uma folha sumia
   ═══════════════════════════════════════════════════════════════════════

   Nasceu em 22/09/2026, com o Boss dizendo: *"em mercado de fragmento, teve
   vez que o filtro não abriu"*.

   ELE ABRIA. Abria 10.735 pixels abaixo da janela.

   ═══════════════════════════════════════════════════════════════════════
   O QUE ESTAVA ACONTECENDO, MEDIDO
   ═══════════════════════════════════════════════════════════════════════

   Com o MERCADO DE FRAG carregado, a tela tem 11.424 px de altura. A folha
   de filtros é `position: fixed; inset: 0`, ou seja: "colada na JANELA".
   Só que ela nascia dentro do `#screen-montar`, e o resultado medido era:

       janela                   812 px de altura
       a tela #screen-montar  11.424 px
       a caixa dos filtros    top 10.735 · bottom 11.450     INVISÍVEL
       a barra de custo       top 11.383 · bottom 11.432     INVISÍVEL

   A causa é uma regra do CSS que quase ninguém lembra:

       um `position: fixed` deixa de se referir à JANELA e passa a se
       referir ao ANCESTRAL, se esse ancestral tiver `transform`,
       `filter`, `perspective`, `backdrop-filter` ou `will-change`
       diferente de `none`.

   E o `#screen-montar` TEM transform. Não porque alguém escreveu, mas por
   causa disto, no `legado/css/02-principal.css`:

       .screen.active { animation: fadeIn 0.35s ease forwards; }
       @keyframes fadeIn { from{ transform: translateY(8px) }
                           to  { transform: translateY(0)   } }

   O `forwards` manda GUARDAR o último quadro da animação. O último quadro é
   `transform: translateY(0)` — que não move nada, mas **é um transform**. A
   tela fica com `matrix(1,0,0,1,0,8)` pra sempre, e toda folha fixa de
   dentro dela passa a medir o mundo pela tela, não pela janela.

   Por isso era "às vezes": em tela curta a folha caía 20 px fora e parecia
   normal; em tela longa ela caía 10 mil px fora e parecia que não abriu.

   ⚠️ E NÃO ERA SÓ A MINHA FOLHA. Medido no mesmo dia, o escolher-carta e o
   escolher-formação do SQUAD BUILDER (que são do app de hoje, e ninguém
   tinha reparado) abriam com o pé 336 px abaixo da janela.

   ═══════════════════════════════════════════════════════════════════════
   O CONSERTO
   ═══════════════════════════════════════════════════════════════════════

   Tirar o `forwards` do fadeIn. A animação continua igual (ela roda os 0,35
   s e faz o mesmo movimento); o que muda é que, ao terminar, a tela volta ao
   estilo dela — que não tem transform nenhum. O `opacity: 1` fica escrito
   aqui também, pra a tela não depender do quadro final da animação pra
   ficar visível.

   Uma linha, e toda folha fixa do app inteiro volta a se colar na janela:
   as minhas (filtros do FRAG, barra de custo, opções do TOP 10) e as do
   legado (escolher carta, escolher formação, relatório, sorteio do draft).

   O `fade-out` CONTINUA com `forwards`, e é de propósito: ele precisa
   guardar o `opacity: 0` até o `display: none` chegar, senão a tela que
   está saindo pisca de volta. Tela saindo não abre folha nenhuma.

   🛟 A rede: `ferramentas/conferir-telas-22-09.js` passou a exigir que a
   folha aberta esteja DENTRO da janela. Se um dia entrar um `filter` ou um
   `transform` novo numa tela, a régua reprova antes de você ver.
   ═══════════════════════════════════════════════════════════════════════ */

.screen.active {
  opacity: 1;
  animation-fill-mode: none;
}