/* Nash — Tab e Tab Bar de vidro.
   A peça do Figma N.A.S.H. DS: o Tab (327:424, quinze variantes — cinco modos
   × Default, Hover e Active) e o Tab Bar que os compõe (327:636). É o trilho
   de modos das superfícies que moram sobre o orbe (DaXX, Voz), não a coluna
   do nav — aquela é outra peça, com ícone, seção e vermelho imperial.

   Geometria e cor vêm do Figma, sem arredondar: aba de 40 de altura, 16 de
   respiro lateral, 8 entre ponto e rótulo, raio 20; trilho de 48, respiro 4,
   4 entre abas, raio 24. Fill #0D0F12 a 32% (a placa do kit), stroke de 1,5
   por dentro — branco 15 > 6 > 2 > 0 no repouso e no hover, accent 45 > 18 >
   6 > 0 na aba aberta. O ponto de 6px: branco 30% em repouso, 55% sob o
   ponteiro, accent com halo de 16 a 48% quando o modo está no ar. Rótulo
   Archivo Regular 15, branco 60% em repouso e 100% nos outros dois.

   Tokens de tempo e curva vêm do kit (nash-tokens.css) quando a página os
   carrega; cada um tem o próprio valor de fallback, então a peça também
   funciona sozinha. Tudo que se move passa por --nash-tab-escala: um
   ancestral com `--nash-tab-escala: 4` põe a peça em câmera lenta — é como
   a bancada (index.html) deixa ver a passagem quadro a quadro.

   O que se move e por quê está em docs/tab-bar.md. O contrato que um merge
   não pode desfazer está em tab-bar.test.js.

   A PEÇA É ESTA, E SÓ ESTA (decisão do dono em 2026-09-29: "o que você
   fez agora é a verdade absoluta quando falamos desse componente, não
   importa onde"). Toda aba e todo trilho de abas do repositório — o app,
   o PWA, o site, as referências — são esta folha e nash-tab-bar.js. A
   receita antiga do kit (.nash-tab de 32px e .nash-tab-list) saiu de
   nash-componentes.css; as cópias à mão (o segmentado do Nash Code, a
   fileira sublinhada do PWA) saíram das páginas. src/renderer/tab-bar.test.js
   reprova quem voltar a desenhar uma aba fora daqui.

   Esta é a fonte. O app a recebe pelo build:kit (src/renderer/kit/) e o
   PWA pelo build:web (web/vendor/); nenhum dos dois guarda cópia no git.

   Carregue DEPOIS de nash-componentes.css.

   "Aberta" é qualquer um dos três atributos, porque cada consumidor diz o
   estado com o que é semântico pra ele: aria-selected numa aba de tablist,
   aria-pressed num botão alternável, aria-current num link de navegação.
   O JS também os lê. Uma aba com data-avulsa="true" é uma aba fora do
   trilho vivo (um interruptor com a cara da peça, como o Colapsar do nav):
   a placa que viaja não vai até ela, e ela desenha a própria placa. */

/* Registrar o accent como cor é o que deixa a placa que viaja TROCAR de cor
   no caminho: sem @property, uma custom property salta; registrada, o
   navegador interpola o azul do Chat até o roxo do Design junto com a
   posição. Os dois eixos da luz do cursor são registrados pelo mesmo motivo —
   a luz escorrega atrás do ponteiro em vez de saltar. */
@property --nash-tab-accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}

@property --nash-tab-mx {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 50%;
}

@property --nash-tab-my {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 50%;
}

