@layer pages {
/* Online leads (/lead/<uri>?v=2) — the lead-specific overlay on the reused
   form/record scaffold (widget/record/* rendered with page_type="lead"). Leads
   share psw-record.css's two-column scaffold wholesale; this file holds ONLY the
   rules that diverge for the lead flow, every one scoped to a .psw-record--lead
   / .psw-record--lead-landing modifier so form/record itself is never touched.
   Imported after psw-record.css in the same `pages` layer. */

.psw-record--lead {
    overflow-x: clip;
}

/* The landing step hosts the absolutely-positioned Back control, so it is its
   containing block. */
.psw-record--lead-landing {
    position: relative;
}

/* Referer-driven Back control overlaid on the banner's top-left, shown only
   when an external site embedded/linked the form. Vertically centered in the
   82px banner; mobile chevron, desktop square + label. Mirrors suitelink. */
.psw-record__lead-back {
    position: absolute;
    top: 0;
    left: var(--space-1);          /* chevron's optical edge ≈ the 16px page gutter */
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 82px;                  /* = bottom-center banner height -> vertical centering */
    cursor: pointer;
}

/* Strip the tertiary white fill/ring so only the themed glyph shows on the gray
   banner; the 48px md footprint stays as the touch target. */
.psw-record__lead-back .psw-btn--icon-only {
    background-color: transparent;
    border-color: transparent;
}

.psw-record__lead-back-label {
    display: none;                 /* label is desktop-only */
}

.psw-record--lead .psw-avatar-banner {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* 24px from the straddling avatar down to the name, 40px from the location
   down to the first field — the banner is the whole header, so its bottom
   margin IS the location -> form gap. */
.psw-record__lead-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-10);
    text-align: center;
}

.psw-record__lead-banner-name {
    margin: var(--space-6) 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-heading-sm);
    line-height: var(--text-heading-sm--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

.psw-record__lead-banner-location {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-lg);
    line-height: var(--text-paragraph-lg--line-height);
    color: var(--color-content-medium);
}

/* Pets picker: compact rows on mobile — the base radio-card padding, not the
   roomy radio-with-media treatment (kept by the other pickers). */
@media (max-width: 768px) {
    .psw-record--lead .psw-list-item--radio:has(.psw-list-item__media) {
        padding: 17px;
    }
}

@media (min-width: 769px) {
    /* Align with the redesigned entry pages' container left edge; clamps to the
       24px page gutter on narrower desktops (mirrors .psw-suitelink__back). */
    .psw-record__lead-back {
        left: max(var(--space-6), calc((100% - 1128px) / 2));
    }
    /* 36px bordered white square with a 20px chevron, matching workflow_header's
       desktop nav button; the circle shape becomes a radius-lg square. */
    .psw-record__lead-back .psw-btn--icon-only {
        width: 36px;
        height: 36px;
        background-color: var(--color-white);
        border-color: var(--color-border-default);
        border-radius: var(--radius-lg);
    }
    .psw-record__lead-back .psw-btn--icon-only .psw-icon {
        width: 20px;
        height: 20px;
    }
    .psw-record__lead-back-label {
        display: block;
        font-family: var(--font-sans);
        font-weight: var(--font-weight-bold);
        font-size: var(--text-heading-sm);
        line-height: var(--text-heading-sm--line-height);
        color: var(--color-content-high);
    }

    /* Desktop banner text steps up: 32px title, 16px down to the location. */
    .psw-record__lead-banner {
        gap: var(--space-4);
    }
    .psw-record__lead-banner-name {
        font-size: var(--text-heading-lg);
        line-height: var(--text-heading-lg--line-height);
    }

    /* Single centered column; block flow (not grid) so the aside below can
       stick against the whole layout box, not just its own grid row. No
       heading above it (the banner is the header), so no 32px top margin. */
    .psw-record--lead-landing .psw-record__layout {
        display: block;
        max-width: 638px;
        margin-top: 0;
    }
    /* Submit stays reachable while the long field stack scrolls: a white
       sticky band pinned to the viewport bottom, 40px of space above the
       button and below the branding. At full scroll it settles into its
       natural spot — 40px under the last field. */
    .psw-record--lead-landing .psw-record__aside {
        position: sticky;
        top: auto;
        bottom: 0;
        background: var(--color-white);
        padding: var(--space-10) 0;
    }
    .psw-record--lead-landing .psw-record__summary {
        padding: 0;
        border: 0;
    }

    .psw-record--lead .psw-avatar-banner {
        margin-top: calc(-1 * var(--space-8));
    }
}
}