/* Formularz konsultacji – jedyna ścieżka kontaktu w serwisie.
 *
 * Pola stoją w jednej kolumnie, bez kart i bez ramek dookoła całości: rytm
 * bierze się z linii pod polem, tak jak w liście obszarów pola decyzji.
 *
 * Wartości wyłącznie z tokenów. Wpisana tu liczba heksadecymalna oznacza
 * brakujący token, nie wyjątek.
 */

.formularz {
  display: grid;
  gap: var(--skok-6);
  max-width: 34rem;
  margin-block: var(--skok-8);
}

.formularz__pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formularz__pole { display: grid; gap: var(--skok-2); }

.formularz__pole label,
.formularz__zgoda label {
  font-size: var(--stopien-s);
  line-height: var(--interlinia-s);
  color: var(--ink-soft);
  max-width: none;
}

.formularz__opcjonalne {
  font-family: var(--krój-mono), ui-monospace, monospace;
  font-size: var(--stopien-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.formularz__pole input,
.formularz__pole select,
.formularz__pole textarea {
  width: 100%;
  padding: var(--skok-3) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linia);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  font-size: var(--stopien-base);
}

.formularz__pole textarea { resize: vertical; }

.formularz__pole select {
  appearance: none;
  padding-right: var(--skok-6);
  cursor: pointer;
}

/* Strzałka listy rozwijanej rysowana tłem, żeby nie dokładać obrazu. */
.formularz__pole select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
                    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: right var(--skok-3) center, right calc(var(--skok-3) - 5px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.formularz__pole select option { background: var(--surface); color: var(--ink); }

.formularz__pole input:focus-visible,
.formularz__pole select:focus-visible,
.formularz__pole textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--signal-lime);
}

.formularz__pole input:hover,
.formularz__pole select:hover,
.formularz__pole textarea:hover { border-bottom-color: var(--ink-dim); }

.formularz__zgoda {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--skok-3);
  align-items: start;
}

.formularz__zgoda input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--signal-lime);
}

.formularz__zgoda a { color: var(--ink); }

.formularz button { justify-self: start; }

.formularz__nota { margin: 0; color: var(--ink-dim); }

@media (prefers-reduced-motion: no-preference) {
  .formularz__pole input,
  .formularz__pole select,
  .formularz__pole textarea {
    transition: border-bottom-color var(--czas-component-min, 160ms) var(--krzywa-standard, ease);
  }
}