/* A folha de rosto: as telas de entrar, cadastrar, esqueci a senha e criar uma
   senha nova — mais, por enquanto, o painel recém-aberto.
   =========================================================================

   O CONCEITO, de uma frase: uma coluna estreita no meio do breu, e o vazio em
   volta dela é o desenho. Não há cabeçalho, não há barra lateral, não há rodapé
   de três colunas; quem chega aqui tem uma coisa para fazer.

   A ÚNICA COISA MEMORÁVEL é o grão de ouro ao lado da palavra Garimpo — um
   losango de 7px, parado. É a única cor da tela, e a regra do padrão visual é
   um acento só, usado uma vez. Parado de propósito: ponto pulsando numa tela de
   login é confete, e o ponto que pulsa tem lugar marcado no painel, onde ele
   diz "coletando agora".

   Lê-se de cima para baixo nesta ordem, e ela não é gosto:
     1. a folha e a coluna
     2. a marca e o grão
     3. o cartão e os textos
     4. o formulário, o campo e o erro
     5. o botão e o estado de trabalhando
     6. o que vem depois (recado de pronto) e o pé da tela
     7. @media celular
     8. @media movimento reduzido

   Regra base escrita DEPOIS de uma `@media` sobrescreve a do celular na mesma
   especificidade — foi assim que um ☰ sumiu num painel da casa. Base primeiro,
   `@media` no fim, sempre.

   Nenhuma cor, duração ou curva literal aqui dentro: tudo sai de `tokens.css`.
   Há teste varrendo e falhando se aparecer. */

/* ------------------------------------------- 1. a folha e a coluna */

/* O respiro das beiradas vive AQUI, e não na coluna: é ele que garante que o
   cartão nunca encosta na borda do celular. Com o teto de largura da coluna
   (400px) e 16px de cada lado, em 390px o cartão fica com 358px — medido no
   print, não no olho. */
.folha {
  min-height: 100vh;
  /* `dvh` desconta a barra de endereço do celular, que `vh` ignora — sem ele a
     coluna nasce empurrada para baixo da dobra. A linha de `vh` fica como
     reserva para navegador que não conhece a unidade. */
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--spacing-56) var(--spacing-16);
}

.folha__coluna {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

/* A entrada, uma vez, ao abrir: marca, cartão e pé, nessa ordem, com o degrau
   de 40ms do `.surge` do base.css. É o único momento orquestrado da tela. */
.folha__marca {
  --i: 0;
}

.folha__cartao {
  --i: 1;
}

.folha__pe {
  --i: 2;
}

/* ---------------------------------------------- 2. a marca e o grão */

.folha__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-10);
  align-self: center;
  color: var(--color-paper);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-510);
  letter-spacing: var(--tracking-body-sm);
}

.folha__marca:hover {
  color: var(--color-bone);
}

/* O grão de ouro. Losango porque é a forma de uma lasca na bateia, e não um
   pontinho de notificação. Contraste medido (WCAG 2.1): 10,42:1 contra a tela
   `--color-void`. */
.grao {
  width: var(--spacing-7);
  height: var(--spacing-7);
  flex: none;
  background: var(--color-garimpo-ouro);
  border-radius: var(--radius-small);
  transform: rotate(45deg);
}

/* --------------------------------------- 3. o cartão e os textos */

/* O cartão vem do `.cartao` do base.css (carvão sobre breu, fio de 1px, raio de
   12px). Aqui só entra o que é desta tela. */
.folha__cartao {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

.folha__cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

/* O título sobe do degrau de painel (20px) para o do meio do sistema (24px).
   Medido no print: em 20px ele não se distinguia do resto e a tela ficava toda
   do mesmo tamanho, mudando só o peso — a primeira coisa reprovada. 24px é o
   mesmo degrau dos títulos de seção do site, então não é tamanho inventado. */
.folha__cabeca h1 {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}

.folha__linha {
  color: var(--color-fog);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-ui);
  max-width: none;
}

