/* MANUAL — moldura, navegação, conteúdo e figuras.
 *
 * Uma folha só. Se aparecer regra de uma página específica, é sinal de que a
 * peça devia virar componente aqui.
 *
 * As três correções estruturais desta versão estão comentadas no lugar, com o
 * número que as motivou: busque por REFERÊNCIA DE ALINHAMENTO, por MEDIDA e
 * por STICKY.
 */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-total) + var(--e5)); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--osso);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: var(--linha);
  -webkit-font-smoothing: antialiased;
}

/* O ANEL DE FOCO É O DO PRODUTO: 2px, deslocado 2, no raio de controle.
   ⚠ O DEGRAU SAIU DE MEDIR CONTRA O VIZINHO REAL, não contra branco. O menu
     é `--osso`, e sobre ele o laranja vivo (#F2762E) dá 2,66:1 e o sólido
     (#E86A22) dá 2,98 — os dois abaixo dos 3:1 que a WCAG 1.4.11 pede para
     indicador. O `--acento-esc` dá 3,57 na mesa, 3,87 no papel e 3,35 no
     bloco. No escuro do painel os dois primeiros passam com folga, e é por
     isso que lá o produto usa o vivo. */
:focus-visible {
  outline: 2px solid var(--acento-esc);
  outline-offset: 2px;
  border-radius: var(--r-peca);
}

/* ⚠ O TEXTO USA O TOM LEGÍVEL E O SUBLINHADO USA O LARANJA DA MARCA. É a
   divisão que o pedido descreve: o link não pode ser `--marca` (2,84:1 no
   papel), mas o traço embaixo dele pode — ele não carrega significado
   sozinho, a palavra carrega. Resultado: o link LÊ como laranja sem que
   nenhuma letra tenha sido clareada. */
a {
  color: var(--acento);
  text-decoration-color: var(--marca);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--acento); }

.so-leitor {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.pular {
  position: fixed; left: var(--e4); top: -100px; z-index: 100;
  padding: var(--e3) var(--e4);
  background: var(--marca); color: var(--on-acento);
  font-weight: 600; border-radius: var(--r-peca); text-decoration: none;
  transition: top .12s ease;
}
.pular:focus { top: var(--e3); }

/* ============================================================ REFERÊNCIA DE
   ALINHAMENTO

   Uma só, e todo mundo a usa: o conteúdo do cabeçalho e a grade do corpo
   dividem `--moldura-max` e `--calha`. É o que faz a marca cair exatamente
   sobre a primeira coluna do menu, em qualquer largura.

   ⚠ Antes o cabeçalho era de borda a borda e o corpo era centrado num teto
     de 1560px: numa janela de 1920 a marca ficava a 156px do começo do menu,
     e a 1440 ficava 24px do outro lado. O desalinho até trocava de sinal.
   ========================================================================= */

.fita {
  max-width: var(--moldura-max);
  margin: 0 auto;
  padding-inline: var(--calha);
}

/* ------------------------------------------------------------- cabeçalho */

.topo {
  position: sticky; top: 0; z-index: 40;
  background: var(--papel);
  border-bottom: 1px solid var(--fio);
}
.topo .fita { height: var(--topo-h); display: flex; align-items: center; gap: var(--e5); }

.topo__marca {
  display: flex; align-items: center; gap: var(--e3);
  flex: none; padding-block: var(--e2);
  text-decoration: none; color: var(--tinta);
}
/* A marca é SVG embutido (ver `js/icones.js`): é o que deixa o símbolo ler
   `--marca` e a palavra ler `--tinta` a partir dos tokens. */
.topo__marca [data-marca] { display: block; line-height: 0; }
.topo__marca .marca { display: block; height: 20px; width: auto; }
.topo__marca .marca-curta { display: none; }
/* ⚠ ESTA REGRA CASAVA `span` GENÉRICO, e a marca virou `<span>` nesta rodada:
   ela herdou o fio divisor e os 12px de recuo, e nascia um traço vertical solto
   à esquerda do símbolo. Quarto caso do mesmo gotcha no projeto — seletor por
   TAG alcança o que ninguém escreveu pensando nele. Agora casa a classe. */
.topo__sub {
  padding-left: var(--e3);
  border-left: 1px solid var(--fio-forte);
  color: var(--texto-2); font-size: var(--t-peq); white-space: nowrap;
}

.topo__busca { position: relative; margin-left: auto; flex: 0 1 320px; min-width: 0; }
.topo__busca-ic {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  display: block; color: var(--texto-3); pointer-events: none;
}
.topo__busca input {
  width: 100%; padding: 8px var(--e3) 8px 34px;
  background: var(--osso); color: var(--tinta);
  border: 1px solid var(--fio-forte); border-radius: var(--r-peca);
  font: inherit; font-size: var(--t-peq);
}
.topo__busca input::placeholder { color: var(--texto-3); }

/* O botão de assuntos é o único CONTROLE do manual, e por isso ele veste o
   material de controle do produto — o oposto do `.ui`, que só cita um. */
.topo__menu-ic { display: inline-flex; }
.topo__menu {
  display: none; align-items: center; gap: var(--e2);
  padding: 8px var(--e3);
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--fio-forte); border-radius: var(--r-peca);
  font: inherit; font-size: var(--t-peq); cursor: pointer;
}

