/* ==========================================================================
   Surplus account pages — sign in, register, verification, password reset.
   Loaded only on /auth/* so the public stylesheet stays unchanged.
   ========================================================================== */

.auth-body {
    min-height: 100vh;
    background: var(--paper);
}

.auth-page {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* ── Left: brand panel ──────────────────────────────────────────────────── */

.auth-brand {
    position: relative;
    display: flex;
    align-items: center;
    /* Tighter gutters than the form side: this panel is half the window, so wide
       padding here buys nothing and costs the copy its readable size. */
    padding: 56px clamp(26px, 3.4vw, 56px);
    color: #fff;
    background:
        radial-gradient(120% 90% at 12% 8%, rgba(255, 255, 255, .18), transparent 58%),
        linear-gradient(158deg, #ff6534 0%, #f4703c 46%, #d94f22 100%);
    overflow: hidden;
}

.auth-brand::after {
    content: "";
    position: absolute;
    right: -18%;
    bottom: -30%;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}

.auth-brand__inner {
    position: relative;
    z-index: 1;
    width: min(100%, 580px);
}

/* The brand's orange figure cannot be shown on an orange field, so the lockup
   sits on its own white surface instead of being recoloured. That keeps it
   identical to the public header and the admin rail — orange figure, dark navy
   figure, dark wordmark — rather than introducing a panel-specific variant. */
.auth-brand .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 40px;
    padding: 9px 20px 9px 13px;
    color: #34373d;
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 8px 22px rgba(122, 40, 16, .18);
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -.045em;
    text-decoration: none;
}

.auth-brand .wordmark__copy {
    display: grid;
    gap: 1px;
    line-height: 1.05;
}

.auth-brand .wordmark__tagline {
    color: #66717d;
    font-size: .52em;
    font-weight: 650;
    letter-spacing: 0;
    white-space: nowrap;
}

.auth-brand .brand-mark {
    width: 41px;
    height: 41px;
    color: var(--saffron);
}

.auth-brand h1 {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.1vw, 2.85rem);
    font-weight: 750;
    letter-spacing: -.04em;
    line-height: 1.1;
    text-wrap: balance;
}

.auth-brand__lede {
    margin: 0 0 36px;
    max-width: 44ch;
    color: rgba(255, 255, 255, .92);
    font-size: 1.09rem;
    line-height: 1.6;
}

.auth-points {
    display: grid;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.auth-points li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    color: rgba(255, 255, 255, .96);
    font-size: 1.01rem;
    line-height: 1.45;
}

.auth-points svg {
    flex: none;
    margin-top: 1px;
    padding: 5px;
    width: 31px;
    height: 31px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .17);
}

.auth-brand__note {
    margin: 40px 0 0;
    padding-top: 24px;
    max-width: 48ch;
    border-top: 1px solid rgba(255, 255, 255, .24);
    color: rgba(255, 255, 255, .86);
    font-size: .9rem;
    line-height: 1.58;
}

/* ── Right: form panel ──────────────────────────────────────────────────── */

.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px clamp(20px, 4vw, 56px);
    background: var(--paper-3);
}

.auth-card {
    width: min(100%, 430px);
}

.auth-card__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 650;
    text-decoration: none;
}

.auth-card__back:hover { color: var(--saffron); }

.auth-card h2 {
    margin: 0 0 7px;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 750;
    letter-spacing: -.035em;
}

.auth-card__sub {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.6;
}

.auth-card__sub a {
    color: var(--saffron);
    font-weight: 700;
    text-decoration: none;
}

.auth-card__sub a:hover { text-decoration: underline; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 13px 15px;
    border: 1px solid;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    line-height: 1.55;
}

.auth-alert svg { flex: none; margin-top: 1px; }
.auth-alert a { font-weight: 700; color: inherit; }

.auth-alert--error {
    border-color: rgba(217, 45, 32, .35);
    background: var(--brick-soft);
    color: #8a2318;
}

.auth-alert--success {
    border-color: rgba(23, 132, 100, .32);
    background: var(--mint-soft);
    color: #10553f;
}

.auth-alert--info {
    border-color: var(--line);
    background: var(--paper);
    color: var(--ink-2);
}

/* ── Form controls ──────────────────────────────────────────────────────── */

.auth-field { margin-bottom: 17px; }

.auth-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--ink);
    font-size: .84rem;
    font-weight: 700;
}

/* Every control type the account pages use, not just the three the auth
   screens contain — a bare select or datetime input here falls back to the
   browser default and looks unstyled next to the covered ones. */
