/* easysnaps.ai — OKNO WEJSCIA (modal nad strona glowna)
   ------------------------------------------------------------------
   Swiat wizualny bez zmian: stol pomiarowy, papierowa szarosc, notacja
   monospaced, linie wlosowe, zero promieni. Okno jest plyta lezaca NAD
   blatem, wiec jako jedyny element dostaje cien — i to ten sam, ktory
   system nazwal juz --shadow-print (No-Halo Rule dopuszcza wylacznie
   odbitke lezaca na blacie).

   Zaleznosci: plik dokłada sie do style.css i korzysta z jego tokenow
   oraz z komponentow .btn / .field / .check / .form__note. Niczego
   w style.css nie nadpisuje globalnie — wszystkie korekty sa zamkniete
   w .au-card, bo tamte komponenty byly strojone pod ciemna sekcje .cta
   (np. .form__note ma --ash, ktore na jasnym tle daje 2,8:1).

   Kontrast: na tle --paper-hi (#f7f7f7) tekst chodzi wylacznie po
   --ink (18,9:1), --graphite (10,6:1) i --slate (5,9:1).
   --ash (#9a9a9a) NIE przechodzi 4,5:1 i nie pojawia sie tu ani raz.
   ------------------------------------------------------------------ */

/* ---------- blokada tla ----------
   overflow chowamy na elemencie glownym, a szerokosc paska przewijania
   oddajemy body jako padding — bez tego uklad skacze w chwili otwarcia.
   Wartosc wstawia JS przez setProperty, zawsze jako liczba po Math.round()
   i po zacisnieciu do rozsadnego zakresu. Zadna strona projektu nie uzywa
   100vw, wiec ten padding nie rozjezdza kadrow pelnej szerokosci. */
.au-lock { overflow: hidden; }
.au-lock body { padding-right: var(--au-sbw, 0px); }

/* ---------- nakladka ----------
   Rozmywamy WARSTWE, nie drzewo DOM. backdrop-filter na jednym elemencie
   to jedna warstwa kompozytora; filter: blur() na <main> kosztowalby
   przemalowanie calej strony przy kazdej klatce. */
.au-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  padding: clamp(12px, 4vh, 56px) clamp(12px, 4vw, 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(10, 10, 10, 0.44);
  -webkit-backdrop-filter: saturate(0) blur(10px);
  backdrop-filter: saturate(0) blur(10px);
  opacity: 0;
  transition: opacity 0.24s var(--e);
}
.au-overlay[hidden] { display: none; }
.au-overlay.is-open { opacity: 1; }

/* Zapas dla przegladarek bez backdrop-filter: samo przyciemnienie, mocniejsze,
   zeby tresc pod spodem przestala konkurowac z oknem. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .au-overlay { background: rgba(10, 10, 10, 0.78); }
}

/* ---------- plyta okna ----------
   margin:auto zamiast align-items:center — przy oknie wyzszym od ekranu
   centrowanie flexem obcina gore i nie da sie do niej doscrollowac. */
.au-card {
  position: relative;
  margin: auto;
  width: min(100%, 452px);
  background: var(--paper-hi);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-print);
  padding: clamp(22px, 4.5vw, 34px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s var(--e), transform 0.3s var(--e);
}
.au-overlay.is-open .au-card { opacity: 1; transform: none; }
.au-card:focus { outline: none; }

