/*
 * LAYOUT DE AUTENTICAÇÃO
 * Telas do Devise (login, cadastro, recuperação). Card centralizado,
 * largura limitada, foco na tarefa. Vive dentro do .app-container.
 */

.auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Centraliza na altura da viewport, descontando o padding do
     .app-container (space-6 em cima e embaixo). Garante o card no meio. */
  min-height: calc(100vh - var(--space-6) * 2);
}

.auth__card {
  width: 100%;
  max-width: 24rem;
}

/* Seletor de tema flutuante no canto superior direito das telas de login/
   cadastro/recuperação — escolher o tema antes de entrar. */
.auth__theme {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: var(--z-raised);
}

/* Marca do produto acima do título do card: ícone + nome + tagline, centrados. */
.auth__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.auth__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-5);
  text-align: center;
}

/* Botão de envio ocupa a largura toda do card. */
.auth__submit {
  width: 100%;
  margin-top: var(--space-2);
}

/* Rodapé com links (esqueci senha, criar conta, ações de exceção). */
.auth__links {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
  font-size: var(--text-sm);
}

/* "Não tem conta? Criar uma conta": pergunta discreta + link em destaque. */
.auth__cta {
  color: var(--color-text-muted);
}

.auth__cta a {
  font-weight: var(--weight-medium);
}

/* Ações de exceção (desbloquear / reenviar confirmação): menores e discretas,
   separadas do bloco principal. */
.auth__help {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* "Manter conectado": checkbox + texto na mesma linha. */
.auth__remember {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.auth__remember input {
  width: auto;
}

/* Aceite de Política/Termos no cadastro: checkbox + texto alinhados ao topo
   (o texto quebra em duas linhas), à esquerda. */
.auth__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.45;
}

.auth__consent input {
  width: auto;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

/*
 * SPLIT-SCREEN (login, cadastro e telas de exceção)
 * Painel-vitrine à esquerda (mini-dashboard ilustrativo, sempre-dark) e
 * formulário à direita, compartilhado por todas as telas do Devise.
 */

.auth-split {
  display: grid;
  grid-template-columns: 1fr;
  /* Mesma altura útil do .auth: viewport menos o padding do .app-container.
     dvh: no mobile, vh fixo ignora a barra do navegador. */
  min-height: calc(100dvh - var(--space-6) * 2);
}

@media (min-width: 768px) {
  .auth-split {
    /* Painel proporcional (5/12 da largura, piso 24rem) em vez de coluna
       fixa — acompanha de laptop a ultrawide. */
    grid-template-columns: minmax(24rem, 5fr) 7fr;
  }
}

/* Painel de marca: mini-dashboard ilustrativo do produto se vendendo. A cena
   (graphite + glows no escuro, canvas névoa no claro) vem de
   .product-demo-scene (55_product-demo.css) — compartilhada com o hero e o
   CTA da landing; os textos do painel acompanham via vars por tema. */
.auth-split__panel {
  --auth-panel-text: var(--gray-100);
  --auth-panel-muted: var(--gray-400);

  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  /* Padding escala com a viewport: compacto no notebook, generoso no desktop. */
  padding: clamp(var(--space-5), 3.5vw, var(--space-7));
  border-radius: var(--radius-lg);
  /* Preso à viewport: o painel nunca cresce além da tela (o form ao lado pode
     rolar; a vitrine fica inteira à vista, sem cortar o rodapé). */
  position: sticky;
  top: var(--space-6);
  max-height: calc(100dvh - var(--space-6) * 2);
  overflow: hidden;
}

/* Na cena clara, os textos do painel usam os tokens do tema. */
[data-theme="light"] .auth-split__panel {
  --auth-panel-text: var(--color-text);
  --auth-panel-muted: var(--color-text-muted);
}

.auth-split__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.auth-split__mark {
  width: 3rem;
  height: 3rem;
}

.auth-split__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

/* Corpo centralizado verticalmente entre a marca (topo) e o rodapé (base) via
   margem automática no eixo principal do flex column. */
.auth-split__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: auto 0;
}

.auth-split__headline {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.15;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  max-width: 20ch;
  /* Explícito: o seletor global de heading (02_base) pintaria com
     --color-text do tema — no claro, quase-preto sobre o painel dark. */
  color: var(--auth-panel-text);
}

.auth-split__headline em {
  font-style: normal;
  color: var(--brand-teal-2);
}

/* Na cena clara o teal claro não tem contraste (~2.3:1 mesmo em texto
   grande); cai para o acento petróleo do tema. */
[data-theme="light"] .auth-split__headline em {
  color: var(--color-accent);
}

.auth-split__sub {
  color: var(--auth-panel-muted);
  font-size: var(--text-sm);
  max-width: 42ch;
}

/* Lado do formulário: reaproveita o card centrado, agora dentro da coluna. */
.auth-split__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.auth-split__form-inner {
  width: 100%;
  max-width: 22rem;
}

/* Mobile: painel some — o mini-dashboard não cabe numa faixa curta; o
   formulário ocupa a tela toda. */
@media (max-width: 767.98px) {
  .auth-split__panel {
    display: none;
  }
}

/* Responsividade por ALTURA: o painel é preso à viewport (sticky+max-height),
   então em telas baixas o conteúdo cede em camadas — primeiro o card
   flutuante, depois a vitrine inteira — e o texto de venda nunca corta.
   ESCOPADO ao painel do auth: na landing a página rola normalmente e a
   vitrine deve aparecer em qualquer altura de tela. */
@media (max-height: 760px) {
  .auth-split__panel .product-demo__float {
    display: none;
  }
}

@media (max-height: 640px) {
  .auth-split__panel .product-demo {
    display: none;
  }

  .auth-split__panel {
    gap: var(--space-4);
  }

  .auth-split__headline {
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  }
}