/* @slice 3/9 · lab-hud.css · linhas 105–331 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. */

/* HUD do SLAM — progresso da varredura e o botão de exploração.
   Ancorado embaixo e centrado: o topo é do chrome do site, e a lateral some no
   telefone em retrato, onde a planta ocupa a largura toda. */
.slam-hud {
  position: fixed;
  left: 50%;
  /* `env(safe-area-inset-bottom)` é o que tira o HUD de baixo da barra de
     gestos do iPhone. O `viewport-fit=cover` do <meta> só habilita a variável —
     sem somá-la aqui, o botão fica atrás da barra e o toque abre o multitarefa
     em vez de explorar. Em aparelho sem recorte a variável vale 0. */
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  /* Acima da folha do menu (30), e isso é requisito de uso: com o ☰ morando
     dentro do HUD, um z-index menor faria o próprio botão de FECHAR
     desaparecer atrás da folha que ele abriu — sobrariam só o ESC e o toque no
     fundo, nenhum dos dois descobrível no telefone. */
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Desloca para o meio da SOBRA quando um painel lateral está aberto. Sem
     isto o HUD fica meio coberto pela borda do painel — a barra some pela
     metade e o número de cobertura fica cortado, que foi o que apareceu na
     tela. `--hud-shift` é escrito em JS, junto com a largura do painel. */
  margin-left: var(--hud-shift, 0px);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(150, 170, 220, .22);
  /* Fundo translúcido com desfoque: sobre a planta clara um painel opaco viraria
     um bloco morto no meio da tela. */
  background: rgba(11, 16, 32, .72);
  backdrop-filter: blur(8px);
  font-size: 12px;
  letter-spacing: .04em;
  color: #b9c6e4;
  /* Não rouba o clique da planta: só os filhos interativos o recebem. */
  pointer-events: none;

  /* Em repouso a barra fica SEM FUNDO, e é isso que deixa a planta aparecer.
     Baixar só a `opacity` não resolvia: o que tapava o cômodo `desktop` não era
     o texto, era o retângulo escuro com desfoque por trás dele — a 34% ele
     continuava lavando a cor do cômodo e apagando o rótulo. Medido na tela.

     O texto, por outro lado, sobe de opacidade: sem o fundo competindo, 0,72
     lê melhor do que 0,34 lia com ele. Mais transparente E mais visível ao
     mesmo tempo, que é o pedido. */
  opacity: .72;
  background: transparent;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
  transition: opacity .18s ease, background .18s ease, border-color .18s ease,
              margin-left .3s cubic-bezier(.2, .9, .3, 1);
}

/* Com o ponteiro em cima, a pílula volta inteira — fundo, desfoque e borda.
   🛑 `:has(:hover)` e não `:hover`: o contêiner tem `pointer-events: none` e
   NUNCA recebe hover — só os botões dentro dele recebem. Um `.slam-hud:hover`
   aqui simplesmente nunca dispararia, e a barra ficaria sem fundo para sempre. */
.slam-hud:has(:hover) {
  opacity: 1;
  background: rgba(11, 16, 32, .72);
  backdrop-filter: blur(8px);
  border-color: rgba(150, 170, 220, .22);
}

