/* =============================================================================
   Arkusz systemu wizualnego. Jedyny arkusz globalny tej aplikacji.

   DLACZEGO NIE BOOTSTRAP: z całego Bootstrapa (8,4 MB w repozytorium) używaliśmy
   około dwudziestu klas. Ten plik implementuje dokładnie te dwadzieścia — nazwy
   klas zostały te same, więc żaden plik .razor nie wymagał zmiany. To była jedna
   zmiana zamiast dwudziestu okazji do literówki w nazwie klasy, a literówka
   w nazwie klasy nie zgłasza się sama.

   KOLORY MAJĄ JEDNO ŹRÓDŁO PRAWDY i nie jest nim ten plik. Blok :root poniżej jest
   generowany przez klasę Paleta w projekcie testowym; test
   ArkuszTesty.Arkusz_ma_dokladnie_te_zmienne_co_paleta oblewa przy rozjeździe
   i wypisuje gotowy blok do wklejenia. Nie edytuj kolorów tutaj bez poprawienia
   Palety — zmiana i tak zostanie cofnięta przez czerwony test.

   ZASADY, KTÓRE TU OBOWIĄZUJĄ (każda ma test):
   - zero cieni; warstwy rozdzielamy tłem i linią 1 px
   - zero jednostek vw w rozmiarach pisma (WCAG 1.4.4 — powiększenie do 200%)
   - żaden pojemnik tekstowy nie ma ustalonej wysokości (WCAG 1.4.12)
   - outline: none bez zamiennika jest zakazane
   - hover wyłącznie w @media (hover: hover) — na telefonie stan hover przykleja
     się po dotknięciu i zostaje
   ============================================================================= */

/* PALETA I SKALA. Blok :root musi byc CIAGLY (ArkuszTesty porownuje go z klasa Paleta).
   Tlo sekcji #F4F2EE to najciemniejsze, przy ktorym link i obwodka pola trzymaja progi
   WCAG; ciemniejsze lamie oba. Uzasadnienia: docs/lista-wygladu.md, W4 i W6. */
:root {
    color-scheme: light;
    --kolor-tlo: #FFFFFF;
    --kolor-tlo-2: #F4F2EE;
    --kolor-tlo-marka: #FFF4E6;
    --kolor-tekst: #1A1A1A;
    --kolor-tekst-2: #5B5B5B;
    --kolor-marka: #F18200;
    --kolor-akcja: #A85B00;
    --kolor-akcja-hover: #8A4A00;
    --kolor-blad: #B02A37;
    --kolor-blad-tlo: #FDECEE;
    --kolor-sukces: #146C43;
    --kolor-sukces-tlo: #E7F4EC;
    --kolor-zrodlo-ai: #4B3A8F;
    --kolor-zrodlo-ai-tlo: #F0EBFA;
    --kolor-obwodka: #8A8A8A;
    --kolor-linia: #C9C3B5;
    --kolor-fokus: #1A1A1A;
}

:root {
    /* Skala odstępów, podstawa 4 px. Wartość spoza tej listy jest błędem przeglądu. */
    --odstep-1: 0.25rem;
    --odstep-2: 0.5rem;
    --odstep-3: 0.75rem;
    --odstep-4: 1rem;
    --odstep-5: 1.5rem;
    --odstep-6: 2rem;
    --odstep-7: 3rem;
    --odstep-8: 4rem;

    --promien-pole: 0.375rem;
    --promien-karta: 0.5rem;
    --promien-pigulka: 100px;
    --promien-znacznik: 0.75rem;

    /* Krój treści: stos systemowy. Zero bajtów do pobrania i zero przesunięcia
       układu w trakcie ładowania, a natywne kontrolki na telefonie wyglądają
       jak natywne kontrolki. */
    --kroj-tresci: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Naglowki niosa rozpoznawalnosc marki - to jedyne miejsce, gdzie oplaca sie
       pobrac plik. Tresc zostaje na kroju systemowym: zero bajtow i natywny wyglad
       kontrolek na telefonie. */
    --kroj-naglowkow: "Manrope", var(--kroj-tresci);

    --tekst-znacznik: 0.8125rem;    /* 13 */
    --tekst-podpowiedz: 0.9375rem;  /* 15 */
    --tekst-podstawowy: 1rem;       /* 16 */
    --tekst-formularz: 1.0625rem;   /* 17 - pola; ponizej 16 telefon przybliza ekran */
    --tekst-wyrozniony: 1.1875rem;  /* 19 - h3, cena karty */
    --tekst-naglowek: 1.4375rem;    /* 23 - h2, stan, kwota */
    --tekst-naglowek-duzy: 1.75rem; /* 28 - h1 wasko, liczba raportu */
    --tekst-tytul: 2.0625rem;       /* 33 - h1 szeroko */

    /* Miara czytania dla prozy: okolo 65 znakow w wierszu. */
    --szerokosc-tresci: 36rem;
    /* Krok kreatora to nie proza, tylko pytania i odpowiedzi w dwoch kolumnach (W16).
       48 rem wynika z pomiaru: przy 36 rem dwie kolumny liczb mieszcza sie o 11 px,
       wiec odstepu miedzy nimi nie da sie zwiekszyc, a przycisk "?" lewej kolumny stoi
       blizej etykiety prawej niz wlasnej. */
    --szerokosc-formularza: 48rem;
    --szerokosc-panelu: 70rem;
}