/* ---------- tempo ---------- */
.nash-tab-bar,
.nash-tab {
  --nash-tab-curva: var(--nash-curva-saida, cubic-bezier(0.16, 1, 0.3, 1));
  --nash-tab-t-pressao: calc(var(--nash-dur-pressao, 100ms) * var(--nash-tab-escala, 1));
  --nash-tab-t-solta: calc(var(--nash-dur-solta, 160ms) * var(--nash-tab-escala, 1));
  --nash-tab-t-rotulo: calc(var(--nash-dur-micro, 140ms) * var(--nash-tab-escala, 1));
  --nash-tab-t-ponto: calc(var(--nash-dur-ponto, 160ms) * var(--nash-tab-escala, 1));
  --nash-tab-t-estado: calc(var(--nash-dur-estado, 180ms) * var(--nash-tab-escala, 1));
  --nash-tab-t-placa: calc(var(--nash-dur-brilho, 260ms) * var(--nash-tab-escala, 1));
  --nash-tab-t-luz: calc(var(--nash-dur-brilho, 260ms) * var(--nash-tab-escala, 1));
  --nash-tab-t-halo: calc(320ms * var(--nash-tab-escala, 1));
  --nash-tab-atraso-acende: calc(120ms * var(--nash-tab-escala, 1));
  --nash-tab-t-pulso: calc(3600ms * var(--nash-tab-escala, 1));
  --nash-tab-t-entra: calc(420ms * var(--nash-tab-escala, 1));
  --nash-tab-t-luz-segue: calc(70ms * var(--nash-tab-escala, 1));
}

/* ---------- cor por modo ----------
   Sem data-mode, a aba acende no accent do kit (--accent: branco, ou o
   vermelho imperial com data-accent="imperio"), declarado no :root e
   herdado — então um trilho, ou qualquer ancestral, troca a cor de todas
   as abas dele com uma declaração só (o âmbar do Nash Code, por exemplo).
   Com data-mode, a aba é um dos cinco modos do Figma e leva o accent do
   style-guide.css do shell; Chat e Voz dividem o mesmo azul, como o nav já
   fazia. O halo é o accent a 48% — o Accent Glow que o Toggle do Figma usa. */
:root {
  --nash-tab-accent: var(--accent, #ffffff);
}

.nash-tab {
  --nash-tab-halo: color-mix(in srgb, var(--nash-tab-accent) 48%, transparent);
  --nash-tab-luz-alfa: 16%;
}

.nash-tab[data-mode='chat'],
.nash-tab[data-mode='voz'] {
  --nash-tab-accent: var(--accent-chat, #4dc9ff);
}

.nash-tab[data-mode='design'] {
  --nash-tab-accent: var(--accent-design, #b36bff);
}

.nash-tab[data-mode='imagem'] {
  --nash-tab-accent: var(--accent-image, #ffb454);
}

.nash-tab[data-mode='social'] {
  --nash-tab-accent: var(--accent-social, #5fe0a5);
}

/* ---------- o stroke por dentro ----------
   Um anel de 1,5px recortado por máscara, o mesmo truque da .nash-surface do
   kit: dois gradientes, o content-box tira o miolo e sobra a borda. Todo
   anel desta peça — o do trilho, os dois da aba, os da placa, os da luz —
   sai desta receita. */
.nash-tab-bar::before,
.nash-tab::before,
.nash-tab::after,
.nash-tab-bar-placa::before,
.nash-tab-bar-placa::after,
.nash-tab-luz::before,
.nash-tab-bar-luz::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--nash-stroke, 1.5px);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* ---------- o trilho ---------- */
.nash-tab-bar {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: 48px;
  padding: 4px;
  border-radius: 24px;
  background-color: var(--nash-placa, rgba(13, 15, 18, 0.32));
  -webkit-backdrop-filter: blur(var(--nash-vidro-blur, 24px)) saturate(var(--nash-vidro-sat, 1.85));
  backdrop-filter: blur(var(--nash-vidro-blur, 24px)) saturate(var(--nash-vidro-sat, 1.85));
  font-family: var(--font-sans, 'Archivo', system-ui, sans-serif);
  -webkit-app-region: no-drag;
  /* `backwards`, nunca `both`: com `both` o transform da entrada ficaria
     por cima de qualquer transform posterior — lição do trilho do nav. */
  animation: nash-tab-bar-entra var(--nash-tab-t-entra) var(--nash-tab-curva) backwards;
}

.nash-tab-bar::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.02) 70%,
    rgba(255, 255, 255, 0)
  );
}

/* O trilho em coluna: a mesma peça virada, com as abas esticando pra
   largura da mais larga. A placa viaja na vertical do mesmo jeito que viaja
   na horizontal — a aresta da frente chega antes. É o eixo da coluna do nav. */
.nash-tab-bar--coluna {
  flex-direction: column;
  align-items: stretch;
  height: auto;
}

/* A luz do cursor no trilho: o vidro do trilho também é vidro, e a borda
   dele pega a luz onde o ponteiro está — branca, discreta, só o anel e uma
   névoa de 5%. Some quando o ponteiro sai, no tempo da luz. */
.nash-tab-bar-luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    120px circle at var(--nash-tab-mx) var(--nash-tab-my),
    rgba(255, 255, 255, 0.05),
    transparent 70%
  );
  transition:
    opacity var(--nash-tab-t-luz) var(--nash-tab-curva),
    --nash-tab-mx var(--nash-tab-t-luz-segue) linear,
    --nash-tab-my var(--nash-tab-t-luz-segue) linear;
}

