/* Safe screen edges (owner request 2026-09-30).
   The app runs edge-to-edge on phones (viewport-fit=cover + translucent status bar), so the clock, notch and
   home bar sit on top of the page. These rules keep every button clear of them on phones and computers.
   Kept in its own file so updates to styles.css never undo it. */
:root{--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}
/* the top bar sticks BELOW the status bar when you scroll, not under it */
.topbar{top:var(--safe-t);padding-top:10px;box-shadow:0 calc(-1 * var(--safe-t)) 0 var(--bg)}
.topbar .btn,.topbar button{min-height:40px}
.shell{padding-left:calc(14px + var(--safe-l));padding-right:calc(14px + var(--safe-r))}
/* pop-up sheets never grow up into the status bar */
.overlay{padding-top:calc(var(--safe-t) + 16px)}
.sheet{max-height:calc(100dvh - var(--safe-t) - 16px)}
/* tour: Skip is centered, a little lower, and big enough to tap */
.tourtop{display:flex;flex-direction:column;align-items:center;gap:10px;margin:8px 0 12px;text-align:center}
.tourskip{min-height:44px;padding:10px 22px;border-radius:999px}
.tourbody{max-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 300px);min-height:120px}
.updatebar{bottom:calc(86px + var(--safe-b))}