/* ============================================================================
   DANACO CONSOLE — OKNA WEJŚCIOWE
   ----------------------------------------------------------------------------
   Wspólna budowa okien poprzedzających pracę: instalator, okno startowe
   (łączenie), okno rejestracji i logowania, okno przygotowania środowiska.

   Wszystkie dzielą się na dwie kolumny: kolumnę tożsamości (atrament,
   po lewej) i kolumnę stanu albo formularza (powierzchnia, po prawej).
   Dzięki temu kolejne ekrany uruchomienia czytają się jako jeden produkt,
   nie jako ekran powitalny, formularz i kolejny ekran powitalny.

   Szerokość docelowa okna 1040 px — okno wejściowe niesie wagę produktu,
   nie wagę okienka dialogowego.

   Okna wejściowe stoją PRZED uwierzytelnieniem, więc nie mają ramy
   aplikacji. Własna, minimalna belka tytułowa okna systemowego (§2) jest
   jedyną ramą, jaką noszą. Rama aplikacji wchodzi dopiero po wydaniu tokenu.

   Trzeci stopień tekstu (`--dn-tekst-3`, #7C7C7C) daje 4,17:1 na powierzchni
   jasnej i 4,25:1 na ciemnej — poniżej progu 4,5:1 dla tekstu poniżej
   18,66 px półgrubego. Żeton wolno stosować wyłącznie tam, gdzie zezwala
   jego opis w `zetony.css`; w oknach wejściowych tekst drobny bierze
   `--dn-tekst-2`.

   Wyłącznie żetony var(--dn-*). Oba motywy.
   ============================================================================ */

/* ── 1 · SCENA I OKNO ───────────────────────────────────────────────────── */

/* Scena bierze całą szerokość, jaką ma do dyspozycji. Bez tego kurczyłaby się
   do treści, a okno o szerokości `min(920px, 100%)` zmieniałoby wymiar razem
   z długością tekstu w kroku — okno instalatora ma stać nieruchomo. */
/* Warstwa uruchomienia leży na scenie, nie w oknie — dlatego scena jest polem
   odniesienia. Póki animacja gra, okno jest ukryte przed czytnikiem tak samo
   jak przed okiem: `visibility`, nie samo krycie. */
.we-scena { position: relative; }
/* Okno bywa dzieckiem sceny wprost albo stoi w miejscu montażu — zejście
   potomkiem zamiast dziecka obejmuje oba przypadki. Zapis „> .we-okno"
   przestał trafiać, gdy okno przestało być pisane w znaczniku. */
.we-scena[data-uruchamianie] .we-okno { visibility: hidden; }

.we-uruchomienie {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
}
.we-uruchomienie > .dn-ekran-startowy { width: 560px; height: 420px; }

.we-scena {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: var(--dn-od-8) var(--dn-od-6);
  background: var(--dn-tlo);
}

/* Okno wejściowe trzyma jedną szerokość i jedną wysokość we wszystkich
   wariantach stanu — wariant z komunikatem nie może zmieniać rozmiaru okna
   w trakcie uruchomienia. Pierwszy wiersz siatki zajmuje belka tytułowa,
   drugi — kolumna tożsamości i kolumna stanu. */
