/* Web only. When the app is installed to a home screen it can draw under the phone's status bar and
   home indicator; env(safe-area-inset-*) keeps content clear of them (it's 0 in a normal browser tab).
   Rules start with "html" so they outrank the app's own stylesheet, which loads after this file. */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
html, body { margin: 0; background: #1D2B4C; }
@media (prefers-color-scheme: light) { html, body { background: #EFEDE6; } }

html .phone {
  padding-top: calc(20px + var(--sat));
  padding-left: calc(18px + var(--sal));
  padding-right: calc(18px + var(--sar));
}
html .phone:not(.withTabs) { padding-bottom: calc(28px + var(--sab)); }
html .phone.withTabs { padding-bottom: calc(var(--tabs-h, calc(72px + var(--sab))) + 28px); } /* --tabs-h is measured by the app */
html .tabs { padding-bottom: calc(8px + var(--sab)); }
html .sheet { padding-bottom: calc(28px + var(--sab)); }
html .rates { bottom: calc(12px + var(--sab)); }

/* No tap flashes on buttons, like a native app. */
button { -webkit-tap-highlight-color: transparent; }