/* ==========================================================================
   AUTH PAGES ON v4  (P2-12)

   Sign-in / create account, set password, forgot password and reset password. Loaded after v4.css
   by resources/views/auth/layout.blade.php and scoped under `.v4-page.v4-auth`, so it cannot touch
   the funnel. v4.css is not edited: it is the funnel's, and a new filename is also the cache bust
   (asset() has no version token and Cloudflare keeps the old file).

   Brand colours arrive as --lz-* overrides from BrandStyle::block() on `body.v4-page`; this file
   reads those tokens and adds only the danger and success colours v4 has no token for, plus a
   focus-ring alias.
   ========================================================================== */

.v4-page.v4-auth {
    --auth-danger: #a4231a;
    --auth-danger-tint: #fdeceb;
    --auth-success: #0f6b49;
    --auth-success-tint: #e7f6ee;
    --auth-focus: var(--lz-teal-deep);

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* The author rule `display:flex` on a screen would otherwise beat the UA's [hidden]{display:none},
   and the sign-in screen switcher hides screens with the attribute. */
.v4-page.v4-auth [hidden] { display: none !important; }

/* v4's own focus ring is a 15% tint, below the 3:1 non-text contrast WCAG 2.2 asks of a focus
   indicator. Added here, not changed there. */
.v4-page.v4-auth :focus-visible,
.v4-page.v4-auth .v4-text-input:focus-visible {
    outline: 3px solid var(--auth-focus);
    outline-offset: 2px;
}

.v4-page.v4-auth .v4-auth__header { position: static; }
.v4-page.v4-auth .v4-auth__header a.v4-header__logo,
.v4-page.v4-auth .v4-auth__header .v4-header__logo-link { min-height: 44px; }
.v4-page.v4-auth .v4-auth__login,
.v4-page.v4-auth .v4-auth__home { padding: 12px 20px; font-size: 15px; min-height: 44px; }
.v4-page.v4-auth .v4-auth__header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }

.v4-page.v4-auth .v4-auth__main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 20px 56px;
}

.v4-page.v4-auth .v4-auth__card {
    width: 100%;
    max-width: 520px;
    padding: 40px;
    box-shadow: var(--lz-shadow-md);
}

.v4-page.v4-auth .v4-auth__title {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--lz-teal-deep);
    margin-bottom: 16px;
    overflow-wrap: anywhere;
}
.v4-page.v4-auth .v4-auth__title:focus { outline: none; }

.v4-page.v4-auth .v4-auth__lede {
    color: var(--lz-mute);
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 24px;
    overflow-wrap: anywhere;
}

.v4-page.v4-auth .v4-auth__note {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--lz-mute);
    font-style: italic;
}

.v4-page.v4-auth .v4-auth__screen { display: flex; flex-direction: column; }
.v4-page.v4-auth .v4-auth__screen--center { text-align: center; align-items: stretch; }

.v4-page.v4-auth .v4-auth__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.v4-page.v4-auth .v4-auth__or { color: var(--lz-mute); font-size: 16px; margin-top: 8px; }

.v4-page.v4-auth .v4-auth__social { background: var(--lz-white); gap: 12px; }
/* Same specificity as v4.css's .lz-btn-ghost:hover and loaded later, so the white above would also win on hover and
   leave the ghost hover's paper-coloured text on white. */
.v4-page.v4-auth .v4-auth__social:hover { background: var(--lz-teal); }
.v4-page.v4-auth .v4-auth__social-icon { width: 24px; height: 24px; flex: none; }

.v4-page.v4-auth .v4-auth__form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }

.v4-page.v4-auth .v4-auth__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.v4-page.v4-auth .v4-auth__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v4-page.v4-auth .v4-auth__label { font-weight: 600; font-size: 15px; color: var(--lz-teal); }
.v4-page.v4-auth .v4-auth__input { min-height: 48px; padding: 12px 16px; font-size: 16px; }
.v4-page.v4-auth .v4-auth__input[readonly] { background: var(--lz-paper); color: var(--lz-ink); }
.v4-page.v4-auth .v4-auth__input[aria-invalid="true"] { border-color: var(--auth-danger); }
.v4-page.v4-auth .v4-auth__hint { font-size: 14px; color: var(--lz-mute); }

