@layer components {
/* Success/confirmation screen scaffold shared by every widget that ends on a
   "you're done" screen. Composes the `avatar_banner` (bottom-center logo banner),
   `footer` (mobile sticky actions), `powered_by` (desktop branding) and
   `button` components; this file owns only the page-level layout.

   Responsive split mirrors the footer/modal 768/769px breakpoint:
     - mobile (<=768px): full-bleed body, actions live in the sticky `footer`.
     - desktop (>=769px): centered max-width column, inline actions inside the
       content card + stacked branding below; the mobile footer hides itself. */

.psw-success-shell {
    background: var(--color-white);
    font-family: var(--font-sans);
}

/* Centered content column. Full-bleed on mobile; a constrained, centered
   column on desktop. */
.psw-success-shell__body {
    padding: 0 var(--space-4) var(--space-8);
}

/* Header layouts place the seam avatar outside the hero; reserve the Figma
   24px gap from the avatar bottom to the title. No-header layouts get this
   same gap from the inline avatar's margin-bottom below. */
.psw-success-shell:not(.psw-success-shell--no-header) .psw-success-shell__body {
    padding-top: var(--space-6);
}

/* The mobile footer is fixed to the viewport, so reserve enough scroll space
   for its buttons/branding state. Desktop resets this below because actions
   and branding are inline there. */
.psw-success-shell--with-mobile-footer {
    --success-shell-footer-buttons-height: 0px;
    --success-shell-footer-button-gaps: 0px;
    --success-shell-footer-section-gap: 0px;
    --success-shell-footer-branding-height: 0px;
}

.psw-success-shell--mobile-footer-buttons-1 {
    --success-shell-footer-buttons-height: 48px;
}

/* Button gaps mirror .psw-footer__buttons' 12px flex gap: (count − 1) × 12. */
.psw-success-shell--mobile-footer-buttons-2 {
    --success-shell-footer-buttons-height: 96px;
    --success-shell-footer-button-gaps: var(--space-3);
}

.psw-success-shell--mobile-footer-buttons-3 {
    --success-shell-footer-buttons-height: 144px;
    --success-shell-footer-button-gaps: 24px;
}

.psw-success-shell--mobile-footer-buttons-row {
    --success-shell-footer-buttons-height: 48px;
    --success-shell-footer-button-gaps: 0px;
}

.psw-success-shell--mobile-footer-branding {
    --success-shell-footer-branding-height: var(--text-paragraph-sm--line-height);
}

.psw-success-shell--mobile-footer-has-buttons.psw-success-shell--mobile-footer-branding {
    --success-shell-footer-section-gap: var(--space-3);
}

.psw-success-shell--with-mobile-footer .psw-success-shell__body {
    /* The footer's own height, term-by-term from psw-footer.css (border +
       12px padding + button rows + gaps + subtitle + 12px padding), plus the
       24px content-to-footer gap every mobile screen keeps. */
    padding-bottom: calc(
        var(--border-width-sm) +
        var(--space-3) +
        var(--success-shell-footer-buttons-height) +
        var(--success-shell-footer-button-gaps) +
        var(--success-shell-footer-section-gap) +
        var(--success-shell-footer-branding-height) +
        var(--space-3) +
        var(--space-6) +
        env(safe-area-inset-bottom)
    );
}

@media (min-width: 769px) {
    /* 744px content card + 2×24px page padding (Figma). */
    .psw-success-shell__body,
    .psw-success-shell--with-mobile-footer .psw-success-shell__body {
        max-width: 792px;
        margin: 0 auto;
        padding: 0 var(--space-6) var(--space-10);
    }

    .psw-success-shell:not(.psw-success-shell--no-header) .psw-success-shell__body {
        padding-top: var(--space-6);
    }
}

/* --- hero (title + subtitle, optional centered avatar) ------------------ */

/* Title + subtitle sit at a 32px page inset on mobile — the body's 16px plus
   16px here — while the content card below keeps the 16px inset it shares with
   the rest of the page (Figma 3023:193104). */
.psw-success-shell__hero {
    text-align: center;
    padding-inline: var(--space-4);
}

/* Large centered avatar shown only in the no-header layout, above the title. */
.psw-success-shell__avatar {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-6);
    line-height: 0;
}

.psw-success-shell__title {
    margin: 0;
    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-success-shell__subtitle {
    margin: var(--space-2) 0 0;
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    font-weight: var(--font-weight-regular);
    color: var(--color-content-medium);
}

@media (min-width: 769px) {
    /* Title + subtitle read at a 580px measure, narrower than the 744px card.
       The mobile inset would eat into that measure, so drop it. */
    .psw-success-shell__hero {
        max-width: 580px;
        margin-inline: auto;
        padding-inline: 0;
    }

    .psw-success-shell__title {
        font-size: var(--text-heading-lg);
        line-height: var(--text-heading-lg--line-height);
    }

    .psw-success-shell__subtitle {
        margin-top: var(--space-4);
    }
}

/* --- no-header layout (vertically centered, no banner) ------------------ */

.psw-success-shell--no-header {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.psw-success-shell--no-header .psw-success-shell__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* The body is a flex item here; its `margin: 0 auto` (desktop centering)
       would otherwise shrink it to content width. width:100% keeps it at the
       shared max-width so the CTA matches the header layouts. */
    width: 100%;
}

/* --- content slot ------------------------------------------------------- */

/* The per-type content sits in its own bordered card. Only rendered when the
   caller passes content (has_content); title-only screens omit it entirely. */
.psw-success-shell__content {
    margin-top: var(--space-6);
    padding: var(--space-4);
    border: var(--border-width-sm) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

@media (min-width: 769px) {
    .psw-success-shell__content {
        margin-top: calc(var(--space-6) + var(--space-4));
        padding: var(--space-6);
    }
}

/* --- desktop action region (>=769px) ------------------------------------ */

/* The mobile footer carries the buttons at <=768px and hides itself above it;
   these inline actions are the desktop counterpart. When has_content=True they
   render inside the content card, after the wrapped body. */
.psw-success-shell__desktop-actions {
    display: none;
}

.psw-success-shell__branding {
    display: none;
}

@media (min-width: 769px) {
    .psw-success-shell__desktop-actions {
        display: flex;
        gap: var(--space-3);
        margin-top: var(--space-6);
    }

    .psw-success-shell__content > .psw-success-shell__desktop-actions:first-child {
        margin-top: 0;
    }

    /* With no content card for the CTA to line up with, it shares the hero's
       580px measure instead of filling the 744px column (Figma 3448:185677).
       width:100% is load-bearing: the no-header body is a column flex
       container, so margin-inline:auto on this flex item would otherwise
       cancel align-self:stretch and shrink the CTA to its label. Mobile is
       unaffected — the sticky footer renders a full-bleed button. */
    .psw-success-shell--no-content .psw-success-shell__desktop-actions {
        margin-top: calc(var(--space-6) + var(--space-4));
        width: 100%;
        max-width: 580px;
        margin-inline: auto;
    }

    .psw-success-shell__desktop-actions--column {
        flex-direction: column;
    }

    .psw-success-shell__desktop-actions--row {
        flex-direction: row;
    }

    /* Equal-width row buttons, matching the footer's row treatment. */
    .psw-success-shell__desktop-actions--row > * {
        flex: 1 1 0;
        min-width: 0;
    }

    .psw-success-shell__branding {
        display: block;
        margin-top: var(--space-10);
    }
}
}