/*
 * Corrente de entrada: login, segundo factor, passkeys.
 *
 * O resto do desenho destas paginas e' feito com utilities Tailwind (prefixo
 * tw:) directamente no markup; aqui fica so o que genuinamente precisa de
 * CSS a serio.
 */

/* O comutador que passkeys.js/login-ui.js usam para mostrar/esconder
   elementos. De propósito fora do Tailwind: as utilities tw: saem com
   !important, e um tw:flex no mesmo elemento ganharia a este display:none. */
.d-none {
    display: none !important;
}

/* O QR e' desenhado 1:1 pelo servidor (CodigoQr.cs) — impede o browser de o
   suavizar, que era o que fazia a camara nao conseguir fixar o codigo. */
.sentinel-qr {
    image-rendering: pixelated;
    max-width: 100%;
    height: auto;
}

/* A chave TOTP escrita a mao, numa fonte monoespacada de verdade — para o 0 e
   o O se distinguirem pela forma, e nao so por espacamento. */
.sentinel-chave {
    display: inline-block;
    font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    letter-spacing: normal;
    word-break: break-all;
    padding: 0;
}

/* Spinner usado nos botoes ocupados (passkeys.js, login-ui.js) enquanto se
   espera pelo dialogo do sistema operativo ou pela resposta do servidor. */
.pk-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pk-spin 0.6s linear infinite;
    vertical-align: -2px;
}

@keyframes pk-spin {
    to { transform: rotate(360deg); }
}