/*
  Wortic macOS UI Kit — Auth / Entrar sem senha (magic link)
  wm-auth-magic-link — pedir o link, "confira seu e-mail" com o endereço
  mascarado, link expirado e a abertura em aparelho diferente do que pediu.

  REGRA DE DESENHO (a mesma de auth-login, pedido do Will): CARTÃO CENTRADO,
  NUNCA janela macOS. Sem traffic lights, sem barra de título.

  ┌─ AS DUAS REGRAS DE SEGURANÇA QUE MANDAM AQUI ───────────────────────┐
  │ 1. NUNCA confirmar se um e-mail tem conta. Entrar por link é ainda   │
  │    mais sensível que recuperar senha: aqui o formulário É a porta,   │
  │    e responder "não achamos essa conta" entrega a base inteira para  │
  │    quem estiver testando endereços. A frase é a mesma nos dois casos.│
  │                                                                       │
  │ 2. Link aberto em OUTRO aparelho não entra direto. O link vai por    │
  │    e-mail, e e-mail é encaminhável: quem recebeu o encaminhamento    │
  │    não é quem pediu. Por isso existe a frase de segurança — as três  │
  │    palavras que aparecem no aparelho que PEDIU e precisam bater com  │
  │    as que aparecem no aparelho que ABRIU.                            │
  └──────────────────────────────────────────────────────────────────────┘

  Reutiliza wm-loading-circle no estado "verificando" em vez de inventar
  outro spinner.

  Só tokens: nenhuma medida ou cor literal fora de rgba() de sombra.
*/