.we-okno {
  /* Wcięcie kolumny treści. Stopka sięga krawędzi kolumny, więc musi znać tę
     samą wartość, którą kolumna wnosi wypełnieniem — inaczej pas urywa się
     w powietrzu zamiast domykać panel. */
  --we-wciecie-x: var(--dn-od-6);
  --we-wciecie-y: var(--dn-od-6);

  /* Wymiar stały. Okno wejścia nie zmienia rozmiaru między widokami —
     `min-height` pozwalał mu rosnąć razem z treścią widoku.

     Wyższe od kreatora o 60 px, bo niesie gęstszą treść: formularz, miernik
     siły hasła, zgodę na sesję i trzy metody logowania naraz. Przy wysokości
     kreatora sekcje musiałyby stać ciasno jedna przy drugiej i zlewać się
     w jeden blok. Szerokość i oprawa zostają wspólne — bryła rodziny się
     nie zmienia. */
  width: 1040px;
  height: var(--dn-wym-okno-wejscia-wys);
  flex: none;
  display: grid;
  grid-template-columns: 384px minmax(0, 1fr);
  /* Nazwa wiersza, bo w tym samym wierszu stają dwie rzeczy: pas działań
     przez całą szerokość i nota wydawcy w kolumnie tożsamości. Numer
     rozjeżdżałby się między wariantem z belką i bez niej. */
  grid-template-rows: minmax(0, 1fr) [pas] auto;
  border: 1px solid var(--dn-obrys);
  border-radius: var(--dn-r-xl);
  background: var(--dn-okno-plotno);
  box-shadow: var(--dn-cien-3);
  overflow: hidden;
}

/* Wariant z belką okna systemowego: pierwszy wiersz siatki zajmuje belka,
   drugi — kolumna tożsamości i kolumna stanu. */
.we-okno--z-belka { grid-template-rows: var(--dn-wym-belka) minmax(0, 1fr) [pas] auto; }

/* ── 2 · MINIMALNA BELKA OKNA SYSTEMOWEGO ───────────────────────────────── */
/* Okno przed uwierzytelnieniem nie ma ramy aplikacji: ani szyny nawigacji,
   ani wstążki, ani paska stanu. Ma wyłącznie belkę okna systemowego —
   znak, tytuł, uchwyt przeciągania i zamknięcie. */

/* Belka jest ciemna w obu motywach, więc kropka bierze barwę sygnału ramy,
   a nie kropki treści — ta w motywie jasnym byłaby ciemniejsza od tła. */


/* ── 3 · KOLUMNA TOŻSAMOŚCI ─────────────────────────────────────────────── */

.we-marka {
  display: flex;
  flex-direction: column;
  gap: var(--dn-od-6);
  padding: var(--dn-od-8) var(--dn-od-6);
  /* Kolumna tożsamości to strefa okna, nie plansza marki. Atrament przy białym
     panelu dawał w motywie jasnym 94 stopnie różnicy jasności — okno rozpadało
     się na dwie połowy. Ta para daje 4,9 w jasnym i 6,9 w ciemnym. */
  /* Strefa 2 z 3 — obrzeże. */
  background: var(--dn-okno-obrzeze);
  color: var(--dn-tekst);
  /* Nic z kolumny nie wychodzi poza jej krawędzie — ani ilustracja, ani cień. */
  overflow: hidden;
  /* Rozdzielenie idzie samą barwą, bez kreski. Kolumna stoi na atramencie,
     panel obok unosi się na `--dn-panel`: różnica jasności 6,9 stopnia L*
     w motywie ciemnym, 92 w jasnym. Przy `--dn-powierzchnia` było 2,4 —
     stąd brała się kreska, którą tu wcześniej postawiono. */
}
.we-marka-godlo { width: 44px; height: 44px; color: var(--dn-tekst); }
/* Kropka godła pulsuje jednym, ciągłym tętnem — jedyny ruch kolumny tożsamości.
   Tętno 2,4 s jest wspólnym pulsem sygnału w całej platformie; tu ożywia okno
   wejściowe, w którym poza tym nic się nie porusza. */
