/*
 * 12_modal.css — ONDA S, bloco MOTOR · docs/MARCA.md §3
 * ═══════════════════════════════════════════════════════════════════════════
 * O padrão CARD → MODAL do produto inteiro. Número 12 para carregar DEPOIS de
 * 10_componentes.css, que já desenhou o `.modal` da onda D (caixa centrada no
 * desktop, folha subindo do rodapé no celular). Esta folha não reescreve
 * aquilo: acrescenta o que faltava para o padrão funcionar de verdade —
 *
 *   · a SAÍDA animada (a folha 10 só tinha entrada: `<dialog>` fechado some de
 *     um quadro para o outro, porque `display` não é animável e a caixa
 *     simplesmente pisca para fora);
 *   · o fundo escuro entrando e saindo junto, em vez de aparecer cortado;
 *   · a GAVETA (`.modal--gaveta`), que é folha em TODA largura — para menu,
 *     filtro e ação rápida, onde uma janelinha no meio do desktop é pior;
 *   · o ARRASTO para fechar no celular (`--gaveta-arrasto`);
 *   · a trava de rolagem do fundo SEM pulo de layout;
 *   · o `.detalhe`, que é a MESMA tela renderizada em página cheia quando a
 *     URL é aberta direto, sem passar por card nenhum.
 *
 * ── POR QUE A SAÍDA É CLASSE E NÃO `allow-discrete` ───────────────────────
 * `transition-behavior: allow-discrete` + `@starting-style` animariam
 * abertura e fechamento em CSS puro, e era o caminho bonito. Ele foi recusado
 * por dois motivos concretos, nesta ordem:
 *   1. a folha 10 já anima a ENTRADA com `animation:`, e `animation` e
 *      `transition` disputando a mesma propriedade num `<dialog>[open]` é
 *      exatamente o tipo de conflito que aparece só num navegador;
 *   2. o modal daqui fecha por QUATRO caminhos (Esc, clique fora, botão,
 *      arrasto) e em todos eles o controller precisa saber QUANDO o elemento
 *      saiu de cena, para devolver o foco ao card e destravar a rolagem. Com
 *      classe + `animationend` esse instante existe e é um evento; com
 *      `allow-discrete` ele é um efeito colateral do navegador.
 * O preço é uma classe a mais no JS. O ganho é que o fechamento é observável,
 * e é no fechamento que mora a acessibilidade do padrão.
 */

/* ═══ O FUNDO ═════════════════════════════════════════════════════════════ */

.modal[open]::backdrop {
  animation: fundo-entra var(--tempo-normal) var(--curva-padrao) both;
}
@keyframes fundo-entra { from { opacity: 0 } }

/* ═══ SAÍDA ═══════════════════════════════════════════════════════════════
   O controller põe `.modal--saindo`, espera o `animationend` e só então chama
   `close()`. `both` segura o último quadro para que não haja pisca entre o fim
   da animação e a remoção do elemento.

   ── POR QUE TODO SELETOR DE SAÍDA CARREGA `[open]`, E ISTO CUSTOU MEIO ────
   ── SEGUNDO EM TODO FECHAMENTO DE MODAL NO CELULAR ───────────────────────
   Quem está animando o elemento quando a classe chega é `.modal[open]`
   (folha-sobe, 10_componentes.css) — especificidade (0,2,0). Um
   `.modal--saindo` sozinho é (0,1,0) e PERDE: o `animation-name` não muda,
   `animationend` nunca dispara, e quem fecha o modal é a rede de 500 ms do
   controller. A folha fica parada e 100% opaca por meio segundo e some num
   quadro — nos quatro caminhos (Esc, X, clique fora, arrasto).
   No desktop o defeito não aparecia porque a regra de lá tem um `:not()` a
   mais e já ganhava por acidente. Toda regra de saída daqui para frente
   carrega `[open]` de propósito: é ele que empata com quem anima a entrada, e
   a classe é que desempata. O mesmo vale para o `::backdrop`, cuja regra de
   entrada mora seis linhas acima desta.                                     */

.modal[open].modal--saindo { animation: modal-sai var(--tempo-rapido) var(--curva-saida) both }
.modal[open].modal--saindo::backdrop { animation: fundo-sai var(--tempo-rapido) var(--curva-saida) both }
@keyframes fundo-sai { to { opacity: 0 } }

/* No celular a saída é o caminho de volta da entrada: desce. E ela sai de
   ONDE A FOLHA ESTÁ — se o dedo a arrastou 320 px para baixo, `--gaveta-arrasto`
   continua valendo na caixa durante a saída (ver folha_controller#soltar). */
