/* Signed-out sign-in pages (instructor/_auth_layout.html): the Viva bar,
   one centered card, and the footer. Tokens come from viva.css. */

.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--viva-gray-bg);
}

.auth-topbar {
    background: var(--viva-violet);
    padding: 16px 24px;
}
.auth-brand {
    font-size: 21px;
    font-weight: 700;
    color: var(--viva-white);
    text-decoration: none;
}
.auth-brand:focus-visible {
    outline: none;
    box-shadow: var(--viva-focus-ring-on-violet);
    border-radius: var(--viva-radius-sm);
}

.auth-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 16px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    background: var(--viva-white);
    border: 1px solid var(--viva-gray-light);
    border-radius: var(--viva-radius-lg);
    box-shadow: var(--viva-shadow-card);
    padding: 32px;
}
.auth-card h1 {
    font-size: var(--viva-size-title);
    line-height: var(--viva-line-tight);
    margin: 0 0 8px;
}
.auth-lead {
    font-size: var(--viva-size-body);
    color: var(--viva-gray-mid);
    margin: 0 0 24px;
}
.auth-card .alert { margin-bottom: 16px; }

/* Every sign-in method is one full-width row, so none reads as the odd one out. */
.auth-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-method {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    font-size: var(--viva-size-body);
    background: var(--viva-white);
    color: var(--viva-gray-dark);
    border: 1px solid var(--viva-gray-light);
}
.auth-method:hover { background: var(--viva-gray-bg); border-color: var(--viva-gray-mid); }
.auth-method:focus-visible,
.auth-submit:focus-visible { outline: none; box-shadow: var(--viva-focus-ring); }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    font-size: var(--viva-size-label);
    color: var(--viva-gray-mid);
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--viva-gray-light);
}

.auth-form label {
    display: block;
    font-size: var(--viva-size-label);
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--viva-gray-dark);
}
.auth-form .form-control {
    box-sizing: border-box;
    padding: 12px;
    font-size: var(--viva-size-body);
    margin-bottom: 12px;
}
.auth-submit {
    width: 100%;
    padding: 12px 16px;
    font-size: var(--viva-size-body);
}
.auth-hint {
    margin: 12px 0 0;
    font-size: var(--viva-size-label);
    color: var(--viva-gray-mid);
}

/* While a sign-in is under way (idp-login.js): a clear status above the
   methods, and every method greyed out and disabled beneath it. */
.auth-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: var(--viva-radius);
    background: var(--viva-violet-10);
    border: 1px solid var(--viva-violet-50);
    color: var(--viva-violet);
    font-size: var(--viva-size-body);
    font-weight: 600;
}
.auth-progress[hidden] { display: none; }
.auth-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--viva-violet-50);
    border-top-color: var(--viva-violet);
    border-radius: 50%;
    animation: auth-spin 0.8s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .auth-spinner { animation: none; }
}
.auth-busy .auth-methods,
.auth-busy .auth-divider,
.auth-busy .auth-form {
    opacity: 0.4;
    pointer-events: none;
}

.auth-note {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    margin-top: 16px;
    padding: 0 8px;
    font-size: var(--viva-size-label);
    color: var(--viva-gray-mid);
    text-align: center;
}

.auth-footer {
    padding: 14px 24px;
    text-align: center;
    font-size: 12px;
    color: var(--viva-gray-mid);
    background: var(--viva-gray-bg);
    border-top: 1px solid var(--viva-gray-light);
}

@media (max-width: 480px) {
    .auth-main { padding: 24px 16px; }
    .auth-card { padding: 24px 20px; }
}