/**
 * Base — reset e tipografia do conteúdo. Shell em layout.css; peças em componentes.css.
 *
 * O `scrollbar-gutter: stable` no html existe porque cada item da sidebar é uma
 * aba: alternar entre uma aba com rolagem e outra sem não pode sacudir os
 * elementos fixos da borda. No body, `font-variant-numeric: tabular-nums` dá
 * dígitos de largura fixa, para os números não "dançarem" a cada atualização do
 * ciclo de 3s.
 *
 * `[hidden]` leva `!important` de propósito: a regra do navegador para o
 * atributo é estilo de UA, e estilo de autor sempre vence. Sem isto, esconder
 * um `.vazio { display: flex }` não faria nada. Pelo mesmo motivo, `.slot:empty`
 * some por inteiro — um slot vazio ainda consumiria o `gap` e abriria buraco no
 * layout.
 *
 * O ritmo vertical do conteúdo vem do `gap` do `.principal`: nenhum cartão
 * carrega margem própria. A exceção é o `.rodape`, cujo `margin-top` soma ao
 * gap para dar respiro extra no fim da página.
 *
 * Quando cai a conexão com o servidor, `body.sem-conexao` esmaece o conteúdo
 * obsoleto sem removê-lo — o operador continua lendo o último estado conhecido.
 */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.45;
  letter-spacing: -.011em;
  color: var(--tinta-1);
  background: var(--sup-fundo);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  padding-bottom: var(--e10);
}

ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
svg { display: block; flex: none; }

[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--raio-pequeno); }

.topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  padding: max(var(--e8), env(safe-area-inset-top)) 0 0;
}

.topo__titulo {
  font-size: var(--t-titulo);
  font-weight: var(--peso-brutal);
  letter-spacing: -.03em;
  line-height: 1.1;
}

.topo__sub {
  color: var(--tinta-2);
  font-size: var(--t-apoio);
  margin-top: 2px;
}

.rodape {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-top: var(--e4);
  padding: 0 var(--e1);
  color: var(--tinta-3);
  font-size: var(--t-meta);
}

.rodape span { display: inline-flex; align-items: center; gap: 6px; }

body.sem-conexao .principal > *:not(.topo) { opacity: .45; transition: opacity var(--transicao); }

.slot:empty { display: none; }