@keyframes modal-sai { to { opacity: 0; transform: translate3d(0, 12%, 0) } }

@media (min-width: 40rem) {
  /* No desktop ela encolhe no lugar, como a `caixa-entra` da folha 10 ao
     contrário. Descer uma caixa centrada parece que ela caiu. */
  .modal[open]:not(.modal--gaveta).modal--saindo {
    animation: caixa-sai var(--tempo-rapido) var(--curva-saida) both;
  }
  @keyframes caixa-sai { to { opacity: 0; transform: scale(0.97) } }
}

/* ═══ ARRASTO (folha/gaveta no celular) ═══════════════════════════════════
   O `folha_controller` escreve `--gaveta-arrasto` em pixels enquanto o dedo
   desce. Anima só `transform`, e a transição é DESLIGADA durante o arrasto
   (`.modal--arrastando`) para o movimento colar no dedo — com transição ligada
   o dedo vai na frente da folha e a sensação é de latência.                 */

.modal__caixa {
  transform: translate3d(0, var(--gaveta-arrasto, 0px), 0);
  transition: transform var(--tempo-normal) var(--curva-entrada);
  /* A rolagem de dentro não empurra a página de trás quando chega ao fim. */
  overscroll-behavior: contain;
}
.modal--arrastando .modal__caixa { transition: none }

/* O puxador é ALVO DE TOQUE, não enfeite: a folha 10 desenha uma barrinha de
   4 px e nela ninguém acerta o dedo. A barra vira o `::after` de uma área de
   toque de `--alvo` (48 px, o mesmo mínimo de todo alvo do sistema — §15), com
   `touch-action: none` para que o arrasto não seja confundido com rolagem da
   folha. A primeira versão desta regra dizia 44 px no comentário e desenhava
   1,75rem = 28 px: o número medido é o que vale, e ele agora é o token.
   A margem negativa é a do padding da caixa (`--esp-5`), então a área de toque
   começa na quina de cima da folha — que é onde o dedo pousa. */
.modal__puxador {
  width: 100%;
  height: var(--alvo);
  background: none;
  border: 0;
  margin: calc(var(--esp-5) * -1) 0 var(--esp-1);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  position: relative;
}
.modal__puxador::after {
  content: "";
  width: 2.5rem;
  height: 0.25rem;
  border-radius: var(--raio-redondo);
  background: var(--borda-forte);
  transition: background-color var(--tempo-rapido) var(--curva-padrao),
              width var(--tempo-normal) var(--curva-entrada);
}
.modal--arrastando .modal__puxador { cursor: grabbing }
.modal--arrastando .modal__puxador::after { background: var(--cor-marca) }

/* ═══ CABEÇALHO E FECHAR ══════════════════════════════════════════════════
   A folha 10 tem `.modal__titulo` e `.modal__corpo`, mas não tinha linha de
   cabeçalho nem botão de fechar — e o botão é um dos TRÊS caminhos que a
   MARCA.md §3 exige (Esc, clique fora, botão).                              */

.modal__cabecalho {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  margin-bottom: var(--esp-4);
}
.modal__cabecalho .modal__titulo { margin: 0; flex: 1; min-width: 0 }
.modal__olho-de-peixe { margin: var(--esp-1) 0 0; font-size: var(--texto-sm); color: var(--texto-tenue) }

.modal__fechar {
  flex: none;
  width: var(--alvo);
  height: var(--alvo);
  margin: calc(var(--esp-2) * -1) calc(var(--esp-2) * -1) 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--raio-2);
  background: none;
  color: var(--texto-tenue);
  cursor: pointer;
  transition: color var(--tempo-rapido) var(--curva-padrao),
              background-color var(--tempo-rapido) var(--curva-padrao),
              transform var(--tempo-rapido) var(--curva-saida);
}
.modal__fechar:hover { background: var(--fundo-fundo); color: var(--texto) }
.modal__fechar:active { transform: scale(0.92) }

.modal__corpo { max-height: none }
.modal__acoes { display: flex; flex-direction: column; gap: var(--esp-3) }
@media (min-width: 40rem) {
  .modal__acoes { flex-direction: row; justify-content: flex-end }
}

/* ═══ GAVETA ══════════════════════════════════════════════════════════════
   Folha em TODA largura, inclusive no desktop. É o `shared/_gaveta`: menu de
   conta, filtro de relatório, ação rápida — lugares onde uma janelinha
   centrada obriga o olho a atravessar a tela e voltar.                      */

