/* ============================================================================
   Login + SSO bootstrap — layout only (colors/components come from
   palette.css + base.css). Served at /loginCSS.
   ============================================================================ */

.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
}

.cal {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    width: 48px;
    height: 48px;
    opacity: 0.7;
}
.cal:hover { opacity: 1; }
.cal img { width: 100%; height: 100%; object-fit: contain; }

.login-shell {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
}

.login-logo img { display: block; }

.login-container {
    width: 100%;
    text-align: center;
}
.login-container h1 { margin: 0 0 var(--sp-5); }
.login-container .bbs-eyebrow { text-align: center; }

.login-container .bbs-btn--lg + .login-error { margin-top: var(--sp-4); }
.login-error { margin: var(--sp-4) 0 0; text-align: left; }

.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-faint);
    font-size: var(--fs-small);
    margin: var(--sp-5) 0;
}
.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--hairline);
}
.login-divider span { padding: 0 var(--sp-3); }

/* SSO bootstrap page */
.sso-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    text-align: center;
}