@layer pages {
/* Review widget (/write-review/<uri>?v=2). Components own controls and
   primitives; this page layer owns only the review frame and flow-specific
   composition. */

.psw-review {
    --review-width: 744px;
    --review-card-width: 680px;
    /* The footer's own height (psw-footer.css's --psw-footer-height, which
       tracks the CTA count — the posted state's button-less bar included) +
       the 24px content-to-footer gap every mobile screen keeps. Nothing inside
       this page may add bottom space of its own; it stacks onto the 24px. */
    --review-mobile-footer-clearance: calc(var(--psw-footer-height) + var(--space-6));
    min-height: 100vh;
    background: var(--color-white);
    padding-bottom: var(--review-mobile-footer-clearance);
    color: var(--color-content-high);
    font-family: var(--font-sans);
}

.psw-review__shell {
    width: 100%;
    max-width: var(--review-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* No bottom padding on mobile: .psw-review above already reserves the
       footer's height + the design's 24px. The desktop @media adds 40px, where
       that reserve is zeroed. */
    padding: 0 var(--space-4);
    background: var(--color-white);
}

.psw-review__header {
    width: 100%;
}

.psw-review__header .psw-avatar-banner {
    height: 120px;
    margin-inline: calc(-1 * var(--space-4));
}

/* Bottom padding equals the card's overlap into the banner, so the centered
   avatar sits 24px from the banner top AND 24px above the card at each width. */
.psw-review__header .psw-avatar-banner--top-left {
    padding-block: 0 var(--space-6);
}

.psw-review__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.psw-review__card {
    width: 100%;
    max-width: var(--review-card-width);
    display: flex;
    flex-direction: column;
    gap: 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);
    margin-top: calc(-1 * var(--space-6) - var(--space-4));
}

/* The 24px gap is what caps the title/date width — a long name wraps against
   the avatar instead of colliding with it. */
.psw-review__transaction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    width: 100%;
}

.psw-review__transaction-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.psw-review__transaction-title,
.psw-review__transaction-date,
.psw-review__post-name,
.psw-review__post-date,
.psw-review__post-memo,
.psw-review__status-title,
.psw-review__status-subtitle {
    margin: 0;
}

.psw-review__transaction-title {
    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);
    overflow-wrap: anywhere;
}

.psw-review__transaction-date {
    font-size: var(--text-paragraph-lg);
    line-height: var(--text-paragraph-lg--line-height);
    font-weight: var(--font-weight-regular);
    color: var(--color-content-medium);
}

.psw-review__transaction > .psw-avatar {
    width: 80px;
    height: 80px;
}

/* Fallback glyph fills half the disc: 40px in the 80px mobile disc (desktop
   restores 56px below). The disc is server-rendered at xxl and only shrunk
   here, so target the xxl glyph — a degraded lg asset keeps its own size. */
.psw-review__transaction > .psw-avatar .psw-icon--xxl {
    width: 40px;
    height: 40px;
}

/* The card's 24px gap over-spaces the hairline on mobile — pull it back to
   16px above and below; desktop restores the full 24px. */
.psw-review__divider {
    width: 100%;
    margin: calc(-1 * var(--space-2)) 0;
    border: 0;
    border-top: var(--border-width-sm) solid var(--color-gray-200);
}

.psw-review__rating,
.psw-review__comment,
.psw-review__action,
.psw-review__branding {
    width: 100%;
}

.psw-review__comment[hidden] {
    display: none;
}

.psw-review__branding {
    display: flex;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
}

.psw-review__branding--desktop {
    display: none;
}

.psw-review__action--desktop {
    display: none;
}

/* Existing-review view --------------------------------------------------- */

.psw-review__post-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
}

