/* ===========================================================================
   Telas de entrada: login.html, register.html, waitlist.html, entrar.html.

   Elas sao a primeira coisa que aparece depois do "Criar conta" da landing.
   A direcao do cartaz e' a do produto inteiro e mora em base.css -- esta folha
   nao pinta paleta nenhuma. O que e' so' daqui e' a COMPOSICAO: o cartaz
   grande atras, o veu por cima dele e o formulario flutuando no meio.

   O formulario e' um MODAL sobre esse cartaz: o cartaz continua atras, com um
   veu por cima, e o cartao flutua no meio. Assim entrar nao parece sair do
   site para outra tela -- parece uma caixa que abre em cima dele.

   Tres camadas, e a ordem entre elas e' o que faz a composicao:

     .auth-fundo          o cartaz (decorativo, aria-hidden)          z: auto
     .auth .register-screen   o veu + o cartao                        z: 50
     .auth-topo           a marca, unica coisa acima do veu           z: 60
     body::after          o grao do papel (base.css), por cima de tudo z: 2000

   A regra do verde continua valendo: ele so' aparece no ponto de "ao vivo" e
   no botao que conclui a acao -- o interruptor com que a landing fecha. E
   nada aqui ganha brilho colorido nem sombra desfocada: no cartaz nada
   desfoca, e quem separa o modal do fundo e' o veu, nao uma sombra.
   =========================================================================== */

body.auth {
  /* A paleta, a tipografia, o grao do papel e a folga de registro sao globais
     (base.css): estas telas nao repintam nada, so' ajustam o que e' delas.

     Duas medidas de folga, a do modal e a do botao dentro dele -- a mesma
     nidificacao do bloco final da landing. A do painel e' a global. */
  --auth-folga: var(--folga);
  --auth-gutter: clamp(1.25rem, 4vw, 2.75rem);

  /* O botao vazado daqui e' vazado mesmo: a pilula translucida que o app usa
     em botao secundario competiria com o cartao dentro do veu. */
  --color-secondary: transparent;
  --color-secondary-hover: rgba(231, 235, 226, 0.10);
}

/* --- A marca --------------------------------------------------------------
   Fica fixa e acima do veu: e' a unica coisa do site que continua nitida com
   o modal aberto, e e' por ela que se sai daqui de volta para a landing. Sem
   barra nem borda -- uma barra solida por cima do veu viraria um segundo
   plano competindo com o cartao. */

.auth-topo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  padding: clamp(1.1rem, 3vw, 1.75rem) var(--auth-gutter);
}

.auth-marca {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: inherit;
  text-decoration: none;
}

.auth-marca img {
  width: 2.15rem;
  height: 2.15rem;
  flex: none;
}

.auth-marca span {
  font-family: var(--font-sans);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .015em;
  text-transform: uppercase;
}

/* --- O cartaz, atras do veu ----------------------------------------------
   Mesma faixa e mesma tipografia do heroi da landing. Ele nao e' lido por
   leitor de tela (aria-hidden no HTML): e' o fundo da pagina, e o conteudo
   de verdade e' o formulario que esta' por cima. */

/* Fixo e recortado, e nao um bloco no fluxo: solto, o titulo em 8rem deixava
   a pagina mais alta que a janela, e o fundo rolava por tras do modal --
   modal com pagina rolando atras e' exatamente o defeito que ele nao pode
   ter. Assim a unica coisa que rola e' o proprio modal, quando o cartao nao
   cabe. O padding lateral faz o papel da faixa da landing (mesmos 1180px de
   miolo) sem precisar de mais um elemento no HTML. */
.auth-fundo {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: grid;
  align-content: center;
  padding-block: clamp(6rem, 16vh, 9rem) clamp(3rem, 8vh, 5rem);
  padding-inline: max(var(--auth-gutter), calc((100vw - 1180px) / 2));
}

.auth-olho {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tinta-70);
}

/* O unico verde da tela fora do botao, e a unica coisa que emite luz nela. */
.auth-ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 4px rgba(74, 236, 125, .22);
  animation: auth-pulsa 2s ease-in-out infinite;
}

@keyframes auth-pulsa {
  0%, 100% { box-shadow: 0 0 0 4px rgba(74, 236, 125, .22); }
  50%      { box-shadow: 0 0 0 8px rgba(74, 236, 125, 0); }
}

/* E' tipo de cartaz, nao estrutura do documento: o h1 da pagina e' o titulo do
   formulario (Entrar, Criar conta), e um h2 antes dele so' bagunca a ordem dos
   cabecalhos. Por isso e' um <p>. */
