/* =================================================================
   iPhone Duo / foldable foundation (see docs/IPHONE_DUO_DESIGN.md)

   Loaded on every page through $theme_system_includes (style-cache.php),
   before the page stylesheets. js/duo-viewport.js overrides these defaults
   with measured values; the defaults below keep pages safe without JS.

   Size classes (use these exact media queries in page CSS):
     Cover, sideways   @media (max-height: 500px) and (orientation: landscape)                        678 x 466
     Cover, upright    @media (max-width: 560px) and (orientation: portrait)                           466 x 678
     Mid               @media (orientation: landscape) and (min-height: 501px) and (max-height: 700px) 866 x 587
     Phone portrait    @media (max-width: 700px) and (orientation: portrait)                           669 x 951
     Tablet            landscape, 701px+ tall: unchanged

   Variables:
     --rsat/--rsar/--rsab/--rsal   raw safe-area insets (menus, dialogs, dense panels)
     --sat/--sar/--sab/--sal       HUD insets: 0 on the rail side, so content may use the rail
     --ctl/--ctr/--cbl/--cbr       keep-out box width in that corner, 0 elsewhere
     --ctl-h/--ctr-h/--cbl-h/--cbr-h  keep-out box height in that corner, 0 elsewhere
     --tbh                         measured site header height
     --vvh                         measured visible viewport height (use instead of 100vh)
     --duo-hit                     minimum touch target size

   Rules of thumb:
     - Never size anything to the screen with 100vh / 100lvh / 100dvh. Use
       position: fixed; inset: 0 (or % of a fixed parent). max-height in vh is
       tolerated (it can only come out shorter) but % is preferred.
     - Fixed / sticky UI in a corner adds the corner box, e.g.
       right: calc(16px + var(--sar) + var(--ctr));
     - Notifications and toasts go under the header: top: calc(var(--tbh) + 8px + var(--sat));
   ================================================================= */

:root {
    --rsat: env(safe-area-inset-top, 0px);
    --rsar: env(safe-area-inset-right, 0px);
    --rsab: env(safe-area-inset-bottom, 0px);
    --rsal: env(safe-area-inset-left, 0px);
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --ctl: 0px;
    --ctr: 0px;
    --cbl: 0px;
    --cbr: 0px;
    --ctl-h: 0px;
    --ctr-h: 0px;
    --cbl-h: 0px;
    --cbr-h: 0px;
    --tbh: 73px;
    --vvh: 100%;
    --duo-hit: 44px;
}

/* What WebKit paints past the page (the rail, the bottom strip): match the page. */
html {
    background-color: var(--bg-primary, #12151a);
}

/* With viewport-fit=cover the page reaches under the rail. Keep content clear of
   the non-rail insets (ordinary notch / home bar); the rail side stays usable. */
body {
    padding-left: var(--sal);
    padding-right: var(--sar);
}

/* Keep page content out from under the keep-out box (camera punch + clock).
   When the box sits in a top corner it reaches below the sticky header, so
   push the flow below it at the top of the page. Margin keeps the header's
   own height (and --tbh) unchanged; the full page width stays usable. */
html.duo-rail header.hd {
    margin-bottom: max(0px, calc(max(var(--ctl-h), var(--ctr-h)) - var(--tbh)));
}