/* Páginas públicas de Termos e Privacidade.
   Ficam fora do painel — quem chega aqui vem de um link do cadastro de
   aplicativo dos marketplaces, sem estar logado. Por isso não carregam sidebar
   nem nada que dependa de token.

   Superfície de leitura, não de operação: o sucesso aqui é a pessoa entender e
   conseguir voltar a uma cláusula depois. Daí a coluna estreita, o sumário e as
   âncoras por seção — documento jurídico é citado por número. */

.legal-wrap {
  /* 680px com corpo de 16px dá ~66 caracteres por linha. Antes eram 760px com
     14px, o que rendia 85 — longe demais para o olho voltar à linha seguinte. */
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-8) var(--page-pad) var(--space-12);
}

/* Tabela precisa de mais ar que o texto corrido, então sangra além da coluna
   até onde a tela permitir */
/* A tabela fica na coluna do texto: sangrando 20px para fora, a borda dela
   não alinhava com o título nem com os parágrafos */
.legal-tabela-wrap { margin-inline: 0; }
/* --table-zebra (design-system.css) é calibrado contra --surface, mas esta
   tabela não vive em card -- fica direto sobre --bg (o fundo da página, mais
   escuro que --surface), e a listra perde contraste em cima dele (1,037:1
   medido, pior que o 1,08 rejeitado como "imperceptível" na escolha da cor
   -- achado da revisão do PR). Só no tema claro: no escuro a listra já fica
   mais clara que o fundo e a margem sobra (1,260 medido). */
:root:not([data-theme="dark"]) .legal-tabela-wrap { --table-zebra: #D7D7D7; }
/* Escurecer a listra aqui aproximou ela do hover global (--surface2 chapado,
   calibrado contra o --table-zebra PADRÃO, não este override) -- a folga
   fechou pra 1,050:1, pior que o 1,08 já rejeitado (achado da revisão do
   PR). Saída mais simples que recalibrar um terceiro tom: a linha não é
   clicável (tabela de documento jurídico), então sem hover o problema deixa
   de existir. */
.legal-tabela tbody tr:hover { background: none; }
/* A regra acima tem mais especificidade que tbody tr:nth-child(even) do
   design system, então na linha PAR ela não "não faz nada" -- apaga a
   listra (achado da revisão do PR: virou um hover invertido, mais forte que
   o 1,05 que tinha sido removido por fraco). Restaura a listra
   especificamente no cruzamento par+hover, com especificidade ainda maior;
   na linha ímpar (sem listra) a regra de cima continua valendo, sem
   mudança nenhuma, que era o efeito pretendido desde o início. */
.legal-tabela tbody tr:nth-child(even):hover { background: var(--table-zebra); }

.legal-topo {
  display: flex; align-items: center; gap: var(--space-3);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-8);
}
.legal-topo img { height: 34px; width: auto; display: block; }
.legal-topo .legal-home { display: flex; border-radius: var(--radius); }
.legal-topo .legal-home:focus-visible { outline-offset: 4px; }
.legal-topo nav { margin-left: auto; display: flex; gap: var(--space-4); }
.legal-topo nav a {
  font-size: var(--text-sm); color: var(--muted); text-decoration: none;
  padding: var(--space-2) 0;
}
.legal-topo nav a:hover { color: var(--text2); text-decoration: underline; text-underline-offset: 3px; }

.legal-wrap h1 {
  font-family: var(--font-serif); font-size: var(--text-3xl); font-weight: 800;
  color: var(--text); letter-spacing: -0.5px; line-height: 1.15;
  text-wrap: balance;
  margin-bottom: var(--space-3);
}

/* A data é o que decide qual versão do documento está valendo, então vai em
   mono — o papel que o sistema reserva para número — e não como legenda solta. */
.legal-data {
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--text-sm); color: var(--muted);
  margin-bottom: var(--space-8);
}
.legal-data .legal-data-rotulo {
  font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
}
.legal-data time {
  font-family: var(--font-mono); color: var(--text2);
  font-variant-numeric: tabular-nums;
}

/* ── Sumário ──────────────────────────────────────────────────────────────
   A política tem dez seções e cinco mil pixels de altura no celular. Sem índice
   a única navegação é rolar, e ninguém confere prazo de retenção rolando. */