.auth-titulo {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(2.3rem, 7.6vw, 5.9rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

/* As quebras sao as do heroi da landing, e sao escritas no HTML em vez de
   sairem de um max-width: e' a mesma frase, entao o recorte da direita
   tambem tem que ser o mesmo -- e nao um que muda de forma a cada largura de
   janela. */
.auth-titulo span {
  display: block;
}

/* Marca de corte do cartaz. Vem de padding + border, e nao de um ::after
   posicionado: com line-height .82 o glifo transborda a caixa da linha, entao
   qualquer offset medido a partir do fundo dela cai por cima da letra. */
.auth-titulo .auth-risco {
  display: inline-block;
  padding-bottom: .16em;
  border-bottom: .075em solid var(--roxo);
}

.auth-lide {
  margin: clamp(1.5rem, 4vw, 2rem) 0 0;
  max-width: 34ch;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.55;
  color: var(--tinta-70);
}

/* --- O modal --------------------------------------------------------------
   Cada `.screen` de passo vira uma camada de modal inteira (veu + cartao).
   Sao varias em register.html e waitlist.html, mas `showStep()` deixa uma so'
   visivel por vez, entao nunca ha dois veus empilhados -- e como o veu e' o
   mesmo tom em todas, trocar de passo nao pisca o fundo.

   `align-items: flex-start` + `margin: auto` no cartao, e nao `center`: com
   `center` um cartao mais alto que a janela (celular baixo, passo com muitos
   campos) tem o topo cortado e a rolagem nao alcanca. Com margem automatica
   ele centra quando cabe e comeca do topo quando nao cabe. */

.auth .screen {
  min-height: 0;
}

.auth .register-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: clamp(5.5rem, 14vh, 7.5rem) var(--auth-gutter) clamp(1.5rem, 5vh, 3rem);
  background: rgba(11, 15, 12, .74);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.auth .card {
  width: 400px;
  margin: auto;
  padding: clamp(1.75rem, 5vw, 2.5rem);
  /* O cartao do app e' chapado; este flutua, entao ganha a borda de tinta e a
     folga de registro -- a mesma gramatica do `.primary`, uma medida acima. */
  border: 2.5px solid var(--tinta);
  box-shadow: var(--auth-folga) var(--auth-folga) 0 var(--roxo);
  animation: auth-abre .32s cubic-bezier(.2, .7, .3, 1) both;
}

/* Cada passo do cadastro troca qual `.card` esta no ar (`.hidden` e'
   display:none), e a animacao recomeca junto -- e' de graca e e' o que faz o
   fluxo de dois passos parecer um fluxo, e nao a mesma tela piscando. */
@keyframes auth-abre {
  from { opacity: 0; transform: translateY(.6rem) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* A maiuscula pesada ja' vem de base.css; aqui so' a escala do cartaz. */
.auth .card h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(1.8rem, 6.5vw, 2.3rem);
}

/* Rotulo de campo em maiuscula espacada, como todo rotulo utilitario da landing: ele e' a
   voz do produto (o que a caixa espera), nao texto de leitura. */
.auth .card label {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-70);
}

.auth .card input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']) {
  border-width: 2px;
  /* O campo mora dentro do <label>, e input herda fonte (base.css). Sem
     devolver a tipografia de corpo aqui, o que a pessoa digita sairia em
     caixa alta espacada, como o rotulo. */
  font-family: var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
  color: var(--tinta);
}

.auth .card input::placeholder {
  color: var(--tinta-45);
}

/* O foco vai para o roxo, e nao para o verde de base.css: campo em foco nao e'
   estado ao vivo nem acao concluida, que sao os dois donos do verde. O halo
   sai de --control-ring, la em cima. */
.auth .card input:focus {
  border-color: var(--roxo);
}

/* --- Botoes ---------------------------------------------------------------
   O botao e' o `.btn` da landing: verde chapado com borda de tinta e a folga
   de registro roxa saindo por baixo. O hover nao acende nada -- so' encosta o
   papel no registro, que e' o mesmo movimento de la. */

.auth .card button,
.auth .card .button-link {
  border: 2.5px solid var(--tinta);
  border-radius: 14px;
  box-shadow: var(--folga-btn) var(--folga-btn) 0 var(--roxo);
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform .15s ease-out, box-shadow .15s ease-out,
    background var(--transition-fast);
}

/* `.button-link` e' um <a>, e sem cor propria ele cai no azul (ou no roxo de
   visitado) do navegador -- foi o que aconteceu com o "Ja tenho conta" da
   waitlist. Quem tem `.primary` traz a sua cor no verde, entao a heranca so'
   vale para o botao vazado. */
.auth .card .button-link:not(.primary) {
  color: inherit;
}

.auth .card button:hover:not(:disabled),
.auth .card .button-link:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--roxo);
}

.auth .card button:active:not(:disabled) {
  transform: translate(var(--folga-btn), var(--folga-btn));
  box-shadow: 0 0 0 var(--roxo);
}

/* Enquanto a requisicao corre o botao fica `disabled`: encostado no registro,
   como um botao apertado. Sem isto ele continuava levantado do papel, com
   cara de que ainda dava para apertar de novo. */
.auth .card button:disabled {
  transform: translate(var(--folga-btn), var(--folga-btn));
  box-shadow: none;
}

/* --- Texto de apoio ------------------------------------------------------- */

.auth .divider {
  margin: 1.5rem 0;
  font-family: var(--font-sans);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-45);
}

.auth .divider::before,
.auth .divider::after {
  height: 2px;
}

.auth .form-error {
  font-size: .82rem;
  line-height: 1.5;
}

/* O link dentro do erro e' montado em JS (login.js/register.js, o caso do
   convite) e sem cor propria cairia no azul do navegador dentro de uma frase
   vermelha. */
.auth .form-error a {
  color: inherit;
  text-underline-offset: 3px;
}

/* --- Breakpoint ----------------------------------------------------------
   Um so'. Do 600 para cima o cartaz cabe inteiro atras do modal e a folga de
   registro pode crescer -- e' a mesma medida da sala na landing, o objeto que
   flutua na frente. No estreito ela encolhe: 12px de folga comem largura que
   o cartao precisa. */

@media (min-width: 600px) {
  body.auth {
    --auth-folga: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-ponto { animation: none; }
  .auth .card { animation: none; }
}

@media (pointer: coarse) {
  /* A marca volta para a landing: o espaco clicavel precisa acompanhar o
     dedo, mesmo que o desenho da marca continue com a mesma altura. */
  .auth-marca {
    min-height: 40px;
  }

  /* Os links legais e de cadastro eram apenas a altura das letras. O
     padding vertical num inline aumenta a area de toque sem mudar a linha:
     virar caixa empurrava a pontuacao seguinte para uma linha sozinha. */
  .auth .form-hint a {
    padding-block: 0.7rem;
  }
}