/* Fundação compartilhada: reset, papéis tipográficos, elevação, foco e o
 * shell fluido. Toda tela do sistema carrega tokens.css e depois esta folha.
 *
 * Um layout fluido só (DESIGN.md, Layout & Spacing): não existe @media de
 * largura em lugar nenhum. O reflow vem de grid/flex fluidos, minmax(),
 * clamp() e flex-wrap. Os únicos @media do projeto são prefers-color-scheme
 * (em tokens.css) e prefers-reduced-motion (no fim deste arquivo). */

/* ─────────────────────────────────────────────────── reset */

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

html {
  /* Sem font-size fixo: respeita a preferência do navegador e o zoom de 200%. */
  -webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
}

body {
  min-height: 100svh;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--familia-a);
  /* 1rem, e não 16px: quem aumenta a fonte padrão do navegador por necessidade
   * tem a preferência respeitada. Os nove papéis tipográficos continuam nos
   * tamanhos que o DESIGN trava. */
  font-size: 1rem;
  line-height: 1.6;
  /* Sem `overflow-x: hidden` aqui de propósito. Ele não impede o estouro, só
   * esconde o que estourou — e o critério de aceitação mede exatamente
   * `scrollWidth <= clientWidth`, que passaria por construção enquanto um
   * pedaço de conteúdo ficasse fora do alcance. O corpo não rola na
   * horizontal porque nada é mais largo que ele; quando uma tabela precisar
   * rolar, rola o contêiner dela. */
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--realce);
}

/* Palavra comprida não empurra o contêiner e não cria rolagem horizontal. */
p, h1, h2, h3, h4, h5, h6, li, td, th, label, button {
  overflow-wrap: anywhere;
}

/* ───────────────────────────── papéis tipográficos (9) */

.display {
  font-family: var(--familia-a);
  font-size: 32px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.titulo {
  font-family: var(--familia-a);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
}

.subtitulo {
  font-family: var(--familia-a);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
}

.corpo {
  font-family: var(--familia-a);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

/* O maior corpo de texto do sistema. É o que se lê com mais atenção. */
.enunciado {
  font-family: var(--familia-a);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
}

.meta {
  font-family: var(--familia-a);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
}

.rotulo {
  font-family: var(--familia-a);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Algarismos tabulares: contador que muda não pode dançar na horizontal. */
.numero {
  font-family: var(--familia-b);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.numero-grande {
  font-family: var(--familia-b);
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────────── elevação */

.elevacao-repouso {
  border: 1px solid var(--borda);
  box-shadow: var(--elevacao-repouso);
}

.elevacao-interativo {
  border: 1px solid var(--realce);
  box-shadow: var(--elevacao-interativo);
}

.elevacao-sobreposto {
  box-shadow: var(--elevacao-sobreposto);
}

/* ──────────────────────────────────────────────── foco */

/* Anel de 2px em --realce com deslocamento de 2px, em tudo que recebe foco.
 * Nunca se remove outline sem substituto.
 *
 * Sem `border-radius` aqui: essa propriedade muda a forma do PRÓPRIO elemento,
 * não a do anel — uma pílula (--raio-full) viraria um retângulo de 8px só por
 * receber foco de teclado. O navegador já acompanha o raio de quem foca. */
:focus-visible {
  outline: 2px solid var(--realce);
  outline-offset: 2px;
}

/* Navegador antigo que não entende :focus-visible ainda mostra o anel. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ─────────────────────────────────────────── escondido */

/* O `hidden` do HTML precisa vencer o `display` de quem o recebe. O padrão do
 * navegador para `[hidden]` é `display: none`, mas ele vale por seletor de tipo
 * (especificidade 0,0,1) e qualquer classe nossa com `display: flex` ou `grid`
 * o atropela — o elemento "escondido" continuaria na tela, e a única pista
 * seria um layout errado. É a regra que sustenta a troca cartão↔painel da tela
 * Entrar, o sumiço do botão fallback quando o do Google aparece, e os três
 * estados da tela de contas.
 *
 * Mora aqui, e não numa folha de tela, desde a 1.5: duas telas precisam do mesmo
 * comportamento, e a segunda cópia de uma regra é a que um dia diverge da
 * primeira. Nasceu em `entrar.css` porque era a única tela que existia.
 *
 * O `!important` é o que a especificação de HTML manda a folha do usuário usar
 * aqui: sem ele, esta linha só empataria com a próxima classe que declarasse
 * `display`. Não é o único da folha — o bloco de `prefers-reduced-motion`, no
 * fim deste arquivo, tem outros quatro pelo mesmo tipo de razão: uma preferência
 * do sistema operacional precisa vencer qualquer regra nossa. São os únicos
 * cinco do projeto, e cada um está escrito ao lado do motivo. */
[hidden] {
  display: none !important;
}

/* ────────────────────────────────────── alvo de clique */

/* 44px de altura mínima em qualquer controle — vale para mouse também. */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
.alvo {
  min-height: 44px;
}

/* ──────────────────────────────────────── shell fluido */

/* A superfície da página: margem de 32px no computador que encolhe sozinha
 * até 16px em tela estreita, sem breakpoint. */
.shell {
  width: 100%;
  padding: clamp(var(--esp-4), 4vw, var(--esp-margem));
  margin-inline: auto;
}

/* Coluna de leitura confortável. */
.leitura {
  width: var(--largura-leitura);
  margin-inline: auto;
}

/* Grade que reflowa: colunas viram linhas quando não cabem, sem @media. */
.grade {
  display: grid;
  gap: var(--esp-goteira);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* Fila horizontal que quebra em linha quando falta espaço. */
.fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: center;
}

/* ────────────────────────────────────── acessibilidade */

/* Visível para leitor de tela, fora da tela para o olho. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}