/* ----------------------------------------------------------------- corpo */

.corpo {
  display: grid;
  grid-template-columns: var(--lateral-l) minmax(0, 1fr) var(--indice-l);
  max-width: var(--moldura-max);
  margin: 0 auto;
  padding-inline: var(--calha);
  /* ⚠ NADA de `align-items: start`: ver STICKY, logo abaixo. */
}
.lateral { grid-column: 1; grid-row: 1; }
.conteudo, .capa { grid-column: 2; grid-row: 1; }
.indice { grid-column: 3; grid-row: 1; }

/* Página sem "Nesta página" (a entrada, "Sobre esta edição") não reserva a coluna
   dela: eram 220px de vazio à direita, e o vazio lia como conteúdo faltando.

   ⚠ ELA PRECISA VIVER DENTRO DA MEDIA QUERY, e a primeira versão não vivia.
     `:not(:has(...))` tem especificidade 0,2,0 contra os 0,1,0 do `.corpo` das
     media queries de baixo — então ela VENCIA no estreito e a entrada nascia
     com duas colunas num celular, o conteúdo espremido em 60% da tela e um
     vazio do lado. Abaixo de 1200 o problema que ela resolve nem existe: lá o
     índice já não tem coluna própria. */
@media (min-width: 1200px) {
  .corpo:not(:has(.indice)) { grid-template-columns: var(--lateral-l) minmax(0, 1fr); }
}

/* ==================================================================== STICKY

   A barra lateral é o ITEM da grade e ocupa a linha inteira (a grade estica
   por padrão). Quem gruda é o embrulho de dentro.

   ⚠ Antes o sticky estava no próprio item, com `align-items: start`. Um
     elemento grudado só segura enquanto o bloco que o contém está na tela, e
     ali esse bloco era a altura do item. Medido: numa página curta (a capa),
     rolar 1500px levava o menu de y=60 para y=-65; numa página longa (um
     capítulo), ele ficava em y=60. O mesmo menu, dois comportamentos, conforme
     o tamanho da página.
   ========================================================================= */

.lateral__fixo, .indice__fixo {
  position: sticky;
  top: var(--topo-total);
  max-height: calc(100dvh - var(--topo-total));
  overflow-y: auto;              /* `auto`, nunca `scroll`: a barra só aparece se fizer falta */
  overscroll-behavior: contain;
}

/* ----------------------------------------------------------- menu lateral */

.lateral { border-right: 1px solid var(--fio); }
.lateral__fixo { padding: var(--e6) var(--e5) var(--e7) 0; }

.sum { list-style: none; margin: 0; padding: 0; }
.sum__grupo + .sum__grupo { margin-top: var(--e5); }
/* O CARIMBO — rótulo em caixa alta é MONO, e a receita é a do produto:
   `--font-mono`, 11px, 600, `.14em`, `--text-6`. É a assinatura tipográfica
   mais reconhecível do TodaRota, e o manual não tinha nenhuma.
   ⚠ Vale para rótulo, nunca para texto corrido: mono em parágrafo transforma
     documentação em terminal. */
