/* ===========================================================================
   07 — FORMULARZE

   ⚠ TO JEST WARSTWA, KTÓRĄ NAJŁATWIEJ POMINĄĆ I NAJDROŻEJ SIĘ MŚCI.
     Motyw samodzielny nie dziedziczy NICZEGO — bez tego pliku pola formularza
     logowania i rejestracji zlewają się z tłem, komunikaty walidacji są
     nieodróżnialne od zwykłego tekstu, a przyciski wyglądają jak systemowe.
     Serwis nadal „działa", tylko nikt się nie zaloguje bez zgadywania.

   ⚠ CZĘŚĆ TYCH REGUŁ PEŁNI FUNKCJĘ, NIE DEKORACJĘ. Bloki `#reviewerInterests`
     i `.context_privacy` w rejestracji są UKRYWANE CSS-em i pokazywane
     skryptem po zaznaczeniu pola. Motyw, który tego nie odtworzy, pokaże
     wszystko naraz — łącznie z polami, których użytkownik nie powinien widzieć.
   =========================================================================== */

/* --- ramy formularza ------------------------------------------------------ */

.pkp_form,
.cmp_form {
  max-width: 640px;
  margin-bottom: var(--eos-odstep-56);
}

.pkp_form fieldset,
.cmp_form fieldset {
  border: 0;
  margin: 0 0 var(--eos-odstep-32);
  padding: 0;
}

/* ⚠ `:not(.pkp_screen_reader)` NIE JEST OZDOBĄ. Rdzeń OJS-a wystawia legendy
   przeznaczone wyłącznie dla czytnika ekranu (`<legend class="pkp_screen_reader">`).
   Bez tego wykluczenia `width: 100%` wygrywa z regułą ukrywającą (arkusz 07
   ładuje się po 01), legenda staje się bezwzględnie pozycjonowanym pudełkiem
   szerokości okna i wypycha stronę logowania o 175 px w poziomie. Zmierzone. */
.pkp_form legend:not(.pkp_screen_reader),
.cmp_form legend:not(.pkp_screen_reader) {
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-12);
  letter-spacing: var(--eos-swiatlo-24);
  text-transform: uppercase;
  color: var(--eos-atrament);
  padding: 0 0 var(--eos-odstep-12);
  border-bottom: var(--eos-linia) solid var(--eos-atrament);
  width: 100%;
  margin-bottom: var(--eos-odstep-24);
}

.pkp_form .fields > .field,
.cmp_form .fields > .field,
.pkp_form .field { margin-bottom: var(--eos-odstep-24); }

/* --- etykiety ------------------------------------------------------------- */

.pkp_form label,
.cmp_form label,
.pkp_form .label,
.cmp_form .label {
  display: block;
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-11);
  letter-spacing: var(--eos-swiatlo-18);
  text-transform: uppercase;
  color: var(--eos-atrament-60);
  margin-bottom: var(--eos-odstep-8);
}

/* Etykieta pola wyboru stoi obok pola, nie nad nim. */
.pkp_form .checkbox label,
.pkp_form label.checkbox,
.cmp_form .checkbox label {
  display: inline;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--eos-bezszeryf);
  font-size: var(--eos-pismo-15);
  color: var(--eos-atrament);
}

/* Oznaczenie pola wymaganego. */
.pkp_form .required,
.cmp_form .required { color: var(--eos-blekit); }

/* --- pola ----------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  max-width: 100%;
  padding: var(--eos-odstep-12) var(--eos-odstep-14);
  background: var(--eos-biel);
  /* ⚠ `-50`: granica pola to element nietekstowy, próg WCAG to 3:1.
     `-28` dawało 1,97:1 — pole zlewało się z tłem strony. */
  border: var(--eos-linia) solid var(--eos-atrament-50);
  border-radius: 0;
  color: var(--eos-atrament);
  font-family: var(--eos-bezszeryf);
  font-size: var(--eos-pismo-16);
  line-height: 1.5;
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--eos-blekit);
  box-shadow: inset 0 -2px 0 var(--eos-blekit);
}

