/* ============================================================================ PHONE-APP FIXED LAYOUT (D-0020) SecureBuy is a phone app. Every page renders as a fixed-width app frame, centered on a neutral backdrop on larger screens. The layout never switches to a responsive desktop presentation — it stays in mobile/app mode at any width. Loaded LAST so it overrides page CSS. ============================================================================ */ :root { --sb-frame-w: 460px; } html { background: #0a0d12; /* backdrop shown around the frame on wide screens */ /* svh (small viewport height) is STABLE during scroll — unlike dvh it does not recalc as the mobile URL bar collapses, which on Android Chrome drove continuous root reflow and left scroll "ghost"/repaint trails. */ min-height: 100vh; min-height: 100svh; } /* Center any page's as the fixed app frame. On a phone the frame fills the screen (viewport < frame width); on desktop it sits centered like a device. */ /* !important + high specificity: page CSS sets body margin via .sb-body/.sb-auth, which would otherwise beat a bare `body` selector and left-align the frame. */ html > body { width: 100% !important; max-width: var(--sb-frame-w) !important; margin-left: auto !important; margin-right: auto !important; min-height: 100vh; min-height: 100svh; position: relative; overflow-x: hidden; } /* Device edge only where the backdrop is visible (wider than the frame). */ @media (min-width: 461px) { body { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 70px rgba(0, 0, 0, 0.45); border-radius: 0; } } /* Bottom nav: never use transform centering — Android Chrome paints scroll ghosts when a transformed position:fixed layer sits over a document-scrolling page. */ .sb-bottomnav { left: 0 !important; right: 0 !important; transform: none !important; width: 100%; max-width: var(--sb-frame-w); margin-inline: auto; } /* Neutralize the desktop (>=1024px) switch: keep the phone-app presentation (bottom nav + FAB visible, no sidebar grid) at every width. */ @media (min-width: 1024px) { .sb-only-mobile { display: flex !important; } .sb-shell { display: block !important; grid-template-columns: none !important; } .sb-sidebar { display: none !important; } .sb-fab { display: inline-flex !important; } } /* ============================================================================ Android Chrome scroll repaint fix (buyer shell) Document scroll + fixed bottom nav leaves duplicated "ghost" layers on many Android GPUs (repeated headings, stacked cards, green static bands). Lock the shell to svh and scroll only the main content column; keep the nav in-flow. ============================================================================ */ html > body.sb-body-user { height: 100svh !important; min-height: 100svh !important; max-height: 100svh !important; overflow: hidden !important; } .sb-body-user .sb-shell-user { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; } .sb-body-user .sb-shell-user > .sb-main-user { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; width: 100% !important; max-width: 100% !important; } .sb-body-user .sb-shell-user > .sb-main-user > main { flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 24px !important; } .sb-body-user .sb-shell-user > .sb-bottomnav { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; flex: 0 0 auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-shadow: none !important; } /* Focused flows hide the nav — let content use the full shell height. */ .sb-body-user.sb-body-focused .sb-shell-user > .sb-main-user > main { padding-bottom: max(24px, env(safe-area-inset-bottom)) !important; } /* Home cards: avoid GPU layer tricks that smear on scroll. */ .sb-body-user .sb-buyer-page, .sb-body-user .sb-buyer-quick-grid, .sb-body-user .sb-buyer-quick-card, .sb-body-user .sb-submission-row, .sb-body-user .sb-section-head { transform: none !important; will-change: auto !important; } .sb-body-user .sb-buyer-quick-label { display: block; -webkit-line-clamp: unset; -webkit-box-orient: unset; overflow: visible; text-overflow: unset; white-space: normal; } /* Eight quick actions fit better as 2 columns on narrow phones. */ @media (max-width: 480px) { .sb-body-user .sb-buyer-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } }