/* Nash — Switch de vidro.
   Figma N.A.S.H. DS 329:2890, "Toggle Switch": State=Off, On e Automatic,
   num tamanho só (48 × 24, thumb de 20 a 2 da borda, que viaja 24). O
   interruptor de qualquer preferência. Quinta peça da família (Tab Bar,
   Text Input, Icon Button, Button), com o mesmo repertório: placa, anel de
   1,5 por máscara, luz do cursor, accent registrado por @property, escala
   de tempo.

   Geometria e cor do Figma: trilho 48 × 24 em pílula. Off com fill #1F2128
   40% e stroke branco 11%, o thumb (20, à esquerda) fundido em branco 11%
   com borda de 0,5. On com o accent a 12% no fundo e 35% na borda, o thumb
   à direita aceso no accent com o Accent Glow (48%, raio 16). Automatic com
   o thumb esticado pelo trilho inteiro (44 × 20), branco 11% com o Accent
   Glow a 20 e um brilho branco 30% por baixo (0 5 13,75), o trilho com o
   accent a 26% e stroke branco 15%. A descrição do componente pede área de
   toque de 44 × 44 além do trilho.

   Nomes pelo vocabulário do Roshan (docs/vocabulario-mapa.json): componente
   .nash-switch (/componentes/59); parte .nash-switch-<parte> — track e thumb
   são do mapa (/componentes/60 e /47), halo, spotlight e label seguem as
   irmãs; variante data-<eixo> (data-mode); estado por ARIA — aria-checked
   true|false|mixed, Automatic é mixed — ou pelo :checked e :indeterminate do
   checkbox nativo, os dois lidos por :has(); :disabled; :focus-visible;
   token --nash-switch-<parte>, com --nash-switch-travel no lugar do
   --nash-curso do kit (/componentes/31); o que o JS escreve em
   --nash-runtime-*; movimento reduzido por [data-motion="reduced"]. As
   variantes congeladas da documentação são data-state="default|hover|
   pressed", enum desta peça. O efeito .nash-deslize do kit entra aqui:
   efeito de um componente só não é camada (mapa, regra 9).

   Duas formas, um seletor. A casca é um <label> com o checkbox nativo
   dentro — a forma que o app e o site já escreviam: o estado é :checked e
   :indeterminate, e o navegador cuida do clique, do teclado, do formulário
   e do que o leitor de tela anuncia, inclusive o mixed — ou um <button
   role="switch" aria-checked> quando não há campo de formulário. O CSS lê
   as duas no mesmo seletor, .nash-switch:is([aria-checked='true'], :has(>
   input:checked)), em vez de o JS espelhar o estado num atributo: a ARIA
   proíbe aria-checked num checkbox nativo, e sem JS a forma nativa continua
   inteira. A razão inteira está em docs/switch.md.

   Adaptações (docs/switch.md): o fill do Off no Figma (#1F2128 40%) é a
   placa de hover da família; em repouso a peça usa a placa de repouso
   (#0D0F12 32%) e sobe à de hover sob o ponteiro, como as irmãs. O stroke é
   o anel branco 15 › 6 › 2 › 0 da família (o Figma anota 11 e 15) e, ligado,
   o anel de accent 45 › 18 › 6 › 0 (o Figma anota 35). Hover, pressão, foco e
   desabilitado são da peça, pendentes no Figma. O accent é
   --nash-switch-accent: branco por padrão, o do modo com data-mode.

   Tempo e curva vêm do kit (nash-tokens.css) com fallback próprio; tudo
   passa por --nash-switch-time-scale, ou pela --nash-escala da família.

   Documentação: docs/switch.md. Contrato: src/renderer/switch.test.js.
   Fonte única: o app recebe pelo build:kit (src/renderer/kit/), o PWA pelo
   build:web (web/vendor/).

   Carregar depois de nash-componentes.css. nash-switch.js completa a
   anatomia (o checkbox, o trilho, o thumb, a aura, a luz, o rótulo),
   escreve a luz do cursor e emite nash:change; sem ele a forma nativa é o
   trilho com o thumb que a página escreveu, e liga e desliga do mesmo
   jeito. */

