/* Shared Sign In and Create Account cards, using the mobile design at every width. */
.page-auth {
    --auth-inline-unit: 1vw;
    --auth-viewport-unit: var(--mobile-layout-viewport-unit, 1svh);
    --auth-control-gap: clamp(10px, calc(var(--auth-viewport-unit) * 3 - 10px), 14px);
    --auth-section-gap: clamp(16px, calc(var(--auth-viewport-unit) * 2), 22px);
    --auth-input-height: clamp(54px, calc(var(--auth-viewport-unit) * 6.8), 60px);
    --auth-provider-height: clamp(52px, calc(var(--auth-viewport-unit) * 6.6), 58px);
}
.page-auth [hidden] { display: none !important; }
.page-auth .auth-header { display: contents; }
.page-auth :is(.login-container, .signup-container) {
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 0;
    display: block;
}
.page-auth .auth-content {
    --surface-radius: clamp(22px, calc(var(--auth-inline-unit) * 6), 30px);
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: clamp(22px, calc(var(--auth-viewport-unit) * 2.8), 28px) clamp(18px, calc(var(--auth-inline-unit) * 4.6), 24px);
    overflow: visible;
}
.page-auth .auth-content h1 {
    margin: 0 0 clamp(5px, calc(var(--auth-viewport-unit) * .8), 8px);
    font-size: clamp(30px, calc(var(--auth-inline-unit) * 8.5), 36px);
    line-height: 1.1;
    text-align: center;
}
.page-auth :is(.login-subtitle, .signup-subtitle) {
    margin: 0 0 var(--auth-section-gap);
    font-size: 16px;
    line-height: 1.3;
}
.page-auth .provider-stack { gap: var(--auth-control-gap); margin-bottom: var(--auth-section-gap); }
.page-auth .provider-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--auth-control-gap); }
.page-auth .provider-desktop-label { display: none; }
.page-auth .provider-mobile-label { display: grid; text-align: left; font-size: 16px; line-height: 1.15; }
.page-auth .provider-mobile-label small { font-size: 11px; font-weight: 500; }
.page-auth .provider-logo { display: block; flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; }
.page-auth .provider-btn:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: var(--auth-provider-height);
    height: auto;
    padding: 8px 12px;
    font-size: 16px;
    line-height: 1.25;
}
@media (min-width: 341px) {
    .page-auth .provider-options > .provider-btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - var(--auth-control-gap)) / 2);
    }
}
.page-auth .provider-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; font-size: 13px; line-height: 1.2; }
.page-auth .provider-divider::before,
.page-auth .provider-divider::after { content: ""; height: 1px; flex: 1; background: rgba(58, 96, 120, .22); }
.page-auth .auth-content form { gap: var(--auth-control-gap); }
.page-auth .forgot-password-link { margin-top: -3px; }
.page-auth .auth-content input:not([type="radio"]) {
    width: 100%;
    min-width: 0;
    height: var(--auth-input-height);
    padding: 0 16px;
    border-radius: 16px;
    background-image: none;
    font-size: 16px;
    line-height: 1.25;
}
.page-auth .auth-content input:focus { background-image: none; }
/* Use the same Sign In field material on both auth cards. */
.page-signup .auth-content input:not([type="radio"]) {
    background: rgba(255, 255, 255, .48);
    border-color: rgba(255, 255, 255, .42);
    backdrop-filter: blur(38px) saturate(1.25);
    -webkit-backdrop-filter: blur(38px) saturate(1.25);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(255, 255, 255, .18);
    font-weight: 400;
}
.page-signup .auth-content input:not([type="radio"]):focus {
    background: rgba(255, 255, 255, .30);
    border-color: rgba(255, 255, 255, .72);
}
.page-signup .auth-content input::placeholder { color: revert; opacity: revert; }
.page-auth .auth-content form > button[type="submit"] {
    width: 100%;
    height: var(--auth-input-height);
    margin-top: clamp(4px, calc(var(--auth-viewport-unit) * .7), 8px);
    padding: 10px 16px;
}
.page-auth .auth-content button:hover { transform: none; }
.page-auth .auth-content :is(input, button, a):focus-visible { outline: 2px solid #228ed0; outline-offset: 2px; }
.page-auth :is(.signup-link, .login-link) { margin: var(--auth-section-gap) 0 0; font-size: 15px; line-height: 1.4; text-align: center; }
.page-auth #error-message { min-height: 0; margin: 12px 0 0; padding: 10px 12px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; overflow: visible; border-radius: 14px; }
.page-auth #error-message:empty { display: none; }
.page-auth .provider-phone { display: flex; flex-direction: column; gap: var(--auth-control-gap); }
.page-auth .provider-phone input { margin-bottom: 0; }
.page-auth .provider-status { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.page-auth .provider-status:empty { display: none; }

.page-auth .signup-demographics { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; }
.page-auth .signup-birth-fields,
.page-auth .signup-sex-switch { display: block; min-width: 0; padding: 0; margin: 0; border: 0; }
.page-auth .auth-mobile-label { display: block; width: 100%; padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 650; line-height: 1.25; }
.page-auth .auth-mobile-label > span { font-size: 11px; font-weight: 500; white-space: nowrap; }
.page-auth .signup-birth-controls { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 5px; }
.page-auth .auth-content .signup-birth-controls input { padding-inline: 7px; appearance: textfield; -moz-appearance: textfield; }
.page-auth .signup-birth-controls input::-webkit-inner-spin-button,
.page-auth .signup-birth-controls input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.page-auth #gender { display: none; }
.page-auth .signup-sex-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; height: var(--auth-input-height); padding: 3px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 16px; background: rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65); }
.page-auth .signup-sex-options label { position: relative; display: flex; min-width: 0; cursor: pointer; }
.page-auth .signup-sex-options input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.page-auth .signup-sex-options span { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; padding: 4px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 12px; background: linear-gradient(180deg, #fff, #f6f7f8); box-shadow: 0 2px 5px rgba(45, 55, 65, .08), inset 0 1px 0 #fff; color: #555; font-size: clamp(12px, calc(var(--auth-inline-unit) * 3.3), 15px); font-weight: 650; line-height: 1.2; transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.page-auth .signup-sex-options input:checked + span { background: #e9edef; border-color: #bcc8cf; box-shadow: inset 0 2px 4px rgba(45, 55, 65, .16), inset 0 -1px 0 rgba(255, 255, 255, .7); transform: translateY(1px); color: #222; font-weight: 800; }
.page-auth .signup-sex-options input:focus-visible + span { outline: 2px solid #228ed0; outline-offset: 2px; }
.page-auth .auth-desktop-sign-in { display: none; }
.page-auth .auth-mobile-sign-in { display: inline; }
@media (max-width: 360px) { .page-auth .signup-demographics { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 340px) { .page-auth .provider-options { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .page-auth .signup-sex-options span { transition: none; } }

@media (max-width: 600px) {
    .page-auth { min-height: 100svh; }
    .page-auth .navbar { margin-top: 12px; }
    .page-auth[data-ad-layout="responsive"] .responsive-ads-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "top" "content";
        grid-template-rows: minmax(var(--compare-ad-height), auto) auto;
        align-items: start;
        gap: var(--compare-gap);
        padding: var(--compare-gap) var(--mobile-page-gutter) max(18px, var(--compare-gap));
    }
    .page-auth .responsive-ad:not([data-ad-slot="top"]),
    .page-auth [data-ad-anchor] { display: none; }
    .page-auth[data-ad-layout="responsive"] .responsive-ads-shell > [data-ad-slot="top"] {
        position: relative;
        top: auto;
        width: 100%;
        min-height: var(--compare-ad-height);
        padding: var(--compare-ad-mat-padding);
        gap: 0;
        --surface-radius: clamp(12px, 3.5vw, 18px);
        background: #fff;
        border: 1px solid rgba(145, 174, 195, .5);
        box-shadow: 0 2px 6px rgba(24, 70, 105, .055);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: visible;
    }
    .page-auth .responsive-ad::before,
    .page-auth .responsive-ad::after { content: none; }
    .page-auth .responsive-ad-label { font: 650 clamp(10px, 2.9vw, 14px)/1.4 "Mozilla Text", sans-serif; letter-spacing: .055em; color: #58708b; }
    .page-auth .responsive-ad-creative,
    .page-auth .responsive-ad-creative > ins,
    .page-auth .responsive-ad-creative iframe { overflow: visible; border-radius: 0; }
    .page-auth .responsive-ad-creative:not(:empty) { display: block; width: 100%; }
    .page-auth .responsive-ad:has(> .responsive-ad-creative:not(:empty)) > [data-ad-placeholder] { display: none; }
    .page-auth .responsive-ad-creative :is(img, video, iframe) { max-width: none; }

}

/* Keep the phone card proportions on desktop without stretching the form
   across the content column or changing the shared navbar/ad layout. */
@media (min-width: 601px) {
    .page-auth {
        --auth-inline-unit: 4.8px;
        --auth-viewport-unit: calc(min(var(--page-available-height), 900px) / 100);
    }
    .page-auth .auth-content { max-width: 480px; margin-inline: auto; }
    /* Resize the DOB fields and gender control together as height changes. */
    .page-auth .auth-content input { transition-property: background-color, border-color, box-shadow; }
}