/* Outer geometry only. Components keep their cards, controls and readable widths. */
body.ofm-app-route {
    --ofm-layout-edge:clamp(18px,3vw,42px);
    --ofm-layout-section-gap:clamp(24px,4vw,40px);
    --ofm-layout-page-top:clamp(28px,4vw,48px);
    --ofm-layout-page-end:clamp(32px,4vw,56px);
}

/* Body already reserves the measured persistent player height. A page's end
   needs breathing room, rather than another fixed player-height spacer. */
body.ofm-app-route #content main:is(
    .ofm-public-page,.ofm-controller-dashboard,.ofm-insights,.ofm-artist-studio,
    .ofm-editor-review-portal,.ofm-competition-review,.ofm-competition-admin,
    .ofm-member-profile,.ofm-library,.ofm-account,.ofm-notifications,
    .ofm-listener-home,.ofm-following-feed,.ofm-beat-store,.ofm-public-profile,
    .ofm-public-search,.ofm-public-catalogue,.ofm-public-playlist-page,
    .ofm-content-document,.ofm-home,.ofm-station-page,.ofm-station-download-page
) {
    box-sizing:border-box;
    min-inline-size:0;
    min-block-size:calc(100dvh - var(--ofm-app-shell-header-clearance,72px));
    padding-block-end:var(--ofm-layout-page-end);
}

body.ofm-app-route #content main:is(
    .ofm-controller-dashboard,.ofm-insights,.ofm-artist-studio,
    .ofm-editor-review-portal,.ofm-competition-review,.ofm-competition-admin,
    .ofm-member-profile,.ofm-library,.ofm-account,.ofm-notifications,
    .ofm-listener-home,.ofm-following-feed,.ofm-beat-store,.ofm-public-profile,
    .ofm-public-search,.ofm-public-catalogue,.ofm-public-playlist-page,.ofm-content-document,
    .ofm-station-page,.ofm-station-download-page
) {
    margin-block:0;
    padding-block-start:var(--ofm-layout-page-top);
}

/* Already centered, bounded workspaces need one inner gutter. */
body.ofm-app-route #content main:is(
    .ofm-controller-dashboard,.ofm-insights,.ofm-competition-review,
    .ofm-competition-admin,.ofm-library,.ofm-account,.ofm-notifications,.ofm-public-profile
) {
    padding-inline:var(--ofm-layout-edge);
}

/* Full-width shells center their existing content rails without 100vw's
   scrollbar width being added to both side paddings. */
body.ofm-app-route #content main:is(.ofm-artist-studio,.ofm-listener-home) {
    padding-inline:max(var(--ofm-layout-edge),calc((100% - 1180px)/2));
}
body.ofm-app-route #content main:is(.ofm-editor-review-portal,.ofm-beat-store) {
    padding-inline:max(var(--ofm-layout-edge),calc((100% - 1240px)/2));
}
body.ofm-app-route #content main.ofm-following-feed {
    padding-inline:max(var(--ofm-layout-edge),calc((100% - 960px)/2));
}
body.ofm-app-route #content main.ofm-member-profile {
    inline-size:100%;
    max-inline-size:none;
    margin-inline:0;
    padding-inline:max(var(--ofm-layout-edge),calc((100% - 960px)/2));
}

/* Public page sections already contain centered rails. */
body.ofm-app-route #content main.ofm-public-page {
    --ofm-public-page-edge:var(--ofm-layout-edge);
}
body.ofm-app-route #content main.ofm-home[data-ofm-home-discovery] .ofm-container {
    inline-size:min(1200px,calc(100% - var(--ofm-layout-edge) - var(--ofm-layout-edge)));
}
body.ofm-app-route #content main.ofm-home[data-ofm-home-discovery] .ofm-home-discovery {
    padding-block-end:calc(var(--ofm-layout-section-gap)/2);
}
body.ofm-app-route #content main.ofm-home[data-ofm-home-discovery] .ofm-home-rails {
    padding-block-start:calc(var(--ofm-layout-section-gap)/2);
    padding-block-end:0;
}
body.ofm-app-route #content main[data-ofm-public-playlist-archive] {
    padding-block-start:var(--ofm-layout-page-top);
    padding-inline:var(--ofm-layout-edge);
}
body.ofm-app-route #content main[data-ofm-public-search] {
    padding-block-start:var(--ofm-layout-page-top);
    padding-inline:var(--ofm-layout-edge);
}
body.ofm-app-route #content main:is(.ofm-public-catalogue,.ofm-public-playlist-page) {
    padding-inline:var(--ofm-layout-edge);
}
body.ofm-app-route #content main.ofm-content-document {
    inline-size:min(900px,calc(100% - var(--ofm-layout-edge) - var(--ofm-layout-edge)));
    margin-inline:auto;
}
body.ofm-app-route #content main.ofm-content-document.ofm-fallback-route {
    padding-inline:0;
}
/* A workspace rendered inside the normal document card inherits that card's
   inset. Its own page padding and viewport minimum must not repeat there. */
