/* ==========================================================================
   MODAL DE DIÁLOGO — prefixo mdl-
   Painel centrado sobre <dialog> nativo: cabeçalho parado, corpo que rola por
   dentro com corte em gradiente, rodapé com o link da página completa.

   Tokens usados:
     --bg               fundo do painel (vem do escopo .sec-deep do <dialog>)
     --fg --fg-2        tinta do título e do corpo
     --fg-muted         nota do rodapé e olho
     --rule --rule-2    filete do cabeçalho, do rodapé e da borda do painel
     --accent           marcador da lista, link do rodapé, hover do gatilho
     --veil             véu do ::backdrop — pintado pela .dialog-casca do core
     --display --sans   faces do título e do corpo
     --ease             curva do projeto
     --radius-media     canto do painel
     --disc-size        lado do .btn-disc do core (o botão de fechar)

   A CASCA VEM DO CORE. `class="dialog-casca mdl"`: a primitiva zera a caixa
   que o navegador dá ao <dialog> — padding, borda, fundo e os limites de
   max-content — e pinta o ::backdrop com --veil. O que ela não cobre, de
   propósito, e por isso continua aqui: o `display` de [open], a coreografia
   de entrada e a saída animada antes do close().

   Parafusos do componente:
     --dialog-pad       recuo do painel até a borda da janela. É parafuso DA
                        PRIMITIVA, e não do prefixo: o diálogo usado como
                        palco de tela cheia é o caso nomeado em que a
                        .dialog-casca não zera o padding, e o valor entra por
                        esta variável em vez de por uma declaração local.
     --mdl-dur          tempo da entrada E da saída. O SCRIPT LÊ ESTE VALOR
                        para saber quanto esperar antes de chamar close().
                        Mudar aqui muda os dois lados de uma vez.
     --mdl-max          largura de leitura do painel
     --mdl-corte        altura máxima da faixa de gradiente no topo e na base
                        do corpo que rola. O SCRIPT TAMBÉM LÊ ESTE VALOR
     --mdl-fade-cima    o corte de fato aplicado — ESCRITO PELO SCRIPT, 0 nas
     --mdl-fade-baixo   pontas (no topo não há o que cortar acima)

   O QUE NÃO ESTÁ AQUI, porque o <dialog> nativo entrega: foco preso, Esc,
   devolução do foco a quem abriu, página inerte por trás.
   ========================================================================== */

/* ---- A dobra que dispara ------------------------------------------------ */

.mdl-acoes{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:16px 28px;
  margin-block-start:34px;
}

/* Gatilho secundário: é um <button> de verdade (teclado, Enter, Espaço e o
   anúncio de "botão" vêm de graça), com aparência de link de texto. */
