/* Arkusz wspólny dla strony głównej i dla stron konta.
 *
 * Wcześniej style siedziały w pliku strony głównej. Wyniesiono je tutaj, żeby
 * logowanie, rejestracja i panel konta wyglądały dokładnie tak samo jak reszta
 * serwisu i żeby zmiana koloru nie wymagała poprawiania dwóch miejsc.
 *
 * Paleta: granat i złoto wprost z logo vareto.pl. Motyw: wyłącznie jasny, świadomie. Serwis odwzorowuje dokument na papierze -
 * operat drukuje się na biało i tak samo ma wyglądać na ekranie. Dlatego nie ma
 * tu reguł reagujących na ciemny motyw systemu, a strony deklarują
 * `color-scheme: only light`, żeby przeglądarka nie odwracała kolorów formularzy.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; }
/* Przeglądarka daje `figure` czterdzieści pikseli marginesu z każdej strony. Fragmenty
   dokumentu są w `figure`, więc stały wsunięte względem reszty szpalty - o tyle samo
   i bez powodu. */
figure { margin: 0; }

:root {
  /* Podłoże jest chłodne i lekko nasycone, płyty czysto białe. Ta różnica robi
     na stronie porządek: to, co niesie treść, jest jaśniejsze od tła.
     Podłoże jest CIEMNIEJSZE niż było (#eaf1f4): przy tamtej wartości biała płyta
     odcinała się od tła o trzy procent jasności, więc nie odcinała się wcale -
     strona wyglądała na jednolicie bladą, a nie na dokument położony na biurku. */
  --papier:      #E0E5F0;
  --plyta:       #ffffff;
  --plyta-2:     #EEF1F8;
  --tusz:        #0B1526;
  --tusz-cichy:  #38455E;
  --tusz-slaby:  #5E6C88;
  --linia:       #C7D1E4;
  --linia-cienka:#DCE3F1;
  --atrament:    #16346B;
  --atrament-ciemny: #0A1F47;
  --atrament-tlo:#DEE6F6;

  /* Iskra: jeden mocny kolor na całą stronę. Świadomie NIE jest to kolor tekstu -
     przy tym nasyceniu na bieli dawałby kontrast poniżej 3:1. Służy do wypełnień,
     kresek i podkreśleń, a tam gdzie potrzebny jest napis, wchodzi `--iskra-tekst`,
     przyciemniony do kontrastu powyżej 4,5:1. */
  --iskra:       #F2B72A;
  --iskra-tekst: #8F6A06;
  --iskra-tlo:   #FCF3D9;
  --sygnal:      #8c3b1e;
  /* Znacznik na zdjęciu lotniczym. Barwa spoza palety serwisu i to jest jej zadanie:
     na fotografii są dachy, drzewa, asfalt i cienie, więc każdy stonowany kolor gdzieś
     się w nich gubi. Magenta nie występuje w krajobrazie naturalnie - stąd wybór. */
  --znacznik-mapy: #ff1f8f;
  --sygnal-tlo:  #f6e8e3;
  --uwaga:       #7a5c12;
  --uwaga-tlo:   #f5efdd;
  --dobry:       #1d5c3a;
  --dobry-tlo:   #e2eee8;

  --szeryf: Georgia, "Iowan Old Style", "Source Serif Pro", "Times New Roman", serif;
  --bez:    ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:   ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --miara: 66ch;
  --margines: clamp(1.15rem, 5vw, 3.5rem);

  /* Margines akt: szerokość lewej szpalty, w której stoją nazwa rozdziału i źródło.
     Wzorem jest margines operatu - dokumentu, w którym przy każdym ustaleniu musi
     być widoczne, skąd się wzięło. Patrz sekcja „Akta" niżej. */
  --szyna: 13.5rem;
  --szyna-odstep: 2.8rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tusz);
  font-family: var(--bez);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--atrament); outline-offset: 3px; }

.obszar { max-width: 1160px; margin: 0 auto; padding: 0 var(--margines); }

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

.pasek { border-bottom: 2px solid var(--iskra); background: var(--plyta); }
.pasek__wnetrze {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 0; flex-wrap: wrap;
}
.znak { display: flex; align-items: baseline; gap: .6rem; }
/* Wariant z logo obrazkowym: obraz nie ma linii bazowej tekstu, więc środkujemy. */
.znak:has(.znak__logo) { align-items: center; }
.znak__logo { display: block; height: 31px; width: auto; }
.znak--odnosnik { text-decoration: none; color: inherit; }
.znak__nazwa { font-family: var(--szeryf); font-size: 1.22rem; font-weight: 700; letter-spacing: -.015em; }
.znak__opis { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tusz-slaby); }
.pasek nav { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }

/* Na telefonie sześć odnośników łamało się na trzy wiersze i spychało nagłówek poniżej
   pierwszego ekranu - pasek zajmował więcej miejsca niż zdanie, po które ktoś przyszedł.
   Zamiast chować odnośniki albo dokładać skrypt z hamburgerem, kładziemy je w jednym
   wierszu przesuwanym palcem; wejście do konta zostaje na końcu i nie ucieka. */
@media (max-width: 52rem) {
  /* Wiersz pierwszy: znak i wejście do konta. Wiersz drugi: przesuwana nawigacja
     na całą szerokość. Bez tego przycisk konta wylądowałby w trzecim wierszu. */
  .pasek__wnetrze { gap: .6rem 1rem; padding: .8rem 0; }
  /* Znak rozpycha wiersz, więc przycisk konta ląduje przy prawej krawędzi. Nawigacja
     dostaje `order: 1` i pełną szerokość, przez co spada do drugiego wiersza -
     w kodzie stoi przed przyciskiem, a na ekranie ma być pod nim. */
  .pasek__wnetrze .znak { flex: 1 1 auto; }
  .pasek__wnetrze > #nawigacja-konto { flex: 0 0 auto; }
  /* Dopisek przy nazwie zabierał całą szerokość telefonu i spychał przycisk konta
     do własnego wiersza. Sama nazwa wystarczy - kto tu jest, wie, gdzie jest. */
  .znak__opis { display: none; }
  .pasek nav {
    order: 1;
    flex-wrap: nowrap;
    gap: 1.15rem;
    width: 100%;
    overflow-x: auto;
    /* Odnośniki dochodzą do samej krawędzi ekranu, żeby było widać, że wiersz
       się przesuwa - obcięty w połowie wyraz jest tu wskazówką, nie usterką. */
    margin: 0 calc(-1 * var(--margines));
    padding: .15rem var(--margines) .5rem;
    scrollbar-width: none;
  }
  .pasek nav::-webkit-scrollbar { display: none; }
  .pasek nav a { white-space: nowrap; }
}
.pasek nav a {
  color: var(--tusz-cichy); text-decoration: none; font-size: .88rem;
  padding: .2rem 0; border-bottom: 1px solid transparent;
}
.pasek nav a:hover { color: var(--atrament); border-bottom-color: var(--atrament); }
/* Wejście do konta ma być widoczne od razu, a nie jako kolejna pozycja w menu -
   to jedyny odnośnik w pasku, który prowadzi poza stronę informacyjną. Stoi poza
   `nav`, więc selektor nie może wymagać `nav` w ścieżce. */
.pasek a.przycisk-konta {
  border: 1px solid var(--atrament);
  border-radius: 2px;
  color: var(--atrament);
  font-weight: 600;
  padding: .34rem .8rem;
}
.pasek a.przycisk-konta:hover {
  background: var(--atrament);
  color: var(--plyta);
  border-color: var(--atrament);
}

.wyloguj { margin: 0; display: inline; }
.odnosnik-przycisk {
  background: none; border: 0; padding: .2rem 0; cursor: pointer;
  font: inherit; font-size: .88rem; color: var(--tusz-cichy);
  border-bottom: 1px solid transparent;
}
.odnosnik-przycisk:hover { color: var(--atrament); border-bottom-color: var(--atrament); }

/* ---------- Nagłówek strony głównej ---------- */

/* Nagłówek jest okładką arkusza: biała kartka, na której leży zdanie tytułowe
   i kawałek prawdziwego dokumentu. Kratka rysowana w tle poszła precz - nie niosła
   żadnej informacji, a rozmyta pod tekstem robiła z nagłówka mgłę. */
.naglowek {
  position: relative;
  border-bottom: 1px solid var(--linia);
}
.naglowek__uklad {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: 2.6rem;
  padding: clamp(2.6rem, 6vw, 4.4rem) 0 clamp(2.8rem, 6vw, 4.2rem);
}
@media (min-width: 62rem) {
  .naglowek__uklad {
    /* Dokument dostaje więcej miejsca niż dotąd (.95fr): to on jest dowodem,
       a zdanie tytułowe tylko go zapowiada. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: center;
  }
}

/* Etykieta adresata. Była pigułką w ramce i kolorze - wyglądała jak znaczek
   z prezentacji dla inwestorów. Teraz jest podpisem pisma maszynowego z kreską,
   czyli tym samym językiem, którym mówi szyna akt i główki tabel w operacie. */
.etykieta {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--iskra-tekst); font-weight: 700;
  margin: 0 0 1.4rem;
}
.etykieta::before {
  content: ""; width: 2.2rem; height: 2px; background: var(--iskra); flex: 0 0 auto;
}
/* Rozmiar dobrany do SZEROKOŚCI SZPALTY, a nie do szerokości okna: przy 3,9 rem
   zdanie łamało się na cztery wiersze z sierotą na końcu. Nagłówek ma się mieścić
   w trzech. */
h1 {
  font-family: var(--szeryf);
  font-size: clamp(2.15rem, 4.4vw, 3.3rem);
  line-height: 1.06; letter-spacing: -.03em;
  margin: 0 0 1.3rem; text-wrap: balance;
}
/* Drugie zdanie tytułu jest zaczepką („Nie wierzysz? Sprawdź sam."), więc odcina się
   kolorem i kursywą - to jest zmiana głosu, a nie ozdoba. */
h1 em { font-style: italic; color: var(--atrament); }
.naglowek p.wiodacy {
  font-size: 1.1rem; line-height: 1.58; color: var(--tusz-cichy);
  max-width: 48ch; margin: 0 0 2rem;
}

.akcje { display: flex; gap: .85rem; flex-wrap: wrap; align-items: center; }
/* Zdanie pod przyciskami w nagłówku - obietnica wymagająca sprawdzenia, więc stoi
   pod wezwaniem do działania, a nie nad nim. */
.pod-akcjami {
  margin: 1.4rem 0 0; font-size: .82rem; color: var(--tusz-slaby);
  letter-spacing: .02em;
}
/* Przyciski zamykające sekcję potrzebują powietrza nad sobą - inaczej sklejają się
   z treścią, z której wynikają. */
.akcje--sekcja { margin-top: 2rem; }
.przycisk {
  display: inline-block; font-family: var(--bez); font-size: .93rem; font-weight: 600;
  padding: .78rem 1.4rem; border-radius: 2px; text-decoration: none;
  border: 1px solid var(--atrament); cursor: pointer;
}
.przycisk--pelny { background: var(--atrament); color: var(--plyta); }
.przycisk--pelny:hover { background: var(--atrament-ciemny); border-color: var(--atrament-ciemny); }
.przycisk--pelny:disabled { opacity: .6; cursor: progress; }
.przycisk--obrys { color: var(--atrament); background: transparent; }
.przycisk--obrys:hover { background: var(--atrament-tlo); }

/* ---------- Obraz nagłówka ---------- */

/* Obraz stoi w prawej szpalcie nagłówka. Proporcja jest wymuszona, a kadr przycinany,
   bo szerokość szpalty zależy od okna - bez tego wysoki plik rozpychałby nagłówek
   w pionie i zepchnął przyciski poniżej pierwszego ekranu. */
.obraz-naglowka {
  display: block;
  width: 100%;
  /* Póki nagłówek jest jednoszpaltowy, obraz zajmuje CAŁĄ szerokość - przy proporcji
     3:2 daje to na tablecie ponad pięćset pikseli wysokości i spycha wezwanie
     do działania poza pierwszy ekran. Niżej kadr jest więc płytszy. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--linia);
  background: var(--plyta-2);
}
@media (min-width: 62rem) {
  /* Dwie szpalty: obraz ma połowę szerokości, więc wraca do proporcji 3:2 i staje
     obok zdania tytułowego mniej więcej równej wysokości. */
  .obraz-naglowka { aspect-ratio: 3 / 2; }
}

/* Zaślepka do czasu dostarczenia zdjęcia. Ma wyglądać na miejsce zostawione celowo,
   a nie na obraz, który się nie wczytał - stąd wypisany wprost format i rozmiar. */
.obraz-naglowka--puste {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem;
  border-style: dashed;
  border-color: var(--linia);
  font-family: var(--mono);
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tusz-slaby);
  text-align: center;
}
.obraz-naglowka--puste span:last-child { letter-spacing: .06em; text-transform: none; }

