/* Wejście do konta — jedna strona z zakładkami, na pełnej powłoce serwisu.
   Karta z prototypu: 476 px, biała, promień 20, wyściółka 28. */

/* Tło białe (DECYZJA Huberta 25.09, zrzut „Wpisz kod”): prototyp rysuje szary pas, ale
   w kontenerze 1240 px wyglądał jak szare pudło wokół karty. Kartę odcina jej obwódka. */
.wejscie {
  background: var(--v-n-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v-s-6);
  padding: var(--v-s-12) var(--v-s-5) var(--v-s-16);
}

.wejscie__karta {
  width: 100%;
  max-width: 680px; /* prośba Huberta 24.09: na desktopie szerzej niż 480 px z prototypu — pola nie ściskają się w wąskiej kolumnie */
  background: var(--v-n-0);
  border: 1px solid var(--v-n-100);
  border-radius: 20px; /* makieta */
  padding: 32px; /* pomiar z prototypu */
}

/* Przełącznik: szara ścieżka, wybrana zakładka biała — jak segment w prototypie. */
.wejscie__tryby {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px; /* makieta */
  padding: 3px; /* makieta */
  background: var(--v-n-50);
  border-radius: var(--v-r-input);
  margin-bottom: var(--v-s-6);
}

.wejscie__tryb {
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--v-n-600);
  font: 600 15px/1 var(--v-font-body);
  text-decoration: none;
}

.wejscie__tryb--teraz {
  background: var(--v-n-0);
  color: var(--v-primary);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(20, 28, 46, .10);
}

.wejscie__naglowek {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  margin-bottom: var(--v-s-6);
}

.wejscie__tytul {
  margin: 0;
  font: 600 28px/1.25 var(--v-font-display); /* pomiar z prototypu */
}

.wejscie__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--v-n-600);
}

/* Błąd pod polem kodu na ekranach bez komponentu pola (kod z e-maila, potwierdzenie
   adresu, nowe hasło). Wygląd 1:1 z `.v-field__error` — do audytu 2026-09-23 ta klasa
   nie miała reguły i „Ten kod jest nieprawidłowy” stał zwykłym, szarym tekstem. */
.wejscie__blad {
  font: 400 var(--v-t-label) var(--v-font-body);
  color: var(--v-error-text);
}

.wejscie__form {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
}

.wejscie__stopka {
  margin-top: var(--v-s-5);
  padding-top: var(--v-s-4);
  border-top: 1px solid var(--v-n-100);
  font-size: 14px;
}

/* Pomiar z prototypu: odnośnik pod formularzem jest szaroniebieski z podkreśleniem,
   13/600 — nie ochrowy. Ochra na białym jest zarezerwowana dla akcji płatnych. */
.wejscie__stopka a {
  color: var(--v-n-600);
  font: 600 13px/1.4 var(--v-font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wejscie__nota {
  margin: var(--v-s-4) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--v-n-600);
}

/* Trzy obietnice pod kartą, z ochrową kropką przed każdą. */
.wejscie__obietnice {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--v-s-3) var(--v-s-6);
  max-width: 680px; /* tyle co karta */
  font-size: 13px;
  color: var(--v-n-600);
}

.wejscie__obietnice li {
  display: flex;
  align-items: center;
  gap: var(--v-s-2);
}

.wejscie__obietnice li::before {
  content: '';
  width: 5px; /* makieta: kropka przy obietnicy */
  height: 5px; /* makieta */
  border-radius: 50%;
  background: var(--v-secondary);
}

@media (max-width: 760px) {
  .wejscie { padding: var(--v-s-6) 0 var(--v-s-10); }
  .wejscie__karta { border: 0; padding: 0; }
}

/* Imię i Nazwisko w jednym wierszu — tak stoi w makiecie. */
.wejscie__para {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v-s-4);
}

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


/* Przelacznik „Logowanie | Nowe konto” 1:1 z prototypem (uwaga Huberta 29.09).
   Prototyp: obudowa promien 12 i wysciolka 4, odstep 4, przyciski `flex:1`,
   wysokosc 40, promien 9, napis 14 px. Mielismy 3/3/44/10/15 — kazda wartosc
   o krok obok, przez co segment wygladal na ciezszy niz w projekcie. */
.wejscie__tryby {
  gap: var(--v-s-1); /* makieta */
  padding: var(--v-s-1); /* makieta */
  border-radius: 12px; /* makieta */
}