.psw-review__post-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.psw-review__post-name {
    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-review__post-date,
.psw-review__post-memo {
    font-size: var(--text-paragraph-sm);
    line-height: var(--text-paragraph-sm--line-height);
    font-weight: var(--font-weight-regular);
    color: var(--color-content-medium);
}

.psw-review__post-memo {
    color: var(--color-content-high);
    white-space: pre-wrap;
}

.psw-review__post .psw-rating {
    align-items: flex-start;
    gap: 0;
}

.psw-review__post .psw-rating__stars {
    justify-content: flex-start;
}

.psw-review__post .psw-rating__star {
    width: 20px;
    height: 20px;
}

.psw-review__post .psw-rating__star-svg {
    width: 16px;
    height: 16px;
}

.psw-review__response {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-gray-100);
}

.psw-review__post-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}

/* Status screens -------------------------------------------------------- */

.psw-review--status {
    display: flex;
    align-items: center;
}

.psw-review__status-shell {
    width: 100%;
    max-width: var(--review-card-width);
    margin: 0 auto;
    padding: var(--space-8) var(--space-8) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.psw-review__status-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
}

.psw-review__status-icon {
    width: 116px;
    height: 116px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-max);
    background: var(--color-gray-100);
    color: var(--color-gray-500);
}

.psw-review__status-icon .psw-icon {
    width: 52px;
    height: 52px;
    color: currentColor;
}

.psw-review__status-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}

