@layer pages {
/* Forms widget flow (/form|record/<uri>?v=2) -> .psw-record. The shared
   two-column scaffold (widget/record/base.html) behind the form-fill, sign and
   read-only record steps. Mirrors pages/psw-sign.css: a single column under a
   compact workflow_header on mobile (submit in the sticky `footer`), and at
   >=769px a centered 1128px container with a 638px content column + a 442px
   form-summary card split by a 48px gutter (the footer hides itself). The
   completion screen is built from success_shell, 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 — the read-only record view's
   button-less footer included), then 24px of breathing room — which is what
   the last field 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-record {
    --record-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. The read-only
   record view usually renders a button-less footer, so the clearance
   over-reserves a button row there; harmless, and it keeps one constant. */
.psw-record__form {
    padding: 0 var(--space-4) var(--record-footer-clearance);
}

/* Let the content column shrink within the grid instead of blowing it out. */
.psw-record__main {
    min-width: 0;
}

/* Intro text above the fields: gray, with 24px down to the first field. Two
   sources — the pro-authored form memo (submit.html, Figma 1306:83962) and the
   register step's "Add some info about yourself" helper (register.html, Figma
   3735:66864). `p` is reset to margin:0 (elements/base.css), so margin-bottom
   alone is correct on both the memo's div and the helper's p. */
.psw-record__memo,
.psw-record__intro {
    margin-bottom: var(--space-6);
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    color: var(--color-content-medium);
    overflow-wrap: anywhere;
}

/* Read-only completed record: a stacked label/value list. Figma spaces the
   field groups 24px apart on mobile (3810:129859) and 32px on desktop
   (3810:130201). */
.psw-record__values {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin: 0;
}

@media (min-width: 769px) {
    .psw-record__values {
        gap: var(--space-8);
    }
}

/* The question carries the emphasis, the answer recedes (Figma 3810:129859 /
   3810:130201): the label is Label/Medium 16px bold dark, the value below it
   Paragraph/Medium 16px regular gray. (Deliberately heavier than the value —
   don't swap them back.) */
.psw-record__value-label {
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    line-height: var(--text-label-md--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

.psw-record__value-data {
    /* Figma sets the label -> value gap at 12px. */
    margin: var(--space-3) 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
    color: var(--color-content-medium);
    /* Preserve newlines in long-text answers without raw-rendering untrusted
       client input. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* An uploaded image/document answer renders the read-only psw-upload card
   wrapped in a link so the file stays openable. Strip the link chrome so the
   wrapper reads as the static card the Figma shows. Reset white-space (the
   value cell sets pre-wrap for text answers, which inherits into the card and
   would otherwise render its markup's newlines as blank vertical space). */
.psw-record__file {
    display: block;
    text-decoration: none;
    color: inherit;
    white-space: normal;
}

/* The file-card branch nests the card + template indentation directly in the
   value cell. .psw-record__file above only resets white-space *inside* the
   anchor; the cell's own pre-wrap still renders the newlines wrapping the anchor
   as ~24px blank lines above and below the card. Reset it on the cell too — the
   card has no author newlines to preserve (text answers keep pre-wrap). */
.psw-record__value-data--file {
    white-space: normal;
}

/* Date stamp below the form body (_date_stamp.html): a full-width divider over a
   centered "<state> on <date>" line — "Sent on" while the form is open, then
   "Completed on" once submitted. Same treatment as the sign page's stamp; here
   the content column already carries its own bottom spacing, so the stamp sets
   top margins rather than relying on a flex gap. 24px on mobile, stepped up to
   32px on desktop below. */
.psw-record__divider {
    width: 100%;
    height: 0;
    margin: var(--space-6) 0 0;
    border: 0;
    border-top: 1px solid var(--color-gray-200);
}

.psw-record__stamp {
    margin: var(--space-6) 0 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-record__stamp-date {
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
}

@media (min-width: 769px) {
    /* Desktop opens the stamp block up to 32px — above the divider and between
       it and the date line (Figma 3810:130201). */
    .psw-record__divider,
    .psw-record__stamp {
        margin-top: var(--space-8);
    }
}

/* Read-only completed record on success_shell (record.html): the answers sit in
   a borderless column that matches the shell hero's measure — full-bleed on
   mobile, a centered 580px column on desktop so the labels line up under the
   centered hero (Figma 3810:129859 / 3810:130201). The shell owns the banner,
   hero and branding; this only sets the answers block's width and its 40px gap
   below the form name — the same at both widths, unlike the shell content card
   this block replaces (24px mobile / 40px desktop). */
.psw-record-readonly__answers {
    margin-top: var(--space-10);
}

/* The subtitle here is the form name, read as a document subtitle — Paragraph/
   Large (18px), not the shell's default confirmation-sentence Paragraph/Medium
   (Figma 3810:129859 / 3810:130201). Scoped to this view so the "you're all set"
   completion screens keep the shell default. */
.psw-record-readonly .psw-success-shell__subtitle {
    font-size: var(--text-paragraph-lg);
    line-height: var(--text-paragraph-lg--line-height);
}

/* Divider between the "Completed on" stamp and the stacked branding. Desktop
   only: on mobile the branding lives in the sticky footer, whose own top border
   already separates it from the stamp. */
.psw-record-readonly__branding-divider {
    display: none;
}

@media (min-width: 769px) {
    .psw-record-readonly__answers {
        max-width: 580px;
        margin-inline: auto;
    }

    /* 32px below the stamp, matching the gap above the stamp's own divider. */
    .psw-record-readonly__branding-divider {
        display: block;
        width: 100%;
        height: 0;
        margin: var(--space-8) 0 0;
        border: 0;
        border-top: 1px solid var(--color-gray-200);
    }
}

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

/* Summary card (desktop only): the form being filled (pen icon + name) over the
   submit. White card, 1px gray-200 border, 8px radius, 24px padding, 24px gap
   down to the submit. */
.psw-record__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);
}

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

.psw-record__summary-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 field icon is gray-600
   in the Figma. Targets the nested .psw-icon directly, like the sign page's card. */
.psw-record__summary-icon .psw-icon {
    color: var(--color-content-medium);
}

.psw-record__summary-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-record__form {
        padding: var(--space-8) var(--space-6);
    }

    /* Desktop gives the intro text 32px down to the first field (mobile keeps
       24px) — Figma. */
    .psw-record__memo,
    .psw-record__intro {
        margin-bottom: 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-record__form > .psw-workflow-header,
    .psw-record__layout {
        max-width: 1128px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Two-column grid: 638px content column + 442px summary card, 48px gutter,
       32px below the heading. The content column shrinks on narrower desktops;
       the card stays a fixed 442px. */
    .psw-record__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
       content scrolls past it. */
    .psw-record__aside {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        position: sticky;
        top: var(--space-8);
    }
}
}