/* @slice 9/9 · lab-overrides.css · linhas 1335–1503 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. */
/* ── contato em tela cheia: canais e QR lado a lado ────────────────────────
   O QR existe para ser apontado com a câmera; abaixo da dobra ele não cumpre
   função nenhuma. Em duas colunas os dois blocos cabem na altura da tela.

   O grid vale só a partir de 900 px: abaixo disso a coluna do QR ficaria
   estreita demais para o código ser lido pela câmera, e empilhado é melhor. */
@media (min-width: 900px) {
  .room-panel.full .rp-body:has(.ct-qr) {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.7fr);
    /* ⚠️ Título e lead em áreas SEPARADAS. Na mesma área eles se empilham no
       mesmo lugar — o `grid-area` não enfileira, sobrepõe. Medido na tela: o
       "Vamos conversar." saiu por cima da linha de consultoria. */
    grid-template-areas:
      'title title'
      'lead lead'
      'canais qr'
      'foot foot';
    gap: 0 26px;
    align-content: start;
  }

  .room-panel.full .rp-body .p-title { grid-area: title; }
  .room-panel.full .rp-body .p-lead { grid-area: lead; }
  .room-panel.full .rp-body .ct-station { grid-area: canais; }
  .room-panel.full .rp-body .ct-qr { grid-area: qr; align-self: start; }
  .room-panel.full .rp-body .p-foot { grid-area: foot; }
}

/* O QR em si: tamanho fixo e generoso. Um QR pequeno demais falha na leitura
   por câmera, que é a única coisa que ele faz. */
/* 🛑 Quem cresce é a MOLDURA, não a imagem.
   A 2026.5 monta o QR como `.ct-qr-img` de 112×112 com fundo branco e padding,
   e a `img` dentro em `width/height: 100%`. Esticar a imagem — que foi o que
   fiz antes — a faz transbordar a moldura: metade do código ficava sobre o
   fundo escuro, e um QR sem a margem branca não é lido por câmera nenhuma.
   Dimensionando a moldura, os dois crescem juntos e a margem se mantém.

   168 px de moldura dão ~150 px de código útil. A 30 cm, um QR de nível H com
   4 módulos de silêncio lê a partir de ~120 px — então há folga. */
.room-panel .ct-qr-img {
  width: clamp(132px, 11vw, 168px);
  height: clamp(132px, 11vw, 168px);
  padding: 9px;
}

/* ── overlay da última viagem ──────────────────────────────────────────────
   O `anchorBelowChrome()` da 2026.5 mede `.hud-menu`/`.hud-top` — o chrome
   DELA. Aqui o cabeçalho é `.site-chrome`, então a medida de lá sai 0 e o mapa
   subiria por cima do menu. `trip.js` mede o chrome do lab e escreve
   `--lab-chrome-bottom`; este `!important` é o que faz a variável do lab vencer
   o `0px` que a 2026.5 escreve inline no elemento.

   Dar as classes dela ao header daqui resolveria em uma linha e traria junto
   todo o estilo de `.hud-top` do `hud.css`, que o lab agora carrega — o
   cabeçalho seria repintado por regras de outra encarnação do site. */
.trip-overlay {
  --trip-top: var(--lab-chrome-bottom, 0px) !important;
}

/* ── overlay de estação (labs e projetos) ──────────────────────────────────
   Na 2026.5 ele é `inset: 0` e cobre a tela inteira, chrome incluído — lá o
   cabeçalho faz parte da própria página 3D. Aqui o chrome é um header fixo com
   z-index maior, e o resultado medido em 28/08/2026 foi a BARRA da janela
   (semáforos, nome do lab, botão de nova aba) desaparecendo atrás do menu: o
   conteúdo abria, e não havia como fechar a não ser pelo Esc.

   Começar abaixo do chrome resolve os dois: a barra aparece e o menu continua
   alcançável enquanto o lab está aberto. */
.desktop-overlay {
  top: var(--lab-chrome-bottom, 0px);
}