/* Registrados pra interpolar: o accent (troca de cor com transição), os
   dois eixos da luz (seguem o ponteiro com transição), a respiração (um
   número de 0 a 1 que o Accent Glow do thumb e a aura leem), a varredura
   do Automatic (um número de 0 a 1 que a luz dentro do thumb lê) e as duas
   bordas da aura (em px além do trilho, com transição). Os dois de runtime
   são os mesmos nomes em qualquer peça que os escreva. */
@property --nash-switch-accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}

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

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

@property --nash-switch-breath {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --nash-switch-scan {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --nash-switch-halo-inner {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --nash-switch-halo-outer {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* ---------- tempo e curva ----------
   Os tempos das quatro peças anteriores, com os mesmos valores, mais o laço
   do Automatic (2,4s). */
.nash-switch {
  --nash-switch-ease: var(--nash-curva-saida, cubic-bezier(0.16, 1, 0.3, 1));
  --nash-switch-duration-press: calc(var(--nash-dur-pressao, 100ms) * var(--nash-switch-time-scale, var(--nash-escala, 1)));
  --nash-switch-duration-release: calc(var(--nash-dur-solta, 160ms) * var(--nash-switch-time-scale, var(--nash-escala, 1)));
  --nash-switch-duration-color: calc(var(--nash-dur-micro, 140ms) * var(--nash-switch-time-scale, var(--nash-escala, 1)));
  --nash-switch-duration-state: calc(var(--nash-dur-estado, 180ms) * var(--nash-switch-time-scale, var(--nash-escala, 1)));
  --nash-switch-duration-ring: calc(var(--nash-dur-brilho, 260ms) * var(--nash-switch-time-scale, var(--nash-escala, 1)));
  --nash-switch-duration-spotlight: calc(var(--nash-dur-brilho, 260ms) * var(--nash-switch-time-scale, var(--nash-escala, 1)));
  --nash-switch-duration-spotlight-follow: calc(70ms * var(--nash-switch-time-scale, var(--nash-escala, 1)));
  --nash-switch-duration-glow: calc(320ms * var(--nash-switch-time-scale, var(--nash-escala, 1)));
  --nash-switch-delay-glow: calc(120ms * var(--nash-switch-time-scale, var(--nash-escala, 1)));
  --nash-switch-duration-enter: calc(420ms * var(--nash-switch-time-scale, var(--nash-escala, 1)));
  --nash-switch-duration-aura: calc(420ms * var(--nash-switch-time-scale, var(--nash-escala, 1)));
  --nash-switch-duration-fade: calc(600ms * var(--nash-switch-time-scale, var(--nash-escala, 1)));
  --nash-switch-loop-breathe: calc(1800ms * var(--nash-switch-time-scale, var(--nash-escala, 1)));
  --nash-switch-loop-scan: calc(2400ms * var(--nash-switch-time-scale, var(--nash-escala, 1)));
}

/* ---------- cor ----------
   Sem data-mode, o accent do kit (--accent: branco, ou o vermelho imperial
   com data-accent="imperio"), herdado. Com data-mode, um dos cinco modos do
   Figma, a mesma tabela das quatro irmãs. O halo é o accent a 48%, o Accent
   Glow — o mesmo número que o Figma anota no thumb. */
:root {
  --nash-switch-accent: var(--accent, #ffffff);
}

.nash-switch {
  --nash-switch-halo: color-mix(in srgb, var(--nash-switch-accent) 48%, transparent);
  --nash-switch-spotlight-alpha: 12%;
}

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

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

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

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

/* ---------- o stroke por dentro ----------
   O anel de 1,5px das quatro peças e da .nash-surface: dois gradientes, o
   content-box tira o miolo e sobra a borda. Aqui ele mora no trilho. */
.nash-switch-track::before,
.nash-switch-track::after,
.nash-switch-spotlight::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;
}

/* ---------- a casca ----------
   O <label> (ou o <button role="switch">) que segura o trilho e o rótulo:
   44 de alto no mínimo, a área de toque que a descrição do Figma pede, com
   o trilho de 24 no meio. O checkbox nativo fica dentro, invisível e
   focável. A geometria é do Figma, em tokens da peça: a página que precisa
   de outra densidade escreve --nash-switch-track-width, -track-height e
   -thumb-size, e a viagem (--nash-switch-travel, o --nash-curso do kit)
   se recalcula. */
.nash-switch {
  --nash-switch-travel: calc(var(--nash-switch-track-width, 48px) - var(--nash-switch-thumb-size, 20px) - 2 * var(--nash-switch-thumb-inset, 2px));
  --nash-switch-halo-reach: calc(var(--nash-switch-track-height, 24px) / 2);
  --nash-switch-stretch: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--nash-e2, 12px);
  box-sizing: border-box;
  min-height: var(--nash-alvo-solto, 44px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  color: var(--text, #e8e8ea);
  font: inherit;
  font-size: var(--nash-t3, 13px);
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-app-region: no-drag;
  transition: --nash-switch-accent var(--nash-switch-duration-ring) var(--nash-switch-ease);
}

.nash-switch > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.nash-switch:focus-visible {
  outline: none;
}

/* ---------- o trilho ----------
   48 × 24 em pílula, a placa de vidro. A respiração já existe aqui,
   parada: ligado ela roda, e ao desligar pausa onde está em vez de ser
   removida — nada salta de volta a zero. A entrada com `backwards`, nunca
   `both`: lição do trilho do nav. */
.nash-switch-track {
  position: relative;
  isolation: isolate;
  flex: none;
  box-sizing: border-box;
  width: var(--nash-switch-track-width, 48px);
  height: var(--nash-switch-track-height, 24px);
  border-radius: var(--nash-r-pill, 999px);
  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));
  transition: background-color var(--nash-switch-duration-state) var(--nash-switch-ease);
  animation:
    nash-switch-enter var(--nash-switch-duration-enter) var(--nash-switch-ease) backwards,
    nash-switch-breathe var(--nash-switch-loop-breathe) ease-in-out calc(var(--nash-switch-delay-glow) + var(--nash-switch-duration-glow)) infinite;
  animation-play-state: running, paused;
}

/* Dois anéis: branco (Off e Automatic) e accent (ligado, foco pelo
   teclado). */
.nash-switch-track::before {
  z-index: 0;
  opacity: 1;
  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)
  );
  transition: opacity var(--nash-switch-duration-state) var(--nash-switch-ease);
}

.nash-switch-track::after {
  z-index: 0;
  opacity: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nash-switch-accent) 45%, transparent),
    color-mix(in srgb, var(--nash-switch-accent) 18%, transparent) 40%,
    color-mix(in srgb, var(--nash-switch-accent) 6%, transparent) 70%,
    transparent
  );
  transition:
    opacity var(--nash-switch-duration-ring) var(--nash-switch-ease),
    background var(--nash-switch-duration-ring) var(--nash-switch-ease);
}