/* ---------- Fragment dokumentu ---------- */

.dowod {
  background: var(--plyta); border: 1px solid var(--linia);
  box-shadow: 0 1px 2px rgba(16, 26, 30, .05), 0 24px 48px -32px rgba(16, 26, 30, .35);
}
/* Pas nad fragmentem dokumentu jest jego metryczką - dostaje ciemne tło, bo ma się
   czytać jak nadruk na aktach, a nie jak kolejny wiersz treści. To nie jest „blok
   koloru" w rozumieniu reguły o jednym takim bloku: ma trzydzieści pikseli wysokości
   i nie konkuruje o uwagę z poleconym planem w cenniku. */
.dowod__pas {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .55rem .95rem;
  background: var(--atrament); color: #D6E0F2;
  font-family: var(--mono);
  font-size: .67rem; letter-spacing: .12em; text-transform: uppercase;
}
.dowod__tresc { padding: 1.1rem .95rem 1.25rem; }
.dowod__tytul { font-family: var(--szeryf); font-size: 1rem; font-weight: 700; margin: 0 0 .15rem; }
.dowod__pod { font-size: .78rem; color: var(--tusz-slaby); margin: 0 0 1rem; }

table { border-collapse: collapse; width: 100%; font-size: .78rem; }
th, td { padding: .42rem .5rem; text-align: left; border-bottom: 1px solid var(--linia-cienka); }
thead th {
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tusz-slaby); font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid var(--linia);
}
.lb { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.suma td { font-weight: 700; border-top: 1px solid var(--linia); border-bottom: none; background: var(--plyta-2); }
.dodatnia { color: var(--atrament); }
.ujemna { color: var(--sygnal); }
.zero { color: var(--tusz-slaby); }
.przewijane { overflow-x: auto; }

.dowod__wynik {
  margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--linia);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
}
.dowod__wynik span { font-size: .78rem; color: var(--tusz-slaby); }
.dowod__wynik strong { font-family: var(--mono); font-size: 1.12rem; color: var(--atrament); font-variant-numeric: tabular-nums; }

/* ---------- Sekcje ---------- */

section { padding: clamp(2.8rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--linia); }
/* Nagłówek sekcji nie ma jednej miary, bo nie jest jedną rzeczą: tytuł zniesie dłuższy
   wiersz, a akapit wiodący czyta się źle powyżej mniej więcej sześćdziesięciu znaków.
   Miarę dostaje więc akapit, a nie cały blok - inaczej to tytuł decydował o tym,
   gdzie kończy się kolumna. */
.naglowek-sekcji { margin-bottom: 2.2rem; }
.naglowek-sekcji > p { max-width: 62ch; }
.nadtytul {
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--iskra-tekst); font-weight: 700; margin: 0 0 .7rem;
}
h2 {
  font-family: var(--szeryf);
  font-size: clamp(1.7rem, 3.2vw, 2.45rem); line-height: 1.1;
  letter-spacing: -.025em; margin: 0 0 .8rem; text-wrap: balance;
}
.naglowek-sekcji p { margin: 0; color: var(--tusz-cichy); font-size: 1.02rem; }
h3 { font-size: 1.06rem; margin: 0 0 .55rem; letter-spacing: -.005em; }
p { margin: 0 0 1rem; }

/* ---------- Arkusz i szyna akt (strona główna) ------------------------------------
 *
 * PROBLEM, KTÓRY TO ROZWIĄZUJE. Każda sekcja miała nagłówek i akapity zamknięte
 * w mierze 64 znaków, dosunięte do lewej krawędzi kontenera. Na ekranie 1440 px
 * zostawało obok nich siedemset pikseli pustki - w każdej z czternastu sekcji.
 * Strona wyglądała przez to na maszynopis wklejony w lewy górny róg okna.
 *
 * ROZWIĄZANIE WZIĘTE Z SAMEGO DOKUMENTU. Operat ma margines, a w nim numer rozdziału
 * i wskazanie źródła - bo przy każdym ustaleniu musi być widoczne, skąd się wzięło
 * (patrz CLAUDE.md: „Sposób doboru nieruchomości porównawczych musi być w dokumencie
 * widoczny"). Ten sam układ dostaje strona: wąska szpalta z nazwą części i źródłem
 * jej twierdzeń, obok szpalta treści. Pustka po prawej znika, bo treść zaczyna się
 * tam, gdzie kończy margines, a nie przy krawędzi ekranu.
 *
 * Szyna nie jest ozdobą: gdy sekcja powołuje się na dane, w szynie stoi rejestr,
 * z którego pochodzą. Sekcja bez źródła zostawia to miejsce puste - i dobrze,
 * bo wpisanie tam czegokolwiek byłoby zmyśleniem podstawy.
 */

/* Cała treść leży na jednej białej kartce położonej na ciemniejszym podłożu.
   Wcześniej sekcje przeplatały się dwoma odcieniami bladego błękitu, różniącymi się
   na tyle mało, że nie dawały ani rytmu, ani podziału - tylko wrażenie brudu. */
.arkusz, .naglowek {
  max-width: 1240px;
  margin: 0 auto;
  background: var(--plyta);
  border-left: 1px solid var(--linia);
  border-right: 1px solid var(--linia);
}
/* Cień tylko pod spodem arkusza - kartka kończy się na stopce i tam ma się odkleić
   od podłoża. Nagłówek jest tą samą kartką, więc własnego cienia nie dostaje. */
.arkusz { box-shadow: 0 40px 80px -60px rgba(8, 42, 51, .55); }
.arkusz > section { border-bottom: 1px solid var(--linia-cienka); }
.arkusz > section:last-child { border-bottom: none; }

/* Wąski ekran: szyna jest zwykłym nagłówkiem nad treścią. Siatka wchodzi dopiero
   tam, gdzie jest z czego zrobić margines. */
.akta__szyna { margin-bottom: 1.4rem; }

@media (min-width: 62rem) {
  .akta {
    display: grid;
    grid-template-columns: var(--szyna) minmax(0, 1fr);
    /* Odstęp międzywierszowy zerowy: odległości pionowe niosą marginesy samych
       bloków treści. Gdyby był niezerowy, puste wiersze siatki (patrz niżej)
       rozepchnęłyby sekcję o tyle samo. */
    gap: 0 var(--szyna-odstep);
    align-items: start;
  }
  /* Wszystko idzie do szpalty treści; szyna jest jedynym wyjątkiem. */
  .akta > * { grid-column: 2; }
  /* Szyna stoi w pierwszym wierszu, przy nagłówku sekcji, i tam zostaje.
     NIE JEST PRZYKLEJONA. Próba: przy `position: sticky` i rozciągnięciu na wiersze
     sekcji szyna zjeżdżała razem z ekranem NA zestawienia idące przez całą szerokość
     (patrz niżej) i napis „Cennik" lądował na karcie planu. Numer rozdziału i tak
     pojawia się w dokumencie raz, na początku - a nie wędruje wzdłuż strony. */
  .akta > .akta__szyna {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  /* Zestawienia idą przez CAŁĄ szerokość kartki, także pod szyną - tak jak tabela
     w dokumencie, która nie mieści się w kolumnie tekstu i wychodzi na margines.
     Bez tego cztery kafle liczb dzieliły między siebie osiemset pikseli i każdy
     dostawał wiersz na dwa słowa. */
  .akta > .liczby,
  .akta > .cennik,
  .akta > .filary { grid-column: 1 / -1; }
}
.akta__szyna .nadtytul { margin: 0; }

/* Źródło twierdzeń tej sekcji. Kreska nad nim oddziela je od nazwy części: nazwa
   mówi, o czym jest sekcja, źródło - skąd wiemy, że to prawda. */
.akta__zrodlo {
  margin: .85rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--linia);
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.55;
  color: var(--tusz-slaby);
}
.akta__zrodlo b { display: block; font-weight: 700; color: var(--tusz-cichy); }

/* Nagłówek w szpalcie treści: bez własnego nadtytułu, bo ten stoi w szynie. */
.akta__tresc > .naglowek-sekcji { margin-bottom: 2rem; }
.akta__tresc > .naglowek-sekcji:last-child { margin-bottom: 0; }

/* ---------- Filary ---------- */

/* Płyty leżą na kartce, więc mają własne, jaśniejsze podłoże i cienki cień - inaczej
   biel na bieli znika i zostaje sama siatka włosowych kresek. */
.filary {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--linia); border: 1px solid var(--linia);
}
@media (min-width: 900px) { .filary { grid-template-columns: 1.25fr 1fr 1fr; } }
.filar { background: var(--plyta-2); padding: 1.6rem 1.5rem 1.8rem; }
.filar--glowny { background: var(--iskra-tlo); box-shadow: inset 3px 0 0 var(--iskra); }
.filar__numer {
  font-family: var(--mono); font-size: .68rem; color: var(--tusz-slaby);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9rem;
}
.filar--glowny .filar__numer { color: var(--iskra-tekst); font-weight: 700; }
.filar p { font-size: .93rem; color: var(--tusz-cichy); margin-bottom: .8rem; }
.filar ul { margin: 0; padding-left: 1.1rem; font-size: .89rem; color: var(--tusz-cichy); }
.filar li { margin-bottom: .35rem; }

.rysunek { width: 100%; height: auto; display: block; margin: .4rem 0 1.1rem; }

/* ---------- Kroki ---------- */

.kroki { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 760px) { .kroki { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; } }
.krok { display: flex; gap: 1.1rem; padding: 1.15rem 0; border-top: 1px solid var(--linia-cienka); }
.krok__nr { font-family: var(--mono); font-size: .78rem; color: var(--iskra-tekst); font-weight: 700; padding-top: .16rem; min-width: 1.6rem; }
.krok h3 { margin-bottom: .3rem; font-size: .98rem; }
.krok p { margin: 0; font-size: .89rem; color: var(--tusz-cichy); }

/* ---------- Liczby ---------- */

/* Liczby są tu dowodem, a nie ozdobnikiem - dostają rozmiar, na jaki zasługują,
   i stoją na płycie odciętej od kartki, żeby dało się je objąć wzrokiem naraz. */
.liczby {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1px; background: var(--linia); border: 1px solid var(--linia);
}
.liczba { background: var(--plyta-2); padding: 1.5rem 1.4rem 1.6rem; }
.liczba dt {
  font-family: var(--mono);
  font-size: clamp(1.9rem, 3.6vw, 2.4rem);
  font-variant-numeric: tabular-nums; letter-spacing: -.045em;
  color: var(--atrament); margin-bottom: .45rem; line-height: 1;
}
.liczba dd { margin: 0; font-size: .85rem; color: var(--tusz-cichy); line-height: 1.5; }

/* ---------- Nadzór ---------- */

