/* ==========================================================================
   ARQUIVO NOVO — /root/pachon_assessor/public/versao.css   (modo 644)

   S32 — assinatura de autoria (.colofao) e o aviso do que mudou (.novidade).

   CARREGAMENTO: segunda folha do documento, logo após gravacao.css e ANTES de
   utilities.css. Como precede a declaração de camadas de utilities.css:1, esta
   folha NÃO declara camada própria — declarar inverteria a ordem da cascata
   (armadilha documentada em gravacao.css:5-9). Sem camada, as regras vencem
   todas as camadas por construção; por isso nenhuma declaração aqui precisa de
   prioridade forçada.

   FORMA NO CSSOM: tudo dentro de UMA @media all, com as consultas de largura
   ANINHADAS dentro dela — o mesmo idioma de gravacao.css:11. Medido em
   Chromium: a folha expõe exatamente uma regra de topo (CSSMediaRule), que é o
   que o inventário de tests/frontend/e2e/s23-layers.spec.js compara com
   toEqual.

   SELETOR ESTRANGEIRO — LISTA FECHADA. Esta folha toca UM seletor fora do
   próprio namespace: `.header-container .header-content`, e só para permitir a
   quebra de linha entre 341 e 620px. Como a folha não tem camada, essa regra
   vence qualquer regra equivalente de styles.css ou responsive.css em
   silêncio — por isso a lista é fechada e guardada por teste
   (s32-versao.test.js compara o conjunto de seletores estrangeiros desta folha
   com ['.header-container .header-content'] e reprova se aparecer um segundo).

   COR: só variáveis de tokens.css. Nenhum literal de cor. Nenhum preenchimento
   azul novo — o único azul da tela continua sendo o botão primário.

   MOVIMENTO: nada aqui anima ou transiciona; não há o que reduzir sob
   prefers-reduced-motion.
   ========================================================================== */
@media all {

/* -- .colofao — a linha quieta do cabeçalho --------------------------------
   `flex: 1 1 0` é a decisão estrutural: com base 0 o colofão NUNCA entra no
   cálculo de transbordo da linha — ele só cresce para dentro do vão que sobra
   depois que logo, divisória e bloco de título tomam o tamanho natural deles.
   Medido de 1920px a 341px: a altura do cabeçalho não muda em nenhuma largura
   acima de 620px, o <h1> e o subtítulo continuam em 1 linha cada, o texto
   nunca trunca, header.scrollWidth continua <= header.clientWidth e o bloco de
   título não se move um pixel.

   O eixo vertical é o `align-items: center` que .header-content já tem, e
   `justify-content: center` mantém o par de linhas no MESMO centro vertical do
   bloco de título — o eixo em que o cabeçalho já alinha o logo. Medido: a
   diferença entre o centro do logo e o centro do texto fica em 0,01px (o e2e
   s05 exige <= 1px). Encostar a última linha na linha de base do subtítulo
   exigiria `align-self: stretch` e tiraria o par desse eixo; foi descartado.

   ANCORAGEM À DIREITA (decisão do dono, 06/08/2026): como a caixa é `flex:1 1 0`,
   ela já ocupa todo o vão; `align-items: flex-end` encosta as duas linhas na
   borda interna direita do container de 1200px, fechando a composição contra a
   margem do cabeçalho — a marca à esquerda, a assinatura à direita, que é o
   idioma de navbar do §3.4 do style guide. O `text-align: right` só age se um
   dia uma linha quebrar; hoje as duas são `nowrap`. O eixo VERTICAL não muda,
   então a tolerância de 1px do s05 continua valendo (remedido: 0,01px).
   Abaixo de 620px o cabeçalho quebra e o colofão vira uma linha própria de
   largura cheia: lá ele continua à ESQUERDA, alinhado ao logo e ao título, para
   não virar um órfão encostado na borda oposta a todo o resto. */
.colofao {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  gap: var(--space-1);
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--color-text-2);
}

/* Se um dia o vão apertar, quem trunca é a caixa, não o cabeçalho: o texto
   completo permanece íntegro na árvore de acessibilidade. Medido: em nenhuma
   largura servida qualquer das duas linhas trunca. */
