/* A casca das paginas de entrada do Payflow: entrar e recuperar o acesso.
   Vive num ficheiro proprio porque as duas paginas a partilham -- duas copias
   acabariam por divergir. */

:root{
  --bg:#F3F3F1; --card:#FFFFFF; --card-2:#FAFAF9;
  --ink:#0A0A0A; --muted:#6A6A66; --muted-2:#91918C;
  --line:#E5E5E1; --line-2:#EFEFEC; --cruz:#C9C9C3;
  --accent:#7F3AED; --accent-hi:#6D28D9; --accent-soft:#F2EBFD;
  --ok:#1F8A5B; --ok-soft:#E4F2EB;
  --amber:#B87A0A; --amber-soft:#FBF0DC;
  --red:#D23A2E; --red-soft:#FAE7E5;
  --sans:"Google Sans",-apple-system,"Segoe UI",sans-serif;
  --num:"Space Grotesk",ui-monospace,monospace;
  --r:12px; --r-s:8px;
  --s1:8px; --s2:14px; --s3:22px; --s4:32px;
}

/* O atributo hidden do navegador vale display:none, mas perde para qualquer
   regra de display do autor -- e foi assim que tres formularios apareceram
   empilhados no mesmo ecra. Esta regra fecha essa porta de vez. */
[hidden]{display:none !important}

*{box-sizing:border-box}
body{margin:0; background:var(--card); color:var(--ink);
  font-family:var(--sans); font-optical-sizing:auto; font-variation-settings:"GRAD" 0;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased}

/* O logo da aplicacao. O ficheiro ja traz o roxo, o "F" e os cantos
   redondos: nao ha fundo nem ::after a desenhar um quadrado por baixo. */
.selo{width:30px; height:30px; flex:none;
  background:url("logo.png") center/contain no-repeat}

/* ---- as duas metades ---- */
.entrada{min-height:100svh; display:grid; grid-template-columns:1fr}
@media(min-width:940px){ .entrada{grid-template-columns:1.04fr .96fr} }

/* metade da marca */
.marca{position:relative; isolation:isolate; overflow:hidden; background:var(--ink); color:#FFF;
  padding:28px 26px 24px; display:flex; flex-direction:column; min-height:min(46svh,340px)}
@media(min-width:940px){ .marca{padding:46px 52px 40px; min-height:100svh} }
/* Os arcos sao fundo: ficam atras de tudo e fora do fluxo, senao empurram a
   marca para o meio da coluna. */
.arcos{position:absolute; z-index:-1; left:-190px; bottom:-240px; width:820px; height:820px; pointer-events:none}
.arcos circle{fill:none; stroke:var(--accent); stroke-width:1; opacity:.2}
.marca-topo{display:flex; align-items:center; gap:11px}
.marca-topo .selo{width:34px; height:34px}
/* O nome da aplicacao escreve-se em Google Sans normal, sem mais nada ao lado. */
.marca-topo b{font-weight:400; font-size:18px; display:block; line-height:1.15}
/* A medida do texto vivia aqui, em 17ch -- mas "ch" conta-se na letra deste
   bloco, que tem 15px: dava 130px e a frase partia-se a cada palavra. A medida
   passa para cada elemento, na sua propria letra, que e onde faz sentido.
   E o bloco centra-se entre a marca e o rodape com margens automaticas dos
   dois lados; so com margin-top:auto encostava-se ao fundo. */
.marca-dizer{margin:var(--s4) 0 auto}
@media(min-width:940px){ .marca-dizer{margin-block:auto} }
.marca-dizer .olho{font-family:var(--num); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:14px}
.marca-dizer h2{font-size:clamp(26px,3.5vw,38px); font-weight:700; letter-spacing:-.038em;
  line-height:1.13; margin:0; max-width:18ch; text-wrap:balance}
/* O browser parte a linha depois de um hifen, e "palavra-passe" ficava
   partida ao meio num titulo de tres palavras. */
.marca-dizer .junto{white-space:nowrap}
.marca-dizer p{margin:18px 0 0; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.6); max-width:36ch}
/* Sem margem por cima em ecra largo: quem reparte o espaco sao as margens
   automaticas do bloco do meio, e uma margem aqui somava-se so em baixo --
   o bloco ficava 32px acima do centro. Em ecra estreito nao ha reparticao
   nenhuma, e a margem faz falta. */
.marca-pe{font-size:12px; color:rgba(255,255,255,.28)}
@media(max-width:939px){ .marca-pe{margin-top:var(--s4)} }

/* metade do formulario */
.lado-form{display:grid; place-items:center; padding:38px 24px 48px; background:var(--card)}
@media(min-width:940px){ .lado-form{padding:48px 56px} }
.forma{width:100%; max-width:372px}
.forma h1{font-size:25px; font-weight:700; letter-spacing:-.035em; margin:0; line-height:1.2}
.forma .sub{margin:7px 0 0; font-size:14px; color:var(--muted)}
.campos{display:grid; gap:var(--s2); margin-top:var(--s3)}
.campo-g{display:grid; gap:6px}
.campo-g label{font-size:12.5px; font-weight:500; color:var(--muted)}
.campo-g input{width:100%; font:inherit; font-size:14.5px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--card-2); color:var(--ink)}
.campo-g input::placeholder{color:var(--muted-2)}
.campo-g input:focus{outline:none; border-color:var(--accent); background:var(--card);
  box-shadow:0 0 0 3px var(--accent-soft)}
.campo-g input[aria-invalid="true"]{border-color:var(--red)}
/* O campo media 14,5px. Abaixo de 16px o iPhone dá zoom sozinho ao tocar nele
   e fica com esse zoom na página seguinte -- era por isso que o Payflow abria
   ampliado depois de entrar. Nos ecrãs de toque mede 16px. */
@media(pointer:coarse){ .campo-g input{font-size:16px} }

.linha-op{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.lembrar{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); cursor:pointer}
.lembrar input{appearance:none; -webkit-appearance:none; width:17px; height:17px; flex:none; margin:0;
  border:1.5px solid var(--cruz); border-radius:5px; background:var(--card); cursor:pointer; position:relative}
.lembrar input:checked{background:var(--accent); border-color:var(--accent)}
.lembrar input:checked::after{content:""; position:absolute; left:5px; top:1.5px; width:4px; height:9px;
  border:solid #FFF; border-width:0 2px 2px 0; transform:rotate(43deg)}
.lembrar input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.btn{font:inherit; font-weight:500; font-size:14px; border:1px solid var(--line); border-radius:99px;
  padding:9px 18px; cursor:pointer; background:var(--card); color:var(--ink)}
.btn:hover{border-color:var(--cruz)}
.btn-p{background:var(--accent); color:#FFF; border-color:var(--accent); font-weight:700}
.btn-p:hover{background:var(--accent-hi); border-color:var(--accent-hi)}
.btn-largo{width:100%; padding:13px}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn:disabled{opacity:.45; cursor:not-allowed}

.elo{font:inherit; font-size:13.5px; color:var(--muted); background:none; border:0; padding:0;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.elo:hover{color:var(--accent)}
.elo.direita{margin-left:auto}

.nota{margin:var(--s3) 0 0; font-size:13px; color:var(--muted-2); text-align:center; line-height:1.6}
.nota b{color:var(--ink); font-weight:500}
.nota .elo{font-size:13px}
.erro{background:var(--red-soft); color:#8E2119; border-radius:var(--r-s); padding:11px 14px; font-size:13px}
.feito{background:var(--ok-soft); color:#14603F; border-radius:var(--r-s); padding:12px 15px; font-size:13.5px; line-height:1.55}
.voltar{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--muted);
  text-decoration:none; margin-bottom:var(--s3)}
.voltar:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ============================================================
   A RODA DE ESPERA

   Não é um GIF, de propósito. Um GIF é um pedido de rede a mais exactamente
   quando a rede está lenta -- ou seja, chega tarde precisamente nas vezes em que
   era preciso. Tem a cor cozida lá dentro, e aqui há tema claro e tema escuro.
   E fica serrado nos ecrãs bons. Isto faz o mesmo em oito linhas de CSS, herda a
   cor de quem a rodeia e é nítida em qualquer ecrã.

   O ATRASO É A PARTE QUE IMPORTA, e é ele que responde ao comentário que estava
   no ecrã de abertura: uma roda que aparece e desaparece em duzentos
   milissegundos é outro salto, e o salto era o que se andou a tirar. Por isso
   nasce invisível e só se mostra aos 400ms. Se a resposta chegar antes, ninguém
   viu nada -- e quando não chega, há o que olhar.
   ============================================================ */
@keyframes rodar { to { transform:rotate(1turn) } }
@keyframes surgir { from { opacity:0 } to { opacity:1 } }

.roda{ width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.15em;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  opacity:.5; animation:rodar .7s linear infinite }

/* A espera de um bloco inteiro: a roda, uma linha a dizer o que se espera, e o
   atraso. O texto não é decoração -- «A ler as transacções» e «A acordar a
   máquina dos saques» esperam-se de maneiras diferentes. */
.espera{ padding:52px 20px; display:grid; place-items:center; gap:13px;
  color:var(--muted-2); font-size:13.5px; line-height:1.5; text-align:center;
  animation:surgir .2s ease .4s both }
.espera .roda{ width:22px; height:22px; border-width:2.5px; opacity:.45 }
.espera b{ color:var(--muted); font-weight:600 }
/* O hidden perde para qualquer regra de display do autor. */
.espera[hidden]{ display:none !important }

/* Dentro de um número grande (um KPI à espera), a roda toma o tamanho dele. */
.kpi .v .roda{ width:.62em; height:.62em; border-width:2.5px; vertical-align:.02em }

/* Quem pediu menos movimento não fica sem saber que algo está a acontecer:
   abranda-se, não se desliga. Uma roda parada é indistinguível de um ecrã morto,
   e a dúvida entre «está a pensar» e «morreu» é a pior de todas. */
@media (prefers-reduced-motion:reduce){
  .roda{ animation-duration:2.4s }
  .espera{ animation-delay:0s }
}