.nadzor { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
@media (min-width: 900px) { .nadzor { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.lista-znak { list-style: none; margin: 0; padding: 0; }
.lista-znak li {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem;
  padding: .55rem 0; border-bottom: 1px solid var(--linia-cienka);
  font-size: .93rem; color: var(--tusz-cichy);
}
.lista-znak b { color: var(--tusz); font-weight: 600; }
.ptak { color: var(--atrament); font-weight: 700; }
.krzyz { color: var(--sygnal); font-weight: 700; }

.luka-przyklad { font-family: var(--bez); font-size: .8rem; background: var(--uwaga-tlo); color: var(--uwaga); padding: .12rem .45rem; border-radius: 2px; }

.ramka {
  border: 1px solid var(--linia); border-left: 3px solid var(--iskra);
  background: var(--plyta); padding: 1.15rem 1.35rem; margin: 1.5rem 0 0;
  max-width: var(--miara);
}
.ramka p { margin: 0; font-size: .93rem; color: var(--tusz-cichy); }
.ramka p + p { margin-top: .7rem; }

/* ---------- Cennik ---------- */

.cennik { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--linia); border: 1px solid var(--linia); }
@media (min-width: 860px) { .cennik { grid-template-columns: repeat(3, 1fr); } }
.plan { background: var(--plyta); padding: 1.7rem 1.5rem 1.9rem; display: flex; flex-direction: column; gap: .9rem; }
/* Polecany plan to jedyne miejsce na stronie z pełnym blokiem koloru. Cała
   reszta jest spokojna właśnie po to, żeby ten jeden element wygrywał wzrokowo. */
.plan--polecany {
  background: var(--atrament);
  color: #ffffff;
  box-shadow: inset 0 4px 0 var(--iskra);
}
.plan--polecany .plan__nazwa,
.plan--polecany .plan__limit,
.plan--polecany .plan__limit b { color: #ffffff; }
.plan--polecany .plan__cena { color: var(--iskra); }
.plan--polecany .plan__cena span,
.plan--polecany .plan__brutto,
.plan--polecany .plan__opis,
.plan--polecany .plan__zalety { color: #D6E0F2; }
.plan--polecany .plan__zalety li::before { color: var(--iskra); }
.plan--polecany .plan__limit { border-color: rgba(255, 255, 255, .28); }
.plan--polecany .plan__znacznik {
  color: var(--atrament); background: var(--iskra); border-color: var(--iskra);
}
/* Przycisk w bloku koloru musi się odwrócić: biały na ciemnym. */
.plan--polecany .przycisk {
  background: #ffffff; color: var(--atrament); border-color: #ffffff;
}
.plan--polecany .przycisk:hover { background: var(--iskra); border-color: var(--iskra); color: var(--atrament); }
.plan__gora { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.plan__nazwa { font-family: var(--szeryf); font-size: 1.3rem; font-weight: 700; margin: 0; }
.plan__znacznik {
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--atrament); border: 1px solid var(--atrament); border-radius: 2px; padding: .18rem .45rem;
}
.plan__cena { font-family: var(--mono); font-size: 2rem; font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--atrament); margin: 0; }
.plan__cena span { font-size: .82rem; font-family: var(--bez); color: var(--tusz-slaby); letter-spacing: 0; }
.plan__brutto { font-size: .78rem; color: var(--tusz-slaby); margin: -.5rem 0 0; }
.plan__limit {
  font-size: .88rem; font-weight: 600; color: var(--tusz);
  border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia);
  padding: .7rem 0; margin: 0;
}
.plan__limit b { font-family: var(--mono); font-size: 1.1rem; color: var(--atrament); }
.plan__opis { font-size: .89rem; color: var(--tusz-cichy); margin: 0; }
.plan__zalety { list-style: none; margin: 0; padding: 0; font-size: .88rem; color: var(--tusz-cichy); flex: 1; }
.plan__zalety li { padding: .3rem 0 .3rem 1.2rem; position: relative; }
.plan__zalety li::before { content: "-"; position: absolute; left: 0; color: var(--atrament); }
.plan .przycisk { text-align: center; }

.nota-cennika { margin: 1.5rem 0 0; font-size: .85rem; color: var(--tusz-slaby); max-width: var(--miara); }

/* ---------- Formularze ---------- */

.warstwa-formularza { padding: clamp(2.4rem, 6vw, 4rem) var(--margines); }
.karta-formularza {
  background: var(--plyta); border: 1px solid var(--linia);
  padding: clamp(1.5rem, 4vw, 2.6rem); max-width: 34rem; margin: 0 auto;
}
.tytul-formularza { font-family: var(--szeryf); font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.12; margin: 0 0 .7rem; }
.wprowadzenie { color: var(--tusz-cichy); font-size: .95rem; }

form { display: flex; flex-direction: column; gap: .25rem; }
/* Reguła powyżej bije domyślne `[hidden] { display: none }` przeglądarki, więc
   `<form hidden>` zostawał widoczny. Formularz zgłoszenia chowa się na czas pracy
   nad dokumentem, więc to nie jest drobiazg. */
form[hidden] { display: none; }
label { font-size: .84rem; font-weight: 600; margin-top: .9rem; }
.opcjonalne { font-weight: 400; color: var(--tusz-slaby); font-size: .78rem; }
/* Pole do wpisania jest białe, a nie w kolorze podłoża strony: podłoże pociemniało
   (patrz `--papier`), a pole wypełnione tamtym odcieniem czytało się jak blok
   wyłączony z użycia. Białe pole z wyraźną obwódką mówi „tu się pisze". */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
select, textarea {
  font: inherit; font-size: .95rem;
  background: var(--plyta); color: var(--tusz);
  border: 1px solid var(--linia); border-radius: 2px;
  padding: .65rem .75rem; width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--atrament);
  box-shadow: inset 0 0 0 1px var(--atrament);
}
textarea { resize: vertical; }
.podpowiedz { font-size: .78rem; color: var(--tusz-slaby); margin: .3rem 0 0; }

/* SKALA W JEDNEJ LINII - standard wykończenia i stan techniczny budynku.
   Obie skale są krótkie i uporządkowane: od najgorszej pozycji po lewej do
   najlepszej po prawej. Lista rozwijana pokazywała jedną pozycję naraz, więc
   porządek skali był niewidoczny - wybierający nie widział, gdzie na niej stoi.

   POD SPODEM SĄ ZWYKŁE `input[type=radio]`, tylko schowane. Dzięki temu klawiatura
   przechodzi po skali strzałkami, czytnik ekranu ogłasza ją jako grupę, a formularz
   wysyła się tak samo jak wcześniej. `appearance: none` zamiast `display: none`,
   bo pole całkiem usunięte z układu przestaje przyjmować kursor i znika obrys
   ogniskowania. */
.skala { border: 0; padding: 0; margin: .9rem 0 0; min-width: 0; }
.skala > legend {
  padding: 0;
  font-size: .84rem;
  font-weight: 600;
}
.skala__opcje {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .45rem;
}
.skala__opcja { margin: 0; font-weight: 400; }
.skala__opcja input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
  pointer-events: none;
}
.skala__opcja span {
  display: block;
  padding: .5rem .7rem;
  font-size: .86rem;
  line-height: 1.15;
  background: var(--plyta);
  color: var(--tusz);
  border: 1px solid var(--linia);
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.skala__opcja:hover span { border-color: var(--atrament); }
.skala__opcja input:checked + span {
  background: var(--atrament);
  border-color: var(--atrament);
  color: var(--plyta);
  font-weight: 600;
}
/* Obrys ogniskowania musi zostać widoczny - to jedyny znak, gdzie stoi kursor,
   gdy ktoś przechodzi skalę klawiaturą. */
.skala__opcja input:focus-visible + span {
  outline: 2px solid var(--atrament);
  outline-offset: 2px;
}
/* Na wąskim ekranie skala zawija się do dwóch rzędów, ale kolejność zostaje -
   od najgorszego do najlepszego, wierszami od lewej. */
@media (max-width: 420px) {
  .skala__opcja span { padding: .45rem .55rem; font-size: .8rem; }
}

.para-pol { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 560px) { .para-pol { grid-template-columns: 1fr 1fr; } }
/* Etykiety w dwóch kolumnach mają różną długość i jedna z nich potrafi się zawinąć
   („Numer uprawnień zawodowych" obok „Telefon"). Bez tego pola wejściowe stanęłyby
   na różnej wysokości. Kolumna jest kolumną elastyczną, a pole dostaje `margin-top:
   auto`, więc wolna przestrzeń ląduje nad nim i pola wyrównują się dołem. */
.para-pol > div { display: flex; flex-direction: column; }
.para-pol > div > input,
.para-pol > div > select { margin-top: auto; }

/* Wyrównanie dołem zawodzi, gdy pod jednym polem jest podpowiedź, a pod drugim nie -
   wtedy to podpowiedź decyduje o wysokości pola. Siatka podrzędna rozwiązuje to
   właściwie: obie kolumny dzielą te same wiersze, więc etykieta stoi w linii
   z etykietą, pole z polem, a podpowiedź z podpowiedzią. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 560px) {
    .para-pol { grid-template-rows: auto auto auto; }
    .para-pol > div {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
    }
    .para-pol > div > input,
    .para-pol > div > select { margin-top: 0; }
  }
}
/* Dopisek „opcjonalnie" ma się zawijać razem z ostatnim wyrazem etykiety,
   a nie zostawać sam w nowym wierszu. */
.opcjonalne { white-space: nowrap; }
.zgoda { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-weight: 400; font-size: .86rem; color: var(--tusz-cichy); margin-top: 1.2rem; }
.zgoda input { margin-top: .35rem; }
/* Przycisk jest elementem układu kolumnowego, więc rozciąga się na całą szerokość.
   Bez wyśrodkowania jego napis siedziałby przy lewej krawędzi - `inline-block`
   dziedziczy wyrównanie tekstu ze strony. */
form .przycisk { margin-top: 1.4rem; text-align: center; }
/* Formularze poziome (zmiana hasła, dane do dokumentów) nie mają się rozciągać
   na całą szerokość panelu konta - przycisk trzyma się swojej treści. */
.formularz-profilu .przycisk,
.formularz-hasla .przycisk { align-self: start; padding-left: 1.6rem; padding-right: 1.6rem; }
.pod-formularzem { margin: 1.3rem 0 0; font-size: .88rem; color: var(--tusz-cichy); }
.pod-formularzem a, .nota-danych a { color: var(--atrament); }
.nota-danych { margin: 1.6rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--linia-cienka); font-size: .8rem; color: var(--tusz-slaby); }

.komunikat { padding: .7rem .9rem; border-radius: 2px; font-size: .89rem; margin: 0 0 1.2rem; border-left: 3px solid; }
.komunikat--blad { background: var(--sygnal-tlo); color: var(--sygnal); border-left-color: var(--sygnal); }
.komunikat--uwaga { background: var(--uwaga-tlo); color: var(--uwaga); border-left-color: var(--uwaga); }

.komunikat-formularza { margin: .9rem 0 0; font-size: .88rem; }
.komunikat-formularza--praca { color: var(--tusz-slaby); }
.komunikat-formularza--sukces { color: var(--dobry); background: var(--dobry-tlo); padding: .6rem .8rem; border-radius: 2px; }
.komunikat-formularza--blad { color: var(--sygnal); background: var(--sygnal-tlo); padding: .6rem .8rem; border-radius: 2px; }

.formularz-wyceny { max-width: 40rem; }

/* ---------- Wynik sprawdzenia księgi wieczystej ---------- */

.ksiega {
  margin-top: 1.4rem; padding: 1rem 1.2rem;
  border: 1px solid var(--linia); border-left: 3px solid var(--linia);
  background: var(--plyta);
}
.ksiega--znaleziona { border-left-color: var(--dobry); background: var(--dobry-tlo); }
.ksiega--brak { border-left-color: var(--uwaga); background: var(--uwaga-tlo); }
/* Wykaz lokali w budynku - to nie jest ani dobra, ani zła wiadomość, tylko wybór
   do zrobienia. Stąd neutralna płyta zamiast barwy stanu. */
.ksiega--wybor {
  border-left-color: var(--atrament);
  background: var(--plyta);
  /* Licznik stoi w rogu panelu, nad listą - stąd kotwica pozycjonowania.
     Górny odstęp jest większy niż w pozostałych panelach, żeby licznik miał
     własne pasmo i nie nachodził na pierwszy rząd kafelków. */
  position: relative;
  padding-top: 1.55rem;
}
/* Licznik „33/46" zamiast zdania o tym, czym jest lista pod polem numeru lokalu.
   Bez `pointer-events: none` - podpowiedź `title` ma się pokazywać po najechaniu,
   a licznik nie leży na niczym klikalnym. */
.lokale__licznik {
  position: absolute;
  top: .5rem;
  right: .7rem;
  font-size: .68rem;
  line-height: 1;
  color: var(--tusz-slaby);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  cursor: default;
}

/* ---------- Wykaz lokali z księgą ----------
   Siatka przycisków, przewijana w pionie. Wybiera się z niej wzrokiem, szukając
   swojego numeru - stąd stała, niewielka wysokość i kolumny, a nie jeden długi
   słupek: czterdzieści mieszkań w jednej kolumnie to czterdzieści przewinięć. */