/* ------------------------------- 4. o formulário, o campo e o erro */

.folha__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.folha__campo {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

/* Rótulo à esquerda, atalho à direita, na mesma linha de base. É o que deixa
   "Esqueci a senha" perto do campo de senha sem virar um terceiro link solto no
   pé do cartão. */
.folha__rotulo-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
}

/* Link de serviço: fica quieto na névoa e acende no hover. O violeta do
   `--color-accent` é para link de texto corrido; aqui ele competiria com o
   botão. */
.elo-quieto {
  color: var(--color-fog);
  font-size: var(--text-12);
  letter-spacing: 0;
  transition: color var(--dur-hover) var(--ease-control);
}

.elo-quieto:hover {
  color: var(--color-hover-text);
}

.folha__dica {
  color: var(--color-fog);
  font-size: var(--text-12);
  letter-spacing: 0;
  max-width: none;
}

/* O erro de UM campo, no lugar dele. Ele nasce com `hidden` no HTML e aparece
   quando o servidor diz o que está errado — surgindo, porque é resposta a uma
   ação da pessoa, e movimento que mostra o que mudou é o movimento que serve.
   Contraste medido: 5,46:1 do `--color-delta-red` sobre o cartão. */
.erro {
  color: var(--color-delta-red);
  font-size: var(--text-12);
  letter-spacing: 0;
  max-width: none;
  animation: surge var(--dur-control) var(--ease-control) both;
}

/* O aceite dos termos. Caixa e texto na mesma linha, com o alvo de toque
   inteiro clicável pelo `<label>`. */
.folha__aceite {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-10);
  color: var(--color-mist);
  font-size: var(--text-12);
  letter-spacing: 0;
}

.folha__aceite input {
  flex: none;
  width: var(--spacing-16);
  height: var(--spacing-16);
  margin-top: var(--spacing-2);
  accent-color: var(--color-paper);
}

/* ------------------------- 5. o botão e o estado de trabalhando */

.folha__botao {
  width: 100%;
}

/* Trabalhando: o botão diz o que está fazendo ("Entrando…"), fica desligado, e
   os campos recuam um pouco — a tela inteira responde à ação, sem nenhum
   indicador girando. Quem não enxerga o recuo lê o `aria-busy`. */
.folha__form[aria-busy='true'] .campo {
  opacity: 0.6;
}

/* A cara do botão ocupado é declarada aqui porque, deixada por conta do
   navegador, ela sai errada: medido no print, o Chromium aplica a aparência
   nativa de controle desabilitado e o branco do botão perde quase 20% de
   opacidade, com a letra atenuada junto. Fica legível e parece QUEBRADO, não
   ocupado. (O valor medido não é escrito aqui porque a guarda de cor solta
   varre o arquivo inteiro e leria o comentário como código — a regra da casa é
   reescrever o comentário, não afrouxar a guarda.)

   A regra vale só com `aria-busy` ligado: o botão desligado por outro motivo
   — link de redefinição sem código, por exemplo — continua com o cinza apagado
   do base.css, que ali é a informação certa. */
.folha__form[aria-busy='true'] .folha__botao[disabled] {
  background: var(--color-mist);
  color: var(--color-void);
  cursor: progress;
}

/* O campo afunda no cartão. Medido no print: o véu de 2% do base.css sobre o
   carvão do cartão é quase invisível, e o campo sumia — tela sem presença é o
   que o padrão visual reprova. Aqui a profundidade vem de onde ela sempre vem
   neste sistema: troca de superfície (carvão do cartão -> breu do campo) e fio
   de 1px em grafite, não sombra embaixo.

   A rampa da opacidade entra SÓ no campo desta folha. Redeclarar `.campo`
   global aqui sobrescreveria, calado, o que o base.css diz do campo de todo o
   produto. */
.folha__form .campo {
  background: var(--surface-void);
  border-color: var(--color-graphite);
  transition:
    border-color var(--dur-control) var(--ease-control),
    opacity var(--dur-control) var(--ease-control);
}

