/* Styl platformy.

   Zwykły CSS, bez budowania i bez frameworka. Uzasadnienie: docs/stos.md.

   Trzy rzeczy w tym pliku są **wymogiem dostępności**, a nie estetyką, i nie
   wolno ich usunąć przy pierwszym przemalowaniu:

   1. widoczny fokus (`:focus-visible`) — bez niego nawigacja klawiaturą jest
      chodzeniem po ciemku dla wszystkich widzących, którzy nie używają myszy;
   2. przeskok do treści, który pokazuje się dopiero po dostaniu fokusu;
   3. kontrast — kolory dobrane tak, żeby przechodziły WCAG 2.2 AA (4.5:1 dla
      tekstu). Zmiana palety wymaga ponownego sprawdzenia, a nie oka. */

:root {
  --tlo: #ffffff;
  --tekst: #16181d;
  --tekst-cichy: #4a4f5a;   /* 7.4:1 na białym */
  --odnosnik: #0b4fa8;      /* 7.6:1 na białym */
  --blad: #a4131f;          /* 6.4:1 na białym */
  --kreska: #767b86;
  --pole-tlo: #f4f5f7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #16181d;
    --tekst: #eceef2;
    --tekst-cichy: #b6bcc7;
    --odnosnik: #8fb8f0;
    --blad: #f2a0a6;
    --kreska: #6d747f;
    --pole-tlo: #23262d;
  }
}

body {
  background: var(--tlo);
  color: var(--tekst);
  font: 1rem/1.6 system-ui, sans-serif;

  /* Szerokość mierzona w znakach, a nie w pikselach: około 70 znaków w wierszu
     to granica, za którą oko gubi początek następnego. */
  max-width: 70ch;
  margin: 0 auto;
  padding: 1rem;
}

a { color: var(--odnosnik); }

/* Fokus. Kontur **na zewnątrz** elementu i z odstępem, żeby nie znikał na
   ciemnym tle pola. */
:focus-visible {
  outline: 3px solid var(--odnosnik);
  outline-offset: 2px;
}

.przeskok {
  position: absolute;
  left: -9999px;
}

/* Dopiero fokus sprowadza go na stronę. Widoczny dla tego, kto go potrzebuje,
   niewidoczny dla reszty — i bez ani jednej linii JavaScriptu. */
.przeskok:focus {
  position: static;
  display: inline-block;
  padding: 0.5rem;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding: 0;
  border-bottom: 1px solid var(--kreska);
  padding-bottom: 0.75rem;
}

nav form { display: inline; }

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

input {
  /* Pola dziedziczą krój i rozmiar. Domyślne przeglądarki dają im mniejszy,
     co przy powiększeniu strony rozjeżdża formularz. */
  font: inherit;
  width: 100%;
  padding: 0.5rem;
  background: var(--pole-tlo);
  color: var(--tekst);
  border: 1px solid var(--kreska);
  border-radius: 4px;
}

input[aria-invalid="true"] {
  /* Kolor **i** grubość. Sam kolor nie istnieje dla kogoś, kto go nie widzi —
     a dla czytnika i tak rozstrzyga `aria-invalid`, nie wygląd. */
  border: 2px solid var(--blad);
}

button {
  font: inherit;
  padding: 0.5rem 1rem;
  cursor: pointer;
  background: var(--odnosnik);
  color: var(--tlo);
  border: 1px solid transparent;
  border-radius: 4px;
}

.podpowiedz {
  display: block;
  color: var(--tekst-cichy);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.blad-pola {
  display: block;
  color: var(--blad);
  font-weight: 600;
  margin-top: 0.25rem;
}

.bledy {
  border: 2px solid var(--blad);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

.bledy h2 { font-size: 1.1rem; margin-top: 0.5rem; }

.komunikat {
  border-left: 4px solid var(--odnosnik);
  padding: 0.5rem 1rem;
  background: var(--pole-tlo);
}

footer {
  margin-top: 3rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--kreska);
  color: var(--tekst-cichy);
}