/* @slice 6/9 · lab-versions.css · linhas 836–921 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. */
/* ── seletor de versões no menu ────────────────────────────────────────────
   Clone do da 2026.5. O item nasce dentro do `.sc-nav`, então herda a tipografia
   do chrome e acompanha o menu recolhido sem tratamento especial. */

.ver-item { cursor: pointer; }

.ver-caret {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  opacity: .55;
  /* A seta gira ao abrir — é o único sinal de estado num item que, fechado, é
     igual aos outros nove. */
  transition: transform .18s ease-out, opacity .18s;
}

.ver-item.open .ver-caret { transform: rotate(90deg); opacity: 1; }
.ver-item.open { color: #f1f4ff; }

.ver-flyout {
  position: fixed;
  /* 🛑 120, e não 45. O item "versões" mora no header (`.site-chrome`,
     z-index 100), que fica ACIMA de tudo que o visitante abre — então dá para
     clicar nele com um painel de seção ou o menu recolhido já na frente. Com
     45 o painel de versões abria ATRÁS deles e simplesmente não aparecia:
     `.room-panel` é `inset: 0` com z-index 50 (cobre a tela inteira), a folha
     do menu vai a 99, ou 110 com o ☰ no HUD, e o overlay do desktop legado
     chega a 80. Medido em 29/08/2026 em `/about`: o flyout abria, ficava no
     lugar certo, e `elementsFromPoint` devolvia só o `.room-panel`.

     120 é acima de todos esses e do próprio header, e abaixo da dica de bolso
     (130) e do boot (200) — os dois únicos que precisam vencer um menu. */
  z-index: 120;
  width: 268px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(150, 170, 220, .22);
  background: rgba(11, 16, 32, .96);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .16s ease-out, transform .18s cubic-bezier(.2, .9, .3, 1);
}

.ver-flyout.open { opacity: 1; transform: translateY(0); }
.ver-flyout[hidden] { display: none; }

.ver-flyout-head {
  padding: 6px 10px 10px;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6f7a99;
}

.ver-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: background .14s, border-color .14s;
}

.ver-card:hover { background: rgba(111, 214, 255, .09); border-color: rgba(111, 214, 255, .24); }

/* A versão que ANTECEDE esta fica marcada. Não é "atual" — a atual é a 2026.6,
   que não está na lista porque é de onde se olha. */
.ver-card.is-current { background: rgba(111, 214, 255, .07); }

.ver-badge {
  min-width: 56px;
  padding: 3px 0;
  text-align: center;
  border-radius: 6px;
  background: rgba(111, 214, 255, .12);
  color: #6fd6ff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ver-meta { display: flex; flex-direction: column; line-height: 1.35; }
.ver-meta b { font-size: 13px; font-weight: 500; color: #dbe4f7; }
.ver-meta i { font-size: 11px; font-style: normal; color: #6f7a99; }

/* Na folha do menu recolhido o item ocupa a linha inteira, como os outros. */
.nav-sheet .sc-nav .ver-item { justify-content: flex-start; }

@media (pointer: coarse) {
  /* Alvo de toque nos cartões, pelo mesmo motivo do resto do lab. */
  .ver-card { min-height: 48px; }
}