/* ---------------------------------------------------------------- krój nagłówkowy

   Manrope 600, hostowany U SIEBIE. Google Fonts jest tu niedostepne nie z powodu
   preferencji, tylko dlatego, ze CSP ma default-src 'self' - zadanie do fonts.gstatic.com
   zostaloby zablokowane i naglowki po cichu wrocilyby na krój systemowy.

   Dwa podzbiory zamiast jednego pliku: polskie znaki (ą, ć, ę, ł, ń, ś, ź, ż) leza
   w zakresie latin-ext, a nie w latin. Przegladarka pobiera drugi plik dopiero wtedy,
   gdy na stronie faktycznie wystapi znak z tego zakresu - czyli na tej stronie zawsze,
   ale rozdzielenie zostaje, bo tak dostarcza je zrodlo i nie ma powodu tego sklejac.

   DEKLARACJI ZASTEPCZEJ Z size-adjust CELOWO TU NIE MA, i to jest decyzja poparta pomiarem,
   a nie przeoczenie. Zmierzone w przegladarce na wdrozonej instancji (probka: naglowek H1
   tej strony, 600/100px): Manrope 2636,96 px szerokosci wobec 2474,61 px stosu systemowego,
   czyli size-adjust wyszedlby 106,6%. Problem w tym, ze ten pomiar dotyczy Segoe UI na
   Windowsie - na telefonie "system-ui" to San Francisco albo Roboto, o innych metrykach.
   Jedna wartosc poprawilaby wiec jeden system i pogorszyla dwa pozostale.
   Przy font-display: optional nie ma to zwiazku z przesunieciem ukladu (podmiany w trakcie
   nie ma w ogole) - dotyczy wylacznie tego, czy pierwsza wizyta wyglada tak samo jak kolejna.
   Za mala korzysc jak na wpisanie liczby prawdziwej dla jednego systemu operacyjnego.

   font-display: optional jest tu OBOWIAZKOWE i nie wolno go zamienic na swap.
   Przy "optional" przegladarka albo zdazy z krojem przed pierwszym malowaniem, albo
   uzywa zastepczego i NIE PODMIENIA go w trakcie. To jedyne ustawienie, przy ktorym
   zerowe przesuniecie ukladu jest gwarancja, a nie nadzieja: "swap" daje przeskok
   naglowkow w trakcie czytania, "block" - mignienie pustki.

   Sciezki sa niefingerprintowane celowo: dokladnie ten sam adres jest w <link rel=preload>
   w App.razor. Gdyby jeden uzywal wersji ze znacznikiem, a drugi bez, przegladarka
   pobralaby plik DWA RAZY i wstepne pobranie zamiast pomagac, szkodziloby. */

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 600;
    font-display: optional;
    src: url("/kroje/manrope-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 600;
    font-display: optional;
    src: url("/kroje/manrope-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                   U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                   U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--kolor-tlo);
    color: var(--kolor-tekst);
    font-family: var(--kroj-tresci);
    font-size: var(--tekst-podstawowy);
    line-height: 1.6;
}

h1,
h2,
h3 {
    font-family: var(--kroj-naglowkow);
    line-height: 1.25;
    margin: 0 0 var(--odstep-3);

    /* DLUGIE SLOWO MA SIE ZLAMAC, A NIE ROZEPCHNAC STRONY. Przy piśmie powiekszonym
       do 200% na ekranie 360 px naglowek "Zamowienie swiadectwa charakterystyki
       energetycznej" mial 415 px w kolumnie szerokiej na 281 px - i cala strona
       zaczynala sie przewijac w poziomie. Zmierzone na produkcji; wymaganie
       "przy 200% bez przewijania w poziomie" jest w ux-wymagania.md od poczatku.

       `overflow-wrap: break-word` lamie slowo TYLKO wtedy, gdy naprawde sie nie miesci -
       i to wystarcza, zeby strona sie nie rozpychala.

       BEZ `hyphens: auto`. Ta wlasciwosc dzieli wyrazy takze wtedy, gdy wiersz jest
       jedynie ciasny, a nie za waski - i wlasnie tak powstalo "Dziekujemy, zamowienie
       przyje-te" na ekranie potwierdzenia, zgloszone przez wlasciciela. Podzielony wyraz
       w naglowku, ktory ma uspokoic klienta ("zamowienie przyjete"), czyta sie jak usterka
       strony - czyli robi dokladnie odwrotnie, niz mial.

       Dzielenie wyrazow jest zreszta typograficznie uzasadnione przy tekscie justowanym
       w waskich lamach, a nie w naglowkach do lewej. */
    overflow-wrap: break-word;

    /* Naglowek lamie sie na wiersze o zblizonej dlugosci, zamiast zostawiac jedno slowo
       w ostatnim wierszu. Przegladarki bez obslugi po prostu to ignoruja. */
    text-wrap: balance;
}

/* Rozmiary w rem z jednym progiem. Bez clamp() i bez vw — patrz nagłówek pliku. */
h1 { font-size: var(--tekst-naglowek-duzy); }
h2 { font-size: var(--tekst-naglowek); }
h3 { font-size: var(--tekst-wyrozniony); }

@media (min-width: 40rem) {
    h1 { font-size: var(--tekst-tytul); }
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--kolor-akcja);
    /* Podkreślenie jest jedynym nośnikiem informacji „to jest link": kolor akcji
       nie różni się od koloru treści o wymagane 3:1, więc sam kolor nie wystarcza. */
    text-decoration: underline;
}

@media (hover: hover) {
    a:hover {
        color: var(--kolor-akcja-hover);
        text-decoration-thickness: 2px;
    }
}

img {
    max-width: 100%;
    height: auto;
}

/* Jeden pierścień fokusu dla całej aplikacji. Odsunięcie 2 px sprawia, że pierścień
   leży na tle strony, a nie na tle kontrolki — dlatego jeden ciemny pierścień
   wystarcza dla całej palety (najniższy zmierzony kontrast 6,57:1 na pomarańczu). */
