/* O CSS do site para as páginas de pacote, ligado pelo servidor no <head> de todas
   (injecao::preparar). Usa os tokens do próprio pacote, com valores de reserva.

   A versão no fim da navegação do cabeçalho — as mesmas regras de obvio.css, para o
   cabeçalho não mudar entre a galeria e o infográfico. */
.nav{align-items:baseline}
.versao{margin-left:12px;display:inline-flex;align-items:baseline;gap:6px;font-size:11.5px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;color:var(--faint,#8A9296)}
.versao-num{font-weight:700;color:var(--muted,#5A6367)}
@media (max-width:640px){.versao-build{display:none}}

/* O aviso "Corrigido em", injetado no topo do infográfico corrigido. */
.obvio-errata{max-width:1080px;margin:16px auto 0;padding:12px 18px;box-sizing:border-box;
  border:1px solid var(--line,#DED9CF);border-left:4px solid var(--def,#A4502F);border-radius:6px;
  font:15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;color:var(--ink,#1C2226)}
.obvio-errata a{color:inherit}
@media (max-width:640px){.obvio-errata{margin:12px 18px 0}}

/* O índice, antes da primeira seção (secoes::indice_html). */
.indice{padding:32px 0;border-bottom:1px solid var(--line,#DED9CF)}
.indice-tit{margin:0 0 12px;font:500 13px var(--sans,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#5A6367)}
.indice ol{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.indice li{break-inside:avoid}
.indice a{display:flex;align-items:baseline;gap:14px;padding:6px 0;text-decoration:none}
.indice-num{min-width:22px;font-family:var(--serif,Georgia,serif);font-size:15px;color:var(--faint,#8A9296)}
.indice-rot{font:500 13px var(--sans,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#5A6367)}
.indice a:hover .indice-rot{color:var(--ink,#1C2226)}
.indice-fontes{margin:16px 0 0;font-size:14px}
.indice-fontes a{color:var(--muted,#5A6367)}
.indice-fontes a:hover{color:var(--ink,#1C2226)}
@media (max-width:760px){.indice ol{columns:1}}

/* As setas ao lado do número da seção (secoes::setas_html): discretas, em V. */
.secao-setas{display:inline-flex;gap:2px;margin-left:10px;vertical-align:1px}
.seta{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;color:var(--faint,#8A9296)}
a.seta:hover{color:var(--ink,#1C2226);background:var(--line,#DED9CF)}
.seta-off{opacity:.3}
.seta-topo{margin-left:4px}
.seta svg{display:block}

/* O "Compartilhar" de cada seção, abaixo do título (secoes::compartilhar_html). */
.secao-acoes{position:relative;display:inline-block;margin:2px 0 14px}
.secao-share{background:none;border:1px solid var(--line,#DED9CF);color:var(--muted,#5A6367);border-radius:999px;padding:4px 12px;font:12px var(--sans,sans-serif);cursor:pointer}
.secao-share:hover{color:var(--ink,#1C2226);border-color:var(--muted,#5A6367)}
.secao-menu{left:0;right:auto}
.share-menu.open{display:block}
.share-ok.on{opacity:1}

/* Ao seguir um link para #sN, o título não encosta no topo; no celular, o número da seção
   (que fica acima do título) também aparece. */
h2[id]{scroll-margin-top:24px}
@media (max-width:760px){h2[id]{scroll-margin-top:76px}}