.carimbo, .sum__grupo > b, .indice__t, .aviso__t {
  font-family: var(--mono);
  font-size: var(--t-carimbo); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-3);
}

.sum__grupo > b {
  display: block; margin-bottom: var(--e2); padding-left: var(--e3);
}
.sum__itens { list-style: none; margin: 0; padding: 0; }
.sum__itens li { margin: 1px 0; }

/* O ITEM DO MENU TRAZ O NÓ DA ROTA — a assinatura nº 1 do produto, o losango
   de `.nav__node` em `css/shell.css`: vazado em repouso, cheio de laranja no
   ativo. É o desenho mais reconhecível do TodaRota e o manual não o tinha.
   ⚠ A GUIA VERTICAL do produto fica de fora, e ele mesmo a esconde nas seções
     fixas: ela liga os itens de um grupo, e aqui a maioria dos grupos tem um
     item só — uma guia de um item liga o nada a nada. */
.sum__link {
  position: relative;
  display: block; padding: 6px var(--e3) 6px 26px;
  border-radius: var(--r-peca);
  color: var(--texto); font-size: var(--t-peq); line-height: 1.4;
  text-decoration: none;
}
.sum__link::before {
  content: ""; position: absolute; left: 9px; top: 50%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1.5px solid var(--fio-forte); border-radius: 1.5px;
  background: var(--osso);
  transition: border-color .12s ease, background .12s ease;
}
.sum__link:hover { background: var(--controle-bg); color: var(--tinta); }
.sum__link:hover::before { border-color: var(--texto-3); }

/* ⚠ O ATIVO DEIXA O RÓTULO EM TINTA ESCURA, e o laranja vai para o NÓ.
   No produto o rótulo do ativo é laranja, e ali funciona: sobre o escuro o
   `--accent` dá 5,7:1. Numa folha clara o degrau mais escuro que a paleta
   tem (`#B54F16`) chega a 4,31:1 sobre a superfície de controle — abaixo de
   4,5 —, e não existe laranja mais escuro no produto para pedir emprestado.
   Clarear a superfície até o texto passar deixaria o item ativo a 1,05:1 do
   fundo, ou seja invisível como superfície. Então o que muda é QUEM carrega
   o laranja: o nó, que é forma e responde a 3:1, não a 4,5. */
.sum__link[aria-current="page"] {
  background: var(--controle-bg);
  color: var(--tinta); font-weight: 500;
}
/* ⚠ O nó usa o mesmo degrau do anel de foco, e pelo mesmo motivo: sobre a
   superfície de controle o `--marca` dá 2,38:1 e a WCAG 1.4.11 pede 3:1
   para forma. Este dá 3,25. */
.sum__link[aria-current="page"]::before {
  border-color: var(--acento-esc); background: var(--acento-esc);
}
.sum__link[aria-current="page"]:hover { background: var(--controle-hov); }

.sum__rodape {
  margin-top: var(--e6); padding-top: var(--e3);
  border-top: 1px solid var(--fio);
  font-size: var(--t-mini); color: var(--texto-3);
}
.sum__nada { padding: var(--e3); margin: 0; color: var(--texto-2); font-size: var(--t-peq); }
/* O link discreto para "Sobre esta edição", no pé do menu. */
.sum__sobre {
  margin-top: var(--e6); padding-top: var(--e3);
  border-top: 1px solid var(--fio);
  font-size: var(--t-mini);
}
.sum__sobre a { color: var(--texto-3); }
.sum__sobre a[aria-current="page"] { color: var(--tinta); }

/* ------------------------------------------------------------ índice local */

.indice__fixo { padding: var(--e7) 0 var(--e7) var(--e5); }
.indice__t { margin: 0 0 var(--e2); }
.indice ol { list-style: none; margin: 0; padding: 0; }
.indice li { margin: 0; }
.indice a {
  display: block; padding: 4px var(--e3);
  border-left: 2px solid var(--fio);
  color: var(--texto-2); font-size: var(--t-mini); line-height: 1.45;
  text-decoration: none;
}
.indice a:hover { color: var(--tinta); border-left-color: var(--fio-forte); }
.indice a.is-aqui { color: var(--acento); border-left-color: var(--acento-esc); }
.indice__resumo { display: none; }

