/* One shared canvas for the map, listing and business journeys.
   Use the same paper color as the editorial homepage. Only the page shell
   changes; cards, the map itself, overlays and form inputs retain their own
   backgrounds for readability. */
:root {
    --tradel-cream-canvas: #fcfaf4;
}

/* Page detection is based on an existing page-specific content root, not
   a global body override: admin, account, legal and unrelated pages stay as-is. */
body:has(#page-content :is(
    .browse-page,
    .add-listing-hero,
    .provider-intake,
    .business-landing,
    .provider-directory,
    .provider-edit,
    .managed-businesses,
    .provider-claim
)) {
    background: var(--tradel-cream-canvas);
}

/* The legacy white .content-wrapper and #page-content otherwise mask the
   body canvas across the whole desktop width and under the fixed header. */
body:has(#page-content :is(
    .browse-page,
    .add-listing-hero,
    .provider-intake,
    .business-landing,
    .provider-directory,
    .provider-edit,
    .managed-businesses,
    .provider-claim
)) :is(.content-wrapper, #page-content) {
    background: var(--tradel-cream-canvas);
}

/* Some pages have their own opaque full-width section shell. Keep those
   backgrounds in sync, without changing cards, inputs or map tiles. */
body:has(#page-content :is(
    .business-landing,
    .provider-directory,
    .provider-edit,
    .managed-businesses
)) :is(
    .business-landing,
    .provider-directory,
    .provider-edit,
    .managed-businesses
) {
    background: var(--tradel-cream-canvas);
}

/* The shared full-bleed shell removes the 1,400px content frame. Keep the
   business form centered at its existing width and preserve breathing room
   below the fixed desktop header and the in-flow mobile header. */
body:has(#page-content > .provider-intake[data-tradel-full-bleed])
#page-content > .provider-intake[data-tradel-full-bleed] {
    padding-top: calc(var(--tradel-bleed-top, max(73px, var(--header-total-h))) + 36px);
}


/* Settings and account deletion use one full-width paper canvas.
   Their account-clean layout omits the legacy content wrapper; the forms
   remain centered with breathing room below the shared header. */
body.layout-account-clean,
body.layout-account-clean #page-content {
    background: var(--tradel-cream-canvas);
}

body.layout-account-clean #page-content {
    width: 100%;
    min-height: calc(100vh - var(--header-total-h, 80px));
}

body.layout-account-clean #page-content > :is(.account-settings-page, .deletion-page) {
    width: min(920px, calc(100% - 40px));
    margin-inline: auto;
    padding: calc(var(--header-total-h, 80px) + 36px) 0 56px;
}

@media (max-width: 1024px) {
    /* The shared header is in normal document flow at tablet/mobile widths. */
    body.layout-account-clean #page-content > :is(.account-settings-page, .deletion-page) {
        padding-top: 32px;
    }
}

@media (max-width: 480px) {
    body.layout-account-clean #page-content > :is(.account-settings-page, .deletion-page) {
        width: calc(100% - 30px);
        padding-top: 24px;
    }
}