/* Projeto Plataforma · leitor de artigo
   Complementa artigo.css sem alterar o visual-base do site. */

:root{
  --reader-azul:#0071e3;
  --reader-ambar:#e95420;
  --reader-tinta:#1d1d1f;
  --reader-tinta-2:#4a5260;
  --reader-tinta-3:#86868b;
  --reader-linha:#e5e5ea;
  --reader-nuvem:#fbfbfd;
  --reader-azul-suave:#eef5ff;
  --reader-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

/* O layout anterior já acertava o ponto crítico: minmax(0,1fr).
   Aqui só evoluímos para três trilhos sem reintroduzir overflow. */
.article-container{max-width:1360px}
.main-grid{
  grid-template-columns:220px minmax(0,720px) 260px;
  gap:38px;
  justify-content:center;
}
.main-grid > *{min-width:0}

/* Índice desktop */
.toc-sidebar{
  position:sticky;
  top:96px;
  align-self:start;
  min-width:0;
  max-height:calc(100vh - 122px);
}
.toc-card{
  position:relative;
  max-height:calc(100vh - 122px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--reader-linha);
  border-radius:18px;
  background:rgba(255,255,255,.90);
  box-shadow:0 14px 40px -30px rgba(0,0,0,.34);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
}
.toc-eyebrow{
  display:flex;align-items:center;gap:8px;
  padding:17px 16px 12px;
  font-size:.72rem;font-weight:800;letter-spacing:.105em;text-transform:uppercase;
  color:#969aa1;
}
.article-toc{
  position:relative;
  overflow-y:auto;
  overflow-x:hidden;

  /*
   * A lateral pode rolar quando necessário, mas ao chegar ao limite
   * o evento volta naturalmente para a página.
   */
  overscroll-behavior-y:auto;
  scrollbar-width:thin;
  padding:2px 8px 10px;
}
.article-toc::before{
  content:"";position:absolute;left:15px;top:2px;bottom:10px;width:1px;
  background:#edf0f4;
}
.toc-link{
  position:relative;z-index:1;
  display:block;
  margin:2px 0;
  padding:9px 11px 9px 18px;
  border-radius:10px;
  color:#737983;
  text-decoration:none;
  font-size:.88rem;
  line-height:1.42;
  transition:background .2s cubic-bezier(.2,1,.3,1),color .2s,transform .2s;
}
.toc-link::before{
  content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;border-radius:3px;
  background:transparent;
}
.toc-link:hover{background:#f7f8fa;color:var(--reader-tinta);transform:translateX(1px)}
.toc-link.is-active{
  color:var(--reader-tinta);
  background:linear-gradient(90deg,#eef5ff 0%,#f5f1ff 100%);
  font-weight:650;
}
.toc-link.is-active::before{background:var(--reader-azul)}
.toc-link--h3{padding-left:29px;font-size:.82rem;color:#858b95}
.toc-link--h3::before{left:17px}
.toc-empty{display:block;padding:10px 11px 14px 18px;font-size:.82rem;line-height:1.5;color:var(--reader-tinta-3)}
.toc-footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;
  border-top:1px solid var(--reader-linha);
  background:rgba(251,251,253,.86);
  font-size:.75rem;color:var(--reader-tinta-3);
}
.toc-footer strong{font:700 .75rem/1 var(--reader-mono);color:var(--reader-azul)}

/* Índice compacto para tablet/celular */
.toc-mobile{display:none;margin:0 0 26px;border:1px solid var(--reader-linha);border-radius:14px;background:#fff;overflow:hidden}
.toc-mobile summary{cursor:pointer;list-style:none;padding:14px 16px;display:flex;gap:9px;align-items:center;font-weight:700;color:var(--reader-tinta)}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile nav{padding:0 8px 10px;border-top:1px solid #f0f1f3}
.toc-mobile .toc-link{padding-top:10px;padding-bottom:10px}

/* Markdown — detalhes que faltavam no leitor atual */
.article-content h4{font-size:1.08rem;font-weight:650;margin:30px 0 12px;color:var(--reader-tinta);scroll-margin-top:96px}
.article-content h2,
.article-content h3,
.article-content h4{position:relative}
.article-content .heading-anchor{
  position:absolute;left:-1.25em;top:.08em;
  opacity:0;color:#a8adb5;text-decoration:none;border:0;
  font-family:var(--reader-mono);font-size:.72em;font-weight:500;
  transition:opacity .16s,color .16s;
}
.article-content h2:hover .heading-anchor,
.article-content h3:hover .heading-anchor,
.article-content h4:hover .heading-anchor,
.article-content .heading-anchor:focus{opacity:1;color:var(--reader-azul)}

.article-content ul,.article-content ol{margin:0 0 1.55rem;padding-left:1.4rem}
.article-content li{margin:.42rem 0;line-height:1.68}
.article-content hr{border:0;border-top:1px solid var(--reader-linha);margin:48px 0}
.article-content .tabela-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:30px 0;border:1px solid var(--reader-linha);border-radius:12px}
.article-content table{width:100%;min-width:560px;border-collapse:collapse;font-size:.94rem}
.article-content th,.article-content td{padding:12px 14px;border-bottom:1px solid var(--reader-linha);text-align:left;vertical-align:top}
.article-content th{background:#f8f9fb;color:var(--reader-tinta);font-weight:700}
.article-content tr:last-child td{border-bottom:0}

/* Código: a janela macOS já vem do template; estes estilos acrescentam linguagem e copiar. */
.article-content pre{isolation:isolate}
.code-toolbar{position:relative;margin:36px 0}
.code-toolbar pre{margin:0}
.code-lang{
  position:absolute;z-index:3;top:14px;left:78px;
  font:700 .66rem/1 var(--reader-mono);letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;
}
.code-copy{
  position:absolute;z-index:4;top:10px;right:10px;
  border:1px solid rgba(255,255,255,.12);border-radius:8px;
  background:rgba(255,255,255,.08);color:#d8dde6;
  padding:6px 9px;font:600 .7rem/1 var(--reader-mono);cursor:pointer;
  transition:background .18s,transform .18s;
}
.code-copy:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.code-copy.is-copied{color:#9ee6ad}
.article-content pre code.hljs{padding:0;background:transparent}

/* Fórmulas */
.article-content .arithmatex{max-width:100%}
.article-content div.arithmatex{overflow-x:auto;overflow-y:hidden;padding:12px 2px;margin:26px 0;text-align:center}
.article-content .katex-display{margin:.25em 0}
.article-content .katex{font-size:1.04em}

/* Notas de rodapé geradas pelo Markdown extra */
.article-content .footnote{margin-top:48px;padding-top:20px;border-top:1px solid var(--reader-linha);font-size:.9rem;color:var(--reader-tinta-2)}
.article-content .footnote hr{display:none}

@media (max-width:1180px){
  .article-container{max-width:1000px}
  .main-grid{grid-template-columns:210px minmax(0,720px);gap:36px}
  .sidebar{grid-column:2;position:static;border-left:0;padding-left:0;border-top:1px solid var(--reader-linha);padding-top:28px}
}

@media (max-width:820px){
  .main-grid{grid-template-columns:minmax(0,1fr)}
  .toc-sidebar{display:none}
  .toc-mobile{display:block}
  .sidebar{grid-column:1}
}

@media (max-width:640px){
  .article-container{padding-left:16px;padding-right:16px}
  .toc-mobile{margin-bottom:22px}
  .heading-anchor{display:none}
  .article-content table{min-width:520px}
  .code-lang{display:none}
}

@media (prefers-reduced-motion:reduce){
  .toc-link,.code-copy{transition:none}
}

/* Markdown inline deve permanecer inline.
   Protege <em>/<strong> contra estilos legados do artigo.css. */
.article-content em,
.article-content strong {
  display: inline;
  margin: 0;
  padding: 0;
  text-align: inherit;
}

.article-content em {
  font-style: italic;
}

.article-content strong {
  font-weight: 700;
}