/* conteudo.css - a folha compartilhada dos posts de /conteudo/ (sumario "Nesta
   pagina" + casca de leitura).
   Gerado por scripts/post-motor.mjs. NAO editar so aqui: a proxima rodada do
   motor sobrescreve. Quem mexer neste arquivo tem que colar o mesmo texto na
   const CONTEUDO_CSS de scripts/post-motor.mjs (foi o que a passagem de tema
   claro de 12/08 fez; os dois estao byte a byte iguais).
   Tokens de cor vem do :root de estilo.css - aqui nao entra hex. */

.post-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.post-grid>*{min-width:0}
/* 68px = 51 da topbar sticky + respiro. Com 16px (e 12 no desktop) o pulo do
   sumario parava o H2 DEBAIXO do topo fixo: medido nas tres larguras em 12/08,
   o titulo clicado chegava a 16px do alto e a topbar cobre ate 51. */
article.post h2{scroll-margin-top:68px}

/* 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
   e, ainda que este arquivo venha depois no head, um seletor mais especifico nao
   depende da ordem pra ganhar.
   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)}

/* ── TEMA CLARO (12/08): a casca dos 61 posts ───────────────────────────────
   O <style> de cada post entra no <head> ANTES deste arquivo (conferido nos 60
   com sumario), entao regra de mesma especificidade AQUI vence no empate. E por
   isso que a correcao de casca dos posts mora neste arquivo e nao em 61 HTMLs.
   Nenhum hex: so token do :root de estilo.css. */

/* RESPIRO LATERAL. O <style> do post traz .post-shell{padding:34px 0 8px} e o
   atalho de 4 valores zera o padding horizontal que .wrap tinha dado: em 390 o
   texto dos 60 posts encostava nas duas bordas da tela (medido: article em
   left=0, right=390). De quebra, em 1366 a coluna comecava em 143 enquanto a
   marca da topbar comeca em 163. Longhand so no eixo X preserva o 34px de topo,
   e o 16px abaixo de 480 espelha o breakpoint de .wrap em estilo.css: com 20px
   fixo a coluna do post ficava 4px fora do prumo da marca no celular. */
.post-shell{padding-left:20px;padding-right:20px}
@media (max-width:480px){ .post-shell{padding-left:16px;padding-right:16px} }

/* MEDIDA DE LEITURA. O corpo do post herdava .post{max-width:74ch}, que em 1366
   dava 789px = 101 caracteres por linha (medido no navegador, fonte real). A
   faixa legivel e 45-75; acima disso o olho perde a volta da linha, e post longo
   e exatamente onde isso cobra. 600px com corpo de 17px da ~72 caracteres. */
article.post{max-width:600px;margin-left:auto;margin-right:auto}

/* CORPO EM TINTA. No noturno o corpo era papel sobre tinta, contraste cheio. Ao
   virar pro claro, --text2 (grafite) deixou o texto corrente em 5,12:1 e visivel-
   mente mais fraco que o proprio titulo. Em papel, texto longo e tinta: 15,65:1.
   Link, <strong> e legenda seguem com regra propria e nao sao afetados. */
article.post .post-body p,
article.post .post-body li{color:var(--text)}

/* 17px so a partir de 700px: no celular 16px ja da linha curta (45 caracteres a
   390) e aumentar corpo la encurta mais ainda. */
@media (min-width:700px){
  article.post .post-body p,
  article.post .post-body ul,
  article.post .post-body ol{font-size:17px;line-height:1.72}
}

/* TRILHA. Fica em --muted (a mesma familia do sumario) e nao herda a tinta que
   o corpo passou a usar: e metadado, nao leitura. A regra existe porque a de
   cima ganha do <style> do post por ordem, e sem ela o :hover do inline (mais
   especifico que a linha simples) ficaria inconsistente com a cor base. */
article.post .post-bread,
article.post .post-bread a{color:var(--muted)}
article.post .post-bread a:hover{color:var(--accent)}

/* DIVISOR ESTRUTURAL. --line (#D8D9D4) sobre papel da 1,15:1 e some; o divisor
   entre secoes do post pede --line2, que o proprio :root documenta como a linha
   de divisor estrutural. Filete interno de cartao continua em --line. */
article.post .post-rel{border-top-color:var(--line2)}
.post-faq details{border-bottom-color:var(--line2)}
.post-faq details:first-child{border-top-color:var(--line2)}

@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}
  /* no desktop a caixa fica sempre aberta: o resumo vira titulo estatico */
  .post-sumario summary{pointer-events:none}
  .post-sumario summary::after{display:none}
}