.lokale {
  display: grid;
  /* Węższa kolumna po zdjęciu kondygnacji z kafelka: w tym samym oknie mieści się
     ich teraz o połowę więcej, a wybiera się z listy wzrokiem. */
  grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr));
  gap: .25rem;
  max-height: 14rem;
  overflow-y: auto;
  padding: .15rem;
  border: 1px solid var(--linia);
  background: var(--plyta);
}
.lokale__pozycja {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font: inherit;
  text-align: left;
  padding: .2rem .35rem;
  background: var(--plyta);
  border: 1px solid var(--linia);
  border-radius: 2px;
  cursor: pointer;
}
.lokale__pozycja:hover,
.lokale__pozycja:focus-visible {
  border-color: var(--atrament);
  background: var(--atrament-tlo);
}
.lokale__numer { font-weight: 700; font-size: .78rem; line-height: 1.25; color: var(--tusz); }
.lokale__opis { font-size: .66rem; line-height: 1.25; color: var(--tusz-slaby); }
/* Adres jeszcze niepełny - to nie jest zła wiadomość, tylko postęp wyszukiwania. */
.ksiega--szukanie { border-left-color: var(--iskra); background: var(--iskra-tlo); }
.ksiega--szukanie p { color: var(--iskra-tekst); }
.ksiega p { margin: 0; font-size: .9rem; }
.ksiega--brak p { color: var(--uwaga); }
.ksiega__tytul { font-weight: 700; color: var(--dobry); margin-bottom: .7rem !important; }
.ksiega__dane { display: grid; grid-template-columns: 1fr; gap: .3rem 1.5rem; margin: 0 0 .7rem; }
@media (min-width: 560px) { .ksiega__dane { grid-template-columns: 1fr 1fr; } }
.ksiega__dane > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .87rem; }
.ksiega__dane dt { color: var(--tusz-cichy); }
.ksiega__dane dd {
  margin: 0; font-weight: 700; font-family: var(--mono);
  font-variant-numeric: tabular-nums; color: var(--tusz);
}
.ksiega__uwaga { font-size: .8rem !important; color: var(--tusz-cichy); margin-top: .5rem !important; }

/* Znaleziona księga podała powierzchnię, kondygnację i rodzaj prawa, więc formularz
   przestaje o nie pytać. Pola zostają w dokumencie z wypełnionymi wartościami -
   wysyłamy je tak samo jak wpisane ręcznie. */
.ksiega-znaleziona .tylko-bez-ksiegi { display: none; }

/* Dane lokalu to osobna partia pytań - oddzielamy ją, bo adres podaje się z pamięci,
   a powierzchnię i standard trzeba sprawdzić. */
#dane-lokalu {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linia);
}
.grupa-pol__tytul {
  margin: 0 0 .2rem;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--atrament); font-weight: 700;
}
.zrodlo-ustalone {
  background: var(--dobry-tlo); color: var(--dobry);
  padding: .5rem .7rem; border-radius: 2px;
}

/* ---------- Podpowiadanie nazw ulic ---------- */

/* ---------- Adres w dwóch wierszach ---------- */

/* Cztery pola adresu zajmowały cztery wiersze, a niosą jedną informację. Miasto
   z ulicą i numer budynku z numerem lokalu czytają się parami, więc parami stoją.
   Miasto dostaje stałą, wąską kolumnę - lista ma jedną pozycję i nie urośnie. */
.pola-obok {
  display: grid; gap: .6rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.pola-obok--adres { grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); }
.pola-obok label { display: block; }
.pola-obok input, .pola-obok select { width: 100%; }

/* PARY ZOSTAJĄ W JEDNEJ LINII TAKŻE NA TELEFONIE - decyzja właściciela serwisu.
   Wcześniej rozpadały się poniżej 30 rem, z uzasadnieniem, że na numer budynku
   zostanie kilka znaków. Uzasadnienie było chybione: w tych polach wpisuje się
   „12" i „34", a nie zdania, więc połowa szerokości telefonu wystarcza z zapasem.
   Rozbicie kosztowało za to dwa dodatkowe wiersze na ekranie, na którym liczy się
   każdy - formularz zaczyna się od adresu i to on ma się mieścić bez przewijania.
   Miasto ma węższą kolumnę niż ulica, bo mieści jedną nazwę, a ulica bywa długa. */
@media (max-width: 24rem) {
  .pola-obok--adres { grid-template-columns: minmax(4.5rem, 7rem) minmax(0, 1fr); }
  .pola-obok { gap: .6rem .5rem; }
}

.pole-z-podpowiedziami { position: relative; }

.podpowiedzi {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  margin: 2px 0 0; padding: 0; list-style: none;
  background: var(--plyta);
  border: 1px solid var(--atrament);
  max-height: 17rem; overflow-y: auto;
  box-shadow: 0 12px 24px -18px rgba(16, 26, 30, .55);
}
.podpowiedzi li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--linia-cienka);
  cursor: pointer;
  font-size: .92rem;
}
.podpowiedzi li:last-child { border-bottom: 0; }
/* Podświetlenie klawiaturą i myszą wygląda tak samo - to ta sama czynność. */
.podpowiedzi li:hover,
.podpowiedzi li.wybrana { background: var(--atrament-tlo); }

.podpowiedz__nazwa { font-weight: 600; }
.podpowiedz__uwaga {
  font-size: .76rem; color: var(--tusz-slaby); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Ulica bez transakcji w rejestrze nie jest błędem, ale rzeczoznawca powinien
   wiedzieć o tym przed wysłaniem zgłoszenia, a nie po. */
.podpowiedz__uwaga--brak { color: var(--uwaga); }

/* ---------- Konto ---------- */

.konto { max-width: 56rem; margin: 0 auto; }

/* Konto zaczyna się wyżej niż pozostałe podstrony. Górny odstęp `main` jest liczony
   pod stronę z jednym formularzem na środku; na koncie spychał pasek tożsamości
   i zamówienie poniżej pierwszego ekranu. Zawężamy go do TEJ strony - reszta serwisu
   zostaje bez zmian. Przeglądarka bez `:has()` pokaże układ dotychczasowy. */
main:has(> .konto) { padding-top: clamp(.9rem, 2vw, 1.4rem); }

/* ---------- Pasek tożsamości ----------
   Logotyp, nazwisko, firma, adres e-mail i numer uprawnień w JEDNYM wierszu: to jedna
   informacja („kto podpisuje te operaty"), więc i jeden wiersz. Obok saldo projektów
   jako mała plakietka. Wcześniej nazwisko było nagłówkiem strony, a saldo osobnym
   kafelkiem po prawej - razem zabierały pierwszy ekran, na którym nie było jeszcze
   nic do roboty.

   Bez kreski pod paskiem i bez kreski nad pierwszym blokiem: dwie linie poziome jedna
   pod drugą oddzielały tożsamość od zamówienia, czyli od jedynej rzeczy, po którą się
   tu wchodzi. Odstęp wystarczy za podział. */
.konto__pasek {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  padding: 0;
  margin-bottom: .7rem;
}

/* Znak jest tu podpisem, nie ilustracją - ma mieścić się w wierszu obok nazwiska,
   a nie stać nad nim. Stąd wysokość rzędu dwóch wierszy tekstu. */
.konto__logotyp {
  max-height: 2.2rem;
  max-width: 7.5rem;
  width: auto;
  display: block;
  background: #ffffff;
  border: 1px solid var(--linia);
  padding: .2rem;
}
/* Puste miejsce na znak jest zaproszeniem, a nie dziurą - stąd kreska przerywana
   i wprost napisane, co zrobić. */
.konto__logotyp--brak {
  display: flex; align-items: center; justify-content: center;
  min-width: 5.5rem; height: 2.2rem;
  border: 1px dashed var(--iskra); background: var(--iskra-tlo);
  color: var(--iskra-tekst); font-size: .72rem; font-weight: 700;
  letter-spacing: .03em; text-decoration: none;
  padding: 0 .5rem;
}
.konto__logotyp--brak:hover { background: var(--plyta); }
/* Baza 8 rem, a nie 18: przy szerszej podstawie oznaczenie rzeczoznawcy nie mieściło
   się obok znaku i plakietki, więc plakietka z saldem spadała do drugiego wiersza -
   czyli dokładnie tam, gdzie miała nie stać. `min-width: 0` pozwala tekstowi zawinąć
   się WEWNĄTRZ kolumny, zamiast rozpychać rząd. */
.konto__dane {
  flex: 1 1 8rem;
  min-width: 0;
  margin: 0;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--tusz-cichy);
}
.konto__dane strong { color: var(--tusz); font-size: .92rem; }

/* Plakietka, a nie kafelek: to liczba do sprawdzenia wzrokiem, nie do czytania.
   Jeden wiersz drobnym pismem, bez wypełnienia i bez własnego pudełka - ma się
   mieścić obok adresu e-mail, a nie stać osobno. */
.konto__saldo {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  margin: 0;
  padding: .12rem .45rem;
  border: 1px solid var(--linia);
  border-radius: 2px;
  white-space: nowrap;
  font-size: .74rem;
  color: var(--tusz-slaby);
}
.konto__saldo-liczba {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--atrament);
  font-variant-numeric: tabular-nums;
}

/* Własnego menu ustawień na koncie już nie ma: wejście do nich stoi w menu strony,
   które i tak jest na każdej podstronie. Dwa menu obok siebie, robiące to samo
   dwoma mechanizmami, to nie wybór - to niedokończone przenosiny. */

/* ---------- Logotyp rzeczoznawcy ---------- */

.logotyp {
  display: grid; grid-template-columns: 1fr; gap: 1.1rem; align-items: center;
  background: var(--plyta); border: 1px solid var(--linia);
  padding: 1.1rem 1.3rem; margin: 1rem 0 1.4rem;
}
@media (min-width: 620px) { .logotyp { grid-template-columns: auto 1fr; gap: 1.8rem; } }
/* Szachownica pod znakiem: bez niej logotyp z przezroczystym tłem wygląda inaczej
   w podglądzie niż na dokumencie. */
.logotyp__podglad {
  max-height: 4.5rem; max-width: 16rem; display: block;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e9eded 25%, transparent 25%, transparent 75%, #e9eded 75%),
    linear-gradient(45deg, #e9eded 25%, transparent 25%, transparent 75%, #e9eded 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  border: 1px solid var(--linia); padding: .4rem;
}
.logotyp__opis p { font-size: .84rem; color: var(--tusz-slaby); margin: 0 0 .4rem; }
.w-linii { display: inline; margin: 0; }
.odnosnik-przycisk--ostrzegawczy { color: var(--sygnal); }
.odnosnik-przycisk--ostrzegawczy:hover { color: var(--sygnal); border-bottom-color: var(--sygnal); }
input[type="file"] { font: inherit; font-size: .88rem; padding: .5rem 0; }
.komunikat--dobry { background: var(--dobry-tlo); color: var(--dobry); border-left-color: var(--dobry); }

/* ---------- Zamknięcie i stopka ---------- */

/* Ostatnia prośba na stronie. Zostaje spokojna, bo jedyny pełny blok koloru należy
   do poleconego planu w cenniku (patrz `.plan--polecany`) - wagę bierze więc ze skali
   pisma i z grubej kreski nad kartą, a nie z tła. */
.zamkniecie { border-bottom: none; }
.zamkniecie__karta {
  background: var(--plyta-2);
  border-top: 3px solid var(--iskra);
  padding: clamp(1.9rem, 5vw, 3.2rem);
  display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 860px) { .zamkniecie__karta { grid-template-columns: 1.4fr auto; gap: 3rem; } }
.zamkniecie h2 { margin-bottom: .6rem; }
.zamkniecie p { margin: 0; color: var(--tusz-cichy); max-width: 52ch; }

/* Stopka leży już poza kartką, na podłożu - dlatego nie ma własnej kreski u góry,
   bo krawędź arkusza jest wyraźniejsza niż jakakolwiek linia, którą można narysować. */
footer { padding: 2.4rem 0 3.2rem; font-size: .82rem; color: var(--tusz-cichy); }
footer p { margin: 0 0 .6rem; max-width: 74ch; }

/* Na telefonie zastrzeżenie ze stopki schodzi z widoku - decyzja właściciela serwisu.
   Trzy wiersze drobnego druku pod każdą stroną zabierały ekran, na którym liczy się
   dokument. ZOSTAJE W KODZIE STRONY i na ekranach większych: to jest zastrzeżenie
   o tym, czym jest ta usługa, a nie ozdobnik - chowamy je przed wzrokiem, nie
   usuwamy z serwisu. */
@media (max-width: 46rem) {
  footer { display: none; }
}

/* Poniżej tego progu stopka jest jeszcze widoczna - telefon położony poziomo mieści
   się w tym zakresie - ale ma być paskiem, a nie osobnym ekranem: odstępy liczone
   pod monitor dawały tam kilka centymetrów pustego miejsca pod trzema wierszami
   drobnego druku. Razem z nią kurczy się dolny odstęp treści: na krótkim ekranie
   pusty pas na dole to ekran, którego nie ma na co przewijać. */
@media (max-width: 62rem) {
  footer { padding: 1.1rem 0 1.4rem; font-size: .76rem; }
  footer p { margin: 0 0 .35rem; }
  main.warstwa-formularza { padding-bottom: clamp(1rem, 3vw, 1.8rem); }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ---------- Strona projektu operatu ---------- */

.operat { max-width: 64rem; margin: 0 auto; }
.operat__naglowek {
  display: grid; grid-template-columns: 1fr; gap: 1.4rem;
  align-items: start; margin-bottom: 1.6rem;
}
@media (min-width: 820px) { .operat__naglowek { grid-template-columns: 1fr auto; gap: 2.5rem; } }
.operat__pobieranie { display: flex; flex-direction: column; gap: .5rem; }
.operat__pobieranie .przycisk { text-align: center; white-space: nowrap; }

/* ---------- Menu plików operatu ----------
   Cztery odnośniki do pobrania i wydruku zebrane w jedno rozwijane menu. Zbudowane
   na `details`/`summary`, więc otwieranie klawiaturą, zamykanie Escape i ogłoszenie
   stanu czytnikowi ekranu daje przeglądarka - bez ani jednej linii skryptu. */
.menu-plikow { position: relative; }
.menu-plikow > summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  white-space: nowrap;
  list-style: none;          /* Firefox: chowa domyślny trójkąt */
}
.menu-plikow > summary::-webkit-details-marker { display: none; }
/* Własna strzałka, żeby było widać, że to menu, a nie zwykły przycisk. Obraca się
   przy otwarciu - to jedyny znak stanu, jaki ma tu sens. */
.menu-plikow > summary::after {
  content: "";
  width: .42rem; height: .42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.12em) rotate(45deg);
  transition: transform .12s ease;
}
.menu-plikow[open] > summary::after { transform: translateY(.1em) rotate(-135deg); }

