/* @slice 2/9 · lab-stage.css · linhas 46–104 do antigo lab.css
   @slice
   @slice 🛑 A ORDEM DOS NOVE É OBRIGATÓRIA, e o index.html a define.
   @slice    tokens · stage · hud · nav · panel · versions · layers · campaign · overrides
   @slice
   @slice Duas regras deste conjunto vencem por ORDEM e não carregam `!important`
   @slice para avisar: `.desktop-overlay{top}` contra o `inset:0` do desktop.css da
   @slice 2026.5, e `.sc-wx-trip` contra o `.sc-wx` do site-chrome.css. As duas moram
   @slice em lab-overrides.css, que por isso é sempre o ÚLTIMO.
   @slice
   @slice O corte é reversível: `./scripts/split-lab-css.sh --verify` remonta os nove
   @slice e compara com o lab.css de origem, ignorando estas linhas. */

html, body {
  height: 100%;
  background: #0b1020;
  color: #dbe4f7;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  /* O canvas ocupa a área abaixo do chrome; rolagem aqui só apareceria por
     engano, e no telefone viraria aquele arrasto elástico sobre a cena. */
  overflow: hidden;
  overscroll-behavior: none;
}

/* Coluna: o chrome do site em cima, a cena ocupando TODO o resto.
 *
 * Flex e não `position: fixed` com `padding-top` cravado: a altura do chrome
 * muda entre desktop e telefone (a barra de links vira menu), e um número fixo
 * acerta uma largura e erra as outras — foi assim que a faixa do promo cobriu o
 * menu na 2026.5. Aqui o `flex: 1` mede sozinho. */
body {
  display: flex;
  flex-direction: column;
}

/* O chrome é injetado por JS depois do parse, então precisa se comportar como
   item de flex assim que aparece. */
body > header {
  flex: none;
  position: relative;   /* sai do `fixed` que o site-chrome usa nos artigos */
  z-index: 10;
}

/* `display: block` não é detalhe: canvas nasce inline e ganha alguns pixels de
   descida da linha de base, o que produz uma barra de rolagem de 4 px que
   ninguém consegue explicar depois.
   `min-height: 0` é o que permite ao flex encolher o canvas — sem ele o item
   nunca fica menor que o conteúdo e a página passa a rolar. */
#stage {
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  touch-action: none;      /* o arrasto da câmera não deve rolar a página */
}

/* Falha ao subir a cena. Aparece só quando algo quebrou — e precisa ser legível
   sobre o fundo escuro, porque é a única coisa na tela. */
.boot-error {
  position: fixed;
  inset: auto 16px 16px;
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid rgba(226, 87, 79, .5);
  background: rgba(38, 14, 14, .92);
  color: #ffd9d6;
  font-size: 14px;
  line-height: 1.5;
}