/* ═══════════════════════════════════════════════════════════════
   legal.css — Páginas legais (impressum.html)
   Extraído do <style> inline da página (revisão de layout Fable):
   CSS só em arquivo externo, pra a CSP poder perder 'unsafe-inline'.
   Depende de tokens.css + components.css (carregados antes).
═══════════════════════════════════════════════════════════════ */

body { max-width: 640px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-7); }
/* Rodada 7 — ícone da marca no topo da página legal (antes não tinha
   nenhuma marca visual, só o texto do <h1>). Mesmo tamanho/respiro do
   resto do produto (40px); página sempre escura, sem variante clara. */
.legal-logo { width: 40px; height: 40px; margin-bottom: var(--sp-4); }
.legal-logo img { width: 100%; height: 100%; display: block; }
h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-2xl); margin-bottom: var(--sp-5); }
h2 { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-3); }
dl { display: grid; grid-template-columns: 160px 1fr; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-5); }
dt { color: var(--mut); font-size: var(--fs-sm); }
dd { margin: 0; }
.pending { color: var(--mut); font-style: italic; }
@media (max-width: 480px) { dl { grid-template-columns: 1fr; gap: var(--sp-1); } dd { margin-bottom: var(--sp-3); } }

/* Rodada 9 — páginas legais geradas por docs/legal/build.mjs (termos,
   termos-aluno, privacidade, dpa). Mesmo arquivo de impressum.html, só
   com as classes que o gerador usa e que ainda não existiam aqui. */
.legal-meta { margin-top: calc(-1 * var(--sp-4)); margin-bottom: var(--sp-5); font-size: var(--fs-sm); }
.legal-nav { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.legal-nav a { color: var(--mut); }
.legal-nav a:hover, .legal-nav a:focus-visible { color: var(--fg); }
.legal-body p { margin-bottom: var(--sp-4); line-height: 1.6; }
.legal-table { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; font-size: var(--fs-sm); }
.legal-table th, .legal-table td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-table th { color: var(--mut); font-weight: 500; }
@media (max-width: 480px) { .legal-table { font-size: 12px; } .legal-table th, .legal-table td { padding: var(--sp-1) var(--sp-2); } }
/* Links do rodapé ("Dúvidas: e-mail · Voltar ao início"): sem cor própria saíam no azul padrão do navegador sobre o
   fundo escuro (2,02:1, abaixo do WCAG 4,5:1 — achado pelo axe do e2e 11.2 em 2026-11-01). Cor do texto + sublinhado. */
.legal-footer-note a { color: var(--tx); text-decoration: underline; }
.legal-footer-note { margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--border); font-size: var(--fs-sm); }

/* ═══ Estilos que eram atributos style="..." no HTML (extraídos para a CSP
   poder perder 'unsafe-inline'). #id = elemento com id; .s-* = mesmo
   conjunto de declarações reaproveitado. Repetição da classe no seletor
   mantém a precedência que o inline tinha sobre os componentes. ═══ */
.s-legal-6bcb8f.s-legal-6bcb8f.s-legal-6bcb8f{font-size:13px;line-height:1.6}
.s-legal-a80552.s-legal-a80552.s-legal-a80552{color:var(--accent)}
code { font-family: var(--font-ui); font-size: 0.95em; padding: 0 4px; border: 1px solid var(--border); border-radius: var(--r-sm); }