/* TPALogin: fluid layout, controls, messages, and responsive navigation. */
html,
body {
    min-height: 100%;
}
.tpa-login-screen {
    margin: 0;
    background: #fff;
    color: #000;
    font-family: Inter, Arial, Helvetica, sans-serif;
    --tpa-header-height: clamp(2.08rem, 2.31vw, 3.69rem);
    /* Scale with a large viewport, but keep controls comfortable in short windows. */
    --tpa-ui: clamp(0.75rem, min(max(1rem, calc(1.0125vw - 0.212rem)), calc(2vh - 0.28rem)), 1.40625rem);
    --tpa-section-gap: clamp(1.5rem, calc(28vh - 12rem), calc(6.25 * var(--tpa-ui)));
    --tpa-form-width: calc(34.8 * var(--tpa-ui));
    --tpa-logo-width: calc(36.25 * var(--tpa-ui));
    --tpa-footer-font: clamp(0.78125rem, calc(0.78125 * var(--tpa-ui)), 1.099rem);
    overflow-x: visible;
}

    .tpa-login-screen form {
        display: flex;
        min-height: 100vh;
        min-height: 100svh;
        flex-direction: column;
    }

    .tpa-login-screen .tpa-login-topbar {
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #630b1a;
        flex: 0 0 auto;
        height: auto;
        min-height: var(--tpa-header-height);
        padding: 0 clamp(0.75rem, calc(5vw - 2rem), 5.25rem);
        overflow: visible;
    }

    .tpa-login-screen .tpa-login-topnav {
        box-sizing: border-box;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        position: static;
        min-width: 0;
        padding: 0;
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }

        .tpa-login-screen .tpa-login-topnav a {
            color: #fff;
            font-weight: 700;
            line-height: 1.2;
            text-decoration: none;
            text-transform: uppercase;
            padding-block: 0.4rem;
            font-size: clamp(0.6875rem, calc(0.55rem + 0.2vw), 0.875rem);
            letter-spacing: clamp(0px, calc(0.07vw - 0.65px), 0.7px);
            white-space: normal;
            overflow-wrap: anywhere;
        }

    .tpa-login-screen .tpa-login-shell {
        position: relative;
        background: #fff;
        flex: 1 0 auto;
        display: grid;
        /* Continuous interpolation between the approved half-width and wide-screen layouts. */
        grid-template-columns: min(49.236%, max(calc(8.6vw + 36.56rem), 36vw)) minmax(0, 1fr);
        min-height: 0;
    }

    .tpa-login-screen .tpa-login-visual {
        overflow: hidden;
        position: relative;
        grid-column: 1;
        grid-row: 1;
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 0;
        margin: 0;
    }

    .tpa-login-screen .tpa-login-visual-image {
        position: absolute;
        max-width: none;
        display: block;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 80% center;
        transform: none;
    }

    .tpa-login-screen .tpa-login-panel {
        position: relative;
        box-sizing: border-box;
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        grid-column: 2;
        grid-row: 1;
        min-height: 0;
        padding: 0;
        overflow: visible;
    }

    .tpa-login-screen .tpa-login-panel-inner {
        box-sizing: border-box;
        display: flex;
        flex: 1 0 auto;
        width: 100%;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: clamp(1.5rem, 6vh, 6rem) clamp(1.25rem, 3vw, 4.5rem);
    }

    .tpa-login-screen .tpa-login-logo-wrap {
        width: 100%;
        flex: 0 0 auto;
        margin: 0;
    }

    .tpa-login-screen .tpa-login-logo {
        display: block;
        margin: 0 auto;
        width: var(--tpa-logo-width);
        max-width: 100%;
        height: auto;
    }

    .tpa-login-screen .tpa-login-form {
        display: block;
        width: var(--tpa-form-width);
        max-width: 100%;
        margin: var(--tpa-section-gap) auto 0;
    }

    .tpa-login-screen .tpa-login-credentials {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .tpa-login-screen .tpa-login-title {
        display: block;
        color: #000;
        font-weight: 700;
        margin-bottom: calc(2.52 * var(--tpa-ui));
        font-size: calc(1.875 * var(--tpa-ui));
        letter-spacing: 0.074em;
        line-height: 1.303;
        overflow-wrap: anywhere;
    }

    .tpa-login-screen .tpa-field {
        margin: 0 0 calc(1.5 * var(--tpa-ui));
    }

        .tpa-login-screen .tpa-field:last-child {
            margin-bottom: 0;
        }

    .tpa-login-screen .tpa-field-label {
        display: block;
        color: #9d9d9d;
        font-weight: 400;
        margin-bottom: calc(0.2775 * var(--tpa-ui));
        font-size: max(0.875rem, calc(1.25 * var(--tpa-ui)));
        letter-spacing: 0.059em;
        line-height: 1.2;
    }

    .tpa-login-screen .tpa-field-input {
        box-sizing: border-box;
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
        border-bottom-style: solid;
        border-bottom-color: #c8c8c8;
        border-radius: 0;
        outline: none;
        background: #e8f0fe;
        color: #000;
        font-family: inherit;
        font-weight: 400;
        height: max(2rem, calc(2.313 * var(--tpa-ui)));
        min-width: 0;
        font-size: max(1rem, calc(1.48 * var(--tpa-ui)));
        border-bottom-width: max(1px, calc(0.0925 * var(--tpa-ui)));
    }

    .tpa-login-screen .tpa-validator {
        display: block;
        margin-top: 6px;
        color: #b20000;
        font-weight: 700;
        letter-spacing: 0;
        font-size: max(0.8125rem, calc(0.8125 * var(--tpa-ui)));
        overflow-wrap: anywhere;
    }

    .tpa-login-screen .tpa-login-action-area {
        position: relative;
        flex-shrink: 0;
        width: 100%;
        margin-top: var(--tpa-section-gap);
        padding: 0;
    }

    .tpa-login-screen .tpa-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: calc(1.875 * var(--tpa-ui));
    }

    .tpa-login-screen .tpa-login-button-wrap {
        position: relative;
        display: inline-flex;
        width: auto;
        min-width: min(100%, calc(11.34 * var(--tpa-ui)));
        max-width: 100%;
        height: auto;
    }

    .tpa-login-screen .tpa-login-button {
        box-sizing: border-box;
        display: inline-block;
        appearance: none;
        -webkit-appearance: none;
        width: auto;
        border: 0;
        background: #630b1a;
        color: #fff;
        cursor: pointer;
        font-family: inherit;
        font-weight: 700;
        text-align: center;
        text-transform: none;
        min-width: 100%;
        max-width: 100%;
        height: auto;
        min-height: max(2.75rem, calc(3.1625 * var(--tpa-ui)));
        padding: 0.625rem calc(1.542 * var(--tpa-ui));
        border-radius: calc(0.3855 * var(--tpa-ui));
        font-size: max(0.875rem, calc(1.25 * var(--tpa-ui)));
        line-height: 1.25;
        white-space: normal;
    }

    .tpa-login-screen .tpa-forgot-link {
        display: block;
        margin: 0 auto;
        color: #630b1a;
        font-weight: 700;
        text-decoration: none;
        width: fit-content;
        max-width: 100%;
        margin-top: var(--tpa-ui);
        font-size: max(0.875rem, calc(1.25 * var(--tpa-ui)));
        letter-spacing: 0.022em;
        line-height: 1.4;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .tpa-login-screen .tpa-message {
        position: static;
        box-sizing: border-box;
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin: 0 auto;
        padding: 10px 12px;
        border: 1px solid;
        border-left-width: 4px;
        border-radius: 4px;
        font-weight: 400;
        line-height: 1.45;
        text-align: left;
        white-space: pre-line;
        overflow-wrap: anywhere;
        opacity: 1;
        transition: opacity 220ms ease;
        width: 100%;
        max-width: 100%;
        margin-top: clamp(1.5rem, calc(1.75 * var(--tpa-ui)), 2rem);
        font-size: max(0.8125rem, calc(0.8125 * var(--tpa-ui)));
    }

    .tpa-login-screen .tpa-login-footer {
        box-sizing: border-box;
        flex-shrink: 0;
        width: 100%;
        align-items: center;
        background: #630b1a;
        color: #fff;
        font-weight: 700;
        display: flex;
        flex-wrap: wrap;
        min-height: max(4.3125rem, calc(4.3125 * var(--tpa-ui)));
        justify-content: space-between;
        gap: 1rem;
        margin-top: 0;
        padding: max(0.625rem, calc(0.625 * var(--tpa-ui))) clamp(0.625rem, 1.8vw, 2.3rem);
        font-size: var(--tpa-footer-font);
        letter-spacing: 0.05em;
        line-height: 1.2;
    }

    .tpa-login-screen .tpa-footer-link {
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        max-width: 100%;
        font-size: var(--tpa-footer-font);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .tpa-login-screen .tpa-footer-copy {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }


    .tpa-login-screen .tpa-mobile-menu-toggle {
        display: none;
    }

    .tpa-login-screen .tpa-login-topnav a:hover,
    .tpa-login-screen .tpa-login-topnav a:focus,
    .tpa-login-screen .tpa-forgot-link:hover,
    .tpa-login-screen .tpa-forgot-link:focus,
    .tpa-login-screen .tpa-footer-link:hover,
    .tpa-login-screen .tpa-footer-link:focus {
        text-decoration: underline;
    }

    .tpa-login-screen .tpa-field-input:focus {
        border-bottom-color: #630b1a;
    }

    .tpa-login-screen .tpa-login-button:hover,
    .tpa-login-screen .tpa-login-button:focus {
        background-color: #4d0814;
    }

    .tpa-login-screen .tpa-maintenance-message-text {
        flex: 1;
        min-width: 0;
        white-space: normal;
    }

    .tpa-login-screen .tpa-message.tpa-maintenance-notice {
        flex: 0 0 auto;
        width: var(--tpa-form-width);
        max-width: 100%;
    }

    .tpa-login-screen .tpa-login-topnav a[aria-disabled="true"],
    .tpa-login-screen .tpa-forgot-link[aria-disabled="true"] {
        cursor: default;
        opacity: 0.55;
        pointer-events: none;
        text-decoration: none;
    }

    .tpa-login-screen .tpa-message.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    .tpa-login-screen .tpa-message::before {
        display: inline-flex;
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }

    .tpa-login-screen .tpa-message-error {
        border-color: #e5a4a4;
        border-left-color: #c62828;
        background: #fff4f4;
        color: #8f1d1d;
    }

        .tpa-login-screen .tpa-message-error::before {
            background: #c62828;
            content: "!";
        }

    .tpa-login-screen .tpa-message-success {
        border-color: #9ccbab;
        border-left-color: #218739;
        background: #f1faf3;
        color: #216b32;
    }

        .tpa-login-screen .tpa-message-success::before {
            background: #218739;
            content: "\2713";
        }

/* Switch composition only when there is insufficient room for two columns. */
@media (max-width: 900px) {
    .tpa-login-screen {
        --tpa-ui: clamp(0.6667rem, calc(0.58rem + 0.345vw), 0.9rem);
        --tpa-section-gap: clamp(1.5rem, 5.5vh, 3rem);
        --tpa-form-width: calc(30.2 * var(--tpa-ui));
        --tpa-logo-width: calc(30.94 * var(--tpa-ui));
        --tpa-footer-font: clamp(0.6875rem, calc(0.325rem + 1.81vw), 0.78125rem);
    }

        .tpa-login-screen .tpa-login-topbar {
            justify-content: flex-end;
            padding: 0 1rem;
        }

        .tpa-login-screen .tpa-mobile-menu-toggle {
            display: inline-flex;
            height: 100%;
            min-height: var(--tpa-header-height);
            align-items: center;
            gap: 6px;
            padding: 0;
            border: 0;
            background: transparent;
            color: #fff;
            cursor: pointer;
            font-family: Inter, Arial, Helvetica, sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.55px;
            line-height: 1;
            text-transform: uppercase;
        }

        .tpa-login-screen .tpa-mobile-menu-icon {
            font-size: 15px;
            font-weight: 400;
            line-height: 1;
        }

        .tpa-login-screen .tpa-mobile-menu-toggle:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }

        .tpa-login-screen .tpa-login-topnav {
            right: 0;
            left: 0;
            z-index: 3;
            display: none;
            flex-direction: column;
            align-items: stretch;
            background: #630b1a;
            box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22);
            position: absolute;
            top: 100%;
            max-height: calc(100vh - var(--tpa-header-height));
            max-height: calc(100svh - var(--tpa-header-height));
            overflow-y: auto;
            flex-wrap: nowrap;
            gap: 0;
            padding: 0.5rem 1.25rem 0.75rem;
        }

            .tpa-login-screen .tpa-login-topnav.is-open {
                display: flex;
            }

            .tpa-login-screen .tpa-login-topnav a {
                text-align: left;
                padding: 0.625rem 0;
                font-size: 0.6875rem;
                letter-spacing: 0.04em;
                line-height: 1.4;
            }

        .tpa-login-screen .tpa-login-shell {
            display: flex;
            flex-direction: column;
        }

        .tpa-login-screen .tpa-login-visual {
            flex: 0 0 auto;
            width: 100%;
            height: clamp(7.5rem, min(40vw, 30vh), 20rem);
            height: clamp(7.5rem, min(40vw, 30svh), 20rem);
        }

        .tpa-login-screen .tpa-login-visual-image {
            object-position: center 52%;
        }

        .tpa-login-screen .tpa-login-panel {
            flex: 1 0 auto;
        }

        .tpa-login-screen .tpa-login-panel-inner {
            flex: 0 0 auto;
            padding: 1.5rem clamp(1.25rem, 9.9vw, 4.5rem) 0;
        }

        .tpa-login-screen .tpa-login-title {
            margin-bottom: calc(3.27 * var(--tpa-ui));
        }

        .tpa-login-screen .tpa-field {
            margin-bottom: 1.5rem;
        }

        .tpa-login-screen .tpa-field-label {
            font-size: calc(1.3125 * var(--tpa-ui));
            line-height: 2.11;
        }

        .tpa-login-screen .tpa-login-action-area {
            margin-top: 1.5rem;
        }

        .tpa-login-screen .tpa-actions {
            padding-top: 1.5rem;
        }

        .tpa-login-screen .tpa-login-button-wrap {
            min-width: min(100%, calc(13.6 * var(--tpa-ui)));
        }

        .tpa-login-screen .tpa-forgot-link {
            margin-top: 1.5rem;
        }

        .tpa-login-screen .tpa-login-footer {
            justify-content: center;
            min-height: 5.5625rem;
            gap: 1.5rem clamp(0.75rem, 4vw, 1.5rem);
            margin-top: auto;
            padding: 1.625rem 0.625rem 0.625rem;
        }

        .tpa-login-screen .tpa-footer-copy {
            flex-basis: 100%;
            text-align: center;
        }
}

/* In short landscape windows, put the photo beside the form instead of above it. */
@media (min-width: 640px) and (max-width: 900px) and (max-height: 500px) {
    .tpa-login-screen .tpa-login-shell {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }

    .tpa-login-screen .tpa-login-visual {
        width: auto;
        height: auto;
    }

    .tpa-login-screen .tpa-login-visual-image {
        object-position: 80% center;
    }

    .tpa-login-screen .tpa-login-panel-inner {
        padding: 1.5rem;
    }

    .tpa-login-screen .tpa-login-title {
        margin-bottom: 1.5rem;
    }

    .tpa-login-screen .tpa-field {
        margin-bottom: 1rem;
    }

    .tpa-login-screen .tpa-field-label {
        line-height: 1.3;
    }

    .tpa-login-screen .tpa-login-action-area,
    .tpa-login-screen .tpa-forgot-link {
        margin-top: 1rem;
    }

    .tpa-login-screen .tpa-actions {
        padding-top: 1rem;
    }

    .tpa-login-screen .tpa-login-footer {
        margin-top: auto;
    }
}