.legal-sumario {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-5) 0;
  margin-bottom: var(--space-8);
}
/* Precisa da especificidade de .legal-wrap: sem ela o h2 de seção, declarado
   depois com o mesmo peso, vence por ordem e o rótulo do sumário sai como
   título de seção em serifa 20px. */
.legal-wrap .legal-sumario h2 {
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 var(--space-3); padding: 0; border: none;
}
.legal-sumario ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px;
  counter-reset: sumario;
}
/* Onze linhas numa coluna só tomavam a primeira tela inteira e empurravam o
   texto para depois da dobra. Em duas colunas a ordem continua de cima para
   baixo, coluna por coluna, como num índice impresso. */
@media (min-width: 641px) {
  .legal-sumario ol {
    grid-auto-flow: column;
    grid-template-rows: repeat(6, auto);
    column-gap: var(--space-6);
  }
}
/* Linha de índice, não parágrafo: a margem de .legal-wrap li (mais adiante,
   mesma especificidade) somava 8px a cada item e cada linha media 53px */
.legal-wrap .legal-sumario li { margin: 0; padding: 0; }
.legal-wrap .legal-sumario a { padding-block: var(--space-1); }
.legal-sumario li { margin: 0; counter-increment: sumario; }
.legal-sumario a {
  display: flex; gap: var(--space-3); align-items: baseline;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  color: var(--text2); text-decoration: none;
  border-radius: var(--radius-sm);
}
/* O número não é ornamento: cláusula jurídica se cita por ele, e é como o
   leitor volta ao ponto depois. Por isso legível, não esmaecido até sumir. */
.legal-sumario a::before {
  content: counter(sumario);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--muted); min-width: 1.6em; text-align: right;
  font-variant-numeric: tabular-nums;
}
.legal-sumario a:hover { color: var(--accent); }
.legal-sumario a:hover::before { color: var(--accent); }

/* ── Seções ─────────────────────────────────────────────────────────────── */
.legal-wrap h2 {
  font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 700;
  color: var(--text); margin: var(--space-8) 0 var(--space-3);
  padding-top: var(--space-6); border-top: 1px solid var(--border);
  /* âncora não pode encostar no topo da janela ao chegar pelo sumário */
  scroll-margin-top: var(--space-6);
  text-wrap: balance;
}
.legal-wrap h2:first-of-type { border-top: none; padding-top: 0; }

/* Pegar o link de uma cláusula é a ação que este documento existe para servir —
   "conforme a seção 6" só vale se der para mandar a seção 6.
   O marcador fica sempre visível, pendurado fora da coluna de texto. Revelar no
   hover seria dez links invisíveis no caminho do teclado, e num contrato a
   marca da cláusula é impressa na margem, não escondida até alguém procurar. */
.legal-ancora {
  position: absolute; left: calc(var(--space-6) * -1);
  font-family: var(--font-mono); font-weight: 400; font-size: 0.72em;
  /* --muted é o piso de texto do sistema; --border2 é régua, não tinta */
  color: var(--muted); text-decoration: none;
  transition: color var(--dur-base);
}
.legal-wrap h2 { position: relative; }
.legal-wrap h2:hover .legal-ancora { color: var(--text2); }
.legal-ancora:hover, .legal-ancora:focus-visible { color: var(--accent); }

/* Sem margem sobrando para o marcador pendurado, ele volta para dentro */
@media (max-width: 860px) {
  .legal-ancora { position: static; margin-left: var(--space-2); }
}

.legal-wrap h3 {
  font-size: var(--text-md); font-weight: 600; color: var(--text);
  margin: var(--space-5) 0 var(--space-2);
  scroll-margin-top: var(--space-6);
}

/* ── Texto ──────────────────────────────────────────────────────────────── */
.legal-wrap p,
.legal-wrap li { font-size: var(--text-lg); color: var(--text2); line-height: 1.7; }
/* pretty evita a linha órfã de uma palavra no fim do parágrafo */
.legal-wrap p  { margin-bottom: var(--space-4); text-wrap: pretty; }
.legal-wrap ul { margin: 0 0 var(--space-5); padding-left: var(--space-5); }
.legal-wrap li { margin-bottom: var(--space-2); padding-left: var(--space-1); }
/* O disco padrão do navegador não pertence a sistema nenhum. Traço na cor da
   régua, que é o que separa tudo o mais nestas páginas. */