body.ofm-app-route #content .ofm-content-document__surface > main:is(
    .ofm-controller-dashboard,.ofm-insights,.ofm-artist-studio,
    .ofm-editor-review-portal,.ofm-competition-review,.ofm-competition-admin,
    .ofm-member-profile,.ofm-library,.ofm-account,.ofm-notifications,
    .ofm-listener-home,.ofm-following-feed,.ofm-beat-store
) {
    min-block-size:0;
    padding:0;
}
body.ofm-app-route #content .ofm-explore__hero {
    padding-block:var(--ofm-layout-page-top) var(--ofm-layout-section-gap);
}
body.ofm-app-route #content .ofm-explore__content :is(.ofm-explore__section,.ofm-explore__for-you) {
    margin-block-start:var(--ofm-layout-section-gap);
}
body.ofm-app-route #content .ofm-explore__content .ofm-explore__section:first-child {
    margin-block-start:0;
}
body.ofm-app-route #content main.ofm-station-page .ofm-station-release-hero {
    inline-size:min(1060px,calc(100% - var(--ofm-layout-edge) - var(--ofm-layout-edge)));
    margin-block-start:0;
}
body.ofm-app-route #content main.ofm-station-page :is(
    .ofm-station-release-fallback,[data-ofm-station-content],[data-ofm-station-release-details]
) {
    inline-size:min(960px,calc(100% - var(--ofm-layout-edge) - var(--ofm-layout-edge)));
}
body.ofm-app-route #content main.ofm-station-page .ofm-station-release-fallback {
    margin-block-start:0;
}
body.ofm-app-route #content main.ofm-station-download-page .ofm-station-download {
    inline-size:min(980px,calc(100% - var(--ofm-layout-edge) - var(--ofm-layout-edge)));
}
body.ofm-app-route #content main.ofm-station-download-page .ofm-station-download-gate {
    inline-size:min(620px,calc(100% - var(--ofm-layout-edge) - var(--ofm-layout-edge)));
    margin-block:0;
}
body.ofm-app-route #content main.ofm-station-download-page .ofm-station-download__not-found {
    inline-size:min(680px,calc(100% - var(--ofm-layout-edge) - var(--ofm-layout-edge)));
    margin-block:0;
}

/* Competition previously stacked content + section + tab padding. Use one
   gap, split around section dividers, including the Beat Store boundary. */
body.ofm-app-route #content .ofm-competition-hub__hero,
body.ofm-app-route #content .ofm-competition-hub__archive-hero {
    padding-block:var(--ofm-layout-page-top) var(--ofm-layout-section-gap);
}
body.ofm-app-route #content .ofm-competition-hub__content {
    padding-block:0;
}
body.ofm-app-route #content .ofm-competition-hub__tabs {
    padding-block-end:var(--ofm-layout-section-gap);
}
body.ofm-app-route #content .ofm-competition-hub__content > .ofm-public-page__container > .ofm-competition-hub__section {
    padding-block:0;
}
body.ofm-app-route #content .ofm-competition-hub__content > .ofm-public-page__container > .ofm-competition-hub__section + .ofm-competition-hub__section {
    margin-block-start:calc(var(--ofm-layout-section-gap)/2);
    padding-block-start:calc(var(--ofm-layout-section-gap)/2);
}
body.ofm-app-route #content .ofm-competition-hub__content > .ofm-public-page__container > .ofm-competition-hub__section:last-child {
    padding-block-end:var(--ofm-layout-section-gap);
}

/* Detail pages use the same outer gap without stacking hero, content and
   lifecycle padding. Only direct sections participate; card padding remains. */
body.ofm-app-route #content main.ofm-competition-hub--detail .ofm-competition-hub__crumb {
    padding-block-start:var(--ofm-layout-page-top);
}
body.ofm-app-route #content main.ofm-competition-hub--detail .ofm-competition-hub__detail-hero {
    padding-block:var(--ofm-layout-section-gap);
}
body.ofm-app-route #content main.ofm-competition-hub--detail .ofm-competition-hub__detail-content {
    padding-block:0;
}
body.ofm-app-route #content main.ofm-competition-hub--detail .ofm-competition-hub__detail-content > section {
    margin-block:0;
}
body.ofm-app-route #content main.ofm-competition-hub--detail .ofm-competition-hub__detail-content > .ofm-competition-hub__section {
    padding-block:0;
}
body.ofm-app-route #content main.ofm-competition-hub--detail .ofm-competition-hub__detail-content > section + section {
    margin-block-start:var(--ofm-layout-section-gap);
}
body.ofm-app-route #content main.ofm-competition-hub--detail .ofm-competition-hub__detail-content > .ofm-competition-hub__section + .ofm-competition-hub__section {
    margin-block-start:calc(var(--ofm-layout-section-gap)/2);
    padding-block-start:calc(var(--ofm-layout-section-gap)/2);
}

/* A rating tooltip anchored to its small icon overflowed the review page
   even while hidden. Anchor it to the whole field so it fits when focused. */
body.ofm-app-route #content .ofm-competition-review__rating-label {
    position:static;
}
body.ofm-app-route #content .ofm-competition-review__rating-tooltip {
    box-sizing:border-box;
    inset-inline-start:0;
    inline-size:min(214px,100%);
    max-inline-size:100%;
}
/* The artwork score is a narrow column beside its preview. Its help uses
   the complete artwork row, rather than squeezing into that small column. */
body.ofm-app-route #content .ofm-competition-review__artwork-body {
    position:relative;
}
body.ofm-app-route #content [data-ofm-competition-artwork-rating-field] {
    position:static;
}
body.ofm-app-route #content [data-ofm-competition-artwork-rating-field] .ofm-competition-review__rating-tooltip {
    inset-inline-start:auto;
    inset-inline-end:0;
}

/* Notification copy has a nested grid. Constrain its single track so long
   titles stay inside the inbox instead of widening the page on mobile. */
body.ofm-app-route #content .ofm-notifications__copy {
    grid-template-columns:minmax(0,1fr);
}

@media(max-width:720px) {
    body.ofm-app-route { --ofm-layout-edge:16px; }
}