/* Shared page shell: one platform header, title strip, rule, gap, and content
 * surface across player, admin, and static pages. Page-specific layouts keep
 * ownership of their internal controls and repeated cards. */
:root {
    /* Desktop navigation must not shrink the next page back into the legacy
     * centered 1180px canvas. Keep only a responsive gutter; page-level
     * components remain responsible for any deliberately narrow reading view. */
    --app-page-shell-max-width: 100%;
    --app-page-shell-gutter: 16px;
    --app-page-shell-gap: 0.75rem;
    --app-page-shell-background: #f4f4f4;
    --app-page-shell-border: #c4ccd6;
    --app-page-shell-accent: #a8f5b7;
}

body.app-player,
body.player-surface,
body.app-admin,
body.admin-surface,
body.site-front-body {
    background: var(--app-page-shell-background) !important;
    /* baseline.css is retained for legacy components but constrains body to
     * 800px. Reset that old desktop cap before sizing the shared shell. */
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
}

body.app-player > header.site-navigation-shell,
body.player-surface > header.site-navigation-shell,
body.app-admin > header.site-navigation-shell,
body.admin-surface > header.site-navigation-shell,
body.site-front-body > header.site-navigation-shell {
    width: min(var(--app-page-shell-max-width), calc(100% - (var(--app-page-shell-gutter) * 2))) !important;
    margin-inline: auto !important;
}

body.app-player > main.mainbody,
body.player-surface > main.mainbody,
body.app-admin > main.mainbody,
body.admin-surface > main.mainbody,
body.site-front-body .site-front-page {
    box-sizing: border-box;
    width: min(var(--app-page-shell-max-width), calc(100% - (var(--app-page-shell-gutter) * 2))) !important;
    max-width: var(--app-page-shell-max-width) !important;
    margin-inline: auto !important;
}

/* Several routed pages wrap their content in reusable UI containers that
 * carry their own historical 1180px/1440px caps. Those are page surfaces—not
 * narrow reading components—so keep them aligned with the full shared shell
 * after client-side or ordinary link navigation. */
body.app-player > main.mainbody > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page),
body.player-surface > main.mainbody > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page),
body.app-admin > main.mainbody > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page),
body.admin-surface > main.mainbody > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page),
body.site-front-body .app-page-footer {
    width: 100% !important;
    max-width: none !important;
}

body.app-player > main.mainbody > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page) > :where(.ui-page-header, .ui-admin-page-header, .ui-player-page-header),
body.player-surface > main.mainbody > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page) > :where(.ui-page-header, .ui-admin-page-header, .ui-player-page-header),
body.app-admin > main.mainbody > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page) > :where(.ui-page-header, .ui-admin-page-header, .ui-player-page-header),
body.admin-surface > main.mainbody > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page) > :where(.ui-page-header, .ui-admin-page-header, .ui-player-page-header) {
    width: 100% !important;
    max-width: none !important;
}

/* Some admin routes retain a semantic page wrapper between the shared shell and
 * the reusable UI surface. Keep that extra navigation-time wrapper from
 * restoring the legacy 1180px/1440px caps on the surface or its page header. */
body.app-player > main.mainbody > :where(.admin-page-container, .ui-surface-admin, .component-admin-page-shell, .component-admin-page-body) > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page),
body.player-surface > main.mainbody > :where(.admin-page-container, .ui-surface-admin, .component-admin-page-shell, .component-admin-page-body) > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page),
body.app-admin > main.mainbody > :where(.admin-page-container, .ui-surface-admin, .component-admin-page-shell, .component-admin-page-body) > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page),
body.admin-surface > main.mainbody > :where(.admin-page-container, .ui-surface-admin, .component-admin-page-shell, .component-admin-page-body) > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page),
body.app-player > main.mainbody > :where(.admin-page-container, .ui-surface-admin, .component-admin-page-shell, .component-admin-page-body) > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page) > :where(.ui-page-header, .ui-admin-page-header, .ui-player-page-header),
body.player-surface > main.mainbody > :where(.admin-page-container, .ui-surface-admin, .component-admin-page-shell, .component-admin-page-body) > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page) > :where(.ui-page-header, .ui-admin-page-header, .ui-player-page-header),
body.app-admin > main.mainbody > :where(.admin-page-container, .ui-surface-admin, .component-admin-page-shell, .component-admin-page-body) > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page) > :where(.ui-page-header, .ui-admin-page-header, .ui-player-page-header),
body.admin-surface > main.mainbody > :where(.admin-page-container, .ui-surface-admin, .component-admin-page-shell, .component-admin-page-body) > :where(.ui-component-container, .ui-player-container, .ui-admin-container, .ui-surface-page) > :where(.ui-page-header, .ui-admin-page-header, .ui-player-page-header) {
    width: 100% !important;
    max-width: none !important;
}

