/* The app's own half of hosting the operations center dashboard.
 *
 * EVERY RULE IS UNDER `body.home-opscenter`, and nothing here styles the
 * dashboard. `client/js/launchpad-host.js` puts that class on while
 * `#launchpad-screen` is the active screen and takes it off for every other
 * screen; the dashboard's own look lives in `client/dist/opscenter.css`.
 * What is left for this file is the two things the dashboard cannot state
 * about a page it does not own: where the app's chrome goes, and which
 * element scrolls.
 */

/* ONE APPLICATION SHELL PER SCREEN. The dashboard draws a top bar carrying
   the brand, the version, the connection state and three controls, and a
   status bar under the surface. The app's shared `.header` says the same
   kind of thing one row above it, and `#home-subheader` is the launchpad's
   own second row naming the screen. Both are the OLD home screen's chrome
   and there is nothing left for them to title, so they go while the
   dashboard is up and come back with the terminal.

   `display: none`, NOT `visibility: hidden`. The header is a flex item of a
   body one viewport tall: hidden it would still take its row, and the
   dashboard would be painted into whatever was left. */
body.home-opscenter > .header,
body.home-opscenter #home-subheader {
    display: none;
}

/* AND THE CHROME ABOVE AN OVERLAY IS THEREFORE THE DASHBOARD'S TOP BAR, not
   the header just hidden. The catalog, ledger and themes overlays start at
   `--overlay-top` (client/css/styles.css), which off this screen is the
   shared header's `--header-h`. Here that header is `display: none`, and
   `--header-h` plus the launchpad subheader's `--home-subheader-extra`
   measured 82px against a top bar whose bottom edge sat at y=54, a 28px
   strip of dashboard between the two. The bar is `height: var(--oc-topbar)`
   (web/src/opscenter/shell/TopBar.svelte) at every width, sticky at `top: 0`
   below 1024, and `--oc-topbar` is 54px in web/src/opscenter/tokens.css. */
body.home-opscenter {
    --overlay-top: var(--oc-topbar);
}

/* THE DESKTOP APP'S TITLE STRIP SITS ABOVE EVERYTHING (R1-12b, #2338, client/css/desktop-chrome.css): the body is padded by
   `--desktop-inset-top`, so a fixed overlay that starts under the header starts that much lower. Unlayered on purpose: these
   override the unlayered `--header-h` in styles.css and the rule above. `html[data-desktop-chrome]` is stamped only inside the app. */
html[data-desktop-chrome] {
    --header-h: calc(var(--control-size) + var(--header-pad-y) * 2 + var(--header-border) + var(--home-subheader-extra) + var(--desktop-inset-top));
}

html[data-desktop-chrome] body.home-opscenter {
    --overlay-top: calc(var(--oc-topbar) + var(--desktop-inset-top));
}

/* Below 1024 the DOCUMENT has to be the scroller, and the word document is
   literal.
 *
 * WHY, AND IT IS NOT A PREFERENCE. Mobile Safari collapses its address bar
 * and its toolbar only while `document.documentElement` scrolls. An inner
 * element with `overflow-y: auto` scrolls its own content and tells the
 * browser nothing, so the bars stay out at full height for the whole visit
 * and the reader loses about 140px of an 844px phone. The dashboard's phone
 * layout is built on that: its top bar and its chip strip are held by
 * `position: sticky` INSIDE the scrolling document rather than by sitting
 * outside a scroller, and a scroll container anywhere between a sticky box
 * and the viewport turns `position: sticky` into `position: static` with no
 * error and no visible clue.
 *
 * The app's own shell is the exact shape that breaks it: `body` is a flex
 * column one viewport tall with `overflow: hidden`, and `.screen` is
 * `flex: 1; overflow: auto`. So both give up being scrollers here, and only
 * here: every other screen, the terminal included, keeps the fixed shell it
 * needs.
 *
 * `overflow-x: clip` RATHER THAN `hidden`. `hidden` on the body makes the
 * body a scroll container, which is the very thing this rule exists to stop.
 * `clip` clips without scrolling, so the sideways promise is kept and the
 * sticky chrome still works. */
@media (max-width: 1023px) {
    body.home-opscenter {
        height: auto;
        /* THE FALLBACK PAIR, in the order the rule requires: the static unit
           first, so a browser that does not know `dvh` still gets a floor,
           and the dynamic one second, so every browser that does tracks the
           iOS bars collapsing. */
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: clip;
        overflow-y: visible;
    }

    /* `flex: 0 0 auto` because a `flex: 1` item in an auto height column is
       sized from a zero basis and then grown to a line whose height is the
       content's; stating the basis as the content removes a round trip the
       browser would otherwise resolve differently in each engine. */
    body.home-opscenter #launchpad-screen.active {
        display: block;
        flex: 0 0 auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }
}