/* 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;
}

/* The selected Event stays reachable beneath every shared site header. */
.site-event-navigation {
    box-sizing: border-box;
    width: 100%;
    padding: 0.3rem 0.9rem;
    background: var(--app-page-shell-background, #f4f5f7);
    border-bottom: 1px solid var(--app-page-shell-border, #d8dee8);
}

/* Standalone page headings retain the same wrapping companion links. */
.page-title.event-page-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.25rem;
}

.event-page-title-label {
    min-width: 0;
}

.event-page-quick-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}

.event-page-quick-links a {
    padding-block: 0.3rem;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    white-space: nowrap;
}

.event-page-quick-links a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
}

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;
}

/* Runtime diagnostic identifiers and source paths can be longer than a phone
 * viewport. Keep the full message readable inside the shared page shell. */
.runtime-log-screen-alerts {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

@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;
    }
}