/* robotatut.pl - pola formularzy: zlota obwodka zamiast czarnej ramki
   i zlota podswietlenie zamiast zielonej obreczy przegladarki.

   Arkusz jest podpiety JAKO OSTATNI (layouts/site), bo w tym projekcie
   wygrywa nizszy - nowe reguly dopisujemy na koncu, a nie w cudzych
   plikach. Stad tez pojedyncze !important nizej: zielona obrecz stoi
   w site.css pod selektorem :focus-visible o tej samej wadze. */

.field{
  border:1.5px solid rgba(212,175,55,.42);
  transition:border-color .14s ease, box-shadow .14s ease
}

/*
   CO SIE DZIEJE PRZY WPISYWANIU.

   Zielona obrecz (outline: 3px solid var(--green)) wygladala jak blad,
   a nie jak "tu wpisujesz". Zamiast niej pole rozjasnia wlasna obwodke
   i dostaje ciepla poswiate - ten sam zloty, co reszta portalu.

   focus-within, a nie focus na samym polu: ramka nalezy do .field,
   a kursor stoi w <input> w jej srodku.
*/
.field:focus-within{
  border-color:#D4AF37;
  box-shadow:0 0 0 3px rgba(212,175,55,.18)
}

/* Zielona obrecz na polach - zdjeta. Widocznosc skupienia bierze na
   siebie ramka wyzej, wiec nic sie nie gubi dla klawiatury. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  outline:none !important
}

/* Pole z bledem zostaje czerwone - to jedyny kolor, ktory ma tu krzyczec. */
.field.err{border-color:var(--red)}
.field.err:focus-within{box-shadow:0 0 0 3px rgba(200,60,40,.18)}

/*
   Podpowiedz z przegladarki (zapamietane haslo) maluje pole na swoj
   bladoniebieski albo zolty. W ciemnym motywie wygladalo to jak awaria.
   Przykrywamy ja wlasnym tlem - to jedyny znany sposob.
*/
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 40px var(--card) inset;
  caret-color:var(--ink)
}

/* Wybor specjalnosci stoi w tym samym formularzu - niech ma te sama
   obwodke, inaczej jedno pole wyglada jak z innej strony.
   Guzik wyboru to .spx-b (layouts/specpick). */
.form .spx-b{border-color:rgba(212,175,55,.42)}
.form .spx-b:focus-visible{
  outline:none !important;
  border-color:#D4AF37;
  box-shadow:0 0 0 3px rgba(212,175,55,.18)
}

/* Kwadraciki zgod i "zapamietaj mnie" - zlote, nie czarne. W ciemnym
   motywie czarny kwadracik na czarnym tle nie byl widoczny wcale. */
.form .consent input,
.consent input{accent-color:#C9A227}

/* Guzik, ktory czeka na wypelnienie pol, MUSI to pokazywac. Zloty
   guzik bez tego wyglada jak sprawny, czlowiek stuka i nic sie nie
   dzieje - a to najgorszy rodzaj bledu: "nic sie nie stalo". */
.btn:disabled,
.btn[disabled]{
  filter:grayscale(.75);
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none
}