/* @slice 5/9 · lab-panel.css · linhas 497–835 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. */
/* ── painel da seção, aberto pela permanência no cômodo ────────────────────
   O cartão CRESCE do ponto onde o cômodo está na tela (`--rp-origin-*`), o que
   mantém a ligação espacial: um cartão que aparece centrado do nada obriga a
   pessoa a reconstruir de onde ele veio. */

.room-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  /* O topo respeita o header medido: centrado em `inset: 0`, um cartão mais
     alto que a folga entrava por baixo da barra e levava junto o título e o ✕
     de fechar — visto em `/timeline` no telefone, onde o chrome ocupa duas
     linhas. `padding-top` maior que os 24px dos outros lados é o que reserva
     essa faixa sem mexer no resto. */
  padding: calc(var(--lab-chrome-bottom, 88px) + 12px) 24px 24px;
  /* O fundo NÃO escurece a tela toda: o mapa continua vivo por baixo e o robô
     continua andando — apagá-lo transformaria o painel num modal, que é
     exatamente o que "sem sair do mapa" exclui. */
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease-out;
}

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

/* O cartão. Regra BASE — as variantes (`anchored`, `full`, folha de baixo) só
   mudam posição e forma; fundo, borda e sombra vêm todos daqui.

   ⚠️ Quase opaco de propósito. A 93% os 7% que passavam já bastavam para o
   cômodo roxo atravessar o texto — medido na tela: dava para ler "OPEN SOURCE"
   por baixo do parágrafo. O desfoque sozinho não resolve: ele borra, mas não
   escurece o que é mais claro que o painel. */
.rp-card {
  position: relative;
  width: min(440px, 100%);
  padding: 26px 28px 22px;
  border-radius: 18px;
  border: 1px solid rgba(150, 170, 220, .22);
  background: rgba(11, 16, 32, .975);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);

  /* A origem da escala é o ponto do cômodo. Sem `transform-origin`, o cartão
     cresceria do próprio centro e a animação não diria de onde veio. */
  transform-origin: var(--rp-origin-x, 50%) var(--rp-origin-y, 50%);
  transform: scale(.86) translateY(10px);
  opacity: 0;
  transition: transform .26s cubic-bezier(.2, .9, .3, 1), opacity .2s ease-out;
}

.room-panel.open .rp-card { transform: scale(1) translateY(0); opacity: 1; }

/* Ancorado numa borda — o "side peek" do Notion.
   Colado na lateral, altura cheia, conteúdo rolando dentro. Enquanto a classe
   não estiver presente (tela estreita, ou vazio pequeno demais), valem as regras
   de flex acima e o cartão vira folha de baixo. */
.room-panel.anchored { display: block; }

.room-panel.anchored .rp-card {
  position: absolute;
  /* Começa abaixo do chrome do site — cobri-lo esconderia o menu e o seletor de
     idioma, e a altura dele muda entre desktop e telefone. */
  top: var(--rp-top, 0px);
  bottom: 0;
  /* Largura medida em JS: o vazio que sobra até o robô, entre 380 e 760 px.
     Fixa, ela desperdiçava metade do espaço numa tela larga. */
  width: var(--rp-width, 440px);
  max-width: 92vw;
  /* Altura cheia: o `max-height` do cartão flutuante não vale aqui, e é
     justamente o que corrigia o corte do conteúdo longo. */
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
}

/* O arredondamento fica só do lado de DENTRO: arredondar os quatro cantos de um
   painel colado na borda deixa uma falha de fundo nos cantos externos. */
.room-panel.anchored.side-left .rp-card {
  left: 0;
  border-radius: 0 18px 18px 0;
  border-left: none;
  transform: translateX(-102%);
}

.room-panel.anchored.side-right .rp-card {
  right: 0;
  border-radius: 18px 0 0 18px;
  border-right: none;
  transform: translateX(102%);
}

