/* ==========================================================================
   UKLAD FORMULARZA I BLOKI ODCZYTU

   Plik ukladu, nie kontrolki. Rozklada pola na siatce i rysuje tryb
   prezentacji. Nie ma tu nic interaktywnego, wiec osiem stanow tego pliku
   nie dotyczy. Zakaz literalu koloru obowiazuje tak samo.
   ========================================================================== */

/* --- siatka formularza. Dwanascie kolumn, bo dzieli sie na 2, 3, 4 i 6,
       a szesnascie nie dzieli sie na 3. --------------------------------- */
.uklad-formularz {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--odstep-4) var(--odstep-4);
  align-items: start;
}

.uklad-formularz-pole {
  grid-column: span 12;
  min-inline-size: 0;
}

/* Szerokosci deklarowane na polu, nie liczone w kodzie. Zamknieta lista,
   bo "span 5" na formularzu nie ma zadnego uzasadnienia. */
.uklad-formularz-pole[data-szerokosc="polowa"]  { grid-column: span 6; }
.uklad-formularz-pole[data-szerokosc="trzecia"] { grid-column: span 4; }
.uklad-formularz-pole[data-szerokosc="czwarta"] { grid-column: span 3; }
.uklad-formularz-pole[data-szerokosc="dwie-trzecie"] { grid-column: span 8; }

/* Na waskim ekranie kazde pole na calej szerokosci. Pola obok siebie
   na telefonie sa niemozliwe do wypelnienia. */
@media (max-width: 640px) {
  .uklad-formularz-pole[data-szerokosc] { grid-column: span 12; }
}

/* --- sekcja formularza. Naglowek nie jest karta, bo karty zagniezdzone
       w kartach to zawsze blad. ---------------------------------------- */
.uklad-sekcja {
  grid-column: span 12;
  margin-block-start: var(--odstep-4);
  padding-block-end: var(--odstep-2);
  font: var(--tekst-naglowek);
  color: var(--atrament);
  border-block-end: 1px solid var(--kreska);
}

.uklad-sekcja:first-child {
  margin-block-start: 0;
}

/* ==========================================================================
   TRYB PREZENTACJI
   Pola nie ma, jest tekst. Wysokosc dobrana tak, zeby wiersz odczytu mial
   te sama wysokosc co wiersz edycji, bo inaczej przelaczenie dokumentu
   w tryb odczytu przestawia caly uklad i ludzie mysla, ze zniknely dane.
   ========================================================================== */
.k-pole-prezentacja {
  display: grid;
  gap: var(--odstep-1);
  min-inline-size: 0;
}

.k-prezentacja {
  display: flex;
  align-items: center;
  gap: var(--odstep-2);
  min-block-size: var(--wys-aktualna);
  padding-inline: 0;
  font: var(--tekst-wartosc);
  color: var(--atrament);
  border-block-end: 1px solid var(--kreska);
}

/* Brak nazwany wprost. Pusty prostokat w trybie odczytu jest
   nieodroznialny od danych, ktore sie nie wczytaly. */
.k-prezentacja-brak {
  color: var(--atrament-3);
  font-style: italic;
}

.k-prezentacja-wiele {
  align-items: start;
  padding-block: var(--odstep-2);
  white-space: pre-wrap;
  max-inline-size: 68ch;
  text-wrap: pretty;
}

.k-prezentacja-liczba {
  font: var(--tekst-liczba);
  font-variant-numeric: tabular-nums;
  justify-content: flex-end;         /* kolumna kwot czytana pionowo */
}

.k-prezentacja-opis {
  margin-inline-start: auto;
  font: var(--tekst-pomoc);
  color: var(--atrament-2);
}

/* Wartosc, ktorej nie ma w slowniku. Nie udajemy, ze wszystko w porzadku,
   bo to znaczy, ze slownik zmienil sie pod gotowym dokumentem. */
.k-prezentacja-obca {
  color: var(--ostrzezenie);
}

.k-prezentacja-znacznik[data-wlaczony="tak"] {
  color: var(--powodzenie);
  font-weight: 600;
}

.k-prezentacja-znacznik[data-wlaczony="nie"] {
  color: var(--atrament-2);
}

.k-prezentacja-osoba {
  gap: var(--odstep-2);
}

/* ==========================================================================
   PODSUMOWANIE WALIDACJI
   Pokazywane dopiero po probie zapisu, nigdy w trakcie wypelniania.
   Kazda pozycja jest ODNOSNIKIEM do pola, bo lista bledow bez skokow
   do pol jest tylko wyrzutem sumienia.
   ========================================================================== */
.uklad-podsumowanie {
  grid-column: span 12;
  display: grid;
  gap: var(--odstep-2);
  padding: var(--odstep-3);
  background: var(--alarm-mgla);
  border-inline-start: 2px solid var(--alarm);
  border-radius: var(--promien-1);
}

.uklad-podsumowanie[data-waga="ostrzezenie"] {
  background: var(--ostrzezenie-mgla);
  border-inline-start-color: var(--ostrzezenie);
}

.uklad-podsumowanie-naglowek {
  font: var(--tekst-etykieta);
  color: var(--alarm);
}

.uklad-podsumowanie[data-waga="ostrzezenie"] .uklad-podsumowanie-naglowek {
  color: var(--ostrzezenie);
}

.uklad-podsumowanie-lista {
  margin: 0;
  padding-inline-start: var(--odstep-4);
  font: var(--tekst-pomoc);
  color: var(--atrament);
}

.uklad-podsumowanie-odnosnik {
  color: var(--atrament);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: start;
}

.uklad-podsumowanie-odnosnik:focus-visible {
  outline: var(--pierscien) solid var(--alarm);
  outline-offset: var(--pierscien-odstep);
  border-radius: var(--promien-1);
}