/* Área de membros. Só o que o design system não cobre. */ .cartoes { list-style: none; margin: 0; padding: 0; } .cartao h3 { margin: 0 0 var(--espaco-1); } .cartao .veredito { color: var(--tinta-cheia); } .cartao .estado { font-family: var(--fonte-mono); font-size: var(--escala--1); } .cartao-regua .estado { color: var(--tinta-traco); } .selo { display: inline-block; padding: 0 var(--espaco-1); font-family: var(--fonte-mono); font-size: var(--escala--1); border: 1px solid var(--tinta-traco); } .selo-local { border-color: var(--casa); color: var(--casa); } .rolagem { overflow-x: auto; } .rolagem table { border-collapse: collapse; width: 100%; } .rolagem th[scope="row"] { position: sticky; left: 0; background: var(--superficie); text-align: left; } .resultado.nao-rodou { color: var(--tinta-traco); font-family: var(--fonte-mono); } .ressalvas { border-left: 2px solid var(--casa); padding-left: var(--espaco-2); /* Ressalvas reais citam caminhos de arquivo sem espaço (ex.: um path de tool). Sem isso, uma palavra longa alarga a página inteira em telas estreitas — a rolagem da tabela não cobre esse caso, é texto solto. */ overflow-wrap: anywhere; } /* As regras de `.peca-quadro`, `.peca-saidas` e `.paywall` moravam aqui. O relatório era o único consumidor das três, e ele migrou pro sítio (bloco no fim deste arquivo) — folha morta some junto com o último leitor. */ /* ── O enunciado de cada célula, na régua ────────────────────────────── Mudou de casa em 15/08/2026: era um balão `display:none` dentro de CADA relatório (catorze deles, 7.407 caracteres), com o mesmo texto em todos e nenhuma palavra sobre o modelo do relatório. `display:none` é a única forma de esconder que não deixa rastro nenhum pra busca do navegador — procurar "Canberra" ou "tribonacci" no relatório não achava nada. Aqui ele é texto normal, aberto, achável, escrito uma vez. Estas regras usam os tokens do pacote ANTIGO (`--tinta-*`, `--casa`, `--espaco-*`) porque a régua ainda é `class="mesa"`; as do relatório, escopadas em `.sitio`, estão no fim desta folha. */ .criterio-enunciado { margin: var(--espaco-2) 0; } .criterio__bloco, .criterio__conta { margin: 0; font-family: var(--fonte-mono); font-size: var(--escala--1); color: var(--casa); } .criterio__conta { color: var(--tinta-secundaria, var(--tinta-traco)); } .criterio__lista { list-style: none; margin: var(--espaco-1) 0 0; padding: 0; display: grid; gap: var(--espaco-1); } .criterio__item { display: grid; gap: 2px; padding-left: var(--espaco-1); border-left: 1px solid var(--tinta-traco); overflow-wrap: anywhere; } .criterio__item b { font-family: var(--fonte-mono); font-size: var(--escala--1); font-weight: 400; color: var(--tinta-traco); } .criterio__pedido { color: var(--tinta-secundaria, var(--tinta-traco)); } /* O gabarito é a resposta que contava como acerto — a coisa mais específica do enunciado, e por isso a que fica em tinta cheia. */ .criterio__acerto { color: var(--tinta-cheia); } .criterio__sobra { margin: var(--espaco-1) 0 0; font-family: var(--fonte-mono); font-size: var(--escala--1); color: var(--tinta-traco); } /* #acao-membro (hub): o mesmo elemento nos dois estados — o CSS não distingue visitante de membro, só estiliza o que estiver dentro (Task 8, membros.js troca o conteúdo, não o container). */ #acao-membro { text-align: center; } .acao-membro-logado .btn { margin-inline-end: var(--espaco-1); } /* ══════════════════════════════════════════════════════════════════════ O RELATÓRIO, NO SÍTIO Tudo daqui pra baixo é escopado em `.sitio` e não alcança o hub nem a régua, que continuam em `.mesa` (o pacote antigo, congelado). É de propósito: as duas pistas declaram os MESMOS nomes de token com valores diferentes, então a única separação segura é a classe do . Esta folha é a folha DA PÁGINA — carrega depois de ds/sitio/{tokens,sistema,elementos,elementos-sitio}.css e de css/sitio-web.css, nessa ordem (membros_site/pagina.py, CSS_DO_SITIO). Override do pacote vai aqui, escopado; o pacote é saída compilada e não se edita. ══════════════════════════════════════════════════════════════════════ */ /* ── O que a folha da home tem e esta página não pode carregar ───────── `.ico` e `.sitio__pular` são declarados em css/home.css, que é a folha DA HOME — carregá-la aqui traria junto os grids e as reescritas da home inteira. São poucas linhas: repetidas aqui, com o nome de origem à vista, em vez de uma dependência entre duas páginas que não têm nada a ver uma com a outra. */ .sitio .ico { width: 1em; height: 1em; flex: none; } .sitio__pular { position: absolute; left: -9999px; z-index: 10; padding: 10px 16px; background-color: var(--sitio-sinal); color: var(--sobre-sinal); border-radius: var(--sitio-raio-fino); font-weight: 600; } .sitio__pular:focus { left: 16px; top: 12px; } /* ── O cabeçalho, sem hambúrguer ─────────────────────────────────────── A área de membros nunca importou `js/home/menu.js`, então o botão compacto do cabeçalho da home nunca abriu nada aqui — ele existia no HTML e não fazia nada, e isso não falha alto: parece um menu, some ao clicar em nada. Esta página não emite o botão. A navegação vira uma faixa que rola de lado abaixo de 900px, que funciona sem uma linha de JavaScript. */ @media (max-width: 900px) { .sitio .cromo { height: auto; } .sitio .cromo__miolo { flex-wrap: wrap; gap: 10px 20px; padding-block: 10px; } .sitio .cromo__fim { margin-left: auto; } .sitio .cromo__nav { order: 3; width: 100%; margin-left: 0; gap: 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .sitio .cromo__nav::-webkit-scrollbar { display: none; } } /* Abaixo de 520px os dois rótulos das ações não cabem ao lado da marca; as cápsulas viram só ícone. O nome continua no `aria-label` (pagina.py), então quem lê por leitor de tela não perde nada. */ @media (max-width: 520px) { .sitio .cromo__fim .acao__rotulo { display: none; } .sitio .cromo__fim .acao { padding: 0 12px; } } /* ── O rodapé ────────────────────────────────────────────────────────── `.rodape` (elementos-sitio.css) é uma linha só, calibrada na prancha de 1440 e sem media query própria; quem quebra é a folha da página. Aqui: os três blocos empilham centralizados abaixo de 1180, mesma medida que css/home.css usa pra faixa dela. `.rodape__legal` ganha `display:flex` e vão porque nenhuma das folhas do pacote declara isso — sem essas duas linhas, "Privacidade", "Termos" e o copyright saem grudados numa palavra só. Esses dois links são exigência da verificação do app OAuth no Google, e um link ilegível é meio caminho pra um link ausente. */ .sitio .rodape__legal { display: flex; align-items: center; gap: 20px; } @media (max-width: 1180px) { .sitio .rodape .sitio__miolo { flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 8px; } .sitio .rodape { white-space: normal; } .sitio .rodape__legal { justify-content: center; flex-wrap: wrap; } } /* ── A voz de sistema fecha em `code`, e isso não é herança ──────────── `code`, `kbd` e `samp` nascem com `font-family: monospace` na folha do AGENTE, e uma declaração do agente vence a herança do pai — não é o mesmo que "o pai não declarou". Então um bloco que declara `font-family: var(--voz-sistema)` no contêiner e só `font-size` no `code` de dentro entrega aquele trecho na monoespaçada do SISTEMA DO LEITOR: Courier aqui, Menlo no Safari do Mac, Consolas ou Courier New no Windows. Medido em 15/08/2026 com `CSS.getPlatformFontsForNode` (a fonte que de fato pintou, não a computada): **43 nós saíam em Courier** — os chips de `ARQUIVOS` de cada achado, os nomes de arquivo dentro do excerto anotado e os campos do card do harness. Ou seja, a evidência da página, que é o que justifica o preço dela, numa fonte que ninguém escolheu e que muda de máquina pra máquina, ao lado de citações em JetBrains Mono. Esta regra fecha a família para TODO `code` das duas páginas que carregam esta folha (relatório e régua). É uma varredura, e não uma lista de blocos, pelo mesmo motivo de sempre: lista tem buraco por construção, e este defeito nasceu de duas regras que esqueceram uma linha. `TestOCodigoNaoCaiNaMonoDoSistema` mede a fonte que pintou. */ .sitio code, .sitio kbd, .sitio samp { font-family: var(--voz-sistema); } /* ── Seleção de texto ────────────────────────────────────────────────── Sem `::selection` declarada, o realce vem do navegador (azul do Chromium, a cor de acento do sistema no Safari) e a página perde a única cor que ela não governa. Medido em pixels de captura, selecionando texto de verdade: texto cheio caía de 16,15:1 para **3,81:1**, e um elo âmbar selecionado para **2,08:1** — quase o pior contraste da página, e justamente durante o gesto de copiar, que num relatório de prova cheio de nome de arquivo e número medido é gesto central. `color` é forçado nos dois blocos, então a razão independe da cor original: 7,87:1 no terreno escuro, 14,68:1 na faixa de papel do rodapé. São dois blocos porque o rodapé é claro e o mesmo âmbar mede 1,98:1 lá. */ .sitio ::selection { background-color: var(--sitio-sinal); color: var(--sobre-sinal); } .sitio .rodape ::selection { background-color: var(--sitio-papel-tinta); color: var(--sitio-papel); } /* ── Contraste: onde `--sitio-tinta-fraca` pode e onde não pode ──────── Medido contra `--sitio-fundo` (#04080c): `--sitio-tinta-fraca` (#5b6169) dá **3,21:1** e `--sitio-tinta-secundaria` (#8b8f94) dá 6,18:1. O piso de texto é 4,5:1, então a tinta fraca não serve pra NADA que se leia — e num relatório desta densidade quase tudo se lê: o cabeçalho de coluna de uma tabela, o rótulo de um dado da ficha, o título do sumário. **O 3,21 corrige um 3,5 que esteve escrito aqui até 15/08/2026** e que também aparecia na docstring do teste de contraste. Como foi medido: a cor COMPUTADA de cada nó, composta contra o fundo efetivo (subindo a árvore até um ancestral opaco, alfa por alfa) e dobrada pela opacidade acumulada, pela fórmula de luminância relativa do WCAG 2.1 — `test_o_texto_da_pagina_passa_no_piso_de_contraste` faz exatamente isso, em navegador de verdade, e é de lá que sai o número. O 3,5 não vinha de medição nenhuma, e a diferença importa: 3,5 soa "quase lá", 3,21 não. Ela fica só onde o conteúdo é ordinal e redundante — o `01`/`02` ao lado do nome da seção no sumário e o marcador numérico da lista de provas —, que é o mesmo uso decorativo que ela tem no resto do sítio. Quem quiser conferir: `test_o_texto_da_pagina_passa_no_piso_de_contraste`, em `tests/test_relatorio_contrato.py`, mede a cor computada de verdade. ── O foco de teclado ──────────────────────────────────────────────── Nenhum elemento desta página zera o `outline` (só `.prompt__entrada` e `.acesso__campo input` fazem isso no pacote, e nenhum dos dois existe aqui), então o anel padrão do navegador já aparece. O anel abaixo é o mesmo vocabulário que `css/sitio-web.css` usa na busca da home — dez links de sumário e uma barra de navegação merecem o indicador da casa, e não o do sistema operacional de cada visitante. */ .sitio .sumario__lista a:focus-visible, .sitio .ficha__trilha a:focus-visible, .sitio .peca__acoes a:focus-visible, .sitio .relatorio__corpo a:focus-visible, .sitio .provas a:focus-visible, .sitio .placar__saida a:focus-visible, .sitio .cromo__elo:focus-visible { outline: 2px solid var(--sitio-sinal); outline-offset: 3px; border-radius: 3px; } /* ── A ficha: quem é o modelo, e o que a bateria concluiu ────────────── Faixa de largura inteira, um degrau acima do terreno, com um fio de sinal no alto — é a única superfície da página que se anuncia; o resto é documento. */ .sitio .ficha-relatorio { position: relative; background-color: var(--sitio-superficie); border-bottom: 1px solid var(--sitio-traco); padding: 40px 0 44px; } .sitio .ficha-relatorio::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--sitio-sinal), transparent 62%); } .sitio .ficha__trilha { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-family: var(--voz-sistema); font-size: var(--sitio-rotulo-corpo); line-height: var(--sitio-rotulo-entrelinha); letter-spacing: var(--sitio-rotulo-espacamento); text-transform: uppercase; color: var(--sitio-tinta-secundaria); } /* Cada degrau da trilha quebra inteiro ou não quebra: "RELATÓRIO DA / BATERIA" em duas linhas ao lado de um "·" solto lê como três itens, não dois. */ .sitio .ficha__trilha > * { white-space: nowrap; } .sitio .ficha__modelo { margin: 18px 0 0; font-family: var(--voz-funcional); font-size: var(--sitio-manchete-corpo); line-height: var(--sitio-manchete-entrelinha); font-weight: var(--sitio-manchete-peso); letter-spacing: -0.022em; color: var(--sitio-tinta-cheia); text-wrap: balance; } /* O veredito é a frase que o relatório inteiro sustenta: entra como deck, não como parágrafo — quem só lê duas linhas desta página lê estas. */ /* Sem `max-width`: o veredito, a abertura e a linha do título terminam TODOS na mesma borda. Antes eram três bordas (980 no título, 621 no veredito por `46ch`, 796 na abertura por `70ch`), pelo mesmo motivo que os tutoriais tinham quatro: `ch` é relativo à fonte de cada elemento, e o veredito é deck, a abertura é corpo. Decisão do dono, a mesma que ele tomou nos tutoriais. */ .sitio .ficha__veredito { margin: 16px 0 0; font-size: var(--sitio-deck-corpo); line-height: var(--sitio-deck-entrelinha); color: var(--sitio-tinta-cheia); text-wrap: pretty; } .sitio .ficha__miolo { display: grid; gap: 32px; } .sitio .ficha__dados { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; padding: 0; } .sitio .ficha__dado { display: grid; gap: 2px; padding-left: 20px; border-left: 1px solid var(--sitio-traco-forte); } .sitio .ficha__dado dt { font-family: var(--voz-funcional); font-size: 12px; line-height: 16px; color: var(--sitio-tinta-secundaria); } .sitio .ficha__dado dd { margin: 0; font-family: var(--voz-sistema); font-size: 15px; line-height: 22px; color: var(--sitio-tinta-cheia); font-variant-numeric: tabular-nums; } /* Os ativos por token andam colados ao total (`285B · 13B ativos por token`): são um par, e separá-los em duas entradas da ficha faria parecer que são duas medidas independentes. */ .sitio .ficha__ativos { display: block; color: var(--sitio-tinta-secundaria); font-size: 13px; line-height: 18px; } /* A procedência do que a ficha NÃO mediu. O resto do relatório é medido aqui; parâmetros e arquitetura são lidos de fora, e a página diz de onde. */ .sitio .ficha__nota { display: block; margin-top: 2px; font-family: var(--voz-funcional); font-size: 12px; line-height: 16px; color: var(--sitio-tinta-fraca); text-wrap: pretty; } /* O tier é um rótulo do sistema, não um selo de qualidade: a régua tem quatro (F, M, P, P/M) e nenhum deles significa "bom" ou "ruim" — o que significa é o resultado, que está no placar. Uma cor por tier seria inventar semântica que a fonte não tem. Ele fica em voz de sistema, na tinta do sinal, e mais nada. */ .sitio .ficha__tier { display: inline-block; padding: 1px 8px; border-radius: var(--sitio-raio-miudo); background-color: color-mix(in srgb, var(--sitio-sinal) 14%, transparent); color: var(--sitio-sinal); } .sitio .ficha__local { display: inline-block; padding: 1px 8px; border-radius: var(--sitio-raio-miudo); background-color: color-mix(in srgb, var(--casa) 16%, transparent); color: var(--casa-texto); font-size: 13px; } .sitio .ficha__abertura { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--sitio-traco); } /* A nota de um campo da ficha: procedência, ou o que o valor quer dizer. Mesmo papel de `.harness__nota` no card do harness. */ .sitio .ficha__nota { display: block; margin-top: 2px; font-family: var(--voz-corpo); font-size: 12px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--sitio-tinta-secundaria); } .sitio .ficha__abertura p { margin: 0 0 16px; font-size: var(--sitio-corpo-corpo); line-height: var(--sitio-corpo-entrelinha); color: var(--sitio-tinta-secundaria); text-wrap: pretty; } .sitio .ficha__abertura p:last-child { margin-bottom: 0; } /* A ficha técnica vira coluna à parte a partir de 1024px: o veredito e a abertura querem medida curta (46–70 caracteres), e sem um segundo lugar pra pôr os dados sobrava meia tela vazia à direita de um cabeçalho que ocupa a largura inteira. Abaixo disso ela volta a ser uma fila. */ @media (min-width: 1024px) { /* 340, e não os 280 de antes: o cartão passou a ter duas colunas por dentro, e em 280 cada uma ficaria com 103px, onde "13B ativos por token" quebra em cinco linhas. E 340, e não mais: a 360 o título "DeepSeek V4 Flash 0731" passa a quebrar em duas linhas, e a manchete inteira numa linha vale mais que os 20px a mais de coluna interna. */ .sitio .ficha__miolo { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; } /* DUAS colunas, três fileiras. O cartão media 496px de altura contra 361 do bloco de texto ao lado, e as duas colunas terminavam em lugares diferentes sem motivo visível. Empilhado em coluna única não havia conserto que não fosse jogar campo fora; em duas colunas os seis pares cabem em três fileiras e a altura cai pela metade, sem perder nada. `stretch` em vez de `start` para o cartão acompanhar a coluna, e `align-content: space-between` porque uma caixa esticada com o conteúdo empilhado no topo só troca o vão de lugar. */ .sitio .ficha__tecnica { align-self: stretch; display: flex; flex-direction: column; padding: 20px 24px; border: 1px solid var(--sitio-traco); border-radius: var(--sitio-raio); background-color: var(--sitio-superficie-alta); box-shadow: var(--sitio-luz-de-bordo); } .sitio .ficha__dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* 12px, e não 16: com o título numa linha só, o cartão media 320px contra 307 do texto ao lado e terminava 13px abaixo dele. Cortar 4px de cada fileira faz o cartão ser o mais BAIXO da fileira, e aí quem estica é ele — que é o único jeito de os dois terminarem juntos. */ gap: 12px 24px; flex: 1; align-content: space-between; } /* Seis pares fecham a grade. Se um relatório tiver cinco (sem vídeo, sem pesos), o último fica sozinho na fileira e sobra uma célula vazia com a divisória desenhada em volta: uma casa que ninguém preencheu, que lê como defeito. Ocupar a fileira inteira quando está em posição ímpar é exatamente quando ele estaria sozinho. */ .sitio .ficha__dado:last-child:nth-child(odd) { grid-column: 1 / -1; } .sitio .ficha__dado { padding-left: 0; border-left: 0; } /* `+ .ficha__dado` era regra de PILHA: numa grade de duas colunas ela desenharia fio também no segundo item da PRIMEIRA fileira, que não tem nada acima dele. O fio separa FILEIRAS, então ele começa no terceiro par, que é onde a segunda fileira começa. */ .sitio .ficha__dado:nth-child(n + 3) { padding-top: 12px; border-top: 1px solid var(--sitio-traco); } } /* ── O corpo do documento ─────────────────────────────────────────────── */ /* A largura mudou em 14/08/2026, a pedido do dono ("dá pra aproveitar mais a largura"). Era 1120 — escolhido quando a página era sumário + prosa, e a prosa é o que NÃO pode crescer. O que resolve os dois: a caixa vai a 1320 e a medida de leitura continua travada em 68ch nos parágrafos (ver `.relatorio__corpo p` mais abaixo). Quem ganha os 200px são as peças que se beneficiam de largura e antes sobravam espremidas — a grade de achados (que a 1320 vira duas colunas de verdade), as telas de terminal, as barras do placar e os iframes do bloco C. Nenhum parágrafo ficou mais largo do que já era. A ficha usa a MESMA medida, senão o título e o sumário começam em duas verticais diferentes, que é o tipo de desalinho que ninguém sabe nomear mas todo mundo vê. */ .sitio .relatorio, .sitio .ficha__miolo { max-width: 1320px; } .sitio .relatorio { padding-bottom: 96px; } /* ── UMA medida de leitura, e não seis ───────────────────────────────── Correção de 14/08/2026, a pedido do dono ("o texto não tem a mesma largura de outros conteúdos, deveria"). O mesmo defeito que os tutoriais tinham, e pior: aqui eram SEIS declarações em `ch` espalhadas pela folha (`68ch` no parágrafo, `68ch` no h3, `62ch` no deck, `62ch` na legenda, `68ch` no veredito da peça, e nenhuma no `

