/* @slice 4/9 · lab-nav.css · linhas 332–496 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. */
/* ── menu recolhido de telefone e tablet ───────────────────────────────────
   O `<nav>` é MOVIDO para a folha, não recriado — ver `mobile-nav.js`. Por isso
   estas regras estilizam `.nav-sheet .sc-nav`, que é a mesma lista do desktop. */

.nav-fab {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  /* Estas coordenadas valem só enquanto o ☰ está no header (reserva). Em tela
     estreita ele é movido para dentro do HUD e a regra `.slam-hud .nav-fab`
     abaixo o devolve ao fluxo. */
  /* 44 px é o alvo mínimo de toque da diretriz da Apple; o Material pede 48.
     Abaixo disso o dedo erra e acerta o header atrás. */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(150, 170, 220, .25);
  background: rgba(20, 28, 50, .8);
  color: #cdd8f2;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.nav-fab[hidden] { display: none; }
.nav-fab:active { background: rgba(40, 54, 92, .9); }

/* Com o menu recolhido o header vira uma linha só — é daí que vêm os 112 px de
   volta para a cena. O `padding-right` abre espaço para o ☰ não cobrir o
   relógio e o clima. */
.site-chrome.nav-collapsed { padding-right: 64px; }

.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Empurra a lista para baixo do header, para o ☰ continuar à vista e o gesto
     de fechar ficar onde o de abrir estava. */
  padding: 76px 18px 18px;
  background: rgba(6, 10, 22, .93);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out;
}

.nav-sheet.open { opacity: 1; pointer-events: auto; }
.nav-sheet[hidden] { display: none; }

/* A `.sc-nav` do chrome é uma linha de links; dentro da folha vira coluna, com
   cada item em alvo de toque cheio. */
.nav-sheet .sc-nav {
  display: flex;
  flex-direction: column;
  /* `stretch` explícito: o `.sc-nav` do chrome declara `align-items: center`
     para a barra horizontal do desktop, e numa coluna isso encolhe cada item
     ao tamanho do próprio texto — os alvos ficam com larguras diferentes e o
     toque erra nos nomes curtos. Herdar o valor do desktop foi o que deixou
     "skills" com metade da área de "laboratórios". */
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  max-width: 420px;
}

.nav-sheet .sc-nav a {
  display: flex;
  align-items: center;
  /* O chrome centraliza os links na barra do desktop. Numa coluna, centrado
     linha a linha, o texto serrilha e o olho não acha o começo — alinhamento à
     esquerda é o que faz uma lista ler como lista. */
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 16px;
  letter-spacing: .02em;
  border: 1px solid transparent;
}

.nav-sheet .sc-nav a:active {
  background: rgba(100, 240, 208, .12);
  border-color: rgba(100, 240, 208, .3);
}

/* O número de ordem vira um marcador de largura fixa: sem isto os nomes começam
   em colunas diferentes e a lista fica serrilhada. */
.nav-sheet .sc-nav a i {
  min-width: 26px;
  font-style: normal;
  opacity: .5;
  font-variant-numeric: tabular-nums;
}

/* ── o ☰ dentro do HUD, em tela estreita ───────────────────────────────────
   No telefone o polegar alcança a base da tela, não o canto superior direito.
   O ☰ passa a morar ao lado do "explorar", que é onde a mão já está. */

.slam-hud .nav-fab {
  position: static;
  transform: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  /* O HUD não recebe ponteiro (para não roubar o clique da planta); os filhos
     interativos precisam pedir de volta, um a um. */
  pointer-events: auto;
  /* Separador antes do ☰: sem ele, botão e menu leem como um controle só. */
  margin-left: 2px;
}

/* Com o ☰ no HUD, o header não precisa mais abrir espaço à direita. */
body.nav-in-hud .site-chrome.nav-collapsed { padding-right: 12px; }

/* A folha desce até a base, e o HUD continua por cima dela — é de lá que sai o
   ✕. Sem esta margem os últimos itens ficariam atrás do HUD. */
body.nav-in-hud .nav-sheet {
  align-items: center;
  padding: 18px 18px calc(84px + env(safe-area-inset-bottom, 0px));
}

@media (pointer: coarse) {
  /* Mesmo alvo de 44 px do botão vizinho — ver a nota do `.slam-btn`. */
  .slam-hud .nav-fab { width: 44px; height: 44px; }

  /* Seis controles não cabem numa linha de telefone. A barra passa a QUEBRAR
     em duas, centrada, em vez de espremer cada um até o texto partir.
     `max-width` com a folga das margens impede que ela encoste nas bordas. */
  .slam-hud {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
    max-width: calc(100vw - 20px);
  }

  /* A palavra "mapeado" sai: o número ao lado já diz o que é, e ela custa
     ~70 px que fazem a diferença entre uma linha e duas. */
  .slam-label { display: none; }

  /* A barra de progresso encolhe — no telefone ela é indicação, não medida. */
  .slam-bar { width: 64px; }
}

/* Telefone estreito: os rótulos longos encurtam.
   O texto COMPLETO continua no botão, só que a zero de tamanho — assim ele
   segue na árvore de acessibilidade e é o que o leitor de tela anuncia. O que
   aparece é o `::after` com o texto curto, que é decorativo por definição.
   O contrário (trocar o `textContent` por JS) apagaria o rótulo longo também
   para quem não enxerga a tela. */
@media (max-width: 560px) {
  .slam-btn[data-short]::after { content: attr(data-short); }
  .slam-btn[data-short] { font-size: 0; padding: 0 14px; }
  .slam-btn[data-short]::after { font-size: 12px; letter-spacing: .04em; }
}