.we-marka-godlo .kropka {
  fill: var(--dn-kropka);
  transform-box: fill-box;
  transform-origin: center;
  animation: we-tetno var(--dn-czas-tetno) var(--dn-ease) infinite;
}
@keyframes we-tetno {0%, 100% { opacity: 1; }45% { opacity: 0.35; }}
@media (prefers-reduced-motion: reduce) {.we-marka-godlo .kropka { animation: none; }}
.we-marka-nazwa {
  margin: 0;
  font-family: var(--dn-ff-naglowek);
  font-weight: var(--dn-fw-polgruba);
  font-size: var(--dn-fs-2xl);
  letter-spacing: var(--dn-ls-naglowek);
  line-height: var(--dn-lh-ciasny);
}
.we-marka-motto {
  margin: var(--dn-od-2) 0 0;
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-xs);
  letter-spacing: var(--dn-ls-mono-wersaliki);
  text-transform: uppercase;
  color: var(--dn-tekst-2);
}
.we-marka-lista { display: flex; flex-direction: column; gap: var(--dn-od-3); margin: 0; padding: 0; list-style: none; }
.we-marka-poz { display: flex; gap: var(--dn-od-3); font-size: var(--dn-fs-sm); line-height: var(--dn-lh-bazowy); color: var(--dn-tekst-2); }
.we-marka-poz svg { width: var(--dn-wym-ikona); height: var(--dn-wym-ikona); flex: none; color: var(--dn-tekst); }
.we-marka-poz b { display: block; color: var(--dn-tekst); font-weight: var(--dn-fw-srednia); }
.we-marka-stopka {
  /* Nota wydawcy stoi w wierszu pasa działań, w kolumnie tożsamości — na tej
     samej linii co czynność główna. Nad pasem wisiała w próżni, bo kolumna
     kończy się wyżej niż okno. Leży na pasie, nie w nim: pas należy do panelu,
     który się przełącza, a nota jest jedna dla całego okna. */
  grid-row: pas;
  grid-column: 1;
  /* Nota siada przy dnie okna, ale nie na krawędzi: odstęp od dołu jest ten
     sam co od lewej, więc róg kolumny czyta się jako róg, a nie jako obcięcie.
     Blok bywa wyższy od pasa i wtedy wychodzi w górę, w pustą część kolumny —
     tam nic nie stoi, więc niczego nie zasłania. */
  align-self: end;
  z-index: 1;
  margin: 0;
  padding: 0 var(--dn-od-6) var(--dn-od-6);
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-xs);
  line-height: var(--dn-lh-ciasny);
  color: var(--dn-tekst-2);
}

/* ── 4 · KOLUMNA STANU ALBO FORMULARZA ──────────────────────────────────── */

/* Okno wejściowe ma jedną wysokość niezależnie od wariantu stanu: wariant
   z komunikatem i wariant bez komunikatu nie mogą zmieniać rozmiaru okna
   w trakcie uruchomienia. Stopka opada na dół wolnego miejsca. */
.we-panel {
  /* Strefa 3 z 3 — płótno treści. */
  background: var(--dn-okno-plotno);
  display: flex;
  flex-direction: column;
  /* Rytm kolumny wzięty z rodziny .dn-okno-wejsciowe. Zapis o tym, że przy
     16 px najwyższa odsłona wychodzi poza okno, pochodził sprzed przebudowy
     drabiny — zmierzone ponownie: wszystkie siedem odsłon mieści się bez
     przewijania. */
  gap: var(--dn-od-4);
  /* Wcięcie z jednego źródła: stopka sięga krawędzi kolumny ujemnym
     marginesem tej samej wielkości. Dwie wartości wpisane osobno rozjeżdżają
     się przy pierwszej zmianie i zostawiają pas wiszący nad krawędzią. */
  padding: var(--we-wciecie-y) var(--we-wciecie-x);
  min-width: 0;
  /* Kolumna oddała wiersz pasowi działań, więc treść wyższa od niej musi mieć
     gdzie się przewinąć — inaczej ostatni wiersz urywa się przy pasie. */
  min-height: 0;
  overflow-y: auto;
}

/* Zdanie z wplecionym odsyłaczem — pytanie i czynność w jednym wierszu.
   Rozbite na dwa wiersze czyta się jak dwie osobne rzeczy. */
