/* Authentication-only layout: registration's form and product panel, and the centered sign-in card. */
.lh-auth-shell { width:100%; min-height:100dvh; display:grid; }
.lh-auth-shell * { box-sizing:border-box; }
.lh-auth-corner-brand img { display:block; width:100%; height:auto; }
.lh-auth-main { min-width:0; display:flex; align-items:center; justify-content:center; }
.lh-auth-form-heading { margin-bottom:2rem; }
.lh-auth-form-heading h1 { margin:0; color:var(--lh-slate-950); line-height:1.06; letter-spacing:-.04em; font-weight:800; }
.lh-auth-form-heading > p { margin:.7rem 0 0; color:var(--lh-slate-600); }
.lh-auth-status { margin-top:1rem; color:#be123c; font-size:.8rem; line-height:1.5; }
.lh-auth-status[hidden] { display:none; }
.lh-auth-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.lh-register-step--email,
.lh-register-step--details {
    display: grid;
    gap: 1rem;
}

/* Pre-paint enhancement is removed at DOM ready, including failed asset loads. */
.lh-register-enhanced [data-register-start-step="1"] .lh-register-step--details,
.lh-register-enhanced [data-register-start-step="2"] .lh-register-step--email { display: none; }
.lh-register-enhanced .lh-register-continue { display: inline-flex; }
.is-register-progressive .lh-register-step { animation: lh-register-enter 160ms ease both; }
@keyframes lh-register-enter { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .is-register-progressive .lh-register-step { animation: none; } }

.lh-register-continue {
    display: none;
}

/* Registration is only an email and its code; the setup guide collects everything else. Without
   JavaScript the original single form is shown instead. */
.lh-register-verify { display: none; }
.lh-auth-shell[data-register-guided="1"].is-register-progressive .lh-register-nojs { display: none; }
.lh-auth-shell[data-register-guided="1"].is-register-progressive .lh-register-verify { display: inline-flex; }

.lh-auth-shell.is-register-progressive .lh-register-continue {
    display: inline-flex;
}

.lh-auth-shell.is-register-progressive[data-register-step="1"] .lh-register-step--details {
    display: none;
}

.lh-auth-shell.is-register-progressive[data-register-step="2"] .lh-register-step--email {
    display: none;
}

.lh-register-email-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--lh-slate-200);
    border-radius: 0.4rem;
    background: #f8fafc;
    color: var(--lh-slate-700);
    font-size: .85rem;
    line-height: 1.25rem;
}

.lh-register-email-summary span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lh-register-email-summary :is(button, a) {
    flex: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--lh-blue);
    font-size: .72rem;
    line-height: 1rem;
    font-weight: 750;
    cursor: pointer;
}

.lh-register-email-summary :is(button, a):hover,
.lh-register-email-summary :is(button, a):focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Provider sign-in: equal buttons, then a quiet rule into the email form. */
.lh-oauth { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.lh-oauth__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 2.5rem;
    padding: .5rem 1rem;
    border: 1px solid var(--lh-slate-300);
    border-radius: var(--lh-radius-control);
    background: #fff;
    color: var(--lh-slate-700);
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
}
.lh-oauth__button:hover { border-color: var(--lh-slate-400); background: var(--lh-slate-50); color: var(--lh-slate-950); }
.lh-oauth__divider { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; color: var(--lh-slate-500); font-size: .7rem; }
.lh-oauth__divider::before, .lh-oauth__divider::after { content: ""; flex: 1; height: 1px; background: var(--lh-slate-200); }

.lh-auth-form-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lh-slate-200);
    color: var(--lh-text-muted);
    font-size: .85rem;
    line-height: 1.6;
    text-align: center;
}

.lh-auth-form-footer--register {
    display: grid;
    gap: 0.42rem;
}

.lh-auth-form-footer p {
    margin: 0;
}