.colofao__autoria,
.colofao__versao {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O número é o único trecho em tinta cheia — é ele que muda.
   tabular-nums impede que a linha dance de largura a cada publicação. */
.colofao__versao {
  color: var(--color-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* -- .novidade — o aviso do que mudou --------------------------------------
   Nasce OCULTA e é revelada pela porta síncrona do <head>, que roda antes de o
   corpo ser analisado. Medido com PerformanceObserver('layout-shift'): o
   carregamento registra CLS = 0 e zero eventos de deslocamento.

   A geometria é a do realce que a casa JÁ usa nesta mesma tela
   (`.draft-privacy-notice`, styles.css:2665-2672): barra de 3px na borda
   inicial, canto vivo desse lado, superfície tênue. A diferença é a cor da
   barra: aqui ela é TINTA (`--color-text`), não o azul — o azul é do botão
   primário. A barra é o que dá limite visível ao bloco: medida no navegador, a
   superfície contra o cartão dá 1,06:1, muito abaixo dos 3:1 que a WCAG 2.1
   SC 1.4.11 pede para o limite de um componente; a barra de tinta dá 18,43:1
   e resolve isso sozinha.

   Custo vertical medido a 1440px, ligando e desligando o atributo na MESMA
   página: 94,5px (70,5 de painel + 24 de margem). É o preço de 14 dias. */
.novidade {
  display: none;
  margin-block-end: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--color-text);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: var(--color-bg);
}

:root[data-novidade="ativa"] .novidade {
  display: block;
}

.novidade__rotulo {
  margin: 0 0 var(--space-1);
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* A chamada é uma LISTA ORDENADA de verdade: a numeração 1, 2, 3 é do
   navegador (list-style decimal), nunca do texto do item. Escrever "1." dentro
   do <li> imprimiria "1. 1." na tela e levaria o número duplicado para o texto
   copiado.

   68ch mantém a linha de leitura no intervalo confortável mesmo num cartão de
   1136px. Medido: a frase de exemplo ocupa 1 linha a 1440px e 2 a 390px.
   O recuo de 1.5em é o que segura o marcador DENTRO do painel — com o padrão
   do navegador o "1." encostaria na barra de tinta da borda inicial. */
.novidade__lista {
  margin: 0;
  padding-inline-start: 1.5em;
  list-style: decimal;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-2);
  max-width: 68ch;
}

/* O espaço entre itens é do MESMO passo de grade do resto do bloco, e só entre
   itens: um `margin-block-end` no último empurraria a base do painel. */
.novidade__item + .novidade__item {
  margin-block-start: var(--space-1);
}

/* -- 341px a 620px ---------------------------------------------------------
   MEDIDO: a linha de autoria ocupa 200,84px a 12px, e o vão livre do cabeçalho
   (já descontados os gaps) vale 231,05px a 620px, 211,05px a 600px e 171,05px
   a 560px — ou seja, ela deixa de caber ao lado do título por volta de 590px.
   O corte fica em 620px, com ~30px de folga contra diferença de renderização
   de fonte. Abaixo dele o colofão passa para a própria linha do cabeçalho, em
   uma linha só e a 11px, alinhado à margem interna do cabeçalho (24px de 620 a
   521px, 16px de 480 a 341px). Custo medido: cabeçalho de 93px para 111,84px
   (620-521px) e de 79px para 97,84px (480-341px).

   `justify-content: flex-start` é obrigatório aqui: em `row` a propriedade
   passa a governar o eixo PRINCIPAL, e o `center` da base centralizaria a
   assinatura enquanto logo, título e subtítulo são alinhados à esquerda. */
@media (min-width: 341px) and (max-width: 620px) {
  .header-container .header-content {
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }
  .colofao {
    flex: 1 0 100%;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--space-2);
    font-size: 0.6875rem;
  }
}

/* -- até 340px -------------------------------------------------------------
   MEDIDO: o vão livre do cabeçalho de produção é 3,44px a 340px e -12px a
   320px. Com `flex-wrap`, o bloco de título deixaria de encolher e saltaria
   para a segunda linha, desfazendo o alinhamento vertical do cabeçalho. Abaixo
   de 341px o colofão sai da linha e o cabeçalho volta a ser byte a byte o de
   hoje (79px a 340px, 85,13px a 320px, iguais nas duas árvores). */
@media (max-width: 340px) {
  .colofao {
    display: none;
  }
}

/* -- impressão -------------------------------------------------------------
   O cabeçalho inteiro já some na impressão por regra do styles.css; a novidade
   não some sozinha porque a regra de revelação tem especificidade maior — por
   isso a supressão repete o MESMO par de seletores, e não uma versão mais
   fraca (um `@media print { .novidade { display:none } }` ingênuo não funciona;
   foi medido). O que sai da impressora é documento clínico; carimbar nele a
   versão do software é ruído que envelhece dentro do prontuário do paciente. */
@media print {
  :root .colofao,
  :root[data-novidade="ativa"] .novidade {
    display: none;
  }
}

}