:focus-visible {
    outline: 3px solid var(--kolor-fokus);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- rama strony */

.szkielet {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.pasek-marki {
    display: flex;
    flex-wrap: wrap;
    gap: var(--odstep-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--odstep-3) var(--odstep-4);
    border-bottom: 4px solid var(--kolor-marka);
}

.marka {
    font-weight: 600;
    font-size: var(--tekst-wyrozniony);
    color: var(--kolor-tekst);
    text-decoration: none;
}

/* SYGNATURA (W8): kto to jest, potem co tu sie robi. Logo nie ma - tozsamosc niesie
   zlozony tekst. Wiersze nie moga miec tego samego rozmiaru, bo wtedy oba czyta sie
   jednakowo i nazwa gubi sie w opisie uslugi. */
.marka-nazwa,
.marka-usluga {
    display: block;
}

.marka-usluga {
    font-size: var(--tekst-podpowiedz);
    font-weight: 400;
    color: var(--kolor-tekst-2);
}

/* TELEFON Z ETYKIETA. Sam podkreslony ciag cyfr wyglada jak przypadkowy odnosnik
   w tekscie; etykieta mowi, po co on tam jest. */
.telefon {
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
}

.telefon-etykieta,
.telefon-numer {
    display: block;
}

.telefon-etykieta {
    font-size: var(--tekst-znacznik);
    font-weight: 400;
    color: var(--kolor-tekst-2);
}

/* NA TELEFONIE NAGLOWEK MA ZEJSC Z DROGI. Z etykieta przy numerze zajmowal 141 px,
   czyli 17 procent pierwszego ekranu - a klient przychodzi tu wypelnic formularz,
   nie czytac naglowek. Numer zostaje, znika zdanie nad nim. */
@media (max-width: 30rem) {
    .telefon-etykieta {
        display: none;
    }

    .pasek-marki {
        padding: var(--odstep-2) var(--odstep-3);
    }
}

.tresc-strony {
    flex: 1;
    width: 100%;
    max-width: var(--szerokosc-tresci);
    margin: 0 auto;
    padding: var(--odstep-5) var(--odstep-4) var(--odstep-7);
}

/* Szeroka kolumna WYLACZNIE dla krokow kreatora - uklad nadaje te klase na podstawie
   MapaEtapow. Proza (informacja o przetwarzaniu danych, potwierdzenie, strona bledu)
   zostaje przy mierze czytania. */
.tresc-kreatora {
    max-width: var(--szerokosc-formularza);
}

.tresc-panelu {
    flex: 1;
    width: 100%;
    max-width: var(--szerokosc-panelu);
    margin: 0 auto;
    padding: var(--odstep-5) var(--odstep-4) var(--odstep-7);
}

.stopka {
    border-top: 1px solid var(--kolor-linia);

    /* Dolne wyscielenie musi przekroczyc wysokosc paska ceny - inaczej pasek (position:
       fixed) zaslania odnosnik do informacji o danych osobowych i nie da sie go dotknac.
       Zmierzone na ekranie 360 px: odnosnik na wysokosci 602-622 px, pasek od 582 px.
       Zapas w formularzu chronil sam przycisk wysylki, ale stopka lezy poza formularzem. */
    padding: var(--odstep-4) var(--odstep-4) 7rem;
    color: var(--kolor-tekst-2);
    font-size: var(--tekst-podpowiedz);
}

/* Dane sprzedawcy w stopce - wymog Przelewy24 (nazwa, adres, NIP, telefon, e-mail).
   Osobny akapit z odstepem, zeby nie zlewal sie z odnosnikami do regulaminu i RODO. */
.dane-sprzedawcy {
    margin: 0 0 var(--odstep-3);
    line-height: 1.6;
}

/* Link pomijający nawigację: niewidoczny do momentu, gdy dostanie fokus. Nie używamy
   display:none ani visibility:hidden, bo takie elementy są nieosiągalne klawiszem Tab. */
.pomin-nawigacje {
    position: absolute;
    top: 0;
    left: 0;
    /* Chowamy PRZESUNIECIEM, nie odsunieciem na left: -9999px.
       Roznica jest mierzalna: przy odsunieciu axe raportowal ten link jako cel dotykowy
       o rozmiarze 106,6 x 17 px (czyli tak, jakby nie mial ani wyscielki, ani wysokosci
       minimalnej) i zglaszal naruszenie target-size o wadze serious. W przegladarce ten
       sam element mial 148 x 50 px - pomiar narzedzia nie zgadzal sie z rzeczywistoscia.
       Przy translate element zachowuje swoje prawdziwe wymiary i wypada z ekranu dopiero
       przy malowaniu, wiec mierzy sie tak samo jak widzi. */
    transform: translateY(-200%);
    background: var(--kolor-tlo);
    color: var(--kolor-akcja);
    padding: var(--odstep-3) var(--odstep-4);
    /* Cel dotykowy 44 px takze wtedy, gdy link jest odsuniety poza ekran. Skan axe
       zglosil tu naruszenie target-size (waga serious): odsuniecie przez "left" nie
       usuwa elementu z pomiaru, a sama wyscielka nie wystarczala do progu. */
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    z-index: 10;
}

.pomin-nawigacje:focus {
    transform: translateY(0);
}

/* ---------------------------------------------------------------- nawigacja panelu */

.nawigacja-panelu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--odstep-4);
    align-items: center;
    padding: var(--odstep-3) var(--odstep-4);
    background: var(--kolor-tlo-2);
    border-bottom: 1px solid var(--kolor-linia);
}

.nawigacja-panelu a {
    text-decoration: none;
    font-weight: 600;
}

.nawigacja-panelu a:hover,
.nawigacja-panelu a[aria-current="page"] {
    text-decoration: underline;
}

.zalogowany {
    margin-left: auto;
    color: var(--kolor-tekst-2);
    font-size: var(--tekst-podpowiedz);
}

/* ---------------------------------------------------------------- formularz */

.sekcja {
    margin: var(--odstep-6) 0;
    padding: var(--odstep-4);
    background: var(--kolor-tlo-2);
    border: 1px solid var(--kolor-linia);
    border-radius: var(--promien-karta);
}

@media (min-width: 40rem) {
    .sekcja {
        padding: var(--odstep-5);
    }
}

.sekcja > :first-child {
    margin-top: 0;
}

.pole {
    margin-bottom: var(--odstep-4);
}

.pole label,
.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--odstep-2);
}

.podpowiedz {
    color: var(--kolor-tekst-2);
    /* 15 px to dolna granica całego systemu. Nic mniejszego tu nie istnieje. */
    font-size: var(--tekst-podpowiedz);
    margin: var(--odstep-1) 0 var(--odstep-2);
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    /* Formularz publiczny czyta się większym pismem niż panel: klienci Doroty to często
       osoby 50+ sprzedające odziedziczone mieszkanie. */
    font-size: var(--tekst-formularz);
    font-family: inherit;
    line-height: 1.5;
    padding: var(--odstep-3);
    color: var(--kolor-tekst);
    background: var(--kolor-tlo);
    /* Obwódka niesie informację (gdzie zaczyna się pole do kliknięcia), więc podlega
       progowi 3:1 z WCAG 1.4.11 — stąd #8A8A8A, a nie dekoracyjne #E3E3E3. */
    border: 1px solid var(--kolor-obwodka);
    border-radius: var(--promien-pole);
    /* Bez ustalonej wysokości: pole musi urosnąć przy powiększeniu pisma (WCAG 1.4.12). */
    min-height: 2.75rem;
}

@media (hover: hover) {
    .form-control:hover,
    .form-select:hover {
        border-color: var(--kolor-tekst);
    }
}

/* Bledne pole. Blazor sam dokleja klase "invalid" oraz atrybut aria-invalid na podstawie
   ValidationMessageStore - obsluguja oba zapisy, zeby regula dzialala niezaleznie od tego,
   ktora droga blad zostal zgloszony. Obwodka jest grubsza, a nie tylko czerwona: sam kolor
   nie jest nosnikiem informacji dla osoby nierozrozniajacej barw (WCAG 1.4.1). */
.form-control.invalid,
.form-select.invalid,
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] {
    border-width: 2px;
    border-color: var(--kolor-blad);
}

/* Klasy doklejane przez Blazora, ktore celowo NIE zmieniaja wygladu. Sa tu wymienione,
   bo test pilnujacy, ze kazda uzyta klasa ma regule, inaczej zglosilby je jako brak -
   a milczace pominiecie ich w arkuszu wygladaloby jak przeoczenie. */
.form-control.valid,
.form-select.valid,
.form-control.modified,
.form-select.modified {
    /* bez zmian: poprawnie wypelnione pole nie ma sie niczym wyrozniac */
}

.form-control:disabled,
.form-select:disabled {
    background: var(--kolor-tlo-2);
    border-color: var(--kolor-linia);
}

.form-control.w-auto,

.komunikat-bledu {
    color: var(--kolor-blad);
    font-size: var(--tekst-podpowiedz);
    margin: var(--odstep-3) 0 0;
}

/* Pusty komunikat nie ma zajmować miejsca — inaczej układ przesuwa się w momencie,
   gdy błąd się pojawia, a to jest dokładnie ten moment, w którym użytkownik czyta. */
.komunikat-bledu:empty {
    display: none;
}