`). `ch` é relativo à fonte DE CADA ELEMENTO. Medido a 1440, a coluna de membro tinha SETE bordas direitas: 1146,4 no parágrafo · 1006,8 no deck · 1064,4 no veredito da peça · 895,6 na legenda do placar · 1316 no h2, na tabela e nas janelas das peças. Uma regra por elemento, e o resultado lia como desalinho em vez de decisão. O que resolve: UMA medida, calibrada no corpo do texto. `ch` da IBM Plex Sans é exatamente 0,6em, então `68ch` no parágrafo é `40,8em` da fonte do corpo — e a fonte do corpo é `--sitio-deck-corpo`. Multiplicar o token pelo mesmo 40,8 devolve os MESMOS 734,4px a 1440 e os mesmos 652,8px a 1180 que o parágrafo já tinha, e faz título, deck, legenda e veredito pousarem na mesma vertical. Em px fixo (o que os tutoriais usaram) isto não funcionaria aqui: lá o corpo não escala, e aqui `--sitio-deck-corpo` é um `clamp()` que anda de 16 a 18px. Uma medida fixa engordaria a linha em telas menores, que é o contrário do que uma medida de leitura serve pra fazer. A distinção que já existia continua de pé, e agora aparece: PROSA tem medida; PEÇA LARGA (tabela, tela de terminal, janela do bloco C, grade de achados, barras do placar, o gráfico da curva) ocupa a coluna toda. São duas bordas, e uma só quando a coluna estreita a ponto de a medida não morder mais. */ /* ── UMA medida, e não uma por corpo ─────────────────────────────────── Em 15/08/2026 isto chegou a ser TRÊS medidas, uma por tamanho de corpo, a partir de um achado tipográfico correto: a medida de leitura é inversamente proporcional ao corpo, e uma constante calibrada em 18px, emprestada a blocos de 16px e 13px, deixa a MESMA caixa caber 22% e 111% mais caracteres. Medido a 1440: `.curva__metodo` a 119 CPL contra a faixa confortável de 45 a 75. **Foi revertido, e o motivo não é tipográfico.** Uma borda direita só e um CPL igual em corpos diferentes são objetivos que se excluem por aritmética: fixar a borda faz o CPL variar com a fonte, e fixar o CPL faz a borda variar. O dono escolheu a BORDA, explicitamente e duas vezes ("queria que a largura do texto fosse idêntica à largura das janelas, tabelas etc."), e `sites/CLAUDE.md` registra `--rel-medida` como a medida ÚNICA de leitura. Com três medidas a prosa voltou a ter três bordas direitas (906, 1068 e 1146 a 1440), que é exatamente o defeito que a medida única existe pra impedir, e `TestUmaMedidaDeLeitura` pegou. Quem for reabrir isto: o CPL alto é real e continua sem solução dentro da restrição de uma borda. A saída, se um dia se quiser, é editorial (encurtar os blocos miúdos) ou de corpo (aproximar os tamanhos), nunca uma segunda medida. `.ficha__veredito` e `.ficha__abertura` continuam SEM medida, pela mesma decisão do dono. */ .sitio .relatorio { --rel-medida: calc(var(--sitio-deck-corpo) * 40.8); } .sitio .relatorio__grade { display: grid; gap: 40px; align-items: start; } @media (min-width: 1024px) { .sitio .relatorio__grade { grid-template-columns: 232px minmax(0, 1fr); gap: 56px; } } .sitio .relatorio__coluna { min-width: 0; } /* ── O FIM DA PÁGINA, e por que aqui não há uma tela vazia ───────────── Até 15/08/2026 esta linha era `.relatorio__coluna > :last-child { min-height: 100svh }`, e o motivo estava certo: o sumário acendia por régua de rolagem (`view-timeline`), a régua de uma seção só começa quando o topo dela chega ao topo da janela, e se a última seção é curta e o documento acaba logo depois esse ponto de rolagem NÃO EXISTE — a última entrada ficava apagada pra sempre, e clicar nela também não acendia. O preço era **855px de fundo puro no fim de TODO relatório** (medido: o último conteúdo terminava em y=10.237 e o rodapé começava em y=11.092), ou seja 7,6% da página, e crescendo com a janela do leitor — numa tela de 1080 o vão era 1080. Uma tela inteira em branco pra resolver um caso de borda de scroll-spy. **O mesmo problema já estava resolvido de outro jeito dentro do mesmo produto.** `monitor_site/static/monitor.js` marca a seção corrente por uma linha de leitura e trata o fim do documento em quatro linhas: if (innerHeight + Math.ceil(scrollY) >= scrollHeight - 2) atual = secoes[secoes.length - 1]; Duas soluções para o mesmo problema no mesmo produto é exatamente a inconsistência que a verificação de composição apontou. Ficou a do monitor, agora em `relatorio.js`: mesma linha de leitura, mesma regra de fim de página, mesmo marcador (`aria-current`, que é semântico antes de ser visual). Zero vazio, e o scroll-spy passou a valer também onde o navegador não tem `view-timeline`. */ /* ── O sumário ───────────────────────────────────────────────────────── O relatório tem dez mil palavras e treze seções; sem índice, a única forma de saber o que tem nele é rolar até o fim. Gruda na lateral a partir de 1024px e vira uma faixa de fichas daí pra baixo — nos dois casos sem uma linha de JavaScript: é lista de âncoras, e âncora é navegação nativa. */ .sitio .sumario { min-width: 0; } .sitio .sumario__titulo { margin: 0 0 12px; font-family: var(--voz-sistema); font-size: var(--sitio-rotulo-corpo); line-height: var(--sitio-rotulo-entrelinha); letter-spacing: var(--sitio-rotulo-espacamento); text-transform: uppercase; color: var(--sitio-tinta-secundaria); } .sitio .sumario__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: sumario; } .sitio .sumario__lista li { counter-increment: sumario; } .sitio .sumario__lista a { display: block; padding: 6px 12px; border: 1px solid var(--sitio-traco); border-radius: var(--sitio-raio-fino); background-color: var(--sitio-superficie); color: var(--sitio-tinta-secundaria); font-size: 13px; line-height: 20px; } .sitio .sumario__lista a:hover { color: var(--sitio-tinta-cheia); border-color: var(--sitio-traco-forte); } /* ── A PROMESSA, na coluna esquerda da vitrine ───────────────────────── Ela existe pra que a seção que as duas versões compartilham (o placar) pouse no mesmo trilho e com a mesma largura nas duas — antes o placar saía 288px mais à esquerda e 32% mais largo na vitrine, e quem entrava encontrava o conteúdo re-arranjado em vez de completado. Mesma casa da grade e mesma forma do sumário, NOME PRÓPRIO: o sumário é navegação de conteúdo que existe, isto é copy de conversão, e `test_vazamento.py` guarda o corte entre as duas versões procurando a palavra "sumario" na vitrine. Ver `_indice_prometido` em pagina.py. Os itens não são elos — é promessa, não navegação —, então não têm hover nem o aceso do scroll-spy. */ .sitio .promessa { min-width: 0; } .sitio .promessa__titulo { margin: 0 0 12px; font-family: var(--voz-sistema); font-size: var(--sitio-rotulo-corpo); line-height: var(--sitio-rotulo-entrelinha); letter-spacing: var(--sitio-rotulo-espacamento); text-transform: uppercase; color: var(--sitio-tinta-secundaria); } .sitio .promessa__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: promessa; } .sitio .promessa__lista li { counter-increment: promessa; display: block; padding: 6px 12px; border: 1px solid var(--sitio-traco); border-radius: var(--sitio-raio-fino); background-color: var(--sitio-superficie); color: var(--sitio-tinta-secundaria); font-size: 13px; line-height: 20px; text-wrap: pretty; } @media (min-width: 1024px) { .sitio .promessa { position: sticky; top: 24px; } .sitio .promessa__lista { display: block; } .sitio .promessa__lista li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; gap: 4px; padding: 7px 0 7px 14px; border: 0; border-left: 2px solid var(--sitio-traco); border-radius: 0; background: transparent; } .sitio .promessa__lista li::before { content: counter(promessa, decimal-leading-zero); font-family: var(--voz-sistema); font-size: 11px; color: var(--sitio-tinta-fraca); } } /* ── O ESTADO ACESO do sumário, marcado por `aria-current` ───────────── Quem marca é `relatorio.js`, com a régua do KavMonitor (ver o bloco do fim da página, acima). O atributo é `aria-current="true"` e não uma classe de estilo, pelo mesmo motivo que na bússola do monitor: a informação é semântica antes de ser visual, e quem lê por leitor de tela recebe "atual" junto com o nome da seção. Sem JavaScript o sumário continua o que sempre foi — uma lista de âncoras que funciona; nada some, só não acende. As duas formas do aceso (a fita do estreito e a coluna do largo) moram junto de cada layout, logo abaixo. */ /* ── O mapa do celular ───────────────────────────────────────────────── Até 15/08/2026 o sumário era `position: static` abaixo de 1024px: o `sticky` e o scroll-spy moravam os dois dentro de `@media (min-width: 1024px)`. Medido no relatório completo a 375px: da primeira seção até o fim eram **mais de dezenove mil pixels, 23 telas, sem um único indício de onde o leitor estava nem de quanto faltava** — na plataforma em que a página é ~60% mais alta, e a única sem mapa. Aqui ele vira uma fita grudada no topo: uma linha, os mesmos elos, rolando de lado DENTRO da própria caixa (nunca a página — ver `overflow-x` na `.sumario__lista`). O rótulo "Neste relatório" fica só pro leitor de tela: ele é o nome acessível do `