# Aba contida — a aba ativa é o chão subindo pra dentro da faixa

Referência: recorte v.2 de uma prancha de abas (Figma ROSHAN `345:3908`),
refeita pro topo do Nash Code em 2026-09-25. Render visto lado a lado com a
original no app e no Figma.

- **Três planos, não dois.** Chão embaixo, faixa rebaixada por cima, e a aba
  ativa com a cor do chão — ela não é uma placa sobre a faixa, é o chão
  aparecendo. Na referência: chão `#2f2e33`, faixa em degradê `#151419` →
  `#201f24` (mais clara embaixo), aro de 1 px no chão + 12 níveis.
- **Contorno contínuo.** O aro corre pela borda de baixo da faixa, sobe pela
  curva côncava da base, pelo lado inclinado, pelo topo e desce do outro lado.
  Um traço só; a base da aba não tem linha.
- **Geometria**, em relação à altura da faixa (52 px no app): topo da aba a
  10% (5 px), lado inclinado 0,15 px por px de altura, canto de cima com curva
  assimétrica (9 px no topo, 5 no lado), curva da base de 6 px, base passando
  5 px além da caixa do botão.
- **Receita no código**: um SVG na faixa com `fill-rule: evenodd` (retângulo
  menos o nicho) e um caminho aberto pro aro, refeitos por JS a cada troca e
  a cada `ResizeObserver`. O buraco deixa passar o que estiver debaixo — no
  Nash Code, o respiro neon do palco, que precisa pintar entre o fundo do topo
  e a faixa.
- **Em chão preto** o contraste faixa × chão some (a faixa não pode ser mais
  escura que preto); quem segura a leitura é o aro e a luz que vem do buraco.
  Subir o chão um degrau devolve o contraste da referência.
- **No Figma**: o nicho em três pedaços (tampa, meio, tampa espelhada) com
  restrição esquerda / esticar / direita, pra aba aceitar rótulo de qualquer
  largura sem deformar a curva.
- **Hover**: cápsula de raio 8 em degradê de cima pra baixo (mais escura em
  cima), sem aro.
- **Conota**: pasta de arquivo e aba de navegador — a seção aberta está na
  frente e o conteúdo embaixo pertence a ela. A faixa rebaixada é a gaveta; a
  aba é a folha puxada pra fora.