/* Registration: the form column beside a product panel, logo in the corner (brand system section 23). */
.lh-auth-shell {
    /* The picture column grows with the window up to a cap, so the form gains the extra room on big screens.
       Keep the clamp in step with "sizes" in components/auth_register_visual.html. */
    grid-template-columns: minmax(0, 1fr) min(42vw, 46rem);
    background: #fff;
}
/* Past 1920px the form and picture stay together in the middle instead of drifting to the edges. */
.lh-auth-shell[data-auth-page="register"] { padding-inline: max(0px, calc((100% - 120rem) / 2)); }
.lh-auth-main {
    position: relative;
    padding: 6rem clamp(2rem, 4.5vw, 4.5rem) 3rem;
    background: #fff;
}
/* Registration column: the form centres in the free space; notes and links sit at the bottom. */
.lh-auth-shell[data-auth-page="register"] .lh-auth-main { flex-direction: column; min-height: 100dvh; padding-bottom: 1.5rem; }
.lh-auth-foot { width: min(100%, 27rem); margin-top: 2.5rem; color: var(--lh-text-muted, #59697e); font-size: .75rem; line-height: 1.5; text-align: center; }
.lh-auth-foot p { margin: 0; }
.lh-auth-foot .lh-auth-meta { justify-content: center; margin-top: .25rem; font-size: .75rem; }
.lh-auth-corner-brand { position: absolute; top: 1.25rem; left: 2rem; display: block; width: clamp(10.5rem, 15vw, 13rem); }
.lh-auth-visual { position: sticky; top: 0; align-self: start; display: flex; align-items: center; height: 100dvh; padding: 1rem 1rem 1rem 0; }
/* The panel keeps the picture's shape (780x1150), filling the height on usual desktops and becoming a
   centered card on very tall ones. Its colour matches the image background, so any letterboxing on
   short, wide windows is invisible. */
.lh-auth-visual__panel { width: 100%; max-height: 100%; aspect-ratio: 780 / 1150; overflow: hidden; border: 1px solid #dbe6f3; border-radius: var(--lh-radius-panel, .5rem); background: #eef4fb; }
.lh-auth-visual__panel picture { display: contents; }
.lh-auth-visual__image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right center; }
.lh-auth-form-wrap,
.lh-auth-form-wrap--register {
    width: min(100%, 27rem);
    margin: auto;
    padding: 0;
    background: #fff;
}
.lh-auth-form-heading h1 { font-size: clamp(2rem, 2.6vw, 2.4rem); }
.lh-auth-form-heading > p { font-size: .95rem; line-height: 1.5; overflow-wrap:anywhere; }
.lh-auth-form label { font-size: .7rem; }
.lh-auth-form input[type="email"],
.lh-auth-form input[type="password"],
.lh-auth-form input[type="text"] { min-height: 49px; font-size: .9rem; }
.lh-auth-form button[type="submit"],
.lh-register-continue { min-height: 50px; font-size: .9rem; }
.lh-register-email-summary { min-height: 48px; }
@media (max-width: 1023px) {
    .lh-auth-shell { display: block; background: #fff; }
    .lh-auth-visual { display: none; }
    .lh-auth-main {
        min-height: 100dvh;
        align-items: center;
        padding: 5.5rem clamp(1.25rem, 5vw, 2rem) 2.5rem;
        background: #fff;
    }
    .lh-auth-form-wrap,
    .lh-auth-form-wrap--register {
        width: min(100%, 32rem);
        margin: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}
@media (max-width: 480px) {
    .lh-auth-main { padding-inline: 1rem; }
    .lh-auth-form-heading h1 { font-size: 2.15rem; }
}

/* Help and legal links: one muted, wrapping row, aligned with the form instead of three centered stacks. */
.lh-auth-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin-top: .75rem; color: var(--lh-text-muted); font-size: .78rem; }
.lh-auth-meta .lh-support-link { display: inline-flex; margin: 0; }
.lh-auth-meta a { display: inline-flex; align-items: center; min-height: 2.5rem; color: inherit; font-weight: 600; text-decoration: none; }
.lh-auth-meta a:is(:hover, :focus-visible) { color: var(--lh-slate-950); text-decoration: underline; text-underline-offset: 2px; }
.lh-auth-shell--centered .lh-auth-form-footer { text-align: center; }
.lh-auth-form-footer a:not(.lh-oauth__button) { display: inline-flex; align-items: center; min-height: 2.25rem; }


/* Sign-in and recovery: one centered card on a light canvas, logo in the corner (brand system section 23). */
.lh-auth-shell--centered { display: block; background: #f8fafc; }
.lh-auth-shell--centered .lh-auth-main { position: relative; min-height: 100dvh; padding: 5.5rem 1rem 3rem; background: transparent; }
.lh-auth-centered { width: min(100%, 32rem); margin: auto; }
.lh-auth-shell--centered .lh-auth-form-wrap.lh-auth-card { width: 100%; margin: 0; padding: 2.75rem 3rem 2.5rem; background: #fff; border: 1px solid #dbe2ea; border-radius: var(--lh-radius-panel, .5rem); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.lh-auth-shell--centered .lh-auth-form-heading { margin-bottom: 2rem; text-align: center; }
.lh-auth-shell--centered .lh-auth-form-heading h1 { font-size: 2rem; }
.lh-auth-shell--centered .lh-auth-form-heading > p { font-size: .9rem; }
.lh-auth-shell--centered .lh-auth-form-footer { margin-top: 1.5rem; padding-top: 0; border-top: 0; text-align: center; }
.lh-auth-shell--centered .lh-auth-meta { justify-content: center; margin-top: 1.25rem; }
@media (max-width: 640px) {
    .lh-auth-shell--centered .lh-auth-main { padding: 4.75rem 1rem 2rem; }
    .lh-auth-corner-brand { top: 1rem; left: 1rem; width: 8.9rem; }
    .lh-auth-shell--centered .lh-auth-form-wrap.lh-auth-card { padding: 2rem 1.25rem 1.75rem; }
    .lh-auth-shell--centered .lh-auth-form-heading h1 { font-size: 1.7rem; }
}