/*
  Fallback dla przestarzałych przeglądarek (typowo wbudowane in-app: Messenger,
  Facebook, Instagram na starym Android System WebView).

  Główny arkusz to Tailwind v4 — cały jego output jest opakowany w `@layer`, a kolory
  używają `color-mix()`/`oklch()`. Przeglądarka bez `@layer` (Chromium < 99) wyrzuca
  CAŁY arkusz → strona bez stylów (patrz zgłoszenia „strona bezużyteczna").

  Ten plik jest zwykłym CSS-em (bez @layer / color-mix / oklch), więc stosuje się
  wszędzie. Baner jest DOMYŚLNIE widoczny i znika dopiero, gdy przeglądarka udowodni,
  że wspiera `color-mix()` — czyli próg poprawnego renderowania Tailwinda v4.
  Sterowanie samym CSS-em (bez JS), bo na starym silniku moduł app.js może się
  w ogóle nie wykonać. CSP `style-src 'self'` przepuszcza ten link (same-origin).
*/
#browser-warning {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 16px;
  background: #fbeecb;
  color: #3a2f16;
  border-bottom: 3px solid #d99a1c;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

#browser-warning .bw-inner {
  max-width: 640px;
  margin: 0 auto;
}

#browser-warning strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

#browser-warning p {
  margin: 0 0 12px;
}

#browser-warning .bw-btn {
  display: inline-block;
  padding: 10px 18px;
  background: #b02a1e;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 700;
}

#browser-warning .bw-url {
  font-weight: 700;
}

/* Przeglądarka renderuje Tailwind v4 poprawnie → ukryj baner całkowicie. */
@supports (color: color-mix(in srgb, red, blue)) {
  #browser-warning {
    display: none;
  }
}