/* Konwerter danych: ustawienia po lewej, dane wejściowe i wynik obok siebie (na węższym ekranie jedno pod drugim). */

.konwerter {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "ust wej wyn";
  gap: 18px;
  padding: 18px 28px 28px;
  align-items: start;
}
.ustawienia { grid-area: ust; position: sticky; top: 12px; }
.wejscie { grid-area: wej; }
.wynik { grid-area: wyn; }
.wejscie, .wynik { display: flex; flex-direction: column; gap: 8px; }
.wejscie .karta-naglowek, .wynik .karta-naglowek { margin-bottom: 0; }

.ustawienia fieldset { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.ustawienia legend {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 4px;
  padding: 0;
}
.ustawienia label { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 3px 0; cursor: pointer; }
.ustawienia label code { color: var(--ink-soft); }
.ustawienia label.pole { flex-direction: column; align-items: stretch; gap: 3px; font-size: 13px; color: var(--ink-soft); margin-top: 6px; cursor: default; }
.ustawienia label.pole select, .ustawienia label.pole input { color: var(--ink); width: 100%; }
.ustawienia .domyslne { margin-top: 14px; }

.podpowiedz { margin: 0; font-size: 13px; color: var(--ink-soft); min-height: 40px; }
.opis-formatu { margin: 0; font-size: 13px; color: var(--ink-soft); min-height: 40px; }
.wybor-formatu { flex: 1 1 220px; max-width: 360px; font-weight: 600; color: var(--navy); }
.wynik .karta-naglowek h2 { flex: none; }

#dane, #wynik {
  width: 100%;
  height: clamp(320px, calc(100vh - 380px), 900px);
  resize: vertical;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  white-space: pre;
  overflow: auto;
  tab-size: 4;
}
#wynik { background: #fbfcfe; }
.przeciaganie #dane { outline: 2px dashed var(--gold-dark); outline-offset: 2px; background: #fffbf0; }

/* Miejsce zarezerwowane, żeby nic nie skakało przy pisaniu. */
.stan { min-height: 44px; font-size: 13px; color: var(--ink-soft); }
.stan b { color: var(--ink); font-weight: 600; }
.stan .typy { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uwagi { min-height: 22px; font-size: 13px; color: var(--warn); }
.uwagi p { margin: 0; }


@media (max-width: 1320px) {
  .konwerter { grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "ust wej" "ust wyn"; }
  #dane, #wynik { height: clamp(260px, 42vh, 600px); }
}

@media (max-width: 860px) {
  .konwerter { grid-template-columns: minmax(0, 1fr); grid-template-areas: "wej" "wyn" "ust"; padding: 14px 16px 24px; }
  .ustawienia { position: static; }
  .wybor-formatu { max-width: none; }
}