.we-fraza-pytanie { color: var(--dn-tekst-2); }
/* Głowa panelu: nadtytuł albo tytuł, tor kroków i zdanie wprowadzające.
   Reset zeruje marginesy nagłówkom i akapitom, więc odstęp musi wnieść
   kontener — inaczej trzy różne treści zlewają się w jeden blok. */
.we-glowa { display: flex; flex-direction: column; gap: var(--dn-od-2); }
.we-nadtytul {
  margin: 0;
  font-family: var(--dn-ff-mono);
  font-size: var(--dn-fs-xs);
  letter-spacing: var(--dn-ls-mono-wersaliki);
  text-transform: uppercase;
  color: var(--dn-tekst-2);
}
.we-tytul {
  margin: 0;
  font-family: var(--dn-ff-naglowek);
  font-weight: var(--dn-fw-polgruba);
  font-size: var(--dn-fs-xl);
  letter-spacing: var(--dn-ls-naglowek);
  line-height: var(--dn-lh-ciasny);
  color: var(--dn-tekst);
}
/* Obszar komunikatów panelu — pusty nie zabiera odstępu kolumny. */
.we-komunikaty { display: contents; }
.we-lid { margin: 0; max-width: 62ch; font-size: var(--dn-fs-sm); line-height: var(--dn-lh-luzny); color: var(--dn-tekst-2); }

/* Zakładki „Zaloguj się / Zarejestruj się" — pigułki nad formularzem.
   Stan wybrany niesie PODŚWIETLENIE, nie wypełnienie: pigułka w pełnym
   błękicie czytała się jak przycisk działania, a to kontrolka wyboru między
   dwiema równorzędnymi drogami — wskazuje, gdzie stoisz, a nie co wykonasz.
   Wypełnienie sygnałowe zostaje zarezerwowane dla przycisku „Zaloguj się”
   pod formularzem, który jest właściwym działaniem tego okna. */
/* ── 5 · TOR KROKÓW URUCHOMIENIA ────────────────────────────────────────── */


/* ── 6 · KOMUNIKAT W KOLUMNIE STANU ─────────────────────────────────────── */

/* Wykaz usterek wewnątrz komunikatu. Punktory są potrzebne: bez nich cztery
   zdania zlewają się w akapit, w którym nie widać, ile rzeczy jest do
   poprawienia. */
.dn-alert-lista {
  margin: var(--dn-od-1) 0 0;
  padding-left: var(--dn-od-4);
  /* Jedna pozycja na wiersz. Dwie kolumny mieściły więcej, ale przy dwóch
     usterkach sklejały je w jeden wiersz i wykaz czytał się jak zdanie
     z punktorami w środku. */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Komunikat z wykazem jest z natury wyższy od jednozdaniowego, więc oddycha
   węziej — inaczej przy czterech usterkach naraz formularz wychodzi poza okno. */
.dn-alert:has(.dn-alert-lista) { padding-block: var(--dn-od-2); }


/* ── 7 · DZIAŁANIA I STOPKA KOLUMNY ─────────────────────────────────────── */

.we-akcje { display: flex; align-items: center; gap: var(--dn-od-2); flex-wrap: wrap; }
.we-akcje .dn-btn { white-space: nowrap; }
.we-akcje .dn-btn > svg { width: var(--dn-wym-ikona-sm); height: var(--dn-wym-ikona-sm); flex: none; }
/* Pas działań domyka okno przez całą jego szerokość — pod kolumną tożsamości
   też. Pas urwany na granicy kolumny czyta się jak niedokończony rysunek,
   a nie jak dno okna. Ta sama zasada rządzi paskiem instalatora. */
.we-pas {
  grid-row: pas;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--dn-od-3);
  /* Czynności zbierają się przy prawej krawędzi — tam ręka szuka ich w każdym
     oknie tej rodziny, a gdy zostaje jedna, nie zawisa samotnie po lewej. */
  justify-content: flex-end;
  min-height: var(--dn-wym-stopki-instalatora);
  padding: var(--dn-od-3) var(--we-wciecie-x);
  background: var(--dn-okno-obrzeze);
  font-size: var(--dn-fs-sm);
  color: var(--dn-tekst-2);
}

