/* =========================================================================
   app-shell.css -- keeping the page clear of the iPhone's status bar.

   WHY THIS EXISTS

   page-head.php emits `viewport-fit=cover` and the
   `black-translucent` status-bar style, so the installed web app draws under
   the status bar instead of being letterboxed below it. That pairing is
   right, but it only gives the page PERMISSION to draw there. The theme's
   #header is `position: fixed; top: 0`, so in the installed app the VPS GB
   logo and the Menu button sat directly under the clock and battery, where
   a tap goes to the system, not the page. Reported from a real iPhone on
   2026-10-14: the menu could not be opened at all.

   The fix is the safe-area insets. Everywhere except a notched device in
   standalone mode they are 0px, so every rule below collapses to what the
   theme already does: no change in a desktop browser, in mobile Safari, or
   on Android.

   WHY A SEPARATE SHEET, NOT main.css. main.css is compiled output from
   assets/sass/, which is not deployed; editing it diverges the two the next
   time anyone rebuilds. page_head_open() loads this straight after main.css
   on every page, so it overrides the theme and is still overridden by any
   product sheet that means to.

   THE INSETS ARE CUSTOM PROPERTIES so a test or a screenshot run can stand in
   a real device's values -- Chromium cannot emulate env(safe-area-inset-*),
   and a fix nobody can render is a fix nobody has checked.
   ========================================================================= */

:root {
    --vg-safe-top:    env(safe-area-inset-top, 0px);
    --vg-safe-right:  env(safe-area-inset-right, 0px);
    --vg-safe-bottom: env(safe-area-inset-bottom, 0px);
    --vg-safe-left:   env(safe-area-inset-left, 0px);
}

/* ---- The header ---------------------------------------------------------
   MOVED DOWN, not made taller. #header .logo has `height: inherit`, so
   padding the header would hand the logo the inset as well and push it off
   centre. Shifting the whole bar keeps its own box exactly as the theme drew
   it, and the strip it leaves is painted below. */

#header {
    top: var(--vg-safe-top);
    padding-left: var(--vg-safe-left);
    padding-right: var(--vg-safe-right);
}

/* The status bar's own strip, in the header's colour, so the bar reads as
   one piece from the top of the glass. Under the menu overlay (10002), over
   the header (10000). */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--vg-safe-top);
    background: #2a2f4a;
    z-index: 10001;
    pointer-events: none;
}

/* console.css repaints the header on opted-in pages; the strip follows it. */
body.vg-console::before {
    background: var(--vg-ground-raised, #212429);
}

/* The page starts below the header, so it moves down by the same amount.
   #banner on the homepage pulls itself up under the header with a negative
   `top` relative to this padding, so it follows without a rule of its own. */
#wrapper {
    padding-top: calc(3.25em + var(--vg-safe-top));
}

@media screen and (max-width: 736px) {
    #wrapper {
        padding-top: calc(2.75em + var(--vg-safe-top));
    }
}

/* ---- The menu panel -----------------------------------------------------
   A full-height fixed overlay whose close button sits at top: 0 -- the same
   problem as the header, in the one place you need to tap to get out. */

#menu {
    padding-top: calc(3em + var(--vg-safe-top));
    padding-bottom: calc(3em + var(--vg-safe-bottom));
}

#menu .close {
    top: var(--vg-safe-top);
    right: var(--vg-safe-right);
}

/* ---- Page furniture that is fixed to an edge ----------------------------
   `body` in front of each selector because these classes are defined in the
   pages' own <style> blocks, which come after this sheet. Same specificity
   would lose to them; one element more wins without !important. */

/* admin.php and my-account.php: full-screen modal, content from the top. */
body .vg-modal {
    padding-top: calc(1.5rem + var(--vg-safe-top));
    padding-bottom: calc(1.5rem + var(--vg-safe-bottom));
}

/* dashboard.php: the floating section jumper, pinned to the bottom edge,
   where the home indicator is. */
body .vg-jumper {
    bottom: calc(1.5em + var(--vg-safe-bottom));
    left: calc(1.5em + var(--vg-safe-left));
}

/* dashboard.php: anchored sections land below the fixed header. The header
   is now lower by the inset, so the landing point moves with it. */
body .vg-section {
    scroll-margin-top: calc(5em + var(--vg-safe-top));
}

/* =========================================================================
   ROWS OF BUTTONS WRAP INSTEAD OF WIDENING THE PAGE

   Not a safe-area rule, but the same failure from the same report: the
   header's Menu button unreachable on a phone. Stock Forty stacks
   `ul.actions` below 480px; this build of the theme has no such rule, so a
   row of buttons is a flex row that never wraps. On a 390px iPhone, "Send
   Reset Link" beside "Back to Sign In" laid forgot-password.php and
   reset-password.php out at ~425px, and the portal's row at ~497px. A page
   wider than the screen puts the fixed header's right-hand end -- the Menu
   button -- off the edge. Measured in Chromium at 390x844, 2026-10-14.

   flex-wrap changes nothing when a row fits, so it only ever applies to rows
   that were overflowing. row-gap only exists between wrapped lines, so it
   has no effect on a row that did not wrap.

   NOT .stacked. A stacked list is flex-direction: column, where row-gap is
   the gap between EVERY item -- it added 18px to the menu's stacked buttons
   on desktop until this was excluded. Column lists cannot overflow sideways
   anyway. Checked after the change: at 1440px every ul.actions on the
   homepage, portal and forgot-password page has the same height as without
   this sheet.
   ========================================================================= */

ul.actions:not(.stacked) {
    flex-wrap: wrap;
    row-gap: 1em;
}