/*
 * shared/page.css — a BASE da página (Sprint 48)
 * ------------------------------------------------------------------
 * O `tokens.css` tem os VALORES. Este arquivo tem a PÁGINA: o `body`
 * canônico e a faixa central `.wrap`. O `components.css` tem os
 * COMPONENTES. Cada um faz uma coisa só.
 *
 * POR QUE ELE EXISTE. Até a S47, o `components.css` não tinha regra de
 * `body` nem de `.wrap` — então a proibição do resumo ("nunca redeclarar
 * body{font-family} ou .wrap por página") não tinha onde agir, e as CATORZE
 * páginas escreviam a própria base à mão. Resultado medido na abertura da
 * S48: 14 `body` escritos à mão, 5 nomes para a mesma faixa central, 9
 * larguras, 7 dialetos de respiro e UM `line-height` declarado em catorze.
 *
 * ORDEM NO HEAD — os quatro, nesta sequência:
 *     tokens.css  ->  page.css  ->  components.css  ->  styles/pages/<modulo>.css
 *
 * Arquivo novo em vez de morar no `components.css` porque só 11 das 16
 * páginas linkam o components: o `login.html` e as 3 telas de erro linkam
 * apenas o `tokens.css`, e são justamente as menores e mais sensíveis a
 * primeira pintura (login com 3,2 KB de CSS; erro com 1,5 KB). Fazê-las
 * baixar 42,7 KB de componentes para receber 15 linhas de `body` seria má
 * troca. As 16 linkam o `tokens.css`, então é esse o caminho que alcança
 * todas.
 *
 * NADA DE NÚMERO SOLTO AQUI. Token não é só cor: o `tokens.css` tem 34
 * tokens não-cor em quatro famílias — tipografia, raio, espaço e sombra.
 * Valor de tipografia e de espaço em regra canônica vem de token; número
 * mágico aqui é o mesmo erro que o hex fixo, só menos visível.
 *
 * ATENÇÃO AO EDITAR ESTE CABEÇALHO: nunca escrever asterisco seguido de
 * barra dentro de um comentário, nem abrir comentário dentro de comentário.
 * A sequência fecha o bloco antes da hora e a REGRA SEGUINTE MORRE em
 * silêncio — sem erro no console, sem falha de build. Foi o bug do "claro
 * todo branco" (ver resumo, seção de tema), e aconteceu de novo aqui na
 * primeira escrita deste arquivo: um `--fs-` com curinga colado numa barra
 * matou o `body` e o `.wrap` de uma vez, e o sintoma foi "nenhuma diferença
 * na tela". Escrever nomes de família de token com reticências, nunca com
 * curinga colado em barra.
 * ------------------------------------------------------------------
 */

/* O RESET — box-sizing e espaçamento nativo (S48)
   Até aqui 7 páginas zeravam o espaço nativo do navegador e 7 não, e quem
   construiu cada tela sabia em qual grupo estava e ajustou as distâncias de
   acordo. Dois dialetos convivendo é o que fazia um `24px` valer 24 numa
   página e 26 na outra.

   A partir daqui o sistema é UM: título e parágrafo NÃO têm espaço
   automático, e cada distância é escrita à mão. Módulo novo nasce assim.

   Medido antes de ligar: 43 títulos e parágrafos nas 6 telas do grupo
   minoritário, dos quais 37 já declaravam a própria margem — para esses,
   ligar o reset não muda um pixel. Os 6 restantes foram revistos um a um. */
*{ box-sizing:border-box; margin:0; padding:0 }

/* O BODY CANÔNICO
   Sem ele a página cai no serif padrão do navegador (foi o bug da "fonte
   diferente" no Fechamento, S39). Módulo novo NÃO redeclara: se a base
   precisa mudar, ela muda aqui, para todos.

   O `line-height` vem de `var(--lh-base)`, retunado de 1.6 para 1.5 nesta
   sprint. 1,5 é o valor que a Diagramação usava desde antes — o único
   ponto do sistema onde entrelinhas foi ESCOLHIDO, e não omitido. O token
   existia com 1.6 desde a calibração GXON e tinha um consumidor só, o
   `.alert`, que passa a acompanhar.

   Medido no arquivo da fonte: o Plus Jakarta Sans traz USE_TYPO_METRICS
   ligado e ascender 1038, descender -222, lineGap 0 sobre 1000 unidades por
   em. Então `normal` resolve em 1,26 — 17,64px a 14px. Com 1,5 a linha vai
   a 21px: +3,36px, cerca de 19%.

   O `margin:0` do body continua explícito mesmo com o reset abaixo: ele é
   documentação da regra, não redundância — quem ler o body canônico tem de
   ver a margem zerada sem precisar subir até o `*`. */
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* A FAIXA CENTRAL
   O RESPIRO é canônico e não se override: 22, 20, 18, 24, 16 e o par
   1.25rem/1rem eram o número que cada autor digitou no dia, não uma
   escolha. Ele vive inteiro na escala: 24px é o degrau `--sp-4`, e não os
   20px do fechamento.css, que não existem na régua (ela pula de 16 para
   24).

   A LARGURA continua declarada por página, porque é decisão de conteúdo, e
   vem com o motivo em comentário, nunca em silêncio. No CSS do módulo, algo
   como: ponto-wrap com max-width 1400px e, ao lado, o comentário dizendo
   que as 4 colunas do kanban do Roadmap não cabem em 1100.

   O `box-sizing` é DECLARADO AQUI, e não herdado do reset da página. É a regra
   da S45 no padrao-componentes.md, que nasceu citando exatamente este caso:
   "nem toda página tem reset (o fechamento.css não tem), então sem isso 24px
   vale 24 numa página e 26 na outra". Medido na S48: 12 páginas dão
   border-box ao `.wrap` pelo `*` local, e duas — fechamento e
   disponibilidades, que não têm regra `*` nenhuma — deixavam a MESMA classe
   canônica em content-box. Ali o max-width valia para o CONTEÚDO, e a faixa
   saía 48px mais larga do que o número declarado. Sem esta linha, `.wrap`
   tem dois modelos de caixa até a etapa do reset. */
.wrap{
  box-sizing:border-box;
  max-width:1100px;
  margin:0 auto;
  padding:var(--sp-3) var(--sp-4) var(--sp-5);
}

/* O atributo `hidden` passa a valer de verdade (S49).
   O `padrao-componentes.md` manda esconder elemento com o atributo nativo
   `hidden`, e nao com classe. So que a regra do navegador e `[hidden]{display:none}`
   sem peso nenhum: qualquer classe de autor que declare `display` VENCE, e o
   elemento continua na tela. Foi o que apareceu ao dar a classe .toolbar__group
   ao #admin-bar do Metas — a classe traz `display:inline-flex` e anularia o
   `hidden` que acabara de substituir o velho `style="display:none;display:flex"`.
   Um !important aqui e o que todo reset serio faz, e pela mesma razao: `hidden`
   e declaracao SEMANTICA ("isto nao existe para o usuario") e precisa ganhar de
   qualquer regra de layout. Sem ele, a regra do padrao so funciona por sorte —
   nos elementos que por acaso nao tem classe com display. */
[hidden]{display:none !important}