html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  /* Also set outside the MUI theme: this covers everything painted before React mounts and
     anything that is not a MUI component, so no surface falls back to a Latin-only face. */
  font-family: Vazirmatn, Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Painted before React mounts, so these must match the theme's canvas colours exactly
   (common/theme/palette.js). A mismatch here is visible as a flash on every cold start, which the
   PWA makes more noticeable: launched from the home screen there is no browser chrome to hide it. */
body {
  background: #F4F6F9;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #0B0E14;
  }
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media print {
  * {
    height: auto !important;
    overflow: visible !important;
  }
}