.menu-plikow__lista {
  position: absolute;
  z-index: 30;
  right: 0;
  top: calc(100% + .35rem);
  min-width: 15rem;
  display: flex;
  flex-direction: column;
  background: var(--plyta);
  border: 1px solid var(--atrament);
  box-shadow: 0 12px 24px -18px rgba(16, 26, 30, .55);
}
.menu-plikow__lista a {
  padding: .6rem .85rem;
  font-size: .88rem;
  color: var(--tusz);
  text-decoration: none;
  border-bottom: 1px solid var(--linia-cienka);
}
.menu-plikow__lista a:last-child { border-bottom: 0; }
.menu-plikow__lista a:hover,
.menu-plikow__lista a:focus-visible { background: var(--atrament-tlo); }

/* Na wąskim ekranie menu nie ma się gdzie rozwinąć w bok - staje się zwykłą listą
   pod przyciskiem, bo nakładka szersza niż ekran uciekałaby poza jego krawędź. */
@media (max-width: 34rem) {
  .menu-plikow__lista { position: static; min-width: 0; margin-top: .35rem; }
}

.operat__edycja textarea {
  font-family: var(--mono); font-size: .82rem; line-height: 1.55;
  min-height: 26rem; resize: vertical;
}
.operat__przyciski { display: flex; gap: .8rem; flex-wrap: wrap; }
.operat__przywroc { margin-top: .8rem; }

/* Podgląd w ramce, żeby pokazywał dokładnie ten plik, który rzeczoznawca pobierze.
   Biała płyta pod spodem, bo dokument jest reprodukcją kartki papieru. */
.operat__podglad {
  width: 100%; height: 44rem; border: 1px solid var(--linia);
  background: #ffffff; margin-top: 1rem;
}

/* PODGLĄD NA CAŁĄ SZEROKOŚĆ TELEFONU.
   Dokument w ramce ma szerokość arkusza A4. Ramka zamknięta w kolumnie strony traciła
   po bokach dwa marginesy (`--margines` z każdej strony), a to przy telefonie jest
   już kilkanaście procent szerokości ekranu - kartka robiła się od nich węższa
   i tekst stawał się nieczytelny. Wypuszczamy więc ramkę do samych krawędzi ekranu
   i dajemy jej wysokość liczoną z okna, a nie stałą: na telefonie 44 rem to więcej
   niż cały ekran, więc pasek przewijania dokumentu i tak nie mieścił się w widoku. */
@media (max-width: 46rem) {
  .operat__podglad {
    /* SZEROKOŚĆ WPROST, NIE `auto`. Ramka jest elementem zastępowanym: przy `width:
       auto` przeglądarka daje jej WŁASNĄ szerokość domyślną - 300 px - zamiast
       szerokości rodzica. Dokument robił się wtedy węższy niż przedtem, a obok
       niego stało szare podłoże strony. Pełne wyjście poza kolumnę liczymy więc
       jawnie: sto procent plus dwa marginesy, przesunięte w lewo o jeden. */
    width: calc(100% + 2 * var(--margines));
    margin-left: calc(-1 * var(--margines));
    margin-right: calc(-1 * var(--margines));
    height: calc(100vh - 5rem);
    /* Na telefonie `vh` liczy się do wysokości okna Z paskiem adresu, który znika
       przy przewijaniu. `svh` - jeżeli przeglądarka je zna - liczy się do widoku
       najmniejszego, więc ramka nie wystaje pod pasek. */
    height: calc(100svh - 5rem);
    min-height: 26rem;
    border-left: 0;
    border-right: 0;
  }
}

/* ---------- Znaczniki stanu zlecenia ---------- */

.stan {
  display: inline-block; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; padding: .16rem .5rem; border-radius: 2px;
  border: 1px solid currentColor;
}
.stan--gotowe { color: var(--dobry); background: var(--dobry-tlo); }
.stan--w-toku { color: var(--iskra-tekst); background: var(--iskra-tlo); }
.stan--czeka  { color: var(--uwaga); background: var(--uwaga-tlo); }
.stan--blad   { color: var(--sygnal); background: var(--sygnal-tlo); cursor: help; }
.dzialania { white-space: nowrap; }
.dzialania a { color: var(--atrament); margin-right: .8rem; font-size: .82rem; }

/* ---------- Konto na telefonie ----------
   Tabela zleceń ma osiem kolumn. Na szerokim ekranie czyta się ją wierszami i to
   jest jej sens - liczby stoją jedna pod drugą i dają się porównać. Na telefonie
   ośmiu kolumn nie da się zmieścić: dotąd ratował to poziomy pasek przewijania
   (`.przewijane`), ale przewijana w bok tabela ukrywa połowę treści przed kimś,
   kto nie wie, że jest co przewijać - a nagłówek zjeżdża wtedy poza ekran i nie
   wiadomo już, co która liczba znaczy.

   Rozwiązanie: poniżej 46 rem każdy wiersz staje się kartą, a każda komórka dostaje
   podpis z atrybutu `data-etykieta`. Podpisy są w szablonie, nie w arkuszu, bo to
   treść nagłówka tabeli - arkusz stylów nie ma prawa jej wymyślać. */
@media (max-width: 46rem) {
  .przewijane { overflow-x: visible; }
  .przewijane table, .przewijane tbody, .przewijane tr, .przewijane td {
    display: block;
    width: 100%;
  }
  /* Nagłówek tabeli znika: jego treść wraca przy każdej komórce z osobna. */
  .przewijane thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .przewijane tr {
    border: 1px solid var(--linia);
    background: var(--plyta);
    padding: .55rem .75rem;
    margin-bottom: .7rem;
  }
  .przewijane td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 40%) 1fr;
    gap: .8rem;
    align-items: baseline;
    border-bottom: 1px solid var(--linia-cienka);
    padding: .35rem 0;
    font-size: .84rem;
  }
  .przewijane tr td:last-child { border-bottom: 0; }
  .przewijane td::before {
    content: attr(data-etykieta);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tusz-slaby);
    font-weight: 600;
  }
  /* Liczby zostają wyrównane do lewej: w karcie nie ma z czym ich równać w pionie,
     a wyrównanie do prawej odsuwałoby je od własnego podpisu. */
  .przewijane td.lb { text-align: left; }
  /* Komórka pusta (np. brak dokumentu przy zleceniu w toku) nie ma czego pokazywać,
     więc znika razem z podpisem - inaczej karta miałaby wiersz z samą etykietą. */
  .przewijane td:empty { display: none; }
  .dzialania { white-space: normal; }
  .dzialania a { display: inline-block; margin: .1rem .8rem .1rem 0; }
}


/* ---------- Hasła marki ---------- */

/* Jedno zdanie oddzielone od reszty - działa jak śródtytuł, więc dostaje szeryf
   i kreskę z koloru iskry, a nie własne tło. Bloków koloru na stronie jest jeden
   (polecany plan) i tak ma zostać. */
.haslo {
  font-family: var(--szeryf);
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  line-height: 1.35;
  color: var(--tusz);
  margin: 2.4rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--iskra);
  max-width: 46ch;
  text-wrap: balance;
}

/* ---------- Fragment dokumentu poza nagłówkiem ---------- */

.dowod--szeroki { max-width: 52rem; }
.tabela-danych caption {
  text-align: left; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tusz-slaby);
  padding-bottom: .6rem;
}
.tabela-danych { background: var(--plyta); border: 1px solid var(--linia); }
.tabela-danych th, .tabela-danych td { padding: .58rem .8rem; font-size: .86rem; }
.tabela-danych thead th { background: var(--plyta-2); }

blockquote.cytat {
  margin: .8rem 0; padding: .8rem 1rem;
  background: var(--sygnal-tlo); border-left: 3px solid var(--sygnal);
  font-size: .9rem; color: var(--tusz-cichy); font-style: italic;
}

/* ---------- Lejek selekcji ---------- */

/* Stopnie zwężają się w dół, bo taki jest sens lejka. Szerokość każdego stopnia
   podaje zmienna `--szerokosc` przy elemencie: liczby transakcji różnią się o trzy
   rzędy wielkości, więc proporcjonalny słupek dla trójki byłby niewidoczny. */
.lejek { list-style: none; margin: 0; padding: 0; }
.lejek__stopien {
  width: var(--szerokosc, 100%);
  min-width: 15rem;
  margin: 0 auto .5rem 0;
  padding: .85rem 1.1rem;
  background: var(--plyta);
  border: 1px solid var(--linia);
  border-left: 3px solid var(--iskra);
  display: grid; gap: .1rem 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .lejek__stopien { grid-template-columns: 6.5rem 1fr; align-items: baseline; }
}
.lejek__liczba {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.4rem; letter-spacing: -.02em; color: var(--iskra-tekst);
  font-weight: 700;
}
.lejek__opis { font-size: .86rem; color: var(--tusz-cichy); line-height: 1.45; }
/* Ostatni stopień to wynik selekcji, więc jako jedyny jest podkreślony atramentem. */
.lejek__stopien--wynik { border-left-color: var(--atrament); background: var(--atrament-tlo); }
.lejek__stopien--wynik .lejek__liczba { color: var(--atrament); }

/* ---------- Zapowiedzi ---------- */

/* Funkcja opisana, ale jeszcze niedostępna w serwisie. Znacznik ma być czytany
   razem z nadtytułem sekcji, żeby nikt nie przeoczył, co kupuje, a czego nie. */
.znacznik-zapowiedzi {
  display: inline-block; margin-left: .5rem;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--uwaga); background: var(--uwaga-tlo);
  border: 1px solid var(--uwaga); border-radius: 2px; padding: .1rem .4rem;
}
.ramka--uwaga { border-left-color: var(--uwaga); background: var(--uwaga-tlo); }
.ramka--uwaga p { color: var(--uwaga); }
.ramka--uwaga b { color: var(--uwaga); }

/* ---------- Filary w dwóch kolumnach ---------- */

@media (min-width: 900px) { .filary--dwa { grid-template-columns: 1fr 1fr; } }
.filar .spis { list-style: none; padding-left: 0; font-family: var(--mono); font-size: .8rem; }
.filar .spis li { padding: .18rem 0; border-bottom: 1px solid var(--linia-cienka); margin-bottom: 0; }
.filar .spis li:last-child { border-bottom: 0; }

/* ---------- Elementy rozwijane ---------- */

.rozwijane {
  background: var(--plyta); border: 1px solid var(--linia);
  border-left: 3px solid var(--linia);
  margin-top: 1.2rem;
}
.rozwijane > summary {
  cursor: pointer; padding: .85rem 1.1rem;
  font-size: .93rem; font-weight: 600; color: var(--atrament);
  list-style-position: inside;
}
.rozwijane > summary:hover { background: var(--atrament-tlo); }
.rozwijane[open] { border-left-color: var(--iskra); }
.rozwijane[open] > summary { border-bottom: 1px solid var(--linia-cienka); }
.rozwijane__tresc { padding: 1.1rem 1.1rem .4rem; }
.rozwijane__tresc p { font-size: .92rem; color: var(--tusz-cichy); }
.rozwijane__tresc table { margin-bottom: 1rem; }
.drobne { font-size: .84rem !important; color: var(--tusz-slaby) !important; }

