/* Modal de conta — a camada que substituiu a ida ao IAM no passo 3.

   Só forma, posição e estado. Cor, fonte e raio saem dos tokens de marca.css:
   redeclarar `#CAD766` aqui seria criar uma segunda fonte da verdade para a
   identidade, e o modo escuro — que troca o PAPEL das cores, não o valor —
   deixaria de valer justo na tela de login.

   Os campos usam `.field`, `.hint`, `.primary` e `.ghost` do funnel.css, que
   são os mesmos do resto do funil. É de propósito: o login é uma etapa do
   checkout, não uma visita a outro produto, e um formulário com estilo próprio
   aqui dentro faria parecer que a pessoa saiu do site — que é exatamente a
   sensação que este modal existe para evitar.

   Mora fora de funnel.css porque é um assunto fechado, do mesmo jeito que
   conta.js mora fora de app.js. */

/* Abaixo do chat (9000) de propósito: chat.css declara que o widget flutua
   sobre as camadas do funil, e contrariar isso aqui deixaria duas regras
   discordando sobre quem está na frente. Acima da galeria (80) porque as duas
   nunca abrem juntas, e se abrirem a conta é a que está sendo respondida. */
.mconta{position:fixed;inset:0;z-index:85;display:grid;place-items:center;
  padding:16px}
.mconta.hidden{display:none}

/* Véu: sombra, não tinta da marca — por isso é o único literal do arquivo, e é
   o mesmo da galeria para as duas camadas escurecerem a página igual. */
.mconta-fundo{position:absolute;inset:0;background:rgba(30,30,26,.82)}

/* Altura pelo CONTEÚDO, com teto e rolagem interna.
   Havia aqui uma altura fixa de 640px porque o quadro era um <iframe>
   cross-origin e ninguém sabia o tamanho dele. Com o formulário nesta página,
   medir virou trabalho do navegador — e uma caixa de 640px para dois campos
   deixaria um vão enorme embaixo do botão. */
.mconta-caixa{position:relative;display:flex;flex-direction:column;
  background:var(--superficie);border-radius:var(--r-cartao);
  box-shadow:var(--sombra-alta);padding:16px;
  width:min(440px,100%);max-height:92vh;overflow-y:auto}

.mconta-caixa header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mconta-caixa h2{font-family:var(--fonte-titulo);font-size:1.1rem;margin:0;
  flex:1;min-width:0;color:var(--tinta-forte)}
.mconta-caixa header .ghost{min-height:44px;min-width:44px;padding:6px 12px;
  flex:0 0 auto}

/* Coluna, e não a linha de `.field` do resto do funil: aqui os campos são
   poucos e longos (e-mail, senha), e lado a lado eles ficariam estreitos
   demais para o que se digita neles. */
.mconta-form{display:flex;flex-direction:column;gap:14px}
.mconta-form.hidden{display:none}
.mconta-form .field{flex:1 1 auto}
.mconta-form .primary{width:100%;min-height:48px;margin-top:2px}
.mconta-form .hint{margin:0}

/* Campo do app autenticador: nasce oculto e só aparece quando o IAM pede o
   fator forte. `display:none` e não `visibility` — um campo invisível mas
   focável é uma armadilha para quem navega por teclado. */
.mconta-form .field.hidden{display:none}

/* A troca entre entrar e criar conta. É um <button>, e não um <a>: não navega
   para lugar nenhum, e um link que não leva a um endereço confunde tanto o
   leitor de tela quanto o menu de contexto do navegador. O estilo o devolve à
   aparência de link porque é assim que a pessoa espera reconhecê-lo. */
.mconta-troca{margin:0;font-size:.87rem;color:var(--tinta-fraca);text-align:center}
.linkish{background:none;border:0;padding:2px 4px;margin:0;font:inherit;
  color:var(--link);text-decoration:underline;cursor:pointer;
  border-radius:var(--r-botao)}
.linkish:hover{color:var(--acao-forte)}
.linkish:focus-visible{outline:2px solid var(--acao);outline-offset:2px}
.linkish:disabled{color:var(--tinta-fraca);text-decoration:none;cursor:default}

/* Saída de emergência. Nasce escondida: mostrá-la de cara ensinaria a pessoa a
   sair do fluxo antes mesmo de ele falhar. */
.mconta-escape{margin-top:14px;padding:12px 14px;border-radius:var(--r-botao);
  background:var(--superficie-2);border:1px solid var(--linha-forte)}
.mconta-escape.hidden{display:none}
.mconta-escape p{margin:0 0 10px;font-size:.85rem;color:var(--tinta);
  line-height:1.45}
.mconta-escape .primary{display:inline-flex;align-items:center;
  justify-content:center;min-height:44px;text-decoration:none}

/* `role="status"`: só ocupa espaço quando tem texto, senão abriria um vão vazio
   embaixo do formulário. */
.mconta-estado{margin:12px 0 0;font-size:.85rem;color:var(--tinta-fraca)}
.mconta-estado:empty{display:none}
.mconta-estado.ruim{color:var(--alerta)}

/* Convite para entrar, quando o CPF informado já é de um cliente.
   Âmbar e não vermelho: não é erro nem recusa — é uma oferta, e pintar de
   alarme faria a pessoa achar que a reserva travou. */
.conta-convite{margin:0 0 10px;padding:9px 12px;border-radius:var(--r-botao);
  background:var(--atencao-bg);border:1px solid var(--atencao);
  color:var(--tinta);font-size:.87rem;line-height:1.5}
.conta-convite.hidden{display:none}
.conta-convite b{font-weight:600}

/* Aviso de "entrou", no passo 3 e não no modal: quando ele aparece o modal já
   fechou, e a confirmação tem de ficar onde a pessoa voltou a olhar. */
.conta-aviso{margin:0 0 10px;padding:9px 12px;border-radius:var(--r-botao);
  background:var(--acao-lavada);border:1px solid var(--acao);
  color:var(--tinta);font-size:.87rem}
.conta-aviso.hidden{display:none}

/* Celular: a caixa ocupa a tela inteira. Um modal de login com margem lateral
   em 390px deixa o formulário espremido, e é ali que a pessoa digita e-mail,
   senha e o código que chega por e-mail.

   `100dvh` e não `100vh`: com a barra do navegador à mostra, `vh` mede a tela
   inteira e o botão de enviar fica logo abaixo do fim visível — a pessoa
   preenche tudo e não acha o botão. */
@media (max-width:520px){
  .mconta{padding:0;place-items:stretch}
  .mconta-caixa{width:100%;min-height:100dvh;max-height:none;border-radius:0;
    padding:14px}
}

/* Quem pediu menos movimento não leva a entrada do modal. O resto do funil já
   trata isso em funnel.css; esta regra existe porque conta.css pode ser
   carregado sem ele. */
@media (prefers-reduced-motion:no-preference){
  .mconta-caixa{animation:mconta-entra .16s ease-out}
}
@keyframes mconta-entra{from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}}