/*
 * MathiPen — authentication screens (Phase 2).
 * Layered on top of Bootstrap 5.3; only what Bootstrap does not already give
 * us lives here.
 */

/*
 * The gradient is built from the accent token rather than a fixed blue, so it
 * darkens with the rest of the page. Written as `rgb(... / alpha)` off
 * `--bs-primary-rgb` because a custom property cannot be given an alpha channel
 * any other way in plain CSS.
 */
.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 15%, rgba(var(--bs-primary-rgb), 0.14), transparent 42%),
        radial-gradient(circle at 85% 5%, rgba(var(--bs-primary-rgb), 0.08), transparent 38%),
        var(--mp-surface-sunken);
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    /* The positioning context for .auth-theme-switch. Without it the switch
       anchors to the viewport and scrolls away on a short window. */
    position: relative;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.auth-panel {
    width: 100%;
    max-width: 34rem;
}

/*
 * The theme switch on the sign-in page.
 *
 * Top-right and out of the way: the page has one job, and a control that
 * competes with the password field for attention is a control in the wrong
 * place. Absolute rather than in the flow so it does not shift the card, which
 * is centred and should stay centred.
 */
.auth-theme-switch {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.auth-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-brand-link {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--mp-accent);
    text-decoration: none;
}

.auth-brand-link:hover {
    color: var(--mp-accent-strong);
}

.auth-brand-tagline {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: var(--mp-text-muted);
}

.auth-card {
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-lg);
    background-color: var(--mp-surface);
    box-shadow: var(--mp-shadow-lg);
}

.auth-head {
    margin-bottom: 1.5rem;
}

.auth-form .form-label {
    font-weight: 500;
}

/*
 * Validation feedback is rendered server-side into an always-visible div, so
 * empty ones must not leave a gap under every field.
 */
.auth-form .invalid-feedback:empty,
.invalid-feedback:empty {
    display: none !important;
}

.auth-footer {
    margin: 1.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--mp-text-faint);
}

/* Role picker on the registration form. */
.role-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.role-option {
    position: relative;
    display: block;
    padding: 0.9rem 1rem;
    border: 1.5px solid var(--mp-border-strong);
    border-radius: var(--mp-radius-lg);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.role-option:hover {
    border-color: var(--mp-accent-border);
    background-color: var(--mp-surface-sunken);
}

.role-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.role-option.is-selected {
    border-color: var(--mp-accent);
    background-color: var(--mp-accent-soft);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.16);
}

.role-option-name {
    display: block;
    font-weight: 600;
    color: var(--mp-text);
}

.role-option-description {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--mp-text-muted);
}

/* Keyboard focus must be visible even though the radio itself is hidden. */
.role-option input[type="radio"]:focus-visible + .role-option-name {
    outline: 2px solid var(--mp-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Password strength meter. */
.password-meter .progress {
    height: 0.4rem;
    border-radius: 1rem;
}

.password-meter .progress-bar {
    transition: width 0.2s ease, background-color 0.2s ease;
}

.password-meter[data-score="0"] .progress-bar,
.password-meter[data-score="1"] .progress-bar {
    background-color: var(--mp-meter-1);
}

.password-meter[data-score="2"] .progress-bar {
    background-color: var(--mp-meter-2);
}

.password-meter[data-score="3"] .progress-bar {
    background-color: var(--mp-meter-3);
}

.password-meter[data-score="4"] .progress-bar {
    background-color: var(--mp-meter-4);
}

/* One-time code entry. */
.otp-input {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.75rem;
    text-align: center;
    padding-left: 0.75rem;
}

.otp-input::placeholder {
    letter-spacing: 0.4rem;
}

.verify-steps ol {
    padding-left: 1.15rem;
    line-height: 1.9;
}

@media (max-width: 575.98px) {
    .auth-shell {
        padding: 1.25rem 0.75rem;
    }

    .auth-card .card-body {
        padding: 1.5rem !important;
    }

    .otp-input {
        font-size: 1.35rem;
        letter-spacing: 0.5rem;
    }
}

/* Respect a reduced-motion preference for the meter and alert transitions. */
@media (prefers-reduced-motion: reduce) {
    .role-option,
    .password-meter .progress-bar {
        transition: none;
    }
}