.nash-tab-bar-luz::before {
  background: radial-gradient(
    96px circle at var(--nash-tab-mx) var(--nash-tab-my),
    rgba(255, 255, 255, 0.45),
    transparent 70%
  );
}

.nash-tab-bar:hover .nash-tab-bar-luz {
  opacity: 1;
}

/* ---------- a placa que viaja ----------
   Uma placa só por trilho, atrás das abas, que vai de uma aba à outra. O
   Figma descreve a troca como "trocar a variante de duas instâncias"; aqui a
   placa é uma e se desloca — a aresta da frente chega antes da de trás, então
   a cápsula estica na direção do destino e assenta. É o pedido do dono em
   29/09 ("a transição de uma tab pra outra"), e não contradiz o corte que o
   /design-system defendia: `data-passagem="corte"` no trilho devolve o corte,
   e é o que o teclado usa sempre (teclado nunca anima).

   O JS escreve as quatro arestas (top, right, bottom, left) medidas da aba
   de destino, então a mesma placa serve ao trilho deitado e ao em coluna.
   z-index -1 dentro do trilho isolado: atrás de tudo o que está em fluxo —
   numa coluna com nomes de seção, a placa passa por baixo deles, não por
   cima. */
.nash-tab-bar-placa {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  z-index: -1;
  box-sizing: border-box;
  border-radius: 20px;
  pointer-events: none;
  background-color: var(--nash-placa, rgba(13, 15, 18, 0.32));
  /* A lavagem do accent por cima da fumaça: a luz de cima do efeito GLASS
     do Figma, que o fill chapado não traz. Fraca de propósito — 8% no topo,
     nada embaixo. */
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nash-tab-accent) 8%, transparent),
    color-mix(in srgb, var(--nash-tab-accent) 2%, transparent) 55%,
    transparent
  );
  -webkit-backdrop-filter: blur(var(--nash-vidro-blur, 24px));
  backdrop-filter: blur(var(--nash-vidro-blur, 24px));
  box-shadow: 0 0 24px -8px transparent;
  --nash-tab-t-esq: var(--nash-tab-t-placa);
  --nash-tab-t-dir: var(--nash-tab-t-placa);
  --nash-tab-t-topo: var(--nash-tab-t-placa);
  --nash-tab-t-base: var(--nash-tab-t-placa);
  transition:
    left var(--nash-tab-t-esq) var(--nash-tab-curva),
    right var(--nash-tab-t-dir) var(--nash-tab-curva),
    top var(--nash-tab-t-topo) var(--nash-tab-curva),
    bottom var(--nash-tab-t-base) var(--nash-tab-curva),
    --nash-tab-accent var(--nash-tab-t-placa) var(--nash-tab-curva),
    box-shadow var(--nash-tab-t-placa) var(--nash-tab-curva),
    opacity var(--nash-tab-t-estado) var(--nash-tab-curva);
}

/* Sem aba aberta (ou com a aberta escondida, numa seção dobrada), a placa
   some em vez de ficar parada sobre nada. */
.nash-tab-bar-placa[data-oculta='true'] {
  opacity: 0;
}

/* A aresta da frente chega em 85% do tempo e a de trás em 115%, nos dois
   eixos. A diferença é o que faz a placa esticar e recolher em vez de
   deslizar rígida. */
.nash-tab-bar-placa[data-direcao='direita'] {
  --nash-tab-t-esq: calc(var(--nash-tab-t-placa) * 1.15);
  --nash-tab-t-dir: calc(var(--nash-tab-t-placa) * 0.85);
}

