/* File: static/css/auth.css */
/* Styling for the allauth pages. Kept separate from console.css because
   these pages are the only ones an unauthenticated visitor ever sees. */

.auth-brand-icon {
    font-size: 3rem;
}

/* The two-factor setup page. With MFA_REQUIRED on this is the first page a
   user sees after signing in, so it is laid out as numbered steps rather
   than a bare QR code and an input. */

.auth-step {
    display: flex;
    gap: 0.875rem;
    padding-bottom: 1.25rem;
    position: relative;
}

/* The connecting rule between the numbered markers. Drawn on the step
   rather than between them so the last one can simply switch it off. */
.auth-step::before {
    content: "";
    position: absolute;
    left: 0.9375rem;
    top: 2rem;
    bottom: 0.375rem;
    width: 1px;
    background-color: var(--bs-border-color);
}

.auth-step-last {
    padding-bottom: 0;
}

.auth-step-last::before {
    display: none;
}

.auth-step-number {
    align-items: center;
    background-color: var(--bs-primary);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex: 0 0 1.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    height: 1.875rem;
    justify-content: center;
    width: 1.875rem;
}

.auth-step-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* White plate behind the QR so it still scans if the card ever picks up a
   tinted or dark background. */
.auth-qr {
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    max-width: 12.5rem;
    padding: 0.75rem;
}

.auth-secret summary {
    cursor: pointer;
}

/* Recovery codes. Monospace and generously spaced because these are read
   off the screen and typed in by hand, often in a hurry. */
.auth-codes-box {
    background-color: var(--bs-tertiary-bg);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    line-height: 1.7;
    resize: none;
}

/* Which deployment this is. Deliberately quiet: it must be readable at a
   glance when three environments are open at once, without competing with
   the sign-in form for attention. */
.auth-env {
    font-weight: 500;
    letter-spacing: 0.02em;
}