/* Safe areas apply in both Safari and the installed standalone window. */
:root{--app-safe-top:env(safe-area-inset-top,0px);--app-safe-right:env(safe-area-inset-right,0px);--app-safe-bottom:env(safe-area-inset-bottom,0px);--app-safe-left:env(safe-area-inset-left,0px)}
html{background:var(--paper);scroll-padding-top:calc(24px + var(--app-safe-top));scroll-padding-bottom:calc(100px + var(--app-safe-bottom))}
body{padding-top:var(--app-safe-top)}
main{padding-left:max(32px,var(--app-safe-left));padding-right:max(32px,var(--app-safe-right));padding-bottom:calc(130px + var(--app-safe-bottom))}
.masthead{padding-left:max(32px,var(--app-safe-left));padding-right:max(32px,var(--app-safe-right))}
.bottom-nav{padding-left:max(12px,var(--app-safe-left));padding-right:max(12px,var(--app-safe-right));padding-bottom:calc(8px + var(--app-safe-bottom))}
.toast{bottom:calc(100px + var(--app-safe-bottom));max-width:calc(100vw - 32px - var(--app-safe-left) - var(--app-safe-right));white-space:normal;text-align:center}
.visual-dialog{max-height:calc(92dvh - var(--app-safe-top) - var(--app-safe-bottom))}
@media(max-width:500px){main,.masthead{padding-left:max(16px,var(--app-safe-left));padding-right:max(16px,var(--app-safe-right))}}

/* Top-level tab anchors must include the masthead, including its safe-area inset. */
.view{scroll-margin-top:calc(var(--masthead-height,140px) + var(--app-safe-top))}