@layer pages {
/* Contract sign page (/sign/<uri>?v=2) -> .psw-sign.

   Mobile: a single column under a compact workflow_header; the submit lives in
   the sticky `footer`. Desktop (>=769px): the "Sign contract" heading spans a
   centered 1128px container, with a two-column grid below it — a 638px signature
   column + a 442px summary card (matching the summary component width) split by
   a 48px gutter — where the footer hides itself. The heading and the grid share
   the centered container so their left edges align (Figma 933:45534).

   The signed-confirmation page (/sign/<uri>/complete?v=2) is built from the
   shared `success_shell` composite, so it owns no layout here.

   Clearance reserved at the bottom of the mobile scroll area so content and
   focused controls never sit under the fixed footer: the footer's own height
   (psw-footer.css models it term-by-term, including the safe-area inset, and
   tracks the CTA count this page renders), then 24px of breathing room — which
   is what the date stamp ends up sitting above (Figma). This must be the only
   bottom space in the mobile scroll area: anything the content column adds
   below its last child stacks onto the 24px. */
.psw-sign {
    --sign-footer-clearance: calc(var(--psw-footer-height) + var(--space-6));
    min-height: 100vh;
    background: var(--color-white);
}

/* Mobile: a 16px page gutter around the header + content; reserve bottom
   clearance for the fixed footer. The workflow_header supplies its own 16px
   top / 24px bottom spacing, so the form needs no top padding. */
.psw-sign__form {
    padding: 0 var(--space-4) var(--sign-footer-clearance);
}

/* Let the signature column shrink within the grid instead of blowing it out.
   Stack its children (the signing composite + the date stamp) — 24px apart on
   mobile, 32px on desktop (see the media query below). */
.psw-sign__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Date stamp below the contract body (Figma 3251:87556): a full-width divider
   over a centered "<state> on <date>" line — "Sent on" until the contract is
   signed, then "Signed on" / "Completed on". Mirrors the receipt page's
   "Paid on" stamp (same divider + gray label / bold dark date). */
.psw-sign__divider {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-gray-200);
}

.psw-sign__stamp {
    margin: 0;
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    color: var(--color-gray-600);
}

.psw-sign__stamp-date {
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

/* Mobile: single column — the summary aside is hidden (the footer carries the
   submit and the header carries the view-contract action). */
.psw-sign__aside {
    display: none;
}

/* Summary card (desktop only): the contract being signed over the "Done"
   submit. White card, 1px gray-200 border, 8px radius, 24px padding, with a
   24px gap down to the submit. */
.psw-sign__summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
    border: var(--border-width-sm) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

/* Contract row: a bare 24px pen icon + the contract name (Paragraph/Medium).
   No disc behind the icon — same treatment as the document summary row
   (psw-document__summary-icon). */
.psw-sign__contract {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.psw-sign__contract-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

/* Override the default themed (blue) icon color — the pen is gray-500 in the
   Figma. Targets the nested .psw-icon directly, like psw-summary's lead icon. */
.psw-sign__contract-icon .psw-icon {
    color: var(--color-gray-500);
}

.psw-sign__contract-name {
    overflow-wrap: anywhere;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    font-weight: var(--font-weight-regular);
    color: var(--color-content-high);
}

@media (min-width: 769px) {
    /* 32px above the heading and below the content; 24px side gutter. */
    .psw-sign__form {
        padding: var(--space-8) var(--space-6);
    }

    /* The date stamp opens up on desktop: 32px above the divider and 32px
       between it and the "Sent on" line. */
    .psw-sign__main {
        gap: var(--space-8);
    }

    /* The heading and the grid share a centered 1128px container so their left
       edges align (Figma x=156 on a 1440 artboard). */
    .psw-sign__form > .psw-workflow-header,
    .psw-sign__layout {
        max-width: 1128px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Two-column grid: 638px signature column + 442px summary card, 48px gutter,
       32px below the heading. The signature column shrinks on narrower desktops;
       the card stays a fixed 442px. */
    .psw-sign__layout {
        display: grid;
        grid-template-columns: minmax(0, 638px) 442px;
        column-gap: 48px;
        margin-top: var(--space-8);
        align-items: start;
    }

    /* Card + branding stack in the right column; the card sticks while the long
       contract body scrolls past it. */
    .psw-sign__aside {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        position: sticky;
        top: var(--space-8);
    }
}
}