.mdl-link{
  background:none;
  border:0;
  padding:0;
  font-family:var(--sans);
  font-size:.84rem;
  letter-spacing:.06em;
  color:var(--fg-muted);
  border-block-end:1px solid var(--rule-2);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.mdl-link:hover{color:var(--accent);border-color:var(--accent)}

/* ---- O diálogo ---------------------------------------------------------- */

/* O <dialog> nasce display:none na folha do agente do usuário, e QUALQUER
   regra de autor com display vence essa. Escrever `.mdl{display:grid}` sem o
   [open] deixaria os dois diálogos visíveis o tempo todo, empilhados sobre a
   página. É a mesma armadilha do §6.5 do contrato ([hidden] que não esconde),
   na versão do elemento nativo — por isso o display mora em .mdl[open]. */
.mdl{
  /* O recuo até a borda da janela, pela variável da primitiva. Padding, borda,
     fundo e os limites de max-content são dela; o que fica aqui é o tamanho:
     o diálogo tem de ocupar a janela inteira. */
  --dialog-pad:clamp(16px,5vh,56px) clamp(16px,5vw,56px);
  --mdl-dur:.42s;
  --mdl-max:680px;
  --mdl-corte:30px;

  inline-size:100%;
  block-size:100%;
  /* O diálogo não rola: quem rola é .mdl-corpo, por dentro do painel. A
     primitiva já troca o `overflow:auto` do agente do usuário por `visible`,
     que também não rola; `hidden` fica porque durante a entrada o painel está
     18px abaixo e desfocado — clipar na borda mantém a caixa do diálogo igual
     à janela em qualquer quadro (medido: 1425x900 no desktop, 375x844 em
     390px de largura). */
  overflow:hidden;
}

/* O diálogo ocupa a janela inteira de propósito, e não é firula de layout: é
   o que faz o clique no vazio ter alvo. O ::backdrop não é alvo de evento —
   um clique fora de um painel pequeno cairia na página inerte por baixo e
   nada aconteceria. Com o <dialog> cobrindo tudo, `e.target === dialog`
   significa exatamente "clicou fora do painel". */
/* FLEX, e não grid, e a diferença é medível. Num grid de linha automática, a
   altura da linha é o conteúdo — então `max-block-size:100%` no painel resolve
   contra a própria linha que ele acabou de esticar, o limite nunca morde e o
   painel passa da janela. Medido a 1440x900 com display:grid: janela 900,
   diálogo 900, painel 919,5px, e o corpo sem régua de rolagem nenhuma. Em
   flex a porcentagem resolve contra a caixa de conteúdo do container, que é
   definida (900 menos o recuo), e o painel para onde deve. */
.mdl[open]{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* O véu é da .dialog-casca — `background:var(--veil)`, na camada que o
   navegador já pinta acima de tudo, inclusive de nav fixa e cursor, sem caixa
   própria. Este componente escurecia 72% e passa aos 78% do token: seis pontos
   que ninguém vê, e um número que deixa de viver em dois lugares (ficha.md).

   O QUE SOBRA AQUI, e por que não pode vir da primitiva:
     · A SATURAÇÃO. A primitiva serve `blur(var(--dialog-blur,6px))`, e
       backdrop-filter é uma propriedade só — não há como somar saturate(120%)
       à declaração dela sem reescrevê-la inteira. Por isso o filtro completo
       fica aqui, e --dialog-blur não tem efeito neste componente.
     · A coreografia de opacidade, que a primitiva não cobre de propósito.

   O FALLBACK DENTRO DO var() NÃO É DESLEIXO. Até o Chrome 121 o ::backdrop não
   herdava custom property do <dialog> de origem: --mdl-dur e --ease chegavam
   vazios e a transição inteira era descartada. Neste Chrome a herança funciona
   (medido: transition-duration = 0.42s, que só pode ter vindo do --mdl-dur do
   diálogo); o fallback mantém a peça de pé onde ela ainda não existe.

   Aqui a máscara em gradiente do §6 não se aplica: a regra existe porque
   backdrop-filter em CAIXA RETA produz borda dura, e esta camada não tem
   borda nenhuma — cobre a janela inteira, de sangria a sangria. */
.mdl::backdrop{
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  opacity:0;
  transition:opacity var(--mdl-dur,.42s) var(--ease,ease);
}
.mdl.is-aberto::backdrop{opacity:1}

/* ---- O painel ----------------------------------------------------------- */

.mdl-painel{
  display:flex;
  flex-direction:column;
  inline-size:min(100%,var(--mdl-max));
  max-block-size:100%;
  background:var(--bg);
  border:1px solid var(--rule-2);
  border-radius:var(--radius-media);
  /* Nada entra seco (§5): blur indo a zero, junto do fade e de uma subida
     curta. A subida é de 18px, e não dos 22px do [data-rv] do core: o painel
     nasce no meio da tela, sem viagem de dobra a percorrer. */
  opacity:0;
  filter:blur(14px);
  transform:translateY(18px);
  transition:opacity var(--mdl-dur) var(--ease),
             filter var(--mdl-dur) var(--ease),
             transform var(--mdl-dur) var(--ease);
}
.mdl.is-aberto .mdl-painel{
  opacity:1;
  filter:blur(0);
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  /* O diálogo continua abrindo — ele foi PEDIDO, não anda sozinho. Some só a
     coreografia: o painel e o véu nascem no estado final. O script lê
     LIB.reduce e fecha na hora, sem esperar transição que não existe. */
  .mdl-painel{opacity:1;filter:none;transform:none;transition:none}
  .mdl::backdrop{opacity:1;transition:none}
}

/* ---- Cabeçalho: parado enquanto o corpo rola ---------------------------- */

.mdl-topo{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  gap:20px;
  padding:28px 32px 20px;
  border-block-end:1px solid var(--rule);
}
/* min-inline-size:0 é o que permite o título quebrar dentro do flex em vez de
   empurrar o botão de fechar para fora do painel. */
.mdl-topo-texto{min-inline-size:0}

.mdl-titulo{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.02em;
  font-size:clamp(21px,2.5vw,29px);
  line-height:1.16;
  color:var(--fg);
  margin-block-start:12px;
}

.mdl-fechar{margin-inline-start:auto}
.mdl-fechar svg{
  inline-size:42%;
  stroke:currentColor;
  stroke-width:1.7;
}

/* ---- Corpo: o único que rola ------------------------------------------- */

.mdl-corpo{
  --mdl-fade-cima:0px;
  --mdl-fade-baixo:0px;
  flex:1 1 auto;
  /* min-block-size:0 NÃO é redundante, e sem ele o componente inteiro não
     funciona. Item de flex nasce com min-block-size:auto, que o proíbe de
     encolher abaixo do próprio conteúdo: o painel crescia até a altura do
     texto e passava da janela, e o corpo nunca chegava a rolar. Medido a
     1440x900: painel de 920px numa janela de 900, com scrollHeight igual ao
     clientHeight — ou seja, régua de rolagem nenhuma. */
  min-block-size:0;
  overflow-y:auto;
  /* Chegar ao fim do texto não pode continuar rolando a página por baixo. */
  overscroll-behavior:contain;
  padding:26px 32px 28px;
  color:var(--fg-2);
  /* O corte do texto é MÁSCARA, não sombra: sombra dura desenha uma linha
     onde não há borda nenhuma e o texto parece passar por baixo de um degrau.
     As duas faixas são escritas pelo script e valem 0 nas pontas — no topo da
     rolagem não há o que cortar acima. */
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--mdl-fade-cima),#000 calc(100% - var(--mdl-fade-baixo)),transparent 100%);
}

/* O foco entra PARA DENTRO. O :focus-visible do core desenha o contorno com
   outline-offset:3px, do lado de fora da caixa — e a máscara acima recorta
   tudo que é pintado fora da borda do elemento, inclusive o contorno. O anel
   ficaria invisível justamente no elemento que recebe o foco ao abrir. */
.mdl-corpo:focus-visible{outline-offset:-3px}

/* Prosa livre: elemento descendente do prefixo é o que o §6.3 autoriza, e é o
   caso em que exigir classe não paga — o texto vem de quem escreve conteúdo,
   não de quem escreve markup. */
.mdl-corpo p{
  margin-block-end:1.05em;
  font-size:.97rem;
  line-height:1.72;
}
.mdl-corpo p:last-child{margin-block-end:0}
.mdl-corpo strong{color:var(--fg);font-weight:500}

.mdl-lista{
  display:grid;
  gap:14px;
  margin-block:0 1.5em;
}
.mdl-lista li{
  position:relative;
  padding-inline-start:24px;
  font-size:.93rem;
  line-height:1.62;
}
/* Traço, e não bolinha: é o mesmo sinal do ::before do .eyebrow do core. */
.mdl-lista li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  inset-block-start:.72em;
  inline-size:11px;
  block-size:1px;
  background:var(--accent);
}

