/* ═══════════════════════════════════════════════════════════════════════════
   O QUE AINDA FALTA, DITO NA PÁGINA
   Roosevelt Amazon Expedition · rota D · SÓ NA PRÉVIA DE APROVAÇÃO

   O PROBLEMA QUE ESTA FOLHA CONSERTA. As onze páginas carregavam onze
   `data-pendente` no HTML, e nenhum deles pintava nada. A informação existia
   em três lugares onde o cliente não entra: o atributo no código,
   `arquitetura.md` §8 e `copy.md` §8.

   O efeito disso é pior do que não ter marcado. A lista de nove espécies da
   página do Guariba, por exemplo, É A LISTA DO ROOSEVELT esperando confirmação:
   36 das 52 frases das duas páginas de pesca são idênticas, palavra por
   palavra. Quem abre o link de aprovação lê aquilo como fato conferido, aprova,
   e a pergunta que a casa precisava fazer nunca chega a ser feita.

   Prévia de aprovação existe para colher decisão. Pergunta que mora só no
   repositório não colhe nada.

   POR QUE ELA É `body.previa` E NÃO `[data-pendente]` SOZINHO. A marca é
   conversa entre a casa e o cliente, não conteúdo do site. O tema do WordPress
   pode até levar este arquivo junto, e ele fica inerte: sem a classe no
   `<body>`, nada pinta. E quando a resposta chegar, o atributo sai do HTML e a
   marca some sozinha, sem ninguém precisar lembrar de apagar CSS.

   O DESENHO É DA MARCA, E NÃO DE FERRAMENTA DE DESENVOLVEDOR. Nada de vermelho
   nem de tarja: fio tracejado no verde do cliente e um rótulo na tipografia da
   casa. Quem recebe o link precisa entender que é uma pergunta, não um erro.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer kng-projeto {

body.previa [data-pendente] {
  position: relative;
  /* O ESPACO DO ROTULO E RESERVADO NO PROPRIO ALVO, e nao tomado de quem vem
     antes. A primeira versao pendurava o rotulo ACIMA da caixa, com posicao
     absoluta e `inset-block-end: 100%`, e medida em 390 px ela subia por cima
     do fim do paragrafo anterior em 13 das 15 marcas. `padding` no alto
     resolve sem os dois efeitos colaterais que o resto resolveria: nao vira
     item de grade, como viraria um `::before` no fluxo, e nao desloca o
     vizinho, como deslocaria uma `margin`. */
  padding-block-start: calc(clamp(30px, 3.4vw, 42px) + 1.2em);
  outline: 1px dashed color-mix(in srgb, var(--acento-sobre-claro) 52%, transparent);
  outline-offset: clamp(10px, 1.4vw, 16px);
}

/* O RÓTULO É ABSOLUTO POR MOTIVO DE LAYOUT, e não de gosto. Metade dos alvos
   é contêiner de grade (`.dia-lista`, `.especies-bloco`, `.periodos`): um
   `::before` no fluxo vira ITEM DE GRADE e ocupa uma célula, o que empurraria
   a primeira espécie para a segunda coluna e mudaria a página que se está
   pedindo para aprovar. Absoluto dentro do padding reservado acima, ele ocupa
   lugar sem entrar na grade. */
body.previa [data-pendente]::after {
  content: "To confirm · " attr(data-pergunta);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  max-inline-size: min(100%, 52ch);
  font-family: var(--fam-display); font-weight: 400;
  font-size: var(--texto-label); line-height: 1.35;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento-sobre-claro);
  pointer-events: none;
  /* O ALINHAMENTO SE HERDA, e o encaixe de preco e centrado. Sem isto o
     rotulo sai com a primeira linha na margem e a segunda no meio, que nao
     parece marca de revisao e sim defeito. */
  text-align: start;
}

/* A MESMA REGRA DE SEMPRE NESTA PALETA: a cor se escolhe pela superfície.
   `#day` virou faixa escura nesta mesma revisão, e o `acento_sobre_claro` ali
   mede 1,6:1. */
body.previa .sobre-escuro [data-pendente],
body.previa [data-pendente].sobre-escuro {
  outline-color: color-mix(in srgb, var(--acento-sobre-escuro) 52%, transparent);
}
body.previa .sobre-escuro [data-pendente]::after,
body.previa [data-pendente].sobre-escuro::after {
  color: var(--acento-sobre-escuro);
}

/* O ENCAIXE E CARTAO CLARO DENTRO DE FAIXA ESCURA, e a regra acima olhava o
   ancestral: o rotulo do `wetravel` saia no teal claro sobre branco e media
   2,34:1 em cinco paginas. A superficie se escolhe pelo que esta EMBAIXO do
   texto, nunca pelo nome da secao · `superficie-se-escolhe-medindo`.
   Mesma armadilha que a janela de reserva ja tinha dado, herdando o verde da
   faixa e pintando o titulo de branco sobre o cartao branco. */
body.previa .encaixe[data-pendente]::after,
body.previa .encaixe [data-pendente]::after {
  color: var(--acento-sobre-claro);
}
body.previa .encaixe[data-pendente],
body.previa .encaixe [data-pendente] {
  outline-color: color-mix(in srgb, var(--acento-sobre-claro) 52%, transparent);
}

/* SOBRE FOTOGRAFIA O TEAL NAO SUSTENTA. Na faixa que traz foto por baixo, com
   veu de 88 por cento, o rotulo media 4,25:1, e o alvo e 4,5. O veu nao e
   regra que se possa ler: a conta se faz no pixel composto, e a camada de
   cima derruba o glifo sem mudar declaracao nenhuma ·
   `conta-de-contraste-ignora-a-camada-de-cima`.
   A saida e a mesma do resto do site quando a superficie vira fotografia: o
   texto vai para branco. O fio tracejado continua no teal, e e ele que diz
   que ali ha pergunta aberta. */
body.previa .faixa:has(> .faixa__fundo) [data-pendente]::after {
  color: var(--texto-sobre-inverso);
}

/* Em telefone a coluna é estreita e a pergunta ocupa duas ou três linhas.
   Sem isto o rótulo sobe por cima do fim do parágrafo anterior. */
@media (max-width: 620px) {
  body.previa [data-pendente]::after { font-size: 10px; letter-spacing: .1em; }
}

} /* @layer kng-projeto */