/* Sekcja adresu wysyłki: sterowana wyłącznie stanem pola wyboru, bez JavaScriptu.
   TA REGUŁA JUŻ RAZ NIE ZADZIAŁAŁA NA PRODUKCJI. Siedziała w bloku <style> wewnątrz
   Formularz.razor, a CSP ma style-src 'self' bez unsafe-inline — więc przeglądarka
   ją odrzucała i sekcja adresu była widoczna zawsze. Musi zostać w tym pliku. */
/* SZEROKOSC POLA PODPOWIADA DLUGOSC ODPOWIEDZI (W3). Dwie nazwane szerokosci, nie liczba
   przy kazdym polu. Na telefonie obie wracaja do pelnej. */
/* SIATKA KROTKICH LICZB (W2). Liczba kolumn wynika z miejsca, nie jest wpisana na sztywno:
   sztywne "dwie kolumny" daloby na telefonie dwa slupki po okolo 3 rem, czyli uklad gorszy
   niz ten, ktory zastepujemy. 15 rem to najwezsza kolumna, w ktorej miesci sie najdluzsza
   etykieta metryki bez lamania na trzy linie. */
.siatka-liczb {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    /* Odstep POZIOMY wiekszy niz pionowy i to nie jest gust: przycisk "?" konczy kolumne
       lewa, a zaraz za nim zaczyna sie etykieta prawej. Przy odstepie 1,5 rem stal 24 px
       od cudzej etykiety i 8 px od wlasnej - roznica za mala, zeby oko ja rozstrzygnelo. */
    gap: 0 var(--odstep-7);
    align-items: start;
}

.pole-waskie {
    max-width: 7rem;
}

.pole-srednie {
    max-width: 14rem;
}

@media (max-width: 30rem) {
    .pole-waskie,
    .pole-srednie {
        max-width: 100%;
    }
}

/* OPCJE ROZLICZENIOWE: kazda w swoim wierszu, uklad robi SIATKA na pojemniku. Zadnych
   znacznikow wokol pojedynczych pol - odslanianie i przelaczanie kwoty opiera sie na
   selektorze ~, dzialajacym tylko miedzy rodzenstwem. :has() zabronione. */
.opcje-rozliczeniowe {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--odstep-2) var(--odstep-3);
    align-items: start;
}

.opcje-rozliczeniowe > div,
.opcje-rozliczeniowe > p {
    grid-column: 1 / -1;
}

/* KWOTA DO ZAPLATY na ostatnim kroku - do 20.08.2026 nie bylo jej tu wcale. */
.do-zaplaty {
    background: var(--kolor-tlo-marka);
    border-radius: var(--promien-karta);
    padding: var(--odstep-4);
    margin-top: var(--odstep-4);
}

.kwota-glowna {
    font-size: var(--tekst-formularz);
    margin-bottom: var(--odstep-2);
}

/* PODSUMOWANIE ODPOWIEDZI (W10). Etykieta i wartosc w dwoch kolumnach; na waskim
   ekranie wracaja do pionu. */
.podsumowanie-odpowiedzi {
    margin-bottom: var(--odstep-5);
}

.grupa-odpowiedzi {
    margin-bottom: var(--odstep-4);
}

/* Naglowek grupy i "popraw" w wierszu, z odstepem - dwa rozne cele (WCAG 2.5.8). */
.naglowek-grupy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--odstep-3);
}

.odpowiedzi .odpowiedz {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) 1fr;
    gap: var(--odstep-2) var(--odstep-3);
    padding: var(--odstep-2) 0;
    border-bottom: 1px solid var(--kolor-linia);
}

.odpowiedzi dt {
    font-weight: 600;
}

.odpowiedzi dd {
    margin: 0;
}

@media (max-width: 30rem) {
    .odpowiedzi .odpowiedz {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Kwota przelaczana tak samo jak w pasku ceny: obie wersje w znacznikach, jedna widoczna. */
.do-zaplaty .kwota-z-papierem {
    display: none;
}

#wersja-papierowa:checked ~ .do-zaplaty .kwota-bez-papieru {
    display: none;
}

#wersja-papierowa:checked ~ .do-zaplaty .kwota-z-papierem {
    display: inline;
}


#adres-wysylki {
    display: none;
}

#wersja-papierowa:checked ~ #adres-wysylki {
    display: block;
}

/* ---------------------------------------------------------------- przyciski */