@media (pointer: coarse) {
  /* Não existe hover no toque, e sem o fundo os botões perdem a borda que os
     separa da planta. No telefone a pílula fica sempre completa. */
  .slam-hud {
    opacity: 1;
    background: rgba(11, 16, 32, .72);
    backdrop-filter: blur(8px);
    border-color: rgba(150, 170, 220, .22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slam-hud { transition: none; }
}

/* Dica do duplo clique, logo abaixo da barra do HUD.
   Elemento SEPARADO e não uma linha dentro da barra: a barra é uma pílula que
   se desloca para o lado quando um painel abre, e a dica fala do mapa inteiro.
   Dentro dela, ainda, esticaria a pílula e empurraria os botões.

   Sem `--hud-shift` de propósito: fica centrada na janela, e é o que a mantém
   legível com o painel aberto de qualquer lado. */
.slam-hint {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  z-index: 39;
  margin: 0;
  padding: 0;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: lowercase;
  color: rgba(160, 178, 214, .5);
  white-space: nowrap;
  pointer-events: none;
  /* Entra depois do HUD: as duas coisas surgindo juntas competem pelo olho. */
  animation: hint-in .5s ease .9s both;
}

@keyframes hint-in {
  from { opacity: 0; transform: translate(-50%, 4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.slam-hint[hidden] { display: none; }

/* A barra sobe para abrir os 20 px que a dica ocupa — e só onde a dica existe.
   Mexer no `bottom` do HUD em todo lugar mudaria o enquadramento medido no
   telefone, onde a altura da planta é o recurso escasso. */
@media (pointer: fine) {
  .slam-hud { bottom: calc(34px + env(safe-area-inset-bottom, 0px)); }
}

@media (pointer: coarse) {
  /* No toque não existe duplo clique com o mesmo sentido — e o espaço vertical
     é o recurso escasso: no iPhone SE a planta tem 525 px. */
  .slam-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .slam-hint { animation: none; }
}

.slam-bar {
  width: 110px;
  height: 4px;
  border-radius: 2px;
  background: rgba(150, 170, 220, .2);
  overflow: hidden;
}

/* `width` animada, e não `transform: scaleX`: a barra tem 4 px de altura e o
   scale borraria a borda. A 10 varreduras por segundo, a transição de 240 ms
   suaviza os saltos sem atrasar a leitura. */
.slam-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #64f0d0, #2a5cff);
  transition: width .24s ease-out;
}

.slam-pct {
  min-width: 34px;
  font-variant-numeric: tabular-nums;   /* sem isto o número dança a cada 1% */
  color: #e6ecfb;
}

.slam-label { opacity: .62; }

.slam-btn {
  pointer-events: auto;
  margin-left: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(100, 240, 208, .35);
  background: rgba(100, 240, 208, .1);
  color: #8ff2dd;
  font: inherit;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.slam-btn:hover { background: rgba(100, 240, 208, .2); }

/* Enquanto o robô não carregou. Apagado, mas ainda legível: sumir com ele faria
   o HUD mudar de largura quando o modelo chegasse. */
/* O segundo botão é SECUNDÁRIO na aparência: dois botões com o mesmo peso
   disputam o olhar e nenhum vence. "explorar" é o convite; "mapear tudo" é o
   atalho de quem já entendeu e não quer esperar. */
.slam-btn-ghost {
  border-color: rgba(150, 170, 220, .28);
  background: transparent;
  color: #9fb0d4;
}

.slam-btn-ghost:hover { background: rgba(150, 170, 220, .12); }

.slam-btn:disabled { opacity: .4; cursor: default; }
.slam-btn:disabled:hover { background: rgba(100, 240, 208, .1); }
.slam-btn[data-running="1"] {
  border-color: rgba(226, 87, 79, .45);
  background: rgba(226, 87, 79, .14);
  color: #ffb3ad;
}

@media (max-width: 460px) {
  /* No telefone o rótulo some antes da barra: o número e o botão são o que se
     usa, a palavra é redundante com eles. */
  .slam-label { display: none; }
  .slam-bar { width: 74px; }
}

/* Alvo de toque. Medido em 26/08/2026: o botão saía com 75×26 px, contra os
   44 px que a diretriz da Apple pede e os 48 do Material — no dedo, isso é
   errar o alvo e acertar a planta atrás, que manda o robô para outro lugar.
   `pointer: coarse` alcança telefone e tablet sem engordar o botão no desktop,
   onde 26 px já é confortável para o mouse. */
@media (pointer: coarse) {
  .slam-hud { padding: 6px 8px 6px 14px; gap: 12px; }

  .slam-btn {
    min-height: 44px;
    padding: 0 18px;
  }

  /* 🛑 O rótulo NUNCA quebra em duas linhas. Sem isto, "mapear tudo" e
     "auto · médio" viravam duas linhas dentro da pílula no telefone, e a barra
     inteira ficava com o dobro da altura e o texto espremido — foi o que o dono
     viu. Quando não couber, o conjunto passa para a linha de baixo inteiro, que
     é o corte legível. */
  .slam-btn { white-space: nowrap; }

  /* Sem hover no toque, o retorno tem de vir do toque em si. */
  .slam-btn:active { background: rgba(100, 240, 208, .3); }
  .slam-btn[data-running="1"]:active { background: rgba(226, 87, 79, .3); }
}