@layer components {
  /* ---------- palco opcional ---------- */
  .wm-auth-magic-link-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: var(--wm-space-12) var(--wm-space-8);
    background: var(--wm-surface-base);
  }

  /* ---------- o cartão ---------- */
  .wm-auth-magic-link {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-8);
    width: 100%;
    max-width: var(--wm-auth-card-width);
    padding: var(--wm-space-11) var(--wm-space-10);
    border-radius: var(--wm-radius-panel);
    background: var(--wm-surface-elevated);
    box-shadow:
      inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator),
      var(--wm-shadow-panel);
  }
  .wm-auth-magic-link--wide {
    max-width: var(--wm-auth-card-width-wide);
  }

  /* ---------- cabeçalho ---------- */
  .wm-auth-magic-link__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wm-space-3);
    text-align: center;
  }
  .wm-auth-magic-link__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-auth-mark-size);
    height: var(--wm-auth-mark-size);
    margin-bottom: var(--wm-space-2);
  }
  .wm-auth-magic-link__mark img,
  .wm-auth-magic-link__mark svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* Selo redondo do estado. Decoração: o título ao lado diz o mesmo em
     palavras, e por isso ele é aria-hidden. */
  .wm-auth-magic-link__figure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-state-figure-size);
    height: var(--wm-state-figure-size);
    margin-bottom: var(--wm-space-2);
    border-radius: var(--wm-radius-pill);
    color: var(--wm-accent);
    background: var(--wm-accent-fill);
  }
  .wm-auth-magic-link__figure .wm-icon {
    width: var(--wm-state-glyph-size);
    height: var(--wm-state-glyph-size);
  }
  .wm-auth-magic-link__figure--alerta {
    color: var(--wm-warning);
    background: var(--wm-warning-fill);
  }
  .wm-auth-magic-link__figure--atencao {
    color: var(--wm-error);
    background: var(--wm-error-fill);
  }
  .wm-auth-magic-link__title {
    margin: 0;
    font-size: var(--wm-font-size-title1);
    line-height: var(--wm-leading-title1);
    letter-spacing: var(--wm-tracking-title1);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
  }
  .wm-auth-magic-link__subtitle {
    margin: 0;
    font-size: var(--wm-font-size-body);
    line-height: var(--wm-line-height-normal);
    letter-spacing: var(--wm-tracking-body);
    color: var(--wm-label-secondary);
    text-wrap: pretty;
  }

  /* ---------- o endereço mascarado ---------- */
  /* Ele fica em bloco próprio, e não solto no meio da frase, porque é a
     ÚNICA informação que a pessoa precisa conferir nesta tela: foi para o
     endereço certo? Mascarado, ele confirma para quem digitou sem entregar
     nada para quem estiver olhando a tela por cima do ombro. */
  .wm-auth-magic-link__address {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wm-space-4);
    margin: 0;
    padding: var(--wm-space-6);
    border-radius: var(--wm-radius-md);
    font-size: var(--wm-font-size-headline);
    line-height: var(--wm-leading-headline);
    letter-spacing: var(--wm-tracking-headline);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
    background: var(--wm-fill-quaternary);
    box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
    overflow-wrap: anywhere;
  }
  .wm-auth-magic-link__address .wm-icon {
    flex: none;
    color: var(--wm-label-tertiary);
  }

  /* ---------- a mensagem que não entrega quem tem conta ---------- */
  .wm-auth-magic-link__neutral {
    display: flex;
    align-items: start;
    gap: var(--wm-space-4);
    margin: 0;
    padding: var(--wm-space-6);
    border-radius: var(--wm-radius-md);
    font-size: var(--wm-font-size-callout);
    line-height: var(--wm-leading-callout);
    letter-spacing: var(--wm-tracking-callout);
    color: var(--wm-label-secondary);
    background: var(--wm-fill-quaternary);
    box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
    text-wrap: pretty;
  }
  .wm-auth-magic-link__neutral .wm-icon {
    flex: none;
    width: var(--wm-icon-md);
    height: var(--wm-icon-md);
    margin-top: var(--wm-space-1);
    color: var(--wm-label-tertiary);
  }
  .wm-auth-magic-link__neutral-why {
    display: block;
    margin-top: var(--wm-space-2);
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-leading-caption);
    letter-spacing: var(--wm-tracking-caption);
    color: var(--wm-label-secondary);
  }

  /* ---------- alerta ---------- */
  .wm-auth-magic-link__alert {
    display: flex;
    align-items: start;
    gap: var(--wm-space-4);
    padding: var(--wm-space-5) var(--wm-space-6);
    border-radius: var(--wm-radius-md);
    font-size: var(--wm-font-size-callout);
    line-height: var(--wm-leading-callout);
    letter-spacing: var(--wm-tracking-callout);
    color: var(--wm-label-primary);
    background: var(--wm-warning-fill);
    box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
    text-wrap: pretty;
  }
  .wm-auth-magic-link__alert .wm-icon {
    flex: none;
    width: var(--wm-icon-md);
    height: var(--wm-icon-md);
    margin-top: var(--wm-space-1);
    color: var(--wm-warning);
  }
  .wm-auth-magic-link__alert[hidden] { display: none; }
  .wm-auth-magic-link__alert--erro {
    background: var(--wm-error-fill);
  }
  .wm-auth-magic-link__alert--erro .wm-icon {
    color: var(--wm-error);
  }

  /* ---------- campos ---------- */
  .wm-auth-magic-link__fields {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-8);
  }
  .wm-auth-magic-link .wm-field {
    height: var(--wm-control-height-lg);
  }
  .wm-auth-magic-link .wm-field-group__error[hidden] {
    display: none;
  }

  /* ---------- aparelho que pediu x aparelho que abriu ---------- */
  /* Duas linhas comparáveis, com o mesmo desenho, porque a decisão da
     pessoa é comparar: "eu estava mesmo no Chrome do Mac há 2 minutos?".
     Sem o lado de quem PEDIU, ela não tem com o que comparar. */
  .wm-auth-magic-link__devices {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .wm-auth-magic-link__device {
    display: flex;
    align-items: start;
    gap: var(--wm-space-5);
    padding: var(--wm-space-5) var(--wm-space-6);
    border-radius: var(--wm-radius-md);
    background: var(--wm-fill-quaternary);
    box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
  }
  .wm-auth-magic-link__device .wm-icon {
    flex: none;
    margin-top: var(--wm-space-1);
    color: var(--wm-label-tertiary);
  }
  .wm-auth-magic-link__device-body {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-1);
    min-width: 0;
  }
  .wm-auth-magic-link__device-role {
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-leading-caption);
    letter-spacing: var(--wm-tracking-caption);
    text-transform: uppercase;
    color: var(--wm-label-secondary);
  }
  .wm-auth-magic-link__device-name {
    font-size: var(--wm-font-size-callout);
    line-height: var(--wm-leading-callout);
    letter-spacing: var(--wm-tracking-callout);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
  }
  .wm-auth-magic-link__device-detail {
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-leading-caption);
    letter-spacing: var(--wm-tracking-caption);
    color: var(--wm-label-secondary);
  }
  /* O aparelho que abriu é o suspeito da vez: ele ganha a borda de aviso
     para a pessoa saber qual das duas linhas é "aqui e agora". */
  .wm-auth-magic-link__device--atual {
    background: var(--wm-warning-fill);
  }
  .wm-auth-magic-link__device--atual .wm-icon {
    color: var(--wm-warning);
  }

  /* ---------- frase de segurança ---------- */
  /* Três palavras, grandes e legíveis à distância: a pessoa vai comparar
     com outra tela, muitas vezes com o celular na mão. Palavra, e não
     código de seis dígitos, porque comparar "gato vidro lento" com um
     olhar é mais confiável do que comparar 481920. */
  .wm-auth-magic-link__phrase {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--wm-space-3);
    margin: 0;
    padding: var(--wm-space-8) var(--wm-space-6);
    border-radius: var(--wm-radius-md);
    background: var(--wm-accent-fill);
    box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
  }
  .wm-auth-magic-link__phrase-word {
    font-size: var(--wm-font-size-title3);
    line-height: var(--wm-leading-title3);
    letter-spacing: var(--wm-tracking-title3);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
  }
  .wm-auth-magic-link__phrase-dot {
    width: var(--wm-space-2);
    height: var(--wm-space-2);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-accent);
  }

  /* ---------- verificando ---------- */
  .wm-auth-magic-link__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wm-space-5);
  }

  /* ---------- reenviar com contagem ---------- */
  .wm-auth-magic-link__resend {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--wm-space-3);
    margin: 0;
    font-size: var(--wm-font-size-callout);
    line-height: var(--wm-leading-callout);
    letter-spacing: var(--wm-tracking-callout);
    color: var(--wm-label-secondary);
  }
  .wm-auth-magic-link__countdown {
    font-variant-numeric: tabular-nums;
    color: var(--wm-label-secondary);
  }
  .wm-auth-magic-link__countdown[hidden] { display: none; }
  /* Botão de texto desabilitado no meio de uma frase: a regra global
     .wm-button:disabled pinta fundo cinza e vira um bloco no meio da
     linha. Aqui ele só perde a cor de link. */
  .wm-auth-magic-link__resend .wm-button:disabled {
    background: transparent;
    box-shadow: none;
    color: var(--wm-label-secondary);
  }

  /* ---------- listas, ações e rodapé ---------- */
  .wm-auth-magic-link__steps {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-leading-caption);
    letter-spacing: var(--wm-tracking-caption);
    color: var(--wm-label-secondary);
  }
  .wm-auth-magic-link__step {
    display: flex;
    align-items: start;
    gap: var(--wm-space-3);
  }
  .wm-auth-magic-link__step .wm-icon {
    flex: none;
    width: var(--wm-icon-xs);
    height: var(--wm-icon-xs);
    margin-top: var(--wm-space-1);
    color: var(--wm-label-tertiary);
  }

  .wm-auth-magic-link__actions {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-4);
  }
  .wm-auth-magic-link__submit,
  .wm-auth-magic-link__action {
    width: 100%;
    height: var(--wm-control-height-xl);
  }
  .wm-auth-magic-link__submit[aria-busy="true"] {
    cursor: progress;
  }

  .wm-auth-magic-link__hint {
    margin: 0;
    text-align: center;
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-leading-caption);
    letter-spacing: var(--wm-tracking-caption);
    color: var(--wm-label-secondary);
    text-wrap: pretty;
  }
  .wm-auth-magic-link__foot {
    margin: 0;
    text-align: center;
    font-size: var(--wm-font-size-callout);
    line-height: var(--wm-leading-callout);
    letter-spacing: var(--wm-tracking-callout);
    color: var(--wm-label-secondary);
  }
  .wm-auth-magic-link__link {
    color: var(--wm-accent-text);
    font-size: var(--wm-font-size-subheadline);
    text-underline-offset: var(--wm-space-1);
  }
  .wm-auth-magic-link__foot .wm-auth-magic-link__link,
  .wm-auth-magic-link__resend .wm-auth-magic-link__link {
    font-size: inherit;
  }
  .wm-auth-magic-link__link:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    border-radius: var(--wm-radius-xs);
  }
  .wm-auth-magic-link__legal {
    margin: 0;
    text-align: center;
    font-size: var(--wm-font-size-caption2);
    line-height: var(--wm-leading-caption2);
    letter-spacing: var(--wm-tracking-caption2);
    color: var(--wm-label-secondary);
  }

  /* ---------- entrada suave ---------- */
  .wm-auth-magic-link {
    animation: wm-auth-magic-link-in var(--wm-duration-slow) var(--wm-ease-decelerate) both;
  }
  @keyframes wm-auth-magic-link-in {
    from { opacity: 0; transform: translateY(var(--wm-space-3)) scale(var(--wm-scale-pressed)); }
    to   { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-auth-magic-link { animation: none; }
  }

  /* Telas estreitas: o cartão vira a própria página. [--wm-bp-xs] */
  @media (max-width: 420px) {
    .wm-auth-magic-link-page {
      padding: var(--wm-space-9) var(--wm-space-6);
    }
    .wm-auth-magic-link {
      padding: var(--wm-space-10) var(--wm-space-8);
      box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
    }
    .wm-auth-magic-link__address {
      font-size: var(--wm-font-size-callout);
    }
  }
}