/*
 * Páginas de entrada: login, mudança de password, inscrição do segundo factor.
 *
 * Sobrou aqui o que é genuinamente CSS e não cabe numa utility: o QR, que tem
 * de ser desenhado sem suavização, e a chave manual, que precisa de espaço
 * entre caracteres para se ler de um ecrã para um teclado. Todo o resto do
 * desenho destas páginas passou para utilities Tailwind (prefixo tw:) no
 * próprio markup.
 *
 * A razão de nada disto viver em atributos style= continua a mesma: a política
 * de segurança de conteúdo desta superfície diz style-src 'self', e um único
 * style= no HTML tornava-a decoração — o browser passaria a recusar a política
 * inteira ou a ignorá-la, conforme o caso.
 */

/* O QR é desenhado 1:1 pelo servidor. Isto impede o browser de o suavizar
   se algum estilo herdado lhe mexer no tamanho — as margens desfocadas dos
   módulos são o que faz a câmara não conseguir fixar. */
.g360-qr {
    image-rendering: pixelated;
    max-width: 100%;
    height: auto;
}

/*
 * A chave escrita à mão.
 *
 * Os 32 caracteres são a chave TOTP que o Identity gera (160 bits, o que a RFC
 * recomenda) — não se encurta o valor sem enfraquecer o segundo factor. O que
 * se encurta é o espaço que ocupa: a 14px com .08em de espaçamento não cabia
 * numa linha e partia-se em duas.
 *
 * A fonte passa a ser monoespaçada de verdade. Antes herdava o Poppins, onde o
 * 0 e o O são quase o mesmo desenho — e era por isso que fazia falta tanto
 * espaçamento a compensar. Com uma mono, os dois distinguem-se pela forma e o
 * espaçamento pode encolher: cabe numa linha só.
 */
.g360-chave {
    display: inline-block;
    font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    letter-spacing: normal;
    /* Cabe numa linha com 12px de folga nos 286 disponíveis. Sem nowrap de
       propósito: noutro sistema a mono pode ser um pouco mais larga, e mais
       vale quebrar do que rebentar a caixa. */
    word-break: break-all;
    padding: 0;
}