.btn {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    padding: var(--odstep-3) var(--odstep-5);
    border: 1px solid transparent;
    border-radius: var(--promien-pole);
    background: var(--kolor-tlo);
    color: var(--kolor-tekst);
    /* 44 px to cel dotykowy z WCAG 2.5.8 w wariancie zalecanym. */
    min-height: 2.75rem;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

/* TRZY ROLE PRZYCISKU I ANI JEDNEJ WIECEJ.
   Zgloszone przez wlasciciela: "brzydko wygladaja te przyciski, nie sa spojne. Maja byc
   spojne wszystkie przyciski na calej stronie". Przeglad znacznikow pokazal SZESC wariantow
   (btn-primary, btn-secondary, btn-outline-secondary, btn-success, przycisk-usuwania, btn-lg),
   z czego dwa byly zwyklym powtorzeniem: .btn-outline-secondary mial DOKLADNIE te sama
   regule co .btn-secondary, a .btn-success roznil sie od glownego tylko kolorem, bez zadnej
   reguly mowiacej, kiedy go uzyc.

   Zostaja trzy, kazda z jasnym pytaniem, na ktore odpowiada:
     .btn-primary          - co mam tu zrobic?          (jedna na ekran)
     .btn-secondary        - co jeszcze moge zrobic?
     .przycisk-usuwania    - co jest nieodwracalne?

   KSZTALT JEST WSPOLNY. Wczesniej glowny przycisk byl pigulka, a drugorzedny prostokatem -
   i para "Filtruj / Wyczysc", stojaca obok siebie w jednym pasku, czytala sie jak dwa
   przypadkowe elementy z roznych stron. To jest dokladnie to, co wlasciciel zobaczyl.
   Rozniá je teraz WYPELNIENIE, a nie ksztalt: to wystarcza, zeby bylo wiadomo, ktory jest
   glowny, i nie rozbija zestawu. */
/* TRZY WAGI PRZYCISKOW (W5): glowna wypelniona - JEDNA NA EKRAN, drugorzedna obrys,
   niszczaca czerwien. Pilnuje WagiPrzyciskowTesty. */
.btn-primary {
    background: var(--kolor-akcja);
    color: var(--kolor-tlo);
    border-radius: var(--promien-pigulka);
}

.btn-secondary {
    background: var(--kolor-tlo);
    color: var(--kolor-akcja);
    border-color: var(--kolor-akcja);
    border-radius: var(--promien-pigulka);
}

.btn-lg {
    font-size: var(--tekst-formularz);
    padding: var(--odstep-4) var(--odstep-6);
}

@media (hover: hover) {
    .btn-primary:hover {
        background: var(--kolor-akcja-hover);
    }

    .btn-secondary:hover {
        background: var(--kolor-tlo-marka);
    }

    /* Przycisk niszczacy wypelnia sie dopiero pod kursorem - do tego momentu jest samym
       obrysem, zeby nie przyciagac klikniecia. */
    .przycisk-usuwania:hover {
        background: var(--kolor-blad);
        color: var(--kolor-tlo);
    }
}

/* ---------------------------------------------------------------- komunikaty */

.alert {
    padding: var(--odstep-4);
    border: 1px solid transparent;
    border-radius: var(--promien-karta);
    margin: 0 0 var(--odstep-5);
}

.alert-danger {
    background: var(--kolor-blad-tlo);
    border-color: var(--kolor-blad);
    color: var(--kolor-blad);
}

/* PODSUMOWANIE BLEDOW JEST LISTA CELOW DOTYKOWYCH, nie akapitem. Przy dziewietnastu bledach
   sasiednie odnosniki dzielilo 4 px przy wlasnej regule projektu mowiacej o 8 px - kciuk
   trafial w sasiedni wiersz. A klikniecie nie w ten odnosnik co trzeba jest tu kosztowne:
   prowadzi do zupelnie innego pola formularza. */
.alert-danger li {
    margin-bottom: var(--odstep-3);
}

.alert-danger li a {
    display: inline-block;
    min-height: 2.75rem;
    padding: var(--odstep-2) 0;
}

.alert-success {
    background: var(--kolor-sukces-tlo);
    border-color: var(--kolor-sukces);
    color: var(--kolor-sukces);
}

/* TRZECI RODZAJ WIADOMOSCI: zwykla informacja. Nie blad (nic sie nie zepsulo), nie sukces
   (nic sie nie stalo) i nie ostrzezenie (nic zlego nie grozi) - wyjasnienie, ktore czlowiek
   ma przeczytac ZANIM kliknie. Stad ton neutralny: gdyby wygladalo na ostrzezenie, ludzie
   przestaliby klikac przycisk, ktory jest bezpieczny. */
.alert-info {
    background: var(--kolor-tlo-2);
    border-color: var(--kolor-tekst-2);
    color: var(--kolor-tekst);
}

.alert-info p:last-child {
    margin-bottom: 0;
}

.alert-warning {
    background: var(--kolor-tlo-marka);
    border-color: var(--kolor-marka);
    color: var(--kolor-tekst);
}

/* ---------------------------------------------------------------- tabele */

/* text-align siedzi na TABELI, a nie na komorkach - i to nie jest kosmetyka.

   Poprzednia wersja ustawiala je regula ".table th, .table td", ktora ma szczegolowosc
   (0,1,1) i BIJE klase ".text-end" (0,1,0). Skutkiem bylo to, ze klasa wyrownujaca kwoty
   do prawej nie robila w tabelach NIC: wymog byl spelniony w znaczniku i niespelniony
   na ekranie. Zaden test czytajacy HTML tego nie widzi, bo HTML jest poprawny - wykryl
   to dopiero odczyt stylow obliczonych w przegladarce.

   Teraz wyrownanie jest DZIEDZICZONE z tabeli, a regula na komorce zawsze wygrywa
   z dziedziczeniem, niezaleznie od szczegolowosci. */
.table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.table th,
.table td {
    padding: var(--odstep-3);
    border-bottom: 1px solid var(--kolor-linia);
    vertical-align: top;
}

.table th {
    background: var(--kolor-tlo-2);
    font-weight: 600;
}

.table-striped tbody tr:nth-child(odd) {
    background: var(--kolor-tlo-2);
}

/* Kwoty czyta się kolumnowo tylko wtedy, gdy cyfry mają jednakową szerokość. */
.kwota,
.text-end {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- siatka i odstępy */

.row {
    display: flex;
    flex-wrap: wrap;
}




.mb-3 {
    margin-bottom: var(--odstep-4);
}

.ms-3 {
    margin-left: var(--odstep-4);
}

/* ---------------------------------------------------------------- dostępność */

/* Treść dla czytnika ekranu, niewidoczna wzrokowo. Nie display:none — to usuwa
   element także z drzewa dostępności, czyli robi dokładnie odwrotnie niż trzeba. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------------------------------------------------------------- pasek ceny

   Formularz ma czternascie pytan. Bez przyklejonego paska cena znika z ekranu po
   pierwszym przewinieciu - a to jedyna liczba, ktora klienta naprawde interesuje.

   Obie kwoty sa w HTML, renderowane przez serwer. Ta regula tylko rozstrzyga, ktora
   jest widoczna. Kwoty NIE MA i nie moze byc w tym pliku: cena jest liczona wylacznie
   serwerowo, a wartosc wpisana w CSS rozjechalaby sie z baza przy pierwszej zmianie
   cennika, nie zglaszajac tego niczym. Pilnuje tego test Arkusz_nie_zawiera_zadnej_kwoty. */

.pasek-ceny {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--odstep-2) var(--odstep-4);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--odstep-3) var(--odstep-4);
    background: var(--kolor-tlo-marka);
    border-top: 2px solid var(--kolor-marka);

    /* Przy pismie powiekszonym do 200% pasek urosl do 245 px, czyli 38% ekranu 640 px -
       tresci zostawalo mniej niz dwie trzecie okna. Kwota ma sie miescic, a nie rozpychac. */
    max-height: 25vh;
    overflow-y: auto;
}

.etykieta-ceny {
    font-weight: 600;
}

.pasek-ceny .kwota {
    font-family: var(--kroj-naglowkow);
    font-size: var(--tekst-naglowek);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Stan spoczynkowy: widoczna kwota bez wersji papierowej. */
.pasek-ceny .kwota-z-papierem {
    display: none;
}

/* Zaznaczona wersja papierowa przelacza kwote. Selektor RODZENSTWA, nie :has():
   :has() nie dziala na czesci starszych przegladarek mobilnych, a tam pasek pokazywalby
   kwote bez doplaty mimo zaznaczonej wersji papierowej - czyli klamalby o cenie.
   Warunkiem jest to, ze pasek lezy w tym samym bloku co pole wyboru; patrz komentarz
   przy pasku w Formularz.razor. */
#wersja-papierowa:checked ~ .pasek-ceny .kwota-bez-papieru {
    display: none;
}

#wersja-papierowa:checked ~ .pasek-ceny .kwota-z-papierem {
    display: inline;
}

/* Pasek jest przyklejony do dolu okna, wiec bez tego zaslanialby przycisk wysylki -
   czyli ostatnia rzecz, ktora klient ma kliknac. Pusty element na koncu formularza,
   a nie margines na <body> wyliczany selektorem :has(.pasek-ceny): tamten nie dziala
   na czesci starszych przegladarek mobilnych. Zapas jest wiec tam, gdzie pasek. */
.zapas-pod-pasek {
    height: 5.5rem;
}

