/* The web version (loaded after the desktop and phone styles) */
html, body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
/* No desktop title bar here. Installed on an iPhone the page runs under the status bar (the clock and battery), so the
   room to leave at the top is the phone's own safe area: pages, dialogs and the player all start below it. */
:root { --safe-top: env(safe-area-inset-top, 0px); }
body.web { --titlebar: var(--safe-top); }
body.web .nav { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); padding-top: calc(8px + var(--safe-top)); }
body.web .nav { -webkit-app-region: no-drag; }
/* the home-indicator strip on iPhones with no home button */
body.web.android #links { padding-bottom: env(safe-area-inset-bottom); }
body.web.android .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
/* Safari on an iPhone has no full screen for a page, only for the video itself (its own player): the button is back for that */
body.web.android [data-fs] { display: inline-flex; }
body.ios .player video { object-fit: contain; }

/* how to put Lumen on the Home Screen */
.install-hint { position: fixed; z-index: 90; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 18px; animation: hint-in .4s cubic-bezier(.2,.9,.2,1); }
@keyframes hint-in { from { opacity: 0; transform: translateY(14px); } }
.install-hint .ih-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--violet)); }
.install-hint .ih-ic svg { width: 20px; height: 20px; }
.install-hint .ih-tx { flex: 1; display: grid; gap: 1px; min-width: 0; }
.install-hint b { font-size: 14px; }
.install-hint small { color: var(--muted); font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.install-hint button { flex: none; width: 34px; height: 34px; border-radius: 10px; color: var(--muted); }
@media (min-width: 900px) { .install-hint { display: none; } }

/* a title page runs edge to edge: its close button sits below the status bar, not under it */
body.web .sheet-close { top: calc(10px + var(--safe-top)); z-index: 5; width: 44px; height: 44px; }

/* the phone layout fixes the top of every page at 76px (the Android app's status bar is outside the page): add the notch */
body.web.android .page { padding-top: calc(76px + var(--safe-top)); }
body.web.android .hero:not([hidden]) + main .page { padding-top: 8px; }