/* conteudo.css - sumario "Nesta pagina" dos posts de /conteudo/.
   Gerado por scripts/post-motor.mjs. NAO editar a mao: a proxima rodada
   do motor sobrescreve. Tokens de cor vem do :root de estilo.css. */

.post-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.post-grid>*{min-width:0}
article.post h2{scroll-margin-top:16px}

/* Bloco de codigo no celular (defeito achado em 11/08 na varredura das 61 paginas:
   8 posts com codigo vazavam ate 613px numa viewport de 390). O <pre>/<code> com
   white-space:pre define a largura MINIMA do ancestral, e o overflow-x:auto da caixa
   nao segura: o grid item cresce junto e empurra a pagina. Medido candidato a
   candidato; so a quebra no proprio <code> resolve. Seletor com 3 niveis de
   especificidade de proposito: o .post-cod code mora no <style> inline de cada post,
   que vem DEPOIS deste arquivo no head e venceria no empate.
   Acima de 700px volta a ser pre + rolagem: em tela larga a linha inteira cabe e
   quebrar codigo atrapalha a leitura. */
@media (max-width:699.98px){
  article.post .post-cod code,
  article.post pre code,
  article.post pre{white-space:pre-wrap;overflow-wrap:anywhere}
}

.post-sumario-caixa{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.post-sumario summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--text);padding:12px 16px;list-style:none;position:relative;user-select:none}
.post-sumario summary::-webkit-details-marker{display:none}
.post-sumario summary::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.post-sumario-caixa[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.post-sumario ol{list-style:none;margin:0;padding:2px 10px 10px}
.post-sumario li{margin:0}
.post-sumario ol a{display:block;font-size:13.5px;line-height:1.45;color:var(--muted);text-decoration:none;padding:7px 12px;border-left:2.5px solid transparent;border-radius:0 7px 7px 0;transition:color .15s,background .15s,border-color .15s}
.post-sumario ol a:hover{color:var(--text);background:var(--surface2)}
.post-sumario ol a.on{color:var(--accent);border-left-color:var(--accent-vivo);background:var(--surface2);font-weight:600}
.post-sumario-cta{display:block;font-size:13px;font-weight:700;color:var(--accent);text-decoration:none;border-top:1px solid var(--line);margin:0 10px;padding:11px 12px 13px}
.post-sumario-cta:hover{color:var(--text)}

@media (min-width:1100px){
  .post-grid{grid-template-columns:240px minmax(0,1fr);gap:30px}
  /* 24px batia no header fixo e escondia o titulo do sumario no scroll (11/08).
     72px = altura da topbar + respiro. */
  .post-sumario{position:sticky;top:72px;max-height:calc(100vh - 96px);overflow-y:auto}
  article.post h2{scroll-margin-top:12px}
  /* no desktop a caixa fica sempre aberta: o resumo vira titulo estatico */
  .post-sumario summary{pointer-events:none}
  .post-sumario summary::after{display:none}
}