/* Fokus wedrujacy klawiatura nie moze wladowac sie pod pasek ceny. Chromium przewija
   pole na srodek okna i problemu nie widac, ale Safari na telefonie potrafi zatrzymac
   fokus przy dolnej krawedzi - czyli dokladnie pod paskiem (WCAG 2.4.11). */
html {
    scroll-padding-bottom: 7rem;
}

/* ---------------------------------------------------------------- ekran wyboru typu

   Karta jest celowo niska: obie musza zmiescic sie na ekranie 360x640 razem z naglowkiem
   strony i zdaniem o wersji papierowej. Dlatego nie uzywamy tu klasy .sekcja, ktora ma
   wyrazniejsze marginesy i wyscielenie pod dlugie listy pytan. */

.karta-wyboru {
    margin: var(--odstep-4) 0;
    padding: var(--odstep-4);
    background: var(--kolor-tlo-2);
    border: 1px solid var(--kolor-linia);
    border-radius: var(--promien-karta);
}

.karta-wyboru h2 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--odstep-2) var(--odstep-3);
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--odstep-3);
}

/* Cena jest w naglowku, ale nie ma krzyczec glosniej niz nazwa - stad mniejszy stopien
   pisma mimo wspolnego elementu. Cyfry tabularne, zeby obie ceny ustawily sie w kolumnie. */
.cena-karty {
    font-family: var(--kroj-naglowkow);
    font-size: var(--tekst-wyrozniony);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- podpowiedzi poziomu 2

   Natywny popover: warstwa wierzchnia, zamykanie klawiszem Escape i klinieciem obok -
   wszystko bez ani jednej linii skryptu. To byl powod wyboru tego mechanizmu, bo CSP
   nie dopuszcza zadnego JavaScriptu na tej stronie.

   Degradacja w starszej przegladarce jest lagodna i to tez bylo kryterium: gdy atrybut
   popover nie jest obslugiwany, blok renderuje sie po prostu jako widoczny tekst, czyli
   wraca do poziomu 1. Wyjasnienie staje sie nadmiarowe, ale nie znika. */

/* NAGLOWEK POLA: ETYKIETA, ZNACZNIK AI I PRZYCISK "?" W JEDNYM WIERSZU (W2, W16).

   TRZY PODEJSCIA, dwa odrzucone po pomiarze na produkcji:

   1. Przycisk stal W CIAGU TRESCI, miedzy etykieta a podpowiedzia. Ma 44 px (cel dotykowy),
      wiec pierwsza linia podpowiedzi zaczynala sie 44 px od lewej i miala 44 px wysokosci.
      W kolumnie 224 px kazde takie zdanie lamalo sie na trzy linie.

   2. Przycisk WYJETY do prawego gornego rogu pola. Podpowiedz czytala sie dobrze, ale przy
      dwoch kolumnach przycisk lewej kolumny stal 45 px od etykiety PRAWEJ i ponad 300 px
      od wlasnej - czyli wygladal na cudzy. To blad gorszy niz brzydkie lamanie: mowi
      nieprawde o tym, czego dotyczy pomoc.

   3. Wspolny naglowek. Przycisk jest zawsze przy SWOJEJ etykiecie i nigdy nie spada do
      osobnego wiersza, bo etykieta lamie sie wewnatrz wlasnego pudelka. */
.naglowek-pola {
    display: flex;
    align-items: center;
    /* ZNACZNIK "WYPELNIONE PRZEZ AI" MA SIE ZAWIJAC, A NIE SCISKAC ETYKIETY. Bez tego
       "Rok budowy" lamalo sie na dwa wiersze po jednym slowie, zeby zrobic miejsce
       obok - a etykieta jest pytaniem i to ona ma pierwszenstwo. */
    flex-wrap: wrap;
    gap: var(--odstep-2);
}

.naglowek-pola > label {
    flex: 1 1 auto;
}

.naglowek-pola > label,
.naglowek-pola > h2,
.naglowek-pola > .znacznik-ai {
    margin-bottom: 0;
}

.naglowek-pola > .ikona-pomocy {
    flex: none;
    margin-bottom: 0;
}


.ikona-pomocy {
    font: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    /* 44 px to zalecany cel dotykowy z WCAG 2.5.8. Ikona pomocy jest najmniejszym
       elementem na tej stronie, wiec to na niej ten wymog sie lamie najlatwiej. */
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin-bottom: var(--odstep-2);
    color: var(--kolor-akcja);
    background: var(--kolor-tlo);
    border: 1px solid var(--kolor-akcja);
    border-radius: 50%;
}

@media (hover: hover) {
    .ikona-pomocy:hover {
        background: var(--kolor-tlo-marka);
    }
}

/* Przycisk zamkniecia w dymku. Escape dziala i oddaje fokus przyciskowi "?", ale na
   telefonie klawisza Escape nie ma - zostaje dotkniecie obok, czyli czynnosc, przy ktorej
   osoba 50+ sie zawiesza ("nie wiem, jak to zamknac"). */
.zamknij-dymek {
    margin-top: var(--odstep-3);
}

.popover-pomocy {
    max-width: 32rem;
    padding: var(--odstep-4);
    color: var(--kolor-tekst);
    background: var(--kolor-tlo);
    border: 1px solid var(--kolor-obwodka);
    border-radius: var(--promien-karta);
}

.popover-pomocy p {
    margin: 0;
}

.popover-pomocy::backdrop {
    background: rgb(0 0 0 / 25%);
}

/* Pola wyboru sa domyslnie male (okolo 13 px) i przy palcu to za malo. Powiekszamy je
   do 24 px - dolnej granicy z WCAG 2.5.8 - zachowujac natywny wyglad kontrolki. */
input[type="checkbox"] {
    /* 44x44 px, a nie 24x24. Formularz publiczny wypelnia sie kciukiem, czesto jedna reka
       i w slonecu; wlasne wymaganie projektu (ux-wymagania.md 5.1) mowi 44x44 i przez
       dlugi czas nie bylo dowiezione. Etykieta i tak przelacza pole, ale trafienie w sam
       kwadrat nie moze byc sztuka. */
    width: 2.75rem;
    height: 2.75rem;
    margin-right: var(--odstep-2);
    vertical-align: middle;
}

/* ---------------------------------------------------------------- zapowiedz maili

   Ta sekcja nie jest pytaniem - jest obietnica, i ma wygladac inaczej niz czternascie
   pytan powyzej. Klient, ktory ja przeoczy, zostanie zaskoczony wiadomoscia; klient,
   ktory wezmie ja za kolejne pytanie, bedzie szukal w niej pola do wypelnienia.

   Odroznienie idzie tlem marki i lewa krawedzia, nie samym kolorem tekstu - to ma byc
   widoczne takze w skali szarosci. */

.zapowiedz-maili {
    background: var(--kolor-tlo-marka);
    border-color: var(--kolor-marka);
    border-left-width: 4px;
}

.zapowiedz-maili ul {
    margin: 0;
    padding-left: var(--odstep-5);
}

.zapowiedz-maili li {
    margin-bottom: var(--odstep-3);
}

/* ---------------------------------------------------------------- ostrzezenie asystenta

   Wyglada jak blad, bo nim jest - tyle ze bledem klienta, nie systemu. Zdanie mowi,
   ze asystent CELOWO nie wypelnil pola (metraz podany razem z piwnica) i co z tym zrobic.
   Tresc niesie sam napis; kolor tylko przyspiesza zauwazenie. */

.ostrzezenie-asystenta {
    margin-top: var(--odstep-3);
    padding: var(--odstep-3);
    color: var(--kolor-blad);
    background: var(--kolor-blad-tlo);
    border-left: 4px solid var(--kolor-blad);
    border-radius: var(--promien-pole);
}

/* ---------------------------------------------------------------- znacznik asystenta

   Fiolet, nie pomarancz. Pomarancz w tym systemie znaczy "to jest sche24h" - ten sam
   kolor nie moze jednoczesnie znaczyc "to jest niepewne i wymaga sprawdzenia". Fiolet
   nie wystepuje nigdzie indziej, wiec niesie jednoznaczny komunikat.

   Nosnikiem informacji jest NAPIS w srodku, nie ten kolor. Kolor tylko przyspiesza
   zauwazenie; tresc dostaje tak samo osoba nierozrozniajaca barw i czytnik ekranu. */

.znacznik-ai {
    display: inline-flex;
    align-items: center;
    gap: var(--odstep-1);
    margin-bottom: var(--odstep-2);
    padding: var(--odstep-1) var(--odstep-3);
    font-size: var(--tekst-znacznik);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--kolor-zrodlo-ai);
    background: var(--kolor-zrodlo-ai-tlo);
    border-radius: var(--promien-znacznik);
}