.wejscie__tryb {
  height: 40px; /* makieta */
  border-radius: 9px; /* makieta */
  font: 600 14px/1 var(--v-font-body);
}


/* Sciezka przelacznika na telefonie: strona ma teraz tlo --v-n-50, wiec sciezka
   w tym samym odcieniu znikala (uwaga Huberta 30.09). Karta wejscia jest biala,
   a sciezka o krok ciemniejsza — wtedy widac, ze to przelacznik. */
/* Ekran wejscia na telefonie 1:1 z „Vistitio Prototyp Mobile.dc.html", ekran
   „Logowanie i rejestracja": BEZ karty — wysciolka 16/24/32, kolumna z przerwa 20,
   przelacznik na scieżce #E9EDF2 (promien 12, wysciolka 4), potem tytul i lead.
   Bialy ekran ustawia powloka (`.powloka:has(.wejscie)`), bo tlo strony nalezy
   do niej, nie do arkusza ekranu. */
@media (max-width: 759px) {
  .wejscie {
    background: transparent;
    gap: 20px; /* makieta */
    padding: 16px 24px 32px; /* makieta */
  }

  .wejscie__karta { background: transparent; }

  /* Karta nie jest kolumna flex, wiec odstep pod przelacznikiem robi margines. */
  .wejscie__tryby { background: var(--v-n-100); margin-bottom: 20px; /* makieta */ }
}

/* Cel dotyku: „Nie pamiętam hasła” i odnosnik w nocie stoja SAME w wierszu, wiec
   powiekszenie ich niczego nie rozpycha (audyt mobile 30.09 — 123x18). */
