/* Root layout for the web app (F-18-2): the phone-width screen centered on any window. */
html,
body {
  height: 100%;
  margin: 0;
}
body {
  /* react-native-web: the app scrolls inside its ScrollViews, not the page */
  overflow: hidden;
  background: #e9e2d5;
}
#root {
  display: flex;
  flex: 1;
  height: 100%;
  max-width: 430px; /* = WEB_COLUMN_MAX (src/lib/useScreenSize.ts) */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: #f4efe6;
}
/* Until the app mounts (bundle downloading): the app icon on paper instead of a blank page */
#root:empty {
  background: #f4efe6 url(/icons/icon-192.png) center 42% / 88px no-repeat;
}
/*
 * react-native-web renders <Modal> (Sheet, dialogs) into a portal: a plain <div> appended to <body> (no id, no
 * inline style) whose child is position: fixed across the window. Keep it over the app column on wide windows.
 */
body > div:not([id]):not([style]) > * {
  left: max(0px, calc(50% - 215px)) !important;
  right: max(0px, calc(50% - 215px)) !important;
  /* the modal's own position: fixed layers then size to this box instead of the window */
  transform: translateZ(0);
  /* focused programmatically for the focus trap; it is not a control */
  outline: none;
}