/* ===========================================================================
   Ankieta soltectwa Rozyna - arkusz stylow
   ===========================================================================

   Zalozenia, ktorych prosze nie odwracac bez powodu:

   * Tekst bazowy ma 18 pikseli, a pola do klikania co najmniej 48 -
     ankiete wypelniaja rowniez osoby po siedemdziesiatce, czesto
     na malym telefonie i bez okularow.
   * Zadnych czcionek z internetu, zadnych bibliotek, zadnych obrazkow
     z zewnatrz. Cala strona to trzy pliki tekstowe i nic wiecej.
     To nie jest oszczednosc - to warunek anonimowosci ankiety.
   * Uzywamy wylacznie wlasciwosci obslugiwanych przez stare przegladarki:
     flexbox tak, grid oszczednie, :has() i zapytania kontenerowe nie.
     Odstepy robimy marginesami, a nie wlasciwoscia "gap", bo gap we
     flexboksie pojawil sie dopiero w 2020 roku.
   * Uklad jest budowany od telefonu w gore. Reguly dla szerokich ekranow
     siedza na koncu pliku, w sekcji "Duze ekrany".
   =========================================================================== */

:root {
  --tlo:            #faf7f0;   /* ciepla biel, jak papier */
  --tlo-karty:      #ffffff;
  --tlo-wyroznione: #f2eee2;
  --tekst:          #241f19;
  --tekst-slabszy:  #5c5449;
  --zielen:         #3f5d3b;   /* kolor wiodacy */
  --zielen-ciemna:  #2e462b;
  --zielen-jasna:   #e8efe4;
  --linia:          #d6cdb9;
  --linia-mocna:    #b3a68c;
  --czerwien:       #8c2f22;
  --promien:        6px;
}

/* --- Podstawy ---------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  /* Zeby powiekszenie tekstu w ustawieniach telefonu dzialalo normalnie. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "DejaVu Sans", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: Georgia, "Noto Serif", "DejaVu Serif", "Times New Roman", serif;
  font-weight: normal;
  color: var(--zielen-ciemna);
  line-height: 1.25;
  margin: 0 0 0.5em 0;
}

/* Na telefonie tytul jest mniejszy, zeby tresc wstepu byla widoczna
   bez przewijania. Na szerokim ekranie rosnie - patrz sekcja
   "Duze ekrany" na koncu pliku. */
h1 { font-size: 1.42em; }
h2 { font-size: 1.35em; }
h3 { font-size: 1.1em; }

p { margin: 0 0 0.9em 0; }

a {
  color: var(--zielen);
}

.oslona {
  max-width: 44em;
  margin: 0 auto;
  padding: 0 16px 48px 16px;
}

/* --- Naglowek strony --------------------------------------------------- */

.naglowek {
  background: var(--zielen);
  color: #fdfbf5;
  padding: 16px;
  border-bottom: 5px solid var(--zielen-ciemna);
}

.naglowek-tresc {
  max-width: 44em;
  margin: 0 auto;
}

.naglowek h1 {
  color: #fdfbf5;
  margin: 0 0 4px 0;
}

.naglowek .podtytul {
  margin: 0;
  font-size: 0.95em;
  color: #dfe8da;
}

/* --- Karty i bloki tresci ---------------------------------------------- */

.karta {
  background: var(--tlo-karty);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 18px;
  margin: 20px 0;
}

.karta-wyrozniona {
  background: var(--tlo-wyroznione);
  border-color: var(--linia-mocna);
}

.termin {
  font-weight: bold;
  color: var(--zielen-ciemna);
}

.drobne {
  font-size: 0.85em;
  color: var(--tekst-slabszy);
}

/* --- Pasek postepu ----------------------------------------------------- */

.postep {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--tlo);
  border-bottom: 1px solid var(--linia);
  padding: 10px 16px 12px 16px;
  margin: 0 -16px 8px -16px;
}

.postep-opis {
  font-size: 0.9em;
  color: var(--tekst-slabszy);
  margin: 0 0 6px 0;
}

.postep-rynna {
  background: var(--tlo-wyroznione);
  border: 1px solid var(--linia);
  border-radius: 20px;
  height: 14px;
  overflow: hidden;
}

.postep-wypelnienie {
  background: var(--zielen);
  height: 100%;
  width: 0;
}

/* --- Pytania ----------------------------------------------------------- */