/* -------------------------------------------------------------- conteúdo */

.conteudo, .capa {
  min-width: 0;
  padding: var(--e7) var(--e7) var(--e8);
  background: var(--papel);
  border-inline: 1px solid var(--fio);
}

/* =================================================================== MEDIDA

   Em pixel, aplicada ao filho direto: h1, parágrafo, lista e tabela dividem a
   MESMA margem direita.

   ⚠ Era `68ch`, que é relativo ao corpo de CADA elemento. O mesmo valor dava
     700px no parágrafo, 739 no resumo e 962 no h1. A coluna não tinha uma
     borda direita, tinha três.

   A figura tem licença para ir além, porque é onde o espaço rende.
   ========================================================================= */
.conteudo > *, .capa > * { max-width: var(--medida); }
.conteudo > .fig, .conteudo > .larga, .capa > .larga { max-width: var(--medida-fig); }

.trilha { margin: 0 0 var(--e2); font-size: var(--t-mini); color: var(--texto-3); }
.trilha a { color: var(--texto-2); text-decoration: none; }
.trilha a:hover { text-decoration: underline; }

h1 {
  margin: 0 0 var(--e3);
  font-size: var(--t-h1); line-height: 1.14; letter-spacing: -.021em;
  color: var(--tinta); font-weight: 600;
}
.resumo { margin: 0 0 var(--e4); font-size: 1.125rem; line-height: 1.5; color: var(--texto-2); }

.para-quem {
  display: inline-block; margin: 0 0 var(--e5);
  padding: 5px var(--e3);
  background: var(--bloco); border: 1px solid var(--fio);
  border-radius: var(--r-pill);
  font-size: var(--t-mini); color: var(--texto-2);
}
.para-quem b { color: var(--tinta); font-weight: 600; }

/* ⚠ `.para-quem` é inline-block, e margem de irmão inline-block NÃO COLAPSA:
   com o `--e7` dele mais o `--e8` daqui eram 120px somados, mais o recuo do
   fio — 136px de vazio entre o chip e o primeiro título. */
.para-quem + h2 { margin-top: var(--e6); }

h2 {
  margin: var(--e8) 0 var(--e3);
  padding-top: var(--e4);
  border-top: 1px solid var(--fio);
  font-size: var(--t-h2); line-height: 1.25; letter-spacing: -.012em;
  color: var(--tinta); font-weight: 600;
  scroll-margin-top: calc(var(--topo-total) + var(--e4));
}
h3 {
  margin: var(--e6) 0 var(--e2);
  font-size: var(--t-h3); color: var(--tinta); font-weight: 600;
  scroll-margin-top: calc(var(--topo-total) + var(--e4));
}
p { margin: 0 0 var(--e4); }
strong { color: var(--tinta); font-weight: 600; }

ul, ol { margin: 0 0 var(--e4); padding-left: var(--e5); }
li { margin: var(--e2) 0; }
li::marker { color: var(--texto-3); }

.passos { counter-reset: passo; list-style: none; padding: 0; }
.passos > li {
  counter-increment: passo;
  position: relative; margin: 0 0 var(--e4); padding-left: 42px; min-height: 26px;
}
.passos > li::before {
  content: counter(passo);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  background: var(--bloco); color: var(--tinta);
  border: 1px solid var(--fio-forte); border-radius: 50%;
  /* mono porque é NÚMERO, o mesmo critério do produto: `tabular-nums` e mono
     no dado, nunca na prosa */
  font-family: var(--mono); font-size: var(--t-mini); font-weight: 600;
}

/* CITAÇÃO DE UM CONTROLE DO SISTEMA — o nome de um botão dentro da frase.
   ⚠ Ela tem que ser RECONHECÍVEL e não pode parecer um controle DESTE
     documento. Por isso ela empresta a cor e o peso de uma tecla do produto e
     recusa tudo que promete clique: sem o relevo do `--key`, sem a superfície
     de controle, com o raio miúdo (`--r-seg`, 5px) em vez do raio de controle
     (8px), e sem hover. Uma tecla de verdade do manual — o botão de assuntos
     — usa o outro desenho, e a diferença se lê lado a lado. */
