/* ===================================================================
   A CAMADA DE ACESSIBILIDADE.

   -------------------------------------------------------------------
   POR QUE ELA EXISTE, E POR QUE É UM ARQUIVO SÓ.

   O conteúdo deste aplicativo são 138 páginas, e cada uma carrega o seu
   próprio `<style>` dentro do corpo — 655 regras `:focus` espalhadas,
   e a mesma paleta declarada num `:root` por arquivo. Consertar
   contraste e foco arquivo por arquivo seria consertar 138 vezes e
   deixar a 139ª nascer errada.

   Então a correção mora aqui, e os geradores de página passam a
   carregar este arquivo. Os valores foram CALCULADOS, não escolhidos:
   cada troca abaixo traz a razão de contraste medida antes e depois.

   -------------------------------------------------------------------
   ONDE ELE É CARREGADO, E POR QUE NO FIM DO CORPO.

   Nas páginas de conteúdo o `<style>` do material está DENTRO do corpo.
   Uma folha ligada no `<head>` perderia toda disputa de especificidade
   igual — então este arquivo é ligado imediatamente antes de
   `</body>`, depois do estilo do material e depois do estilo da aba
   lateral. Na tela inicial ele vem depois do `<style>` do `<head>`.

   `!important` aparece em UM lugar só: o bloco do foco. O motivo está
   escrito lá.
   =================================================================== */

/* ===================================================================
   1. OS TOKENS

   O QUE MUDA E O QUE NÃO MUDA. A identidade é marrom, creme e dourada,
   e nenhum marrom nem creme foi tocado. O que muda é o DOURADO, que
   tinha um valor só para dois usos incompatíveis: enfeite (onde ele é
   bonito) e texto (onde ele era ilegível).

     --gold-500  #c8952f   fica como está: enfeite, fundo e borda não
                           essencial. Branco sobre ele dá 2,69:1, então
                           ele nunca mais recebe texto branco.
     --gold-600  #a97a22 → #7c5812
                           é o dourado de TEXTO. Medido nos seis fundos
                           em que ele aparece de verdade:
                             sobre #fbf6ec  3,55 → 5,98
                             sobre #f6eddc  3,29 → 5,54
                             sobre #f3ead9  3,20 → 5,39
                             sobre #ffffff  3,82 → 6,44
                             sobre #e9dcc6  2,82 → 4,76
                             sobre #efe1c8  2,96 → 4,99
                           O pior caso passa de 2,82 para 4,76:1.
     --gold-700  #8a621c   NOVO: dourado de FUNDO com texto branco.
                           Branco sobre ele dá 5,46:1. É o selo.

   A SUGESTÃO DO PEDIDO ERA #8a621c PARA TEXTO, E EU CALCULEI: sobre o
   creme mais escuro em que o dourado aparece (#e9dcc6) ele dá 4,04:1 —
   reprova por pouco, e justamente no fundo mais comum das tabelas.
   #7c5812 é o primeiro valor da mesma família que passa em TODOS os
   seis fundos. O #8a621c ficou onde ele basta: fundo com texto branco.

   E A COR DO FOCO É #583323, o marrom-700 que já é a cor da marca:
   10,98:1 sobre branco, 8,11:1 sobre o creme mais escuro, 4,08:1 sobre
   o dourado. Sobre MARROM ele não teria contraste nenhum (1,15:1) — e é
   por isso que o foco tem duas camadas, na seção 3.
   =================================================================== */
:root{
  --gold-600:#7c5812;
  --gold-700:#8a621c;
  /* O VERDE DE TEXTO, pelo mesmo raciocínio do dourado: #2f7d4f sobre o
     verde-100 (#e4f3e9) dá 4,39:1 — reprova por pouco, e é o par do
     selo "Aberta" e da nota de ponto da mini-mental. #1f6b3f dá 5,66:1.
     Trocar o token conserta os dois, e os 133 arquivos que o declaram. */
  --green-600:#1f6b3f;
  /* Definidos aqui também como RESERVA, para as telas que usam a paleta
     sem declará-la. A tela inicial pedia `var(--gold-500)` numa borda e
     não definia o token: a borda simplesmente não existia. */
  --gold-500:#c8952f;
  --pqm-foco:#583323;
  --pqm-foco-anel:#ffffff;
  /* A pilha de elementos grudados, medida pelo /acessibilidade.js em
     cada página. Os valores abaixo são a RESERVA, e são os medidos:
     cabeçalho de 64px no computador e 60 no telefone; tarja de sessão
     de 50px no telefone e 26 no computador. */
  --pqm-encaixe-topo:76px;
  --pqm-encaixe-pe:88px;
}