/* Deslizar de FORA da borda, e não crescer: é o gesto que diz "isto estava ao
   lado, e agora entrou". Os 102% (em vez de 100%) escondem a sombra durante a
   entrada — a 100% ela vaza uma faixa escura na borda. */
.room-panel.anchored.open .rp-card { transform: translateX(0); }

.room-panel.anchored .rp-body {
  /* O corpo é quem rola; o cabeçalho e o botão ficam fixos nas pontas. */
  flex: 1;
  max-height: none;
  min-height: 0;
}

/* Mesmo motivo do modo cheio: o recuo lateral sai do cartão e entra no corpo,
   para a área que rola cobrir a largura inteira. Aqui a faixa morta era de 26px
   de cada lado — menor que os 64 do cheio, mas é justamente a beirada em que o
   ponteiro para quando alguém traz o mouse de fora do painel. */
.room-panel.anchored .rp-card { padding-left: 0; padding-right: 0; }

.room-panel.anchored .rp-order,
.room-panel.anchored .rp-title,
.room-panel.anchored .rp-body {
  padding-left: 26px;
  padding-right: 26px;
}

/* A margem negativa da regra base existe para a sombra dos itens não ser
   cortada; com o cartão sem recuo ela jogaria o corpo 4px PARA FORA. */
.room-panel.anchored .rp-body { margin-left: 0; margin-right: 0; }

/* Tela cheia — os painéis de GRADE (labs, projetos), como na 2026.5.
   Doze capas de estação empilhadas num painel lateral de 760 px viram uma tira
   de rolagem; o CSS da 2026.5 inclusive força uma coluna só fora do modo cheio.
   Aqui o painel cobre a área da cena inteira, do chrome para baixo. */
.room-panel.full { display: block; }