/* Ikona znacznika AI. flex-shrink: 0, bo przy powiekszonym pismie tekst rosnie,
   a ikona zwezona do kreski przestaje cokolwiek znaczyc. */
.ikona-ai {
    flex-shrink: 0;
}

/* Dwie akcje w wierszu listy zlecen: "Otworz" i "Usun dane".
   ODSTEP JEST WYMOGIEM, NIE ESTETYKA. Sasiadujace odnosniki bez przerwy zlewaja sie
   w jeden cel dotykowy, a te dwa prowadza w zupelnie rozne miejsca - pomylka konczy sie
   ekranem nieodwracalnego usuwania. Ta sama regula co przy podsumowaniu bledow (WCAG 2.5.8).

   Trwalego kasowania juz tu nie ma - przeniosl sie do pol wyboru i jednego przycisku
   pod tabela. */
.akcje-wiersza {
    display: flex;
    flex-wrap: wrap;
    gap: var(--odstep-4);
}

/* Pole w pasku akcji - klasa uzywana i w panelu, i w kreatorze, wiec stoi w arkuszu
   glownym, a nie w arkuszu jednego ekranu. */
.pole-akcji {
    flex: 1 1 auto;
    min-width: 0;
}

/* OKNO POTWIERDZENIA (W14). Buduje je skrypt, wiec klasy nie widac w zadnym pliku .razor -
   sa wypisane w js/ulepszenia.js. Bez skryptu okno nie powstaje i formularz idzie od razu. */
.okno-potwierdzenia {
    max-width: 32rem;
    padding: var(--odstep-5);
    border: 1px solid var(--kolor-linia);
    border-radius: var(--promien-karta);
    background: var(--kolor-tlo);
    color: var(--kolor-tekst);
}

.okno-potwierdzenia::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.pytanie-potwierdzenia {
    font-size: var(--tekst-wyrozniony);
    margin-bottom: var(--odstep-5);
}

/* PANEL: CZTERY FAKTY NAD GRUPAMI (W13). To po nie Dorota tu wchodzi - reszta jest
   uzupelnieniem. Wczesniej trzeba bylo szukac ich wzrokiem posrod 25 wierszy. */
.kluczowe-fakty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--odstep-4);
    margin-bottom: var(--odstep-5);
    padding: var(--odstep-4);
    background: var(--kolor-tlo-2);
    border-radius: var(--promien-karta);
}

.fakt dt {
    font-size: var(--tekst-podpowiedz);
    color: var(--kolor-tekst-2);
}

.fakt dd {
    margin: 0;
    font-size: var(--tekst-wyrozniony);
    font-weight: 600;
}

/* GRUPY OBOK SIEBIE, a nie kazda grupa lamana na dwie kolumny (W13).

   Pierwsza wersja dzielila WNETRZE kazdej grupy - i wysokosc calosci UROSLA z 1057 na
   1455 px, bo szesc naglowkow kosztuje wiecej, niz oszczedzaja krotkie kolumienki.
   Teraz w dwie kolumny ida CALE GRUPY: jedna obok drugiej, kazda nierozdzielana. */
@media (min-width: 60rem) {
    .grupy-odpowiedzi {
        columns: 2;
        column-gap: var(--odstep-7);
    }

    .grupa-odpowiedzi {
        break-inside: avoid;
        margin-bottom: var(--odstep-5);
    }
}

/* ZDJECIA WGRYWANE W KREATORZE (W12). Lista wgranych plikow, kazdy z wlasnym przyciskiem
   usuwania - wczesniej bylo tu jedno pole wyboru "dolacze zdjecie" i zadnej mozliwosci
   poprawki. */
.zdjecia-kroku {
    margin-top: var(--odstep-5);
}

.lista-zdjec {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--odstep-4);
}

.zdjecie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--odstep-3);
    padding: var(--odstep-3) 0;
    border-bottom: 1px solid var(--kolor-linia);
}

.nazwa-zdjecia {
    word-break: break-all;
}

/* PASTYLKI W KOLUMNIE AKCJI (W9): tabela niosla 40 podkreslen. Nosnikiem zostaje KSZTALT,
   nie sam kolor - inaczej lamiemy WCAG 1.4.1. Pilnuje OdnosnikiTesty. */
.akcje-wiersza a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 var(--odstep-3);
    border: 1px solid var(--kolor-obwodka);
    border-radius: var(--promien-pigulka);
    text-decoration: none;
}

@media (hover: hover) {
    .akcje-wiersza a:hover {
        background: var(--kolor-tlo-2);
        text-decoration: underline;
    }
}

.akcje-wiersza a:focus-visible {
    text-decoration: underline;
}

/* Wlasny adres wysylki odslania sie po ODZNACZENIU przelacznika "wyslij na adres
   nieruchomosci". Selektor rodzenstwa, tak jak przy wersji papierowej - zero JavaScriptu.

   Zapis przez :not(:checked), a nie osobna klasa: stan jest w polu wyboru, wiec
   nie ma drugiego miejsca, ktore moze sie z nim rozjechac. */
#wlasny-adres-wysylki {
    display: none;
}

#wysylka-na-nieruchomosc:not(:checked) ~ #wlasny-adres-wysylki {
    display: block;
}