.nash-tab-bar-placa[data-direcao='esquerda'] {
  --nash-tab-t-esq: calc(var(--nash-tab-t-placa) * 0.85);
  --nash-tab-t-dir: calc(var(--nash-tab-t-placa) * 1.15);
}

.nash-tab-bar-placa[data-direcao='baixo'] {
  --nash-tab-t-topo: calc(var(--nash-tab-t-placa) * 1.15);
  --nash-tab-t-base: calc(var(--nash-tab-t-placa) * 0.85);
}

.nash-tab-bar-placa[data-direcao='cima'] {
  --nash-tab-t-topo: calc(var(--nash-tab-t-placa) * 0.85);
  --nash-tab-t-base: calc(var(--nash-tab-t-placa) * 1.15);
}

/* Enquanto viaja, a placa deixa luz: o halo do accent se abre por fora e
   fecha quando ela assenta. */
.nash-tab-bar-placa[data-viaja='true'] {
  box-shadow: 0 0 24px -8px var(--nash-tab-halo, color-mix(in srgb, var(--nash-tab-accent) 48%, transparent));
}

.nash-tab-bar-placa::after {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nash-tab-accent) 45%, transparent),
    color-mix(in srgb, var(--nash-tab-accent) 18%, transparent) 40%,
    color-mix(in srgb, var(--nash-tab-accent) 6%, transparent) 70%,
    transparent
  );
}

/* Medir sem mostrar o caminho: na montagem, no resize e quando a fonte
   chega, a placa vai direto pro lugar. Também é o que `data-passagem="corte"`
   liga no trilho. */
.nash-tab-bar-placa--sem-passagem,
.nash-tab-bar[data-passagem='corte'] .nash-tab-bar-placa {
  transition-property: opacity;
}

/* ---------- a aba ---------- */
.nash-tab {
  position: relative;
  isolation: isolate;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 20px;
  appearance: none;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
  font-family: var(--font-sans, 'Archivo', system-ui, sans-serif);
  font-size: var(--nash-t4, 15px);
  font-weight: 400;
  line-height: 1;
  font-variation-settings: 'wdth' 100;
  letter-spacing: 0;
  /* A aba também é link (a navegação do site, as referências do
     nash.work): sem sublinhado, e na cor da peça, não na do link. */
  text-decoration: none;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  color: rgba(255, 255, 255, 0.6);
  -webkit-tap-highlight-color: transparent;
  -webkit-app-region: no-drag;
  transition:
    color var(--nash-tab-t-rotulo) var(--nash-tab-curva),
    background-color var(--nash-tab-t-estado) var(--nash-tab-curva),
    transform var(--nash-tab-t-solta) var(--nash-tab-curva);
}

/* Os dois anéis da aba: branco pro hover, accent pra aba aberta fora de um
   trilho vivo. Apagados até um estado pedir. */
.nash-tab::before,
.nash-tab::after {
  opacity: 0;
  transition: opacity var(--nash-tab-t-estado) var(--nash-tab-curva);
}

.nash-tab::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.02) 70%,
    rgba(255, 255, 255, 0)
  );
}

.nash-tab::after {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nash-tab-accent) 45%, transparent),
    color-mix(in srgb, var(--nash-tab-accent) 18%, transparent) 40%,
    color-mix(in srgb, var(--nash-tab-accent) 6%, transparent) 70%,
    transparent
  );
}

/* 40 de altura por desenho, 44 de área clicável por implementação — o que a
   descrição do componente no Figma pede. O alvo é um filho invisível que
   sobra 2px pra cima e pra baixo. */
.nash-tab-alvo {
  position: absolute;
  inset: -2px 0;
  border-radius: inherit;
}

.nash-tab-rotulo,
.nash-tab .nash-dot {
  position: relative;
  z-index: 1;
}

/* Uma aba desabilitada (o "Time" em breve das referências do nash.work)
   não responde ao ponteiro e não acende. */
.nash-tab:disabled {
  cursor: default;
}

