/* Pre-auth card chrome shared by the anonymous pages (Figma Login → "Landing"). */
.login-layout {
    font-family: var(--sw-font-ui);
    color: var(--sw-gray-600);
    background: var(--sw-auth-page-gradient);
    background-attachment: fixed;
    background-color: var(--sw-auth-page-gradient-end);
    overscroll-behavior-y: none;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

.login-layout-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sw-auth-card-footer-gap);
    width: min(100%, var(--sw-auth-card-width));
    box-sizing: border-box;
}

.login-layout-card {
    background: var(--sw-white);
    border: 1px solid var(--sw-gray-300);
    border-radius: var(--sw-auth-card-radius);
    box-shadow: var(--sw-shadow-lg);
    width: 100%;
    padding: var(--sw-auth-card-padding-y) var(--sw-auth-card-padding-x);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sw-auth-section-gap);
    box-sizing: border-box;
}

.main-logo {
    text-align: center;
    width: 100%;
}

.main-logo img {
    width: 300px;
    max-width: 100%;
    height: auto;
}

.login-layout-card h1 {
    margin: 0;
    font-family: var(--sw-font-title);
    color: var(--sw-gray-800);
    text-align: center;
}

.login-options-content,
.login-options-sso {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sw-auth-secondary-gap);
}

.btn-login {
    width: 100%;
    min-height: 48px;
    /* Figma button is 48px tall; the 1px border comes out of the padding so both variants match. */
    padding: calc(0.75rem - 1px) calc(1.25rem - 1px);
    font-family: var(--sw-font-ui);
    border: 1px solid transparent;
    border-radius: var(--sw-auth-button-radius);
    box-sizing: border-box;
    cursor: pointer;
    -webkit-appearance: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn-login-primary {
    background-color: var(--sw-blue-700);
    border-color: var(--sw-blue-700);
    color: var(--sw-white);
}

.btn-login-primary:hover {
    background-color: var(--sw-blue-800);
    border-color: var(--sw-blue-800);
}

.btn-login-primary:active {
    background-color: var(--sw-blue-900);
    border-color: var(--sw-blue-900);
}

.btn-login-secondary {
    background-color: transparent;
    border-color: var(--sw-gray-800);
    color: var(--sw-gray-800);
}

.btn-login-secondary:hover {
    background-color: var(--sw-gray-50);
}

.btn-login-secondary:active {
    background-color: var(--sw-gray-100);
}

/* WCAG 2.4.7: the previous input[type=button] rule set outline:none with no replacement. */
.btn-login:focus-visible {
    outline: 2px solid var(--sw-blue-700);
    outline-offset: 2px;
}

.login-layout-copyright {
    margin: 0;
    width: 100%;
    text-align: center;
    font-family: var(--sw-font-ui);
    color: var(--sw-gray-600);
}

/* typical phone screen resolution — 16px margins either side (Figma mobile inset) */
@media only screen and (max-width : 667px) {
    .login-layout {
        padding: 1rem;
    }

    .login-layout-stack {
        width: 100%;
        gap: 1.5rem;
    }

    .login-layout-card {
        padding: 2rem 1rem;
        gap: 2rem;
    }

    .main-logo img {
        width: 200px;
    }

    .login-layout-card h1 {
        font-size: 1.75rem;
    }
}