/* ── cômodo embutido: o desktop Ubuntu ─────────────────────────────────────
   O cômodo `desktop` não traz template — traz o site original inteiro num
   `<iframe>`, a mesma URL que a 2026.5 abre no overlay (`/?embed=v2026`).

   🛑 A altura NÃO pode sair de porcentagem. `.rp-body` é item de flex com
   `min-height: 0`; um `height: 100%` no filho resolve contra a altura
   AUTOMÁTICA do pai, que sem conteúdo é zero — o quadro sumiria. Foi o mesmo
   defeito que cortou o robô do banner três vezes. Aqui a medida sai do
   viewport, descontando o topo do cartão e a faixa de título. */
.rp-embed {
  display: block;
  width: 100%;
  height: calc(100vh - var(--rp-top, 0px) - 132px);
  min-height: 320px;
  border: 0;
  border-radius: 10px;
  background: #0d0f16;
  /* O desktop tem barra de tarefas colada na base e janelas arrastáveis; a
     moldura escura o separa do cartão sem fingir que faz parte dele. */
  box-shadow: inset 0 0 0 1px rgba(150, 180, 255, .14);
}

/* 🛑 O EMBUTIDO É UMA TELA, NÃO UM BLOCO DE TEXTO.
   A régua de 1180px que centra a grade de `/labs` existe para linha de leitura
   não ficar longa demais — aplicada ao desktop Ubuntu ela só encolhe a área
   útil de um sistema com dock, ícones e janelas arrastáveis. Medido em
   29/08/2026 numa janela de 1512px: o quadro ficava em 1180×553, jogando fora
   **332px de largura** (22% da janela) para deixar duas faixas pretas.

   `max-width: none` vale só para o embutido — a grade de cartões continua
   presa aos 1180. */
.room-panel.full .rp-body > .rp-embed { max-width: none; }

/* A ALTURA TAMBÉM SAI DA CONTA MÁGICA, e sem cair na armadilha que o bloco
   acima descreve. O `height: calc(100vh - … - 132px)` acertava por aproximação
   e sobrava: medido em 29/08/2026, 34px de faixa morta dentro do próprio corpo.
   Porcentagem continua proibida — mas com o corpo virando contêiner de flex, o
   `flex: 1` do quadro resolve contra uma altura JÁ calculada (a que `flex: 1`
   deu ao corpo), que é exatamente o que `height: 100%` não tinha. */
.room-panel.full .rp-body:has(.rp-embed) { display: flex; }

.room-panel.full .rp-body > .rp-embed {
  flex: 1;
  height: auto;
  min-height: 0;
}

/* E o CABEÇALHO SAI INTEIRO no cômodo embutido — decisão do dono em
   29/08/2026. `09 DESKTOP` acima de um desktop que já se identifica sozinho
   (barra de tarefas com o nome do usuário, dock, ícones) é rótulo redundante
   custando 91px de altura medidos, numa tela que é justamente o conteúdo.
   Vale só para o embutido: nos painéis de texto o cabeçalho diz em que seção
   a pessoa está, e lá ele fica. */
.room-panel.full:has(.rp-embed) .rp-order,
.room-panel.full:has(.rp-embed) .rp-title { display: none; }

/* Sem o cabeçalho o cartão não precisa da faixa que o separava do quadro. */
.room-panel.full:has(.rp-embed) .rp-card { padding-top: 14px; }

/* O ✕ deixa de ter fundo de cartão atrás e passa a flutuar sobre o desktop:
   sem uma base própria ele sumiria no papel de parede, que é escuro em algumas
   regiões e claro em outras. */
.room-panel.full:has(.rp-embed) .rp-close {
  background: rgba(8, 12, 24, .82);
  border-color: rgba(150, 170, 220, .28);
  color: #cdd8f2;
  backdrop-filter: blur(6px);
}

.room-panel.full:has(.rp-embed) .rp-close:hover {
  background: rgba(20, 28, 50, .95);
  color: #ffffff;
}

