/* ==========================================================================
   VEREDITO — Páginas legais (Termos e Privacidade)
   Consome os tokens do design system e as classes de página de landing.css,
   ambos carregados antes deste arquivo. Nenhum token novo é criado aqui.

   Um documento legal é texto longo lido em coluna estreita, não uma seção de
   marketing: a medida fica presa em --container-prose (620px) e o índice vira
   coluna fixa a partir de 1000px, onde sobra largura para ele.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cabeçalho do documento
   -------------------------------------------------------------------------- */

.doc-head {
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-10);
}

.doc-title {
  max-width: 16ch;
  margin-top: var(--space-6);
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-7);
}

.doc-meta p {
  font: var(--weight-regular) var(--text-caption) / 1.4 var(--font-mono);
  color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   2. Grade: índice + corpo
   -------------------------------------------------------------------------- */

.doc-grid {
  display: grid;
  gap: var(--space-10);
  padding-block: var(--space-10) var(--space-16);
  align-items: start;
}

.toc {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-1);
  padding: var(--space-6);
}

.toc-title {
  margin-bottom: var(--space-4);
}

.toc-list {
  counter-reset: toc;
}

.toc-list li {
  counter-increment: toc;
  border-bottom: 1px solid var(--border);
}

.toc-list li:last-child {
  border-bottom: 0;
}

.toc-link {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-3);
  font: var(--weight-regular) var(--text-small) / 1.4 var(--font-body);
  letter-spacing: var(--text-small-ls);
  color: var(--text-muted);
  text-decoration: none;
}

.toc-link::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--text-label-ls);
  color: var(--text-subtle);
  padding-top: 3px;
}

.toc-link:hover {
  color: var(--text-heading);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. Corpo
   -------------------------------------------------------------------------- */

.doc-body {
  max-width: var(--container-prose);
}

.doc-sec {
  padding-top: var(--space-10);
}

.doc-sec:first-child {
  padding-top: 0;
}

.doc-sec > p,
.doc-sec > ul {
  margin-top: var(--space-5);
}

.doc-sec p {
  font: var(--weight-regular) var(--text-body-size) / var(--text-body-lh) var(--font-body);
  letter-spacing: var(--text-body-ls);
  color: var(--text-body);
}

.doc-sec h3 {
  margin-top: var(--space-8);
}

/* Lista de documento: o travessão do design system como marcador. */
.doc-list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--space-4);
  padding-block: var(--space-3);
  font: var(--weight-regular) var(--text-body-size) / var(--text-body-lh) var(--font-body);
  letter-spacing: var(--text-body-ls);
  color: var(--text-body);
}

.doc-list li::before {
  content: "—";
  font-family: var(--font-mono);
  color: var(--text-subtle);
}

/* O resumo em linguagem simples, no topo de cada documento. */
.doc-note {
  margin-top: var(--space-6);
  padding: var(--space-7);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.doc-note .doc-list li {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.doc-note .doc-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Campo que ainda precisa ser preenchido antes de publicar. */
.doc-fill {
  padding: 1px var(--space-3);
  border-radius: var(--radius-xs);
  background: var(--primary-tint);
  color: var(--primary-hover);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0;
}

.doc-list strong {
  font-weight: var(--weight-medium);
  color: var(--text-heading);
}

/* Rodapé das páginas legais: o mesmo do site, sem o CTA de fechamento. */
.foot--slim {
  padding-block: var(--space-10);
}

.foot-end--slim {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.doc-updated {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  font: var(--weight-regular) var(--text-caption) / 1.5 var(--font-mono);
  color: var(--text-subtle);
}

@media (min-width: 1000px) {
  .doc-head {
    padding-block: var(--space-14);
  }

  .doc-grid {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-14);
    padding-block: var(--space-14) var(--space-20);
  }

  .toc {
    position: sticky;
    top: 92px;
  }
}