body.app-player > main.mainbody > .page-title,
body.player-surface > main.mainbody > .page-title,
body.app-admin > main.mainbody > .page-title,
body.admin-surface > main.mainbody > .page-title,
body.site-front-body .app-page-shell-heading > .page-title {
    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
    padding: 0.2rem 0.65rem 0.3rem !important;
    color: #071b3a !important;
    font-size: 1.55rem !important;
    line-height: 1.15;
    background: var(--app-page-shell-background) !important;
    border-left: 4px solid var(--app-page-shell-accent) !important;
}

body.app-player > main.mainbody > .page-title-rule,
body.player-surface > main.mainbody > .page-title-rule,
body.app-admin > main.mainbody > .page-title-rule,
body.admin-surface > main.mainbody > .page-title-rule,
body.site-front-body .app-page-shell-heading > .page-title-rule {
    display: block;
    width: 100%;
    margin: 0 !important;
    border: 0;
    border-top: 1px solid var(--app-page-shell-border);
}

body.app-player > main.mainbody > .page-title-rule + [data-ui-page],
body.player-surface > main.mainbody > .page-title-rule + [data-ui-page],
body.app-admin > main.mainbody > .page-title-rule + [data-ui-page],
body.admin-surface > main.mainbody > .page-title-rule + [data-ui-page],
body.site-front-body .app-page-content-card {
    margin-top: var(--app-page-shell-gap) !important;
}

body.site-front-body .app-page-content-card {
    box-sizing: border-box;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    background: #fff !important;
}

body.site-front-body .site-static-panel {
    padding: 1.25rem 1.5rem;
}

body.site-front-body .court-times-content-card {
    padding: 1rem;
}

body.site-front-body .court-times-page-meta {
    margin: 0 0 0.75rem;
}

@media (max-width: 560px) {
    html.pb-mobile-browser { --app-page-shell-gutter: 10px; }

    html.pb-mobile-browser body.site-front-body .site-static-panel,
    html.pb-mobile-browser body.site-front-body .court-times-content-card {
        padding: 1rem;
    }
}

/* A desktop browser can report a narrow CSS viewport at high page zoom or
 * during remote debugging. The marker is written before stylesheets load, so
 * preserve the desktop canvas in that case. Touch-first devices do not receive
 * the marker and retain the compact responsive layout. */
@media screen and (max-width: 768px) {
    html.pb-desktop-canvas {
        overflow-x: auto !important;
    }

    html.pb-desktop-canvas body.app-player,
    html.pb-desktop-canvas body.player-surface,
    html.pb-desktop-canvas body.app-admin,
    html.pb-desktop-canvas body.admin-surface {
        width: 60rem !important;
        min-width: 60rem !important;
        max-width: none !important;
        overflow-x: visible !important;
    }

    html.pb-desktop-canvas body.app-player > header.site-navigation-shell,
    html.pb-desktop-canvas body.player-surface > header.site-navigation-shell,
    html.pb-desktop-canvas body.app-admin > header.site-navigation-shell,
    html.pb-desktop-canvas body.admin-surface > header.site-navigation-shell,
    html.pb-desktop-canvas body.app-player > main.mainbody,
    html.pb-desktop-canvas body.player-surface > main.mainbody,
    html.pb-desktop-canvas body.app-admin > main.mainbody,
    html.pb-desktop-canvas body.admin-surface > main.mainbody {
        min-width: calc(60rem - (var(--app-page-shell-gutter) * 2)) !important;
    }

    /* mixed.css/baseline.css still contain the historical desktop-canvas
     * selector for static pages. Reassert the responsive shell after those
     * bundled styles so a narrow browser never gains a 60rem document width. */
    html.pb-desktop-canvas body.site-front-body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow-x: visible !important;
    }

    html.pb-desktop-canvas body.site-front-body > header.site-navigation-shell,
    html.pb-desktop-canvas body.site-front-body .site-front-page {
        min-width: 0 !important;
    }
}