/* ============================================================
   Mobile bottom-tab clearance — cache-busting standalone file.

   This sits in its own file (separate from tokens.css) because
   tokens.css edits sometimes don't take effect even after hard
   refresh — likely an HTTP/browser cache pinning the old version.
   A brand-new file URL forces a fresh fetch.

   The mobile bottom-tab nav (`<MobileBottomTabs>`) is `position: fixed`
   at the bottom of the viewport and overlays the bottom of any page
   that scrolls inside `.orcanex-frame-content`. Without compensation,
   the last form field / row gets hidden behind the tab strip.

   APPROACH — single `::after` flex spacer, NO duplicate padding-bottom
   ---------------------------------------------------------------
   Previously this file applied THREE overlapping rules:
     1. padding-bottom on `.orcanex-frame-content > *:last-child`
     2. ::after flex spacer on `.orcanex-frame-content`
     3. padding-bottom on `.orcanex-frame-content` itself
   The intent was belt-and-suspenders, but the rules COMPOUNDED — every
   mobile page ended up with 152+ px of dead space below the content,
   most visible on the Cases page (228 px because cases-page's own
   `padding-bottom: 0 !important` lost the cascade to rule 1).

   The ::after spacer alone is sufficient: it's a real flex child of
   `.orcanex-frame-content`, so it grows the container's content area
   (working around Chromium bug 748518, which only affects raw padding-
   bottom on a flex+overflow:auto container). Rule 1 still lives in
   tokens.css for pages whose wrapper is a plain block that grows with
   content, but it's the SOLE bottom-clearance for those pages — no
   double-padding.

   The clearance value is:
     60px (tab bar height, --h-mobile-tabs) + safe-area-inset-bottom
     (iOS home bar) + 16px (--space-4, visual breathing room above
     the bar). In Chrome dev tools that evaluates to 76px; on iOS
     Safari it'll be 76 + ~34px = 110px.
   ============================================================ */

:root[data-viewport="mobile"]   .orcanex-frame-content::after,
:root[data-viewport="mobile-l"] .orcanex-frame-content::after {
    content: "" !important;
    display: block !important;
    flex-shrink: 0 !important;
    height: calc(var(--h-mobile-tabs) + env(safe-area-inset-bottom, 0px) + var(--space-4)) !important;
    width: 100% !important;
}

/* scroll-padding-bottom (NOT padding-bottom) so scrollIntoView and the
   browser's own focus-scroll respect the bottom-tab clearance. This
   property has no layout impact — it's only consulted during scroll
   anchoring — so it doesn't compound with the ::after spacer. */
:root[data-viewport="mobile"]   .orcanex-frame-content,
:root[data-viewport="mobile-l"] .orcanex-frame-content {
    scroll-padding-bottom: calc(var(--h-mobile-tabs) + env(safe-area-inset-bottom, 0px) + var(--space-4)) !important;
}