/* ---------- o thumb ----------
   20, a 2 da borda: o knob do Figma, fundido em branco 11% com a borda de
   0,5. Viaja --nash-switch-travel (24) em 180 pela curva de saída. A
   pressão o alonga 15% na direção do gesto (--nash-switch-stretch, em
   100; solta em 160): desligado cresce pra direita, ligado pra esquerda.
   Ligado toma o accent com o Accent Glow; Automatic se estica até o trilho
   inteiro. As seis transições, nesta ordem: a viagem, a largura, a
   ancoragem da pressão, a cor, o brilho, a borda. */
.nash-switch-thumb {
  position: absolute;
  z-index: 1;
  top: var(--nash-switch-thumb-inset, 2px);
  left: var(--nash-switch-thumb-inset, 2px);
  box-sizing: border-box;
  width: calc(var(--nash-switch-thumb-size, 20px) * (1 + var(--nash-switch-stretch)));
  height: var(--nash-switch-thumb-size, 20px);
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--nash-r-pill, 999px);
  background-color: rgba(255, 255, 255, 0.11);
  box-shadow:
    0 0 0 0 transparent,
    0 0 0 0 transparent;
  overflow: hidden;
  pointer-events: none;
  transition:
    transform var(--nash-switch-duration-state) var(--nash-switch-ease),
    width var(--nash-switch-duration-release) var(--nash-switch-ease),
    left var(--nash-switch-duration-release) var(--nash-switch-ease),
    background-color var(--nash-switch-duration-color) var(--nash-switch-ease),
    box-shadow var(--nash-switch-duration-glow) var(--nash-switch-ease),
    border-color var(--nash-switch-duration-color) var(--nash-switch-ease);
}