/* As variantes congeladas — data-state="default|hover|active" — são as do
   Figma, pra documentação. Não respondem ao ponteiro: uma aba que diz
   "Hover" no rótulo da bancada tem de continuar em hover com o cursor
   longe, e uma "Default" tem de ficar em repouso com o cursor em cima. */
.nash-tab[data-state] {
  pointer-events: none;
}

/* ---------- ponteiro: "dá pra apertar" ----------
   A placa sobe pro #1F2128 a 40%, o anel branco acende, o rótulo vai a
   branco e o ponto a 55%. */
.nash-tab:is(:hover, [data-state='hover']):not(:disabled):not(:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false']))):not([data-state='active']) {
  color: #fff;
  background-color: var(--nash-placa-hover, rgba(31, 33, 40, 0.4));
  -webkit-backdrop-filter: blur(var(--nash-vidro-blur, 24px));
  backdrop-filter: blur(var(--nash-vidro-blur, 24px));
}

.nash-tab:is(:hover, [data-state='hover']):not(:disabled):not(:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false']))):not([data-state='active'])::before {
  opacity: 1;
}

.nash-tab:is(:hover, [data-state='hover']):not(:disabled) .nash-dot {
  background-color: rgba(255, 255, 255, 0.55);
}

/* ---------- a luz do cursor: "é vidro" ----------
   Uma luz na cor do modo que segue o ponteiro por dentro da aba — 16% no
   miolo e o anel da borda aceso no ponto mais próximo do cursor. Numa aba em
   repouso ela ANUNCIA a cor do modo antes de ele abrir (o ponto continua
   branco, como o Figma manda); na aba aberta ela é mais forte. Entra em
   --nash-tab-t-luz e sai no mesmo tempo, então a luz demora um instante a
   deixar o vidro. */
.nash-tab-luz {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    80px circle at var(--nash-tab-mx) var(--nash-tab-my),
    color-mix(in srgb, var(--nash-tab-accent) var(--nash-tab-luz-alfa), transparent),
    transparent 70%
  );
  transition:
    opacity var(--nash-tab-t-luz) var(--nash-tab-curva),
    --nash-tab-mx var(--nash-tab-t-luz-segue) linear,
    --nash-tab-my var(--nash-tab-t-luz-segue) linear;
}

.nash-tab-luz::before {
  background: radial-gradient(
    64px circle at var(--nash-tab-mx) var(--nash-tab-my),
    color-mix(in srgb, var(--nash-tab-accent) 85%, transparent),
    transparent 70%
  );
}

.nash-tab:hover:not(:disabled) .nash-tab-luz {
  opacity: 1;
}

.nash-tab:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])),
.nash-tab[data-state='active'] {
  --nash-tab-luz-alfa: 22%;
}

.nash-tab:active {
  --nash-tab-luz-alfa: 28%;
}

/* ---------- pressão: "registrou" ----------
   Escala 0,98 em 100ms, solta em 160 na mesma curva; a placa assenta no
   #080A0D a 32%. O ponto encolhe a 0,8 enquanto o dedo está em cima — é a
   carga: ao soltar numa aba fechada, ele floresce na passagem. */
.nash-tab:active:not([data-state]):not(:disabled) {
  transform: scale(0.98);
  transition-duration:
    var(--nash-tab-t-rotulo),
    var(--nash-tab-t-pressao),
    var(--nash-tab-t-pressao);
}

.nash-tab:active:not([data-state]):not(:disabled):not(:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false']))) {
  background-color: var(--nash-placa-pressed, rgba(8, 10, 13, 0.32));
}

.nash-tab:active:not([data-state]):not(:disabled) .nash-dot {
  transform: scale(0.8);
  transition-duration:
    var(--nash-tab-t-ponto),
    var(--nash-tab-t-halo),
    var(--nash-tab-t-pressao);
}

/* ---------- o ponto: "este é o modo" ---------- */
.nash-tab .nash-dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 16px 0 transparent;
  transition:
    background-color var(--nash-tab-t-ponto) var(--nash-tab-curva),
    box-shadow var(--nash-tab-t-halo) var(--nash-tab-curva),
    transform var(--nash-tab-t-solta) var(--nash-tab-curva);
}