.sekcja-tytul {
  border-bottom: 2px solid var(--linia-mocna);
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.sekcja-wstep {
  color: var(--tekst-slabszy);
  font-size: 0.95em;
}

.pytanie {
  margin: 0 0 26px 0;
  padding: 0 0 6px 0;
}

.pytanie-tresc {
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
}

.pytanie-pomoc {
  display: block;
  font-size: 0.9em;
  color: var(--tekst-slabszy);
  font-weight: normal;
  margin-bottom: 8px;
}

/* --- Pola wyboru: radio i checkbox ------------------------------------- */

.opcje {
  list-style: none;
  margin: 0;
  padding: 0;
}

.opcja {
  margin: 0 0 8px 0;
}

/* Etykieta jest calym klikalnym prostokatem - trafi w nia takze ktos,
   komu trzesa sie rece. */
.opcja label {
  display: block;
  position: relative;
  min-height: 48px;
  padding: 12px 12px 12px 52px;
  border: 2px solid var(--linia);
  border-radius: var(--promien);
  background: var(--tlo-karty);
  cursor: pointer;
}

.opcja input {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 22px;
  height: 22px;
  margin: 0;
}

.opcja input:checked + .tresc-opcji {
  font-weight: bold;
}

.opcja-zaznaczona label {
  border-color: var(--zielen);
  background: var(--zielen-jasna);
}

.opcja-zablokowana label {
  opacity: 0.5;
  cursor: not-allowed;
}

.licznik-wyboru {
  font-size: 0.9em;
  margin: 8px 0 0 0;
  padding: 8px 10px;
  border-radius: var(--promien);
  background: var(--tlo-wyroznione);
  border: 1px solid var(--linia);
}

.licznik-pelny {
  background: #f6ece3;
  border-color: #c9a68c;
  color: var(--czerwien);
}

/* --- Skala 1-5 i macierze ---------------------------------------------- */

.wiersz-oceny {
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  background: var(--tlo-karty);
  padding: 12px;
  margin-bottom: 10px;
}

.wiersz-etykieta {
  display: block;
  margin-bottom: 8px;
}

.skala {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* Piec przyciskow musi zmiescic sie w JEDNYM rzedzie takze na waskim
   telefonie (320 px). Przy szerszym odstepie piatka spadala do drugiej linii
   i wygladala jak inny rodzaj przycisku. Rachunek dla najwezszego ekranu:
   5 x 44 px + 4 x 4 px odstepu = 236 px, przy dostepnych okolo 264 px. */
.skala li {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  min-width: 44px;
  margin-right: 4px;
}

.skala li:last-child {
  margin-right: 0;
}

.skala label {
  display: block;
  text-align: center;
  min-height: 48px;
  line-height: 44px;
  border: 2px solid var(--linia);
  border-radius: var(--promien);
  background: var(--tlo-karty);
  font-size: 1.15em;
  cursor: pointer;
}

.skala input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.skala input:checked + .cyfra {
  display: block;
  background: var(--zielen);
  color: #fff;
  border-radius: 3px;
  margin: -2px;
  padding: 2px;
  font-weight: bold;
}

.skala-zaznaczona label {
  border-color: var(--zielen);
}

.skala-opisy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 0.82em;
  color: var(--tekst-slabszy);
  margin-top: 4px;
}

/* --- Pola tekstowe i liczbowe ------------------------------------------ */

input[type="text"],
input[type="number"],
textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--linia);
  border-radius: var(--promien);
  background: var(--tlo-karty);
  color: var(--tekst);
  font-family: inherit;
  /* 16 pikseli to najmniejszy rozmiar, przy ktorym Safari na iPhonie
     nie przybliza automatycznie widoku po kliknieciu w pole. */
  font-size: 18px;
  line-height: 1.4;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input:focus,
textarea:focus,
label:focus-within {
  outline: 3px solid var(--zielen);
  outline-offset: 1px;
}

.pole-liczbowe {
  max-width: 9em;
  display: inline-block;
}

.jednostka {
  margin-left: 8px;
}

.pole-inne {
  margin-top: 8px;
}

/* --- Przyciski --------------------------------------------------------- */

.przyciski {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 24px 0 0 0;
}

.przycisk {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  min-height: 54px;
  padding: 14px 22px;
  margin: 0 10px 10px 0;
  border: 2px solid var(--zielen);
  border-radius: var(--promien);
  background: var(--zielen);
  color: #fff;
  font-family: inherit;
  font-size: 1.05em;
  cursor: pointer;
}

.przycisk-drugi {
  background: var(--tlo-karty);
  color: var(--zielen-ciemna);
}

.przycisk-szeroki {
  width: 100%;
  margin-right: 0;
  font-size: 1.15em;
}

.przycisk[disabled] {
  opacity: 0.55;
  cursor: default;
}