/* ===================================================================
   2. CONTRASTE

   Cada regra abaixo tem a medida que a justifica. A varredura que as
   encontrou está no testes/teste_acessibilidade.cjs: ela abre as 139
   páginas num navegador, lê as cores COMPUTADAS e calcula a razão —
   não procura texto no código.
   =================================================================== */

/* -------- 2.1 O SELO DOURADO COM TEXTO BRANCO -------------------- */
/* 2,69:1 → 5,46:1. O selo aparece ao lado de itens de escala ("rastreio")
   e é a combinação que o pedido nomeou. O dourado claro continua sendo
   a borda e o enfeite; quem recebe texto branco é o --gold-700. */
.scale-screen-badge,
.pqm-selo-dourado{
  background:var(--gold-700,#8a621c);
  color:#fff;
}

/* -------- 2.2 TEXTO ESCURO SOBRE FUNDO ESCURO -------------------- */
/* Quatro famílias em que um token de texto para fundo CLARO foi usado
   dentro de um bloco escuro. Não é questão de gosto: é texto que quase
   não se vê.

     th da tabela da entrevista       #583323 sobre #4a2c1d  1,15:1
     th da tabela do radar            #7b6552 sobre #4a2c1d  2,29:1
     label dentro do painel escuro    #6b4432 sobre #3a2318  1,74:1
     "Ir para o 1º" no painel escuro  #8d2f20 sobre #3a2318  1,79:1

   UMA REGRA GERAL PARA `th` FOI TENTADA E DEU ERRADO, e vale registrar:
   `thead th, table th{color:#f3e6d4}` consertou as quatro páginas de
   cabeçalho escuro e QUEBROU dezesseis de cabeçalho claro — creme sobre
   creme, 1,06:1. O CSS não sabe consultar o fundo computado, e o molde
   (`.book-content th`) já traz o par certo: fundo marrom-800 com texto
   branco. Quem erra são as páginas que trocam SÓ a cor. Então o alvo
   são elas, pela classe da própria tabela.

   #f3e6d4 sobre #4a2c1d dá 10,4:1 e sobre #3a2318 dá 12,1:1. */
/* A LISTA FOI MEDIDA, UMA TABELA DE CADA VEZ, e isso importa: das treze
   classes que trocam a cor do `th`, só QUATRO estão sobre o fundo
   escuro do molde. As outras nove são tabelas de cabeçalho claro, que
   trocam a cor justamente porque o fundo delas é claro — e incluí-las
   aqui foi o erro que a segunda varredura pegou: `.d-tab` e `.ss-tab`
   viraram creme sobre creme, 1,06:1. Pior do que estava.

   Medido no navegador, cada uma na sua página:
     .ds-tab th      #583323 sobre #4a2c1d   1,15:1  →  10,4:1
     .en-tab th      #583323 sobre #4a2c1d   1,15:1  →  10,4:1
     .rc-tab th      #7a4f38 sobre #4a2c1d   1,91:1  →  10,4:1
     .rd-tabela th   #7b6552 sobre #4a2c1d   2,29:1  →  10,4:1 */
.ds-tab th,
.en-tab th,
.rc-tab th,
.rd-tabela th{ color:#f3e6d4; }

/* O painel de resultado das calculadoras é marrom escuro, e tudo o que
   mora nele precisa de tinta clara. O rótulo e a fórmula davam 4,46:1
   (passam a 5,35); o label do seletor dava 1,74:1. */
.calc-result .calc-result-label,
.calc-result .calc-result-formula,
.calc-result .calc-row label,
.calc-result label{ color:#f3e6d4; }

a.pqm-ir, a.phq9-ir, .pqm-ir, .phq9-ir{ color:#f3e6d4; }

/* -------- 2.3 TEXTO CREME SOBRE MARROM MÉDIO -------------------- */
/* MEDIDO DE NOVO, porque a primeira tentativa escureceu o painel errado.
   O fundo dos três textos não é uma cor declarada: é o painel
   `.calc-result` (#6b5a4c) com um realce branco de 8% por cima, o que
   compõe #77675a. Sobre ele, #e7d2b0 dá 3,67:1 e #f3e6d4 dá 4,41 —
   clarear o texto não bastava.

   Então o realce passa a ser ESCURO em vez de claro: o mesmo desenho,
   um degrau para baixo. O composto fica #605144, e o texto creme sobe
   para 5,6:1. */
.calc-result .ca-um,
.calc-result .ca-dois,
.calc-result .ca-tres > div{ background:rgba(0,0,0,.12); }
.ca-rot, .ca-sub, .ca-um em, .ca-caixa em, .ca-tres em{ color:#f3e6d4; }

/* -------- 2.4 TEXTOS AUXILIARES SOBRE CREME --------------------- */
/* O aviso do PDF aparece em 46 páginas: 4,23:1 em 11,6px. #6f5443 dá
   5,97:1 sobre o mesmo creme. */
.pqm-pdf-aviso{ color:#6f5443; }
/* A FITA DE PROCEDÊNCIA DO CAPÍTULO saiu daqui, e vale dizer por quê: a
   cor vinha do token `--dp-fraco`, e o token servia a mais lugares do
   que a fita — inclusive um span sobre o tan (#e7d2b0), que só aparece
   no computador e dava 3,52:1. Trocar o token no arquivo do capítulo
   conserta os dois de uma vez; uma regra para a fita teria consertado
   um e deixado o outro. */
/* O pé dos bancos de questões (3,05:1) e o contador de questões
   (3,34:1): #7a5c47 dá 5,48 e 6,00:1. */
footer.appfoot, .appfoot, .appfoot *{ color:#7a5c47; }
.qnum, #q-position{ color:#7a5c47; }
/* O selo verde "Aberta": 4,39 → 5,66:1. A nota de ponto da mini-mental
   sai de graça, pelo token --green-600 trocado na seção 1.

   AQUI O `!important` SERIA NECESSÁRIO, e por isso ele NÃO está aqui: a
   origem é `.selo-aberto{ color:#2f7d4f !important }`, e o jeito limpo
   de vencer um !important não é outro !important — é a variável. Mas a
   origem usa um literal. Então este é o único par do projeto em que a
   correção mora no arquivo de conteúdo, e está anotada lá. */

/* A tabela de escolha do antipsicótico: 4,49 → 5,18:1, por 0,01. */
/* A tabela de escolha do antipsicótico: 4,49 → 5,18:1, por 0,01. */
td.eap-n3, .eap-n3{ color:#8f5125; }

/* -------- 2.5 FUNDOS COLORIDOS COM TEXTO BRANCO ----------------- */
/* Três pílulas de estado. Todas JÁ trazem texto — nenhuma depende de
   cor sozinha —, mas o texto não se lia.
     "Confirmar resposta"  #fdf9f3 sobre #c7a888  2,13 → 5,84:1
     mapa de calor         branco  sobre #4f93c0  3,35 → 5,60:1
     grau 2 da ansiedade   branco  sobre #6f8a3f  3,90 → 6,22:1
     grau 3 da ansiedade   branco  sobre #a97a22  3,82 → 6,44:1
       (este sai de graça: o fundo é var(--gold-600), que a seção 1
        escureceu) */
#btn-confirmar.btn-primary, .btn.btn-primary{ background:#7a5c3e; }
/* O grau 3 traz o dourado escrito à mão (#a97a22), e não o token — por
   isso ele não saiu de graça com a troca da seção 1. */
.an-grau.an-grau-3{ background:var(--gold-700,#8a621c); }
.pf.pf-mc1{ background:#2f6d96; }
.an-grau.an-grau-2{ background:#52682c; }

/* -------- 2.6 O TEXTO QUE SE TORNOU INVISÍVEL AO SER MOVIDO ----- */
/* O ACHADO MAIS GRAVE DA VARREDURA, e ele não é uma questão de
   contraste "quase suficiente": é texto a 1,03:1 — invisível.

   O /resposta-primeiro.js leva os parágrafos de apresentação para uma
   gaveta no pé da página (`details.pqm-rp-sobre`), que é CLARA. No guia
   dos antidepressivos esses parágrafos moravam dentro de um bloco
   marrom-900 e tinham `color:#fff`. Mudaram de casa e levaram a cor da
   casa antiga: branco sobre uma caixa branca a 55% em cima de creme.
   O bloco de origem ficou vazio, e o script já sabe esconder pai
   vazio — o que ninguém tinha previsto é a cor viajar com o filho.

   A gaveta é clara, então ela DECLARA a sua tinta, e os filhos passam a
   herdar. Os `b` continuam dourados, agora no dourado que se lê. */
.pqm-rp-sobre{ color:#4a2c1d; }
.pqm-rp-sobre p,
.pqm-rp-sobre li,
.pqm-rp-sobre span,
.pqm-rp-sobre em,
.pqm-rp-sobre i,
.pqm-rp-sobre small{ color:#4a2c1d; }
.pqm-rp-sobre b,
.pqm-rp-sobre strong{ color:var(--gold-600,#7c5812); }

/* ===================================================================
   3. O FOCO VISÍVEL

   DUAS CAMADAS, E NÃO UMA. A cor do foco é o marrom da marca, que tem
   10,98:1 sobre branco — e 1,15:1 sobre o próprio marrom do cabeçalho.
   Um anel só nunca ia servir às duas telas.

     anel interno branco de 2px  → aparece sobre marrom, vermelho e
                                   dourado (branco sobre #3a2318 dá 14:1)
     anel externo marrom de 3px  → aparece sobre branco, creme e as
                                   tabelas (10,98 e 8,11:1)

   Em qualquer fundo, pelo menos um dos dois anéis tem contraste de
   sobra contra o que está do lado — e os dois juntos têm contraste
   entre si, o que faz o indicador ser uma FORMA, e não uma cor.

   POR QUE `!important` AQUI, E SÓ AQUI. As páginas de conteúdo têm 655
   regras `:focus` próprias, várias com `outline: 2px solid var(--tan-400)`
   (1,57:1 sobre branco) e com especificidade maior do que qualquer
   seletor global razoável. Sem `!important` o foco fraco continuaria
   vencendo em dezenas de telas. É a exceção que o pedido autoriza, com
   o motivo escrito.

   `:focus-visible`, E NÃO `:focus`: quem clica com o mouse não leva um
   anel de 5px a cada toque. Onde o navegador não conhece
   `:focus-visible`, o `:focus` do próprio material continua valendo —
   nada foi removido. */
:where(a[href], area[href], button, input, select, textarea, summary,
       [tabindex], [role="button"], [role="link"], [role="tab"],
       [role="checkbox"], [role="radio"], [contenteditable="true"]):focus-visible{
  outline:3px solid var(--pqm-foco,#583323) !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 2px var(--pqm-foco-anel,#fff) !important;
}

/* E O QUE RECEBE FOCO SEM PEDIR. A lista acima nomeia o que é
   focalizável por natureza — e não é a lista completa do que o navegador
   deixa focar. MEDIDO, com o teclado dentro do capítulo de depressão: a
   caixa rolável `div.dp-rolo` RECEBEU o foco, sem `tabindex` e sem ser
   link nem botão, porque o navegador dá foco a quem rola (é assim que o
   teclado consegue rolar a caixa) — e aparecia com o contorno
   predefinido de 1px, que não chega aos 3:1 exigidos.

   Então o fecho: qualquer elemento que o navegador decida focar leva o
   mesmo par de anéis. `html` e `body` ficam de fora porque um anel em
   volta da página inteira não aponta nada — e é o que apareceria a cada
   vez que o foco voltasse ao documento.

   Isto vem DEPOIS da regra acima e com a mesma declaração, de modo que
   os dois caminhos levam ao mesmo indicador; e vem ANTES da regra da
   linha de cartão, cuja especificidade maior mantém o recuo de -3px
   dela. */
:where(:not(html, body)):focus-visible{
  outline:3px solid var(--pqm-foco,#583323) !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 2px var(--pqm-foco-anel,#fff) !important;
}

/* O CASO DO `outline:none` SEM SUBSTITUTO. A linha da tabela de cartões
   apagava o contorno do foco e punha no lugar um realce de `:target` —
   que é outra coisa: `:target` é "você chegou aqui", `:focus` é "o
   teclado está aqui". Agora ela tem as duas. */
.book-content .pqm-cartoes tr[id]:focus-visible{
  outline:3px solid var(--pqm-foco,#583323) !important;
  outline-offset:-3px !important;
}

/* ===================================================================
   4. O FOCO QUE FICAVA ATRÁS DO QUE ESTÁ GRUDADO

   MEDIDO, não arbitrado. O /acessibilidade.js mede a pilha de
   elementos `sticky`/`fixed` de cada página e escreve as duas medidas
   em `--pqm-encaixe-topo` e `--pqm-encaixe-pe`. As reservas abaixo são
   as medidas que encontrei:

     cabeçalho das páginas de conteúdo   60px (telefone) · 64 (computador)
     caixa de busca da tela inicial      139px grudada abaixo dele
     fita de seções / de procedência     40–50px
     tarja de sessão no pé               50px (telefone) · 26 (computador)
     botão flutuante "subir"             35px
     toast                               18px

   O pior caso do topo é a tela inicial (54 + 139 = 193px), e é por isso
   que o valor não pode ser um número fixo escrito aqui.
   =================================================================== */
html{
  scroll-padding-top:calc(var(--pqm-encaixe-topo,76px) + 12px);
  scroll-padding-bottom:calc(var(--pqm-encaixe-pe,88px) + 12px);
}
:where(h1, h2, h3, h4, a[href], button, input, select, textarea, summary,
       [tabindex], [role="button"], tr[id], li[id], section[id], div[id]){
  scroll-margin-top:calc(var(--pqm-encaixe-topo,76px) + 12px);
  scroll-margin-bottom:calc(var(--pqm-encaixe-pe,88px) + 12px);
}

/* E ESPAÇO NO PÉ, para o último controle da página não nascer debaixo da
   tarja de sessão. Sem isto não há rolagem que o descubra: ele está no
   fim do documento, e o fim do documento é onde a tarja mora. */
body{ padding-bottom:max(var(--pqm-encaixe-pe,88px), 1px); }
/* As telas que já reservam o próprio pé não ganham o dobro. */
body.pqm-pe-proprio{ padding-bottom:0; }


/* ===================================================================
   4b. A TARJA DE SESSÃO E A FAIXA DO PÉ

   O DEFEITO: dois elementos presos em `bottom:0` disputam a mesma
   faixa. A tarja (`footer.sessionbar`, do molde, z-index 150) chega
   primeiro; o painel de ações de uma página (`.sp-acoes` da súmula
   psicopatológica, z-index 5) fica atrás dela. O centro do botão
   «Montar o registro» cai ali, e o navegador recusa o clique:
   `footer#sessionbar intercepts pointer events`.

   Rolar não resolvia: elemento preso em `bottom:0` não se move com a
   rolagem — medido, `scrollIntoView()` não mudou o `scrollY` em um
   pixel. É por isso que as reservas de `scroll-padding` da seção 4,
   que governam PARA ONDE a rolagem leva, não alcançavam este caso.

   DUAS CAMADAS DE CORREÇÃO, e as duas são globais:

   1. A TARJA DEIXA DE INTERCEPTAR. Ela é informativa — o molde escreve
      nela uma linha de texto e nada mais, sem link nem botão (ver
      `escreverTarja()` em public/molde-app.js). `pointer-events:none`
      faz o clique atravessá-la. Isto NÃO substitui a camada 2: sem
      espaço, o botão continuaria invisível embaixo dela.

   2. O PAINEL SOBE. O /acessibilidade.js mede a tarja, publica a
      altura em `--pqm-tarja` e marca os painéis presos ao pé com
      `pqm-acima-da-tarja`, guardando o `bottom` do autor em
      `--pqm-pe-original`. A regra abaixo soma os dois.

   POR QUE NÃO UMA ALTURA FIXA: a tarja tem 50px no telefone (o e-mail
   quebra em três linhas), 26px no computador, 0 no Modo consulta —
   onde ela já é `static` por decisão anterior, ver
   public/modo-consulta.css — e 0 no Modo paciente, onde ela não
   existe. Onde a medida é 0, a soma devolve o `bottom` original e nada
   se move.

   POR QUE AQUI: esta folha é a última da cascata em todas as páginas
   (ver lib/molde_app.js), e `.sessionbar` mora em /assets/css/
   pqm-base.<hash>.css, que é um arquivo gerado e não se edita à mão.
   =================================================================== */
footer.sessionbar, .sessionbar{
  /* 1. informativa: nunca intercepta o que é do conteúdo */
  pointer-events:none;
  /* E o recorte do iPhone: sem isto a última linha do texto fica
     debaixo da barra de gestos. */
  padding-bottom:calc(7px + env(safe-area-inset-bottom, 0px));
}

/* 2. o painel preso ao pé começa acima da tarja */
.pqm-acima-da-tarja{
  bottom:calc(var(--pqm-pe-original, 0px) + var(--pqm-tarja, 0px)) !important;
}

/* O TOAST USA A MESMA MEDIDA. Ele está em `bottom:56px` no
   pqm-base.css — escolhido quando a tarja tinha 26px. Com 50px no
   telefone a folga cai para 6px, e com um e-mail mais longo ela
   acabaria. `max()` mantém os 56px onde eles já bastavam e só sobe
   onde a tarja cresceu: nada encolhe. */
.toast{
  bottom:max(56px, calc(var(--pqm-tarja, 0px) + 16px));
}

/* NO TELEFONE A TARJA ENCOLHE, sem perder a identificação. Medido a
   390px: o texto quebrava em três linhas e a faixa comia 50px da tela.
   Com um ponto a menos de corpo e menos ar, são duas linhas — o
   e-mail, a data e a origem continuam legíveis e inteiros. Nada é
   removido do texto: o conteúdo da tarja é o mesmo, e é por ele que os
   testes de identidade perguntam. */
@media (max-width:480px){
  footer.sessionbar, .sessionbar{
    font-size:9.5px; line-height:1.35; letter-spacing:0;
    padding:5px 10px calc(5px + env(safe-area-inset-bottom, 0px));
  }
}

/* NO PAPEL NADA FICA GRUDADO. Uma faixa presa ao pé da JANELA não tem
   significado numa folha: ou ela se repete em toda página, ou cobre o
   texto da última. Em fluxo, a tarja imprime uma vez, no fim — e o
   painel de ações volta para o lugar dele. As páginas que já escondem
   a tarja no papel continuam escondendo: isto só muda a posição de
   quem é impresso. */
@media print{
  footer.sessionbar, .sessionbar{
    position:static !important; bottom:auto !important;
    pointer-events:auto; padding-bottom:7px;
  }
  .pqm-acima-da-tarja{
    position:static !important; bottom:auto !important;
  }
}

/* ===================================================================
   5. REDUÇÃO DE MOVIMENTO

   O QUE FOI AUDITADO ANTES DE DESLIGAR QUALQUER COISA, porque desligar
   animação sem olhar o JavaScript quebra o que depende dela:

     · `animationend` / `transitionend`: NINGUÉM escuta, em nenhum
       arquivo do projeto. Nenhuma ação espera uma animação terminar.
     · a única @keyframes das páginas de conteúdo é a `pqmSurge` do
       api/pagina.js, e ela NÃO é enfeite: é um ATRASO de 0,45s que
       impede o aviso "Abrindo..." de piscar em toda página. Ela não
       move nada — é um passo de opacidade de 0,01s. Fica.
     · a barra do estado inicial da tela inicial já tinha o seu próprio
       bloco de redução de movimento, e continua tendo.

   Então o que se desliga aqui é o que de fato se move ou desloca.
   =================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  body{ background-attachment:scroll !important; }

  /* Transições e animações viram instantâneas — não `none`. A diferença
     importa: um componente que troca de estado continua trocando, e
     quem lê o estado pelo CSS continua lendo. 0,01s em vez de 0 porque
     um valor zerado faz alguns navegadores pularem o evento de
     transição por completo, e nada neste projeto depende dele hoje —
     mas depender amanhã é barato de acontecer. */
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  /* A EXCEÇÃO, com nome: o atraso do aviso de abertura. Zerar o atraso
     faria "Abrindo..." aparecer em TODA página, inclusive nas que
     destravam em 80ms. Não há movimento nenhum nela. */
  html[data-pqm-entrando] body::after{
    animation-delay:450ms !important;
    animation-duration:10ms !important;
  }
  /* Nada de parallax nem de fundo preso. */
  *{ background-attachment:scroll !important; }
}

/* ===================================================================
   6. IMPRESSÃO

   O foco e os anéis não vão para o papel, e a reserva do pé também não:
   no papel não há tarja grudada.
   =================================================================== */
@media print{
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
    outline:none !important; box-shadow:none !important;
  }
  body{ padding-bottom:0 !important; }
}