/* The page a browser below the build target sees (index.html's #unsupported-browser; decision 4, decisions.md
   P66): no script and no inline style, shown only while the app hasn't drawn (#root is empty). A file of its
   own, served as it is, so the app's stylesheet, and every script that names it, stay as they were.
   The build target is Chrome and Edge 111, Firefox 114, Safari 16.4 (vite.config.ts). color-mix() came in
   Chrome and Edge 111, Firefox 113 and Safari 16.2, font-size: xxx-large in Safari 16.4 (Chrome 79, Firefox
   70; MDN's compatibility data): both together are the target exactly in Chrome, Edge and Safari, and Firefox
   113 against 114. A browser without @supports is told too; one with both never is, a stylesheet being read
   whole. Plain values, the tokens' own (@sensgreen-inc/tokens email.json): a browser this old may not take
   their layer. */
#root:empty + #unsupported-browser {
  display: block;
}
@supports (color: color-mix(in srgb, red, blue)) and (font-size: xxx-large) {
  #root:empty + #unsupported-browser {
    display: none;
  }
}
#unsupported-browser {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  box-sizing: border-box;
  min-height: 100%;
  padding: 2rem 1rem;
  background: #f5f2ec; /* bg-canvas */
  color: #1f1d1a; /* text-1 */
  font:
    400 15px/23px "Google Sans Flex",
    "Roboto Flex",
    "Noto Sans Arabic",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}
#unsupported-browser .unsupported-page {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.5rem;
  background: #fcfbf8; /* bg-surface */
  border: 1px solid #e3ded4; /* border-default */
  border-radius: 12px;
}
#unsupported-browser h1 {
  margin: 0 0 1rem;
  font-size: 13px;
  line-height: 19px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #55504a; /* text-2 */
}
#unsupported-browser h2 {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}
#unsupported-browser p {
  margin: 0.25rem 0 0;
  color: #55504a;
}
#unsupported-browser section + section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #ebe6de; /* border-subtle */
}
#unsupported-browser ul {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
#unsupported-browser li {
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.25rem 0.75rem;
  border: 1px solid #cfc8bc; /* border-strong */
  border-radius: 999px;
  font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  #unsupported-browser {
    background: #151412;
    color: #ede8df;
  }
  #unsupported-browser .unsupported-page {
    background: #1d1b18;
    border-color: #2c2925;
  }
  #unsupported-browser h1,
  #unsupported-browser p {
    color: #bdb6aa;
  }
  #unsupported-browser section + section {
    border-top-color: #25231f;
  }
  #unsupported-browser li {
    border-color: #3a3631;
  }
}