.room-panel.full .rp-card {
  position: absolute;
  top: var(--rp-top, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  max-width: none;
  border-radius: 0;
  border-left: none;
  border-right: none;
  display: flex;
  flex-direction: column;
  padding: 26px clamp(20px, 5vw, 64px) 22px;
  /* Sobe deslizando de baixo, e não crescendo do cômodo: em tela cheia a origem
     espacial não significa mais nada — o painel ocupa o lugar do mapa inteiro. */
  transform: translateY(24px);
}

.room-panel.full.open .rp-card { transform: translateY(0); }

.room-panel.full .rp-body {
  flex: 1;
  max-height: none;
  min-height: 0;
  width: 100%;
  /* 🛑 A LARGURA MÁXIMA É DO CONTEÚDO, NÃO DO CONTÊINER QUE ROLA.
     Enquanto o `max-width: 1180px` estava AQUI, o `.rp-body` — o único elemento
     rolável do painel — ocupava só a faixa central, e o `.rp-card` em volta não
     rola nem tem ancestral rolável (a página é fixa). Efeito medido em
     29/08/2026 numa janela de 1512px: com o ponteiro em x=80 a roda não movia
     NADA, e quanto mais larga a tela, maior a faixa morta (166px de cada lado
     aqui, mais na do dono). Parecia painel travado, e não era: a mesma roda
     500px à direita rolava normalmente.

     Agora o contêiner cobre o card inteiro e quem se limita a 1180 é a grade —
     mesmo desenho na tela, roda viva em qualquer ponto. */
  margin: 0;
  max-width: none;
}

.room-panel.full .rp-body > * {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* O recuo lateral saiu do cartão e passou para o cabeçalho E para o corpo — os
   mesmos `clamp()` nos dois, para o título continuar alinhado com a grade nas
   duas larguras. Deixá-lo no cartão devolveria ao painel a faixa morta que este
   conjunto veio eliminar: 64px de cada lado onde a roda não encontra scroller
   nenhum. O `max-width` do cabeçalho soma o recuo porque ele é `border-box` —
   sem isso o título ficaria 128px mais estreito que a grade. */
.room-panel.full .rp-card { padding-left: 0; padding-right: 0; }

.room-panel.full .rp-order,
.room-panel.full .rp-title,
.room-panel.full .rp-body {
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}

.room-panel.full .rp-order,
.room-panel.full .rp-title {
  box-sizing: border-box;
  max-width: calc(1180px + 2 * clamp(20px, 5vw, 64px));
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.rp-order {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  color: #6fd6ff;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

.rp-title {
  margin: 4px 0 12px;
  font-size: 22px;
  letter-spacing: .06em;
  font-weight: 600;
  color: #eaf0ff;
}

/* Corpo da seção — o conteúdo clonado do template da 2026.5.
   Rola dentro do cartão: `tpl-career` tem 16 KB e não cabe em tela nenhuma sem
   rolagem. `overscroll-behavior: contain` impede que o fim da lista continue
   rolando a página atrás, que no telefone tira o mapa da tela. */
.rp-body {
  max-height: min(62vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -4px 18px;
  padding: 0 4px;
}

.rp-body[hidden] { display: none; }

/* O CSS dos painéis da 2026.5 assume a largura do painel dela. Aqui o cartão é
   mais estreito, e a régua de carreira precisa poder encolher. */
.rp-body .career { max-width: 100%; }

.rp-text {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #b9c6e4;
}

.rp-close {
  position: absolute;
  top: 10px;
  right: 10px;
  /* 44px é o alvo mínimo de toque da diretriz da Apple, e vale para o mouse
     também: em 34px, com o ícone desenhado a 15px no meio, a mira útil era um
     quadrado de meia dúzia de pixels — fechar o painel virava pontaria. */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: #8e9ab8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  /* 🛑 Sem z-index o botão SOME atrás do conteúdo. Medido em 29/08/2026 no
     cômodo do desktop: `elementsFromPoint` no centro do ✕ devolvia o
     `IFRAME.rp-embed` na frente — o cabeçalho `.rp-order`/`.rp-title` já leva
     `z-index: 1` para não ser rolado por cima, e isso basta para o corpo do
     painel disputar a camada com um botão que só era `position: absolute`.
     O 2 o põe acima dos dois, que é onde um controle de fechar tem de estar. */
  z-index: 2;
}

/* E a área que RECEBE o clique passa de 44 para 60, sem mudar nada do que se
   vê: o alvo cresce para fora, na direção do canto, onde não há outro controle
   para roubar. Quem erra o ✕ erra por pouco, e é esse pouco que o `inset`
   negativo recupera. */
.rp-close::after {
  content: '';
  position: absolute;
  inset: -8px;
}

.rp-close:hover {
  color: #eaf0ff;
  border-color: rgba(150, 170, 220, .3);
  background: rgba(150, 170, 220, .1);
}

.rp-close:focus-visible { outline: 2px solid #6fd6ff; outline-offset: 2px; }

/* No telefone o cartão vira folha de baixo — o padrão nativo, e o único lugar
   que o polegar alcança sem trocar a pegada. A entrada passa a ser deslizando
   de baixo, não crescendo do cômodo: numa tela estreita o cartão cobre quase
   tudo, e a origem espacial deixa de significar algo. */
@media (max-width: 560px) {
  .room-panel { align-items: flex-end; padding: 0; }

  .rp-card {
    width: 100%;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    /* Espaço para o HUD, que fica por cima (z-index 40 contra 50 do painel —
       o painel vence, mas o HUD precisa continuar legível ao lado). */
    margin-bottom: 0;
    transform-origin: 50% 100%;
    transform: translateY(18px);
  }

  .room-panel.open .rp-card { transform: translateY(0); }

  /* Alvo de toque cheio no fechar e no link. */
  .rp-close { width: 44px; height: 44px; top: 8px; right: 8px; }
  /* Na folha de baixo sobra menos altura: o conteúdo divide a tela com o mapa,
     que continua sendo o ponto. */
  .rp-body { max-height: 46vh; }
}

/* Quem pediu menos movimento recebe o painel já no lugar — mesmo conteúdo,
   mesmo fecho, sem a escala nem o deslize. */
@media (prefers-reduced-motion: reduce) {
  .room-panel, .rp-card { transition: opacity .12s linear; }
  .rp-card { transform: none; }
  .room-panel.open .rp-card { transform: none; }
  /* Ancorado, o `translateY(-50%)` é POSICIONAMENTO e não animação: removê-lo
     junto com a escala jogaria o cartão meia altura para baixo. */
  /* Ancorado ou cheio, o painel entra sem deslizar — só o fade do contêiner. */
  .room-panel.anchored .rp-card,
  .room-panel.anchored.open .rp-card,
  .room-panel.full .rp-card,
  .room-panel.full.open .rp-card { transform: none; }
}

/* ── polimento do painel ───────────────────────────────────────────────────
   Entrada escalonada, barra de rolagem discreta e o cabeçalho que não some ao
   rolar. Nada disso muda o que o painel diz — muda o quanto ele parece parte da
   cena e não uma caixa colada por cima. */

/* O cabeçalho fica preso no topo enquanto o conteúdo rola. Sem isso, num
   template de 16 KB o visitante rola dois palmos e perde de vista em que seção
   está. */
.room-panel .rp-order,
.room-panel .rp-title {
  position: relative;
  z-index: 1;
}

/* Entrada escalonada: cabeçalho primeiro, conteúdo logo atrás. Os 60 ms de
   diferença são pequenos de propósito — o suficiente para o olho seguir a
   ordem, longe de virar espera. */
.room-panel .rp-order,
.room-panel .rp-title,
.room-panel .rp-body,
.room-panel .rp-text {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease-out, transform .28s cubic-bezier(.2, .9, .3, 1);
}

.room-panel.open .rp-order { transition-delay: .06s; }
.room-panel.open .rp-title { transition-delay: .10s; }
.room-panel.open .rp-body,
.room-panel.open .rp-text { transition-delay: .16s; }

.room-panel.open .rp-order,
.room-panel.open .rp-title,
.room-panel.open .rp-body,
.room-panel.open .rp-text {
  opacity: 1;
  transform: translateY(0);
}

/* Barra de rolagem discreta. O padrão do sistema é claro e larga demais para um
   painel escuro, e no Windows ela rouba 17 px da largura do texto. */
.rp-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 170, 220, .28) transparent;
}

.rp-body::-webkit-scrollbar { width: 8px; }
.rp-body::-webkit-scrollbar-track { background: transparent; }

.rp-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(150, 170, 220, .24);
  /* A borda transparente afina o polegar sem estreitar a área de arrasto: 8 px
     para pegar, 4 px de aparência. */
  border: 2px solid transparent;
  background-clip: content-box;
}

.rp-body::-webkit-scrollbar-thumb:hover { background: rgba(150, 170, 220, .42); background-clip: content-box; }

/* O botão de fechar acompanha o painel, mas entra por último e sem deslocamento
   — ele precisa estar clicável desde o primeiro instante. */
.room-panel .rp-close { transition: opacity .18s ease-out .2s, color .15s, border-color .15s; opacity: 0; }
.room-panel.open .rp-close { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* Sem deslocamento nem escalonamento: tudo aparece junto, com o mesmo fade
     curto do contêiner. */
  .room-panel .rp-order,
  .room-panel .rp-title,
  .room-panel .rp-body,
  .room-panel .rp-text,
  .room-panel .rp-close {
    transform: none;
    transition: opacity .12s linear;
    transition-delay: 0s;
  }
}

/* Link dentro do painel. A 2026.5 zera o estilo de link no `base.css`
   (`a { color: inherit; text-decoration: none }`) e deixa cada componente
   pintar o seu; sem essa regra os links caem no azul `#0000EE` do browser sobre
   fundo escuro — medido: os quatro canais de contato saíam em azul-marinho
   ilegível, com sublinhado. Escopado no painel para não afetar o chrome. */
.rp-body a {
  color: inherit;
  text-decoration: none;
}