/* Etapas da tela de entrar com a sessão real (só no pacote de homologação), no idioma da tela: mesmo gap
   do .auth-form, botão largo, links como .auth-switch. Ligado com id="mdmSessaoEstilo": com ele presente,
   o sessao.js não injeta o mesmo estilo por <style> (a injeção fica só como reserva). */
.auth-etapa,.auth-etapa__acoes{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.3rem)}
.auth-etapa .btn{width:100%;justify-content:center}
/* o .auth-form vem da grade da tela (align-self:start); dentro da etapa ele ocupa a largura toda, como no login */
.auth-etapa .auth-form{align-self:stretch;width:100%}
.auth-etapa .btn:disabled{opacity:.55;cursor:not-allowed}
.auth-etapa .btn:disabled:hover{background:var(--bg-invert);border-color:var(--bg-invert);color:var(--fg-invert)}
.auth-etapa__nota{margin:0;font-size:var(--text-body-sm);line-height:1.5;color:var(--fg-muted);text-align:center}
.auth-etapa__links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.6rem}
.auth-etapa__links .auth-link{min-height:var(--alvo-toque);display:inline-flex;align-items:center}
/* o cabeçalho da etapa repete a tipografia do .auth-head, que no celular fica escondido (site.css) */
.auth-etapa__cab{margin:clamp(.9rem,2vw,1.4rem) 0 clamp(.2rem,.6vw,.4rem)}
.auth-etapa__cab h2{margin:0;font-family:var(--font-display);font-optical-sizing:none;font-variation-settings:var(--vf-display-h2);font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.06;letter-spacing:-.015em}
.auth-etapa__cab h2:focus{outline:none}
.auth-etapa__cab p{color:var(--fg-muted);font-size:var(--text-body-sm);line-height:1.5;margin:.7em 0 0}
.auth-aviso{margin:0;font-size:var(--text-body-sm);line-height:1.45;color:var(--fg)}
.auth-aviso.is-erro{color:var(--c-lacre)}
/* enviando: o rótulo do botão vira "Entrando…"; a seta sai (não há para onde ir ainda) */
.btn.is-ocupado{cursor:progress}
.btn.is-ocupado .btn__arrow{display:none}
/* o que se lê está na nota ao lado do botão; #authStatus segue anunciando, fora da vista (sem texto repetido) */
#authStatus{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}