/* O halo que pulsa fica num filho próprio, porque o box-shadow do ponto já
   carrega o florescer — duas animações na mesma propriedade se anulam. */
.nash-tab .nash-dot::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, var(--nash-tab-halo), transparent 70%);
  transition: opacity var(--nash-tab-t-halo) var(--nash-tab-curva);
}

/* ---------- aba aberta ---------- */
.nash-tab:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])),
.nash-tab[data-state='active'] {
  color: #fff;
}

.nash-tab:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])) .nash-dot,
.nash-tab[data-state='active'] .nash-dot {
  background-color: var(--nash-tab-accent);
  box-shadow: 0 0 16px 0 var(--nash-tab-halo);
}

/* A aba aberta desenha a própria placa e o próprio anel de accent — é o
   caso da variante congelada, de um trilho sem o JS e da aba avulsa. Dentro
   de um trilho vivo quem desenha é a placa que viaja, e a aba apaga a dela. */
.nash-tab:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])),
.nash-tab[data-state='active'] {
  background-color: var(--nash-placa, rgba(13, 15, 18, 0.32));
  -webkit-backdrop-filter: blur(var(--nash-vidro-blur, 24px));
  backdrop-filter: blur(var(--nash-vidro-blur, 24px));
}

.nash-tab:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false']))::after,
.nash-tab[data-state='active']::after {
  opacity: 1;
}

.nash-tab-bar--viva .nash-tab:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])):not([data-avulsa='true']) {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nash-tab-bar--viva .nash-tab:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])):not([data-avulsa='true'])::after {
  opacity: 0;
}

/* ---------- a passagem, no trilho vivo ----------
   A aba que abre espera a placa chegar: o ponto dela toma o accent 120ms
   depois do clique e floresce — 0 → 24px a 70% → 16px a 48% — em 320. A aba
   que fecha não espera nada: rótulo em 140, ponto em 160, halo em 320, tudo
   a partir do zero. O rótulo da que abre acende no zero, junto da placa que
   parte: é o que diz "ouvi" antes de a placa chegar. */
.nash-tab-bar--viva .nash-tab:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])) .nash-dot {
  transition-delay:
    var(--nash-tab-atraso-acende),
    var(--nash-tab-atraso-acende),
    0s;
  animation: nash-tab-acende var(--nash-tab-t-halo) var(--nash-tab-curva) var(--nash-tab-atraso-acende) backwards;
}

/* ---------- o pulso: "está no ar" ----------
   O halo da aba aberta respira, devagar (3,6s), entre 55% e 90% da força —
   nunca apaga. É o único laço da peça, e é o que faz o modo no ar parecer
   ligado, não pintado. Sob o ponteiro o halo se abre um pouco mais. */
.nash-tab-bar--viva .nash-tab:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])) .nash-dot::after {
  opacity: 0.7;
  animation: nash-tab-pulso var(--nash-tab-t-pulso) ease-in-out infinite;
  animation-delay: var(--nash-tab-t-halo);
}

.nash-tab-bar--viva .nash-tab:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])):hover .nash-dot {
  box-shadow: 0 0 20px 1px var(--nash-tab-halo);
}

.nash-tab-bar[data-pulso='off'] .nash-tab .nash-dot::after {
  animation: none;
}

/* ---------- a entrada ----------
   Uma vez, ao montar: o trilho sobe 6px e assenta em 420; cada aba chega
   40ms depois da anterior. O ponto da aba aberta floresce quando a fila
   termina — a mesma animação da passagem, só que como abertura. */
.nash-tab-bar--viva .nash-tab {
  animation: nash-tab-entra var(--nash-tab-t-entra) var(--nash-tab-curva) backwards;
  animation-delay: calc(60ms * var(--nash-tab-escala, 1) + var(--nash-ordem, 0) * 40ms * var(--nash-tab-escala, 1));
}

/* ---------- foco ---------- */
.nash-tab:focus-visible {
  outline: 2px solid var(--nash-tab-accent);
  outline-offset: 2px;
}

/* O quarto estado do nav, que o Figma não desenhou: uma aba cujo backend
   ainda não foi configurado. Texto a 28%, e nada acende. */
