/*
  Wortic macOS UI Kit — Focus Ring
  Foco de teclado precisa ser inequívoco. Nunca remover outline sem
  substituir por um :focus-visible claro.

  Anel duplo macOS: traço fino de accent (outline) + halo suave
  (box-shadow com accent translúcido). Componentes que definem o
  próprio box-shadow no layer components mantêm ao menos o outline.
*/

@layer base {
  :focus {
    outline: none;
  }

  .wm-focusable:focus-visible,
  [data-wm-focusable]:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    box-shadow: 0 0 0 var(--wm-focus-halo-width, 4px) var(--wm-accent-fill);
    border-radius: inherit;
  }

  /* Uso genérico: qualquer elemento interativo nativo herda o anel
     a menos que já implemente o seu próprio (ex: switch, slider). */
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    box-shadow: 0 0 0 var(--wm-focus-halo-width, 4px) var(--wm-accent-fill);
  }

  /* ------------------------------------------------------------------
     ENVELOPE MANDA NO FOCO — controle nativo encravado num bloco do kit
     NÃO desenha o próprio anel.

     Por quê (defeito real, 08/08/2026, apontado três vezes pelo Will na
     tela de login): o halo é uma sombra EXTERNA (box-shadow com spread).
     Num envelope como .wm-field o <input> só começa DEPOIS do ícone, e
     a borda esquerda dele fica ~24px para dentro do envelope. O halo
     então pintava --wm-accent-fill sobre o fundo BRANCO E OPACO do
     envelope, virando uma faixa vertical lavanda entre o ícone e o
     texto — visível só no foco, porque só no foco a regra acima casa.

     Quem sabe onde o anel vai é o envelope: ele conhece o ícone, o
     padding, o raio e a borda. O controle interno, não. Vale para
     .wm-field, .wm-search-bar, .wm-composer, .wm-combobox__control,
     .wm-tags-input__field, .wm-timepicker e qualquer envelope futuro —
     é estrutural, não uma lista de nomes.

     Componentes que precisem de sombra própria no controle sobrepõem
     isto naturalmente: @layer components vence @layer base.

     Escape hatch: controle solto dentro de um bloco wm- que ainda
     precise do anel genérico pede de volta com class="wm-focusable"
     (ou [data-wm-focusable]) — o :not() abaixo o preserva.
     ------------------------------------------------------------------ */
  :where([class*="wm-"])
    > :is(input, select, textarea):focus-visible:not(.wm-focusable):not(
      [data-wm-focusable]
    ) {
    outline: none;
    box-shadow: none;
  }
}