/* Faktura: dwa poziomy ujawniania, oba selektorem rodzenstwa. Klient, ktory nie chce
   faktury, nie widzi ani jednego z tych pol - dzieki temu ekran kontaktu miesci sie
   w limicie szesciu pytan z wymagania Z7. */
#dane-faktury,
#inne-dane-faktury {
    display: none;
}

#chce-fakture:checked ~ #dane-faktury {
    display: block;
}

#faktura-dane-zamawiajacego:not(:checked) ~ #inne-dane-faktury {
    display: block;
}

/* Dopisek "(wymagane)" / "(opcjonalne)" w etykiecie. OZNACZAMY OBIE KATEGORIE SLOWEM,
   nie gwiazdka: przy niejednoznacznym oznaczeniu jedna trzecia badanych dostawala blad
   walidacji, bo nie wiedziala, ktore pola sa obowiazkowe. */
.podpowiedz-inline {
    font-weight: 400;
    color: var(--kolor-tekst-2);
}

/* Rozwijany blok pytan dotyczacych mniejszosci nieruchomosci. Natywny <details> -
   dziala z klawiatury i bez JavaScriptu. Cel dotykowy 44 px jak kazdy inny. */
details.pole > summary {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    cursor: pointer;
    font-weight: 600;
}

details.pole > summary:focus-visible {
    outline: 3px solid var(--kolor-fokus);
    outline-offset: 2px;
}

/* Odpowiedz na pytanie "jak jest teraz" - na ekranach ustawien, przy przelaczniku, ktorego
   dotyczy. Nie jest opisem skutku, tylko stanem biezacym, wiec ma wlasny, wyrazny wyglad.
   W arkuszu GLOWNYM, bo uzywaja jej dwa ekrany: przelaczniki formularza i zlecenia pokazowe. */
.stan-biezacy {
    margin: var(--odstep-2) 0 0;
    padding: var(--odstep-2) var(--odstep-3);
    background: var(--kolor-tlo-2);
    border-left: 4px solid var(--kolor-marka);
    border-radius: var(--promien-pole);
}

/* PRZYCISK AKCJI NIEODWRACALNEJ - obrys w kolorze bledu, nie wypelnienie. Wypelniony
   czerwony przycisk przyciaga klikniecie; ten ma je spowalniac. W arkuszu GLOWNYM, bo
   uzywaja go dwa ekrany: usuwanie danych osobowych i kasowanie zlecen pokazowych.
   Wyglad akcji niszczacej nie moze zalezec od tego, na ktorym ekranie stoi. */
.przycisk-usuwania {
    border: 1px solid var(--kolor-blad);
    background: var(--kolor-tlo);
    color: var(--kolor-blad);
    min-height: 2.75rem;
    /* TEN SAM ksztalt co pozostale dwie role - rozni go kolor, nie sylwetka. */
    border-radius: var(--promien-pigulka);
}


/* WYCOFANIE SWIADECTWA - akcja nieodwracalna schowana za rozwinieciem, zeby nie stala
   golym przyciskiem obok "wgraj". Dwie akcje niszczace w jednym rzedzie to jedno omylkowe
   klikniecie od skasowania dokumentu, ktory klient juz dostal.

   Odstep od gory oddziela ja od formularza wgrywania; ramka i tlo mowia, ze to inna sprawa
   niz reszta sekcji. To zwykly znacznik <details> - zero JavaScriptu. */
.wycofanie-swiadectwa {
    margin-top: var(--odstep-5);
    padding: var(--odstep-3) var(--odstep-4);
    background: var(--kolor-tlo-2);
    border: 1px solid var(--kolor-linia);
    border-radius: var(--promien-pole);
}

.wycofanie-swiadectwa > summary {
    cursor: pointer;
    /* Pole dotykowe - WCAG 2.2 SC 2.5.8. Sam tekst podsumowania bywa nizszy niz 24 px. */
    min-height: 2.75rem;
    display: flex;
    align-items: center;
}

.wycofanie-swiadectwa p {
    margin: var(--odstep-3) 0;
}

/* Formularze akcji ukladaja sie w wiersz na laptopie i w kolumne na telefonie. Odstep miedzy
   polem a przyciskiem jest ze skali odstepow i spelnia minimum 8 px z WCAG 2.5.8.
   W arkuszu GLOWNYM, bo uzywaja jej ekrany panelu i ekrany klienta. */
.pasek-akcji {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--odstep-4);
    margin-bottom: var(--odstep-5);
}

/* ---------------------------------------------------------------- kreator etapowy */

/* LICZNIK KROKOW NAD NAGLOWKIEM. Przy formularzu na kilka ekranow pierwsze pytanie czlowieka
   brzmi "ile jeszcze", a dopiero drugie "o co teraz" - i w tej kolejnosci ma to stac.
   Tekstem, nie paskiem: pasek bez JavaScriptu i tak musialby byc obrazkiem tego samego zdania,
   a czytnik ekranu odczyta zdanie od razu. */
.krok-licznik {
    margin: 0 0 var(--odstep-2);
    color: var(--kolor-tekst-2);
    font-weight: 600;
}

/* Wyjscie wstecz jest PRAWDZIWYM odnosnikiem, nie przyciskiem przegladarki - czesc ludzi
   temu drugiemu nie ufa przy wypelnianiu danych. Stoi nad pytaniami, bo tam go szukaja. */
.wstecz {
    display: inline-block;
    margin-bottom: var(--odstep-3);
}

/* OSTRZEZENIE O AKCJI NIEODWRACALNEJ. W arkuszu GLOWNYM, bo uzywaja go dwa ekrany usuwania:
   danych osobowych i trwalego skasowania zlecenia. Wyglad ostrzezenia nie moze zalezec
   od tego, na ktorym ekranie stoi. */
/*
   Styl ekranu potwierdzenia. Siedzi TUTAJ, a nie w wwwroot/styl.css, bo dotyczy
   jednego ekranu w calej aplikacji - izolacja CSS Blazora zamyka go razem z komponentem.

   Wszystkie kolory ida ze zmiennych z :root. Wartosc wpisana tu wprost wypadlaby
   z tabeli kontrastow (sekcja 2.2 wymagan) i nikt by tego nie zauwazyl.
*/

.ostrzezenie-nieodwracalne {
    padding: var(--odstep-4);
    border-left: 4px solid var(--kolor-blad);
    border-radius: var(--promien-karta);
    background: var(--kolor-blad-tlo);
    margin-bottom: var(--odstep-5);
}

/* KOLUMNA ZAZNACZENIA na liscie zlecen (tylko administrator). Pole ma 24 px - minimalny
   cel wskazywania z WCAG 2.5.8; mniejszy przy operacji nieodwracalnej to proszenie sie
   o zaznaczenie sasiada. */
.kolumna-zaznaczenia {
    width: 3rem;
}

.komorka-zaznaczenia {
    text-align: center;
}

.komorka-zaznaczenia input {
    width: 1.5rem;
    height: 1.5rem;
}