/* Base do documento. Componente nenhum mora aqui — so o que vale para TODA
   tela, inclusive as que ainda nao existem (a inbox do Plano 4).

   Sem isto, o `body` fica com o branco padrao do navegador e so as telas que
   pintam o proprio fundo parecem certas: foi por isso que /painel parecia
   pronto e /entrar parecia quebrado. */

/* border-box em tudo. Com o content-box padrao, `min-height: 100dvh` + padding
   SOMA — e a tela ganha exatamente a altura do padding em rolagem, sem ter
   conteudo nenhum a mais para mostrar. Foi o que aconteceu no /entrar. */
*, *::before, *::after { box-sizing: border-box; }

/* ESCURO continua o padrao aqui (mesmo valor de marca_tokens.css `:root`):
   a landing publica e /entrar ficam fora do redesenho de 08/09, entao
   precisam continuar recebendo controles nativos (scrollbar, checkbox) no
   escuro sem mudar nada. /painel e /dono pedem claro explicitamente --
   mesma tecnica de `:not([data-theme="escuro"])` de marca_tokens.css, para
   o alternador devolver o escuro sem precisar de uma segunda regra. */
html { color-scheme: dark; }
[data-theme="claro"],
body.painel:not([data-theme="escuro"]),
body.dono { color-scheme: light; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bc-bg);
  color: var(--bc-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Cor padrao de link de TEXTO (tabela, paragrafo) em /painel e /dono --
   achado do redesenho de 08/09: sem isto, um `<a>` sem classe propria (ex.:
   "Editar" na tabela de grupos) cai no azul padrao do navegador, exatamente
   a cor que este redesenho existe para tirar. So nas duas areas claras --
   nao mexe em landing/entrada, que tem paleta propria sobre o ceu escuro.

   `:where(...)` around the body qualifiers: tira a ESPECIFICIDADE inteira
   dessa parte do seletor, sobrando so a especificidade de `a` sozinho --
   assim esta regra reset NUNCA vence um componente com classe propria
   (`.painel__nav-item`, `.configuracoes__link`...), nao importa a ordem no
   arquivo. Sem o `:where`, `body.painel a` (2 elementos + 1 classe) teria
   especificidade MAIOR que `.painel__nav-item` (1 classe, 0 elemento) e
   pintaria o texto da barra lateral errado. */
:where(body.painel, body.dono) a {
  color: var(--bc-primary);
}

:where(body.painel, body.dono) a:hover {
  color: var(--bc-primary-hover);
}

/* Rotulo que o leitor de tela le e o olho nao ve. Existe porque placeholder
   NAO e rotulo: ele some quando a pessoa comeca a digitar. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}