/* Wariant ciągły: stopka niesie jedno zdanie z wplecionymi wywołaniami
   („Nie masz konta? Utwórz konto · lub · Kontynuuj bez konta”). Rozsunięcie
   do krawędzi rozrywałoby zdanie, więc pozycje stoją obok siebie. */


/* Zdanie nawigacyjne i odsyłacze stoją nad pasem, w treści. W pasie zostają
   same czynności — inaczej zdanie, czynność poboczna i główna nie mieszczą się
   w jednym wierszu i pas łamie się poza okno. */
/* Grupa oddycha ciasno, sekcja szeroko. Odstęp podstawowy kolumny wiąże bloki
   należące do siebie — pola formularza, miernik pod polem hasła. Początek nowej
   sekcji dostaje odstęp dwa razy większy, inaczej „Inne metody logowania"
   czyta się jak dalszy ciąg pola hasła, a zdanie zamykające — jak podpis pod
   ostatnią kontrolką. */
/* Głowa ekranu odcina się od treści szerzej niż bloki między sobą: tytuł,
   tor kroków i zdanie wprowadzające to jedna rzecz, a formularz — druga. */
.we-glowa { margin-bottom: var(--dn-od-5); }
.we-panel .au-etykieta,
.we-panel .au-opcje,
.we-panel .au-kod,
.we-panel > .we-fraza { margin-top: var(--dn-od-3); }
.we-panel > .we-fraza:last-child { margin-top: var(--dn-od-6); }

.we-fraza {
  /* Zdanie idzie za treścią, do której należy — nie spada na dno panelu.
     Dosunięcie do dołu wyrywało je z kontekstu: przy dwóch frazach pierwsza
     wyżerała całą wolną wysokość, a w krótkich ekranach odsyłacz zawisał
     kilkanaście wierszy pod tym, czego dotyczy. */
  margin: 0;
  font-size: var(--dn-fs-sm);
  color: var(--dn-tekst-2);
}

.we-lacznik { color: var(--dn-tekst-2); font-size: var(--dn-fs-sm); }

/* ── 8 · FORMULARZ UWIERZYTELNIENIA ─────────────────────────────────────── */
/* Rejestracja, logowanie, kod potwierdzający i odzyskiwanie dostępu. */

.au-pola { display: flex; flex-direction: column; gap: var(--dn-od-4); }
.au-para { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dn-od-4); }

/* pole hasła z odsłonięciem */
.au-haslo { position: relative; display: flex; }
.au-haslo > .dn-pole-kontrolka { width: 100%; padding-right: var(--dn-wym-kontrolka); }
.au-haslo-oko {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  display: grid; place-content: center;
  width: calc(var(--dn-wym-kontrolka) - 4px); height: calc(var(--dn-wym-kontrolka) - 4px);
  border: 0; border-radius: var(--dn-r-sm); background: transparent;
  color: var(--dn-tekst-2); cursor: pointer;
  transition: color var(--dn-czas-1) var(--dn-ease), background-color var(--dn-czas-1) var(--dn-ease);
}
.au-haslo-oko:hover { background: var(--dn-hover); color: var(--dn-tekst); }
.au-haslo-oko svg { width: var(--dn-wym-ikona-sm); height: var(--dn-wym-ikona-sm); }
.au-haslo-oko .ik-zakryte { display: none; }
.au-haslo-oko[aria-pressed='true'] .ik-odkryte { display: none; }
.au-haslo-oko[aria-pressed='true'] .ik-zakryte { display: block; }