.legal-wrap ul li::marker { content: '–  '; color: var(--border2); }
.legal-wrap strong { color: var(--text); font-weight: 600; }
.legal-wrap a { color: var(--accent); text-underline-offset: 3px; }
.legal-wrap code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--surface3); padding: 1px 5px; border-radius: 4px;
  color: var(--text2);
}

/* Bloco que o responsável precisa preencher antes de publicar de verdade */
.legal-pendente {
  background: var(--warning-s);
  border: 1px solid var(--warning);
  border-radius: var(--radius); padding: var(--space-4);
  margin-bottom: var(--space-8);
}
.legal-pendente p { margin: 0; font-size: var(--text-base); color: var(--text2); }

/* ── Tabelas ────────────────────────────────────────────────────────────── */
.legal-tabela { width: 100%; border-collapse: collapse; margin-bottom: var(--space-5); }
.legal-tabela th, .legal-tabela td {
  text-align: left; padding: var(--space-3);
  border-bottom: 1px solid var(--border); font-size: var(--text-md);
  color: var(--text2); vertical-align: top;
}
.legal-tabela thead th {
  color: var(--text); font-weight: 600;
  font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom-color: var(--border2);
}
.legal-tabela tbody tr:last-child th,
.legal-tabela tbody tr:last-child td { border-bottom: none; }
.legal-tabela tbody th { font-weight: 500; color: var(--text); }

.legal-rodape {
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
  margin-top: var(--space-10); padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm); color: var(--muted);
}
/* O separador herda a cor do rodapé: em --border2 ele sumia, e um separador
   invisível não separa nada. */
.legal-rodape .sep { opacity: 0.55; }
.legal-rodape a { color: var(--muted); text-decoration: none; }
.legal-rodape a:hover { color: var(--text2); text-decoration: underline; text-underline-offset: 3px; }

/* Superfície do navegador que também é do design: seleção sai do cinza padrão */
.legal-wrap ::selection { background: var(--accent-s); color: var(--text); }

@media (max-width: 640px) {
  .legal-wrap { padding-top: var(--space-6); }
  .legal-wrap h1 { font-size: var(--text-2xl); }
  /* Cabeçalho empilha: o link de navegação não disputa a linha com o logo */
  .legal-topo { flex-wrap: wrap; gap: var(--space-2); }
  .legal-topo nav { margin-left: 0; flex-basis: 100%; }
}

/* ── Impressão ───────────────────────────────────────────────────────────
   Contrato acaba impresso ou salvo em PDF — é o destino natural de um
   documento jurídico, e sem isto ele sairia com o tema da tela e com os links
   virando texto morto no papel. */
@media print {
  .legal-wrap { max-width: none; padding: 0; }

  /* Preto no branco, independentemente do tema que estava na tela */
  .legal-wrap, .legal-wrap p, .legal-wrap li,
  .legal-tabela th, .legal-tabela td { color: #000; background: transparent; }
  .legal-wrap h1, .legal-wrap h2, .legal-wrap h3, .legal-wrap strong { color: #000; }
  .legal-data, .legal-rodape { color: #333; }

  .legal-topo { border-bottom: 1px solid #000; }
  .legal-topo nav, .legal-ancora { display: none; }

  /* O sumário vira índice de página impressa: sem link, mas com a ordem */
  .legal-sumario { border-color: #000; break-inside: avoid; }
  .legal-sumario a { color: #000; }

  /* Endereço do link não pode se perder no papel */
  .legal-wrap main a[href^="http"]::after,
  .legal-wrap main a[href^="/"]::after {
    content: ' (' attr(href) ')';
    font-family: var(--font-mono); font-size: 0.85em; color: #555;
  }
  .legal-sumario a::after { content: none; }

  /* Uma cláusula não deve começar no rodapé da página nem partir a tabela */
  .legal-wrap h2, .legal-wrap h3 { break-after: avoid; border-top-color: #000; }
  .legal-tabela, .legal-pendente { break-inside: avoid; }
  .legal-tabela th, .legal-tabela td { border-bottom-color: #999; }

  .legal-pendente { border: 1px solid #000; }
}