/* A luz que percorre o thumb no Automatic: uma névoa do accent a 28%, meio
   thumb de largura, cuja posição é um número registrado (--nash-switch-scan,
   de 15% a 85% do thumb e de volta, em 2,4s). Existe em repouso, apagada e
   parada; Automatic a acende e a solta. */
.nash-switch-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(
    50% 140% at calc(15% + 70% * var(--nash-switch-scan)) 50%,
    color-mix(in srgb, var(--nash-switch-accent) 28%, transparent),
    transparent 70%
  );
  transition: opacity var(--nash-switch-duration-ring) var(--nash-switch-ease);
  animation: nash-switch-scan var(--nash-switch-loop-scan) ease-in-out infinite;
  animation-play-state: paused;
}

/* ---------- o rótulo ----------
   O texto à direita do trilho, opcional; herda o tipo da casca (t3, 13) e
   toma o accent em 140 quando o interruptor liga. Por cima da aura. */
.nash-switch-label {
  position: relative;
  z-index: 1;
  transition: color var(--nash-switch-duration-color) var(--nash-switch-ease);
}

/* ---------- hover ----------
   Placa #1F2128 a 40% no trilho. Não se aplica ao interruptor ligado nem
   ao Automatic, que têm placa própria: o Figma não define Hover sobre On.
   Nem apertado: a pressão tem a dela. */
.nash-switch:is(:hover, [data-state='hover']):not(:active):not([data-state='pressed']):not(:disabled):not([aria-disabled='true']):not([aria-checked='true']):not([aria-checked='mixed']):not(:has(> input:checked)):not(:has(> input:indeterminate)) .nash-switch-track {
  background-color: var(--nash-placa-hover, rgba(31, 33, 40, 0.4));
}

/* ---------- a luz do cursor ----------
   A das quatro peças, em proporção da altura do trilho: névoa de 2,4
   alturas no accent a 12% e o anel aceso no ponto mais próximo do ponteiro
   (1,4 altura, accent 70%). Segue em 70ms, apaga em 260. O ponteiro sobre o
   rótulo também acende: a luz aponta pra borda mais perto. */
.nash-switch-spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    calc(var(--nash-switch-track-height, 24px) * 2.4) circle at var(--nash-runtime-spotlight-x) var(--nash-runtime-spotlight-y),
    color-mix(in srgb, var(--nash-switch-accent) var(--nash-switch-spotlight-alpha), transparent),
    transparent 70%
  );
  transition:
    opacity var(--nash-switch-duration-spotlight) var(--nash-switch-ease),
    --nash-runtime-spotlight-x var(--nash-switch-duration-spotlight-follow) linear,
    --nash-runtime-spotlight-y var(--nash-switch-duration-spotlight-follow) linear;
}

.nash-switch-spotlight::before {
  background: radial-gradient(
    calc(var(--nash-switch-track-height, 24px) * 1.4) circle at var(--nash-runtime-spotlight-x) var(--nash-runtime-spotlight-y),
    color-mix(in srgb, var(--nash-switch-accent) 70%, transparent),
    transparent 70%
  );
}

.nash-switch:hover:not([data-state]):not(:disabled):not([aria-disabled='true']) .nash-switch-spotlight {
  opacity: 1;
}

/* ---------- pressão ----------
   O Figma não desenha Pressed; a peça o define como as irmãs: placa
   #080A0D a 32% no trilho, e o thumb alonga 15% na direção do gesto em
   100ms (solta em 160). A luz do cursor sobe a 24%. */
.nash-switch:is(:active, [data-state='pressed']):not(:disabled):not([aria-disabled='true']) {
  --nash-switch-stretch: 0.15;
  --nash-switch-spotlight-alpha: 24%;
}

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

.nash-switch:active:not([data-state]):not(:disabled):not([aria-disabled='true']) .nash-switch-thumb {
  transition-duration:
    var(--nash-switch-duration-state),
    var(--nash-switch-duration-press),
    var(--nash-switch-duration-press),
    var(--nash-switch-duration-color),
    var(--nash-switch-duration-glow),
    var(--nash-switch-duration-color);
}

