/*
  Wortic macOS UI Kit — Text Field
  wm-field — envelope para <input>/<textarea> de texto, busca, senha,
  número, url, email — a variação vem do atributo `type`, não de classes.
  Fundo branco, ring hairline, leve inset de contato no topo e focus ring
  duplo (borda accent sólida + halo alpha).
*/

@layer components {
  .wm-field {
    --_ring: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.14));
    --_inset: inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));

    position: relative;
    display: flex;
    align-items: center;
    height: var(--wm-control-height-md);
    border-radius: var(--wm-radius-sm);
    border: none;
    /* fallback para engines sem light-dark() */
    background: var(--wm-surface-primary);
    background: light-dark(#ffffff, rgba(255, 255, 255, 0.06));
    box-shadow: var(--_ring), var(--_inset);
    transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
      background var(--wm-duration-fast) var(--wm-ease-standard);
  }

  .wm-field:hover:not(:has(.wm-field__input:disabled)):not(:has(.wm-field__input:focus-visible)) {
    --_ring: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.24), rgba(255, 255, 255, 0.2));
  }

  .wm-field:has(.wm-field__input:focus-visible) {
    box-shadow: 0 0 0 1px var(--wm-accent), var(--_inset), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }

  /* Disabled trabalhado: sem opacity genérica */
  .wm-field:has(.wm-field__input:disabled) {
    background: var(--wm-fill-quaternary);
    box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
  }
  .wm-field__input:disabled {
    color: var(--wm-label-tertiary);
    cursor: not-allowed;
  }

  .wm-field--invalid {
    --_ring: 0 0 0 1px var(--wm-error);
  }
  .wm-field--invalid:has(.wm-field__input:focus-visible) {
    box-shadow: 0 0 0 1px var(--wm-error), var(--_inset), 0 0 0 var(--wm-focus-halo-width) var(--wm-error-fill);
  }

  .wm-field__icon {
    flex: none;
    color: var(--wm-label-tertiary);
    margin-inline-start: var(--wm-space-5);
  }

  .wm-field__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding-inline: var(--wm-space-5);
    border: none;
    background: transparent;
    font-family: var(--wm-font-family);
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-primary);
    outline: none;
    caret-color: var(--wm-accent);
  }
  .wm-field:has(.wm-field__icon) .wm-field__input {
    padding-inline-start: var(--wm-space-3);
  }
  .wm-field__input[type="number"] {
    font-variant-numeric: tabular-nums;
  }

  .wm-field__input::placeholder {
    color: var(--wm-label-tertiary);
  }

  /* DOIS "X" AO MESMO TEMPO (08/08/2026, achado renderizando o gerador no
     Chromium, claro e escuro). Assim que um input[type="search"] tem valor,
     o Chromium desenha o ::-webkit-search-cancel-button dele. Com o
     .wm-field__clear do kit ao lado, o campo de busca preenchido mostrava
     DOIS botões de limpar colados — um preto do navegador e o círculo cinza
     do kit. É o mesmo defeito de ícone duplicado que o Will achou no botão
     de revelar senha da tela de login.
     Quem limpa é o botão do kit: ele é <button> de verdade, tem aria-label
     e para no Tab. O :has garante que o botão nativo só some quando existe
     um substituto — campo de busca sem .wm-field__clear continua com o dele. */
  .wm-field:has(.wm-field__clear) .wm-field__input[type="search"]::-webkit-search-cancel-button,
  .wm-field:has(.wm-field__clear) .wm-field__input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
  }

  .wm-field__clear {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-inline-end: var(--wm-space-4);
    border-radius: 50%;
    color: var(--wm-label-tertiary);
    background: var(--wm-fill-secondary);
    cursor: pointer;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard),
      color var(--wm-duration-fast) var(--wm-ease-standard),
      transform var(--wm-duration-fast) var(--wm-ease-emphasized);
  }
  .wm-field__clear:hover {
    background: var(--wm-fill-primary);
    color: var(--wm-label-primary);
  }
  .wm-field__clear:active {
    transform: scale(0.9);
  }

  /* O afixo é DADO, não enfeite: "kg", "%", "/mês", "https://" mudam o
     sentido do número ao lado. Medido no Chromium em 11px com
     --wm-label-tertiary: 2.52:1 no claro e 3.45:1 no escuro — reprovado nos
     dois, e o contrato do kit pede 4.5:1 abaixo de 18px. */
  .wm-field__affix {
    flex: none;
    padding-inline: var(--wm-space-4);
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-secondary);
    border-inline-start: 1px solid light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.08));
    height: 100%;
    display: inline-flex;
    align-items: center;
  }
  .wm-field__prefix {
    border-inline-start: none;
    border-inline-end: 1px solid light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.08));
  }

  .wm-field--small {
    height: var(--wm-control-height-sm);
    border-radius: var(--wm-radius-xs);
  }
  .wm-field--small .wm-field__input {
    font-size: var(--wm-font-size-subheadline);
  }

  /* Text area */
  .wm-textarea {
    display: block;
    width: 100%;
    min-height: 88px;
    padding: var(--wm-space-5) var(--wm-space-5);
    border-radius: var(--wm-radius-sm);
    border: none;
    background: var(--wm-surface-primary);
    background: light-dark(#ffffff, rgba(255, 255, 255, 0.06));
    box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.14)),
      inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
    color: var(--wm-label-primary);
    font-family: var(--wm-font-family);
    font-size: var(--wm-font-size-body);
    line-height: var(--wm-line-height-relaxed);
    caret-color: var(--wm-accent);
    resize: vertical;
    outline: none;
    transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
      background var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-textarea:focus-visible {
    box-shadow: 0 0 0 1px var(--wm-accent),
      inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3)),
      0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }
  .wm-textarea:disabled {
    background: var(--wm-fill-quaternary);
    box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
    color: var(--wm-label-tertiary);
    cursor: not-allowed;
    resize: none;
  }

  /* Scrollbar fina no overflow interno da textarea */
  .wm-textarea::-webkit-scrollbar {
    width: 8px;
  }
  .wm-textarea::-webkit-scrollbar-thumb {
    background: var(--wm-scrollbar-thumb);
    border-radius: var(--wm-radius-pill);
    background-clip: padding-box;
    border: 2px solid transparent;
  }
  .wm-textarea::-webkit-scrollbar-thumb:hover {
    background-color: var(--wm-scrollbar-thumb-hover);
  }

  /* Field group (label + helper/error) */
  .wm-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
  }
  .wm-field-group__label {
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
    letter-spacing: var(--wm-letter-spacing-tight);
    color: var(--wm-label-primary);
  }
  /* A linha de ajuda existe para ser LIDA — é onde mora a regra do campo
     ("mínimo de 12 caracteres", "imutável depois de criado"). Em 10px com
     --wm-label-tertiary dava 2.52:1 / 3.45:1. */
  .wm-field-group__help {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-secondary);
  }
  .wm-field-group__error {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-error);
    display: flex;
    align-items: center;
    gap: var(--wm-space-2);
  }

  /* Token field */
  .wm-token-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wm-space-3);
    min-height: var(--wm-control-height-md);
    padding: var(--wm-space-2) var(--wm-space-4);
    border-radius: var(--wm-radius-sm);
    border: none;
    background: var(--wm-surface-primary);
    background: light-dark(#ffffff, rgba(255, 255, 255, 0.06));
    box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.14)),
      inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
    transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-token-field:focus-within {
    box-shadow: 0 0 0 1px var(--wm-accent),
      inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3)),
      0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }
  .wm-token-field__token {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
    height: 22px;
    padding-inline: var(--wm-space-4);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-accent-fill);
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--wm-accent) 22%, transparent);
    /* --wm-accent-text, não --wm-accent: no tema escuro o accent puro sobre a
       pílula de accent-fill dava 2.69:1. O token de TEXTO em accent existe
       exatamente para isso (é o mesmo motivo comentado em foundation/demo.css). */
    color: var(--wm-accent-text);
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
  }
  /* O raio existe pelo FOCO: sem ele o anel de :focus-visible saía quadrado
     por cima de uma ficha em formato de pílula, estourando as bordas dela.
     Visto no print ao andar de Tab pelo token field, nos dois temas. */
  .wm-token-field__token button {
    display: inline-flex;
    border-radius: var(--wm-radius-pill);
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
  }
  .wm-token-field__token button:hover {
    opacity: 1;
  }
  .wm-token-field__input {
    flex: 1 1 80px;
    min-width: 80px;
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-primary);
    caret-color: var(--wm-accent);
    height: 24px;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-field,
    .wm-textarea,
    .wm-token-field,
    .wm-field__clear {
      transition: none;
    }
    .wm-field__clear:active {
      transform: none;
    }
  }

  /* AUTOPREENCHIMENTO do Chrome (08/08/2026, achado pelo Will num print).
     O Chrome pinta o fundo do <input> com um amarelo/cinza próprio e ignora
     background:transparent. Como o ícone fica FORA da caixa do input, aparecia
     um degrau cinza entre o ícone e o texto — só no campo preenchido/focado.
     A única forma de vencer é box-shadow interno, que o Chrome respeita.
     A transição gigante impede o flash do amarelo no primeiro quadro. */
  .wm-field__input:-webkit-autofill,
  .wm-field__input:-webkit-autofill:hover,
  .wm-field__input:-webkit-autofill:focus,
  .wm-field__input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--wm-label-primary);
    -webkit-box-shadow: inset 0 0 0 1000px var(--wm-surface-primary);
    box-shadow: inset 0 0 0 1000px var(--wm-surface-primary);
    caret-color: var(--wm-label-primary);
    transition: background-color 9999s ease-in-out 0s;
  }
  /* O ícone acompanha o mesmo fundo, senão o degrau só muda de lugar. */
  .wm-field:has(.wm-field__input:-webkit-autofill) {
    background: var(--wm-surface-primary);
  }
}