/* Sezamo PWA shell: react-native-web root reset + the splash shown while the
   bundle loads. Kept out of index.html so the CSP needs no inline <style>. */

html,
body {
  height: 100%;
  margin: 0;
  /* Brand night sky = app.json splash / manifest background: no white flash. */
  background-color: #0a0e2a;
}

body {
  /* Screens scroll inside their own ScrollView, never the document. */
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#root {
  display: flex;
  height: 100%;
  flex: 1;
}

/* Until React renders into #root: the app icon on the night sky. */
#root:empty {
  background: url('/icons/icon-192.png') center / 112px 112px no-repeat;
}

/* Modals take focus for the screen reader / keyboard trap; the browser's focus
   ring around the whole screen is noise (buttons keep their own focus ring). */
[aria-modal='true']:focus {
  outline: none;
}

/* iOS Safari zooms the page into any focused field under 16px. */
@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select {
    font-size: max(16px, 1em) !important;
  }
}