/* ---------- glowica: notacja kroku + wyjscie ---------- */
.au-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.au-meter {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Wyjscie jest slowem, nie ikona: w tym systemie krzyzyk bylby jedynym
   piktogramem na calej stronie. Slowo niesie tez wlasna nazwe dostepna. */
.au-x {
  flex: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--fog);
  padding: 0 0 2px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--slate);
  cursor: pointer;
  transition: color 0.2s var(--e), border-color 0.2s var(--e);
}
.au-x:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- teza okna ---------- */
.au-title {
  margin: 22px 0 0;
  font-size: var(--fs-title-lg);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.au-lead {
  margin: 10px 0 0;
  font-size: var(--fs-mini);
  line-height: 1.65;
  color: var(--graphite);
  max-width: 42ch;
}

/* ---------- widoki ----------
   Okno prowadzi przez siedem stanow. W jednej chwili widac dokladnie jeden;
   reszta jest wylaczona atrybutem hidden, wiec wypada tez z kolejnosci tabulacji. */
.au-view { display: grid; gap: 20px; margin-top: 24px; }
.au-view[hidden] { display: none; }

.au-step { display: grid; gap: 20px; }
.au-step[hidden] { display: none; }

.au-form { display: grid; gap: 20px; margin: 0; }

/* Etykiety pol systemowych sa w style.css strojone pod wieksza plyte;
   w oknie schodza o stopien, zeby formularz nie przygniatal tezy. */
.au-card .field__label {
  font-size: var(--fs-mini);
  letter-spacing: 0.02em;
}

/* Granica kontrolki to nie linia dekoracyjna: WCAG 1.4.11 zada 3:1.
   --fog (#c8c8c8) na bieli daje 1,7:1 i pole rozplywa sie na jasnym tle.
   --slate (#5f5f5f) daje 3,9:1 i nadal jest szarym wlosem, nie ramka. */
.au-card .field__input {
  padding: 13px 14px;
  border-color: var(--slate);
}

/* Komunikat bledu byl najmniejszym tekstem w oknie (11 px monospaced
   z rozstrzeleniem 0,1em) — czyli najtrudniejszym do przeczytania
   akurat tam, gdzie uzytkownik utknal. Zostaje notacja, rosnie czytelnosc. */
.au-card .field__err {
  font-size: var(--fs-mini);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* Pole wyboru w stanie bledu potrzebuje sygnalu wzrokowego, nie tylko
   aria-invalid — samo obramowanie systemowe niczego nie pokazuje. */
.au-card .check__box[aria-invalid="true"] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Wejscie przez dostawce (Google / Apple / Facebook) usuniete 14.09.2026:
   bylo makieta, a makieta nie zostaje w produkcie. Razem z przyciskami
   zniknely ich reguly i rozdzielnik "albo" — martwy arkusz jest tak samo
   mylacy jak martwy przycisk. Reguła, ktora tu stala i ktorej nie wolno
   zgubic przy nastepnym bloku chowanym atrybutem: deklaracja display autora
   bije regule UA [hidden]{display:none}, wiec kazdy taki element musi miec
   wlasna pare selektorow. */

/* ---------- powtorzenie adresu w kroku 2 ---------- */
.au-echo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--line);
}

.au-echo__value {
  font-family: var(--mono);
  font-size: var(--fs-mini);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.au-echo__edit {
  flex: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--fog);
  padding: 0 0 1px;
  font-family: var(--mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--slate);
  cursor: pointer;
  transition: color 0.2s var(--e), border-color 0.2s var(--e);
}
.au-echo__edit:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- deklaracja: konto mam / zakladam ----------
   Ekran NIGDY nie pyta serwera, czy konto istnieje — uzytkownik deklaruje
   to sam. Dzieki temu nie ma tu czego wyciec (anty-enumeracja kont). */
.au-choice { margin: 0; padding: 0; border: 0; }

.au-choice__legend {
  padding: 0 0 9px;
  font-family: var(--mono);
  font-size: var(--fs-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

.au-choice__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--slate);
}

.au-choice__opt { display: block; cursor: pointer; }
.au-choice__opt + .au-choice__opt { border-left: 1px solid var(--slate); }

/* Radio zostaje w drzewie i przyjmuje focus — chowamy je tylko przed okiem,
   nigdy przed czytnikiem ekranu i nigdy przed tabulacja. */
.au-choice__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.au-choice__face {
  display: block;
  padding: 11px 10px;
  text-align: center;
  font-size: var(--fs-mini);
  font-weight: 600;
  color: var(--slate);
  background: var(--white);
  transition: background-color 0.2s var(--e), color 0.2s var(--e);
}
.au-choice__opt:hover .au-choice__face { color: var(--ink); }
.au-choice__radio:checked + .au-choice__face { background: var(--ink); color: var(--white); }
.au-choice__radio:focus-visible + .au-choice__face { outline: 2px solid var(--ink); outline-offset: 2px; }

.au-terms { display: grid; gap: 6px; }
.au-terms[hidden] { display: none; }

/* ---------- odnosniki poboczne ---------- */
.au-aside { margin: 0; font-size: var(--fs-mini); }

