/* Estilos das páginas de documento (privacidade, termos). Depende de base.css: os tokens,
 * a fonte, o header e o rodapé vivem lá. */

.doc { padding: 56px 0 72px; }
.doc-head { max-width: 760px; }
.doc-head h1 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; letter-spacing: -0.03em; }
.doc-head .updated { margin-top: 10px; font-size: 14px; color: var(--ink-mid); }

.draft {
  max-width: 760px; margin-top: 24px; padding: 16px;
  background: rgba(138, 90, 11, .08);
  border: 1px solid rgba(138, 90, 11, .35);
  border-left-width: 3px;
  border-radius: var(--r-md);
  color: var(--warning); font-size: 13px;
}
.draft strong { display: block; margin-bottom: 4px; }

.prose { max-width: 68ch; margin-top: 36px; }
.prose h2 {
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 20px;
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 24px; font-size: 15px; }
.prose p { margin-top: 12px; font-size: 16px; color: var(--ink-mid); }
.prose ul, .prose ol { margin: 12px 0 0; padding-left: 20px; color: var(--ink-mid); }
.prose li { margin: 7px 0; }
.prose a { color: var(--accent); }

/* Campo que depende de informação que só a Fenox tem. Fica visualmente inequívoco para não passar
   batido numa revisão rápida — e para doer se chegar a produção sem preencher. */
.todo {
  padding: 1px 6px;
  background: rgba(220, 38, 38, .12);
  border: 1px dashed rgba(220, 38, 38, .5);
  border-radius: var(--r-xs);
  color: var(--danger); font-size: 13px; font-weight: 600;
}

.table-wrap { margin-top: 16px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 11px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
th { color: var(--ink); font-weight: 600; background: var(--surface); }
td { color: var(--ink-mid); }

/* ── A matriz de dados da Política (issue #384) ────────────────────────────────────────────
 *
 * São cinco campos por linha — categoria, finalidade, base legal, quem responde e prazo — e
 * cada um deles é uma frase, não uma palavra. Como tabela de cinco colunas isso não caberia
 * nem no celular nem aqui: a `.prose` tem 68ch de largura por decisão de legibilidade, e cinco
 * colunas de texto dentro disso viram uma faixa que só se lê arrastando de lado. Documento
 * jurídico que se lê arrastando não se lê.
 *
 * Por isso cada linha é um CARTÃO com os campos rotulados, em duas colunas quando há espaço e
 * em uma quando não há. O que se perde é comparar linhas na vertical; o que se ganha é a linha
 * inteira legível de uma vez, que é como se lê uma política — pelo dado que interessa.
 *
 * A semântica de tabela é preservada com `role` explícito no HTML: trocar o `display` de uma
 * tabela apaga os papéis implícitos, e sem os `role="table|rowgroup|row|cell"` o leitor de tela
 * anunciaria isto como um monte de texto solto. O rótulo visível vem de `data-rotulo`, e o
 * `thead` real continua no HTML — escondido na tela, presente para quem navega por cabeçalho. */
.matriz { display: block; font-size: 14px; }
.matriz thead {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.matriz tbody { display: grid; gap: 10px; }
.matriz tr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
  padding: 14px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.matriz td { padding: 0; border: 0; color: var(--ink-mid); }
.matriz td::before {
  content: attr(data-rotulo);
  display: block;
  margin: 12px 0 3px;
  /* `--ink` e não `--ink-soft`: rótulo de 11px é texto pequeno, e o soft dá 4,01:1 — reprova o AA. */
  color: var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.matriz td:first-child {
  grid-column: 1 / -1;
  color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35;
}
.matriz td:first-child::before { content: none; }
.matriz .todo { display: inline-block; margin-top: 3px; }

@media (max-width: 640px) {
  .matriz tr { grid-template-columns: minmax(0, 1fr); }
}

/* A `.prose` tem 68ch porque é a medida de linha confortável para PARÁGRAFO. A matriz não é
 * parágrafo: são duas colunas de campo curto, e nessa largura elas quebram cedo demais enquanto
 * sobra meia tela vazia à direita. Em telas largas ela avança 180px para dentro desse vazio.
 *
 * O número é conservador de propósito: o `.wrap` vai a 1180px e a prosa começa colada à esquerda
 * dele, então em 1080px de viewport ainda restam ~350px livres à direita. 180 cabe com folga em
 * qualquer largura acima do ponto de corte — e é isso que garante que a PÁGINA nunca ganhe barra
 * de rolagem horizontal, que era o defeito que a matriz de cinco colunas tinha. */
@media (min-width: 1080px) {
  .matriz-wrap { width: calc(100% + 180px); }
}

.back { display: inline-flex; align-items: center; gap: 7px; margin-top: 40px; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.back:hover { text-decoration: underline; }