@media (min-width: 40rem) {
  .modal--gaveta[open] {
    inset: auto 0 0;
    margin: 0;
    /* `<dialog>` nasce `width: fit-content` no estilo do navegador: com
       `left:0; right:0` ele NÃO estica, encolhe no conteúdo e cola no canto
       esquerdo. No celular isso passa despercebido porque a folha 10 dá
       `width: 100vw` à caixa; aqui a caixa tem largura máxima, então quem
       precisa esticar é o diálogo — senão a gaveta abre encostada na quina
       esquerda da tela grande, que foi como ela apareceu no primeiro print. */
    width: 100%;
    max-width: 100%;
    animation: folha-sobe var(--tempo-lento) var(--curva-entrada) both;
  }
  .modal--gaveta .modal__caixa {
    width: min(44rem, 100vw);
    margin: 0 auto;
    border-radius: var(--raio-4) var(--raio-4) 0 0;
    padding-bottom: calc(var(--esp-5) + env(safe-area-inset-bottom));
  }
  .modal--gaveta .modal__puxador { display: flex }

  /* E o modal COMUM volta a esconder o puxador na tela grande. A folha 10 já
     fazia isso, mas esta folha carrega depois dela e redeclarou
     `.modal__puxador { display: flex }` na base — sem esta linha o puxador
     reapareceria no desktop, onde não há gesto nenhum para ele prometer. */
  .modal:not(.modal--gaveta) .modal__puxador { display: none }
}

/* ═══ TRAVA DE ROLAGEM SEM PULO ═══════════════════════════════════════════
   `overflow: hidden` no <html> tira a barra de rolagem, a página fica ~15 px
   mais larga e TUDO salta para a direita no instante em que o modal abre.

   `scrollbar-gutter: stable` reserva a calha de uma vez por todas, então
   esconder a barra não muda mais a largura do conteúdo — é a solução nativa e
   custa zero JS. Ela fica no <html> e vale o tempo todo, de propósito: uma
   calha que aparece só quando o modal abre é o mesmo salto, adiado.

   Navegador que não conhece `scrollbar-gutter` (Safari antigo) cai no
   `--largura-da-barra`, que o `modal_controller` mede e escreve por CSSOM. É
   fallback e não o caminho principal: CSSOM é o único jeito de pôr valor
   dinâmico em estilo neste projeto, já que a CSP com nonce descarta
   `style=` inline (ver 02_base.css, `progress`). */
html { scrollbar-gutter: stable }

html.rolagem-travada {
  overflow: hidden;
  padding-right: var(--largura-da-barra, 0px);
}
@supports (scrollbar-gutter: stable) {
  html.rolagem-travada { padding-right: 0 }
}

/* ═══ A MOLDURA ═══════════════════════════════════════════════════════════
   `<turbo-frame>` é elemento desconhecido para o CSS: nasce `display: inline`,
   e um inline vazio no meio do <body> herda `line-height` e abre um buraco de
   alguns pixels em toda tela do produto. `display: contents` some com a caixa
   sem tirar o filho do fluxo — e o filho aqui é um `<dialog>`, que é
   `position: fixed` e não liga para o pai de qualquer jeito.                */

.moldura-de-modal { display: contents }

/* ═══ O MESMO CONTEÚDO, EM PÁGINA CHEIA ═══════════════════════════════════
   Este é o teste que separa modal bem feito de modal quebrado: abrir a URL
   direto — do WhatsApp, do histórico, de um e-mail — tem que dar TELA, não um
   modal órfão nem um pedaço de HTML solto. O helper `detalhe_em_modal` é o
   mesmo nos dois casos; só o invólucro muda, e o invólucro de página é este. */

.detalhe {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--esp-6) 0 var(--esp-12);
}
.detalhe__voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--alvo);
  margin-bottom: var(--esp-4);
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  text-decoration: none;
}
.detalhe__voltar:hover { color: var(--cor-marca) }
.detalhe__voltar .botao__icone,
.detalhe__voltar svg { transition: transform var(--tempo-rapido) var(--curva-saida) }
.detalhe__voltar:hover svg { transform: translateX(-3px) }

.detalhe__titulo { margin: 0 0 var(--esp-2); font-size: var(--texto-3xl) }
.detalhe__olho-de-peixe { margin: 0 0 var(--esp-6); color: var(--texto-tenue) }
.detalhe__corpo { max-width: var(--largura-leitura) }
.detalhe__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-8) }