/* --- Komunikaty -------------------------------------------------------- */

.komunikat {
  padding: 14px;
  border-radius: var(--promien);
  border: 2px solid var(--linia-mocna);
  background: var(--tlo-wyroznione);
  margin: 16px 0;
}

.komunikat-blad {
  border-color: #c9a68c;
  background: #f8ece6;
  color: var(--czerwien);
}

/* --- Pulapka na roboty ------------------------------------------------- */

/* Pole niewidoczne dla czlowieka. Nie wolno uzyc display:none ani
   visibility:hidden - czesc automatow to wykrywa i pomija pole. */
.pulapka {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Stopka ------------------------------------------------------------ */

.stopka {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--linia);
  font-size: 0.88em;
  color: var(--tekst-slabszy);
}

.ukryte {
  display: none;
}

/* --- Bardzo waskie telefony --------------------------------------------- */
/* Na ekranie 320 px wciecia sumuja sie do 92 pikseli (oslona 16 + karta 18
   + wiersz oceny 12, razy dwie strony) i piaty przycisk skali nie miescil sie
   juz w rzedzie. Zwezamy wciecia, zamiast zmniejszac przyciski ponizej
   44 pikseli - one musza zostac duze, bo w to trzeba trafic palcem. */

@media (max-width: 380px) {
  .oslona {
    padding-left: 10px;
    padding-right: 10px;
  }

  .postep {
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .karta {
    padding: 14px;
  }

  .wiersz-oceny {
    padding: 8px;
  }

  /* Zwezamy odstepy MIEDZY przyciskami, a nie same przyciski.
     Rachunek dla ekranu 320 px: na skale zostaje 237 px,
     5 przyciskow po 44 px + 4 odstepy po 2 px = 228 px. Miesci sie. */
  .skala li {
    margin-right: 2px;
  }

  .opcja label {
    padding-left: 46px;
  }
}

/* --- Duze ekrany ------------------------------------------------------- */
/* Na szerokim ekranie wiersze ocen ustawiaja sie w linie i cala macierz
   wyglada jak tabela - ale w kodzie HTML nadal jest zwykla lista pytan,
   wiec na telefonie rozwija sie sama, bez drugiego zestawu znacznikow. */

@media (min-width: 700px) {
  body {
    font-size: 19px;
  }

  h1 {
    font-size: 1.7em;
  }

  .oslona {
    padding-left: 24px;
    padding-right: 24px;
  }

  .wiersz-oceny {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .wiersz-etykieta {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin-bottom: 0;
    padding-right: 16px;
  }

  .wiersz-skala {
    -ms-flex: 0 0 320px;
    flex: 0 0 320px;
  }

  .przycisk-szeroki {
    width: auto;
  }
}

/* --- Wydruk strony glownej --------------------------------------------- */
/* Ktos moze sprobowac wydrukowac strone z ankieta. Wersja do druku jest
   pod adresem /do-druku, ale niech i to wyglada znosnie. */

@media print {
  .postep, .przyciski, .naglowek { display: none; }
  body { background: #fff; font-size: 11pt; }
  .karta { border: 1px solid #999; }
}

/* ===========================================================================
   WERSJA DO DRUKU (do-druku.html)
   ===========================================================================
   Uklad na kartke A4, czarno-bialy, do wypelnienia dlugopisem.
   Celem jest zmieszczenie calej ankiety na mozliwie malej liczbie kartek
   przy zachowaniu czytelnosci dla osoby starszej - stad stopien pisma 10,5
   punktu i wyrazne odstepy miedzy pytaniami.
   =========================================================================== */

.wydruk {
  max-width: 180mm;
  margin: 0 auto;
  padding: 10mm;
  background: #fff;
  color: #000;
}

/* Belka obowiazkowych znakow (PS WPR / LGD BOWH / Unia Europejska).
   Znaki musza stac na bialym tle - nie podkladaj pod nie koloru ani zdjecia
   i nie zmieniaj proporcji obrazka. Przy szerokosci 190 mm belka ma 24 mm
   wysokosci, co odpowiada proporcjom pliku 2250 na 284 punkty. Przy druku
   obszar zadrukowany ma 180 mm szerokosci - patrz marginesy w sekcji
   wydruku na koncu pliku. */
.pasek-znakow {
  background: #fff;
  margin-bottom: 3mm;
}

.pasek-znakow img {
  display: block;
  width: 100%;
  max-width: 160mm;
  height: auto;
  margin: 0 auto;
}

/* W stopce strony belka nie moze rozciagac sie na cala szerokosc monitora. */
.stopka .pasek-znakow {
  margin: 18px 0 0 0;
  padding: 12px 0 0 0;
  border-top: 1px solid var(--linia);
}

.stopka .pasek-znakow img {
  max-width: 34em;
}

.wydruk-naglowek {
  border-bottom: 2px solid #000;
  padding-bottom: 2mm;
  margin-bottom: 3mm;
}

.wydruk-naglowek h1 {
  font-size: 15pt;
  margin: 0 0 1mm 0;
  color: #000;
}

.wydruk-naglowek p {
  margin: 0;
  font-size: 10pt;
}

.wydruk-wstep {
  font-size: 10pt;
  border: 1px solid #000;
  padding: 2.5mm;
  margin-bottom: 3.5mm;
  overflow: hidden;   /* obejmuje oplywany kod QR ramka */
}

.wydruk-wstep p {
  margin: 0;
}

/* Kod QR w ramce wstepu. Uzywamy oplywania (float), a nie ukladu flex -
   dziala tak samo w kazdej przegladarce i w kazdym silniku druku, takze
   starszym.

   Bok 25 mm nie jest przypadkowy. Przy 20 mm kod odczytywal sie poprawnie
   z czystego wydruku, ale przestawal, gdy do obrazu dolozyc rozmycie i szum -
   czyli w warunkach zdjecia zrobionego starszym telefonem przy slabym swietle.
   Wieksza rezerwa jest tu wazniejsza niz kilka milimetrow na kartce. */
.wstep-qr {
  float: right;
  width: 25mm;
  margin: 0 0 1mm 3mm;
  text-align: center;
}

.wstep-qr img {
  display: block;
  width: 25mm;
  height: 25mm;
}

.wstep-qr-podpis {
  display: block;
  font-size: 7pt;
  line-height: 1.1;
  margin-top: 0.5mm;
}

.wydruk-sekcja {
  margin-bottom: 2mm;
}

.wydruk-sekcja h2 {
  font-size: 11.5pt;
  color: #000;
  border-bottom: 1px solid #000;
  margin: 2.4mm 0 1.2mm 0;
  padding-bottom: 0.6mm;
}

/* Lamanie stron przy wydruku.
   Zakaz dzielenia CALEGO pytania kosztowal jedna kartke na komplet: dluga
   lista przedsiewziec nie miescila sie w koncowce strony i skakala w calosci,
   zostawiajac pol kartki pustej. Zamiast tego zakazujemy dzielenia tylko
   tam, gdzie naprawde szkodzi: tabela ocen ma zostac w calosci, pojedyncza
   opcja nie moze peknac w polowie, a tresc pytania nie moze zostac sama
   na dole strony w oderwaniu od odpowiedzi. */
.wydruk-pytanie {
  margin-bottom: 1.9mm;
  page-break-inside: auto;
}

/* Tabela moze sie przelamac - jej naglowek powtorzy sie na nowej stronie
   (patrz thead w do-druku.js). Nierozdzielny ma zostac pojedynczy WIERSZ. */
.wydruk-macierz tr {
  page-break-inside: avoid;
}

.wydruk-macierz thead {
  display: table-header-group;
}

.wydruk-tresc-pytania {
  font-weight: bold;
  display: block;
}

.wydruk-pomoc {
  display: block;
  font-size: 9pt;
  font-style: italic;
}

/* Kratka do zaznaczenia dlugopisem. Rysujemy ja ramka, a nie znakiem
   z czcionki - dzieki temu wyglada tak samo w kazdej przegladarce
   i na kazdej drukarce. */
.kratka {
  display: inline-block;
  width: 4mm;
  height: 4mm;
  border: 1px solid #000;
  margin-right: 2mm;
  vertical-align: -0.5mm;
}

.wydruk-opcje {
  list-style: none;
  margin: 1mm 0 0 0;
  padding: 0;
}

.wydruk-opcje li {
  margin-bottom: 0.75mm;
  padding-left: 6mm;
  text-indent: -6mm;
}

.wydruk-opcje-waskie li {
  display: inline-block;
  width: 48%;
  vertical-align: top;
}

/* Linia do wpisania odpowiedzi wlasnymi slowami. */
.linia {
  display: block;
  border-bottom: 1px solid #000;
  height: 6mm;
}

.linia-krotka {
  display: inline-block;
  border-bottom: 1px solid #000;
  width: 30mm;
  height: 5mm;
}

.wydruk-macierz {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
  margin-top: 1mm;
}

.wydruk-macierz th,
.wydruk-macierz td {
  border: 1px solid #000;
  padding: 1.2mm;
}

.wydruk-macierz th {
  font-weight: normal;
  font-size: 9pt;
}

.wydruk-macierz td.ocena {
  text-align: center;
  width: 9mm;
}

/* Stopka ma zostac w calosci na jednej kartce. Bez tego jej ostatnie zdanie
   potrafi przeskoczyc na osobna strone - czyli cala dodatkowa kartke
   w kazdym komplecie dla jednej linijki tekstu. */
.wydruk-stopka {
  margin-top: 4mm;
  border-top: 2px solid #000;
  padding-top: 2.5mm;
  font-size: 10pt;
  page-break-inside: avoid;
}

.wydruk-stopka p {
  margin-bottom: 2mm;
}

.pasek-ekranowy {
  background: #f2eee2;
  border: 1px solid var(--linia);
  padding: 12px;
  margin-bottom: 12px;
  font-size: 0.9em;
}

/* Ostrzezenie o ustawieniach drukowania. Wyroznione, bo zle ustawienie
   marginesow w przegladarce psuje wydruk w sposob, ktory latwo przeoczyc
   az do momentu, gdy lezy sto obcietych kartek. */
.uwaga-druku {
  margin: 8px 0 0 0;
}

ul.uwaga-druku {
  padding-left: 22px;
}

ul.uwaga-druku li {
  margin-bottom: 5px;
}

@media print {
  @page {
    size: A4 portrait;
    /* Marginesy 15 mm po bokach, a nie 10. Powod jest prozaiczny: wiekszosc
       domowych drukarek atramentowych i laserowych nie drukuje blizej niz
       okolo 10 mm od krawedzi kartki. Przy ciasniejszym ustawieniu ramki
       tabel z ocenami potrafia zostac przyciete albo wyjsc krzywo.
       Do tego ankieta jest wypelniana dlugopisem i czesto trzymana w rece -
       trocha marginesu na kciuk tez sie przydaje. */
    margin: 14mm 15mm;
  }

  body {
    background: #fff;
    font-size: 10.5pt;
    line-height: 1.3;
  }

  .wydruk {
    padding: 0;
    max-width: none;
  }

  /* Elementy pomocnicze widoczne tylko na ekranie. */
  .pasek-ekranowy,
  .naglowek {
    display: none;
  }

  .wydruk-sekcja {
    page-break-inside: auto;
  }
}


/* ===========================================================================
   PODGLAD WYNIKOW NA ZYWO (strona generowana przez lambda/podglad.py)
   ===========================================================================
   Szerokosci slupkow sa klasami, a nie stylami wpisanymi w znacznik, bo
   zasada bezpieczenstwa wysylana przez CloudFront zabrania stylow w tresci
   strony. Stad ta drabinka klas co piec procent.
   =========================================================================== */

.p-licznik {
  font-family: Georgia, "Noto Serif", "DejaVu Serif", serif;
  font-size: 3.4em;
  line-height: 1;
  color: var(--zielen-ciemna);
  margin: 0;
}

.p-podpis {
  margin: 2px 0 10px 0;
  font-size: 1.05em;
}

.p-tabela {
  width: 100%;
  border-collapse: collapse;
}

.p-tabela td {
  padding: 4px 0;
  vertical-align: middle;
  border-bottom: 1px solid var(--tlo-wyroznione);
}

.p-nazwa {
  font-size: 0.9em;
  padding-right: 10px;
  width: 45%;
}

.p-slupek {
  width: 40%;
}

.p-pasek {
  display: block;
  height: 14px;
  background: var(--zielen);
  border-radius: 2px;
  min-width: 1px;
}

.p-liczba {
  text-align: right;
  font-weight: bold;
  width: 15%;
  padding-left: 8px;
  white-space: nowrap;
}

.p-w0 { width: 0%; }
.p-w5 { width: 5%; }
.p-w10 { width: 10%; }
.p-w15 { width: 15%; }
.p-w20 { width: 20%; }
.p-w25 { width: 25%; }
.p-w30 { width: 30%; }
.p-w35 { width: 35%; }
.p-w40 { width: 40%; }
.p-w45 { width: 45%; }
.p-w50 { width: 50%; }
.p-w55 { width: 55%; }
.p-w60 { width: 60%; }
.p-w65 { width: 65%; }
.p-w70 { width: 70%; }
.p-w75 { width: 75%; }
.p-w80 { width: 80%; }
.p-w85 { width: 85%; }
.p-w90 { width: 90%; }
.p-w95 { width: 95%; }
.p-w100 { width: 100%; }