/* wskaźnik siły hasła */
.au-sila { display: flex; flex-direction: column; gap: var(--dn-od-2); margin-top: var(--dn-od-3); }
.au-sila-tor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.au-sila-odc { height: 3px; border-radius: var(--dn-r-pill); background: var(--dn-obrys); }
/* Tor rośnie z liczbą spełnionych warunków; zieleń dopiero przy komplecie,
   bo dopiero komplet jest przyjmowany. Barwa sukcesu wcześniej zapowiadałaby
   powodzenie, którego nie będzie. */
.au-sila[data-stopien='1'] .au-sila-odc:nth-child(-n+1),
.au-sila[data-stopien='2'] .au-sila-odc:nth-child(-n+2) { background: var(--dn-ostrzezenie-tekst); }
.au-sila[data-stopien='3'] .au-sila-odc { background: var(--dn-sukces-tekst); }
.au-sila-opis { font-size: var(--dn-fs-xs); color: var(--dn-tekst-2); }
.au-sila-warunki { display: flex; flex-wrap: wrap; gap: var(--dn-od-1) var(--dn-od-3); font-size: var(--dn-fs-xs); color: var(--dn-tekst-2); }
.au-sila-warunek { display: inline-flex; align-items: center; gap: var(--dn-od-1); }
.au-sila-warunek svg { width: 12px; height: 12px; }
/* Znak warunku różni się KSZTAŁTEM, nie samą barwą: niespełniony niesie puste
   kółko, spełniony ptaszka. Ptaszek w każdym stanie czytał się jako „zrobione",
   a barwa jako jedyna różnica łamie WCAG 1.4.1. */
.au-sila-warunek .ik-jest { display: none; }
.au-sila-warunek[data-spelniony='tak'] .ik-brak { display: none; }
.au-sila-warunek[data-spelniony='tak'] .ik-jest { display: inline; }
.au-sila-warunek[data-spelniony='tak'] { color: var(--dn-sukces-tekst); }
/* Warunek niespełniony jest brakiem, który wstrzymuje rejestrację, a nie
   pozycją nieaktywną — barwa błędu mówi to samo, co kształt pustego kółka.
   Dopóki Operator nie zaczął wpisywać hasła, żaden warunek nie jest jeszcze
   niespełniony, więc wykaz stoi wtedy barwą spokojną. */
.au-sila:not([data-stopien='0']) .au-sila-warunek[data-spelniony='nie'] { color: var(--dn-blad-tekst); }

/* Przeglądarka dokłada polom hasła własny przycisk odsłonięcia — obok naszego
   dawał dwa oczka jedno przy drugim.

   KAŻDY z tych selektorów stoi w OSOBNEJ regule, i to jest tu istotne: wykaz
   selektorów unieważnia się w całości, gdy przeglądarka nie zna choćby jednego.
   Edge zna `::-ms-reveal`, ale nie zna `::-ms-clear`, więc wykaz z obydwoma
   nie robił nic — także tego, co robić umiał. */
.au-haslo > .dn-pole-kontrolka::-ms-reveal { display: none; }
.au-haslo > .dn-pole-kontrolka::-ms-clear { display: none; }
/* Ta sama ostrożność wobec przeglądarek opartych na WebKicie. */
.au-haslo > .dn-pole-kontrolka::-webkit-credentials-auto-fill-button { display: none; }
.au-haslo > .dn-pole-kontrolka::-webkit-strong-password-auto-fill-button { display: none; }

/* wiersz opcji sesji */
.au-opcje { display: flex; flex-direction: column; gap: var(--dn-od-3); }
.au-opcja { display: flex; align-items: flex-start; gap: var(--dn-od-2); font-size: var(--dn-fs-sm); color: var(--dn-tekst-2); cursor: pointer; }
.au-opcja small { display: block; font-size: var(--dn-fs-xs); color: var(--dn-tekst-2); }

/* Działania formularza układają się w kolumnę — przycisk główny na pełną
   szerokość, odsyłacz pod nim. */