.ui {
  padding: 1px 6px;
  background: var(--bloco); border: 1px solid var(--fio);
  border-radius: var(--r-seg);
  font-size: .92em; font-weight: 500; color: var(--tinta);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- tabelas */

.rolagem { overflow-x: auto; margin: 0 0 var(--e4); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-peq); }
th, td { padding: var(--e3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--fio); }
thead th { border-bottom: 1px solid var(--fio-forte); }
th {
  font-size: var(--t-mini); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3);
}
td strong { color: var(--tinta); }

/* ----------------------------------------------------------------- avisos */

/* AVISO — SUPERFÍCIE INTEIRA, NUNCA TARJA NA BORDA.
   A regra é do produto, escrita nele: "alerta é superfície inteira, nunca
   tarja colorida na borda". A versão anterior deste manual usava uma tarja de
   3px e TRÊS cores, das quais duas (um azul e um âmbar) não existiam em lugar
   nenhum do sistema.
   São duas naturezas, as mesmas do `.aviso` do produto:
     `--cuidado`  ↔ `.aviso--erro`   (superfície laranja, tinta de acento)
     `--nota`     ↔ `.aviso--neutro` (superfície neutra, tinta de apoio) */
.aviso {
  display: flex; flex-direction: column; gap: var(--e1);
  margin: 0 0 var(--e4); padding: var(--e4);
  background: var(--nota-bg);
  border: 1px solid var(--nota-fio);
  border-radius: var(--r-peca);
  font-size: var(--t-peq); line-height: 1.5;
  color: var(--texto-2);
}
.aviso > * { margin: 0; }
.aviso__t { display: flex; align-items: center; gap: 6px; }
.aviso__t .ic { flex: none; }

.aviso--cuidado {
  background: var(--cuidado-bg); border-color: var(--cuidado-fio);
  color: var(--acento);
}
.aviso--cuidado .aviso__t { color: var(--acento); }
.aviso--cuidado strong, .aviso--cuidado b { color: var(--acento); }
.aviso--demo { background: var(--nota-bg); border-color: var(--nota-fio); }

/* ---------------------------------------------------------------- figuras */

.fig { margin: var(--e6) 0 var(--e7); }

.fig__quadro {
  position: relative;
  /* mede a si mesmo, para a tarja de ampliar sair de cima de figura pequena */
  container-type: inline-size;
  display: block; width: 100%; padding: var(--e3);
  background: var(--moldura);
  border: 1px solid var(--fio); border-radius: var(--r-bloco);
  cursor: zoom-in;
}
.fig__quadro img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  /* a captura é escura e a página é clara: a moldura é o que impede a imagem
     de virar um buraco no meio do texto */
  box-shadow: 0 1px 2px rgb(22 24 28 / .14), 0 8px 22px rgb(22 24 28 / .10);
}

/* A marcação vive em % da imagem, medida pelo script de captura, e por isso
   continua no lugar quando a página encolhe e quando o leitor amplia. Nada é
   gravado no PNG. */
.fig__marca {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 24px; height: 24px;
  /* ⚠ ESTE É O LUGAR ONDE O LARANJA DA MARCA MEDE MELHOR, não pior: o disco
     vive sobre a CAPTURA ESCURA, e ali o `--marca` dá 6,8:1 contra os 5,99
     do degrau abaixo. O número por cima sobe de 5,47 para 6,22:1 com o
     `--on-acento`, o marrom quase preto que o produto escreve dentro de toda
     peça laranja. O anel claro é o que separa a marcação do escuro. */
  background: var(--marca); color: var(--on-acento);
  border: 2px solid var(--papel); border-radius: 50%;
  font-size: var(--t-mini); font-weight: 700; line-height: 1;
  box-shadow: 0 1px 4px rgb(22 24 28 / .45);
  pointer-events: none;
}

