/* Broniarz - pola formularzy, szybki wybór jednym dotknięciem. Kolejność ładowania: motyw, baza, formularze, komponenty/*, pomocnicze. */

.pole-grupa { margin-bottom: var(--odstep); }
.pole-grupa > label { display: block; margin-bottom: 6px; font-weight: 600; }
.pole {
  width: 100%; min-height: var(--dotyk); padding: 12px 14px;
  background: var(--tlo-2); color: var(--tekst);
  border: 1.5px solid var(--ramka); border-radius: 12px;
  font: inherit; font-size: 1rem;   /* >= 16px, inaczej iOS przybliża stronę */
}
.pole:focus { border-color: var(--akcent); outline: none; }
.pole-liczba { font-size: 1.6rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.pomoc { color: var(--tekst-2); font-size: .85rem; margin-top: 4px; }
.pole-grupa.blad .pole { border-color: var(--blad); }
.pole-grupa.blad .pomoc { color: var(--blad); }

/* Szybki wybór jednym dotknięciem (strzelnica, broń, partia) zamiast listy rozwijanej */
.wybor { display: flex; flex-wrap: wrap; gap: 8px; }
.wybor input { position: absolute; opacity: 0; pointer-events: none; }
.wybor label {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--dotyk-maly); padding: 0 16px;
  border: 1.5px solid var(--ramka); border-radius: 999px; background: transparent; color: var(--tekst);
  cursor: pointer; font-size: .95rem; font-weight: 500;
}
.wybor input:checked + label { border-color: var(--tekst); background: var(--tekst); color: var(--tlo); font-weight: 600; }
.wybor input:focus-visible + label { outline: 3px solid var(--akcent); outline-offset: 2px; }

/* Formularz bez klas na polach: <form class="formularz"><label>Opis<input></label>...</form>.
   Każde zwykłe pole wygląda jak .pole - szablony nie muszą pamiętać o klasach. */
.formularz { display: grid; gap: var(--odstep); }
.formularz label { display: grid; gap: 6px; font-weight: 500; font-size: .85rem; color: var(--tekst-2); }
.formularz input:not([type="checkbox"], [type="radio"], [type="hidden"]),
.formularz select,
.formularz textarea {
  width: 100%; min-height: 54px; padding: 12px 16px;
  background: var(--tlo-2); color: var(--tekst);
  border: 1.5px solid var(--ramka); border-radius: 12px;
  font: inherit; font-size: 1rem; font-weight: 400;
}
.formularz input:focus, .formularz select:focus, .formularz textarea:focus { border-color: var(--akcent); outline: none; }
.formularz input[inputmode="numeric"], .formularz input[autocomplete="one-time-code"] {
  font-family: var(--font-liczby); font-size: 1.6rem; font-weight: 700; text-align: center; letter-spacing: .15em;
}
:root[data-kontrast] .formularz input, :root[data-kontrast] .formularz select { border-width: 3px; }
/* Pole wyboru: duży kwadrat obok tekstu, cały wiersz klikalny */
.formularz label.pole-wyboru, .pole-wyboru {
  display: flex; align-items: center; gap: 12px; min-height: var(--dotyk); font-weight: 500; cursor: pointer;
}
.pole-wyboru input { width: 26px; height: 26px; accent-color: var(--akcent); flex: none; }
/* W linii: pole + przycisk obok siebie (np. nazwa strzelca + Dodaj) */
.formularz-w-linii { grid-template-columns: 1fr auto; align-items: end; }
.w-linii { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.podpowiedz { color: var(--tekst-2); font-size: .9rem; line-height: 1.45; margin: 8px 0 0; }
.formularz + .formularz { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--ramka); }

/* Podpowiedź POD polem (Seba 10.10: „to ma być pod polem do wpisania") - lżejsza od etykiety,
   z odstępem od następnego pola. */
.formularz label .pomoc { display: block; margin: 2px 0 4px; font-weight: 400; font-size: .8rem; color: var(--tekst-3); }

/* Dwa pola obok siebie (np. daty dokumentu) - na wąskim telefonie input daty nie może rozpychać kolumny. */
.formularz .dwie-kolumny { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.formularz .dwie-kolumny input { min-width: 0; width: 100%; }

/* Podpowiedź między polami (np. „Nie ma na liście?”) - bez odstępu kleiła się z etykietą następnego pola (10.10). */
.formularz p.podpowiedz { margin-bottom: 10px; }
/* Komputer: formularz na całą szerokość treści (1000+ px) to pola-paski i daleko od etykiet do przycisków -
   kolumna do czytania, jak karty na telefonie. Tabele i listy zostają szerokie. */
@media (min-width: 1024px) {
  .tresc > form.formularz { max-width: 760px; }
}