/* ============================================================================
   Login + /dev sign-in page styles (R1.1, 2026-06-11)
   ----------------------------------------------------------------------------
   Uses tokens from css/design-system.css. The legacy block at the bottom keeps
   the old /dev page working until R1.2 rebuilds it.
   ============================================================================ */

.login-page {
    min-height: 100vh;
    /* Subtle brand-tinted glow at the top, otherwise clean light surface. */
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%,
            rgba(200, 16, 46, 0.04) 0%,
            transparent 60%),
        var(--color-bg-base);
}

.login-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-5);
    gap: var(--space-6);
}

.login-card {
    width: 100%;
    max-width: 440px;
    padding: var(--space-7) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.login-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
}

.login-brand {
    /* eyebrow under the wordmark; reads "Customer Service Toolbox" */
}

/* PING wordmark + golfer mascot. Theme-aware: black/dark in light mode,
   white/light in dark mode. Source assets live in /img. */
.login-brand-logo {
    display: block;
    width: 120px;
    height: 28px;
    margin: 0 auto var(--space-2);
    background: url('/img/ping-logo-light.png') center / contain no-repeat;
}
[data-mode="dark"] .login-brand-logo {
    background-image: url('/img/ping-logo-dark.png');
}
.login-pingman {
    display: block;
    width: 110px;
    height: 132px;
    margin: 0 auto;
    background: url('/img/pingman-light.png') center / contain no-repeat;
}
[data-mode="dark"] .login-pingman {
    background-image: url('/img/pingman-dark.png');
}

.login-heading {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-strong);
    letter-spacing: var(--letter-spacing-tight);
}

.login-sub {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
}

.login-error {
    background: var(--color-danger-faint);
    color: var(--color-danger);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.login-form {
    /* Inherits .ds-stack flex/gap from the design system */
}

.login-help {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
}

/* "Signed in as <email>" callout used on no-access.html — a single subdued
   box so the user can spot their own email at a glance when quoting it to IT. */
.login-id-box {
    background: var(--color-bg-raised-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    text-align: center;
}
.login-id-box-label {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    color: var(--color-text-muted);
}
.login-id-box-value {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-text-strong);
    word-break: break-all;
}

.login-footer-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-faint);
    letter-spacing: var(--letter-spacing-loose);
}

/* SSO callback — spinner while the PKCE/token exchange runs. */
.sso-spinner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) 0;
}
.sso-spinner {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 3px solid var(--color-border-subtle);
    border-top-color: var(--color-accent);
    animation: sso-spinner-rotate 0.9s linear infinite;
}
@keyframes sso-spinner-rotate {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .sso-spinner { animation: none; border-top-color: var(--color-border-subtle); }
}

/* ── RESPONSIVE — phone-narrow viewports ───────────────────────────────────
   Login + /dev page on iPhone-SE-class widths. Shrink the pingman + logo so
   they don't crowd the card; tighten card padding. */
@media (max-width: 480px) {
    .login-shell {
        padding: var(--space-4);
        gap: var(--space-4);
    }
    .login-card {
        padding: var(--space-5) var(--space-4) var(--space-4);
    }
    .login-pingman {
        width: 80px;
        height: 96px;
    }
    .login-brand-logo {
        width: 96px;
        height: 22px;
    }
    .login-heading {
        font-size: var(--font-size-lg);
    }
}

/* Persona-picker cards used by the rebuilt /dev page (R1.2) */
.dev-persona-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    text-align: left;
    width: 100%;
    padding: var(--space-4);
    background: var(--color-bg-raised-2);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.dev-persona-card:hover {
    background: var(--color-bg-raised-3);
    border-color: var(--color-border-strong);
}
.dev-persona-card:active { transform: translateY(1px); }

.dev-persona-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-strong);
}
.dev-persona-card-role {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
}
.dev-persona-card-blurb {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
    margin-top: var(--space-1);
}

/* Help block under the persona picker — slightly tighter than .login-help */
.login-help code {
    background: var(--color-bg-raised-2);
    color: var(--color-text-strong);
    padding: 1px var(--space-1);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: 0.92em;
}
.login-help a {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Dev banner */
.login-dev-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-warning-faint);
    color: var(--color-warning);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

/* ============================================================================
   LEGACY classes — keep until R1.2 rebuilds /dev. Once that lands, delete
   everything below this comment.
   ============================================================================ */

.login-container {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    padding: var(--space-5);
}

.login-box {
    background: var(--color-bg-raised-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-popover);
    padding: var(--space-7) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.logo { text-align: center; margin-bottom: var(--space-4); }
.login-logo { display: none; } /* drop the wordmark image — eyebrow is enough */
.logo h1 {
    font-size: var(--font-size-xl);
    color: var(--color-text-strong);
    margin: 0;
}
.subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.login-btn {
    /* Match .ds-btn--lg / --primary for the legacy SSO button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    height: 44px;
    padding: var(--space-3) var(--space-5);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}
.login-btn:hover { background: var(--color-accent-hover); }
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.sso-btn { /* same as login-btn — kept for selector parity */ }

.environment-selector { display: flex; flex-direction: column; gap: var(--space-1); }
.environment-selector label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}
.environment-selector select {
    width: 100%;
    height: 36px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-raised-2);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
}

.error-message {
    background: var(--color-danger-faint);
    color: var(--color-danger);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
}

.login-footer {
    text-align: center;
    color: var(--color-text-faint);
    font-size: var(--font-size-xs);
    padding-top: var(--space-4);
}

/* Used by /dev */
.dev-banner {
    display: flex; align-items: center; justify-content: center;
    background: var(--color-warning-faint); color: var(--color-warning);
    text-align: center; padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps); border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.dev-personas {
    display: flex; flex-direction: column; gap: var(--space-3);
    margin-top: var(--space-2);
}
.dev-persona {
    text-align: left !important;
    padding: var(--space-4) !important;
    line-height: 1.4 !important;
    background: var(--color-bg-raised-2) !important;
    color: var(--color-text-strong) !important;
}
.dev-persona:hover { background: var(--color-bg-raised-3) !important; }
.dev-persona .dev-persona-title {
    font-size: var(--font-size-base); font-weight: var(--font-weight-semibold);
}
.dev-persona .dev-persona-role {
    font-size: var(--font-size-xs); color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase; letter-spacing: var(--letter-spacing-caps);
}
.dev-persona .dev-persona-blurb {
    font-size: var(--font-size-sm); color: var(--color-text-muted);
    margin-top: var(--space-2); font-weight: var(--font-weight-regular);
}
.dev-note {
    font-size: var(--font-size-xs); color: var(--color-text-muted);
    text-align: center; margin-top: var(--space-4); line-height: var(--line-height-base);
}
.dev-note a { color: var(--color-accent); }
.dev-note code {
    background: var(--color-bg-raised-2); color: var(--color-text-strong);
    padding: 1px var(--space-1); border-radius: var(--radius-xs);
    font-family: var(--font-mono); font-size: 0.92em;
}