.au-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--fs-mini);
  color: var(--graphite);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.au-linkbtn:hover { color: var(--ink); text-decoration-thickness: 2px; }

/* ---------- nota makiety ----------
   .form__note z style.css jest strojona pod ciemna plyte .cta: --ash na
   jasnym tle to 2,8:1, a stan "ok" jest tam bialy, czyli tu niewidoczny. */
.au-card .form__note {
  color: var(--slate);
  font-size: var(--fs-mini);
  line-height: 1.6;
  min-height: 0;
}
.au-card .form__note[data-state="ok"] { color: var(--ink); }

/* BLAD MUSI BYC WIDOCZNY, a do 31.08.2026 nie byl.

   Nota niosla wszystkie odmowy calego okna wejscia i miala w stanie bledu
   dokladnie dwie roznice wobec spoczynku: ciemniejszy atrament i grubszy
   krój. Przy rozmiarze --fs-mini, na dole karty, POD duzym czarnym
   przyciskiem, wygladalo to jak podpis pod przyciskiem, a nie jak odmowa.
   Wlasciciel zglosil to zdaniem "napis pojawia sie nisko, prawie
   niewidoczny" (31.08.2026) i mial racje.

   Znak jest ten sam, ktorym panel oznacza komunikat stanu (.ap-alert
   w app.css): para linii wlosowych i tekst w rozmiarze tresci. Zero koloru,
   zero ikony — to samo, czym caly system oddziela wiersze rejestru.
   Skrypt dodatkowo przysuwa note do widoku, bo karta okna sie przewija
   i na telefonie odmowa potrafila zostac pod krawedzia ekranu. */
.au-card .form__note[data-state="bad"] {
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-sub);
  margin-top: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* ---------- stany bramki e-mail ---------- */
/* Adres, na ktory poszedl list. Plyta odbitki lezaca na blacie: bialy
   material, wlos dookola, notacja monospaced. Bez paska akcentowego —
   gruba kreska z jednej strony jest w tym systemie obcym gestem. */
.au-adr {
  margin: 0;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-mini);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.au-body { margin: 0; font-size: var(--fs-mini); line-height: 1.65; color: var(--graphite); }

.au-list {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-mini);
  line-height: 1.7;
  color: var(--graphite);
}
.au-list li + li { margin-top: 5px; }

.au-actions { display: grid; gap: 12px; }

/* Blokada przed spamowaniem listem jest widoczna, a nie tylko obecna. */
.au-card .btn[disabled] {
  cursor: not-allowed;
  background: var(--z9);
  color: var(--slate);
  border-color: var(--fog);
  transform: none;
  box-shadow: none;
}
.au-card .btn[disabled]:hover { transform: none; box-shadow: none; background: var(--z9); }

.au-wait {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--slate);
  min-height: 1.3em;
}

/* ---------- rusztowanie makiety ----------
   Backendu nie ma, wiec stanow wejscia z linku potwierdzajacego nie da sie
   pokazac inaczej: adresu strony nie czytamy w ogole, bo to jedyny realny
   wektor XSS na stronie statycznej. Ten pasek jest rusztowaniem prezentacji
   i tak ma wygladac — inny material niz reszta okna, opisany wprost.
   Zostaje w drzewie okna, a nie obok niego: przy aria-modal="true" wszystko
   spoza dialogu znika czytnikom ekranu, a element dostepny z klawiatury
   i niewidoczny dla czytnika jest pulapka. */
/* Style paska makiety (.au-lab*) usuniete 01.09.2026 razem z samym
   paskiem — uzasadnienie w index.html w miejscu, w ktorym stal. */


/* ---------- ruch ----------
   Brak ruchu zostawia stan koncowy, nie stan poczatkowy: okno ma byc
   otwarte i widoczne, tylko bez dojazdu. */
@media (prefers-reduced-motion: reduce) {
  .au-overlay,
  .au-card {
    transition: none;
  }
}

/* ---------- waskie ekrany ---------- */
@media (max-width: 420px) {
  .au-card { padding: 20px 18px; }
  .au-choice__row { grid-template-columns: 1fr; }
  .au-choice__opt + .au-choice__opt { border-left: 0; border-top: 1px solid var(--slate); }
}

/* Niskie okna (telefon w poziomie): plyta przestaje byc centrowana,
   zeby dalo sie doscrollowac do jej gory. */
