/**
 * @file auth.css
 * @brief Shared presentation classes for the authentication surfaces (issue #282, EPIC #277 UI consistency M2).
 * @note Replaces the inline style="" attributes previously scattered through
 *       LoginView, TwoFactorSetupView and PasswordResetView with named utility
 *       classes, so the in-scope views satisfy the no-inline-style rule of
 *       .devrules/10-ui-consistency-policy.md. Carries no raw brand literals; any
 *       brand colour is taken from the canonical --gt-color-* tokens in tokens.css.
 *       Linked after the screen stylesheets in BootstrapRenderer::renderHead().
 * @copyright Copyright (c) 2026 GLT Design. All rights reserved.
 */

/* One-time-code entry fields (TOTP / verification codes). */
.gt-otp-input {
    font-size: 1.5rem;
    letter-spacing: 0.5em;
}

/* Backup-code entry fields (slightly smaller, tighter tracking). */
.gt-backup-input {
    font-size: 1.2rem;
    letter-spacing: 0.3em;
}

/* Square container that frames the generated 2FA QR code. */
.gt-qr-box {
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
}

/* Enlarged loading spinner shown while the QR code is generated. */
.gt-spinner-lg {
    width: 3rem;
    height: 3rem;
}

/* Fixed-width ordinal prefix for backup-code list rows. */
.gt-code-index {
    min-width: 45px;
}

/* Decorative status / step icons (ascending sizes). */
.gt-icon-md {
    font-size: 24px;
}

.gt-icon-xl {
    font-size: 48px;
}

.gt-icon-2xl {
    font-size: 2rem;
}

.gt-icon-3xl {
    font-size: 3rem;
}

.gt-icon-4xl {
    font-size: 4rem;
}

/* Setup-wizard progress fill, mapped from the 1-5 step index (20% each). */
.gt-progress-step-1 {
    width: 20%;
}

.gt-progress-step-2 {
    width: 40%;
}

.gt-progress-step-3 {
    width: 60%;
}

.gt-progress-step-4 {
    width: 80%;
}

.gt-progress-step-5 {
    width: 100%;
}