/* Telas de entrada (accounts). Cores vêm dos tokens de :root do app.css,
 * layout de formulário vem de pages.css — aqui só o que é específico do
 * split de duas colunas, do código de 6 dígitos e das saídas do passo 2. */

/* --- Shell de duas colunas, comum aos três passos --- */

.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100dvh - var(--header-height));
}

.auth-panel {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 6vw, 64px);
  background: var(--ink);
  color: #f8fbfa;
}

.auth-panel__statement {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  max-width: 21ch;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 720;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.auth-panel__sub {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 34ch;
  color: var(--on-ink-muted);
  font-size: 16px;
  line-height: 1.5;
}

/* Marca do catálogo em escala grande, só como textura de identidade —
   mesmo stroke da família de ícones do app, nunca uma imagem cenográfica. */
.auth-panel__mark {
  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 220px;
  height: 220px;
  color: var(--ochre);
  opacity: 0.16;
  pointer-events: none;
}

.auth-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  padding: clamp(28px, 5vw, 56px);
  background: var(--surface);
}

.auth-pane > * {
  width: 100%;
  max-width: 400px;
}

.auth-pane .page-header {
  margin: 0 0 8px;
}

/* Itens flex não colapsam margem — o gap acima já dá o ritmo entre blocos,
 * então a saída terciária ("Entrar com senha"/"Entrar por e-mail") só
 * precisa de um respiro extra em vez da margem do user-agent. */
.auth-pane > p {
  margin: 4px 0 0;
}

@media (max-width: 899px) {
  .auth-split {
    display: block;
    min-height: 0;
  }

  .auth-panel {
    padding: 20px;
    min-height: auto;
  }

  .auth-panel__statement {
    max-width: none;
    margin-bottom: 6px;
    font-size: 22px;
  }

  .auth-panel__sub {
    max-width: none;
    font-size: 14px;
  }

  .auth-panel__mark {
    display: none;
  }

  .auth-pane {
    padding: 24px 20px 48px;
  }

  .auth-pane > * {
    max-width: none;
  }
}

.stack-form input[name="code"] {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-align: center;
}

.stack-form-inline {
  display: flex;
  margin: 0;
}

/* Submit primário ocupa a coluna inteira — é a única ação que continua a
 * consulta, então precisa ser a caixa mais larga da tela, não a mais
 * estreita (largura do texto). Escopado a .auth-pane: bancada, marcadores
 * e diálogos mantêm .form-actions de largura de conteúdo. */
.auth-pane .form-actions .action-button {
  flex: 1;
  justify-content: center;
}

/* A4: reenviar (mesmo e-mail) e usar outro e-mail — duas saídas distintas,
 * pareadas em duas colunas iguais, sem colidir com o submit acima (era
 * margin negativa herdada do antigo .page-shell, que virou sobreposição
 * real ao migrar para o flex sem gap do .auth-pane). */
.auth-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.auth-secondary-actions form {
  margin: 0;
}

.auth-secondary-actions > * {
  flex: 1 1 140px;
  min-width: 0;
}

.auth-secondary-actions .action-button {
  width: 100%;
  justify-content: center;
}