.v4-page.v4-auth .v4-auth__check {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    font-size: 16px;
    cursor: pointer;
}
.v4-page.v4-auth .v4-auth__check input { width: 24px; height: 24px; margin: 0; accent-color: var(--lz-green-deep); }

.v4-page.v4-auth .v4-auth__submit { width: 100%; justify-content: center; min-height: 52px; white-space: normal; }

.v4-page.v4-auth .v4-auth__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px 16px;
}
.v4-page.v4-auth .v4-auth__back,
.v4-page.v4-auth .v4-auth__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--lz-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.v4-page.v4-auth .v4-auth__back:hover,
.v4-page.v4-auth .v4-auth__link:hover { color: var(--lz-green-deep); }

.v4-page.v4-auth .v4-auth__alert {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: var(--lz-r-sm);
    border: 1px solid var(--auth-danger);
    background: var(--auth-danger-tint);
    color: var(--auth-danger);
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.v4-page.v4-auth .v4-auth__alert ul { list-style: disc; padding-left: 20px; }
.v4-page.v4-auth .v4-auth__alert li:only-child { list-style: none; margin-left: -20px; }
.v4-page.v4-auth .v4-auth__alert p { margin-bottom: 8px; }
.v4-page.v4-auth .v4-auth__alert--success {
    border-color: var(--auth-success);
    background: var(--auth-success-tint);
    color: var(--auth-success);
}

.v4-page.v4-auth .v4-auth__trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 20px 40px;
}
.v4-page.v4-auth .v4-auth__assurance {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 520px;
    padding: 16px 20px;
    border-radius: var(--lz-r-md);
    background: var(--lz-paper-2);
    color: var(--lz-ink);
    font-size: 15px;
}
.v4-page.v4-auth .v4-auth__assurance img { flex: none; width: 32px; height: 32px; object-fit: contain; }
.v4-page.v4-auth .v4-auth__assurance li + li { margin-top: 2px; }
.v4-page.v4-auth .v4-auth__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 28px;
    max-width: 800px;
}

/* v4.css sets the footer text in --lz-mute and its links in --lz-green-deep on --lz-paper, both under
   4.5:1 at 12-13px. Darker here, for these pages only. */

.v4-page.v4-auth .v4-footer { color: var(--lz-ink); }
.v4-page.v4-auth .v4-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    color: var(--lz-teal);
}

@media (max-width: 600px) {
    .v4-page.v4-auth .v4-auth__main { padding: 24px 16px 40px; }
    .v4-page.v4-auth .v4-auth__card { padding: 24px 20px; }
    .v4-page.v4-auth .v4-auth__title { font-size: 24px; }
    .v4-page.v4-auth .v4-auth__lede { font-size: 16px; }
    .v4-page.v4-auth .v4-auth__row { grid-template-columns: 1fr; }
    .v4-page.v4-auth .v4-auth__header { flex-wrap: nowrap; gap: 8px; padding: 14px 16px; }
    .v4-page.v4-auth .v4-auth__header > :first-child,
    .v4-page.v4-auth .v4-auth__header .v4-header__logo-link,
    .v4-page.v4-auth .v4-auth__header .v4-header__brand-logo,
    .v4-page.v4-auth .v4-auth__header .v4-header__partner-logo { min-width: 0; }
    .v4-page.v4-auth .v4-auth__header-actions { flex: none; flex-wrap: nowrap; gap: 8px; }
    .v4-page.v4-auth .v4-auth__login,
    .v4-page.v4-auth .v4-auth__home { padding: 12px 14px; font-size: 14px; }
    .v4-page.v4-auth .v4-auth__home-prefix {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .v4-page.v4-auth .v4-auth__home-word { text-transform: capitalize; }
}