/* ⚠ TO NIE JEST POWTÓRZENIE POWYŻSZEJ REGUŁY. `input:focus` gasi obwódkę
   również przy nawigacji klawiaturą i ma wyższą specyficzność niż globalne
   `:focus-visible`, więc samo podświetlenie kreską u dołu pola zostawało
   jedynym wskaźnikiem. Przywracamy pełną obwódkę, ale tylko dla klawiatury —
   po kliknięciu myszą nadal jej nie ma. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--eos-linia-akcent) solid var(--eos-blekit);
  outline-offset: 2px;
}

textarea { min-height: 160px; resize: vertical; }

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin-right: var(--eos-odstep-8);
  accent-color: var(--eos-blekit);
}

/* Tekst pomocniczy pod polem. */
.pkp_form .description,
.cmp_form .description,
.pkp_form .hint {
  font-size: var(--eos-pismo-14);
  line-height: 1.55;
  color: var(--eos-atrament-60);
  margin-top: var(--eos-odstep-8);
}

/* --- przyciski formularza ------------------------------------------------- */

.pkp_form button,
.pkp_form input[type="submit"],
.cmp_form button,
.cmp_form input[type="submit"],
button.submitFormButton,
.pkp_button {
  display: inline-block;
  font-family: var(--eos-etykieta);
  font-size: var(--eos-pismo-13);
  letter-spacing: var(--eos-swiatlo-16);
  text-transform: uppercase;
  background: var(--eos-atrament);
  color: var(--eos-tlo);
  border: 0;
  border-radius: 0;
  padding: 14px var(--eos-odstep-26);
  cursor: pointer;
}
.pkp_form button:hover,
.pkp_form input[type="submit"]:hover,
.cmp_form button:hover,
.pkp_button:hover { background: var(--eos-blekit-ciemny); }

/* Przycisk drugorzędny (np. „Anuluj"). */
.pkp_button--secondary,
.pkp_form .cancel {
  background: transparent;
  color: var(--eos-atrament);
  border: var(--eos-linia) solid var(--eos-atrament-50);
}
.pkp_button--secondary:hover,
.pkp_form .cancel:hover { background: var(--eos-atrament); color: var(--eos-tlo); }

.pkp_form .buttons { display: flex; gap: var(--eos-odstep-12); flex-wrap: wrap; align-items: center; }

/* --- walidacja ------------------------------------------------------------ */

/* ⚠ Komunikat błędu MUSI być odróżnialny bez samego koloru — stąd także
   obramowanie i wcięcie. Osoby z zaburzeniami rozpoznawania barw nie zobaczą
   czerwieni jako sygnału. */
.pkp_form_error,
.pkp_form .error,
.cmp_form .error {
  display: block;
  border-left: var(--eos-linia-akcent) solid #a3121a;
  background: rgba(163, 18, 26, .06);
  padding: var(--eos-odstep-10) var(--eos-odstep-14);
  margin-top: var(--eos-odstep-8);
  font-size: var(--eos-pismo-14);
  color: #7a0d14;
}
.pkp_form .error input,
input[aria-invalid="true"] { border-color: #a3121a; }

/* --- logowanie i rejestracja ---------------------------------------------- */

.pkp_page_login .pkp_form,
.pkp_page_user .pkp_form { max-width: 460px; }

.pkp_page_login .pkp_form .buttons,
.pkp_page_user .pkp_form .buttons { margin-top: var(--eos-odstep-24); }

/* ⚠ BLOKI STEROWANE SKRYPTEM. Domyślnie ukryte; `js/eos.js` dodaje klasę
   `eos_widoczne` po zaznaczeniu odpowiedniego pola. Bez tej pary reguł
   formularz rejestracji pokazuje sekcje, które powinny być zwinięte. */
#reviewerInterests,
.context_privacy { display: none; }
#reviewerInterests.eos_widoczne,
.context_privacy.eos_widoczne { display: block; }

/* --- wyszukiwarka --------------------------------------------------------- */

.pkp_page_search .search_input,
.cmp_form.search_form .fields { display: flex; gap: var(--eos-odstep-12); flex-wrap: wrap; }
.pkp_page_search .search_input input[type="text"] { flex: 1 1 320px; }