.au-akcje { display: flex; flex-direction: column; gap: var(--dn-od-2); }
.au-akcje .dn-btn { justify-content: center; }
/* Odsyłacz w oknie wejściowym. Wpleciony w zdanie stopki różni się od tekstu
   otoczenia wyłącznie barwą (1,03:1 w motywie jasnym), więc niesie też
   podkreślenie — WCAG 1.4.1 wymaga rozróżnienia niebędącego samym kolorem. */
/* Odnośnik postawiony na przycisku musi zdjąć tło i obrys przeglądarki. */
.au-link { font-size: var(--dn-fs-sm); border: 0; background: transparent; }
.we-fraza .au-link { text-decoration: underline; text-underline-offset: 2px; }


/* Opis pola przejmuje trzeci stopień tekstu z biblioteki komponentów
   (`komponenty.css` → `.dn-pole-opis`); w oknie wejściowym to tekst 13 px,
   więc bierze drugi stopień. */
.we-panel .dn-pole-opis { color: var(--dn-tekst-2); }

.au-metody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dn-od-2); }

/* ── Kod potwierdzający ─────────────────────────────────────────────────── */
.au-kod { display: flex; gap: var(--dn-od-2); }
.au-kod-pole {
  width: 52px; height: 60px; flex: none;
  border: 1px solid var(--dn-obrys-mocny); border-radius: var(--dn-r-md);
  background: var(--dn-powierzchnia); color: var(--dn-tekst);
  font-family: var(--dn-ff-mono); font-size: var(--dn-fs-2xl); text-align: center;
  transition: border-color var(--dn-czas-1) var(--dn-ease), box-shadow var(--dn-czas-1) var(--dn-ease);
}
.au-kod-pole:focus { outline: none; border-color: var(--dn-fokus); box-shadow: var(--dn-cien-sygnal); }
.au-kod-adres { font-family: var(--dn-ff-mono); color: var(--dn-tekst); }
.au-kod-stopka { display: flex; align-items: center; gap: var(--dn-od-4); flex-wrap: wrap; font-size: var(--dn-fs-sm); }
.au-odliczanie { font-family: var(--dn-ff-mono); font-size: var(--dn-fs-sm); color: var(--dn-tekst-2); }
.au-odliczanie b { color: var(--dn-tekst); font-weight: var(--dn-fw-srednia); }

/* ── Kroki odzyskiwania ─────────────────────────────────────────────────── */
/* Tor kroków stoi między tytułem a zdaniem wprowadzającym — dostaje własne
   powietrze z obu stron, bo jest wskazaniem miejsca w procesie, nie tekstem. */
.we-glowa .au-kroki { padding: var(--dn-od-1) 0; }
.au-kroki { display: flex; align-items: center; gap: var(--dn-od-2); font-size: var(--dn-fs-xs); color: var(--dn-tekst-2); }
.au-krok { display: inline-flex; align-items: center; gap: var(--dn-od-1); }
.au-krok-nr {
  display: grid; place-content: center; width: 20px; height: 20px;
  border: 1px solid var(--dn-obrys-mocny); border-radius: var(--dn-r-pill);
  font-family: var(--dn-ff-mono); font-size: var(--dn-fs-xs);
}
.au-krok[data-biezacy='tak'] { color: var(--dn-tekst); }
.au-krok[data-biezacy='tak'] .au-krok-nr { border-color: var(--dn-sygnal-obrys); background: var(--dn-sygnal-tlo); color: var(--dn-sygnal); }
/* Krok zrobiony — znak zamiast numeru, żeby stan nie stał na samej barwie. */
.au-krok[data-zrobiony='tak'] { color: var(--dn-tekst-2); }
.au-krok[data-zrobiony='tak'] .au-krok-nr {
  border-color: var(--dn-sukces-obrys); background: var(--dn-sukces-tlo); color: var(--dn-sukces-tekst);
  font-size: 0;
}
.au-krok[data-zrobiony='tak'] .au-krok-nr::after {
  content: '✓'; font-size: var(--dn-fs-xs); line-height: 1;
}
.au-krok-strzalka { color: var(--dn-tekst-2); }