@media (max-height: 620px) {
  .au-overlay { padding-block: 12px; }
  .au-card { margin-block: 0; }
}

/* ---------- krok 3: kto zaklada konto (27.07.2026) ----------
   Dwa zestawy pol w jednym miejscu, przelaczane deklaracja uzytkownika.
   Deklaracja display autora bije regule UA [hidden]{display:none}, wiec
   kazdy z nich musi miec wlasna pare. */

.au-fields { display: grid; gap: 20px; }
.au-fields[hidden] { display: none; }

/* Kod pocztowy jest krotki i nie ma powodu zajmowac calej szerokosci —
   stoi w parze z miejscowoscia. Ponizej 420 px para sie rozklada, bo dwa
   pola obok siebie na telefonie zwezaja miejscowosc do kilku znakow.

   Pole tekstowe ma wlasna szerokosc domyslna (~20 znakow) i jako element
   siatki z min-width:auto NIE DAJE SIE zwezic ponizej niej — kolumna
   rozpychala sie do ~217 px i etykiety obu pol na siebie nachodzily.
   Dlatego zarowno pole, jak i jego opakowanie dostaja min-width: 0. */
.au-pair {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 14px;
}
.au-pair .field { min-width: 0; }
.au-pair .field__input { min-width: 0; width: 100%; }

@media (max-width: 419px) {
  .au-pair { grid-template-columns: minmax(0, 1fr); }
}

/* NIP i przycisk wyszukiwarki stoja w jednym rzedzie, bo sa jedna czynnoscia:
   wpisz numer, wez dane. Przycisk NIE rozciaga sie na cala szerokosc — to nie
   jest akcja formularza, tylko pomoc przy jednym polu. Na waskim ekranie oba
   schodza pod siebie, zamiast sciskac pole numeru do polowy. */
.au-nip {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.au-nip__pole { min-width: 0; flex: 1 1 auto; }
.au-nip__btn { flex: 0 0 auto; white-space: nowrap; }

/* Meldunek wyszukiwarki: "Szukam", "Wzielismy z rejestru", "Nie znalezlismy".
   Pusty nie zajmuje miejsca, bo :empty gasi caly margines — inaczej pod
   polem NIP siedzialaby dziura widoczna przez caly czas. */
.au-nip__stan {
  margin: 8px 0 0;
  font-size: var(--fs-mini);
  color: var(--graphite);
}
.au-nip__stan:empty { display: none; }
.au-nip__stan[data-state="bad"] { color: var(--ink); font-weight: 600; }

@media (max-width: 419px) {
  .au-nip { flex-wrap: wrap; }
  .au-nip__pole { flex: 1 1 100%; }
}

/* Zdanie o cenach stoi pod przelacznikiem, nie w podpowiedzi pola: to jest
   POWOD wyboru, a nie objasnienie formatu. Uzytkownik musi je przeczytac,
   zanim zdecyduje, a nie po wejsciu w pierwsze pole. */
.au-kindnote {
  margin: 9px 0 0;
  font-size: var(--fs-mini);
  color: var(--graphite);
}

/* --------------- drugi skladnik ---------------
   Kod zapasowy jest droga awaryjna, wiec lezy PONIZEJ kreski, a nie obok
   przycisku. Kreska jest tu zdaniem: to sa dwie rozne sytuacje, a nie dwa
   rownorzedne sposoby wejscia. */
.au-drugi__kod {
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}

/* Kod przepisuje sie ze wzroku, znak po znaku, wiec idzie monospacem
   z rozstrzelonymi znakami — tak samo jak kazda inna notacja w tym
   projekcie (DESIGN.md, Notation Rule). */
#au-drugi-kod {
  font-family: var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Zdanie o polityce prywatnosci pod zgodami (05.09.2026, przeglad RODO B7).
   Nizej na skali gestosci niz same zgody, bo jest INFORMACJA, a nie
   oswiadczeniem woli — czytelnik ma po ksztalcie poznac, ze nie ma tu nic
   do zaznaczenia. Ta sama miara i ten sam kolor, co przypis pod umowa
   powierzenia (.field__hint), zeby nie robic trzeciego stopnia szarosci
   w jednym bloku. */
.au-polityka {
  margin: 2px 0 0;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--slate);
}