/* Kolory i stopnie pisma z `Design/tokeny.md` — telefon ma wyglądać jak ta
   sama aplikacja, tylko mniejsza.

   Wariant **jasny i tylko jasny**, zestaw ciepły (ADR-054), czyli ten sam,
   który jest domyślny na Macu. Wcześniej strona niosła wyłącznie wartości
   ciemne, wpisane na sztywno, niezależnie od ustawień telefonu — i był to
   wybór zrobiony za użytkownika. `color-scheme: light` mówi też przeglądarce,
   żeby nie przemalowywała kontrolek na ciemne. */
:root {
  color-scheme: light;
  --tlo: #FCF8F8;
  --tresc: #FFFFFF;
  --pole: #F3EDEE;
  --tekst: #1B1522;
  --tekst-drugi: #635B6F;
  --tekst-meta: #6F6779;
  --akcent-od: #BA5178;
  --akcent-do: #8558EC;
  --separator: rgba(70, 45, 100, 0.10);
  --blad: #B2513D;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: max(env(safe-area-inset-top), 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
  background: var(--tlo);
  color: var(--tekst);
  font: 400 17px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 24px; font-weight: 640; letter-spacing: -0.02em; margin: 0; }
header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }

.podpowiedz { color: var(--tekst-meta); font-size: 14px; }
.blad { color: var(--blad); font-size: 14px; }

form { display: flex; gap: 8px; margin-bottom: 20px; }

input {
  flex: 1;
  min-width: 0;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--pole);
  color: var(--tekst);
  font-size: 17px; /* mniej niż 16px każe Safari przybliżyć widok przy dotknięciu */
}
input::placeholder { color: var(--tekst-meta); }

button {
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--akcent-od), var(--akcent-do));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  /* Wytyczne Apple: cel dotknięcia nie mniejszy niż 44 punkty. */
  min-height: 44px;
}
button:disabled { opacity: 0.5; }
#odswiez { background: none; color: var(--tekst-meta); font-weight: 500; padding: 4px 0; min-height: 32px; }

ul { list-style: none; margin: 0; padding: 0; }

li {
  padding: 14px 12px;
  border-radius: 12px;
  background: var(--tresc);
  margin-bottom: 8px;
  display: flex;
  gap: 12px;
  align-items: baseline;
}

li .termin { margin-left: auto; color: var(--tekst-meta); font-size: 13px; white-space: nowrap; }
li.zalegle .termin { color: #F08FC6; }