/* ── 9 · PRZYGOTOWANIE ŚRODOWISKA ───────────────────────────────────────── */
/* Bryła przestrzenna warstw platformy w kolumnie tożsamości — jedyny ruch
   ciągły widoku — oraz pasek postępu w kolumnie stanu. */

.pg-bryla-pole { display: grid; place-items: center; flex: 1 1 auto; min-height: 300px; perspective: 1000px; }
.pg-bryla {
  position: relative; width: 208px; height: 208px;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(0deg);
  animation: pg-obrot 24s linear infinite;
}
@keyframes pg-obrot {from { transform: rotateX(58deg) rotateZ(0deg); }to { transform: rotateX(58deg) rotateZ(360deg); }}
.pg-warstwa {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  border: 1px solid var(--dn-rama-obrys);
  border-radius: var(--dn-r-lg);
  background: var(--dn-rama-grafit);
  box-shadow: var(--dn-cien-2);
}
.pg-warstwa--1 { transform: translateZ(-84px); opacity: .5; }
.pg-warstwa--2 { transform: translateZ(-28px); opacity: .68; }
.pg-warstwa--3 { transform: translateZ(28px);  opacity: .84; }
.pg-warstwa--4 { transform: translateZ(84px);  background: var(--dn-szary-800); box-shadow: var(--dn-cien-3); }
.pg-warstwa-siatka {
  position: absolute; inset: var(--dn-od-3);
  border-radius: var(--dn-r-md);
  background:
    repeating-linear-gradient(0deg,  var(--dn-rama-obrys) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, var(--dn-rama-obrys) 0 1px, transparent 1px 22px);
  opacity: .7;
}
.pg-znak { width: 88px; height: 88px; color: var(--dn-rama-tekst); }
.pg-znak .kropka { fill: var(--dn-kropka); }
.pg-warstwa-etykieta {
  position: absolute; left: var(--dn-od-3); bottom: var(--dn-od-2);
  font-family: var(--dn-ff-mono); font-size: var(--dn-fs-xs);
  letter-spacing: var(--dn-ls-mono-wersaliki); text-transform: uppercase;
  color: var(--dn-rama-tekst-2);
}
@media (prefers-reduced-motion: reduce) {.pg-bryla { animation: none; transform: rotateX(58deg) rotateZ(28deg); }}

.pg-postep { display: flex; flex-direction: column; gap: var(--dn-od-2); }
.pg-postep-wiersz { display: flex; justify-content: space-between; font-size: var(--dn-fs-sm); color: var(--dn-tekst-2); }
.pg-postep-wiersz b { font-family: var(--dn-ff-mono); color: var(--dn-tekst); }

/* ── 11 · PROGI ─────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {.we-okno { width: 100%; height: auto; min-height: 640px; grid-template-columns: minmax(0, 1fr); }.we-marka { display: none; }}
@media (max-width: 640px) {.we-panel { padding: var(--dn-od-5) var(--dn-od-4); }.we-scena { padding: var(--dn-od-5) var(--dn-od-4); }.au-para, .au-metody { grid-template-columns: minmax(0, 1fr); }.au-kod-pole { width: 40px; height: 48px; font-size: var(--dn-fs-lg); }}
/* Dopowiedzenie przy wartości — jeden zapis dla wszystkich wierszy: pismo
   podstawowe, drobniejsze, przygaszone, oddzielone kropką środkową. */

/* Trzy kontrolki okna stoją w rzędzie przy prawej krawędzi belki. Sam ich
   wygląd — wymiar, barwa, stany, czerwień na zamknięciu — niesie biblioteka
   (.dn-okno-wejsciowe-belka-btn). Tutaj zostaje wyłącznie rozmieszczenie. */
.we-belka-sterowanie {
  display: flex;
  margin-left: auto;
  align-self: stretch;
}