.fig__ampliar {
  position: absolute; left: var(--e5); bottom: var(--e5);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  background: rgb(255 255 255 / .92); color: var(--texto-2);
  border: 1px solid var(--fio-forte); border-radius: var(--r-peca);
  font-size: var(--t-mini); line-height: 1.3;
  pointer-events: none;
}
.fig__ampliar .ic { flex: none; }
.fig__quadro:hover .fig__ampliar,
.fig__quadro:focus-visible .fig__ampliar { color: var(--tinta); border-color: var(--texto-3); }

/* ⚠ EM FIGURA PEQUENA A TARJA DESCE PARA A MOLDURA, em vez de flutuar sobre a
   imagem. Numa tela inteira ela cai sobre um canto qualquer e não custa nada;
   num recorte de 244px ela cobre justamente o controle que a figura existe
   para mostrar — foi o que aconteceu com o bloco do recorte a 390px.
   ⚠ A medida é do CONTAINER, que é a caixa de CONTEÚDO: 560 aqui são 584 de
   caixa, por causa dos 12px de recuo de cada lado. O corte separa o que é
   RECORTE (244 a 518px neste lote) do que é tela inteira ocupando a coluna
   (589 e 752). No celular a coluna toda fica abaixo do corte, e ali a tarja
   desce também: numa figura de 332px ela taparia conteúdo igual.
   ⚠ O ESPAÇO É ABERTO POR UM FILHO, nunca pelo recuo do próprio quadro: um
   elemento NÃO responde à própria container query, então `padding-bottom` aqui
   seria ignorado em silêncio e só a tarja mudaria de traje. */
@container (max-width: 560px) {
  .fig__img { margin-bottom: 26px; }
  .fig__ampliar {
    left: var(--e3); bottom: var(--e3);
    padding: 0; background: none; border: 0;
    color: var(--texto-3);
  }
}

/* ⚠ E EM FIGURA BAIXA, pelo mesmo motivo por outro eixo: um recorte de uma
   linha de tabela tem 60px de altura contra os 24 da tarja. A condição é a
   ALTURA e vem de `js/manual.js`, porque a container query desta moldura é de
   largura; o traje é o mesmo, e as duas regras existem separadas de propósito
   — juntá-las esconderia que são duas perguntas diferentes. */
.fig__quadro.eh-baixa .fig__img { margin-bottom: 26px; }
.fig__quadro.eh-baixa .fig__ampliar {
  left: var(--e3); bottom: var(--e3);
  padding: 0; background: none; border: 0;
  color: var(--texto-3);
}

.fig__legenda {
  counter-reset: marca;
  list-style: none; margin: var(--e3) 0 0; padding: 0;
  display: grid; gap: var(--e2);
  font-size: var(--t-peq); color: var(--texto-2);
}
/* ⚠ Nada de grid no <li>: cada <span> do texto viraria item de grade por conta
   própria e as peças se empilhariam na mesma célula. */
.fig__legenda li {
  counter-increment: marca;
  position: relative; margin: 0; padding-left: 28px; min-height: 20px;
}
.fig__legenda li::before {
  content: counter(marca);
  position: absolute; left: 0; top: 1px;
  display: grid; place-items: center;
  width: 19px; height: 19px;
  background: var(--acento-bg); color: var(--acento);
  border: 1px solid var(--acento-fio); border-radius: 50%;
  font-size: 11px; font-family: var(--mono); font-weight: 600;
}

figcaption { margin-top: var(--e3); font-size: var(--t-mini); color: var(--texto-3); line-height: 1.5; }
figcaption b { color: var(--texto-2); font-weight: 600; }

/* -------------------------------------------------------------- ampliador */

dialog.lupa {
  width: min(96vw, 1600px); max-width: none; max-height: 94dvh;
  padding: 0; border: 1px solid var(--fio-forte); border-radius: var(--r-bloco);
  background: var(--papel); color: var(--texto);
  overflow: hidden;
  box-shadow: 0 24px 64px rgb(22 24 28 / .28);
}
dialog.lupa::backdrop { background: rgb(22 24 28 / .55); }
.lupa__topo {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--fio);
  font-size: var(--t-peq); color: var(--texto-2);
}
.lupa__fechar {
  margin-left: auto; flex: none;
  padding: 6px 12px;
  background: var(--bloco); color: var(--tinta);
  border: 1px solid var(--fio-forte); border-radius: var(--r-peca);
  font: inherit; font-size: var(--t-peq); cursor: pointer;
}
.lupa__corpo {
  overflow: auto; max-height: calc(94dvh - 55px);
  padding: var(--e4); background: var(--moldura);
}
.lupa__quadro { position: relative; }
.lupa__quadro img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* ------------------------------------------------------ anterior e próximo */