.pytania .rozwijane:first-child { margin-top: 0; }

/* ---------- Karta przykładowego operatu ---------- */

.karta-przykladu {
  background: var(--plyta); border: 1px solid var(--linia);
  border-top: 3px solid var(--iskra);
  padding: clamp(1.3rem, 4vw, 2rem);
  max-width: 46rem;
}
.dane-przykladu { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 1.6rem; }
.dane-przykladu > div {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: .55rem 0; border-bottom: 1px solid var(--linia-cienka);
  font-size: .9rem;
}
.dane-przykladu dt { color: var(--tusz-cichy); }
.dane-przykladu dd {
  margin: 0; font-weight: 600; color: var(--tusz);
  font-variant-numeric: tabular-nums; text-align: right;
}

/* ---------- Cennik: koszt jednego projektu ---------- */

/* Cena za projekt jest tym, co rzeczoznawca porównuje z własną stawką godzinową,
   więc stoi tuż pod limitem, a nie w drobnym druku na dole. */
.plan__jednostka { margin: 0; font-size: .86rem; color: var(--tusz-cichy); }
.plan__jednostka b { font-family: var(--mono); font-size: 1rem; color: var(--atrament); }
.plan--polecany .plan__jednostka { color: #D6E0F2; }
.plan--polecany .plan__jednostka b { color: var(--iskra); }

/* Znacznik „najlepszy dla aktywnego rzeczoznawcy" jest zdaniem, a nie słowem, więc
   musi mieć prawo zejść pod nazwę planu zamiast ją ściskać. */
.plan__gora { flex-wrap: wrap; }
.plan__znacznik { line-height: 1.4; max-width: 100%; }

/* --- okno postępu przy tworzeniu projektu operatu -------------------------------
   Dokument powstaje kilkadziesiąt sekund. Bez widocznego znaku pracy kliknięcie
   wygląda na nieskuteczne i rzeczoznawca zamawia wycenę drugi raz, zużywając limit.
   Okno jest wyłącznie informacyjne - nie pyta o nic i niczego nie blokuje poza
   przewijaniem tła. */
.nakladka {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(12, 26, 32, .62);
}
.nakladka[hidden] { display: none; }
.bez-przewijania { overflow: hidden; }

.okno {
  width: min(30rem, 100%);
  background: var(--plyta);
  border: 1px solid var(--linia);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  text-align: center;
  box-shadow: 0 18px 48px rgba(7, 63, 79, .28);
}

/* Pierścień z jednym jaśniejszym wycinkiem. Rysowany obramowaniem, więc nie
   potrzebuje pliku graficznego ani drugiego zapytania do serwera. */
.okno__wskaznik {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto 1.1rem;
  border: 3px solid var(--iskra-tlo);
  border-top-color: var(--iskra);
  border-radius: 50%;
  animation: obrot 900ms linear infinite;
}
@keyframes obrot { to { transform: rotate(360deg); } }

.okno__tytul { margin: 0; font-weight: 600; font-size: 1.05rem; color: var(--tusz); }
.okno__adres {
  margin: .35rem 0 0;
  font-weight: 600;
  color: var(--atrament);
  /* Długi adres ma się złamać, a nie rozepchnąć okna poza ekran telefonu. */
  overflow-wrap: anywhere;
}
.okno__etap { margin: .9rem 0 0; font-size: .9rem; color: var(--tusz-cichy); }

.okno__zamknij {
  margin-top: 1.2rem;
  padding: .55rem 1.4rem;
  font: inherit;
  color: var(--plyta);
  background: var(--atrament);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.okno__zamknij[hidden] { display: none; }

/* Przy błędzie animacja gaśnie: kręcące się kółko nad komunikatem o awarii
   sugerowałoby, że praca trwa. */
.nakladka--blad .okno__wskaznik {
  animation: none;
  border-color: var(--sygnal-tlo);
  border-top-color: var(--sygnal);
}
.nakladka--blad .okno__etap { color: var(--sygnal); }

/* --- stan edycji operatu ---------------------------------------------------------
   Autozapis jest niewidoczny z definicji, więc jedynym dowodem, że praca jest
   utrwalona, jest ten napis. Musi być czytelny bez wpatrywania się w niego, stąd
   kolor niosący znaczenie, a nie sama zmiana treści. */
.stan-edycji { font-size: .86rem; color: var(--tusz-slaby); }
.stan-edycji--edycja   { color: var(--atrament); }
.stan-edycji--zmienione { color: var(--sygnal); }
.stan-edycji--praca    { color: var(--tusz-cichy); }
.stan-edycji--zapisano { color: var(--iskra-tekst); font-weight: 600; }
.stan-edycji--blad     { color: var(--sygnal); font-weight: 600; }

/* --- okruszki nawigacyjne --------------------------------------------------------
   Do podglądu operatu wchodzi się także prosto z adresu (po wygenerowaniu dokumentu
   albo z odnośnika w wiadomości), więc przycisk „wstecz" przeglądarki nie ma dokąd
   wrócić. Okruszki są jedyną drogą powrotu do listy zleceń, która nie wymaga
   zgadywania adresu konta. */
.okruszki { margin: 0 0 1.25rem; }
.okruszki ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .88rem;
}
.okruszki li { display: flex; align-items: center; gap: .5rem; }

/* Separator rysujemy w CSS, żeby czytnik ekranu czytał samą ścieżkę, bez ukośników.
   Element dekoracyjny nie jest treścią listy i nie ma prawa być ogłaszany. */
.okruszki li + li::before {
  content: "/";
  color: var(--linia);
  speak: none;
}
.okruszki a { color: var(--tusz-cichy); text-decoration: none; }
.okruszki a:hover, .okruszki a:focus-visible { color: var(--atrament); text-decoration: underline; }

/* Ostatni okruszek to adres nieruchomości - bywa długi, więc na telefonie skraca się
   wielokropkiem zamiast rozpychać wiersz. */
.okruszki [aria-current="page"] {
  color: var(--tusz);
  font-weight: 600;
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- menu w nagłówku: hamburger na telefonie, odnośniki wprost na szerokim ekranie ---
   Jeden kawałek kodu, nie dwa menu: `details` chowa nawigację tam, gdzie brakuje
   miejsca, a powyżej progu CSS rozwija ją na stałe i ukrywa przycisk. */
.menu { position: relative; }
.menu__przycisk {
  display: block;
  list-style: none;
  cursor: pointer;
  padding: .5rem;
  border-radius: 8px;
  border: 1px solid var(--linia);
  background: var(--plyta);
}
.menu__przycisk::-webkit-details-marker { display: none; }
.menu__kreski, .menu__kreski::before, .menu__kreski::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--tusz);
  border-radius: 2px;
}
.menu__kreski { position: relative; }
.menu__kreski::before, .menu__kreski::after { content: ""; position: absolute; }
.menu__kreski::before { top: -6px; }
.menu__kreski::after { top: 6px; }

.menu__tresc {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 12rem;
  padding: .6rem;
  background: var(--plyta);
  border: 1px solid var(--linia);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(7, 63, 79, .18);
}
.menu__tresc a, .menu__tresc .wyloguj { padding: .4rem .5rem; }

@media (min-width: 46rem) {
  .menu__przycisk { display: none; }
  .menu__tresc {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
}

/* --- ustawienia konta na końcu strony --------------------------------------------
   Rozwijanego pudełka z nagłówkiem „Ustawienia konta" już nie ma: ta sama nazwa
   stała w menu u góry i na środku strony, czyli jedna rzecz opisana dwa razy.
   Zostaje menu, a sekcje zeszły na koniec konta - zmienia się je raz, a listę
   zleceń ogląda się codziennie. */
.ustawienia__tytul {
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--linia);
  font-size: 1.35rem;
  color: var(--tusz-slaby);
}
/* Pierwsza sekcja pod tym nagłówkiem nie rysuje własnej kreski - byłaby druga
   linia pozioma tuż pod pierwszą. */
.ustawienia__tytul + .blok { border-top: 0; padding-top: .5rem; margin-top: 0; }

/* --- statusy dziedzinowe na liście zleceń ---------------------------------------
   „Gotowy" ma znaczyć „można przedłożyć do podpisu", a nie „proces się zakończył".
   Dwa pozostałe stany są odnośnikami, bo prowadzą do czynności, a nie tylko
   informują - stąd podkreślenie przy najechaniu i kursor wskazujący. */
.stan--uzupelnij, .stan--zdjecia {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}
.stan--uzupelnij { color: var(--sygnal); background: var(--sygnal-tlo); }
.stan--zdjecia   { color: var(--atrament); background: var(--atrament-tlo); }
.stan--uzupelnij:hover, .stan--zdjecia:hover,
.stan--uzupelnij:focus-visible, .stan--zdjecia:focus-visible { text-decoration: underline; }

/* --- formularz brakujących ustaleń ---------------------------------------------- */
.pole-luki { margin: 0 0 1.25rem; }
.pole-luki--krytyczna {
  border-left: 3px solid var(--sygnal);
  padding-left: .9rem;
}
.znacznik-krytyczny {
  margin-left: .5rem;
  padding: .1rem .45rem;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sygnal);
  background: var(--sygnal-tlo);
  border-radius: 5px;
}

/* --- pakiety projektów operatów --------------------------------------------------
   Sprzedaż jednorazowa, więc karty pokazują cenę pakietu i cenę za jeden projekt.
   Ta druga jest tym, co kupujący realnie porównuje między pakietami. */
.pakiety {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 1rem;
}
.pakiet {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.25rem;
  background: var(--plyta);
  border: 1px solid var(--linia);
  border-radius: 12px;
}
.pakiet--polecany { border-color: var(--iskra); box-shadow: 0 0 0 1px var(--iskra); }
.pakiet__nazwa { margin: 0; font-weight: 600; color: var(--tusz-cichy); }
.pakiet__liczba { margin: 0; font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.pakiet__liczba span { font-size: .9rem; font-weight: 400; color: var(--tusz-slaby); }
.pakiet__cena { margin: .4rem 0 0; font-size: 1.15rem; font-weight: 600; color: var(--atrament); }
.pakiet__jednostka { margin: 0; font-size: .85rem; color: var(--tusz-slaby); }
.pakiet__opis { margin: .5rem 0 .9rem; font-size: .88rem; color: var(--tusz-cichy); flex: 1; }

/* --- ekran pracy nad projektem operatu -------------------------------------------
   Zastępuje formularz w tym samym miejscu strony, zamiast przykrywać go oknem: ma
   na sobie pytania zadawane w trakcie liczenia i pole na zdjęcia, a okno na wierzchu
   byłoby na telefonie pułapką bez wyjścia. */

.praca {
  max-width: 40rem;
  background: var(--plyta);
  border: 1px solid var(--linia);
  border-left: 3px solid var(--iskra);
  padding: 1.5rem 1.4rem 1.6rem;
}
.praca__adres {
  margin: 0 0 1rem;
  font-weight: 600;
  color: var(--atrament);
  /* Długi adres ma się złamać, a nie rozepchnąć karty poza ekran telefonu. */
  overflow-wrap: anywhere;
}
/* Kółko i podmieniające się zdanie o tym, co robi bieżący etap. Stoi NAD nazwą etapu,
   bo to ono odpowiada na pytanie „czy to w ogóle działa" - nazwa etapu odpowiada na
   następne pytanie, czyli „na czym stoimy". */
.praca__szept {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 1.4rem;
  /* Wysokość z góry, na dwa wiersze zdania: bez tego karta podskakiwała przy każdej
     podmianie tekstu z krótszego na dłuższy. */
  min-height: 3.4rem;
  font-size: 1.06rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--tusz);
}
.praca__szept[hidden] { display: none; }
/* Zdanie podmienia się co dwie sekundy; bez przenikania podmiana wygląda na usterkę
   odświeżania, a nie na kolejną czynność. Klasę zdejmuje i zakłada skrypt, bo sama
   zmiana treści elementu nie puszcza animacji od nowa. */