@media (max-width: 759px) {
  .wejscie__stopka a,
  .wejscie__nota a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Komunikat „link poszedl” na ekranie resetu hasla. Stal wczesniej we wstawce
   `<style>` tego widoku razem z kopia polowy tego arkusza — po przejsciu resetu
   na powloke serwisu (30.09) wstawka zniknela, wiec regula nalezy tutaj. */
.wejscie__status {
  margin-bottom: var(--v-s-4);
  padding: var(--v-s-3) var(--v-s-4);
  border-radius: var(--v-r-input);
  background: var(--v-success-soft);
  color: var(--v-success-text);
  font: 400 var(--v-t-ui) var(--v-font-body);
}


/* ===========================================================================
   EKRAN „KOD WERYFIKACYJNY" (Prototyp Mobile, handoff PWA 36).
   Szesc osobnych pol po jednym znaku: od razu widac, ile znakow ma kod,
   a przy wpisywaniu z pamieci widac, na ktorym znaku sie jest.
   =========================================================================== */

.wejscie__wstecz {
  width: 44px;
  height: 44px;
  margin-left: -12px; /* makieta: znak optycznie dociagniety do rynny */
  font-size: 22px; /* makieta */
  line-height: 1;
  color: var(--v-primary);
  text-decoration: none;
}

.wejscie__kod { display: flex; gap: 8px; } /* makieta */

/* ⚠️ KLASA PODANA `x-input` LADUJE NA `<input>`, NIE NA OPAKOWANIU (gotcha 25.09).
   Dlatego szerokosc ustawiamy `.v-field` (opakowanie), a wyglad samemu polu —
   pierwsza wersja tych regul celowala w `.wejscie__kod-pole input` i nie dopasowala
   niczego, bo `wejscie__kod-pole` JEST tym polem. */
.wejscie__kod .v-field { flex: 1; min-width: 0; }
.wejscie__kod .v-field__wrap { margin-top: 0; }

/* Wysokosc i pismo wprost z makiety: 60 px, Outfit 26/600, tresc na srodku. */
.wejscie__kod input {
  height: 60px; /* makieta */
  padding: 0;
  text-align: center;
  font: 600 26px/1 var(--v-font-display); /* makieta */
  border-radius: 12px; /* makieta */
}

.wejscie__ponow { display: flex; justify-content: center; }
.wejscie__ponow .v-btn { text-decoration: underline; } /* makieta */

/* W APLIKACJI STRZALKE WSTECZ NIESIE PASEK, wiec ta z karty schodzi — inaczej
   stoja dwie jedna pod druga (zlapane zrzutem 05.10). W przegladarce paska
   aplikacji nie ma i to jest jedyne wyjscie z tego ekranu, wiec zostaje. */
.jak-aplikacja .wejscie__wstecz { display: none; }


/* ===========================================================================
   KONTO FIRMOWE PRZY ZAKŁADANIU KONTA (handoff 37 desktop / 38 mobile,
   ekran „Konto” i „Logowanie i rejestracja”, tryb „Nowe konto”).

   Cały blok pokazuje i chowa CSS, bez jednej linii JavaScriptu: kartami są
   prawdziwe pola radio, a `:has()` czyta ich stan. Dzięki temu formularz działa
   tak samo z wyłączonymi skryptami — a to jest ten formularz, którego nie da
   się pominąć, żeby wejść do serwisu.
   =========================================================================== */

/* Dwie karty w rzędzie na web, jedna pod drugą na telefonie (obie makiety). */
.wejscie__rodzaje {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; /* makieta */
}

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

/* Pola firmy czekają schowane i wjeżdżają po wybraniu „Konto firmowe”. */
.wejscie__firma { display: none; }

/* DWA PRZYCISKI WYSYŁAJĄCE, JEDEN WIDOCZNY. Makieta zmienia napis CTA przy koncie
   firmowym („Zacznij 7 dni za darmo”), a bez JavaScriptu tekstu nie da się przepisać
   po kliknięciu karty — więc przełącza je ten sam `:has()`, który odsłania pola firmy.
   Chowamy przez `display: none`, nie `visibility`: ukryty przycisk nie może zostawać
   w kolejności tabulatora ani dokładać pustego miejsca pod formularzem. */
.wejscie__cta { display: block; }
.wejscie__cta--firmowe { display: none; }

.wejscie__form:has(#rodzaj-konta-firmowe:checked) .wejscie__cta--prywatne { display: none; }
.wejscie__form:has(#rodzaj-konta-firmowe:checked) .wejscie__cta--firmowe { display: block; }

.wejscie__form:has(#rodzaj-konta-firmowe:checked) .wejscie__firma {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
}

/* NIP i „Pobierz dane z GUS” w jednym rzędzie na web; przycisk nie zwęża się
   poniżej swojego napisu, bo wtedy łamie się na dwie linie. */
.wejscie__nip {
  display: flex;
  gap: 8px; /* makieta */
  align-items: flex-start;
}

.wejscie__nip .v-field { flex: 1 1 auto; min-width: 0; }

.wejscie__nip .v-btn {
  flex-shrink: 0;
  height: 48px; /* makieta */
  margin-top: 24px; /* wysokość etykiety pola (12/1.4) + 6 px odstępu — równa górne krawędzie */
  white-space: nowrap;
}

/* Telefon: przycisk schodzi POD pole i bierze całą szerokość (makieta mobile). */
@media (max-width: 759px) {
  .wejscie__nip { flex-direction: column; gap: 6px; /* makieta */ }
  .wejscie__nip .v-field { width: 100%; }
  .wejscie__nip .v-btn { width: 100%; margin-top: 0; }
}

/* Ochrowa ramka „Konto firmowe działa inaczej”. Ochra znaczy u nas „to kosztuje
   albo zaraz minie” — i to zdanie mówi właśnie o kosztach i o terminach. */
.wejscie__firma-nota {
  display: flex;
  flex-direction: column;
  gap: 6px; /* makieta */
  padding: 13px 15px; /* makieta */
  border-radius: 12px; /* makieta */
  background: var(--v-secondary-soft);
  color: var(--v-secondary-text);
  font-size: 12.5px; /* makieta */
  line-height: 1.5;
}

.wejscie__firma-nota strong { font-size: 13px; /* makieta */ }

@media (max-width: 759px) {
  .wejscie__firma-nota { padding: 14px 16px; border-radius: 14px; /* makieta */ }
}

/* Nadtytuł „Osoba kontaktowa” nad imieniem — pojawia się razem z polami firmy. */
.wejscie__nadtytul {
  display: none;
  font: 700 11px/1.2 var(--v-font-body); /* makieta */
  letter-spacing: .07em; /* makieta */
  text-transform: uppercase;
  color: var(--v-n-500);
}

.wejscie__form:has(#rodzaj-konta-firmowe:checked) .wejscie__nadtytul { display: block; }

/* Oświadczenie reprezentanta: jedna zgoda więcej, widoczna tylko przy firmie. */
.wejscie__zgoda-firma { display: none; }

.wejscie__form:has(#rodzaj-konta-firmowe:checked) .wejscie__zgoda-firma { display: block; }