/* ============================================================
   OKIENKA LOGOWANIA I REJESTRACJI

   DLACZEGO TO JEST OSOBNY PLIK, A NIE <style> W KODZIE STRONY.
   Strona główna wysyła nagłówek Content-Security-Policy z regułą
   `style-src 'self'; script-src 'self'` — bez `unsafe-inline`.
   To znaczy, że przeglądarka po prostu WYRZUCA wszystko, co stoi
   w <style> i <script> wpisanych w kod strony. Okienko z takimi
   stylami byłoby nieostylowane, a jego skrypt w ogóle by nie ruszył —
   i dokładnie tak było: klikanie „Zaloguj się" na stronie głównej
   przenosiło na osobną stronę, bo przechwytujący skrypt nie działał.

   Reguły CSP nie osłabiamy. Style i skrypt idą do plików, które
   przeglądarka wolno jej wczytać — a przy okazji zapisują się w jej
   pamięci raz, zamiast jechać w każdej odpowiedzi.
   ============================================================ */

.okno-log{border:0;padding:0;background:transparent;width:min(420px,calc(100% - 28px));color:var(--tx)}
.okno-log::backdrop{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(5px)}
.okno-log form{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg,20px);padding:26px 26px 20px;margin:0;
  box-shadow:var(--shadow,0 24px 60px rgba(0,0,0,.45))}
.okno-log h2{margin:2px 0 6px;font-size:26px;letter-spacing:-.02em}
.okno-log .kicker{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--acc2,var(--akcent));font-weight:700}
.okno-pod{color:var(--mut);font-size:13.5px;line-height:1.55;margin:0 0 16px}
.okno-log label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--mut);margin:12px 0 5px}
.okno-log input[type=text],.okno-log input[type=email],.okno-log input[type=password]{
  width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-sm,8px);color:var(--tx);padding:11px 12px;font-size:15px;font-family:inherit}
.okno-log input:focus{outline:2px solid var(--acc,var(--akcent));outline-offset:1px}
.okno-ok{width:100%;margin:18px 0 0;padding:12px;font-size:14px;text-transform:uppercase;
  letter-spacing:.05em;cursor:pointer;border-radius:var(--r-sm,8px);
  background:var(--acc,var(--akcent));color:var(--btn-tx,var(--akcent-tx,#12203a));
  border:1px solid var(--acc,var(--akcent));font-weight:800}
.okno-ok:hover{background:var(--acc-hi,var(--akcent))}
.okno-ok[disabled]{opacity:.6;cursor:progress}
.okno-x{position:absolute;right:12px;top:10px;width:34px;height:34px;padding:0;margin:0;line-height:1;
  border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--mut);
  font-size:22px;cursor:pointer;box-shadow:none}
.okno-x:hover{color:var(--tx);border-color:var(--line2,var(--line));background:transparent;
  filter:none;transform:none}
.okno-blad{border-left:3px solid var(--zle,#d4566b);padding:8px 0 8px 12px;margin:0 0 4px;
  font-size:13.5px;line-height:1.5;color:var(--tx)}
.okno-ok-info{border-left:3px solid var(--good,#3ddc84);padding:10px 0 10px 12px;margin:0 0 6px;
  font-size:13.5px;line-height:1.55}
/* „Nie masz konta? Zarejestruj się" — to jest druga droga wejścia i ma być
   widoczna, a nie schowana wśród drobnego druku pod spodem. */
.okno-rej{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px;text-align:center;color:var(--mut)}
.okno-rej a{color:var(--acc2,var(--akcent));font-weight:700;
  border-bottom:1px solid var(--acc,var(--akcent))}
.okno-drobne{margin:8px 0 0;font-size:12px;color:var(--mut);text-align:center}
.okno-drobne a{color:var(--mut);border-bottom:1px solid var(--line2,var(--line))}
.okno-drobne a:hover{color:var(--acc2,var(--akcent));border-color:var(--acc,var(--akcent))}

/* zgody przy rejestracji — obie obowiązkowe, więc mają być widoczne, nie schowane */
.zgody{margin:18px 0 4px;display:grid;gap:11px}
.zgoda{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;
  color:var(--tx);text-transform:none;letter-spacing:0;margin:0}
.zgoda input{margin:2px 0 0;width:17px;height:17px;flex:none;
  accent-color:var(--acc,var(--akcent));cursor:pointer}
.zgoda a{color:var(--acc2,var(--akcent));border-bottom:1px solid var(--line2,var(--line))}

@media(max-width:520px){.okno-log form{padding:22px 18px 16px}.okno-log h2{font-size:22px}}

/* ============================================================
   OCHRONA PRZED BOTAMI — patrz sekcja „człowiek czy bot" w lib.php.
   ============================================================ */

/* POLE-PUŁAPKA. Ma być niewidoczne dla człowieka i całkiem zwyczajne dla
   automatu, który czyta kod strony. Dlatego NIE `display:none` ani
   `hidden` — część botów pomija pola oznaczone wprost jako ukryte.
   Wypychamy je poza ekran; czytnik ekranu też je minie, bo pojemnik ma
   aria-hidden, a samo pole tabindex="-1". */
.pole-pulapka{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Widżet „nie jestem robotem". Pokazuje się tylko wtedy, gdy w config.php
   są klucze Turnstile — bez nich ten blok po prostu nie ma czego stylować. */
.cf-turnstile{margin:16px 0 4px;display:flex;justify-content:center;min-height:65px}

/* ============================================================
   WIDOCZNY TEST „NIE JESTEM ROBOTEM" (nasz własny — patrz lib.php
   i typowi/czlowiek.js). Pokazuje się tylko wtedy, gdy w config.php
   nie ma kluczy Cloudflare Turnstile.
   ============================================================ */

.czlowiek{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:18px 0 4px;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r-sm,8px);background:var(--panel2,transparent)}
.czlowiek-pole{display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:13.5px;color:var(--tx);text-transform:none;letter-spacing:0;margin:0}
.czlowiek-pole input{width:19px;height:19px;flex:none;margin:0;
  accent-color:var(--acc,var(--akcent));cursor:pointer}

/* Napis stanu. Celowo drobny i po prawej — to informacja, że coś się dzieje
   w tle, a nie kolejna rzecz do przeczytania przed zalogowaniem. */
.czlowiek-stan{margin-left:auto;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--mut)}
.czlowiek-stan.ok{color:var(--good,var(--acc2,var(--akcent)))}
.czlowiek-stan.ok::before{content:"✓ "}
.czlowiek-stan.zle{color:var(--zle,#d4566b);text-transform:none;letter-spacing:0;font-size:12px}

.czlowiek-noscript{margin:12px 0 0;padding:10px 12px;font-size:12.5px;line-height:1.5;
  border-left:3px solid var(--zle,#d4566b);color:var(--tx)}

@media(max-width:420px){
  .czlowiek-stan{margin-left:0;width:100%}
}