/* The body is the scrollport below the fixed, full-width navbar. Keeping the
   existing content hierarchy preserves page layouts and fixed dialogs. */
html.page-scroll-shell {
    height: 100%;
    overflow: hidden;
}

html.page-scroll-shell > body[data-ad-layout] {
    height: var(--page-available-height);
    min-height: 0;
    margin: var(--navbar-footprint) 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    /* The fixed navbar paints above this scrollport. An isolated scrolling
       body can clip its paint in iOS WebKit while leaving buttons clickable.
       Keep the root stacking context so the bar can paint outside the body. */
    isolation: auto;
}

html.page-scroll-shell > body > .navbar {
    position: fixed;
    left: 0;
    right: 0;
    width: 100% !important;
    margin: 0 !important;
}

html.page-scroll-shell > body[data-ad-layout].report-modal-open { overflow-y: hidden; }

/* Saved free-position ads use document coordinates, including the navbar. */
.page-scroll-shell .ad-layout-layer { top: calc(-1 * var(--navbar-footprint)); }

/* Sticky rails now stick within the area below the navbar. */
.page-scroll-shell .side-ad { top: 4px; }
.page-scroll-shell .responsive-ads-shell > :is([data-ad-slot="left"], [data-ad-slot="right"]) { top: 22px; }

/* CSS estimates paint immediately; the navbar observer refines its footprint. */
@media (max-width: 800px) {
    html.page-scroll-shell { --navbar-footprint: 64px; }
}
@media (max-width: 600px) {
    html.page-scroll-shell {
        --navbar-footprint: calc(clamp(58px, 14.5vw, 68px) + env(safe-area-inset-top, 0px));
    }
}