.praca__szept-tresc--wejscie { animation: szept-wejscie 320ms ease-out; }
@keyframes szept-wejscie {
  from { opacity: 0; transform: translateY(.25rem); }
  to   { opacity: 1; transform: none; }
}
/* Duże koło - to ono niesie informację „pracujemy" i ma być widoczne z drugiego końca
   biurka, a nie doklejone do tekstu jak znacznik ładowania w przeglądarce. */
.praca__kolko {
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  border: 3px solid var(--linia);
  border-top-color: var(--iskra-tekst);
  border-right-color: var(--iskra-tekst);
  border-radius: 50%;
  animation: kolko-obrot 900ms linear infinite;
}
@keyframes kolko-obrot { to { transform: rotate(360deg); } }
/* Przy ograniczonym ruchu kółko przestaje się kręcić, ale ma zostać widoczne jako
   znak pracy w toku - zdania pod nim i tak niosą całą treść. Reguła globalna wyłącza
   animacje `!important`, więc dokładamy tu wyłącznie widoczny ślad. */
@media (prefers-reduced-motion: reduce) {
  .praca__kolko { border-color: var(--iskra-tekst); border-right-color: var(--linia); }
}

.praca__etap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.praca__nazwa { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--tusz); }
.praca__licznik {
  margin: 0;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--tusz-slaby);
  white-space: nowrap;
}
/* Przejście wygładza skok między DWOMA prawdziwymi odczytami z serwera i nic poza
   tym - pasek nigdy nie rusza z własnej inicjatywy. Pół sekundy to mniej niż odstęp
   między zapytaniami, więc animacja zdąży się skończyć przed następnym odczytem. */
.praca__pasek { margin: .8rem 0 0; }
.praca__pasek span { transition: width .5s linear; }
.praca__pasek[hidden] { display: none; }

.praca__przebyte {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  font-size: .86rem;
  color: var(--tusz-slaby);
}
.praca__przebyte li { padding: .18rem 0 .18rem 1.3rem; position: relative; }
.praca__przebyte li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--dobry);
  font-weight: 700;
}
/* Bieżący etap jeszcze się nie skończył, więc nie dostaje znaku odhaczenia. */
.praca__przebyte li.praca__przebyty--biezacy { color: var(--tusz); font-weight: 600; }
.praca__przebyte li.praca__przebyty--biezacy::before { content: ">"; color: var(--iskra-tekst); }

/* Cisza serwera. Kolor ostrzegawczy, bo to jest ostrzeżenie, a nie ozdobnik. */
.praca__cisza {
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  font-size: .86rem;
  color: var(--uwaga);
  background: var(--uwaga-tlo);
  border-left: 3px solid var(--uwaga);
}
.praca__cisza[hidden] { display: none; }

.praca__tytul {
  margin: 0 0 .3rem;
  font-family: var(--szeryf);
  font-size: 1.1rem;
  font-weight: 700;
}
.praca__pytania,
.praca__zdjecia,
.praca__wynik {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--linia-cienka);
}
.praca__pytania[hidden], .praca__zdjecia[hidden], .praca__wynik[hidden] { display: none; }

.pytanie { margin: 1rem 0 0; }
.pytanie--krytyczne { border-left: 3px solid var(--sygnal); padding-left: .9rem; }
.praca__zapis { margin: .9rem 0 0; font-size: .82rem; color: var(--iskra-tekst); }
.praca__zdjecia-stan { margin: .6rem 0 0; font-size: .82rem; color: var(--tusz-cichy); }

.praca__wartosc {
  margin: 0;
  font-family: var(--mono);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--atrament);
}
.praca__cena { margin: .2rem 0 0; font-size: .88rem; color: var(--tusz-slaby); }
/* Zastrzeżenie o wartości wstępnej stoi przy samej liczbie, a nie w druczku pod
   spodem - wartość policzona bez standardu wykończenia to inna wartość. */
.praca__zastrzezenie {
  margin: .9rem 0 0;
  padding: .7rem .9rem;
  font-size: .87rem;
  color: var(--uwaga);
  background: var(--uwaga-tlo);
  border-left: 3px solid var(--uwaga);
}
/* Podgląd w ramce pokazuje dokładnie ten plik, który rzeczoznawca za chwilę pobierze. */
.praca__podglad {
  width: 100%;
  height: 26rem;
  margin-top: 1.1rem;
  border: 1px solid var(--linia);
  background: #ffffff;
}
.praca__dzialania { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.praca__dzialania[hidden] { display: none; }

/* Pole doproszone: stoi w stronie gotowe, ale odsłaniamy je dopiero wtedy, gdy
   naprawdę jest potrzebne - brak księgi wieczystej albo odmowa serwera. */
.pole-doproszone { margin: 1rem 0 0; }
.pole-doproszone[hidden] { display: none; }

/* --- przesuwany znacznik położenia ------------------------------------------------
   Podkładem jest mapa lokalizacji z katalogu operatu - ta sama, która idzie do
   dokumentu. Znacznik leży nad nią w warstwie ustawianej w pikselach, przeliczonych
   ze współrzędnych; skalowanie obrazu do szerokości kolumny nie psuje przelicznika,
   bo ten liczy się z szerokości wyświetlonej. */

.polozenie[hidden] { display: none; }
.polozenie__mapa {
  position: relative;
  margin: 1rem 0 0;
  border: 1px solid var(--linia);
  background: var(--plyta-2);
  /* Kropka wychodzi poza obraz dopiero wtedy, gdy ktoś ją tam zaciągnie; wtedy ma
     zostać widoczna, a nie zniknąć pod krawędzią. */
  overflow: visible;
  line-height: 0;
}
.polozenie__mapa img {
  display: block;
  width: 100%;
  height: auto;
  /* Kursor mówi, że w mapę można wskazać miejsce, a nie tylko na nią patrzeć. */
  cursor: crosshair;
}

/* ZNACZNIK JEST PRZEŹROCZYSTY. Wskazuje miejsce, w którym stoi nieruchomość - a to
   jest dokładnie to miejsce, które trzeba widzieć, żeby ocenić, czy punkt siedzi
   na właściwym budynku. Wypełniona kropka zasłaniała dach, na który się ją przesuwa.
   Zostaje sam celownik: okrąg bez wypełnienia i cztery kreski wskazujące środek
   z zewnątrz. Widoczność nad zdjęciem lotniczym daje biała obwódka pod kolorową,
   a nie plama - stąd podwójny `box-shadow` zamiast tła. */
.polozenie__znacznik {
  position: absolute;
  /* Lewy górny róg jest w punkcie, więc przesuwamy o połowę rozmiaru - środek
     celownika ma leżeć na współrzędnych, a nie jego narożnik. */
  width: 2.4rem;
  height: 2.4rem;
  margin: -1.2rem 0 0 -1.2rem;
  padding: 0;
  border: 2px solid var(--znacznik-mapy);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .95),
              inset 0 0 0 1px rgba(255, 255, 255, .95);
  cursor: grab;
  /* Bez tego przeglądarka na tablecie potraktuje przeciągnięcie jako przewijanie
     strony i znacznik nie ruszy się z miejsca. */
  touch-action: none;
  /* ZNACZNIK JEST PRZYCISKIEM, więc przeglądarka dokłada mu swoje. Na telefonie
     jest to podświetlenie dotknięcia (`tap-highlight`), które na czas przeciągania
     zalewa cały krążek półprzezroczystą plamą - i znika spod niej dokładnie ten
     dach, na który się celuje. Na biurku dochodzi wygląd przycisku systemowego.
     Zdejmujemy jedno i drugie: wygląd tego elementu ma wynikać wyłącznie stąd. */
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
/* Stan wciśnięcia i przeciągania nie zmienia wypełnienia - zmienia się kursor
   i nic więcej. Przeglądarki nadają przyciskom własne tło przy `:active`. */
.polozenie__znacznik:hover,
.polozenie__znacznik:focus,
.polozenie__znacznik:active,
.polozenie__znacznik--chwytany { background: transparent; }
/* Cztery kreski wskazujące środek z zewnątrz - rysowane gradientami na jednym
   pseudoelemencie, bo dokładanie znaczników do strony tylko po to nie ma sensu.
   Środek zostaje pusty: przez niego widać dach, na który celujemy. */
.polozenie__znacznik::after {
  content: "";
  position: absolute;
  inset: -.55rem;
  border-radius: 0;
  background:
    linear-gradient(var(--znacznik-mapy), var(--znacznik-mapy)) 50% 0 / 2px .45rem no-repeat,
    linear-gradient(var(--znacznik-mapy), var(--znacznik-mapy)) 50% 100% / 2px .45rem no-repeat,
    linear-gradient(var(--znacznik-mapy), var(--znacznik-mapy)) 0 50% / .45rem 2px no-repeat,
    linear-gradient(var(--znacznik-mapy), var(--znacznik-mapy)) 100% 50% / .45rem 2px no-repeat;
  pointer-events: none;
}
.polozenie__znacznik:focus-visible {
  outline: 3px solid var(--iskra);
  outline-offset: 3px;
}
.polozenie__znacznik--chwytany { cursor: grabbing; }
/* Znacznik odsunięty od wyliczonego punktu jest stanem do zatwierdzenia, a nie
   stanem normalnym - kolor ma to mówić, zanim ktokolwiek przeczyta podpis. */
.polozenie__znacznik--ruszony {
  background: var(--sygnal);
  box-shadow: 0 0 0 2px var(--sygnal), 0 3px 10px rgba(140, 59, 30, .5);
}

/* Oba akapity pod mapą są komentarzem do czynności, a nie treścią - drobne pismo,
   żeby nie konkurowały z samą mapą i z przyciskami pod nią. */
.polozenie__przesuniecie {
  margin: .5rem 0 0;
  font-size: .78rem;
  color: var(--tusz-cichy);
  font-variant-numeric: tabular-nums;
}
.polozenie__ostrzezenie {
  margin: .6rem 0 0;
  padding: .45rem .7rem;
  font-size: .76rem;
  color: var(--uwaga);
  background: var(--uwaga-tlo);
  border-left: 3px solid var(--uwaga);
}
/* Oba przyciski w JEDNYM wierszu, także na telefonie - podpisy są na tyle krótkie,
   że się mieszczą, a łamanie stawiało „Cofnij" pod przyciskiem zapisu i wyglądało
   ono wtedy na czynność następną, a nie na odwrotną. */
.polozenie__dzialania { display: flex; gap: .6rem; flex-wrap: nowrap; margin-top: .9rem; }
.polozenie__dzialania .przycisk { white-space: nowrap; }
/* Zapis jest czynnością główną, więc bierze wolne miejsce; cofnięcie zostaje wąskie. */
.polozenie__dzialania .przycisk--pelny { flex: 1 1 auto; }
.polozenie__dzialania .przycisk--obrys { flex: 0 0 auto; }
.polozenie__dzialania .przycisk:disabled { opacity: .5; cursor: default; }

.polozenie__stan { margin: .9rem 0 0; font-size: .87rem; color: var(--tusz-cichy); }
/* Stan „pracujemy" dostaje kręcące się kółko. Sam tekst z nazwą etapu i pasek postępu
   mówiły prawdę, ale kółko jest jedyną rzeczą, po której od razu widać, że strona
   czeka na serwer, a nie zatrzymała się na dobre. */
.polozenie__stan--praca  { color: var(--iskra-tekst); }
.polozenie__stan--praca::before {
  content: "";
  display: inline-block;
  width: .8em; height: .8em;
  margin-right: .45rem;
  vertical-align: -.08em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: obrot .7s linear infinite;
}
@keyframes obrot { to { transform: rotate(360deg); } }
.polozenie__stan--dobry  { color: var(--dobry); font-weight: 600; }
.polozenie__stan--blad   { color: var(--sygnal); font-weight: 600; }
/* Zmiana osiedla po przeliczeniu zmienia próbkę porównawczą, więc jest ostrzeżeniem
   merytorycznym, a nie komunikatem o powodzeniu operacji. */
.polozenie__stan--uwaga {
  display: block;
  padding: .7rem .9rem;
  color: var(--uwaga);
  background: var(--uwaga-tlo);
  border-left: 3px solid var(--uwaga);
  font-weight: 600;
}
.polozenie__pasek { margin: .8rem 0 0; }
.polozenie__pasek span { transition: width .5s linear; }

/* --- wyskakująca warstwa z pytaniem ----------------------------------------------
   Pytania zadawane w trakcie liczenia idą pojedynczo, w karcie przy dole okna.

   DLACZEGO KARTA, A NIE OKNO NA CAŁY EKRAN. Etapy pokazujemy po to, żeby było widać,
   jak proces działa; warstwa nakrywająca całość zabrałaby dokładnie to, co miało być
   pokazane. Karta zostawia panel z etapami odsłonięty, a nazwę bieżącego etapu i pasek
   niesie na sobie - pytanie i postęp są widoczne razem. */

.warstwa-pytania {
  position: fixed;
  z-index: 70;
  /* Karta stoi na środku ekranu. Wcześniej siedziała w prawym dolnym rogu, żeby nie
     zasłaniać paska etapów - ale pytanie zadane w rogu ucieka uwadze i bywa brane za
     powiadomienie, a nie za rzecz do zrobienia. Środek jest miejscem, w które patrzy
     się bez szukania. Panel etapów zostaje widoczny obok, a nazwę bieżącego etapu
     i pasek karta niesie na sobie, więc postęp i pytanie nadal widać razem.
     `--zaslona` ustawia skrypt z `visualViewport`: o tyle klawiatura ekranowa zabrała
     widocznego obszaru. Przesuwamy o połowę tej wartości, bo karta jest wyśrodkowana
     pionowo - bez tego pole, w którym się pisze, chowa się pod klawiaturą. */
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - var(--zaslona, 0px) / 2));
  width: min(30rem, calc(100vw - 2.5rem));
  max-height: 80vh;
  overflow-y: auto;
  background: var(--plyta);
  border: 1px solid var(--linia);
  border-top: 3px solid var(--iskra);
  border-radius: 12px;
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 14px 40px rgba(7, 63, 79, .28);
  animation: warstwa-wjazd 220ms ease-out;
}
.warstwa-pytania[hidden] { display: none; }

