/* =============================================
   DecodeGear V8 — Article
   DEK, TOC, comparison table wide-escape, key takeaway, article width.
   ============================================= */

.dg-article__header { margin-bottom: var(--dg-space-6); }
.dg-article__badges { display: flex; gap: var(--dg-space-2); margin-bottom: var(--dg-space-3); }

/* ---- DEK (seção 20/22 — resumo editorial abaixo do H1) ---- */
.dg-dek {
  font-size: var(--dg-text-lg);
  line-height: var(--dg-leading-relaxed);
  color: var(--dg-text-muted);
  margin: var(--dg-space-3) 0 var(--dg-space-4);
  font-family: var(--dg-font-body);
  font-weight: 400;
}

.dg-article__meta {
  display: flex; align-items: center; gap: var(--dg-space-3);
  font-size: var(--dg-text-sm); color: var(--dg-text-muted);
  margin-bottom: var(--dg-space-5);
}

/* Nunca anúncio entre H1/DEK/author/featured — ver 44-performance-budget.md §Ad CLS */
.dg-article__featured { margin: var(--dg-space-5) 0 var(--dg-space-7); border-radius: var(--radius-lg); overflow: hidden; }
.dg-article__featured img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.dg-entry-content { font-size: var(--dg-text-base); line-height: var(--dg-leading-relaxed); }
.dg-entry-content > * + * { margin-top: var(--dg-space-4); }

/* Elementos que podem escapar do container de leitura (720px) controladamente */
.dg-entry-content .dg-wide-escape {
  max-width: var(--dg-container-landing);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ---- TOC (preserva lógica funcional já existente — main.js buildTOC()) ---- */
.dg-toc { background: var(--dg-surface); border-radius: var(--radius-md); padding: var(--dg-space-4); }
.dg-toc__title { display: flex; align-items: center; gap: var(--dg-space-2); font-size: var(--dg-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--dg-space-3); }
.dg-toc__list, .dg-toc__sublist { list-style: none; margin: 0; padding: 0; }
.dg-toc__sublist { padding-left: var(--dg-space-4); margin-top: var(--dg-space-1); }
.dg-toc__link {
  display: block; padding: var(--dg-space-2) var(--dg-space-3);
  border-radius: var(--radius-sm); color: var(--dg-text-muted);
  text-decoration: none; font-size: var(--dg-text-sm);
}
.dg-toc__link:hover { color: var(--dg-text); background: var(--dg-surface-elevated); }
.dg-toc__link--active { color: var(--dg-link); background: var(--dg-badge-topic-bg); font-weight: 600; }

/* Mobile: <details> nativo, acessível, sem depender de JS (seção 22) */
.dg-toc--mobile { display: none; }
@media (max-width: 1023px) {
  .dg-toc--desktop { display: none; }
  .dg-toc--mobile { display: block; margin: var(--dg-space-5) 0; }
  .dg-toc--mobile summary { cursor: pointer; font-weight: 700; padding: var(--dg-space-3); background: var(--dg-surface); border-radius: var(--radius-md); }
  .dg-toc--mobile[open] summary { border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .dg-toc--mobile .dg-toc__list { padding: var(--dg-space-3); background: var(--dg-surface); border-radius: 0 0 var(--radius-md) var(--radius-md); }
}
@media (min-width: 1024px) {
  .dg-toc--mobile { display: none; }
}

/* ---- Key Takeaway ---- */
.dg-key-takeaway {
  background: var(--dg-badge-topic-bg);
  border-left: var(--dg-border-w-2) solid var(--dg-link);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--dg-space-4) var(--dg-space-5);
  margin: var(--dg-space-6) 0;
}
.dg-key-takeaway__label { font-size: var(--dg-text-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--dg-link); margin-bottom: var(--dg-space-2); }

/* ---- Note / Warning / Methodology note ---- */
.dg-note, .dg-warning, .dg-methodology-note {
  border-radius: var(--radius-md);
  padding: var(--dg-space-4);
  margin: var(--dg-space-5) 0;
  font-size: var(--dg-text-sm);
}
.dg-note { background: var(--dg-surface); border: var(--dg-border-w) solid var(--dg-border); }
.dg-warning { background: color-mix(in srgb, var(--dg-warning) 12%, var(--dg-surface)); border: var(--dg-border-w) solid var(--dg-warning); }
.dg-methodology-note { background: var(--dg-badge-topic-bg); color: var(--dg-text-muted); font-style: italic; }

/* ---- Reading progress (opcional, JS mínimo — ver 44-performance-budget.md) ---- */
.dg-reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--dg-accent); z-index: 150;
  transition: width .1s linear;
}
@media (prefers-reduced-motion: reduce) { .dg-reading-progress { transition: none; } }

/* ---- Cabeçalho de tabela no conteúdo editorial (5.0.8, finding F8) ----
   A regra legada `.entry-content table th` (style.css) pinta o fundo com
   --color-primary e o override dark de texto (`[data-theme="dark"] .entry-content th`)
   troca só a cor do texto: em dark ficava #F0F6FC sobre #58A6FF = 2.32:1.
   Par de tokens com AA garantido nos dois temas (light 5.17:1, dark 7.4:1).
   Especificidade (0,2,2) vence o override legado (0,2,1); tabelas antigas com cor
   inline continuam cobertas por legacy-compat.css (0,3,1). */
.entry-content table th,
[data-theme="dark"] .entry-content table th {
  background: var(--dg-table-header-strong-bg);
  color: var(--dg-table-header-strong-text);
}