.vizinhos {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  margin-top: var(--e8); padding-top: var(--e5);
  border-top: 1px solid var(--fio);
  max-width: var(--medida-fig);
}
.vizinho {
  flex: 1 1 240px; min-width: 0;
  padding: var(--e3) var(--e4);
  background: var(--papel);
  border: 1px solid var(--fio); border-radius: var(--r-peca);
  text-decoration: none; color: var(--tinta);
}
.vizinho:hover { border-color: var(--fio-forte); background: var(--osso); }
.vizinho small { display: block; margin-bottom: 1px; font-size: var(--t-mini); color: var(--texto-3); }
.vizinho--prox { text-align: right; }
.vizinho--nao {
  color: var(--texto-3); border-style: dashed; background: transparent;
  font-size: var(--t-peq);
}

/* ----------------------------------------------------------------- rodapé */

.rodape { border-top: 1px solid var(--fio); background: var(--osso); }
.rodape .fita { padding-block: var(--e5) var(--e6); font-size: var(--t-mini); color: var(--texto-3); }
.rodape b { color: var(--texto-2); }
.rodape dl {
  display: grid; grid-template-columns: auto 1fr; gap: 2px var(--e3);
  margin: var(--e2) 0 0; max-width: 640px;
}
.rodape dt { color: var(--texto-3); }
.rodape dd { margin: 0; color: var(--texto-2); font-family: var(--mono); }
.rodape a { color: var(--texto-2); }

/* ------------------------------------------------------- página de entrada */

.capa { padding-top: var(--e8); }
.capa h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
.capa .resumo { font-size: 1.1875rem; margin-bottom: var(--e7); }

/* ⚠ AS CÉLULAS QUE SOBRAM NO FIM DA GRADE SÃO PREENCHIDAS, e o motivo é
   visual: o vão de 1px é desenhado pelo FUNDO do contêiner, então toda célula
   sem dono aparece como um bloco cinza. Sete assuntos numa grade de três
   colunas deixam duas sem dono. Enquanto o Apoio era o cartão apagado, o cinza
   dele encostava no das vazias e a emenda não se via; quando ele ganhou
   capítulo e virou papel, sobrou uma faixa cinza ao lado dele.
   ⚠ Quem preenche é `preencherGrade` em `js/manual.js`, contando as colunas
     pelo `offsetTop` — o número delas é responsivo (`auto-fill`) e não cabe
     numa regra de CSS.
   ⚠ Tentei antes desenhar as linhas com `box-shadow` nos cartões e fundo de
     papel: a sombra do vizinho pinta por cima e as linhas somem. Fica
     registrado para ninguém repetir. */
.assuntos {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  margin: 0 0 var(--e7); padding: 0; list-style: none;
  background: var(--fio);
  border: 1px solid var(--fio); border-radius: var(--r-bloco);
  overflow: hidden;
}
.assuntos .vaga { background: var(--papel); }
.assuntos li { margin: 0; }
.assunto {
  display: block; height: 100%;
  padding: var(--e4) var(--e4) var(--e5);
  background: var(--papel);
  text-decoration: none; color: var(--texto-2);
}
.assunto:hover { background: var(--osso); }
.assunto b { display: block; margin-bottom: 2px; color: var(--tinta); font-size: var(--t-corpo); }
.assunto span { font-size: var(--t-peq); }
.assunto em { display: block; margin-top: var(--e3); font-style: normal; font-size: var(--t-mini); color: var(--acento); }
.assunto--nao { background: var(--osso); }
.assunto--nao b { color: var(--texto-2); }
.assunto--nao em { color: var(--texto-3); }

/* ------------------------------------------------------------- responsivo */

