/* @slice 7/9 · lab-layers.css · linhas 922–1013 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. */

/* O banner acompanha o mesmo deslocamento do HUD — os dois vivem na mesma
   faixa de baixo, e mover um só deixaria a coluna torta. */
/* ── banner de campanha ────────────────────────────────────────────────────
   Cartão compacto no ALTO, à direita. A faixa de largura cheia da 2026.5 não
   porta para cá: neste lab a altura é o recurso escasso, e o mapa é a interface.

   Ele vivia logo acima do HUD, no rodapé, e ali disputava espaço com duas
   coisas ao mesmo tempo: a barra de progresso embaixo e a parte de baixo da
   planta atrás. No alto à direita há um vazio que a planta não usa — o mapa é
   mais largo que alto, e sobra preto nos cantos superiores.

   `--hud-shift` NÃO se aplica mais: aquele deslocamento existe para recentrar o
   que vive no rodapé quando um painel lateral abre, e no canto o cartão já está
   fora do caminho. */

/* ── O que fica logo abaixo do chrome, empilhado ──────────────────────────
   Duas peças disputam a faixa sob o header: o notch de "tocando agora" (que
   nasce centrado) e o banner de campanha (à direita). As duas precisam saber
   ONDE o header termina, e essa altura muda — em tablet ele quebra em duas
   linhas, em desktop ganha a faixa do menu.

   O `.np-dock` vem da 2026.5 com `top: 100px` FIXO, que é a altura do chrome
   DELA. No lab isso o enfiava atrás do header em tablet e telefone: metade do
   nome da música ficava escondida sob a barra — medido em 768px e 620px. */
.np-dock {
  top: calc(var(--lab-chrome-bottom, 88px) + 8px) !important;
}

/* ── As docas vêm da 2026.5 numa camada alta demais para o lab ─────────────
   Lá `.np-dock` é `z-index: 90` porque o único concorrente é o HUD daquela
   versão. Aqui isso o punha acima de TUDO que o visitante abre: por cima do
   painel de seção (50), da folha do menu (30) e do seletor de versões (45).
   Medido em 26/08/2026 — o notch de música cobria o título e o ✕ do painel
   `/timeline`, e escondia o primeiro item do menu recolhido.

   36 é o lugar certo: acima do mapa (10), abaixo de todo painel e menu. Música
   e cidades atravessadas são informação de fundo — nada que se abriu de
   propósito pode ficar atrás delas. */
.np-dock, .via-dock { z-index: 36 !important; }

/* E somem enquanto o menu está aberto: ele ocupa a tela inteira, e uma pílula
   flutuando sobre a lista é exatamente o ruído que a folha veio eliminar. */
body:has(.nav-sheet.open) .np-dock,
body:has(.nav-sheet.open) .via-dock,
body:has(.nav-sheet.open) .banner-dock { display: none !important; }

/* ── O menu recolhido fica por cima de tudo ────────────────────────────────
   Ordem do dono (26/08/2026): a folha vence toda outra camada. Só se aplica
   com o ☰ no HUD — é a configuração de telefone e tablet, e é o que permite
   cobrir o header (z-index 100) sem esconder o botão que fecha a folha, que
   ali mora no HUD. Com o ☰ no próprio header, a folha para logo abaixo dele
   (99), senão o gesto de fechar desapareceria sob o próprio menu. */
/* O menu horizontal fica escondido entre o header ser injetado e o
 * `mobile-nav.js` recolhê-lo — ver o script inline do `index.html`. O seletor
 * exige `:not(.nav-collapsed)` porque, uma vez recolhido, a `.sc-nav` migra
 * para dentro da folha e esta regra deixa de alcançá-la de qualquer forma; a
 * negação é o que garante que ela não volte a morder se a marca demorar a
 * sair. */
html.nav-pending .site-chrome:not(.nav-collapsed) .sc-nav { display: none; }

.nav-sheet { z-index: 99; }
body.nav-in-hud .nav-sheet { z-index: 110; }
body.nav-in-hud:has(.nav-sheet.open) .slam-hud { z-index: 111; }

/* Com o menu aberto, do HUD sobra só o ✕.
 *
 * A barra inteira flutuando sobre a lista tapava o último item — em telefone o
 * `11 contato` ficava atrás dela — e oferecia controles do MAPA a quem já saiu
 * do mapa: "explorar", "mapear tudo" e "reset" agem sobre uma cena que está
 * coberta, e a barra de progresso reporta um trabalho que ninguém vê.
 *
 * O ☰ fica porque ele virou o ✕: é o gesto de fechar, e some junto com a
 * própria folha. Os controles voltam sozinhos quando ela fecha — nada aqui
 * altera estado, só visibilidade. */
body.nav-in-hud:has(.nav-sheet.open) .slam-hud > *:not(.nav-fab) { display: none; }

/* Sem os filhos, o que resta da pílula é moldura em volta de um botão só.
 * Encolher para o tamanho do ☰ evita uma faixa larga e vazia atravessando a
 * base da lista. */
body.nav-in-hud:has(.nav-sheet.open) .slam-hud {
  padding: 6px;
  gap: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* Lista mais alta que a tela: sem isto, `align-items: center` corta os itens
   das DUAS pontas — foi como o `01 sobre` sumiu no telefone. */
.nav-sheet { overflow-y: auto; }