.nash-tab[data-unconfigured='true'] {
  color: rgba(255, 255, 255, 0.28);
}

.nash-tab[data-unconfigured='true'] .nash-tab-luz {
  display: none;
}

/* ---------- quadros ---------- */
@keyframes nash-tab-acende {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 transparent;
  }

  45% {
    transform: scale(1.25);
    box-shadow: 0 0 24px 2px color-mix(in srgb, var(--nash-tab-accent) 70%, transparent);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 16px 0 var(--nash-tab-halo);
  }
}

@keyframes nash-tab-pulso {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.12);
  }
}

@keyframes nash-tab-bar-entra {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes nash-tab-entra {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- movimento reduzido ----------
   Como o kit: cor e opacidade ainda mudam, em 100ms; nada viaja, nada
   escala, nada pulsa. A placa vai direto pra aba aberta. Duração zero seria
   um corte, e corte também incomoda. Vale por prefers-reduced-motion e pela
   classe .nash-reduzido num ancestral. */
@media (prefers-reduced-motion: reduce) {
  .nash-tab-bar,
  .nash-tab-bar--viva .nash-tab,
  .nash-tab-bar--viva .nash-tab:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])) .nash-dot,
  .nash-tab-bar--viva .nash-tab:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])) .nash-dot::after {
    animation: none;
  }

  .nash-tab-bar-placa {
    transition-property: opacity, --nash-tab-accent;
    transition-duration: 100ms;
  }

  .nash-tab,
  .nash-tab .nash-dot,
  .nash-tab-luz,
  .nash-tab-bar-luz,
  .nash-tab::before,
  .nash-tab::after {
    transition-duration: 100ms;
    transition-delay: 0s;
  }

  .nash-tab:active:not([data-state]),
  .nash-tab:active:not([data-state]):not(:disabled) .nash-dot {
    transform: none;
  }
}

.nash-reduzido .nash-tab-bar,
.nash-reduzido .nash-tab-bar--viva .nash-tab,
.nash-reduzido .nash-tab-bar--viva .nash-tab:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])) .nash-dot,
.nash-reduzido .nash-tab-bar--viva .nash-tab:is([aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false'])) .nash-dot::after {
  animation: none;
}

.nash-reduzido .nash-tab-bar-placa {
  transition-property: opacity, --nash-tab-accent;
  transition-duration: 100ms;
}

.nash-reduzido .nash-tab,
.nash-reduzido .nash-tab .nash-dot,
.nash-reduzido .nash-tab-luz,
.nash-reduzido .nash-tab-bar-luz,
.nash-reduzido .nash-tab::before,
.nash-reduzido .nash-tab::after {
  transition-duration: 100ms;
  transition-delay: 0s;
}

.nash-reduzido .nash-tab:active:not([data-state]),
.nash-reduzido .nash-tab:active:not([data-state]):not(:disabled) .nash-dot {
  transform: none;
}

/* ---------- o modo claro ----------
   A peça é vidro escuro por desenho. Sobre papel (data-tema="claro", o
   contrato de style-guide.css), o branco vira tinta: os mesmos degraus, na
   cor de texto do tema. O accent por modo já escurece no próprio
   style-guide.css. */
:root[data-tema='claro'] .nash-tab {
  color: rgba(20, 20, 15, 0.6);
}

:root[data-tema='claro'] .nash-tab:is(:hover, [data-state='hover'], [aria-selected='true'], [aria-pressed='true'], [aria-current]:not([aria-current='false']), [data-state='active']) {
  color: #14140f;
}

:root[data-tema='claro'] .nash-tab .nash-dot {
  background-color: rgba(20, 20, 15, 0.3);
}

:root[data-tema='claro'] .nash-tab:is(:hover, [data-state='hover']):not(:disabled) .nash-dot {
  background-color: rgba(20, 20, 15, 0.55);
}

:root[data-tema='claro'] .nash-tab-bar::before,
:root[data-tema='claro'] .nash-tab::before {
  background: linear-gradient(
    180deg,
    rgba(20, 20, 15, 0.15),
    rgba(20, 20, 15, 0.06) 40%,
    rgba(20, 20, 15, 0.02) 70%,
    rgba(20, 20, 15, 0)
  );
}