/* Core app surfaces should use the browser width like a dense music app. */
:root {
    --app-shell-gutter: clamp(18px, 2vw, 56px);
}

@media (min-width: 981px) {
    body:is(
        .home-page,
        .radio-page,
        .explore-page,
        .rooms-page,
        .library-page,
        .favorites-page,
        .profile-page,
        .public-profile-page,
        .notifications-page,
        .my-space-page,
        .public-space-page,
        .premium-page,
        .auth-page,
        .song-page,
        .journal-page,
        .status-page,
        .support-page,
        .weather-page,
        .help-page,
        .contact-page,
        .legal-page
    ) .page-shell {
        width: auto;
        max-width: none;
        margin-right: var(--app-shell-gutter);
        margin-left: calc(var(--sidebar-width) + var(--app-shell-gutter));
    }

    body.library-page .page-shell {
        margin-left: calc(var(--sidebar-width) + var(--app-shell-gutter) + 8px);
    }

    body:is(
        .home-page,
        .radio-page,
        .explore-page,
        .rooms-page,
        .library-page,
        .favorites-page,
        .profile-page,
        .public-profile-page,
        .notifications-page,
        .my-space-page,
        .public-space-page,
        .premium-page,
        .auth-page,
        .admin-page,
        .song-page,
        .journal-page,
        .status-page,
        .support-page,
        .weather-page,
        .help-page,
        .contact-page,
        .legal-page
    ) .global-player,
    body.player-is-compact:is(
        .home-page,
        .radio-page,
        .explore-page,
        .rooms-page,
        .library-page,
        .favorites-page,
        .profile-page,
        .public-profile-page,
        .notifications-page,
        .my-space-page,
        .public-space-page,
        .premium-page,
        .auth-page,
        .admin-page,
        .song-page,
        .journal-page,
        .status-page,
        .support-page,
        .weather-page,
        .help-page,
        .contact-page,
        .legal-page
    ) .global-player {
        right: var(--app-shell-gutter);
        left: calc(var(--sidebar-width) + var(--app-shell-gutter));
    }

    body.library-page .global-player,
    body.player-is-compact.library-page .global-player {
        left: calc(var(--sidebar-width) + var(--app-shell-gutter) + 8px);
    }

    body.player-is-compact:is(
        .home-page,
        .radio-page,
        .explore-page,
        .rooms-page,
        .library-page,
        .favorites-page,
        .profile-page,
        .public-profile-page,
        .notifications-page,
        .my-space-page,
        .public-space-page,
        .premium-page,
        .auth-page,
        .admin-page,
        .song-page,
        .journal-page,
        .status-page,
        .support-page,
        .weather-page,
        .help-page,
        .contact-page,
        .legal-page
    ) .global-player {
        left: calc(var(--sidebar-width) + ((100vw - var(--sidebar-width)) / 2));
        right: auto;
        width: min(760px, calc(100vw - var(--sidebar-width) - (var(--app-shell-gutter) * 2)));
        transform: translateX(-50%);
    }
}

@media (min-width: 2200px) {
    :root {
        --app-shell-gutter: clamp(40px, 2.4vw, 92px);
    }
}

@media (min-width: 1600px) {
    body:is(
        .home-page,
        .radio-page,
        .explore-page,
        .rooms-page,
        .library-page,
        .favorites-page,
        .profile-page,
        .public-profile-page,
        .notifications-page,
        .my-space-page,
        .public-space-page,
        .premium-page,
        .auth-page,
        .admin-page,
        .song-page,
        .journal-page,
        .status-page,
        .support-page,
        .weather-page,
        .help-page,
        .contact-page,
        .legal-page
    ) .global-player {
        left: calc(var(--sidebar-width) + ((100vw - var(--sidebar-width)) / 2));
        right: auto;
        width: min(1440px, calc(100vw - var(--sidebar-width) - (var(--app-shell-gutter) * 2)));
        transform: translateX(-50%);
    }

    body.player-is-compact:is(
        .home-page,
        .radio-page,
        .explore-page,
        .rooms-page,
        .library-page,
        .favorites-page,
        .profile-page,
        .public-profile-page,
        .notifications-page,
        .my-space-page,
        .public-space-page,
        .premium-page,
        .auth-page,
        .admin-page,
        .song-page,
        .journal-page,
        .status-page,
        .support-page,
        .weather-page,
        .help-page,
        .contact-page,
        .legal-page
    ) .global-player {
        width: min(760px, calc(100vw - var(--sidebar-width) - (var(--app-shell-gutter) * 2)));
    }
}

@media (max-width: 980px) {
    body:is(
        .home-page,
        .radio-page,
        .explore-page,
        .rooms-page,
        .library-page,
        .favorites-page,
        .profile-page,
        .public-profile-page,
        .notifications-page,
        .my-space-page,
        .public-space-page,
        .premium-page,
        .auth-page,
        .song-page,
        .journal-page,
        .status-page,
        .support-page,
        .weather-page,
        .help-page,
        .contact-page,
        .legal-page
    ) .page-shell {
        width: calc(100% - 24px);
        max-width: none;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    body:is(
        .home-page,
        .radio-page,
        .explore-page,
        .rooms-page,
        .library-page,
        .favorites-page,
        .profile-page,
        .public-profile-page,
        .notifications-page,
        .my-space-page,
        .public-space-page,
        .premium-page,
        .auth-page,
        .song-page,
        .journal-page,
        .status-page,
        .support-page,
        .weather-page,
        .help-page,
        .contact-page,
        .legal-page
    ) .page-shell {
        width: calc(100% - 20px);
    }
}

@media (min-width: 981px) {
    body.admin-page .page-shell {
        width: auto;
        max-width: none;
        margin-right: var(--app-shell-gutter);
        margin-left: calc(var(--sidebar-width) + var(--app-shell-gutter));
    }
}

@media (max-width: 980px) {
    body.admin-page .page-shell {
        width: calc(100% - 24px);
        max-width: none;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    body.admin-page .page-shell {
        width: calc(100% - 20px);
    }
}