/* ---------- foco pelo teclado ----------
   No checkbox nativo (Tab chega nele, invisível) ou no botão: o outline e o
   anel de accent, no trilho. */
.nash-switch:is(:focus-visible, :has(> input:focus-visible)) .nash-switch-track {
  outline: 2px solid var(--nash-switch-accent);
  outline-offset: 2px;
}

.nash-switch:is(:focus-visible, :has(> input:focus-visible)) .nash-switch-track::after {
  opacity: 1;
}

/* ---------- a aura ----------
   A luz larga em volta do trilho, num elemento próprio (i.nash-switch-halo)
   que segue o contorno da pílula — a técnica do Button. É uma sombra do
   accent a 48% num elemento sem fundo: a borda de dentro é o tamanho do
   elemento (--nash-switch-halo-inner, além do trilho) e a borda de fora é
   o desfoque (--nash-switch-halo-outer). Ligar abre a borda de fora (0 →
   meio trilho, 12px, em 420, depois dos 120 do brilho); desligar move a
   borda de dentro (0 → 12 em 600) enquanto a opacidade cai: a luz é comida
   de dentro pra fora e não some de uma vez. A borda de fora volta a zero só
   quando o apagar termina (transição de 0s com atraso). Respira com o mesmo
   número do Accent Glow, 3% de scale. */
.nash-switch-halo {
  --nash-switch-halo-inner: var(--nash-switch-halo-reach);
  --nash-switch-halo-outer: 0px;
  position: absolute;
  inset: calc(-1 * var(--nash-switch-halo-inner));
  z-index: 0;
  border-radius: var(--nash-r-pill, 999px);
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 max(0px, calc(var(--nash-switch-halo-outer) - var(--nash-switch-halo-inner))) 0 color-mix(in srgb, var(--nash-switch-accent) 48%, transparent);
  transition:
    opacity var(--nash-switch-duration-fade) ease-in-out,
    transform var(--nash-switch-duration-fade) var(--nash-switch-ease),
    --nash-switch-halo-inner var(--nash-switch-duration-fade) ease-in-out,
    --nash-switch-halo-outer 0s linear var(--nash-switch-duration-fade);
}

/* ---------- ligado (aria-checked="true" ou :checked) ----------
   O thumb viaja 24 em 180 pela curva de saída e toma o accent em 140; o
   trilho vai à placa apertada com o accent a 12% (o filete do Figma) em
   180; o anel branco apaga em 180 e o de accent acende em 260; o rótulo
   toma o accent em 140. O Accent Glow do thumb espera 120 e vai 0 → 22px a
   70% → 16px a 48% em 320 (a curva do ponto da aba), com uma onda que se
   abre da borda a 10px e apaga; a aura se abre do trilho até meio trilho
   além em 420. Total: 540ms. Depois, ligado, respira: --nash-switch-breath
   vai de 0 a 1 e volta em 1,8s, e dele derivam o Accent Glow (16 → 22px,
   48 → 60%) e a aura (scale 1 → 1,03), sem transição neles enquanto ligado,
   pra seguirem o número no mesmo quadro. Desligar: thumb, placa, anéis, cor
   e rótulo voltam nos tempos de sempre; o Accent Glow apaga em 320; a aura
   é comida de dentro pra fora em 600; a respiração pausa onde está. */
.nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))) {
  --nash-switch-spotlight-alpha: 18%;
}

.nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))) .nash-switch-track {
  background-color: color-mix(in srgb, var(--nash-switch-accent) 12%, var(--nash-placa-pressed, rgba(8, 10, 13, 0.32)));
  animation-play-state: running, running;
}

.nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))) .nash-switch-track::before {
  opacity: 0;
}

.nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))) .nash-switch-track::after {
  opacity: 1;
}

.nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))) .nash-switch-thumb {
  left: calc(var(--nash-switch-thumb-inset, 2px) - var(--nash-switch-thumb-size, 20px) * var(--nash-switch-stretch));
  transform: translateX(var(--nash-switch-travel));
  background-color: var(--nash-switch-accent);
  box-shadow:
    0 0 calc(16px + 6px * var(--nash-switch-breath)) 0 color-mix(in srgb, var(--nash-switch-accent) calc(48% + 12% * var(--nash-switch-breath)), transparent),
    0 0 0 0 transparent;
  /* box-shadow sem transição enquanto ligado: o brilho segue a respiração
     no mesmo quadro, sem o atraso que uma transição imporia a um valor
     herdado animado. O apagar usa a transição do repouso. */
  transition-duration:
    var(--nash-switch-duration-state),
    var(--nash-switch-duration-release),
    var(--nash-switch-duration-release),
    var(--nash-switch-duration-color),
    0s,
    var(--nash-switch-duration-color);
  animation: nash-switch-glow var(--nash-switch-duration-glow) var(--nash-switch-ease) var(--nash-switch-delay-glow) backwards;
}

.nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))):active:not([data-state]) .nash-switch-thumb {
  transition-duration:
    var(--nash-switch-duration-state),
    var(--nash-switch-duration-press),
    var(--nash-switch-duration-press),
    var(--nash-switch-duration-color),
    0s,
    var(--nash-switch-duration-color);
}

.nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))) .nash-switch-label {
  color: var(--nash-switch-accent);
}

.nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))) .nash-switch-halo {
  --nash-switch-halo-inner: 0px;
  --nash-switch-halo-outer: var(--nash-switch-halo-reach);
  opacity: 1;
  transform: scale(calc(1 + 0.03 * var(--nash-switch-breath)));
  transition:
    opacity var(--nash-switch-duration-aura) var(--nash-switch-ease) var(--nash-switch-delay-glow),
    transform 0s,
    --nash-switch-halo-inner 0s,
    --nash-switch-halo-outer var(--nash-switch-duration-aura) var(--nash-switch-ease) var(--nash-switch-delay-glow);
}

/* ---------- automático (aria-checked="mixed" ou :indeterminate) ----------
   O Automatic do Figma: o thumb se estica até o trilho inteiro (44 × 20,
   ocupa os dois lados de uma vez) em 180, fundido em branco 11%, com o
   Accent Glow a 20px e o brilho branco 30% por baixo (0 5 13,75); o trilho
   toma o accent a 26% sobre a placa apertada; o anel branco fica. Enquanto
   Automatic, a luz percorre o thumb de um lado ao outro e volta, em 2,4s —
   um laço lento, preso ao estado, que pausa onde está ao sair. A pressão
   encolhe o thumb 15% de cada lado. */
.nash-switch:is([aria-checked='mixed'], :has(> input:indeterminate)) {
  --nash-switch-spotlight-alpha: 18%;
}

.nash-switch:is([aria-checked='mixed'], :has(> input:indeterminate)) .nash-switch-track {
  background-color: color-mix(in srgb, var(--nash-switch-accent) 26%, var(--nash-placa-pressed, rgba(8, 10, 13, 0.32)));
}

.nash-switch:is([aria-checked='mixed'], :has(> input:indeterminate)) .nash-switch-thumb {
  left: calc(var(--nash-switch-thumb-inset, 2px) + var(--nash-switch-thumb-size, 20px) * var(--nash-switch-stretch));
  width: calc(100% - 2 * var(--nash-switch-thumb-inset, 2px) - 2 * var(--nash-switch-thumb-size, 20px) * var(--nash-switch-stretch));
  transform: none;
  box-shadow:
    0 0 20px 0 color-mix(in srgb, var(--nash-switch-accent) 48%, transparent),
    0 5px 13.75px 0 rgba(255, 255, 255, 0.3);
}

.nash-switch:is([aria-checked='mixed'], :has(> input:indeterminate)) .nash-switch-thumb::before {
  opacity: 1;
  animation-play-state: running;
}

.nash-switch:is([aria-checked='mixed'], :has(> input:indeterminate)) .nash-switch-label {
  color: var(--nash-switch-accent);
}

