/*
  Wortic macOS UI Kit — Auth / Login
  wm-auth-login — entrar com e-mail e senha.

  REGRA DE DESENHO (pedido do Will, sem exceção): isto é um CARTÃO CENTRADO,
  NUNCA uma janela macOS. Nada de traffic lights, nada de barra de título.
  Dentro de site aquilo não minimiza, não maximiza e não faz sentido — só
  fica feio. O acabamento macOS vem do material, do raio e da tipografia,
  não da moldura de janela.

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

@layer components {
  /* ---------- palco opcional: centra o cartão na viewport ---------- */
  .wm-auth-login-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-login {
    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-login--wide {
    max-width: var(--wm-auth-card-width-wide);
  }

  /* ---------- cabeçalho: marca, título, subtítulo ---------- */
  .wm-auth-login__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wm-space-3);
    text-align: center;
  }
  .wm-auth-login__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-login__mark img,
  .wm-auth-login__mark svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .wm-auth-login__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-login__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;
  }

  /* ---------- alerta de erro do formulário ---------- */
  .wm-auth-login__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-error-fill);
    box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
  }
  .wm-auth-login__alert .wm-icon {
    flex: none;
    width: var(--wm-icon-md);
    height: var(--wm-icon-md);
    margin-top: var(--wm-space-1);
    color: var(--wm-error);
  }
  .wm-auth-login__alert[hidden] { display: none; }

  /* ---------- campos ---------- */
  .wm-auth-login__fields {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-8);
  }
  /* rótulo à esquerda, "esqueci a senha" à direita, na mesma linha */
  .wm-auth-login__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wm-space-4);
  }
  .wm-auth-login .wm-field {
    height: var(--wm-control-height-lg);
  }

  /* text-field.css declara .wm-field-group__error { display: flex }, e regra
     de autor ganha do [hidden] da folha do navegador — sem esta linha o
     parágrafo de erro fica visível (vazio) desde o carregamento. */
  .wm-auth-login .wm-field-group__error[hidden] {
    display: none;
  }

  /* olho de mostrar/ocultar senha */
  .wm-auth-login__reveal {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wm-control-height-sm);
    height: var(--wm-control-height-sm);
    margin-inline-end: var(--wm-space-3);
    border: none;
    border-radius: var(--wm-radius-xs);
    color: var(--wm-label-tertiary);
    background: transparent;
    cursor: pointer;
    transition: color var(--wm-duration-fast) var(--wm-ease-standard),
      background var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-auth-login__reveal:hover {
    color: var(--wm-label-primary);
    background: var(--wm-fill-secondary);
  }
  .wm-auth-login__reveal:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
  }
  .wm-auth-login__reveal .wm-icon {
    width: var(--wm-icon-sm);
    height: var(--wm-icon-sm);
  }

  /* ---------- linha "lembrar de mim" ---------- */
  .wm-auth-login__remember {
    margin-top: calc(var(--wm-space-4) * -1);
  }
  .wm-auth-login__remember .wm-checkbox__label {
    font-size: var(--wm-font-size-callout);
    color: var(--wm-label-secondary);
  }

  /* ---------- submit ---------- */
  .wm-auth-login__submit {
    width: 100%;
    height: var(--wm-control-height-xl);
  }
  /* Enquanto envia: largura travada e rótulo trocado pelo JS, para o
     botão não "pular" de tamanho no meio do clique. */
  .wm-auth-login__submit[aria-busy="true"] {
    cursor: progress;
  }

  /* ---------- divisor "ou" ---------- */
  .wm-auth-login__divider {
    display: flex;
    align-items: center;
    gap: var(--wm-space-5);
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-leading-subheadline);
    letter-spacing: var(--wm-tracking-subheadline);
    color: var(--wm-label-tertiary);
  }
  .wm-auth-login__divider::before,
  .wm-auth-login__divider::after {
    content: "";
    flex: 1 1 auto;
    height: var(--wm-border-width-hairline);
    background: var(--wm-separator);
  }

  /* ---------- provedores sociais ---------- */
  .wm-auth-login__providers {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-4);
  }
  .wm-auth-login__providers--row {
    flex-direction: row;
  }
  .wm-auth-login__provider {
    width: 100%;
    height: var(--wm-control-height-xl);
    justify-content: center;
    gap: var(--wm-space-5);
  }
  .wm-auth-login__provider svg {
    flex: none;
    width: var(--wm-auth-provider-icon);
    height: var(--wm-auth-provider-icon);
  }
  /* Em linha, só o símbolo cabe — o nome vira aria-label */
  .wm-auth-login__providers--row .wm-auth-login__provider {
    gap: 0;
  }

  /* ---------- rodapé ---------- */
  .wm-auth-login__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-login__link {
    color: var(--wm-accent-text);
    font-size: var(--wm-font-size-subheadline);
    text-underline-offset: var(--wm-space-1);
  }
  .wm-auth-login__foot .wm-auth-login__link {
    font-size: inherit;
  }
  .wm-auth-login__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);
  }

  /* Aviso legal miúdo (termos, privacidade) */
  .wm-auth-login__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-tertiary);
  }
  .wm-auth-login__legal a {
    color: var(--wm-label-secondary);
  }

  /* ---------- entrada suave do cartão ---------- */
  .wm-auth-login {
    animation: wm-auth-login-in var(--wm-duration-slow) var(--wm-ease-decelerate) both;
  }
  @keyframes wm-auth-login-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-login { animation: none; }
    .wm-auth-login__reveal { transition: none; }
  }

  /* Telas estreitas: o cartão perde a moldura e vira a própria página,
     sem sombra flutuando em cima da borda do aparelho. [--wm-bp-xs] */
  @media (max-width: 420px) {
    .wm-auth-login-page {
      padding: var(--wm-space-9) var(--wm-space-6);
    }
    .wm-auth-login {
      padding: var(--wm-space-10) var(--wm-space-8);
      box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
    }
  }
}