/* ═══════════════════════════════════════════════════════════════════════════
   shell.css — the responsive switch that replaces the User-Agent check.

   The site has two finished shells and both are kept exactly as they are.
   A single document carries both; the viewport decides which is used, so
   nothing reads the User-Agent header any more.

   Breakpoint: 900px, matching the doctor and visitor panels.

   This file adds no colour, spacing or typography of its own — each shell's
   stylesheet already provides those and _Layout.Responsive loads it
   media-scoped so it applies only in its range. The only rules here are the
   ones that make the two shells share one document.
═══════════════════════════════════════════════════════════════════════════ */

.np-shell-desktop {
    display: none;
}

@media (min-width: 900px) {
    .np-shell-mobile {
        display: none;
    }

    .np-shell-desktop {
        display: block;
    }
}

/* ── The mobile scroll chain ─────────────────────────────────────────── */

/*
   On mobile the page itself does not scroll: Mobile.css makes html and body
   height:100% and turns .content-wrapper into the scroll container, which is
   also where the padding clearing the fixed header and bottom nav lives.

   .boxed_wrapper sits between them so that .boxed_wrapper stays wrapped
   around the content on desktop, where it carries overflow:hidden and keeps a
   wide row from scrolling the page sideways. It has no styling of its own
   below 900px, so without this the height:100% chain breaks at that link and
   .content-wrapper collapses — the scroll falls back onto the body and the
   header and nav padding is lost.
*/
@media (max-width: 899px) {
    .boxed_wrapper {
        height: 100%;
    }
}

/* ── Pieces of the hidden shell that escape their wrapper ────────────── */

/*
   display:none on an ancestor hides a fixed-position descendant too, so the
   partials rendered inside .np-shell-mobile need nothing extra. These
   selectors cover the pieces pages render themselves, outside either wrapper.
*/

@media (min-width: 900px) {
    .daroo-footer,
    .mobile-header,
    #mobileSearchSheet,
    #mcatOverlay {
        display: none !important;
    }
}

@media (max-width: 899px) {
    .main-header,
    .mobile-menu {
        display: none !important;
    }
}

/* ── Splash ──────────────────────────────────────────────────────────── */

/*
   Carried over from _Layout.Mobile, which declared it inline. It only ever
   renders inside .np-shell-mobile, so it cannot appear on desktop.
*/
#app-splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #aebc80;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    transition: opacity .4s ease;
}

#app-splash img {
    width: 110px;
    height: auto;
}

#app-splash.hide {
    opacity: 0;
    pointer-events: none;
}