@layer components {
/* Workflow / data-entry header — navigation bar at the top of in-flow widget
   screens. A back control, a wrapping screen title, and (mobile only) an
   action control (plain icon button, or a hosted shopping_cart). White
   background.

   Two viewport-responsive treatments share one markup:
     mobile  - a 48px-tall row of 48px white circular tertiary icon buttons
               (radius-max, 24px icon) flanking an 18/24 bold title CENTERED
               between them; the right-hand action is shown. The buttons hang
               12px into the page gutter (negative slot margins) so the 24px
               icon — not the padded button box — lands on the content column
               edge below. Reduced 4px/12px vertical padding keeps the 64px
               header footprint and the icon's 16px top offset from the old
               flat-24px row (the circle's built-in air replaces the padding).
     desktop - the heading that sits above the page's two-column layout: 24/32
               bold title LEFT-aligned next to an optional 36px square back
               button; NO right-hand action (desktop flows use a modal with its
               own close affordance). The page owns the column width, the outer
               gutter, and the vertical spacing around the heading.

   The fixed-width lead/trail slots reserve the control footprint so the
   centered mobile title stays centered even when a control is absent. The icon
   buttons render the icon_button base (tertiary/md/circle) as-is on mobile — a
   48px white circle (Figma 3745:232730) — and override it to a 36px bordered
   square on desktop.

   The desktop split happens at 769px — matching the page's column split and the
   sibling composites (footer, sign_contract) — so a single mobile rendering
   holds across the whole phone/tablet band rather than flipping early. */

.psw-workflow-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);                        /* 8px between the controls and the title */
    /* 4px above / 12px below: the 48px circle button carries 12px of built-in
       air around its 24px icon, so trimming the padding by that much keeps the
       old 64px footprint and the icon's 16px top offset. No horizontal padding
       — the page gutter (e.g. 16px on the sign page) supplies the inset. */
    padding: var(--space-1) 0 var(--space-3);
    /* Hold the row at the 48px icon-button height even on a title-only screen,
       so a header with no controls keeps the same 64px footprint as one with
       them (border-box, so this counts the 4px/12px padding above). Desktop
       overrides it with its own 36px floor below. */
    min-height: calc(48px + var(--space-1) + var(--space-3));
    background: var(--color-white);
}

/* Fixed-width slots reserve the 48px circle-button footprint so the centered
   mobile title doesn't shift when a control is omitted. The negative outer
   margin hangs the button 12px into the page gutter so its 24px icon — not the
   padded box — sits on the content column edge. */
.psw-workflow-header__lead,
.psw-workflow-header__trail {
    display: flex;
    flex: 0 0 48px;
}

.psw-workflow-header__lead {
    margin-left: -12px;
}

.psw-workflow-header__trail {
    justify-content: flex-end;
    margin-right: -12px;
}

/* Embedded in the widget.js modal, whose close X is painted over this page's
   top-right corner (22px in, 18px wide): step the action inward so the two clear
   each other. An empty slot keeps its gutter hang — there is nothing to move. */
.psw-embedded .psw-workflow-header__trail:not(:empty) {
    margin-right: var(--space-8);
}

.psw-workflow-header__title {
    flex: 1 1 auto;
    /* Allow the flex child to shrink so long titles wrap instead of pushing
       the controls off-screen. */
    min-width: 0;
    margin: 0;
    text-align: center;
    overflow-wrap: anywhere;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-high);
    font-size: var(--text-label-lg);                 /* mobile: 18/24 */
    line-height: var(--text-label-lg--line-height);
}

/* Trailing count inside the heading ("Reviews (139)"): Label/Medium bold in
   the medium content color at every width, so it reads as secondary to the
   title without leaving the <h1>'s accessible name. */
.psw-workflow-header__title-suffix {
    font-size: var(--text-label-md);
    line-height: var(--text-label-md--line-height);
    font-weight: var(--font-weight-bold);
    color: var(--color-content-medium);
}

/* Mobile keeps the icon_button base untouched — a 48px white tertiary circle
   with a 24px icon — so no icon-button footprint override lives here. */

@media (min-width: 769px) {
    /* Heading above the page's two-column layout — the page owns the column
       width, the outer gutter, and the vertical spacing around it. min-height
       holds a back-less header at the same 36px as one with a 36px back button,
       so navigating between screens with and without a back control doesn't
       jump the title. Restore the 16px control/title gap (the mobile row tucks
       it to 8px). */
    .psw-workflow-header {
        padding: 0;
        min-height: 36px;
        gap: var(--space-4);
    }

    /* Desktop flows use a modal with its own close affordance, so the header
       carries no right-hand action there — it's mobile-only. */
    .psw-workflow-header__trail {
        display: none;
    }

    /* Back button flush to the column — drop the mobile gutter hang. */
    .psw-workflow-header__lead {
        flex: 0 0 36px;
        margin-left: 0;
    }

    /* Collapse an absent back slot so a back-less title sits flush left (on
       mobile the empty slot is kept to balance the centered title). */
    .psw-workflow-header__lead:empty {
        display: none;
    }

    .psw-workflow-header__title {
        text-align: left;
        font-size: var(--text-heading-sm);           /* desktop: 24/32 */
        line-height: var(--text-heading-sm--line-height);
    }

    /* Nav-button adaptation: grow to a 36px square, add the 1px border (the
       tertiary base is borderless), and step the icon up to 20px. */
    .psw-workflow-header .psw-btn--icon-only {
        width: 36px;
        height: 36px;
        border-color: var(--color-border-default);
        border-radius: var(--radius-lg);
    }
    .psw-workflow-header .psw-btn--icon-only .psw-icon {
        width: 20px;
        height: 20px;
    }
}
}