/*
 * Shows a readable page to a browser below the minimum, instead of a broken
 * one. No JavaScript and no inline style, so the policy stays at 'self' for
 * both scripts and styles.
 *
 * The test is color-mix(), which Tailwind 4 relies on and which lands in the
 * same generation as the rest of its requirements: Chrome 111, Safari 16.2,
 * Firefox 113. A browser without it cannot render this interface at all.
 *
 * Everything below uses only properties that have worked for a decade, because
 * it has to work exactly where the rest does not.
 */

#navegador-sem-suporte {
  display: none;
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  #root {
    display: none;
  }

  #navegador-sem-suporte {
    display: block;
    max-width: 34em;
    margin: 0 auto;
    padding: 3em 1.5em;
    color: #1e1e1e;
    font-family:
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      sans-serif;
    font-size: 17px;
    line-height: 1.6;
  }

  #navegador-sem-suporte h1 {
    margin: 0 0 0.6em;
    font-size: 26px;
    line-height: 1.2;
  }

  #navegador-sem-suporte p {
    margin: 0 0 1em;
  }

  #navegador-sem-suporte ul {
    margin: 0 0 1em;
    padding-left: 1.2em;
  }

  #navegador-sem-suporte a {
    color: #c63710;
  }
}