/* ---------- desabilitado ---------- */
.nash-switch:is(:disabled, [aria-disabled='true'], :has(> input:disabled)) {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- as variantes congeladas ----------
   data-state="default|hover|pressed", pra documentação; pointer-events:
   none pra não mudarem com o cursor; sem entrada, brilho ou laço. */
.nash-switch[data-state] {
  pointer-events: none;
}

.nash-switch[data-state] .nash-switch-track,
.nash-switch[data-state] .nash-switch-thumb,
.nash-switch[data-state] .nash-switch-thumb::before {
  animation: none;
}

/* ---------- quadros ---------- */
@keyframes nash-switch-glow {
  0% {
    box-shadow:
      0 0 0 0 transparent,
      0 0 0 0 color-mix(in srgb, var(--nash-switch-accent) 45%, transparent);
  }

  45% {
    box-shadow:
      0 0 22px 0 color-mix(in srgb, var(--nash-switch-accent) 70%, transparent),
      0 0 0 6px color-mix(in srgb, var(--nash-switch-accent) 22%, transparent);
  }

  100% {
    box-shadow:
      0 0 16px 0 var(--nash-switch-halo),
      0 0 0 10px transparent;
  }
}

@keyframes nash-switch-breathe {
  0%,
  100% {
    --nash-switch-breath: 0;
  }

  50% {
    --nash-switch-breath: 1;
  }
}

@keyframes nash-switch-scan {
  0%,
  100% {
    --nash-switch-scan: 0;
  }

  50% {
    --nash-switch-scan: 1;
  }
}

@keyframes nash-switch-enter {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

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

/* ---------- movimento reduzido ----------
   Cor, opacidade e a viagem do thumb em 100ms; sem alongar, respirar, onda
   ou varredura; a aura é só opacidade, com as bordas paradas. Vale por
   prefers-reduced-motion e por [data-motion="reduced"] num ancestral. */
@media (prefers-reduced-motion: reduce) {
  .nash-switch-track,
  .nash-switch-thumb,
  .nash-switch-thumb::before {
    animation: none;
  }

  .nash-switch,
  .nash-switch-track,
  .nash-switch-track::before,
  .nash-switch-track::after,
  .nash-switch-thumb,
  .nash-switch-thumb::before,
  .nash-switch-label,
  .nash-switch-spotlight,
  .nash-switch-halo,
  .nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))) .nash-switch-thumb,
  .nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))):active:not([data-state]) .nash-switch-thumb,
  .nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))) .nash-switch-halo {
    transition-duration: 100ms;
    transition-delay: 0s;
  }

  .nash-switch-halo {
    --nash-switch-halo-inner: 0px;
    --nash-switch-halo-outer: var(--nash-switch-halo-reach);
  }

  .nash-switch:is(:active, [data-state='pressed']) {
    --nash-switch-stretch: 0;
  }

  .nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))) .nash-switch-halo {
    transform: none;
  }
}

[data-motion='reduced'] .nash-switch-track,
[data-motion='reduced'] .nash-switch-thumb,
[data-motion='reduced'] .nash-switch-thumb::before {
  animation: none;
}

[data-motion='reduced'] .nash-switch,
[data-motion='reduced'] .nash-switch-track,
[data-motion='reduced'] .nash-switch-track::before,
[data-motion='reduced'] .nash-switch-track::after,
[data-motion='reduced'] .nash-switch-thumb,
[data-motion='reduced'] .nash-switch-thumb::before,
[data-motion='reduced'] .nash-switch-label,
[data-motion='reduced'] .nash-switch-spotlight,
[data-motion='reduced'] .nash-switch-halo,
[data-motion='reduced'] .nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))) .nash-switch-thumb,
[data-motion='reduced'] .nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))):active:not([data-state]) .nash-switch-thumb,
[data-motion='reduced'] .nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))) .nash-switch-halo {
  transition-duration: 100ms;
  transition-delay: 0s;
}

[data-motion='reduced'] .nash-switch-halo {
  --nash-switch-halo-inner: 0px;
  --nash-switch-halo-outer: var(--nash-switch-halo-reach);
}

[data-motion='reduced'] .nash-switch:is(:active, [data-state='pressed']) {
  --nash-switch-stretch: 0;
}

[data-motion='reduced'] .nash-switch:is([aria-checked='true'], :has(> input:checked:not(:indeterminate))) .nash-switch-halo {
  transform: none;
}

/* ---------- o modo claro ----------
   Sobre data-tema="claro", os degraus de branco viram os mesmos degraus de
   tinta (#14140F): o rótulo, o anel e o thumb em repouso. */
:root[data-tema='claro'] .nash-switch {
  color: #14140f;
}

:root[data-tema='claro'] .nash-switch-track::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)
  );
}

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