/* ═══════════════════════════════════════════════════════════════════════════
   As páginas estáticas: o aviso de privacidade (`/privacidade.html`, spec 48
   §8) e, desde o 0.13 da spec 74, os termos (`/termos.html`) e o suporte
   (`/suporte.html`) — a mesma folha para as três.

   Folha própria, e pequena, em vez do `estilo.css` do app: a página abre para
   quem ainda não entrou, e 580 KB de pele para uma coluna de texto é o custo
   errado na primeira visita. Os tokens vêm do `nucleo.css` (os três temas); o
   que é da pele do Leitor — o `--acento` de cada tema — é redeclarado aqui,
   com os MESMOS valores do `estilo.css`, e `privacidade.test.mjs` cobra que
   continuem os mesmos (lista duplicada diverge; o teste é o que impede).

   A página é a mesa com uma folha em cima, como a leitura: `--tela` ao fundo,
   `--papel` na coluna, tinta e tênue medidas no núcleo contra os dois.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-tema="claro"]  { --acento: #832f0d; }
[data-tema="sepia"]  { --acento: #7c2c0b; }
[data-tema="escuro"] { --acento: #f39d7a; }

html { color-scheme: light; }
html[data-tema="escuro"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--tela);
  color: var(--tinta);
  font-family: var(--serif);
  /* O `--tamanho` do `tema.js` é o passo de fonte escolhido no app (Aa):
     quem lê maior no app lê maior aqui também. */
  font-size: calc(18px + var(--tamanho, 0) * 1px);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.aviso {
  box-sizing: border-box;
  max-width: 40rem;
  margin: 0 auto;
  padding: max(1.25rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom));
}

.aviso article {
  background: var(--papel);
  color: var(--tinta);
  border-radius: var(--raio);
  box-shadow: var(--sombra-pousada);
  padding: 1.5rem 1.25rem 2rem;
}

@media (min-width: 640px) {
  .aviso article { padding: 2.25rem 2.5rem 2.5rem; }
}

[data-tema="escuro"] .aviso article { border: 1px solid var(--papel-borda); }

.aviso h1 {
  font-size: 1.6em;
  line-height: 1.25;
  margin: .5rem 0 1rem;
  font-weight: 600;
}

.aviso h2 {
  font-size: 1.15em;
  line-height: 1.3;
  margin: 2rem 0 .5rem;
  font-weight: 600;
}

.aviso p, .aviso li { max-width: 36em; }
.aviso ul { padding-left: 1.2em; }
.aviso li { margin: .35rem 0; }

.aviso-lide { color: var(--tinta-2); }

.aviso a {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.aviso a:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: 2px;
}

/* O «voltar» é o alvo mais tocado da página: 44 px de altura, como os
   controles do app (`--alvo`). */
.aviso-volta { margin: 0; font-family: var(--sans); font-size: .9em; }
.aviso-volta a { display: inline-flex; align-items: center; min-height: var(--alvo); }

.aviso-data {
  margin-top: 2.5rem;
  color: var(--tenue);
  font-family: var(--sans);
  font-size: .85em;
}

/* ── As cinco línguas  (spec 74, 0.13) ─────────────────────────────────────
   Cada página traz um `<article lang>` por língua da conta. O
   `/assets/paginas.js` põe `data-lingua-pagina` no `<html>` antes da primeira
   pintura, e só então as outras somem: sem o script, as cinco aparecem em
   fila, e a barra do topo leva a cada uma. */

[data-lingua-pagina] .aviso article[lang] { display: none; }
[data-lingua-pagina="pt-BR"] .aviso article[lang="pt-BR"],
[data-lingua-pagina="en-US"] .aviso article[lang="en-US"],
[data-lingua-pagina="es-ES"] .aviso article[lang="es-ES"],
[data-lingua-pagina="fr-FR"] .aviso article[lang="fr-FR"],
[data-lingua-pagina="it-IT"] .aviso article[lang="it-IT"] { display: block; }

.aviso article + article { margin-top: 2rem; }

.aviso-linguas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 .9rem;
  margin: 0 0 .5rem;
  font-family: var(--sans);
  font-size: .85em;
}

/* Alvo de toque de 44 px, como o «voltar». */
.aviso-linguas a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  color: var(--tinta-2);
  text-decoration: none;
}

.aviso-linguas a[aria-current] {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.aviso-linguas a:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: 2px;
}

.aviso-rodape {
  margin-top: 1.25rem;
  font-family: var(--sans);
  font-size: .9em;
}

.aviso-rodape a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
}

/* ── A página da extensão  (spec 79 §9.4) ──────────────────────────────────
   `/extensao.html` usa esta mesma folha. O `/assets/extensao.js` põe
   `data-navegador` no `<body>`, e a seção do navegador de quem chegou ganha o
   fio do acento à esquerda — a mesma marca do `aria-current` da barra de
   línguas. Sem script, as seções aparecem iguais. Os endereços de
   configuração (`chrome://extensions`, `edge://extensions`) são longos e sem
   espaço: quebram em qualquer ponto, para não alargar a coluna no telefone. */
.aviso ol { padding-left: 1.4em; }
.aviso code {
  font-family: var(--mono);
  font-size: .85em;
  overflow-wrap: anywhere;
}
body[data-navegador="chromium"] .aviso section[data-navegador="chromium"],
body[data-navegador="safari"] .aviso section[data-navegador="safari"],
body[data-navegador="outro"] .aviso section[data-navegador="outro"] {
  border-left: 3px solid var(--acento);
  padding-left: .9rem;
}

/* ── A página «Planos e lumes»  (28/09) ────────────────────────────────────
   A única página com tabela e com subtítulos: a tabela do que cada coisa
   custa, no mesmo corpo sem serifa dos controles, e as perguntas em `h3`.
   Sem cor nova: tinta, tinta-2 e a borda do papel, já medidas no núcleo. */

.aviso h3 {
  font-size: 1em;
  line-height: 1.35;
  margin: 1.5rem 0 .25rem;
  font-weight: 600;
}

.aviso-tabela {
  width: 100%;
  border-collapse: collapse;
  margin: .5rem 0 1rem;
  font-family: var(--sans);
  font-size: .85em;
}

.aviso-tabela th,
.aviso-tabela td {
  text-align: left;
  vertical-align: top;
  padding: .5rem .75rem .5rem 0;
  border-bottom: 1px solid var(--papel-borda);
}

.aviso-tabela thead th { color: var(--tinta-2); font-weight: 600; }
.aviso-tabela tbody th { font-weight: 500; }