/* ---- Rodapé: a saída para a página de verdade -------------------------- */

.mdl-rodape{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px 24px;
  padding:18px 32px 22px;
  border-block-start:1px solid var(--rule);
}
/* Tipografia pela primitiva .nota do core. Os dois parafusos: o corpo é o
   .74rem do rodapé do diálogo, um degrau abaixo do padrão porque a nota
   divide a linha com o link de saída; 44ch é a medida dessa metade. */
.mdl-nota{
  --nota-size:.74rem;
  --nota-max:44ch;
}
.mdl-saida{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  border-block-end:1px solid transparent;
  transition:border-color .35s var(--ease);
  white-space:nowrap;
}
.mdl-saida:hover{border-color:var(--accent)}

/* ---- Mobile ------------------------------------------------------------- */

@media (max-width:640px){
  /* Recuo menor: em tela estreita, 56px de margem comem meia coluna de
     leitura. O painel encosta quase na borda e o corpo ganha o resto. */
  .mdl{--dialog-pad:14px 12px}
  .mdl-topo{padding:22px 20px 16px;gap:14px}
  .mdl-corpo{padding:20px 20px 22px}
  /* A nota e o link empilham: lado a lado em 320px o link quebraria no meio. */
  .mdl-rodape{padding:16px 20px 18px;justify-content:flex-start}
  .mdl-fechar{--disc-size:38px}
}