/* Embutido nunca rola por fora: a rolagem pertence ao documento de dentro.
   Sem isto o painel ganha uma segunda barra, e arrastar uma janela do desktop
   até a borda rolaria o cartão junto. */
/* ⚠️ O seletor precisa do `.room-panel.full` na frente. `:has()` empresta a
   especificidade do argumento, então `.rp-body:has(.rp-embed)` vale (0,2,0) e
   PERDIA para `.room-panel.full .rp-body` (0,3,0), que dá o recuo lateral ao
   corpo — mesmo estando num arquivo posterior. Sintoma: o desktop continuava
   com 64px de faixa preta de cada lado depois de o `max-width` ser solto. */
.room-panel.full .rp-body:has(.rp-embed) {
  max-height: none;
  overflow: hidden;
  margin-bottom: 0;
  /* Recuo de 20px, não zero. Colado nas quatro bordas o desktop deixa de ler
     como janela — a moldura arredondada some, a dock encosta na beira da tela e
     o quadro passa a disputar a borda com o próprio browser. 20px devolve a
     leitura de "isto é uma tela dentro de outra" e ainda entrega 88% da largura
     que os 64px do recuo padrão negavam. */
  padding: 0 20px;
}

@media (pointer: coarse) {
  /* No telefone o cartão é folha de baixo, e o topo é outro: a conta pelo
     viewport erraria por toda a altura de mapa que fica visível acima. */
  .rp-embed { height: min(64vh, 520px); }
}

/* Botão de qualidade — o irmão discreto de "explorar" e "mapear tudo".
   Mais estreito e em caixa baixa: ele não é uma ação que se procura, é um
   controle que se acha quando a cena está engasgando. */
.slam-btn-q {
  min-width: 68px;
  text-transform: lowercase;
  letter-spacing: .06em;
  opacity: .72;
}
.slam-btn-q:hover { opacity: 1; }
.slam-btn-q[hidden] { display: none; }

/* Botão de recentrar. Estreito, em caixa baixa e mais apagado que os outros:
   ele é a saída de emergência da câmera, não uma ação que se procura. */
.slam-btn-icon {
  min-width: 56px;
  text-transform: lowercase;
  letter-spacing: .06em;
  opacity: .8;
}
.slam-btn-icon:hover { opacity: 1; }
.slam-btn-icon[hidden] { display: none; }

/* Apagado enquanto a câmera está em casa; aceso quando há giro ou zoom para
   desfazer. Continua clicável nos dois estados — desabilitar seria mais uma
   coisa a explicar, e clicar num reset que já está em casa não faz mal. */
.slam-btn-icon { opacity: .42; }
.slam-btn-icon[data-armed="1"] { opacity: .95; }

@media (pointer: coarse) {
  /* Alvo de toque de 44 px, como os outros botões da barra. */
  .slam-btn-icon { min-width: 64px; }
}

/* ── o chip do clima quando há viagem ──────────────────────────────────────
   O sufixo entra por `::after` a partir de `data-trip`, e não concatenado no
   texto: quem escreve o conteúdo do chip é o `site-chrome.js`, a cada resposta
   de `/api/location`, e qualquer texto que o lab acrescentasse seria apagado no
   próximo clima. O atributo sobrevive porque aquele script não o conhece. */
.sc-wx-trip::after {
  content: " · " attr(data-trip);
  color: #64f0d0;
  font-weight: 600;
}

/* Uma pulsação lenta, uma vez a cada quatro segundos: o percurso é notícia, e
   um chip idêntico ao de sempre não convida ninguém a clicar. Lento de
   propósito — piscar rápido no canto de um mapa vira alarme. */
.sc-wx-trip { animation: wx-trip 4s ease-in-out infinite; }

@keyframes wx-trip {
  0%, 88%, 100% { opacity: 1; }
  94%           { opacity: .58; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-wx-trip { animation: none; }
}