.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="password"],
.auth-field input[type="number"],
.auth-field input[type="date"],
.auth-field input[type="time"],
.auth-field input[type="datetime-local"],
.auth-field select,
.auth-field textarea {
    width: 100%;
    padding: 12px 14px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    font-size: .95rem;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.auth-field textarea { resize: vertical; }

.auth-field input::placeholder,
.auth-field textarea::placeholder { color: #98a2b3; }

.auth-field input:focus,
.auth-field select:focus,
.auth-field textarea:focus {
    border-color: var(--saffron);
    box-shadow: 0 0 0 4px rgba(255, 101, 52, .16);
    outline: none;
}

.auth-field input[aria-invalid="true"] {
    border-color: var(--brick);
    box-shadow: 0 0 0 4px rgba(217, 45, 32, .12);
}

.auth-field__hint {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: .79rem;
    line-height: 1.5;
}

.auth-field__error {
    margin: 7px 0 0;
    color: var(--brick);
    font-size: .79rem;
    font-weight: 650;
}

.auth-field__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.auth-field__row a {
    color: var(--saffron);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

.auth-field__row a:hover { text-decoration: underline; }

.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 20px;
    color: var(--ink-2);
    font-size: .84rem;
    line-height: 1.55;
}

.auth-check input {
    flex: none;
    margin-top: 2px;
    width: 17px;
    height: 17px;
    accent-color: var(--saffron);
}

.auth-check a { color: var(--saffron); font-weight: 700; }

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    color: #fff;
    background: var(--saffron);
    border: none;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 750;
    cursor: pointer;
    transition: background var(--ease), transform var(--ease);
}

.auth-submit:hover { background: var(--brick); transform: translateY(-1px); }
.auth-submit:disabled { opacity: .6; cursor: default; transform: none; }

.auth-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 11px 20px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.auth-secondary:hover { background: var(--paper); }

.auth-recaptcha { margin-bottom: 18px; }

.auth-consent {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.5;
    text-align: center;
}

.auth-consent a { color: var(--saffron); font-weight: 700; text-decoration: none; }
.auth-consent a:hover { text-decoration: underline; }

.auth-foot {
    margin: 22px 0 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.6;
    text-align: center;
}

.auth-foot a { color: var(--saffron); font-weight: 700; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* ── Email + Google side-by-side (login and register) ───────────────────────
   Stacked by default; on wide screens the email form, a vertical "or" rule,
   and the Google card sit in one row. */

.auth-method-grid { display: grid; }
.auth-method-main { min-width: 0; }
/* Google disabled → the form is the only child and takes the full row. */
.auth-method-grid > :only-child { grid-column: 1 / -1; }

/* ── Google sign-in panel ───────────────────────────────────────────────── */

.auth-google {
    display: grid;
    gap: 12px;
    justify-items: center;
    justify-self: center;
    width: min(100%, 380px);
    padding: 20px 16px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(43, 50, 59, .06);
}

.auth-google__title {
    margin: 2px 0 0;
    font-size: 1.02rem;
    font-weight: 750;
    letter-spacing: -.02em;
    text-align: center;
}

.auth-google__wrap {
    display: flex;
    justify-content: center;
    min-height: 44px;
    width: 100%;
}

/* Placeholder shown before Google's own button renders, and the disabled state
   when Google sign-in is unavailable. */
.auth-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 280px;
    min-height: 44px;
    padding: 10px 18px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
}

.auth-google-btn:hover:not(:disabled) { background: var(--paper); }
.auth-google-btn:disabled { opacity: .55; cursor: default; }
.auth-google-btn__g { display: flex; flex: none; width: 18px; height: 18px; }
.auth-google-btn__g svg { width: 18px; height: 18px; }

.auth-google__message { width: 100%; }
.auth-google__message:empty { display: none; }
.auth-google__message .auth-alert { margin-bottom: 0; font-size: .82rem; }

.auth-google__note {
    margin: 0;
    max-width: 34ch;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.5;
    text-align: center;
}

.auth-google__note a { color: var(--saffron); font-weight: 700; text-decoration: none; }

.auth-callout {
    margin-top: 24px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink-2);
    font-size: .84rem;
    line-height: 1.6;
}

.auth-callout strong { color: var(--ink); }
.auth-callout a { color: var(--saffron); font-weight: 700; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Wide screens: email form and Google card side by side, separated by a
   vertical rule. The brand panel narrows so the form panel earns the room. */
@media (min-width: 1180px) {
    .auth-page { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }

    .auth-card--wide { width: min(100%, 680px); }

    .auth-card--wide .auth-method-grid {
        grid-template-columns: minmax(304px, 1fr) auto minmax(250px, .72fr);
        align-items: center;
        column-gap: 22px;
    }

    .auth-card--wide .auth-method-grid .auth-divider {
        flex-direction: column;
        align-self: stretch;
        min-height: 220px;
        margin: 0;
    }

    .auth-card--wide .auth-method-grid .auth-divider::before,
    .auth-card--wide .auth-method-grid .auth-divider::after {
        flex: 1;
        width: 1px;
        height: auto;
    }

    .auth-card--wide .auth-method-grid .auth-google {
        width: 100%;
        align-self: center;
    }
}

@media (max-width: 940px) {
    .auth-page { grid-template-columns: 1fr; }

    .auth-brand {
        align-items: flex-start;
        padding: 34px clamp(20px, 6vw, 44px) 38px;
    }

    .auth-brand .wordmark { margin-bottom: 24px; }
    .auth-brand__lede { margin-bottom: 24px; }
    .auth-points { gap: 11px; }
    .auth-brand__note { display: none; }
    .auth-panel { padding: 34px clamp(20px, 6vw, 44px) 52px; }
}

@media (max-width: 560px) {
    .auth-brand { padding-top: 26px; padding-bottom: 30px; }
    .auth-brand h1 { font-size: 1.45rem; }
    .auth-points li:nth-child(n + 3) { display: none; }
    .auth-card h2 { font-size: 1.38rem; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-submit:hover { transform: none; }
    .auth-field input { transition: none; }
}