@media (max-width: 1199px) {
  :root { --lateral-l: 248px; }
  .corpo { grid-template-columns: var(--lateral-l) minmax(0, 1fr); }
  .conteudo, .capa { border-right: 0; }
  .indice { grid-column: 2; grid-row: 1; background: var(--papel); border-left: 1px solid var(--fio); padding: var(--e6) var(--e7) 0; }
  .conteudo { grid-column: 2; grid-row: 2; padding-top: var(--e5); }
  .indice__fixo { position: static; max-height: none; overflow: visible; padding: 0; }
  .indice__t { display: none; }
  .indice__resumo {
    display: block; cursor: pointer; list-style: none;
    padding: var(--e3) var(--e4);
    background: var(--osso); border: 1px solid var(--fio); border-radius: var(--r-peca);
    font-size: var(--t-peq); color: var(--texto);
    max-width: var(--medida);
  }
  .indice__resumo::-webkit-details-marker { display: none; }
  .indice__resumo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
  .indice ol { padding-top: var(--e3); max-width: var(--medida); }
}

@media (max-width: 899px) {
  /* ⚠ Os DOIS mudam juntos: --topo-total é --topo-h mais o fio. Trocar só o
     primeiro deixava o menu preso 8px abaixo do cabeçalho. */
  :root { --topo-h: 56px; --topo-total: 57px; --calha: 16px; }
  .topo .fita { gap: var(--e3); }
  .topo__menu { display: inline-flex; }
  .topo__sub { display: none; }
  .topo__busca { flex: 1 1 auto; }

  .corpo { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }

  .lateral {
    position: fixed; inset: var(--topo-total) auto 0 0; z-index: 45;
    width: min(320px, 86vw);
    background: var(--papel);
    border-right: 1px solid var(--fio-forte);
    box-shadow: 0 0 40px rgb(22 24 28 / .18);
    transform: translateX(-102%);
    transition: transform .16s ease;
  }
  .lateral[data-aberta="sim"] { transform: none; }
  .lateral__fixo { position: static; max-height: none; height: 100%; padding: var(--e5) var(--e4); }

  .veu-menu { position: fixed; inset: var(--topo-total) 0 0; z-index: 44; background: rgb(22 24 28 / .4); }
  .veu-menu[hidden] { display: none; }

  .indice, .conteudo, .capa { grid-column: 1; border-inline: 0; }
  .indice { grid-row: 1; padding: var(--e4) var(--calha) 0; }
  .conteudo { grid-row: 2; padding: var(--e4) var(--calha) var(--e7); }
  .capa { grid-row: 1; padding: var(--e6) var(--calha) var(--e7); }
  h2 { margin-top: var(--e7); }
}

@media (max-width: 560px) {
  .vizinho--prox { text-align: left; }
  .assuntos { grid-template-columns: 1fr; }

  /* A FAIXA NÃO QUEBRA. Medido a 390: a marca horizontal (184px) mais o botão
     com rótulo (110) mais a busca não cabiam nos 358 úteis — o rótulo do botão
     quebrava em duas linhas e a busca ficava com 120px, mostrando "Bu".
     O símbolo (29px) e o glifo sozinho devolvem ~270px para a busca. */
  .topo__marca .marca-larga { display: none; }
  .topo__marca .marca-curta { display: block; }
  .topo__menu .topo__menu-rot { display: none; }
  .topo__menu { padding-inline: var(--e3); }
}

/* O embrulho da imagem: é sobre ELE que a marcação é posicionada em %, e ele
   tem exatamente o tamanho da imagem, sem o recuo da moldura. */
.fig__img, .lupa__quadro .fig__img { position: relative; display: block; }

/* ------------------------------------------------------------------ ícones

   O `.ic` é a classe do sistema. Tamanho e traço vêm do desenhador em
   `js/icones.js`; aqui só o alinhamento óptico. */

.ic { display: block; flex: none; }
.indice__caret { display: inline-flex; color: var(--texto-3); transition: transform .12s ease; }
.indice details[open] .indice__caret { transform: rotate(180deg); }
.assunto em .ic { display: inline-block; vertical-align: -3px; margin-left: 4px; }