/* Account authentication surfaces. Derived from the immutable design/signup reference. */
.auth-page {
    display: grid;
    min-height: 100dvh;
    background: var(--paper-50);
}

.auth-split { grid-template-columns: minmax(300px, 5fr) minmax(480px, 7fr); }

.auth-page > aside {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: clamp(32px, 5vw, 68px);
    background:
        radial-gradient(circle at 20% 10%, rgba(143, 192, 177, .26), transparent 35%),
        linear-gradient(135deg, #0b3027 0%, var(--forest-900) 54%, #195444 100%);
    color: var(--paper-50);
}

.auth-page > aside::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: .24;
    background: repeating-linear-gradient(115deg, transparent 0 54px, rgba(247, 246, 243, .12) 55px 57px, transparent 58px 112px);
}

.auth-page > aside > * { position: relative; }
.auth-page .brand { display: inline-flex; width: fit-content; align-items: center; color: inherit; font-size: 20px; font-weight: 900; letter-spacing: -.035em; }
.auth-page > aside .brand { position: absolute; top: clamp(28px, 4vw, 52px); left: clamp(32px, 5vw, 68px); }
.auth-page > aside .eyebrow { color: var(--mint-300); }
.auth-page > aside h1 { max-width: 510px; margin: 0; font-size: clamp(36px, 4.2vw, 58px); font-weight: 900; letter-spacing: -.045em; line-height: 1.01; }
.auth-page > aside > p:last-child { max-width: 480px; margin: 18px 0 0; color: rgba(247, 246, 243, .82); font-size: 16px; line-height: 1.6; }

.auth-panel {
    width: min(100%, 540px);
    align-self: center;
    justify-self: center;
    padding: clamp(28px, 5vw, 64px);
}

.auth-page:not(.auth-split) {
    min-height: 100dvh;
    padding: clamp(20px, 4vw, 56px);
    background: linear-gradient(145deg, var(--mint-100), var(--paper-50) 46%);
}

.auth-page:not(.auth-split) .auth-panel {
    padding: clamp(28px, 5vw, 52px);
    border: 1px solid var(--line-200);
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 20px 60px rgba(18, 60, 51, .12);
}

.auth-panel > .brand { margin-bottom: 42px; color: var(--forest-900); }
.auth-panel .eyebrow { margin: 0 0 10px; color: var(--forest-600); font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.auth-panel h1 { margin: 0; color: var(--ink-900); font-size: clamp(30px, 3.2vw, 42px); font-weight: 900; letter-spacing: -.045em; line-height: 1.05; }
.auth-panel > p:last-child { margin: 22px 0 0; color: var(--ink-500); font-size: 13.5px; text-align: center; }
.auth-panel > p:last-child a { font-weight: 800; }

.auth-panel form { display: grid; gap: 16px; margin-top: 30px; }
.auth-panel form > label { display: grid; gap: 7px; color: var(--ink-600); font-size: 12.5px; font-weight: 750; }
.auth-panel input:not([type="checkbox"]) {
    width: 100%;
    height: 46px;
    border: 1.5px solid var(--line-300);
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: var(--ink-900);
    font: 15px var(--font);
    padding: 0 14px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.auth-panel input:not([type="checkbox"]):hover { border-color: var(--mint-300); }
.auth-panel input:focus { border-color: var(--forest-600); box-shadow: 0 0 0 3px rgba(31, 111, 92, .16); }
.auth-panel input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--forest-900); }
.auth-panel form > label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
.auth-panel .btn { width: 100%; height: 48px; margin-top: 6px; border-radius: 9px; font-size: 14px; font-weight: 800; }
.auth-panel .auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-panel .auth-grid > label { display: grid; gap: 7px; color: var(--ink-600); font-size: 12.5px; font-weight: 750; }

.auth-notice,
.auth-panel [role="alert"],
.auth-panel .validation-summary-errors {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #ebc9bf;
    border-radius: 9px;
    background: #fff4f0;
    color: #8d3527;
    font-size: 13px;
    line-height: 1.45;
}
.auth-panel .validation-summary-errors ul { margin: 0; padding-left: 18px; }
.auth-panel .field-validation-error { color: #a24332; font-size: 12px; font-weight: 650; }

.auth-panel .google-signin-button { display:flex; min-height:48px; align-items:center; justify-content:center; gap:12px; margin:20px 0 16px; border:1px solid var(--line-300); border-radius:8px; background:#fff; color:var(--ink-900); font-weight:750; }
.auth-panel .google-signin-button:hover { border-color:var(--forest-600); background:var(--mint-100); color:var(--forest-900); }
.auth-panel .google-signin-button:focus-visible { outline:3px solid var(--mint-300); outline-offset:3px; }
.auth-panel .google-signin-button .fa-google { color:#4285f4; font-size:18px; }
.auth-panel .auth-divider { position:relative; display:grid; place-items:center; margin:16px 0; color:var(--ink-400); font:600 11px var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.auth-panel .auth-divider::before { position:absolute; z-index:0; width:100%; border-top:1px solid var(--line-200); content:""; }.auth-panel .auth-divider span { position:relative; z-index:1; padding:0 12px; background:var(--paper-100); }

@media (max-width: 860px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-page > aside { min-height: 275px; justify-content: flex-end; }
    .auth-page > aside h1 { font-size: clamp(32px, 8vw, 46px); }
    .auth-panel { width: min(100%, 620px); padding: 38px clamp(20px, 7vw, 64px) 52px; }
}

@media (max-width: 480px) {
    .auth-page > aside { min-height: 240px; padding: 28px 22px; }
    .auth-page > aside .brand { top: 26px; left: 22px; }
    .auth-page > aside > p:last-child { display: none; }
    .auth-page:not(.auth-split) { padding: 12px; }
    .auth-page:not(.auth-split) .auth-panel { border-radius: 13px; }
    .auth-panel { padding: 30px 22px 38px; }
    .auth-panel > .brand { margin-bottom: 30px; }
    .auth-panel .auth-grid { grid-template-columns: 1fr; }
}