.psw-review__status-title {
    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-review__status-subtitle {
    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) {
    .psw-review {
        background: var(--color-gray-100);
        padding-bottom: 0;
    }

    .psw-review__shell {
        gap: var(--space-10);
        padding: 0 var(--space-8) var(--space-10);
    }

    .psw-review__header .psw-avatar-banner {
        height: calc(var(--space-10) + var(--space-10) + var(--space-10) + var(--space-5));
        margin-inline: calc(-1 * var(--space-8));
    }

    /* Desktop card overlap is 44px (84px pull minus the 40px shell gap). */
    .psw-review__header .psw-avatar-banner--top-left {
        padding-block: 0 calc(var(--space-10) + var(--space-1));
    }

    .psw-review__card {
        padding: var(--space-6);
        margin-top: calc(-1 * var(--space-10) - var(--space-1) - var(--space-10));
    }

    .psw-review__divider {
        margin: 0;
    }

    .psw-review__transaction-copy {
        gap: var(--space-2);
    }

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

    .psw-review__transaction > .psw-avatar {
        width: 116px;
        height: 116px;
    }

    /* Desktop disc is the full 116px, so the glyph returns to its xxl 56px
       (the base rule shrinks it for the 80px mobile disc; the pages layer
       outranks the components-layer psw-icon--xxl, so restate it here). */
    .psw-review__transaction > .psw-avatar .psw-icon--xxl {
        width: 56px;
        height: 56px;
    }

    .psw-review__branding--desktop {
        display: flex;
        padding: var(--space-10) var(--space-4);
    }

    .psw-review__action--desktop {
        display: block;
    }

    .psw-review--status {
        background: var(--color-white);
    }

    .psw-review__status-shell {
        padding: var(--space-8) var(--space-6);
    }

    .psw-review__status-card {
        gap: var(--space-8);
    }

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

/* Google reviews list -----------------------------------------------------
   /book/<uri>/reviews (posts.html). Reuses the __post* card rules above — the
   Figma card is the same object — and adds the two-column page chrome, which
   follows
   pages/psw-record.css: single column under the workflow_header on mobile with
   the CTAs in the sticky footer, and at >=769px a centered 1128px container
   splitting a 638px content column from a 442px sticky summary card. */

.psw-review--google {
    padding: 0 var(--space-4) var(--review-mobile-footer-clearance);
}

.psw-review__main {
    min-width: 0;
}

/* Mobile: the summary lives at the top of the content column, so the aside
   (which carries the desktop copy plus the branding) is hidden outright. */
.psw-review__aside {
    display: none;
}

.psw-review__summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-4);
    border: var(--border-width-sm) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

.psw-review__summary--mobile {
    margin-bottom: var(--space-6);
}

.psw-review__summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.psw-review__summary-score {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.psw-review__summary-rating {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Same filled-star color as the per-review stars (components/psw-rating.css)
   so the summary and the cards below it read as one scale. */
.psw-review__summary-star {
    flex: 0 0 auto;
    display: inline-flex;
    width: 20px;
    height: 20px;
    color: var(--color-warning-400);
}

.psw-review__summary-star svg {
    display: block;
    width: 100%;
    height: 100%;
}

.psw-review__summary-value {
    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-review__summary-max,
.psw-review__summary-count {
    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);
}

.psw-review__summary-logo {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: var(--border-width-sm) solid var(--color-gray-200);
    border-radius: var(--radius-max);
}

/* Stacked on mobile (only ever rendered inside the desktop aside today, but
   the stack is the safe base); side by side once the card is 442px wide. */
.psw-review__summary-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.psw-review__list {
    display: flex;
    flex-direction: column;
}

.psw-review__google-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6) 0;
}

/* Hairline between consecutive reviews only — no leading or trailing rule on
   the list, per the Figma. */
.psw-review__list > .psw-review__google-card + .psw-review__google-card {
    border-top: var(--border-width-sm) solid var(--color-gray-200);
}

/* The leading card contributes no top padding — same reasoning as the missing
   leading rule. The block above owns that gap (24px under the mobile summary
   card, 32px under the desktop header), and the card's own 24px would stack
   onto it. */
.psw-review__list > .psw-review__google-card:first-child {
    padding-top: 0;
}

/* Same at the tail on mobile: the trailing card has no rule under it either, so
   its 24px is just whitespace stacking onto the page's 24px footer gap. Desktop
   keeps it — there the page padding below is the only thing separating the list
   from the viewport edge. */
.psw-review__list > .psw-review__google-card:last-child {
    padding-bottom: 0;
}

/* Google-card head: avatar vertically centered on the meta stack, 4px between
   name / stars / date, 2px between the stars. Scoped to this page — the
   existing-review view keeps the base 8px/4px treatment. */
.psw-review--google .psw-review__post-head {
    align-items: center;
}

.psw-review--google .psw-review__post-meta {
    gap: var(--space-1);
}

.psw-review--google .psw-review__post .psw-rating__stars {
    gap: 2px;
}

/* Review body reads at Paragraph/Medium here; the inline Show more / Show less
   toggle shares the line so it steps up with it. */
.psw-review--google .psw-review__post-memo,
.psw-review--google .psw-review__post-memo .psw-sneak-peek__toggle {
    font-size: var(--text-paragraph-md);
    line-height: var(--text-paragraph-md--line-height);
}

@media (min-width: 769px) {
    /* The leave-a-review flow floats a white card on a gray-100 canvas; these
       pages are white to the edges (Figma), with the summary card's border
       doing the separating. */
    .psw-review--google {
        padding: var(--space-8) var(--space-6);
        background: var(--color-white);
    }

    .psw-review__list > .psw-review__google-card:last-child {
        padding-bottom: var(--space-6);
    }

    /* Header and grid share one centered container so their left edges line up. */
    .psw-review--google > .psw-workflow-header,
    .psw-review__layout {
        max-width: 1128px;
        margin-left: auto;
        margin-right: auto;
    }

    .psw-review__layout {
        display: grid;
        grid-template-columns: minmax(0, 638px) 442px;
        column-gap: 48px;
        margin-top: var(--space-8);
        align-items: start;
    }

    .psw-review__aside {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        position: sticky;
        top: var(--space-8);
    }

    .psw-review__summary {
        padding: var(--space-6);
    }

    /* The aside copy takes over; the in-column copy would be a duplicate. */
    .psw-review__summary--mobile {
        display: none;
    }

    .psw-review__summary-actions {
        flex-direction: row;
    }

    .psw-review__summary-actions > * {
        flex: 1 1 0;
        min-width: 0;
    }
}
}