/* Animacja musi powtarzać wyśrodkowanie, bo `transform` w klatce kluczowej
   nadpisuje ten z reguły - inaczej karta na czas wjazdu skacze w lewy górny róg. */
@keyframes warstwa-wjazd {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 1rem)); }
  to   { opacity: 1; transform: translate(-50%, calc(-50% - var(--zaslona, 0px) / 2)); }
}
/* Globalna reguła wyłącza animacje przy ograniczonym ruchu, ale zapisujemy to także
   tutaj - warstwa pojawia się sama z siebie, więc jest dokładnie tym rodzajem ruchu,
   którego to ustawienie dotyczy. */
@media (prefers-reduced-motion: reduce) {
  .warstwa-pytania { animation: none; }
}

/* Na wąskim ekranie karta siada na całej szerokości u dołu - arkusz, nie okienko. */
/* Na wąskim ekranie karta siada na całej szerokości u dołu - arkusz, nie okienko.
   Środek ekranu przy klawiaturze ekranowej zostawiłby na treść kilka wierszy. */
@media (max-width: 34rem) {
  .warstwa-pytania {
    left: 0;
    top: auto;
    bottom: var(--zaslona, 0px);
    transform: none;
    width: auto;
    max-height: 60vh;
    border-radius: 12px 12px 0 0;
    padding-bottom: 1.4rem;
    animation: none;
  }
}

/* Echo etapu. Te same liczby co w panelu obok - warstwa nie ma własnego licznika. */
.warstwa-pytania__etap {
  margin: 0 0 .9rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--linia-cienka);
}
.warstwa-pytania__etap-opis {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .8rem;
  margin: 0 0 .5rem;
  font-size: .8rem;
  color: var(--tusz-slaby);
}
.warstwa-pytania__etap-opis span:last-child {
  font-family: var(--mono);
  white-space: nowrap;
}
.warstwa-pytania__pasek span { transition: width .5s linear; }
.warstwa-pytania__pasek[hidden] { display: none; }

.warstwa-pytania__etykieta {
  display: block;
  margin: 0 0 .5rem;
  font-family: var(--szeryf);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
}
.warstwa-pytania__tresc .podpowiedz { margin-top: .4rem; }

/* Odpowiedzi do kliknięcia zamiast rozwijanej listy. Kolumna, a nie siatka: warianty
   bywają całymi frazami („zabezpieczenie wierzytelności kredytodawcy"), a te w dwóch
   kolumnach łamią się na trzy wiersze i przestają być czytelne z rzutu oka. */
.wybor { display: flex; flex-direction: column; gap: .4rem; margin-top: .7rem; }
.wybor__guzik {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  width: 100%;
  /* Pole dotyku ma zostać polem dotyku także na telefonie - stąd wysokość z wyprzedzeniem
     i pion większy, niż wymagałby sam tekst. */
  min-height: 2.9rem;
  padding: .6rem .8rem;
  font-family: var(--bez);
  font-size: .93rem;
  line-height: 1.3;
  text-align: left;
  color: var(--tusz);
  background: var(--plyta);
  border: 1px solid var(--linia);
  border-radius: 3px;
  cursor: pointer;
}
.wybor__guzik:hover { background: var(--atrament-tlo); border-color: var(--atrament); }
.wybor__guzik:focus-visible { outline: 2px solid var(--iskra-tekst); outline-offset: 2px; }
/* Cyfra jest skrótem klawiszowym, nie numerem porządkowym - stąd stopień pisma
   mniejszy od odpowiedzi i kolor drugoplanowy. */
.wybor__skrot {
  flex: 0 0 auto;
  min-width: 1.25rem;
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--tusz-slaby);
}

/* --- kalendarz przy pytaniu o datę oględzin ---------------------------------------
   Siatka dni widoczna od razu, bez otwierania wybieraka. Dni po dzisiejszym są
   wyłączone: oględziny z przyszłej daty byłyby ustaleniem nieprawdziwym. */
.kalendarz { margin-top: .7rem; }
.kalendarz__pasek {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .5rem;
}
.kalendarz__miesiac { font-weight: 600; font-size: .95rem; }
.kalendarz__strzalka {
  font: inherit; font-size: 1.2rem; line-height: 1;
  min-width: 2.2rem; min-height: 2.2rem;
  color: var(--atrament); background: var(--plyta);
  border: 1px solid var(--linia); border-radius: 3px; cursor: pointer;
}
.kalendarz__strzalka:hover:not(:disabled) { background: var(--atrament-tlo); }
.kalendarz__strzalka:disabled { opacity: .35; cursor: default; }

.kalendarz__siatka {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.kalendarz__glowka {
  text-align: center; font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tusz-slaby); padding-bottom: .25rem;
}
.kalendarz__dzien {
  font: inherit; font-family: var(--mono); font-size: .86rem;
  /* Pole dotyku na telefonie ma mieć sensowną wielkość, a siedem kolumn na wąskim
     ekranie zostawia na dzień około czterdziestu pikseli - stąd wysokość z góry. */
  min-height: 2.5rem;
  color: var(--tusz); background: var(--plyta);
  border: 1px solid var(--linia-cienka); border-radius: 3px; cursor: pointer;
}
.kalendarz__dzien:hover:not(:disabled) {
  background: var(--atrament); color: var(--plyta); border-color: var(--atrament);
}
.kalendarz__dzien:disabled { color: var(--linia); background: transparent; border-color: transparent; cursor: default; }
.kalendarz__dzien--dzis { border-color: var(--atrament); font-weight: 700; }
.kalendarz__dzien:focus-visible { outline: 2px solid var(--iskra-tekst); outline-offset: 1px; }

.kalendarz__skroty { display: flex; gap: .5rem; margin-top: .6rem; }
.kalendarz__skrot {
  font: inherit; font-size: .88rem; font-weight: 600;
  padding: .5rem 1rem; min-height: 2.6rem;
  color: var(--atrament); background: var(--plyta);
  border: 1px solid var(--atrament); border-radius: 3px; cursor: pointer;
}
.kalendarz__skrot:hover { background: var(--atrament); color: var(--plyta); }
.warstwa-pytania__stopka { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.1rem; }
.warstwa-pytania__stopka .przycisk { margin-top: 0; flex: 1 1 auto; }
.warstwa-pytania__stopka .przycisk[hidden] { display: none; }
/* Przy odpowiedziach do kliknięcia „zapisz" jest schowane i zostaje samo „pomiń".
   Rozciągnięte na całą szerokość czytałoby się jak kolejna odpowiedź, a jest wyjściem
   z pytania - odsuwamy je więc w bok i zwężamy do własnej treści. */
.warstwa-pytania__stopka .przycisk--pelny[hidden] + .przycisk {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Skutek pominięcia mówimy ZANIM ktoś kliknie, nie po. */
.warstwa-pytania__skutek {
  margin: .8rem 0 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--tusz-slaby);
}

/* Ślad po serii na ekranie pracy - pytania zadane w warstwie nie mogą przemknąć
   bez śladu, bo potem nie wiadomo, o co właściwie pytaliśmy. */
.praca__seria { margin: 1rem 0 0; font-size: .84rem; color: var(--tusz-slaby); }

/* ---------- Dokumentacja fotograficzna ---------- */

/* APARAT: guziki, miniatury, kadr i opisy. Zestaw stoi w dwóch miejscach - na stronie
   uzupełnień i w warstwie pytań na ekranie pracy - więc styl jest jeden, tak samo jak
   kod, który go buduje (`formularz.js`).

   Wygląd trzyma się rzędu przycisków wyboru (`.skala__opcja`): białe pole, cienka
   obwódka, prostokątny narożnik. Aparat ma wyglądać na część formularza, a nie
   na wtrącony gdzieś odtwarzacz. */
.aparat { margin: .9rem 0 0; }
.aparat__guziki { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Guziki aparatu są mniejsze od guzików zamykających formularz: to czynności
   powtarzane, a nie decyzje kończące pracę. */
.aparat__guzik { padding: .55rem .95rem; font-size: .86rem; margin-top: 0; }

/* Pole wyboru pliku jest schowane, a klika się w nie guzikiem - patrz `formularz.js`.
   `opacity` zamiast `display: none`, bo pole całkiem usunięte z układu bywa w części
   przeglądarek nieklikalne skryptem. */
.aparat__wejscie {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
  pointer-events: none;
}

.aparat__lista { list-style: none; margin: .9rem 0 0; padding: 0; }
.aparat__pozycja {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: .6rem .9rem;
  align-items: start;
  padding: .7rem 0;
  border-top: 1px solid var(--linia-cienka);
}
.aparat__pozycja:first-child { border-top: 0; }
.aparat__miniatura {
  width: 5.5rem; height: 5.5rem;
  object-fit: cover;
  border: 1px solid var(--linia);
  background: var(--plyta-2);
}
.aparat__opis label { display: block; font-size: .84rem; font-weight: 600; }
/* Guziki pozycji stoją pod opisem, w drugiej kolumnie - pod miniaturą byłyby węższe
   od własnych napisów. */
.aparat__dzialania { grid-column: 2; display: flex; gap: .5rem; flex-wrap: wrap; }
.aparat__stan { margin-top: .6rem; }
/* Kadr rozciąga się na obie kolumny: ramkę trzeba widzieć w całości, a nie w połowie. */
.kadr { grid-column: 1 / -1; margin-top: .6rem; }
.kadr__plotno {
  display: block;
  max-width: 100%;
  border: 1px solid var(--atrament);
  /* Palec ciągnący ramkę nie może przewijać strony pod spodem. */
  touch-action: none;
  cursor: crosshair;
}
.kadr__plotno:focus-visible { outline: 2px solid var(--iskra-tekst); outline-offset: 2px; }
.kadr__guziki { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }

/* Na wąskim ekranie miniatura schodzi nad opis - dwie kolumny zostawiają na pole
   opisu kilka znaków. */
@media (max-width: 30rem) {
  .aparat__pozycja { grid-template-columns: minmax(0, 1fr); }
  .aparat__dzialania { grid-column: 1; }
}

/* GALERIA zdjęć już wgranych: podgląd, podpis i dwie czynności przy każdym z nich. */
.galeria { list-style: none; margin: 1rem 0 1.4rem; padding: 0; }
.galeria__pozycja {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: .6rem 1rem;
  align-items: start;
  padding: .9rem 0;
  border-top: 1px solid var(--linia-cienka);
}
.galeria__pozycja:first-child { border-top: 0; }
.galeria__obraz {
  width: 7rem; height: 7rem;
  object-fit: cover;
  border: 1px solid var(--linia);
  background: var(--plyta-2);
}
.galeria__praca label { display: block; font-size: .84rem; font-weight: 600; }
.galeria__guziki { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.galeria__guziki .przycisk { padding: .55rem .95rem; font-size: .86rem; margin-top: 0; }

@media (max-width: 30rem) {
  .galeria__pozycja { grid-template-columns: minmax(0, 1fr); }
}