/* --------------------------- 6. o que vem depois, e o pé da tela */

/* O recado de "pronto" toma o lugar do formulário em esqueci e em redefinir.
   Tela vazia depois de um envio é a pior resposta possível: ninguém sabe se
   funcionou. */
.folha__pronto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-12);
  color: var(--color-mist);
  font-size: var(--text-caption);
  animation: surge var(--dur-message) var(--ease-control) both;
}

/* Link nesta folha NÃO é violeta.
   O `--color-accent` é a cor de link do sistema e vale no texto corrido do
   site; aqui ele seria um segundo acento ao lado do ouro, e a regra é um só.
   Então: a ação alternativa (criar conta, entrar) vem em branco, da mesma
   família do botão principal, e o link de referência (política de dados) fica
   na névoa, sublinhado — sublinhado porque texto miúdo sem cor precisa de outra
   marca para continuar parecendo link. */
.folha__cartao a:not(.botao),
.folha__pe a {
  color: var(--color-mist);
  text-decoration: underline;
  text-underline-offset: var(--spacing-3);
  text-decoration-color: var(--color-smoke);
}

.folha__cartao a:not(.botao):hover,
.folha__pe a:hover {
  color: var(--color-paper);
  text-decoration-color: var(--color-fog);
}

/* O atalho ao lado do rótulo da senha é serviço, não leitura: fica sem
   sublinhado para não brigar com o campo logo abaixo. */
.folha__cartao a.elo-quieto {
  color: var(--color-fog);
  text-decoration: none;
}

.folha__cartao a.elo-quieto:hover {
  color: var(--color-hover-text);
}

.folha__pe {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  text-align: center;
}

.folha__troca {
  color: var(--color-fog);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-ui);
  max-width: none;
}

/* A ação alternativa da tela — a única coisa branca fora do botão. */
.folha__troca a {
  color: var(--color-paper);
  font-weight: var(--font-weight-510);
}

.folha__troca a:hover {
  color: var(--color-paper);
}

.folha__nota {
  color: var(--color-fog);
  font-size: var(--text-11);
  letter-spacing: 0;
  max-width: 46ch;
  margin: 0 auto;
}

/* ----------------------------------------------------- 7. celular */

@media (max-width: 640px) {
  /* Menos respiro em cima, o mesmo nas laterais: o cartão sobe na tela em vez
     de ficar centralizado com o teclado aberto por cima dele. */
  .folha {
    place-items: start center;
    padding: var(--spacing-32) var(--spacing-16) var(--spacing-48);
  }

  .folha__coluna {
    gap: var(--spacing-16);
  }

  /* O `.cartao` já cai para 16px de padding no base.css; aqui o cartão perde a
     moldura e passa a ser só a coluna, porque em 358px a borda come o que
     sobrava de respiro do campo. */
  .folha__cartao {
    gap: var(--spacing-16);
  }
}

/* ------------------------------------- 8. movimento reduzido */

/* Os seletores aqui são OS DESTA TELA — bloco longe do seletor que ele apaga é
   bloco que não apaga nada. A entrada escalonada e a barra de uso vêm do
   base.css e já têm o bloco delas lá; o que nasce neste arquivo se desliga
   neste arquivo.
   (Os nomes de classe do base.css não são escritos com ponto neste comentário
   de propósito: a guarda de animação varre o arquivo inteiro e leria o
   comentário como um seletor com animação solta. A regra da casa é reescrever o
   comentário, não afrouxar a guarda.) */
@media (prefers-reduced-motion: reduce) {
  .erro,
  .folha__pronto {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* `.folha__form .campo` tem especificidade maior que o `.campo` do bloco
     reduzido do base.css, então ele NÃO é desligado por lá. Quem acende a
     rampa, apaga. */
  .elo-quieto,
  .folha__form .campo {
    transition-duration: 0ms;
  }
}