/* RCS — arkusz stylów. Kierunek: przyrząd pomiarowy, nie broszura.
 *
 * Osiemdziesiąt procent powierzchni tej strony to gęsta siatka liczb i porównań, nie treść
 * do czytania. Wszystkie decyzje poniżej wynikają z tego jednego zdania: wiersz ma 26 px,
 * liczby są monospace z cyframi stałej szerokości, kolor jest zarezerwowany dla KIERUNKU
 * ZMIANY, a płyty trzyma włosowa linia zamiast cienia. Ciemny motyw jest domyślny, bo tak
 * wygląda narzędzie, przy którym się siedzi; jasny jest pełnoprawny, nie dodatkiem.
 *
 * Kontrakt z generatorami SVG w app.py: Python rysuje geometrię i rozdaje klasy
 * (w-slupek, w-linia, w-seria, w-siatka, w-podpis, w-dodatni/ujemny), kolory są TUTAJ.
 */

/* ═══ [A] TOKENY I PODSTAWA — właściciel P1 ═══ */
/* Region arkusza (docs/rcs2/PLAN.md, reguła 4): każdy pakiet pisze tylko między swoimi
   znacznikami, więc równoległe zmiany jednego pliku scalają się bez konfliktów. Kolejność
   regionów = kolejność kaskady: tokeny, powłoka, komponenty, inwestycje, mapa.

   RCS 2 (docs/rcs2/SPEC.md 4.1): nazwy tokenów zostają, zmieniają się wartości — kontrast
   drugorzędnego tekstu (--sz-2 miało 3,3:1, teraz ≥ 4,5:1 na każdym tle powłoki: --tlo, --plyta,
   --plyta-2, --plyta-3, w obu motywach; test_kontrast_tokenow liczy wszystkie pary), promienie
   (3/6 px → 8/12 px), skala pisma — i dochodzą nowe: etapy inwestycji, sekwencja ceny, pigułki,
   szkło nakładek, wymiary powłoki. Podkład mapy (--mapa-*, --podklad-*, --droga-*) bez zmian. */

/* Krój zmienny hostowany u nas — zero zależności od fonts.googleapis.com przy tysiącach
   indeksowanych stron gmin. Ograniczony do znaków, które ta strona naprawdę pokazuje, i do
   zakresu osi, którego arkusz używa (grubość 400–760, szerokość 100–112%): 176 kB → 30 kB.
   Jeden plik z polskimi literami (wcześniej osobny latin-ext: drugie żądanie i późne
   przerysowanie „ą ę ł” po dojściu drugiego pliku). Zakres znaków to suma dawnych dwóch
   zakresów, a plik ma dokładnie te znaki co dawne dwa — reszta (–, —, •, ±, →) jak dotąd
   z kroju systemowego. Nowa grubość albo szerokość w arkuszu = nowy plik (fonttools
   varLib.instancer z szerszym zakresem), inaczej przeglądarka przytnie ją do granicy. */
@font-face {
  font-family: "Archivo"; src: url(/static/archivo-v2.woff2) format("woff2");
  font-weight: 400 760; font-stretch: 100% 112%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2018-201A, U+201C-201E, U+2026, U+20AC,
    U+0100-024F, U+2013-2014, U+25B2, U+25BC, U+2192;
}

:root {
  color-scheme: dark light;

  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* tylko kody: TERYT, id */
  --szer-naglowka: 112%;                /* Archivo, oś wdth: nagłówki rozszerzone */

  /* skala */
  --t-mikro: 11px; --t-mini: 12px; --t-mala: 13px; --t-baza: 14px; --t-tresc: 15px;
  --t-h2: 19px; --t-h1: clamp(26px, 1.1rem + 1.6vw, 40px); --t-display: clamp(34px, 1.2rem + 3.3vw, 60px);
  --t-kpi: clamp(22px, 1rem + .9vw, 28px);
  /* karty „Sprawdź” i raport dla biznesu (plan kart K1, komponenty [AN-W] w rcs-analiza.css): treść dla laika,
     akapit wiodący działu i jedna liczba na górze karty */
  --t-czyt: 16px; --t-lead: 17px; --t-bohater: clamp(34px, 1.4rem + 1.6vw, 44px);
  --k-1: 4px; --k-2: 8px; --k-3: 12px; --k-4: 16px; --k-5: 24px; --k-6: 32px; --k-7: 48px;
  --r: 8px; --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 22px; --r-pig: 999px;   /* było 3 / 6 px */
  --wiersz: 26px;                       /* tabele gęste: eksplorator, rankingi — jedna liczba steruje gęstością */
  --wiersz-karta: 34px;                 /* tabele na kartach */
  /* Powłoka: szyna, pasek górny, pasek kart na telefonie, lista stron-map. --gora-h zostaje
     jako nazwa dla starych reguł (kotwice pod przyklejonym nagłówkiem) i znaczy teraz „pasek”. */
  --szyna-w: 80px; --pasek-h: 56px; --dol-h: 62px; --lista-w: 520px;
  --gora-h: var(--pasek-h);
  --szyb: 110ms; --sred: 220ms; --wolno: 420ms; --krzywa: cubic-bezier(.32,.72,0,1);

  /* Ciemna paleta jest zdefiniowana RAZ, tutaj. Jasna też raz — dwie niezależne listy
     wartości rozjeżdżają się w kwartał, więc jasna jest mapowana dwoma selektorami
     na ten sam blok (test_p1_powloka pilnuje, żeby oba były identyczne). */
  --tlo: #0a0d12; --plyta: #11161d; --plyta-2: #161c25; --plyta-3: #1d2430; --plyta-4: #262e3b;
  --tekst: #e6ebf2; --sz: #a3adba; --sz-2: #818c9b;          /* --sz-2 było #606c7e (3,3:1) → 5,3:1 na płycie, ≥ 4,5:1 także na --plyta-3 */
  --linia: #222a36; --linia-2: #1a212b; --linia-3: #313b4a;
  /* Rozdział wymuszony nazwą: --akcent dotyka TEKSTU i musi mieć ≥4,5:1, --akcent-swiat
     służy wyłącznie poświatom, ramkom i wykresom i nigdy nie trafia na literę. */
  --akcent: #4fb8ff; --akcent-swiat: #7cd0ff; --akcent-tlo: #0f2b43; --akcent-cien: #4fb8ff38; --akcent-na: #06121d;
  --wzrost: #2ed47a; --wzrost-tlo: #0c2a1d; --spadek: #ff6b62; --spadek-tlo: #2c1416;
  --uwaga-tlo: #241c0b; --uwaga-ramka: #4a3a14; --uwaga-tekst: #f2b03c;
  /* pasek „najczęściej” (akcent rozjaśniony) i znak „sprawdź” (pinezka, numer na liście kontrolnej) - [AN-W] */
  --pasmo: #1f4e78; --uwaga-znak: #f2b03c;
  /* etapy inwestycji: 3 sloty kategoryczne, walidator all-pairs zdany (CVD ΔE 9,4; normalne 20,9; kontrast ≥ 3:1) */
  --etap-sprzedaz: #3987e5; --etap-budowa: #d95926; --etap-odbiory: #199e70; --etap-zapowiedz: #d95926; --etap-sprzedana: #5b6574;
  /* treść z modelu językowego — w RCS 2 bez zastosowania (decyzja właściciela: bez AI); zostaje zarezerwowany */
  --ai: #a898ff; --ai-tlo: #1c1733; --ai-ramka: #3b3170;
  /* nakładki nad mapą */
  --szklo: rgba(17, 22, 29, .86); --szklo-ramka: rgba(255,255,255,.07);
  --cien-1: 0 1px 2px #00000066; --cien-2: 0 12px 32px #00000073, 0 0 0 1px var(--linia-3);
  --cien-plyw: 0 18px 50px #0000008c, 0 0 0 1px var(--szklo-ramka);
  --cien-krawedz: #00000059;
  --siatka: #ffffff09;
  /* cena: jedna barwa; w ciemnym odwrócona (tanio ginie w tle, drogo świeci) */
  --sek-1: #104281; --sek-2: #184f95; --sek-3: #1c5cab; --sek-4: #2a78d6; --sek-5: #5598e7; --sek-6: #86b6ef; --sek-7: #b7d3f6;
  /* cena wobec okolicy: dwie barwy + szary środek */
  --roz-taniej: #3987e5; --roz-zero: #383835; --roz-drozej: #e66767;
  /* pigułki cen na mapie */
  --pig-tlo: #1a212b; --pig-tekst: #eef2f8; --pig-wyb: #eef2f8; --pig-wyb-tekst: #0a0d12;
  --seria-0: #4fb8ff; --seria-1: #ff5f56; --seria-2: #2ed47a; --seria-3: #f2b03c; --seria-4: #b18cff;
  /* Podkład mapy. Celowo przygaszony i odbarwiony: ma pozwolić się zorientować, a nie
     konkurować z ceną — kolor na tej mapie należy do danych, nie do lasu. */
  /* ── Podkład mapy ──────────────────────────────────────────────────────────────────────
     Cały podkład mieści się w paśmie jasności L* 7–24: piętnaście punktów na wszystko.
     Wcześniej rozciągał się od 9 do 45 i to był główny powód, dla którego konkurował
     z danymi zamiast im służyć. Reguła: PODKŁAD NIESIE JASNOŚĆ, DANE NIOSĄ NASYCENIE —
     podkład ma chromę ≤ 18, dane ≥ 35, więc oko rozdziela „gdzie jestem" od „ile kosztuje"
     bez świadomego wysiłku. */
  /* Ląd ma WŁASNĄ zmienną, nie --plyta-2: w motywie jasnym jezdnia jest biała i musi mieć
     od czego się odciąć. Przy lądzie równym płycie biała droga po prostu znika. */
  --mapa-lad: #11161c;
  --podklad-las: #142819; --podklad-zielen: #17251a; --podklad-ogrodki: #1d3321;
  --podklad-zab-jedno: #1c212a; --podklad-zab-wielo: #262e3c;   /* bloki jaśniejsze od domów: gęstość = masa */
  --podklad-zab-przem: #2b2620; --podklad-zab-handel: #2a2431;
  /* Woda to JEDYNY nasycony element podkładu i sufit dla całej reszty. Było #14293d przy tle
     #141a23 — jasność niemal identyczna, więc Zatoka i Bałtyk czytały się jak ląd. Rzeka ma
     własną barwę, o stopień jaśniejszą: dotąd miała tę samą co zbiornik, na tle w tej samej
     barwie, czyli Wisła była praktycznie niewidoczna. */
  --podklad-woda: #16344f; --podklad-rzeka: #21496b;
  --podklad-kolej: #4a525c; --podklad-kolej-obw: #0e131a;
  /* Drabina dróg: sześć równomiernych stopni jasności, chroma ≤ 10. Rangę 1 od rangi 6 dzieli
     teraz ~53 punkty L* i stosunek szerokości 5:1 przy powiększeniu 14 — dotąd było 2,5:1
     i jeden krok jasności, i to jest mierzalna przyczyna „toporności".
     NIGDY przez line-opacity: krycie mnoży kontrast przez to, co akurat leży pod spodem,
     a pod spodem jest raz tło (L* 7), raz czerwony heksagon (L* 46). */
  --droga-1: #a9b7c9; --droga-2: #8c9ab0; --droga-3: #6f7d94;
  --droga-4: #56627a; --droga-5: #414b5e; --droga-6: #333c4b;
  /* Obwódka CIEMNIEJSZA od lądu — ma wycinać, nie okalać. To ona pozwala drodze leżeć nad
     danymi: droga główna nad zielonym heksagonem ma różnicę jasności 8, nad żółtym −8, czyli
     w obu wypadkach jest niewidoczna. Ale obwódka ma wobec KAŻDEJ barwy palety różnicę od
     −42 do −58, więc para „jasny pasek w ciemnym konturze" przeżyje dowolne tło. */
  --droga-1-obw: #080b10; --droga-2-obw: #080b10;
  --droga-3-obw: #0a0e14; --droga-4-obw: #0a0e14;
  --droga-5-obw: #0e131a; --droga-6-obw: #0e131a;
  /* Podpisy: trzy stopnie jasności nazwy ulicy zamiast jednego. To jest „większe ulice
     wcześniej widać" po stronie tonalnej — Grunwaldzka jest jaśniejsza i pojawia się trzy
     powiększenia przed ślepą uliczką. */
  --mapa-napis-miasto: #eef2f8; --mapa-napis-wies: #a9b3c2; --mapa-napis-dzielnica: #8e99a8;
  --mapa-napis-arteria: #c2cede; --mapa-napis-ulica: #98a2b0; --mapa-napis-ulica-mala: #7d8794;
  --mapa-napis-woda: #74a0c0; --mapa-napis-numer: #eef3f9;
  /* Obwódka podpisu NIE jest kolorem tła mapy. Nad heksagonem i nad lasem taka obwódka jest
     widoczną szaroniebieską łatką i napis wygląda jak naklejka. Prawie czarna z rozmyciem
     czyta się jak cień i jest neutralna nad wszystkim, co pod nią wpadnie. Ulice mają
     obwódkę mocniejszą i ostrą — musi wyciąć kreskę jezdni spod litery. */
  --mapa-halo: rgba(5, 8, 12, .9); --mapa-halo-ulica: rgba(5, 8, 12, .96);
  --mapa-halo-woda: rgba(8, 25, 39, .85);
  /* `wybrana` miała #15181d — prawie czarną, czyli NIEWIDOCZNĄ na ciemnym motywie. */
  --mapa-obrys-gmin: #8fa3bd; --mapa-obrys-powiatow: #6f7e92;
  --mapa-wybrana: #7cd0ff; --mapa-wybrana-obw: #05080c;
  --mapa-strefa-obrys: #0d1218; --mapa-strefa-obrys-akt: #ffffff;
  --mapa-tarcza-a: #2b4a7a; --mapa-tarcza-dk: #7a2f2b; --mapa-tarcza-dw: #6b5a1c;
  --mapa-tarcza-ramka: #94a3b8; --mapa-tarcza-napis: #eef3f9;
  --wykres-siatka: var(--linia-3);
  --wykres-podpis: var(--sz-2);
}

/* Jasny motyw: ten sam przyrząd w dzień. Ta sama gęstość, te same linie, inne wartości. */
@media (prefers-color-scheme: light) { :root:not([data-motyw="ciemny"]) {
  color-scheme: light;
  --tlo: #f1f3f6; --plyta: #ffffff; --plyta-2: #f6f7f9; --plyta-3: #eceff3; --plyta-4: #e1e6ec;
  --tekst: #0b0f16; --sz: #4f5967; --sz-2: #626c7a;          /* było #828d9c (3,3:1); #677180 miało na --tlo 4,44:1 → teraz 4,8:1 na --tlo, 4,6:1 na --plyta-3 */
  --linia: #e0e5eb; --linia-2: #edf0f4; --linia-3: #cdd4dd;
  --akcent: #0b64c4; --akcent-swiat: #0b64c4; --akcent-tlo: #e4effb; --akcent-cien: #0b64c433; --akcent-na: #ffffff;
  --wzrost: #06874a; --wzrost-tlo: #e6f5ec; --spadek: #cc2f27; --spadek-tlo: #fdeceb;
  --uwaga-tlo: #fff6e2; --uwaga-ramka: #ecd7a3; --uwaga-tekst: #7a5600;
  --pasmo: #b9d3f0; --uwaga-znak: #c98a00;
  --etap-sprzedaz: #2a78d6; --etap-budowa: #eb6834; --etap-odbiory: #1baf7a; --etap-zapowiedz: #eb6834; --etap-sprzedana: #97a0ad;
  --ai: #6a4de6; --ai-tlo: #f2efff; --ai-ramka: #d9d0ff;
  --szklo: rgba(255, 255, 255, .88); --szklo-ramka: rgba(11,15,22,.08);
  --cien-1: 0 1px 2px #0b0f1614; --cien-2: 0 10px 30px #0b0f161f, 0 0 0 1px var(--linia);
  --cien-plyw: 0 14px 44px #0b0f1626, 0 0 0 1px var(--szklo-ramka);
  --cien-krawedz: #0b0f1626; --siatka: #0b0f1608;
  --sek-1: #cde2fb; --sek-2: #9ec5f4; --sek-3: #6da7ec; --sek-4: #3987e5; --sek-5: #256abf; --sek-6: #184f95; --sek-7: #0d366b;
  --roz-taniej: #2a78d6; --roz-zero: #f0efec; --roz-drozej: #e34948;
  --pig-tlo: #ffffff; --pig-tekst: #0b0f16; --pig-wyb: #0b0f16; --pig-wyb-tekst: #ffffff;
  --seria-0: #0b64c4; --seria-1: #cc2f27; --seria-2: #06874a; --seria-3: #b26a00; --seria-4: #6b3fc4;
  /* Ląd odrobinę ciemniejszy niż --plyta-2 (#f6f7f9). To warunek konieczny, nie kosmetyka:
     przy lądzie równym płycie biała jezdnia znika. */
  --mapa-lad: #eef1f5;
  --podklad-las: #d9ecdb; --podklad-zielen: #e6f0e0; --podklad-ogrodki: #d4e8cf;
  --podklad-zab-jedno: #e7e9ee; --podklad-zab-wielo: #dadee7;
  --podklad-zab-przem: #ece5db; --podklad-zab-handel: #eae2ee;
  --podklad-woda: #bcdbf3; --podklad-rzeka: #9cc6e6;
  --podklad-kolej: #9aa1ab; --podklad-kolej-obw: #ffffff;
  /* Jezdnia BIAŁA, obwódka ciemniejsza — odwrotnie niż w motywie ciemnym. Odrzucony wariant
     „obwódka biała, jezdnia szara": paleta danych ma w jasnym motywie pasmo L* 55–80, a szara
     jezdnia przy L* 54 wpada w jego środek i zlewa się z klasami środkowymi dokładnie tam,
     gdzie mapa jest najgęstsza. Biała jezdnia z ciemniejszą obwódką zawiera oba końce skali
     jasności, więc czyta się nad dowolną barwą danych.
     Autostrada i ekspresowa zachowują ciepłą obwódkę: to konwencja czytelna bez tarczy. */
  --droga-1: #ffffff; --droga-2: #ffffff; --droga-3: #ffffff;
  --droga-4: #ffffff; --droga-5: #f9fafc; --droga-6: #f4f6f9;
  --droga-1-obw: #c2a25a; --droga-2-obw: #cbb277; --droga-3-obw: #aab6c6;
  --droga-4-obw: #bbc4d1; --droga-5-obw: #cbd2dc; --droga-6-obw: #dbe0e7;
  --mapa-napis-miasto: #131920; --mapa-napis-wies: #4e5967; --mapa-napis-dzielnica: #6e7887;
  --mapa-napis-arteria: #39424f; --mapa-napis-ulica: #5a6572; --mapa-napis-ulica-mala: #78818d;
  --mapa-napis-woda: #37698a; --mapa-napis-numer: #131920;
  /* Lustro: obwódka JAŚNIEJSZA niż wszystko, przez co podpis może przejść. Rozmycie prawie
     do zera — na jasnym tle nie ma czego rozmywać, a rozmyta biel zjada literę. */
  --mapa-halo: rgba(255, 255, 255, .92); --mapa-halo-ulica: rgba(255, 255, 255, .96);
  --mapa-halo-woda: rgba(240, 248, 255, .9);
  --mapa-obrys-gmin: #8f9bab; --mapa-obrys-powiatow: #6d7987;
  --mapa-wybrana: #0b64c4; --mapa-wybrana-obw: #ffffff;
  --mapa-strefa-obrys: #ffffff; --mapa-strefa-obrys-akt: #0b0f16;
  --mapa-tarcza-a: #d7e2f2; --mapa-tarcza-dk: #f5dcd9; --mapa-tarcza-dw: #f7eec6;
  --mapa-tarcza-ramka: #7d8ca0; --mapa-tarcza-napis: #1a2230;
} }
:root[data-motyw="jasny"] {
  color-scheme: light;
  --tlo: #f1f3f6; --plyta: #ffffff; --plyta-2: #f6f7f9; --plyta-3: #eceff3; --plyta-4: #e1e6ec;
  --tekst: #0b0f16; --sz: #4f5967; --sz-2: #626c7a;          /* było #828d9c (3,3:1); #677180 miało na --tlo 4,44:1 → teraz 4,8:1 na --tlo, 4,6:1 na --plyta-3 */
  --linia: #e0e5eb; --linia-2: #edf0f4; --linia-3: #cdd4dd;
  --akcent: #0b64c4; --akcent-swiat: #0b64c4; --akcent-tlo: #e4effb; --akcent-cien: #0b64c433; --akcent-na: #ffffff;
  --wzrost: #06874a; --wzrost-tlo: #e6f5ec; --spadek: #cc2f27; --spadek-tlo: #fdeceb;
  --uwaga-tlo: #fff6e2; --uwaga-ramka: #ecd7a3; --uwaga-tekst: #7a5600;
  --pasmo: #b9d3f0; --uwaga-znak: #c98a00;
  --etap-sprzedaz: #2a78d6; --etap-budowa: #eb6834; --etap-odbiory: #1baf7a; --etap-zapowiedz: #eb6834; --etap-sprzedana: #97a0ad;
  --ai: #6a4de6; --ai-tlo: #f2efff; --ai-ramka: #d9d0ff;
  --szklo: rgba(255, 255, 255, .88); --szklo-ramka: rgba(11,15,22,.08);
  --cien-1: 0 1px 2px #0b0f1614; --cien-2: 0 10px 30px #0b0f161f, 0 0 0 1px var(--linia);
  --cien-plyw: 0 14px 44px #0b0f1626, 0 0 0 1px var(--szklo-ramka);
  --cien-krawedz: #0b0f1626; --siatka: #0b0f1608;
  --sek-1: #cde2fb; --sek-2: #9ec5f4; --sek-3: #6da7ec; --sek-4: #3987e5; --sek-5: #256abf; --sek-6: #184f95; --sek-7: #0d366b;
  --roz-taniej: #2a78d6; --roz-zero: #f0efec; --roz-drozej: #e34948;
  --pig-tlo: #ffffff; --pig-tekst: #0b0f16; --pig-wyb: #0b0f16; --pig-wyb-tekst: #ffffff;
  --seria-0: #0b64c4; --seria-1: #cc2f27; --seria-2: #06874a; --seria-3: #b26a00; --seria-4: #6b3fc4;
  /* Ląd odrobinę ciemniejszy niż --plyta-2 (#f6f7f9). To warunek konieczny, nie kosmetyka:
     przy lądzie równym płycie biała jezdnia znika. */
  --mapa-lad: #eef1f5;
  --podklad-las: #d9ecdb; --podklad-zielen: #e6f0e0; --podklad-ogrodki: #d4e8cf;
  --podklad-zab-jedno: #e7e9ee; --podklad-zab-wielo: #dadee7;
  --podklad-zab-przem: #ece5db; --podklad-zab-handel: #eae2ee;
  --podklad-woda: #bcdbf3; --podklad-rzeka: #9cc6e6;
  --podklad-kolej: #9aa1ab; --podklad-kolej-obw: #ffffff;
  /* Jezdnia BIAŁA, obwódka ciemniejsza — odwrotnie niż w motywie ciemnym. Odrzucony wariant
     „obwódka biała, jezdnia szara": paleta danych ma w jasnym motywie pasmo L* 55–80, a szara
     jezdnia przy L* 54 wpada w jego środek i zlewa się z klasami środkowymi dokładnie tam,
     gdzie mapa jest najgęstsza. Biała jezdnia z ciemniejszą obwódką zawiera oba końce skali
     jasności, więc czyta się nad dowolną barwą danych.
     Autostrada i ekspresowa zachowują ciepłą obwódkę: to konwencja czytelna bez tarczy. */
  --droga-1: #ffffff; --droga-2: #ffffff; --droga-3: #ffffff;
  --droga-4: #ffffff; --droga-5: #f9fafc; --droga-6: #f4f6f9;
  --droga-1-obw: #c2a25a; --droga-2-obw: #cbb277; --droga-3-obw: #aab6c6;
  --droga-4-obw: #bbc4d1; --droga-5-obw: #cbd2dc; --droga-6-obw: #dbe0e7;
  --mapa-napis-miasto: #131920; --mapa-napis-wies: #4e5967; --mapa-napis-dzielnica: #6e7887;
  --mapa-napis-arteria: #39424f; --mapa-napis-ulica: #5a6572; --mapa-napis-ulica-mala: #78818d;
  --mapa-napis-woda: #37698a; --mapa-napis-numer: #131920;
  /* Lustro: obwódka JAŚNIEJSZA niż wszystko, przez co podpis może przejść. Rozmycie prawie
     do zera — na jasnym tle nie ma czego rozmywać, a rozmyta biel zjada literę. */
  --mapa-halo: rgba(255, 255, 255, .92); --mapa-halo-ulica: rgba(255, 255, 255, .96);
  --mapa-halo-woda: rgba(240, 248, 255, .9);
  --mapa-obrys-gmin: #8f9bab; --mapa-obrys-powiatow: #6d7987;
  --mapa-wybrana: #0b64c4; --mapa-wybrana-obw: #ffffff;
  --mapa-strefa-obrys: #ffffff; --mapa-strefa-obrys-akt: #0b0f16;
  --mapa-tarcza-a: #d7e2f2; --mapa-tarcza-dk: #f5dcd9; --mapa-tarcza-dw: #f7eec6;
  --mapa-tarcza-ramka: #7d8ca0; --mapa-tarcza-napis: #1a2230;
}
:root[data-motyw="ciemny"] { color-scheme: dark; }

/* Wymiary powłoki zależą od szerokości ekranu, więc są tokenami z zapytaniem, a nie stałymi
   w regułach: poniżej 760 px szyny nie ma (pasek kart na dole), a pasek górny jest o 2 px wyższy
   pod kciuk. */
@media (max-width: 1180px) { :root { --lista-w: 440px; } }
@media (max-width: 760px) { :root { --szyna-w: 0px; --pasek-h: 58px; } }
/* Szerszy wiersz tabel na bardzo szerokich ekranach. */
@media (min-width: 1900px) { :root { --wiersz: 28px; } }

/* ---------- podstawa ---------- */
* { box-sizing: border-box; }
/* [hidden] znaczy „nie pokazuj", ale przegrywa z każdą późniejszą regułą ustawiającą display.
   Złapałem się na tym dwa razy: obie legendy mapy naraz i przycisk „na północ" widoczny mimo
   ukrycia. Jedna reguła zamyka całą klasę tych błędów. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Tło płaskie: siatka 64 px „panelu przyrządu” odpada razem z górnym menu. Cyfry stałej
   szerokości w całym dokumencie (kolumny liczb równają się do prawej); nagłówki i duże liczby
   wracają do proporcjonalnych. font-variant, nie font-feature-settings — to drugie dziedziczy
   się „mocniej” i nie dałoby się go wyłączyć w nagłówku. */
body {
  margin: 0; background: var(--tlo); color: var(--tekst);
  font: 400 var(--t-baza)/1.5 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--akcent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--akcent); color: var(--tlo); }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: 6px; }
/* Nagłówki: Archivo rozszerzone (oś wdth przez font-stretch — font-variation-settings
   dziedziczyłoby się i blokowało ją niżej), ciasno, grubo. */
h1 { font: 720 var(--t-h1)/1.08 var(--font); font-stretch: var(--szer-naglowka);
     letter-spacing: -.025em; margin: 0 0 var(--k-2); font-variant-numeric: proportional-nums; text-wrap: balance; }
h2 { font: 680 var(--t-h2)/1.25 var(--font); font-stretch: var(--szer-naglowka);
     letter-spacing: -.02em; margin: var(--k-6) 0 var(--k-3); font-variant-numeric: proportional-nums; }
/* h3 na kartach i panelach to etykieta grupy („Rok po roku”, „Co pokazujemy”), nie trzeci
   poziom treści: drobna, szara, bez monospace'u (monospace zostaje tylko dla kodów). */
h3 { font: 650 var(--t-mini)/1.35 var(--font); letter-spacing: .01em; color: var(--sz); margin: 0 0 var(--k-2); }
p { margin: 0 0 var(--k-3); }
p.sub { color: var(--sz); font-size: var(--t-baza); max-width: 78ch; }
kbd { font: inherit; }
/* Okruszki w treści kart (makro okruszki). Na biurku te same okruchy stoją w pasku górnym,
   więc [B] chowa tę kopię; na telefonie pasek pokazuje tylko strzałkę „wstecz” i te zostają. */
.crumbs { font: 500 var(--t-mala)/1.5 var(--font); color: var(--sz); margin-bottom: var(--k-3); }
.crumbs a { color: var(--sz); }
.crumbs a:hover { color: var(--tekst); }
.crumbs .crumbs-sep { color: var(--sz-2); margin: 0 2px; }
.crumbs [aria-current] { color: var(--tekst); font-weight: 600; }

/* Ikony ze sprite'a /static/ikony.svg (RCS.ik w JS): 24×24, obrys w kolorze tekstu. */
.ik { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
      stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ik--m { width: 16px; height: 16px; }
.ik--s { width: 14px; height: 14px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ═══ koniec [A] ═══ */

/* ═══ [B] POWŁOKA — właściciel P1 ═══ */
/* Szyna po lewej (80 px, ikona z podpisem), pasek górny z okruchami i polem „Szukaj lub zapytaj”,
   na telefonie pasek kart i arkusz „Więcej”; paleta ⌘K. Menu u góry znika (docs/rcs2/SPEC.md 3).

   Kaskada: region [C] (stary arkusz) stoi PO tym regionie, więc reguła o tej samej
   specyficzności przegrałaby z nim. Dlatego selektory powłoki są celowo o stopień mocniejsze
   niż kolidujące nazwy w [C]: td.pasek (tabele) ≠ .ukl > .pasek, stare .marka .znak (kwadracik
   9 px) ≠ .szyna .marka .znak, dialog.paleta z [C] ≠ html dialog.paleta, globalne `button`
   z [C] (niebieskie tło) zerowane w każdym przycisku powłoki. */

/* ── układ: szyna | (pasek + treść + stopka) ──────────────────────────────────────────── */
.ukl { margin-left: var(--szyna-w); min-height: 100dvh; min-width: 0; display: flex; flex-direction: column; }
/* flex-kolumna + `margin: 0 auto` ze [C] ścisnęłyby <main> do szerokości treści */
.ukl > main.strona { flex: 1 0 auto; width: 100%; }
.pomin { position: fixed; left: 8px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: var(--r-pig);
  background: var(--tekst); color: var(--tlo); font-weight: 650; transform: translateY(-160%); }
.pomin:focus { transform: none; text-decoration: none; }

/* ── szyna ────────────────────────────────────────────────────────────────────────────── */
/* Tło z cieniami przewijania (warstwy „local” zasłaniają cień, gdy dalej nic nie ma): pasek
   przewijania jest ukryty, więc na niskim oknie tylko cień mówi, że niżej są jeszcze pozycje. */
.szyna { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--szyna-w);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0 14px;
  background:
    linear-gradient(var(--plyta) 30%, transparent) top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--plyta) 70%) bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--cien-krawedz), transparent) top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--cien-krawedz), transparent) bottom / 100% 12px no-repeat scroll,
    var(--plyta);
  border-right: 1px solid var(--linia);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; view-transition-name: szyna; }
.szyna::-webkit-scrollbar { display: none; }
/* Znak IleM²: monogram „m²” z konturów Archivo (templates/_znak.html, rysuje go tools/znak.py). Kafel
   w barwie tekstu, „m” wycięte barwą płyty — ten sam układ barw co dawne trzy kreski, więc oba motywy
   działają na istniejących tokenach. Dwójka to barwa logo, nie token: z dwóch niebieskich „w sprzedaży”
   ta, która ma większy kontrast do kafla (jak favicon.svg) — na jasnym kaflu (motyw ciemny) #2a78d6,
   3,7:1 (#3987e5 dawał 3,0:1), na ciemnym kaflu (motyw jasny) #3987e5, 5,3:1. Pod znakiem w szynie nazwa
   (na niskim oknie znika, niżej); na telefonie nazwa stoi obok znaku, gdy pasek nie ma strzałki
   „wstecz” (strona startowa). Dwójka w nazwie w --akcent: to tekst, więc barwa z kontrastem ≥ 4,5:1. */
.szyna .marka { width: 68px; flex: none; margin: 0 0 10px; padding: 4px 0 5px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; border-radius: 14px; color: var(--tekst); text-decoration: none; }
.szyna .marka:hover { text-decoration: none; }
.szyna .marka .znak, .pasek .marka-m .znak { width: 34px; height: 34px; flex: none; display: block; overflow: visible; }
.znak .znak-t { fill: var(--tekst); }
.znak .znak-m { fill: var(--plyta); }
.znak .znak-2 { fill: #2a78d6; }
@media (prefers-color-scheme: light) { :root:not([data-motyw="ciemny"]) .znak .znak-2 { fill: #3987e5; } }
:root[data-motyw="jasny"] .znak .znak-2 { fill: #3987e5; }
.szyna .marka-slowo, .pasek .marka-slowo { display: block; font: 760 13px/1 var(--font); font-stretch: 112%;
  letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: proportional-nums; }
.szyna .marka-slowo span, .pasek .marka-slowo span { color: var(--akcent); }
/* Nazwa w stopce (base.html, blok stopka): pierwsza linijka nad źródłami. */
.stopka .stopka-marka { margin: 0 0 6px; color: var(--sz); }
.stopka .stopka-marka b { color: var(--tekst); font-weight: 720; font-stretch: 112%; letter-spacing: -.01em; }
.stopka .stopka-marka b span { color: var(--akcent); }
.szyna .poz { position: relative; width: 68px; min-height: 58px; height: auto; flex: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 0; border-radius: 14px; background: none; color: var(--sz); cursor: pointer;
  font: 560 var(--t-mikro)/1.2 var(--font); letter-spacing: .01em; text-decoration: none; }
.szyna .poz:hover { color: var(--tekst); text-decoration: none; filter: none; }
.szyna .poz:active { transform: none; }
.szyna .poz .pod { display: block; max-width: 64px; text-align: center; line-height: 1.15; text-wrap: balance; } /* „Sprawdź adres” łamie się na 2 linie - wyśrodkowane, nie od lewej krawędzi szyny */
.szyna .poz .kap { width: 52px; height: 32px; display: grid; place-items: center; border-radius: var(--r-pig);
  transition: background var(--szyb) var(--krzywa); }
.szyna .poz:hover .kap, .szyna .poz[aria-expanded="true"] .kap { background: var(--plyta-3); }
.szyna .poz[aria-current="page"], .szyna .poz[aria-expanded="true"] { color: var(--tekst); font-weight: 700; }
.szyna .poz[aria-current="page"] .kap { background: var(--akcent-tlo); color: var(--akcent); }
.szyna .znacznik-nowe { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--etap-sprzedaz); box-shadow: 0 0 0 2px var(--plyta); }
.szyna .odstep { flex: 1 1 0; min-height: 8px; }
.szyna .poz--drugi { min-height: 52px; }
.szyna .licz { position: absolute; top: 5px; right: 8px; min-width: 16px; padding: 0 5px; border-radius: 8px;
  background: var(--plyta-4); color: var(--tekst); font: 700 10px/16px var(--font); text-align: center; }
/* Motyw: trzy ikony w znaczniku, widoczna ta dla bieżącego stanu — wybiera ją arkusz według
   atrybutu, który skrypt w <head> ustawił przed pierwszą klatką, więc ikona nie mruga. */
[data-motyw-przelacz] .ik-m { display: none; }
:root:not([data-motyw]) [data-motyw-przelacz] .ik-m--auto,
:root[data-motyw="ciemny"] [data-motyw-przelacz] .ik-m--ciemny,
:root[data-motyw="jasny"] [data-motyw-przelacz] .ik-m--jasny { display: block; }

/* ── menu wysuwane przy szynie: Analizy, Twoje ──────────────────────────────────────── */
.wysuw { position: fixed; left: calc(var(--szyna-w) + 8px); top: 80px; z-index: 45; width: 268px;
  max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; padding: 8px;
  border-radius: var(--r-3); background: var(--plyta); box-shadow: var(--cien-plyw);
  visibility: hidden; opacity: 0; transform: translateX(-6px);
  transition: opacity var(--szyb), transform var(--sred) var(--krzywa), visibility 0s linear var(--sred); }
.wysuw.otwarte { visibility: visible; opacity: 1; transform: none;
  transition: opacity var(--szyb), transform var(--sred) var(--krzywa); }
.wysuw .nagl { margin: 0; padding: 8px 10px 6px; font-size: var(--t-mini); color: var(--sz); font-weight: 650; }
.wysuw a { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: 10px;
  color: var(--tekst); text-decoration: none; }
.wysuw a:hover, .wysuw a:focus-visible { background: var(--plyta-3); text-decoration: none; }
.wysuw a .ik { color: var(--sz); margin-top: 1px; }
.wysuw a b { display: block; font-weight: 620; font-size: var(--t-baza); }
.wysuw a span { display: block; min-width: 0; color: var(--sz); font-size: var(--t-mini); line-height: 1.35; }
.wysuw a span b { color: var(--tekst); }
.wysuw .notka { padding: 4px 10px 10px; margin: 0; }
.wysuw .sekcja-t { margin: 6px 10px 2px; font-size: var(--t-mini); color: var(--sz-2); font-weight: 650; }
.lista-m .sekcja-t { margin: 12px 4px 0; font-size: var(--t-mini); color: var(--sz-2); font-weight: 650; }

/* ── pasek górny ──────────────────────────────────────────────────────────────────────── */
/* Kolumny 1fr | pole | 1fr: pole stoi na środku, dopóki okruchy mieszczą się w swojej połowie.
   Dłuższa ścieżka rozpycha lewą kolumnę (1fr = minmax(auto, 1fr), a minimum to pełna szerokość
   okruchów), pole przesuwa się w prawo i nic się nie ucina. Wcześniej minmax(0, 1fr) po obu
   stronach dawało okruchom stałe ~384 px przy 1440 px, a pusta kolumna akcji zajmowała drugie
   tyle: lokal w Krakowie miał ogniwa po 2–3 litery (przegląd P1). Górną granicę okruchów liczy
   .pasek-l z jednostek kontenera (cqw), żeby pole nigdy nie zeszło poniżej swojego minimum. */
.ukl > .pasek { position: sticky; top: 0; z-index: 30; flex: none; height: var(--pasek-h);
  display: grid; grid-template-columns: 1fr minmax(280px, 520px) 1fr;
  container-type: inline-size; overflow-x: clip;
  align-items: center; gap: 16px; padding: 0 20px;
  background: color-mix(in srgb, var(--tlo) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--linia); view-transition-name: pasek; }
.pasek .pasek-l { display: flex; align-items: center; gap: 6px; max-width: 55vw; max-width: calc(100cqw - 312px); }
.ukl > .pasek:has(> .akcje:not(:empty)) .pasek-l { max-width: calc(100cqw - 552px); }   /* 240 px na akcje */
.pasek .okruchy { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden;
  font-size: var(--t-mala); color: var(--sz); white-space: nowrap; }
/* Gdyby ścieżka i tak się nie zmieściła: najpierw skracają się ogniwa pośrednie, „Polska”
   i bieżące ogniwo trzymają się najdłużej. Ucięte ogniwo dostaje title (rcs-nav.js). */
.pasek .okruchy a { color: var(--sz); flex: 0 1 auto; min-width: 3ch; overflow: hidden; text-overflow: ellipsis; }
.pasek .okruchy > :first-child { flex-shrink: 0; }
.pasek .okruchy a:hover { color: var(--tekst); }
.pasek .okruchy .sep { color: var(--sz-2); flex: none; }
.pasek .okruchy [aria-current] { color: var(--tekst); font-weight: 600; flex: 0 .2 auto; min-width: 4ch;
  overflow: hidden; text-overflow: ellipsis; }
.pasek .wstecz-m, .pasek .marka-m { display: none; width: 40px; height: 40px; flex: none; place-items: center;
  border-radius: 12px; color: var(--tekst); text-decoration: none; }
.pasek .marka-m .znak { width: 30px; height: 30px; }
.pasek .marka-m .marka-slowo { font-size: 17px; }
.pasek .omni { height: 40px; width: 100%; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 8px 0 14px; border-radius: var(--r-pig); border: 1px solid var(--linia-3);
  background: var(--plyta); color: var(--sz); box-shadow: var(--cien-1); cursor: text;
  font: 400 var(--t-baza)/1 var(--font); text-decoration: none; transition: border-color var(--szyb); }
.pasek .omni:hover { border-color: var(--sz-2); text-decoration: none; }
.pasek .omni .ik { color: var(--sz); }
.pasek .omni .tekst { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pasek .omni--pytanie .tekst { color: var(--tekst); }
.klaw { flex: none; padding: 1px 6px; border: 1px solid var(--linia-3); border-radius: 6px; background: var(--plyta-2);
  color: var(--sz); font: 600 var(--t-mikro)/1.5 var(--font); }
.pasek .akcje { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
/* Okruchy są w pasku, więc ich kopia z treści karty (makro okruszki) byłaby na biurku drugi raz.
   Zostaje na telefonie, gdzie pasek ma tylko strzałkę do rodzica, na wydruku (pasek się nie drukuje)
   i wtedy, gdy ścieżka w pasku jest ucięta (klasa okruchy-uciete z pomiaru w rcs-nav.js) —
   pełna ścieżka ma być czytelna przynajmniej w jednym miejscu. P4 przeniesie okruchy do bloku
   i wtedy ta reguła przestanie mieć co chować. */
@media screen and (min-width: 761px) {
  .ukl:has(.okruchy[data-z-okruszkow]):not(.okruchy-uciete) > main .crumbs { display: none; }
}

/* ── przyciski i chipy (powłoka, paleta, akcje w pasku; karty biorą je stąd) ──────────── */
.przycisk { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; margin: 0;
  border-radius: var(--r-pig); border: 1px solid var(--linia-3); background: var(--plyta); color: var(--tekst);
  font: 600 var(--t-mala)/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer; filter: none; }
.przycisk:hover { background: var(--plyta-3); text-decoration: none; filter: none; }
.przycisk--glowny { background: var(--tekst); color: var(--tlo); border-color: transparent; }
.przycisk--glowny:hover { background: var(--tekst); opacity: .88; }
.przycisk--ikona { width: 36px; padding: 0; justify-content: center; }
.przycisk--maly { height: 30px; padding: 0 11px; font-size: var(--t-mini); }
.chip { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px;
  border-radius: var(--r-pig); border: 1px solid var(--linia-3); background: var(--plyta); color: var(--tekst);
  font: 560 var(--t-mala)/1 var(--font); white-space: nowrap; }
.rzad { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── strony-mapy: ekran stoi, przewija się mapa albo lista ──────────────────────────────
   body.tryb-mapa (RCS 2: /inwestycje/…) i body.pelny-ekran (dzisiejsza /mapa) znaczą to samo.
   Blokada przewijania dokumentu TYLKO tutaj; klasę <body> przepisuje rcs-nav.js przy każdej
   podmianie treści — bez tego blokada zostawała na następnych stronach (4fee41d, 25.09). */
body.tryb-mapa, body.pelny-ekran { height: 100dvh; overflow: hidden; overscroll-behavior: none;
  display: flex; flex-direction: column; }
body.tryb-mapa > .ukl, body.pelny-ekran > .ukl { flex: 1 1 auto; min-height: 0; }
body.tryb-mapa .ukl > main.strona, body.pelny-ekran .ukl > main.strona { flex: 1 1 auto; min-height: 0;
  padding: 0; max-width: none; width: 100%; }
body.tryb-mapa .stopka-w, body.pelny-ekran .stopka-w { display: none; }

/* ── telefon: pasek kart, arkusz „Więcej” ─────────────────────────────────────────────── */
.dol { display: none; }
dialog.arkusz-m { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 86dvh;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 22px 22px 0 0;
  background: var(--plyta); color: var(--tekst); box-shadow: var(--cien-plyw);
  overflow: auto; overscroll-behavior: contain; }
dialog.arkusz-m::backdrop { background: rgba(0, 0, 0, .4); }
/* Uchwyt: belka 40×5 px, ale pole dotyku 64×44 px (SPEC 7) — ujemne marginesy trzymają układ. */
dialog.arkusz-m .uchwyt { display: block; width: 64px; height: 44px; margin: -8px auto -14px; padding: 0; border: 0;
  background: none; cursor: pointer; position: relative; filter: none; transform: none; }
dialog.arkusz-m .uchwyt::before { content: ""; position: absolute; left: 12px; right: 12px; top: 13px; height: 5px;
  border-radius: 3px; background: var(--linia-3); }
dialog.arkusz-m .arkusz-t { margin: 14px 4px 6px; font: 650 var(--t-mini)/1.35 var(--font); color: var(--sz); }
.siatka-nar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.siatka-nar a { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 12px 6px;
  border-radius: 14px; background: var(--plyta-2); color: var(--tekst); font-size: var(--t-mini); font-weight: 600;
  text-decoration: none; }
.siatka-nar a:hover { background: var(--plyta-3); text-decoration: none; }
.siatka-nar a .ik { width: 22px; height: 22px; color: var(--sz); }
.lista-m > a, .lista-m > button { display: flex; width: 100%; height: auto; justify-content: space-between; align-items: center;
  gap: 12px; margin: 0; padding: 12px 4px; min-height: 48px; border: 0; border-bottom: 1px solid var(--linia);
  border-radius: 0; background: none; color: var(--tekst); font: 400 var(--t-tresc)/1.3 var(--font); text-align: left;
  text-decoration: none; cursor: pointer; filter: none; transform: none; }
.lista-m > a:hover, .lista-m > button:hover { text-decoration: none; background: none; }
.lista-m > a .ik, .lista-m > button .ik { color: var(--sz); }
.lista-m > button .kap { display: inline-flex; }
.lista-m a small { display: block; color: var(--sz); font-size: var(--t-mini); }
.lista-m .notka { padding: 0 4px; }
.notka { color: var(--sz); font-size: var(--t-mala); line-height: 1.5; }
dialog.arkusz-m .zrodla { margin: 16px 4px 0; font-size: var(--t-mini); }

/* ── paleta „Szukaj lub zapytaj” ──────────────────────────────────────────────────────── */
/* inset z dołem „auto”: przy top i bottom naraz wysokość rozciągała się do 78vh nawet przy dwóch wynikach */
html dialog.paleta { position: fixed; inset: 9vh 0 auto; margin: 0 auto; padding: 0;
  width: min(720px, calc(100vw - 32px)); max-width: none; max-height: 78vh; height: auto;
  border: 0; border-radius: var(--r-4); background: var(--plyta); color: var(--tekst);
  box-shadow: var(--cien-plyw); overflow: hidden; }
html dialog.paleta[open] { display: flex; flex-direction: column; }
/* ::backdrop nie w każdej przeglądarce dziedziczy zmienne z :root — stąd barwa zapasowa */
html dialog.paleta::backdrop { background: color-mix(in srgb, var(--tlo, #0a0d12) 55%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.paleta .pole { flex: none; display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 12px 0 18px;
  border-bottom: 1px solid var(--linia); color: var(--sz); }
html dialog.paleta .pole input { flex: 1; min-width: 0; height: 60px; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--tekst); box-shadow: none; outline: 0; font: 500 17px/1.2 var(--font); }
html dialog.paleta .pole input::placeholder { color: var(--sz-2); }
html dialog.paleta .pole input::-webkit-search-cancel-button { display: none; }
dialog.paleta .wyniki { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px; }
dialog.paleta .sekcja { padding: 10px 10px 4px; font-size: var(--t-mini); color: var(--sz); font-weight: 650; }
dialog.paleta .wynik { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px;
  color: var(--tekst); text-decoration: none; cursor: pointer; }
dialog.paleta .wynik[aria-selected="true"], dialog.paleta .wynik:hover { background: var(--plyta-3); text-decoration: none; }
dialog.paleta .wynik > .ik { color: var(--sz); }
dialog.paleta .wynik .t { flex: 1; min-width: 0; }
dialog.paleta .wynik b { font-weight: 620; overflow-wrap: anywhere; }
dialog.paleta .wynik mark { background: none; color: var(--akcent); font-weight: 700; }
dialog.paleta .wynik .m { display: block; color: var(--sz); font-size: var(--t-mini); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
dialog.paleta .wynik .w { flex: none; color: var(--sz); font-size: var(--t-mini); white-space: nowrap; }
dialog.paleta .uwaga { margin: 4px 10px 6px; color: var(--sz); font-size: var(--t-mini); }
dialog.paleta .pusto { margin: 0; padding: 18px; }
/* „Rozumiem to tak”: tak parser reguł przeczytał zdanie; przycisk prowadzi do listy z tym filtrem. */
dialog.paleta .rozumiem { margin: 6px 6px 8px; padding: 14px; border-radius: var(--r-3);
  background: var(--plyta-2); border: 1px solid var(--linia); }
dialog.paleta .rozumiem .gl { display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: var(--t-mini); font-weight: 650; color: var(--sz); }
dialog.paleta .rozumiem .chip { height: 30px; cursor: default; }
dialog.paleta .pominalem { margin: 10px 0 0; font-size: var(--t-mala); color: var(--sz); }
dialog.paleta .pominalem b { color: var(--tekst); font-weight: 600; }
dialog.paleta .dol-r { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
dialog.paleta .wynik.wynik--cta { display: inline-flex; width: auto; height: 38px; padding: 0 16px;
  border-radius: var(--r-pig); background: var(--tekst); color: var(--tlo); font-weight: 650; }
dialog.paleta .wynik.wynik--cta[aria-selected="true"], dialog.paleta .wynik.wynik--cta:hover {
  background: var(--tekst); outline: 2px solid var(--akcent); outline-offset: 2px; }
dialog.paleta .dol-r .przycisk[aria-selected="true"] { outline: 2px solid var(--akcent); outline-offset: 2px; }

/* ── bez JS (brak klasy „js” na <html>) ─────────────────────────────────────────────────
   „Analizy” i „Więcej” są odnośnikami do kotwic: bez skryptu panel i arkusz pokazuje :target,
   więc każda strona jest osiągalna z powłoki (SPEC 1.1). Przyciski, które bez skryptu nic nie
   robią (Twoje, Motyw, uchwyt arkusza), znikają zamiast udawać. */
html:not(.js) .wysuw:target { visibility: visible; opacity: 1; transform: none;
  transition: opacity var(--szyb), transform var(--sred) var(--krzywa); }
html:not(.js) dialog.arkusz-m:target { display: block; z-index: 60; }
html:not(.js) [data-wysuw="twoje"], html:not(.js) [data-motyw-przelacz],
html:not(.js) dialog.arkusz-m .uchwyt, html:not(.js) .tylko-js { display: none; }

/* ── niskie okno: szyna zwarta ──────────────────────────────────────────────────────────
   Na laptopie z paskami przeglądarki i na telefonie w poziomie (844×390) dolne pozycje chowały się
   pod krawędzią. Od 27.09 pozycji jest osiem (Raport, Szacunek, Mapa, Ceny, Nowe, Więcej, Twoje, Motyw;
   ok. 620 px ze znakiem), więc zwarta szyna wchodzi od 760 px wysokości: pozycje po 46 px (ok. 480 px
   całości) i znak bez nazwy, do 540 px same ikony po 40 px (ok. 390 px) — podpis zostaje w DOM-ie dla
   czytnika (ukryty wizualnie, nie display: none). Znak zostaje zawsze: to jedyna droga na start z szyny
   (pozycji „Start” już nie ma), więc przy niskim oknie maleje, a nie znika. */
@media (min-width: 761px) and (max-height: 760px) {
  .szyna { gap: 2px; padding: 8px 0; }
  .szyna .marka { margin-bottom: 6px; padding: 3px 0; }
  .szyna .marka-slowo { display: none; }
  .szyna .poz { min-height: 46px; gap: 2px; }
  .szyna .poz .kap { height: 28px; }
}
@media (min-width: 761px) and (max-height: 540px) {
  .szyna { padding: 4px 0; }
  .szyna .marka { margin-bottom: 2px; padding: 2px 0; }
  .szyna .marka .znak { width: 28px; height: 28px; }
  .szyna .poz { min-height: 40px; }
  .szyna .poz .pod { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .szyna .odstep { min-height: 0; }
}
/* telefon w poziomie (844×390): znak i osiem ikon po 36 px bez odstępów mieszczą się w 390 px z zapasem */
@media (min-width: 761px) and (max-height: 440px) {
  .szyna { gap: 0; padding: 2px 0; }
  .szyna .poz { min-height: 36px; }
  .szyna .poz .kap { height: 26px; }
}

/* ── przejścia między stronami: powłoka stoi, zmienia się treść ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(szyna), ::view-transition-new(szyna),
  ::view-transition-old(pasek), ::view-transition-new(pasek),
  ::view-transition-old(dol), ::view-transition-new(dol) { animation: none; }
  dialog.arkusz-m[open] { animation: arkusz-wjazd var(--wolno) var(--krzywa); }
  html dialog.paleta[open] { animation: paleta-wjazd var(--sred) var(--krzywa); }
  @keyframes arkusz-wjazd { from { transform: translateY(100%); } }
  @keyframes paleta-wjazd { from { opacity: 0; transform: translateY(-6px) scale(.99); } }
}

@media (max-width: 1180px) {
  .ukl > .pasek { grid-template-columns: 1fr minmax(220px, 360px) 1fr; }
  .pasek .pasek-l { max-width: calc(100cqw - 252px); }
  .ukl > .pasek:has(> .akcje:not(:empty)) .pasek-l { max-width: calc(100cqw - 492px); }
  /* Wąsko ścieżka karty (Polska / gmina / ulica / budynek / lokal) ucinała każde ogniwo do dwóch
     liter; „Polska” oddaje miejsce jako pierwsza — start jest i tak pod znakiem w szynie. */
  .pasek .okruchy[data-z-okruszkow] > a:first-child, .pasek .okruchy[data-z-okruszkow] > a:first-child + .sep { display: none; }
}
@media (max-width: 760px) {
  .szyna, .wysuw { display: none; }
  .ukl { padding-bottom: calc(var(--dol-h) + env(safe-area-inset-bottom, 0px)); }
  .ukl > .pasek { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 0 12px; }
  .pasek .pasek-l, .ukl > .pasek:has(> .akcje:not(:empty)) .pasek-l { max-width: none; }
  .pasek .okruchy { display: none; }
  /* cele dotyku ≥ 44 px (SPEC 7): strzałka „wstecz”, znak i pole */
  .pasek .wstecz-m, .pasek .marka-m { display: grid; width: 44px; height: 44px; }
  .pasek .marka-m { display: flex; align-items: center; gap: 9px; width: auto; min-width: 44px; padding: 0 4px 0 7px; }
  .pasek .omni { height: 44px; }
  .pasek .omni .klaw { display: none; }
  .pasek .akcje:empty { display: none; }
  .pasek .akcje .przycisk:not(.zawsze) { display: none; }
  /* sześć kart (Raport, Szacunek, Mapa, Ceny, Nowe, Więcej): przy 360 px to 60 px na kartę - kapsuła 54 px
     i najdłuższy podpis („Szacunek”) mieszczą się bez ucinania */
  .dol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: fixed; inset: auto 0 0 0; z-index: 50;
    height: calc(var(--dol-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--plyta) 92%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--linia);
    view-transition-name: dol; }
  .dol a, .dol button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--sz);
    font: 580 var(--t-mikro)/1.2 var(--font); text-decoration: none; cursor: pointer; filter: none; transform: none; }
  .dol a:hover { text-decoration: none; }
  .dol .kap { width: 54px; height: 30px; border-radius: 15px; display: grid; place-items: center; }
  .dol [aria-current="page"] { color: var(--tekst); font-weight: 700; }
  .dol [aria-current="page"] .kap { background: var(--akcent-tlo); color: var(--akcent); }
  /* Szuflady mapy (panel warstw, panel budynku) stoją na telefonie przy dolnej krawędzi
     ekranu — teraz jest tam pasek kart, więc wjeżdżają nad niego, a nie pod. */
  body.pelny-ekran .mapa-panel, body.pelny-ekran .panel,
  body.tryb-mapa .mapa-panel, body.tryb-mapa .panel { bottom: calc(var(--dol-h) + env(safe-area-inset-bottom, 0px)); }
  /* paleta na telefonie: cały ekran, pole 16 px (mniejsze każe iOS-owi przybliżać stronę) */
  html dialog.paleta { inset: 0; margin: 0; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  dialog.paleta .pole { height: 58px; padding: 0 10px 0 16px; }
  html dialog.paleta .pole input { font-size: 17px; height: 56px; }
}

/* ── szyna na całą wysokość strony (DECYZJE „Strona główna v2”) ─────────────────────────────
   Szyna jest przyklejona do okna (fixed, inset 0 góra i dół), ale wszystko, co maluje stronę w całości — zrzut
   całej strony, podgląd karty, odbicie przy przewinięciu za koniec w Safari — rysuje elementy fixed tylko na
   wysokość okna, więc szyna urywała się ok. 900 px od góry. Kolumna szyny jest teraz także w tle dokumentu (ta sama
   płyta i linia), więc pod szyną zawsze jest jej tło. Tylko na ekranie: na papierze i w PDF szyny nie ma. */
@media screen and (min-width: 761px) {
  body { background: linear-gradient(90deg, var(--plyta) calc(var(--szyna-w) - 1px), var(--linia) 0 var(--szyna-w),
    var(--tlo) 0) var(--tlo); }
}

/* ── pole „Szukaj” jako ikona (strona główna) ───────────────────────────────────────────────
   Na starcie jest jedno główne pole — raport. Pole w pasku zostaje, ale jako mały przycisk z lupą (na biurku
   z podpisem i ⌘K) po prawej: klik, ⌘K, Ctrl+K i „/” otwierają paletę jak na każdej stronie (base.html,
   omni--ikona tylko przy sekcji „start” bez pytania w polu). */
.ukl > .pasek:has(> .omni--ikona) { grid-template-columns: minmax(0, 1fr) auto; }
.ukl > .pasek:has(> .omni--ikona) > .akcje:empty { display: none; }
.pasek .omni.omni--ikona { width: auto; height: 36px; justify-self: end; gap: 8px; padding: 0 8px 0 12px;
  background: transparent; box-shadow: none; cursor: pointer; color: var(--sz); }
.pasek .omni.omni--ikona:hover { background: var(--plyta); color: var(--tekst); }
.pasek .omni.omni--ikona:hover .ik { color: var(--tekst); }
.pasek .omni.omni--ikona .tekst { flex: none; font-weight: 560; }
@media (max-width: 760px) {
  .pasek .omni.omni--ikona { width: 44px; height: 44px; padding: 0; justify-content: center; border-color: transparent; }
  .pasek .omni.omni--ikona .ik { width: 20px; height: 20px; color: var(--tekst); }
  .pasek .omni.omni--ikona .tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; }
}

/* ── druk ─────────────────────────────────────────────────────────────────────────────────
   Szyna jest przyklejona (fixed), więc drukowała się na każdej stronie i zabierała 80 px szerokości
   (ucięta kolumna „Typowa cena” na karcie gminy), a „Przejdź do treści” leżał na treści. Na papierze
   zostaje sama treść ze stopką źródeł; ścieżkę niosą okruszki w treści karty (reguła wyżej chowa je
   tylko na ekranie). */
@media print {
  .szyna, .wysuw, .dol, .pomin, .ukl > .pasek, dialog, .pasek-postepu { display: none !important; }
  .ukl { margin-left: 0; padding-bottom: 0; min-height: 0; }
  body.tryb-mapa, body.pelny-ekran { height: auto; overflow: visible; }
}

/* ═══ koniec [B] ═══ */

/* ═══ [C] KOMPONENTY KART I NARZĘDZI — właściciel P4 ═══ */
/* ─── [C1] START I GMINA — właściciel P4a (tylko nowe reguły tych stron) ─── */
/* Start (/) i karta gminy (/gmina/{teryt}) w powłoce RCS 2 (docs/rcs2/SPEC.md 6.1, 6.5).
   Wszystko zawężone do <main class="strona start"> albo <main class="strona karta-gminy">: [C1] stoi
   w kaskadzie PRZED starą treścią regionu [C], więc reguła o tej samej specyficzności przegrałaby z nią —
   stąd korzeń main.… w każdym selektorze, a zarazem nic stąd nie wycieka na inne strony.
   Komponenty makr rynku pierwotnego (.kafle-i, .odsylacz, .etap, .miniatura) bierzemy z regionu [D]. */

/* ── wspólne dla obu stron: liczby Archivo z cyframi tabelarycznymi zamiast monospace (SPEC 4.2) ── */
:is(main.start, main.karta-gminy) .karty { gap: 0; background: var(--plyta); border-radius: var(--r-3); }
/* Linie między kaflami z cienia, nie z tła siatki: pusta komórka przy niepełnym ostatnim rzędzie
   (5 kafli flipów w 4 kolumnach, 3 kafle w 2 kolumnach telefonu) ma tło płyty, a nie szarą dziurę. */
:is(main.start, main.karta-gminy) .karty > .karta { box-shadow: -1px 0 0 var(--linia), 0 -1px 0 var(--linia); }
:is(main.start, main.karta-gminy) .karta > b { font: 680 var(--t-kpi)/1.12 var(--font); font-stretch: 104%;
  letter-spacing: -.02em; word-spacing: normal; white-space: nowrap; font-variant-numeric: normal; }
:is(main.start, main.karta-gminy) .karta .zmiana { font: 600 var(--t-mala)/1.3 var(--font); word-spacing: normal;
  font-variant-numeric: tabular-nums; }
:is(main.start, main.karta-gminy) .owijka { border-radius: var(--r-3); }
:is(main.start, main.karta-gminy) th, :is(main.start, main.karta-gminy) td { height: var(--wiersz-karta); }
:is(main.start, main.karta-gminy) thead th { height: 38px; font: 600 var(--t-mini)/1.25 var(--font); text-transform: none;
  letter-spacing: 0; color: var(--sz); }
:is(main.start, main.karta-gminy) td:not(.l), :is(main.start, main.karta-gminy) .liczba { font-family: var(--font);
  font-variant-numeric: tabular-nums; letter-spacing: 0; word-spacing: normal; }
:is(main.start, main.karta-gminy) td.wzrost::before, :is(main.start, main.karta-gminy) td.spadek::before { font-size: 9px; }
:is(main.start, main.karta-gminy) .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
main.karta-gminy .owijka.gm-gesta th, main.karta-gminy .owijka.gm-gesta td { height: 28px; }
main.karta-gminy table.przekroj td { height: 24px; }
/* Przekroje zawsze w kolumnach ≥ 330 px: ogólna reguła telefonu dla .karty (150 px) wygrywała z nimi
   i tabelki 300 px szerokie ucinały się w kartach po 178 px (tak było też przed RCS 2). */
main.karta-gminy .karty.karty--przekroje { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
main.karta-gminy .karty--przekroje > .karta { overflow-x: auto; }
main.karta-gminy table.przekroj td b { font: 650 var(--t-mala)/1 var(--font); font-variant-numeric: tabular-nums; }
main.karta-gminy .plakietka { font: 560 var(--t-mini)/1.3 var(--font); text-transform: none; letter-spacing: 0;
  border-radius: 6px; padding: 1px 7px; }
:is(main.start, main.karta-gminy) .chip { text-decoration: none; }
/* /porownaj, pusty stan (UX B1): gotowe zestawienia */
.por-przyklady { margin: 8px 0 24px; }
.por-przyklady .chip { height: auto; min-height: 36px; text-decoration: none; }
.por-przyklady .chip:hover { background: var(--plyta-3); text-decoration: none; }
:is(main.start, main.karta-gminy) .chip:hover { background: var(--plyta-3); }
:is(main.start, main.karta-gminy) .przycisk .ile { font-weight: 600; opacity: .72; }

/* Odsyłacz z regionu [D] w wąskiej kolumnie: etap zawija się pod nazwą zamiast wchodzić pod cenę. */
:is(main.start, main.karta-gminy) .odsylacz .ods-e .etap { white-space: normal; }

/* Zdania do palety (start: przykłady, gmina: „Zapytaj zdaniem”): odnośnik do listy z ?q= bez JS,
   z JS klik otwiera paletę z tym zdaniem (data-paleta, rcs-paleta.js). */
:is(main.start, main.karta-gminy) :is(.st-przyklad, .gm-zdanie) { display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 8px 12px; border-radius: var(--r-2); border: 1px solid var(--linia); background: var(--plyta);
  color: var(--tekst); font: 450 var(--t-mala)/1.35 var(--font); text-decoration: none; }
:is(main.start, main.karta-gminy) :is(.st-przyklad, .gm-zdanie):hover { background: var(--plyta-2); border-color: var(--linia-3);
  text-decoration: none; }
:is(main.start, main.karta-gminy) :is(.st-przyklad, .gm-zdanie) .ik { color: var(--sz); }
/* liczba inwestycji, które zdanie znajduje (rcs-start.js z /api/zapytaj) — po prawej, szarym */
main.karta-gminy .gm-zdanie-ile { margin-left: auto; padding-left: 8px; color: var(--sz); font-size: var(--t-mini); }
main.karta-gminy .gm-zdanie-ile:empty { display: none; }

/* ── start (strona główna v2) ───────────────────────────────────────────────────────────── */
/* 27.09.2026 (DECYZJE „Strona główna v2”): hasło z jednym zdaniem korzyści i JEDNO pole raportu (pole w pasku jest
   tu tylko ikoną), pod nim dwa przykłady; „Co sprawdzisz w raporcie”: pięć działów opisanych korzyścią obok podglądu
   strony 1 przykładowego PDF; „Ceny i rynek”: cztery karty jednego wzoru (ikona, tytuł, zdanie, fakt z podpisem)
   i skróty miast. Kolory i kroje z tokenów [A], więc oba motywy bez osobnych reguł. Pierwszy ekran to hasło, pole
   i przykłady — także na niskim oknie laptopa i na telefonie nad paskiem kart. */
main.start .st { max-width: 1120px; margin: 0 auto; padding: clamp(16px, 8vh - 24px, 64px) 0 16px;
  display: grid; gap: clamp(64px, 10vh, 112px); }
main.start .st > * { min-width: 0; }

/* hasło i pole */
main.start .st-hero { display: grid; justify-items: center; gap: 18px; text-align: center; }
main.start .st-hero > * { margin: 0; min-width: 0; max-width: 100%; }
main.start .st-h1 { font: 760 clamp(38px, 1.1rem + 3.7vw, 70px)/1.02 var(--font); font-stretch: var(--szer-naglowka);
  letter-spacing: -.04em; text-wrap: balance; }
main.start .st-lead { max-width: 40ch; color: var(--sz); font-size: clamp(16px, .8rem + .45vw, 19px); line-height: 1.5;
  text-wrap: balance; }
main.start .st-szukaj { position: relative; width: min(720px, 100%); margin-top: 10px; text-align: left; }
main.start .st-pole { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 20px;
  border: 1px solid var(--linia-3); border-radius: 20px; background: var(--plyta);
  box-shadow: var(--cien-1), 0 18px 48px -28px var(--cien-krawedz); transition: border-color var(--szyb), box-shadow var(--szyb); }
main.start .st-pole:hover { border-color: var(--sz-2); }
main.start .st-pole:focus-within { border-color: var(--akcent); box-shadow: 0 0 0 4px var(--akcent-cien); }
main.start .st-pole > .ik { width: 22px; height: 22px; flex: none; color: var(--sz); }
main.start .st-pole input { flex: 1; min-width: 0; height: 60px; padding: 0 0 0 2px; border: 0; border-radius: 0;
  background: transparent; color: var(--tekst); font: 450 18px/1 var(--font); outline: none; }
main.start .st-pole input:focus { box-shadow: none; }
main.start .st-pole input::placeholder { color: var(--sz-2); }
main.start .st-pole input::-webkit-search-cancel-button { display: none; }
main.start .st-na-mapie { flex: none; height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px;
  border-radius: 13px; color: var(--sz); font: 600 var(--t-mala)/1 var(--font); text-decoration: none; }
main.start .st-na-mapie:hover { background: var(--plyta-3); color: var(--tekst); text-decoration: none; }
main.start .st-pole .przycisk { flex: none; height: 48px; padding: 0 24px; border-radius: 14px; font-size: var(--t-tresc); }
main.start .st-podpowiedzi { position: absolute; left: 0; right: 0; top: 100%; z-index: 25; margin: 6px 0 0; padding: 5px;
  list-style: none; border: 1px solid var(--linia-3); border-radius: 16px; background: var(--plyta); box-shadow: var(--cien-2);
  max-height: 60vh; overflow-y: auto; }
main.start .st-podpowiedzi a { display: grid; gap: 2px; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  color: var(--tekst); text-decoration: none; }
main.start .st-podpowiedzi a:hover, main.start .st-podpowiedzi [aria-selected="true"] > a { background: var(--plyta-3); }
main.start .st-podpowiedzi a span { color: var(--sz); font-size: var(--t-mala); }
main.start .st-podpowiedzi .st-pp-info { padding: 10px 12px; color: var(--sz); font-size: var(--t-mala); }

/* ── strona główna v3 (23.10.2026): to, czego ludzie szukają, od razu ─────────────────────────── */
main.start .st-h1 { font-size: clamp(34px, 1.1rem + 2.6vw, 58px); max-width: 26ch; }
main.start .st-h2--mala { font-size: clamp(20px, 1rem + .5vw, 24px); letter-spacing: -.02em; }
main.start .st-pod { margin: 0; color: var(--sz); font-size: var(--t-mala); line-height: 1.45; }
main.start .st-zm { font-weight: 700; white-space: nowrap; }
main.start .st-zm.wzrost { color: var(--wzrost); }
main.start .st-zm.spadek { color: var(--spadek); }
main.start .st-zm.wzrost::before { content: "▲ "; font-size: .7em; vertical-align: 1px; }
main.start .st-zm.spadek::before { content: "▼ "; font-size: .7em; vertical-align: 1px; }
/* sześć rzeczy z raportu: ikony z jednym słowem pod nagłówkiem */
main.start .st-co { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
main.start .st-co li { display: inline-flex; align-items: center; gap: 7px; color: var(--sz); font: 600 var(--t-baza)/1.2 var(--font); }
main.start .st-co .ik { width: 22px; height: 22px; color: var(--akcent); }
/* przykładowy raport jako obrazki: pasek kafli (telefon: przewijany z przyciąganiem, biurko: siatka) */
main.start .st-przyk { display: grid; gap: 10px; width: 100%; margin-top: 8px; text-align: left; }
main.start .st-przyk-l { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
main.start .st-pk { display: grid; gap: 2px; min-width: 0; padding: 6px 6px 10px; border: 1px solid var(--linia); border-radius: 16px;
  background: var(--plyta); color: var(--tekst); text-decoration: none; transition: border-color var(--szyb), box-shadow var(--szyb), transform var(--szyb); }
main.start .st-pk:hover { border-color: var(--linia-3); box-shadow: var(--cien-2); text-decoration: none; transform: translateY(-1px); }
main.start .st-pk img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 11px; background: var(--plyta-3); margin-bottom: 6px; }
main.start .st-pk b { padding: 0 6px; font: 650 var(--t-baza)/1.25 var(--font); }
main.start .st-pk span { padding: 0 6px; color: var(--sz); font-size: var(--t-mini); line-height: 1.35; }
main.start .st-przyk .st-pod { text-align: center; }
@media (max-width: 1100px) and (min-width: 761px) {
  main.start .st-przyk-l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  main.start .st-co { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 6px 22px; }
  main.start .st-co li { font-size: var(--t-mala); gap: 6px; }
  main.start .st-co .ik { width: 18px; height: 18px; }
  main.start .st-przyk-l { display: flex; gap: 8px; margin: 0 -16px; padding: 2px 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; }
  main.start .st-przyk-l::-webkit-scrollbar { display: none; }
  main.start .st-przyk-l li { flex: 0 0 236px; scroll-snap-align: start; }
  main.start .st-przyk .st-pod { text-align: left; }
}
/* celownik „gdzie jestem” w polu (ukryty bez geolokalizacji - atrybut hidden z JS) */
main.start .st-gdzie { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 13px; background: transparent; color: var(--akcent); cursor: pointer; }
main.start .st-gdzie:hover { background: var(--akcent-tlo); }
main.start .st-gdzie .ik { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
  main.start .st-gdzie--szuka .ik { animation: st-puls 1s ease-in-out infinite; }
  @keyframes st-puls { 50% { transform: scale(.78); opacity: .5 } }
}
/* liczby z aktów: kafelki, na biurku w jednym rzędzie */
main.start .st-liczby-sekcja { display: grid; justify-items: center; gap: 14px; }
main.start .st-liczby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(880px, 100%);
  margin: 0; padding: 0; list-style: none; text-align: left; }
main.start .st-liczby li { display: grid; align-content: start; gap: 2px; padding: 12px 14px; border: 1px solid var(--linia);
  border-radius: 16px; background: var(--plyta); color: var(--sz); font-size: var(--t-mala); line-height: 1.35; }
main.start .st-liczby li b { color: var(--tekst); font: 700 clamp(19px, 1rem + .5vw, 24px)/1.15 var(--font); font-stretch: 104%;
  letter-spacing: -.02em; }
main.start .st-liczby .st-liczby-stan { grid-column: 1 / -1; padding: 0; border: 0; background: none; text-align: center;
  font-size: var(--t-mini); }
/* budynki z cenami: pasek kart; na telefonie przesuwa się sam, na biurku siatka */
main.start .st-bud { display: grid; gap: 14px; }
main.start .st-bud-okno { overflow: hidden; margin: 0 -16px; padding: 2px 16px; }
main.start .st-bud-tor { display: flex; gap: 10px; width: max-content; }
main.start .st-bud-lista { display: flex; gap: 10px; }
main.start .st-b { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto auto;
  column-gap: 12px; row-gap: 1px; align-items: center; width: 272px; padding: 12px 14px 12px 12px; border: 1px solid var(--linia);
  border-radius: 18px; background: var(--plyta); color: var(--tekst); text-decoration: none;
  transition: border-color var(--szyb), box-shadow var(--szyb), transform var(--szyb); }
main.start .st-b:hover { border-color: var(--linia-3); box-shadow: var(--cien-2); text-decoration: none; transform: translateY(-1px); }
main.start .st-b-obrys { grid-row: 1 / span 4; width: 56px; height: 56px; padding: 4px; border-radius: 12px; background: var(--akcent-tlo); }
main.start .st-b-obrys path, main.start .st-b-obrys rect { fill: var(--akcent); fill-opacity: .9; stroke: var(--akcent); stroke-width: 1.5;
  stroke-linejoin: round; vector-effect: non-scaling-stroke; }
main.start .st-b-cena { font: 700 20px/1.15 var(--font); font-stretch: 104%; letter-spacing: -.02em; }
main.start .st-b-adres { font: 600 var(--t-baza)/1.3 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main.start .st-b-miasto, main.start .st-b-n { color: var(--sz); font-size: var(--t-mini); line-height: 1.3; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  main.start .st-bud-tor { animation: st-sun 48s linear infinite; }
  main.start .st-bud-okno:hover .st-bud-tor, main.start .st-bud-okno:focus-within .st-bud-tor,
  main.start .st-bud-okno:active .st-bud-tor { animation-play-state: paused; }
  @keyframes st-sun { to { transform: translateX(calc(-50% - 5px)) } }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  main.start .st-bud-okno { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  main.start .st-b { scroll-snap-align: start; }
  main.start .st-bud-lista[aria-hidden="true"] { display: none; }
}
@media (min-width: 761px) {
  main.start .st-bud-okno { margin: 0; padding: 0; overflow: visible; }
  main.start .st-bud-tor { width: auto; animation: none; }
  main.start .st-bud-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  main.start .st-bud-lista[aria-hidden="true"] { display: none; }
  main.start .st-b { width: auto; }
}
/* mapa cen kraju (gotowy obraz) z legendą + trzy fakty z rankingu */
main.start .st-mapa { display: grid; gap: 14px; }
main.start .st-mapa-uklad { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
main.start .st-mapa-obraz { position: relative; display: block; min-width: 0; padding: 14px 14px 58px; border: 1px solid var(--linia);
  border-radius: 22px; background: var(--plyta); overflow: hidden; text-decoration: none; color: var(--tekst);
  transition: border-color var(--szyb), box-shadow var(--szyb); }
main.start .st-mapa-obraz:hover { border-color: var(--linia-3); box-shadow: var(--cien-2); text-decoration: none; }
main.start .st-mapa-obraz img { display: block; width: 100%; height: auto; }
main.start .st-legenda { position: absolute; left: 14px; right: 14px; bottom: 30px; display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 2px; height: 10px; }
main.start .st-legenda i { display: block; border-radius: 2px; }
main.start .st-legenda .st-leg-0 { background: #f6e7b4; } main.start .st-legenda .st-leg-1 { background: #f3c57a; }
main.start .st-legenda .st-leg-2 { background: #ea9a4f; } main.start .st-legenda .st-leg-3 { background: #d9683b; }
main.start .st-legenda .st-leg-4 { background: #b23f2e; } main.start .st-legenda .st-leg-5 { background: #731d2a; }
main.start .st-leg-t { position: absolute; left: 0; right: 0; top: 13px; display: flex; justify-content: space-between;
  color: var(--sz); font: 500 var(--t-mikro)/1.2 var(--font); }
main.start .st-mapa-klik { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-radius: var(--r-pig); background: var(--plyta); border: 1px solid var(--linia); color: var(--tekst);
  font: 600 var(--t-mini)/1.2 var(--font); box-shadow: var(--cien-1); }
main.start .st-fakty { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 10px; min-width: 0; }
main.start .st-f { display: grid; align-content: center; gap: 2px; min-width: 0; padding: 12px 16px; border: 1px solid var(--linia);
  border-radius: 18px; background: var(--plyta); color: var(--tekst); text-decoration: none;
  transition: border-color var(--szyb), box-shadow var(--szyb); }
main.start .st-f:hover { border-color: var(--linia-3); box-shadow: var(--cien-2); text-decoration: none; }
main.start .st-f-t { color: var(--sz); font: 600 var(--t-mini)/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; }
main.start .st-f b { font: 700 clamp(18px, 1rem + .4vw, 22px)/1.15 var(--font); font-stretch: 104%; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main.start .st-f-l { font: 600 var(--t-tresc)/1.3 var(--font); }
main.start .st-f-o { color: var(--sz); font-size: var(--t-mini); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main.start .st-f--wiecej { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; background: var(--plyta-2); }
main.start .st-f--wiecej > .ik { grid-row: 1 / span 2; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--akcent-tlo); color: var(--akcent); }
main.start .st-f--wiecej b { font-size: var(--t-tresc); }
/* kafle miast z wykresem rocznym */
main.start .st-miasta-k { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
main.start .st-mk { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px 14px 10px; border: 1px solid var(--linia); border-radius: 16px;
  background: var(--plyta); color: var(--tekst); text-decoration: none; transition: border-color var(--szyb), box-shadow var(--szyb); }
main.start .st-mk:hover { border-color: var(--linia-3); box-shadow: var(--cien-2); text-decoration: none; }
main.start .st-mk-g { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; min-width: 0; }
main.start .st-mk-g b { font: 650 var(--t-tresc)/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main.start .st-mk-g .st-zm { font-size: var(--t-mini); }
main.start .st-mk-c { font: 700 clamp(18px, 1rem + .4vw, 22px)/1.15 var(--font); font-stretch: 104%; letter-spacing: -.02em; }
main.start .st-wykres { display: block; width: 100%; height: 30px; margin-top: 4px; overflow: visible; }
main.start .st-wykres polyline { fill: none; stroke: var(--akcent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; }
main.start .st-mk-lata { display: flex; justify-content: space-between; color: var(--sz-2); font: 500 var(--t-mikro)/1.2 var(--font); }
/* trzy kafle inwestycji pod kartami wejść (z JS) */
main.start .st-wej-sekcja { display: grid; gap: 14px; }
main.start .st-nowe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
main.start .st-inw { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0;
  padding: 10px 14px 10px 10px; border: 1px solid var(--linia); border-radius: 16px; background: var(--plyta); color: var(--tekst);
  text-decoration: none; transition: border-color var(--szyb), box-shadow var(--szyb); }
main.start .st-inw:hover { border-color: var(--linia-3); box-shadow: var(--cien-2); text-decoration: none; }
main.start .st-inw-obrys { width: 48px; height: 48px; padding: 4px; border-radius: 10px; background: var(--plyta-3); }
main.start .st-inw-obrys path, main.start .st-inw-obrys rect { fill: var(--sz); fill-opacity: .85; }
main.start .st-inw > span { display: grid; gap: 1px; min-width: 0; }
main.start .st-inw b { font: 650 var(--t-baza)/1.25 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main.start .st-inw > span > span { color: var(--sz); font-size: var(--t-mini); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main.start .st-inw-c { display: grid; text-align: right; font: 700 var(--t-tresc)/1.15 var(--font); }
main.start .st-inw-c small { color: var(--sz); font: 500 var(--t-mikro)/1.2 var(--font); }
@media (max-width: 1100px) and (min-width: 761px) {
  main.start .st-liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main.start .st-miasta-k { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  main.start .st-bud-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main.start .st-nowe { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  main.start .st { gap: 32px; }
  main.start .st-hero { gap: 10px; }
  main.start .st-h1 { font-size: clamp(28px, 8.2vw, 36px); }
  main.start .st-bud { gap: 10px; }
  main.start .st-liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  main.start .st-liczby li { padding: 10px 12px; font-size: var(--t-mini); }
  main.start .st-liczby li b { font-size: 19px; }
  main.start .st-gdzie { position: absolute; right: 50px; top: 6px; }
  main.start .st-pole input { padding-right: 100px; }
  main.start .st-mapa-uklad { grid-template-columns: minmax(0, 1fr); }
  main.start .st-fakty { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main.start .st-f--wiecej { grid-column: 1 / -1; }
  main.start .st-miasta-k { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  main.start .st-mk { padding: 10px 12px 8px; }
  main.start .st-nowe { grid-template-columns: minmax(0, 1fr); }
}

/* przykłady: dwa odnośniki-pigułki w jednym rzędzie */
main.start .st-przyklady { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
main.start .st-przyklady-t { margin-right: 2px; color: var(--sz); font: 500 var(--t-mala)/1 var(--font); }
main.start .st-przyklady a { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px;
  border: 1px solid var(--linia); border-radius: var(--r-pig); color: var(--tekst); font: 560 var(--t-mala)/1.2 var(--font);
  text-decoration: none; transition: border-color var(--szyb), background var(--szyb); }
main.start .st-przyklady a:hover { border-color: var(--linia-3); background: var(--plyta); text-decoration: none; }
main.start .st-przyklady a .ik { color: var(--akcent); }

/* nagłówki sekcji */
main.start .st-h2 { margin: 0; font: 700 clamp(24px, 1rem + .9vw, 32px)/1.15 var(--font); font-stretch: var(--szer-naglowka);
  letter-spacing: -.025em; text-wrap: balance; }

/* co sprawdzisz w raporcie: tekst z działami | podgląd strony 1 PDF */
main.start .st-raport { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center;
  gap: clamp(32px, 5vw, 72px); padding: clamp(28px, 4vw, 48px); border: 1px solid var(--linia); border-radius: 28px;
  background: var(--plyta); overflow: hidden; }
main.start .st-raport-t { display: grid; justify-items: start; gap: 14px; }
main.start .st-raport-t > * { margin: 0; max-width: 100%; }
main.start .st-sub { color: var(--sz); font-size: var(--t-tresc); line-height: 1.5; max-width: 52ch; }
main.start .st-dzialy { margin: 10px 0 8px; padding: 0; list-style: none; display: grid; gap: 18px; }
main.start .st-dzialy > li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
main.start .st-dzialy > li > .ik { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px;
  background: var(--akcent-tlo); color: var(--akcent); }
main.start .st-dzialy b { display: block; font: 650 16px/1.3 var(--font); }
main.start .st-dzialy li span span { display: block; margin-top: 3px; color: var(--sz); font-size: var(--t-baza); line-height: 1.45; }
main.start .st-przyklad-raportu { height: 44px; padding: 0 18px; font-size: var(--t-baza); }
main.start .st-przyklad-raportu .ik { transition: transform var(--szyb); }
main.start .st-przyklad-raportu:hover .ik { transform: translateX(3px); }
/* „Raport dla biznesu” (/biznes): mały kafel pod przykładowym raportem, bez przebudowy strony */
main.start .st-biznes { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; max-width: 460px;
  border: 1px solid var(--linia); border-radius: 12px; color: var(--tekst); text-decoration: none; }
main.start .st-biznes > span { flex: 1; display: grid; gap: 2px; }
main.start .st-biznes b { font-weight: 650; }
main.start .st-biznes > span > span { color: var(--sz); font-size: var(--t-mala); }
main.start .st-biznes:hover { border-color: var(--linia-3); }
/* Kartka: prawdziwa strona 1 PDF, u dołu przechodzi w płytę sekcji (kadr ucina ją w połowie). */
main.start .st-podglad { position: relative; display: block; align-self: end; margin: 8px 0 calc(-1 * clamp(28px, 4vw, 48px));
  border-radius: 14px 14px 0 0; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px var(--linia-3), 0 24px 60px -24px var(--cien-krawedz); transform: rotate(1.2deg) translateY(6px);
  transform-origin: 50% 100%; transition: transform var(--sred) var(--krzywa); }
main.start .st-podglad:hover { transform: rotate(0) translateY(0); }
main.start .st-podglad img { display: block; width: 100%; height: auto; }
/* W ciemnym motywie biała kartka przygaszona o kilka procent, żeby nie świeciła mocniej niż pole raportu. */
:root:not([data-motyw="jasny"]) main.start .st-podglad img { filter: brightness(.9); }
@media (prefers-color-scheme: light) { :root:not([data-motyw="ciemny"]) main.start .st-podglad img { filter: none; } }
main.start .st-podglad::after { content: ""; position: absolute; inset: auto 0 0; height: 30%;
  background: linear-gradient(transparent, var(--plyta)); pointer-events: none; }
/* UX B1: obraz z 27.09 ma już nieaktualne liczby - podpis mówi, że to przykład (nowy obraz po wdrożeniu etapu A). */
main.start .st-podglad-et { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 5px 10px; border-radius: var(--r-pig);
  background: rgba(10, 13, 18, .78); color: #fff; font: 600 var(--t-mini)/1.2 var(--font); }

/* intencje (UX B1, B2): Sprzedaję / Kupuję / Działka nad polem; „Kupuję” prowadzi na /wycena?tryb=kupuje */
main.start .st-intencje { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
main.start .st-int { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px;
  border: 1px solid var(--linia-3); border-radius: var(--r-pig); background: var(--plyta); color: var(--tekst);
  font: 600 var(--t-mala)/1.2 var(--font); text-decoration: none; transition: border-color var(--szyb), background var(--szyb); }
main.start .st-int:hover { border-color: var(--sz-2); background: var(--plyta-3); text-decoration: none; }
main.start .st-int .ik { color: var(--akcent); }
main.start .st-int[aria-pressed="true"] { border-color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-cien); }

/* ceny i rynek: cztery karty jednego wzoru */
main.start .st-narz { display: grid; gap: 20px; }
main.start .st-wejscia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
main.start .st-wej { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 20px 20px 18px;
  border: 1px solid var(--linia); border-radius: 20px; background: var(--plyta); color: var(--tekst); text-decoration: none;
  transition: border-color var(--szyb), box-shadow var(--szyb); }
main.start .st-wej:hover { border-color: var(--linia-3); box-shadow: var(--cien-2); text-decoration: none; }
main.start .st-wej:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
main.start .st-wej-g { display: flex; align-items: center; gap: 12px; min-width: 0; }
main.start .st-wej-g > .ik:first-child { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px;
  background: var(--plyta-3); color: var(--tekst); }
main.start .st-wej-g b { flex: 1; min-width: 0; font: 680 16px/1.25 var(--font); font-stretch: 104%; letter-spacing: -.01em; }
main.start .st-wej-g > .ik:last-child { flex: none; color: var(--sz); transition: transform var(--szyb); }
main.start .st-wej:hover .st-wej-g > .ik:last-child { color: var(--tekst); transform: translateX(3px); }
main.start .st-wej-o { color: var(--sz); font-size: var(--t-baza); line-height: 1.45; }
/* Fakt zawsze na dole karty i tej samej wysokości (podpis do dwóch linii): kreski nad faktami równają się w rzędzie. */
main.start .st-fakt { display: grid; align-content: start; gap: 2px; min-height: 80px; padding-top: 12px;
  border-top: 1px solid var(--linia); }
main.start .st-fakt b { font: 700 20px/1.2 var(--font); font-stretch: 104%; letter-spacing: -.015em; }
main.start .st-fakt span { color: var(--sz); font-size: var(--t-mala); line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  main.start .st-fakt--gotowy b { animation: st-pokaz var(--wolno) var(--krzywa); }
  @keyframes st-pokaz { from { opacity: 0; transform: translateY(4px) } }
}
main.start .st-miasta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
main.start .st-miasta-t { margin-right: 6px; color: var(--sz); font: 600 var(--t-mala)/1.3 var(--font); }
main.start .st-miasta .chip { height: 38px; padding: 0 16px; font-size: var(--t-baza); }

/* Średnie okno: karty w dwóch kolumnach, podgląd raportu węższy. */
@media (max-width: 1100px) and (min-width: 761px) {
  main.start .st-wejscia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main.start .st-raport { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
}
/* Niskie okno laptopa (1366×768, 1280×720, z paskami przeglądarki 600–790 px): pierwszy ekran to nadal hasło,
   pole i przykłady. */
@media (min-width: 761px) and (max-height: 860px) {
  main.start .st { padding-top: 8px; }
  main.start .st-hero { gap: 12px; }
  main.start .st-h1 { font-size: min(clamp(38px, 1.1rem + 3.7vw, 70px), 8.4vh); }
  main.start .st-lead { font-size: 16px; }
  main.start .st-szukaj { margin-top: 4px; }
  main.start .st-pole { height: 58px; }
  main.start .st-pole input { height: 54px; }
  main.start .st-pole .przycisk { height: 44px; }
}
/* Telefon: pole z „Na mapie” w środku, przycisk pod nim na całą szerokość; przykłady w dwóch równych kolumnach
   (miejsce pod adresem); podgląd raportu pod działami; karty jedna pod drugą. */
@media (max-width: 760px) {
  main.start .st { padding-top: 12px; gap: 56px; }
  main.start .st-hero { gap: 12px; }
  main.start .st-h1 { font-size: clamp(32px, 9.4vw, 42px); }
  main.start .st-lead { font-size: 16px; }
  main.start .st-szukaj { margin-top: 4px; }
  main.start .st-pole { height: auto; flex-wrap: wrap; gap: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  main.start .st-pole:focus-within { box-shadow: none; }
  main.start .st-pole > .ik { position: absolute; left: 15px; top: 17px; pointer-events: none; }
  main.start .st-pole input { flex: 1 0 100%; height: 56px; padding: 0 56px 0 46px; border: 1px solid var(--linia-3);
    border-radius: 16px; background: var(--plyta); box-shadow: var(--cien-1); font-size: 16px; }
  main.start .st-pole input:focus { border-color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-cien); }
  main.start .st-na-mapie { position: absolute; right: 6px; top: 6px; width: 44px; padding: 0; justify-content: center; }
  main.start .st-na-mapie span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  main.start .st-pole .przycisk { flex: 1 0 100%; height: 50px; margin-top: 10px; justify-content: center; border-radius: 14px; }
  main.start .st-podpowiedzi { top: 62px; }
  main.start .st-przyklady { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  main.start .st-intencje { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 6px; }
  main.start .st-int { min-height: 44px; justify-content: center; padding: 0 8px; }
  main.start .st-przyklady-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  main.start .st-przyklady a { min-height: 44px; justify-content: center; padding: 6px 10px; border-radius: 14px; font-size: 13px;
    text-align: left; }
  main.start .st-raport { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px 20px 0; border-radius: 22px; }
  main.start .st-dzialy { gap: 16px; }
  main.start .st-dzialy > li > .ik { width: 36px; height: 36px; padding: 8px; border-radius: 10px; }
  main.start .st-dzialy b { font-size: 15px; }
  main.start .st-przyklad-raportu { width: 100%; justify-content: center; }
  main.start .st-podglad { width: min(100%, 420px); justify-self: center; margin: 0; transform: none; }
  main.start .st-wejscia { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  main.start .st-wej { padding: 16px 16px 14px; border-radius: 18px; }
  main.start .st-fakt { min-height: 0; }
  main.start .st-fakt b { font-size: 18px; }
  main.start .st-miasta { gap: 8px 6px; }
  main.start .st-miasta-t { flex: 1 0 100%; }
  main.start .st-miasta .chip { height: 40px; }
}

/* ── karta gminy ────────────────────────────────────────────────────────────────────────── */
main.karta-gminy .gm-nagl { display: grid; gap: 8px; padding-top: 6px; scroll-margin-top: calc(var(--pasek-h) + 60px); }
main.karta-gminy .gm-nagl > * { margin: 0; min-width: 0; }
main.karta-gminy .gm-etk { font: 600 var(--t-mala)/1.4 var(--font); color: var(--sz); }
main.karta-gminy .gm-h1 { font-size: clamp(30px, 1.1rem + 2vw, 46px); font-weight: 760; letter-spacing: -.03em; line-height: 1.04;
  overflow-wrap: anywhere; }
main.karta-gminy .gm-h1-pod { display: block; margin-top: 6px; font-size: .42em; font-weight: 500; letter-spacing: 0;
  line-height: 1.3; color: var(--sz); }
main.karta-gminy .gm-meta { color: var(--sz); font-size: var(--t-tresc); max-width: 90ch; }
main.karta-gminy .gm-akcje { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
/* Podnawigacja: kotwice sekcji, przyklejona pod paskiem; przewija się w bok, strona nie. */
main.karta-gminy .gm-podnav { position: sticky; top: var(--pasek-h); z-index: 20; display: flex; gap: 2px; overflow-x: auto;
  scrollbar-width: none; margin: 14px -24px 16px; padding: 0 24px; border-bottom: 1px solid var(--linia);
  background: var(--tlo); }   /* kryjąca: nagłówki sekcji przejeżdżają pod nią i prześwitywały przez szkło */
main.karta-gminy .gm-podnav::-webkit-scrollbar { display: none; }
main.karta-gminy .gm-podnav a { height: 44px; flex: none; display: inline-flex; align-items: center; padding: 0 12px;
  color: var(--sz); font: 580 var(--t-mala)/1 var(--font); border-bottom: 2px solid transparent; white-space: nowrap;
  text-decoration: none; }
main.karta-gminy .gm-podnav a:hover { color: var(--tekst); border-bottom-color: var(--linia-3); }
main.karta-gminy .gm-podnav a[aria-current="true"] { color: var(--tekst); border-bottom-color: var(--tekst); }
main.karta-gminy .gm-podnav .ile { margin-left: 5px; color: var(--sz-2); font-weight: 560; }
main.karta-gminy .gm-sek { scroll-margin-top: calc(var(--pasek-h) + 56px); }
main.karta-gminy .gm-sek h2 .csv { margin-left: 10px; font: 500 var(--t-mala)/1 var(--font); letter-spacing: 0; }

/* rodzaj nieruchomości jako segment (to przełącza widok tej karty, nie prowadzi gdzie indziej) */
main.karta-gminy .zakladki.gm-warstwy { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 4px; border: 0;
  border-radius: var(--r-pig); background: var(--plyta-3); }
main.karta-gminy .zakladki.gm-warstwy a { height: 30px; padding: 0 14px; border-radius: var(--r-pig); background: transparent;
  color: var(--sz); font: 580 var(--t-mala)/1 var(--font); text-decoration: none; }
main.karta-gminy .zakladki.gm-warstwy a:hover { color: var(--tekst); background: transparent; }
main.karta-gminy .zakladki.gm-warstwy a.akt { background: var(--plyta); color: var(--tekst); box-shadow: var(--cien-1); font-weight: 650; }

/* formularz filtrów: podpisy zdaniem, bez monospace i wersalików */
main.karta-gminy form.filtry { border-radius: var(--r-3); gap: 12px 14px; }
main.karta-gminy form.filtry::before { display: none; }
main.karta-gminy form.filtry label { font: 600 var(--t-mini)/1.35 var(--font); text-transform: none; letter-spacing: 0; color: var(--sz); }
main.karta-gminy form.filtry :is(input, select) { height: 34px; font: 500 var(--t-mala)/1 var(--font); border-radius: var(--r); }
main.karta-gminy form.filtry button { height: 34px; padding: 0 16px; border: 0; border-radius: var(--r-pig); background: var(--tekst);
  color: var(--tlo); font: 620 var(--t-mala)/1 var(--font); }
main.karta-gminy form.filtry button:hover { filter: none; opacity: .88; }
main.karta-gminy form.filtry .czysc { height: 34px; }
main.karta-gminy .gm-przekroj-pod { margin: 6px 0 0; font-size: var(--t-mini); }
main.karta-gminy .gm-wykres-pod { margin: 8px 0 0; }
main.karta-gminy .gm-brak { margin-top: 24px; }

/* rynek pierwotny gminy */
main.karta-gminy .gm-gl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 32px 0 12px; }
main.karta-gminy .gm-gl h2 { margin: 0; }
main.karta-gminy .gm-gl .opis { color: var(--sz); font-size: var(--t-mala); }
main.karta-gminy .gm-rp-kafle .kafel-i b small { font-size: 13px; font-weight: 560; color: var(--sz); margin-left: 3px; letter-spacing: 0; }
main.karta-gminy .gm-rp-zd { margin: 10px 0 0; }
main.karta-gminy .gm-rp-w { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; margin-top: 16px; align-items: start; }
main.karta-gminy .gm-rp-lista, main.karta-gminy .gm-rp-dalej { display: grid; gap: 8px; min-width: 0; align-content: start; }
main.karta-gminy .gm-rp-lista > *, main.karta-gminy .gm-rp-dalej > * { min-width: 0; margin: 0; }
main.karta-gminy .gm-rp-t { font: 650 var(--t-mini)/1.35 var(--font); color: var(--sz); }
main.karta-gminy .gm-zdania { display: grid; gap: 6px; }
main.karta-gminy .gm-rp-cta { margin-top: 6px; }
main.karta-gminy .gm-rp-szerzej { font-size: var(--t-mini); }
main.karta-gminy .gm-rp-brak { margin: 0; padding: 14px 16px; border-radius: var(--r-3); background: var(--plyta);
  border: 1px solid var(--linia); color: var(--sz); max-width: 90ch; }

@media print {
  main.karta-gminy .gm-podnav, main.karta-gminy .gm-akcje, main.karta-gminy .gm-zdania, main.karta-gminy [data-gm-zdania-t] { display: none; }
}

/* ── średnie ekrany i telefon ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  main.karta-gminy .gm-podnav { margin-left: -16px; margin-right: -16px; padding: 0 12px; }
}
@media (max-width: 1000px) {
  main.karta-gminy .gm-rp-w { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  main.karta-gminy .gm-podnav { margin: 12px -16px 14px; padding: 0 8px; }
  main.karta-gminy .gm-akcje .przycisk { height: 40px; }
  main.karta-gminy .zakladki.gm-warstwy { display: inline-flex; max-width: 100%; }
  main.karta-gminy .zakladki.gm-warstwy a { height: 34px; }
  /* Dwie kolumny kafli na telefonie, a nieparzysty ostatni bierze cały rząd — zamiast pustego pola
     obok (SPEC 7). Przekroje (tabelki) mają jedną kolumnę i ich to nie dotyczy. */
  :is(main.start, main.karta-gminy) .karty:not(.karty--przekroje) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(main.start, main.karta-gminy) .karty:not(.karty--przekroje) > .karta:last-child:nth-child(odd),
  :is(main.start, main.karta-gminy) .kafle-i > .kafel-i:last-child:nth-child(odd) { grid-column: 1 / -1; }
  :is(main.start, main.karta-gminy) .kafle-i { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(main.start, main.karta-gminy) .karta > b { font-size: 22px; }
  :is(main.start, main.karta-gminy) .odsylacz .etap .pod { display: none; }
}
/* ─── koniec [C1] ─── */
/* ---------- odsprzedaże i flipy (wspólne: budynek, lokal, ulica, gmina, eksplorator) ---------- */
/* RCS 2 (docs/rcs2/SPEC.md 4.2, 5): znaczniki to słowa, nie kody — Archivo zamiast monospace,
   pigułka z zaokrągleniem zamiast prostokąta z wersalikami. Kolory i znaczenie bez zmian: flip na
   czerwono, flip firmy pełnym czerwonym, szybka odsprzedaż bursztynem, od dewelopera wypełnione
   akcentem, wtórny samym obrysem. Panel budynku na mapie zostaje po staremu (blok „panel budynku”). */
.odsp { font: 650 var(--t-mikro)/15px var(--font); letter-spacing: .01em;
  border-radius: 5px; padding: 1px 6px; white-space: nowrap; display: inline-block; vertical-align: 1px; }
.odsp--flip { background: color-mix(in srgb, var(--spadek) 16%, transparent); color: var(--spadek);
  border: 1px solid color-mix(in srgb, var(--spadek) 45%, transparent); }
.odsp--flip.odsp--firma { background: var(--spadek); color: var(--plyta); border-color: var(--spadek); }
.odsp--szybka { background: var(--uwaga-tlo); color: var(--uwaga-tekst); border: 1px solid var(--uwaga-ramka); }
.strony { font-size: var(--t-mini); color: var(--sz); white-space: nowrap; }
/* Rynek sprzedaży: od dewelopera wypełniony kolorem akcentu, wtórny tylko obrysem - różnicę
   widać kątem oka w długiej historii, bez czytania. Domysł (rejestr nie podał rynku) ma
   przerywaną ramkę i znak zapytania. */
.rynek { font: 650 var(--t-mikro)/15px var(--font); letter-spacing: .01em;
  border-radius: 5px; padding: 1px 6px; white-space: nowrap; display: inline-block; vertical-align: 1px;
  border: 1px solid transparent; }
.rynek--pierwotny { background: var(--akcent); color: var(--plyta); border-color: var(--akcent); }
.rynek--wtorny { background: transparent; color: var(--sz); border-color: var(--linia-3); }
.rynek--domysl { border-style: dashed; }
.rynek--pierwotny.rynek--domysl { background: var(--akcent-tlo); color: var(--akcent); }
.rynek--brak { color: var(--sz-2); border: 1px dashed var(--linia-3); }
.rynek-legenda { font-size: var(--t-mini); color: var(--sz); margin: 0 0 var(--k-2); }
.rynek-legenda .rynek { margin-right: 2px; }
/* Karty budynku, lokalu i ulicy (P4b, korzeń .karta-miejsca w [C2]) dobrały do znaczników rozstrzelenie
   .04em pod wersaliki, które dawała stara reguła ogólna. Zostawiamy je tam, dopóki P4b nie zdecyduje
   inaczej — :where() nie podnosi specyficzności, więc wystarczy jedna reguła w [C2], żeby to zmienić.
   Bez P4b w drzewie klasy .karta-miejsca nie ma na żadnej stronie i reguła nic nie robi. */
:where(.karta-miejsca) :is(.rynek, .odsp, .plakietka) { text-transform: uppercase; }

/* ---------- treść strony ----------
   Dokument o szerokości narzędzia (tabele do 12 kolumn), z marginesem jak w prototypie RCS 2.
   Stary nagłówek (.gora, .menu, .lupa, .motyw, .marka) zniknął razem z menu u góry: powłokę rysuje
   region [B]. */
.strona { max-width: 1640px; margin: 0 auto; padding: 28px var(--k-6) 64px; view-transition-name: strona; }
/* Plakietka: jedno zdanie przy liczbie, tylko przy problemie (SPEC 1.5). Neutralna — zwykła
   etykieta bez ostrzeżenia („dzielnica”, „ha”). */
.plakietka { display: inline-block; padding: 1px 7px; border-radius: 6px; font: 600 var(--t-mikro)/15px var(--font);
  background: var(--uwaga-tlo); color: var(--uwaga-tekst); border: 1px solid var(--uwaga-ramka);
  white-space: nowrap; vertical-align: 1px; }
.plakietka--neutralna { background: var(--plyta-3); color: var(--sz); border-color: transparent; }

/* ---------- karty liczb ----------
   Jedna płyta rozcięta włosem, zaokrąglona jak reszta RCS 2 (SPEC 5: kafle). Włos to cień karty
   w LEWO i w GÓRĘ, przycięty krawędzią płyty — nie tło w kolorze linii prześwitujące przez odstęp
   1 px: przy nieparzystej liczbie kart na telefonie tamto zostawiało szarą dziurę. Kierunek ma
   znaczenie: karty mają position: relative, więc każda następna maluje się na poprzedniej —
   cień w prawo i w dół przykrywała sąsiadka i włosa nie było wcale. Cień w lewo i w górę leży na
   karcie już namalowanej, a przy krawędzi płyty obcina go overflow: hidden. Duża liczba
   proporcjonalnym Archivo (SPEC 4.2: KPI proporcjonalne, tabele tabularne), podpis drobnym
   szarym, zmiana pod spodem cyframi tabularnymi. */
.karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0; margin: var(--k-4) 0 var(--k-5); background: var(--plyta); border: 1px solid var(--linia);
  border-radius: var(--r-3); overflow: hidden; }
.karta { background: var(--plyta); min-width: 0; padding: 14px var(--k-4) var(--k-4);
  position: relative; transition: background var(--szyb) var(--krzywa); }
.karty > .karta { box-shadow: -1px 0 0 var(--linia), 0 -1px 0 var(--linia); }
.karta::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px;
  background: var(--akcent); transition: width var(--sred) var(--krzywa); }
a.karta { color: inherit; } a.karta:hover { background: var(--plyta-2); text-decoration: none; } a.karta:hover::before { width: 100%; }
/* TYLKO bezpośrednie dziecko: w listach „najszybciej w górę" <b> siedzi w <span>
   i dostawał styl liczby KPI, rozbijając wiersz. */
.karta > b { display: block; font: 680 var(--t-kpi)/1.15 var(--font); font-stretch: 105%; letter-spacing: -.02em;
  font-variant-numeric: proportional-nums; margin-top: 2px; }
.karta > span { color: var(--sz); font: 500 var(--t-mini)/1.35 var(--font); display: block;
  margin-top: 6px; }
.karta .zmiana { font: 600 var(--t-mala)/1.3 var(--font); margin-top: var(--k-2); display: inline-block;
  font-variant-numeric: tabular-nums; color: var(--tekst); }
.karta .zmiana.wzrost { color: var(--wzrost); } .karta .zmiana.spadek { color: var(--spadek); }
/* Główna odpowiedź strony (wycena, „ile urosło”): większa liczba na jaśniejszej płycie z kreską
   akcentu u góry — akcent to kolor interfejsu, więc liczba zostaje w kolorze tekstu. */
.karta--gruba { background: var(--plyta-2); }
.karta--gruba::before { width: 100%; height: 3px; }
.karta--gruba > b { font-size: calc(var(--t-kpi) * 1.18); }

/* ---------- gęsta tabela ----------
   .owijka przewija się TYLKO W POZIOMIE (szerokie tabele na telefonie). Wcześniej była
   oknem przewijania w obu osiach, do 880 px wysokości, z `overscroll-behavior: contain`,
   żeby nagłówek kolumn mógł się przykleić do górnej krawędzi. Cena była za wysoka: kółko
   nad tabelą przewijało samą tabelę, a po dojechaniu do jej końca strona stała w miejscu -
   tabele są prawie na każdej stronie, więc przewijanie wyglądało na zablokowane. Przewija
   się teraz strona, a przyklejone zostają tylko pierwsze kolumny przy przesuwaniu w bok.
   `overflow-y: hidden` nie przycina niczego (wysokość jest naturalna), a nie da się mieć
   `overflow-x: auto` z widocznym `overflow-y` - przeglądarka i tak zrobiłaby z tego `auto`. */
.owijka { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  border: 1px solid var(--linia); border-radius: var(--r-3); background: var(--plyta);
  scrollbar-width: thin; contain: paint;
  /* cień prawej krawędzi gaśnie sam po dojechaniu do końca — background-attachment: local */
  background-image: radial-gradient(farthest-side at 100% 50%, var(--cien-krawedz), transparent),
                    linear-gradient(to left, var(--plyta) 40%, transparent);
  background-size: 14px 100%, 48px 100%; background-position: right, right;
  background-repeat: no-repeat; background-attachment: scroll, local; }
.owijka--niska { max-height: none; }
.owijka:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
@media print { .owijka { max-height: none; overflow: visible; } }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--t-mala); }
th, td { padding: 0 var(--k-3); height: var(--wiersz); text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--linia-2); vertical-align: middle; }
/* Nagłówek kolumn zwykłym pismem, bez wersalików i monospace'u (SPEC 5: tabela). */
thead th { background: var(--plyta-2); color: var(--sz); font: 600 var(--t-mini)/1.25 var(--font);
  letter-spacing: 0; position: sticky; top: 0; z-index: 2;
  height: 32px; border-bottom: 1px solid var(--linia-3); }
th:first-child, td:first-child { text-align: left; position: sticky; left: 0;
  background: var(--plyta); z-index: 1; }
thead th:first-child { z-index: 3; background: var(--plyta-2); }
/* Zebra i podświetlenie przez background-IMAGE, nie background-color: przypięta pierwsza
   kolumna musi zachować własne kryjące tło, inaczej przejeżdżają pod nią cyfry. */
tbody tr:nth-child(even) td { background-image: linear-gradient(var(--plyta-2), var(--plyta-2)); }
tbody tr:hover td { background-image: linear-gradient(var(--plyta-3), var(--plyta-3)); }
tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--akcent); }
tbody tr:target td { background-image: linear-gradient(var(--akcent-tlo), var(--akcent-tlo)); }
tbody tr:last-child td { border-bottom: 0; }
/* Wszystko, co nie jest oznaczone .l, jest liczbą: Archivo z cyframi tabularnymi (kolumny
   równają się do prawej) zamiast monospace'u — bez dopisywania klas w dziesięciu szablonach. */
.liczba, td:not(.l) { font-variant-numeric: tabular-nums; font-size: var(--t-mala); }
td.l, th.l { text-align: left; }
td.l { overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
tbody td b { font-weight: 620; color: var(--tekst); }
.wzrost { color: var(--wzrost); font-weight: 600; }
.spadek { color: var(--spadek); font-weight: 600; }
/* drugi kanał obok koloru — dla daltonisty kolumna „rok do roku" byłaby inaczej pusta */
td.wzrost::before { content: "▲ "; font-size: 8px; vertical-align: 1px; }
td.spadek::before { content: "▼ "; font-size: 8px; vertical-align: 1px; }
td.sz, .sz { color: var(--sz); }
.muted { color: var(--sz-2); }
/* /rankingi: sam numer porządkowy przyklejony na telefonie nic nie mówi — przypnij też nazwę.
   Kolumna numeru ma stałą szerokość równą przesunięciu drugiej, w pikselach (nagłówek i wiersz mają
   różne stopnie pisma, więc „em” dawało dwa różne przesunięcia): przy węższym numerze przyklejona
   nazwa stała kilka pikseli za daleko i zasłaniała początek trzeciej kolumny. */
.owijka--pin2 th:first-child, .owijka--pin2 td:first-child { width: 46px; min-width: 46px; max-width: 46px; padding-right: 4px; }
.owijka--pin2 th:nth-child(2), .owijka--pin2 td:nth-child(2) { position: sticky; left: 46px;
  background: var(--plyta); z-index: 1; box-shadow: 1px 0 0 var(--linia); }
.owijka--pin2 thead th:nth-child(2) { background: var(--plyta-2); z-index: 3; }

/* ---------- zakładki warstw ----------
   Segment (SPEC 5): 2–3 wzajemnie wykluczające się widoki tej samej strony (mieszkania, działki,
   budynki). Wybrany kafel stoi na jasnej płycie, reszta jest tekstem na szarym torze. */
.zakladki { display: inline-flex; gap: 2px; padding: 3px; margin: var(--k-4) 0;
  border-radius: var(--r-pig); background: var(--plyta-3); max-width: 100%; }
.zakladki a { padding: 0 14px; height: 30px; display: inline-flex; align-items: center; border-radius: var(--r-pig);
  color: var(--sz); font: 580 var(--t-mala)/1 var(--font); white-space: nowrap; }
.zakladki a:hover { color: var(--tekst); text-decoration: none; }
.zakladki a.akt { background: var(--plyta); color: var(--tekst); font-weight: 650; box-shadow: var(--cien-1); }
/* Pasek zakładek huba (UX, etap C: Rynek, O danych - templates/_zakladki.html): odnośniki do osobnych stron,
   bieżąca z aria-current; na telefonie przewija się w bok, strona nie. Nazwa obszaru z przodu (poza kartą gminy). */
.zakladki-huba { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 var(--k-4); border-bottom: 1px solid var(--linia); }
.zakladki-huba::-webkit-scrollbar { display: none; }
.zakladki-huba a { flex: none; height: 44px; display: inline-flex; align-items: center; padding: 0 12px;
  color: var(--sz); font: 580 var(--t-mala)/1 var(--font); white-space: nowrap; text-decoration: none;
  border-bottom: 2px solid transparent; }
.zakladki-huba a:hover { color: var(--tekst); border-bottom-color: var(--linia-3); text-decoration: none; }
.zakladki-huba a[aria-current="page"] { color: var(--tekst); border-bottom-color: var(--tekst); font-weight: 650; }
.zakladki-huba a.zh-obszar { padding-left: 0; color: var(--tekst); font-weight: 700; }
main.karta-gminy .zakladki-huba { margin: 14px 0 12px; }
main.karta-gminy tr.wyroznij td { background: var(--akcent-tlo); }
main.karta-gminy .gm-rank-cta { margin-top: 12px; }
@media (max-width: 760px) { .zakladki-huba { margin-left: -16px; margin-right: -16px; padding: 0 8px; } }
.pro-kafle { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pro-kafle .kafel-i { padding: 18px; }
.pro-kafle .kafel-i b { font: 650 var(--t-tresc)/1.3 var(--font); letter-spacing: 0; }
.pro-kafle .kafel-i .ik { color: var(--akcent); }
.slowniczek dt { margin: 18px 0 4px; font-weight: 650; scroll-margin-top: calc(var(--pasek-h) + 16px); }
.slowniczek dd { margin: 0; color: var(--sz); max-width: 68ch; line-height: 1.55; }

/* ---------- karty lokalu, ulicy i gminy ---------- */
/* Przejścia w głąb i w bok (budynek, mapa, ulica, eksplorator): rząd pigułek pod nagłówkiem.
   Nie zakładki - każda prowadzi na inną stronę, a nie przełącza widok tej. */
.przejscia { display: flex; flex-wrap: wrap; gap: var(--k-2); margin: var(--k-3) 0 var(--k-4); }
.przejscia:not(:has(a)) { display: none; }
.przejscia a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border: 1px solid var(--linia-3); border-radius: var(--r-pig); background: var(--plyta);
  color: var(--tekst); font: 600 var(--t-mala)/1 var(--font); white-space: nowrap;
  transition: border-color var(--szyb), background var(--szyb); }
.przejscia a::after { content: "→"; margin-left: 6px; color: var(--sz); }
.przejscia a:hover { background: var(--plyta-3); text-decoration: none; }
/* Definicja flipa przy pierwszym użyciu na stronie: zwinięta, bo czyta się ją raz. */
.flip-opis { margin: calc(-1 * var(--k-1)) 0 var(--k-3); font-size: var(--t-mala); color: var(--sz);
  max-width: 78ch; }
.flip-opis summary { cursor: pointer; width: fit-content; }
.flip-opis summary:hover { color: var(--tekst); }
.flip-opis p { margin: var(--k-2) 0 0; padding-left: var(--k-3); border-left: 2px solid var(--linia-3); }
/* Komórka z plakietkami (flip, cena szacowana, powód odrzucenia) nie może się ucinać
   wielokropkiem jak zwykły tekst w .l - ucięty znacznik wygląda na inny znacznik. Dwie klasy,
   bo „wąsko" niżej w pliku zawęża td.l do 16 znaków i przy jednej klasie tekst wychodził
   na sąsiednią kolumnę. .pelna: zwykły tekst do lewej, którego nie wolno uciąć (stany usług,
   powody odrzucenia, województwa) — tabela i tak przesuwa się w bok. */
td.l.uwagi, td.l.pelna { max-width: none; overflow: visible; }
td.uwagi .odsp, td.uwagi .plakietka { margin-right: 4px; }
.powod { color: var(--sz); font-style: italic; }
h3.nad-tabela { margin: var(--k-5) 0 var(--k-2); }
p.pod-tabela { margin-top: var(--k-2); }
.bez-lamania { white-space: nowrap; }

/* ---------- przekroje ---------- */
/* dwie klasy: silniejsze niż .karty z @media (max-width: 820px) - tabelki przekrojów na telefonie jedna pod drugą */
.karty.karty--przekroje { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
table.przekroj { width: 100%; border-collapse: collapse; font-size: var(--t-mala); }
table.przekroj td { padding: 2px 6px; border: 0; white-space: nowrap; height: 24px; background: none; }
table.przekroj td b { font: 650 var(--t-mala)/1 var(--font); font-variant-numeric: tabular-nums; }
table.przekroj tr:hover td { background-image: linear-gradient(var(--plyta-2), var(--plyta-2)); }
td.pasek { width: 38%; min-width: 46px; padding-right: 10px !important; }
td.pasek span { display: block; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--akcent-swiat),
              color-mix(in srgb, var(--akcent-swiat) 40%, transparent)); }

/* ---------- formularze ----------
   Pola globalnie (także mapa i paleta) tylko pismem: Archivo z cyframi tabularnymi. Wygląd
   formularza filtrów (wyższe pola, strzałka listy, przycisk-pigułka) jest niżej, w obrębie
   form.filtry — reszta serwisu ma własne pola i nie może ich po cichu zmienić. */
input[type=search], input[type=number], input[type=text], select {
  padding: 0 10px; height: 30px; border: 1px solid var(--linia-3); border-radius: var(--r);
  background: var(--tlo); color: var(--tekst); font: 500 var(--t-mala)/1 var(--font);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--szyb), box-shadow var(--szyb); }
input:hover, select:hover { border-color: var(--sz-2); }
input:focus, select:focus { outline: 0; border-color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-cien); }
button, .btn { padding: 0 var(--k-4); height: 30px; border: 1px solid var(--akcent); border-radius: var(--r);
  background: var(--akcent); color: var(--tlo); font: 600 var(--t-mala)/1 var(--font); cursor: pointer;
  transition: filter var(--szyb), transform var(--szyb); }
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
/* Formularz filtrów: płyta z polami w rzędzie, podpis nad polem zwykłym pismem (bez wersalików),
   pole 36 px, przycisk „Pokaż” jako główna pigułka. Czytelny formularz zamiast chipów: pól jest
   do dwunastu, a każde ma tę samą nazwę parametru co dotąd (adresy i zakładki działają). */
form.filtry { display: flex; gap: 14px var(--k-3); flex-wrap: wrap; align-items: flex-end;
  background: var(--plyta); border: 1px solid var(--linia); border-radius: var(--r-3);
  padding: 14px var(--k-4) var(--k-4); margin: var(--k-4) 0 var(--k-5); position: relative; }
form.filtry label { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  color: var(--sz); font: 600 var(--t-mini)/1.3 var(--font); max-width: 100%; }
form.filtry :is(input[type=search], input[type=number], input[type=text], input[type=date]), form.filtry select {
  width: 136px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linia-3);
  background-color: var(--plyta-2); color: var(--tekst); font: 500 var(--t-baza)/1 var(--font);
  font-variant-numeric: tabular-nums; }
form.filtry :is(input[type=search], input[type=number], input[type=text], input[type=date]):hover, form.filtry select:hover { border-color: var(--sz-2); }
form.filtry :is(input[type=search], input[type=number], input[type=text], input[type=date]):focus, form.filtry select:focus {
  background-color: var(--plyta); border-color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-cien); }
form.filtry input::placeholder { color: var(--sz-2); }
/* Strzałka listy z dwóch gradientów w kolorze tokenu: działa w obu motywach bez pliku SVG. */
form.filtry select { appearance: none; -webkit-appearance: none; padding-right: 30px; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--sz) 50%), linear-gradient(135deg, var(--sz) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
form.filtry input[type=search] { min-width: 220px; }
form.filtry input[type=date] { width: 156px; padding-right: 8px; font-size: var(--t-mala); }
form.filtry button { height: 36px; padding: 0 20px; border: 0; border-radius: var(--r-pig);
  background: var(--tekst); color: var(--tlo); font: 650 var(--t-mala)/1 var(--font); }
form.filtry button:hover { filter: none; opacity: .88; }
form.filtry .czysc { align-self: flex-end; height: 36px; display: inline-flex; align-items: center;
  font: 500 var(--t-mala)/1 var(--font); color: var(--sz); }
form.filtry .czysc:hover { color: var(--tekst); }
.szuk { display: flex; gap: var(--k-2); margin: var(--k-4) 0 var(--k-5); max-width: 640px; }
.szuk input[type=search] { flex: 1 1 320px; min-width: 0; height: 44px; padding: 0 18px; border-radius: var(--r-pig);
  background: var(--plyta); font: 500 var(--t-tresc)/1 var(--font); box-shadow: var(--cien-1); }
.szuk button { height: 44px; padding: 0 22px; border: 0; border-radius: var(--r-pig);
  background: var(--tekst); color: var(--tlo); font: 650 var(--t-baza)/1 var(--font); }
.szuk button:hover { filter: none; opacity: .88; }

/* ---------- eksplorator: miejsce i filtry odsprzedaży ---------- */
/* Pole miejsca jest szersze od reszty filtrów: „Aleja gen. Józefa Hallera, Gdańsk" nie mieści
   się w 128 px. Lista podpowiedzi wisi pod polem, nad formularzem i tabelą. */
.eks-miejsce { position: relative; display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 260px; max-width: 420px; min-width: 0; }
/* `flex: none`: na telefonie `form.filtry label` dostaje flex-basis 130 px, a w kolumnie
   to 130 px WYSOKOŚCI - między podpisem a polem stała pusta dziura. */
form.filtry .eks-miejsce > label { flex: none; display: block; }
.eks-miejsce > label { color: var(--sz); font: 600 var(--t-mini)/1.3 var(--font); }
form.filtry .eks-miejsce input[type=search] { width: 100%; min-width: 0; }
/* Szerokość pola, ale nie węższa niż 300 px; szersza wystawała na telefonie o piksel poza ekran. */
.eks-podpowiedzi { position: absolute; top: 100%; left: 0; z-index: 20; list-style: none;
  width: 100%; min-width: min(300px, 100%); margin: 6px 0 0; padding: 6px;
  background: var(--plyta); border: 0; border-radius: var(--r-3);
  box-shadow: var(--cien-plyw); max-height: 360px; overflow: auto; overscroll-behavior: contain; }
.eks-podpowiedzi li { padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: var(--t-mala);
  display: flex; gap: var(--k-2); align-items: baseline; min-width: 0; }
.eks-podpowiedzi li:hover, .eks-podpowiedzi li[aria-selected=true] { background: var(--plyta-3); }
.eks-podpowiedzi li[aria-selected=true] .miejsce b { color: var(--akcent); }
.eks-podpowiedzi li mark { background: none; color: var(--akcent); font-weight: 700; }
.eks-podpowiedzi .rodzaj-miejsca { flex-basis: 92px; font: 600 var(--t-mikro)/1.3 var(--font); letter-spacing: .02em;
  text-transform: none; }
.eks-podpowiedzi li.eks-podp-uwaga { cursor: default; color: var(--sz); font-size: var(--t-mini);
  background: none; }
/* działka (02.10.2026): „Działka 927/87 · ul. … · obręb” łamie się zamiast urywać */
.eks-podpowiedzi li[data-rodzaj] .miejsce b { white-space: normal; }
/* Znacznik zastosowanego miejsca: co naprawdę filtruje wynik, z krzyżykiem, który je zdejmuje. */
.eks-wybrane { display: flex; flex-wrap: wrap; gap: var(--k-2) var(--k-3); align-items: center;
  margin: calc(-1 * var(--k-1)) 0 var(--k-3); }
.eks-chip { display: inline-flex; align-items: center; gap: var(--k-2); max-width: 100%; min-width: 0; min-height: 34px;
  padding: 3px 4px 3px 14px; border: 1px solid var(--linia-3); background: var(--plyta);
  border-radius: 17px; font-size: var(--t-mala); line-height: 1.35; }
.eks-chip-klucz { font: 600 var(--t-mini)/1 var(--font); color: var(--sz); flex: none; }
.eks-chip-tekst { color: var(--sz); min-width: 0; }
.eks-chip-tekst b { color: var(--tekst); font-weight: 650; }
.eks-chip-x { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; color: var(--sz); font-size: 17px; line-height: 1; }
.eks-chip-x:hover { background: var(--plyta-3); color: var(--tekst); text-decoration: none; }
.eks-chip-x { position: relative; }
.eks-chip-x::after { content: ""; position: absolute; inset: -9px; }   /* pole dotyku 44 px (SPEC 7) */
.eks-promienie { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pig); background: var(--plyta-3);
  font: 580 var(--t-mini)/1 var(--font); font-variant-numeric: tabular-nums; }
.eks-promienie a, .eks-promienie b { padding: 6px 10px; border-radius: var(--r-pig); color: var(--sz); }
.eks-promienie a:hover { color: var(--tekst); text-decoration: none; }
.eks-promienie b { background: var(--plyta); color: var(--tekst); font-weight: 650; box-shadow: var(--cien-1); }
.eks-dalej-link { font-size: var(--t-mala); white-space: nowrap; }
.eks-uwaga { color: var(--sz); font-size: var(--t-mala); margin: calc(-1 * var(--k-1)) 0 var(--k-3); }
/* Tabela eksploratora ma do 12 kolumn (z parą kupno → sprzedaż), a przy 1280 px mieści się 1230:
   ciaśniejsze odstępy i krótsze pola tekstowe. Bez tego porządek po zysku w całym kraju miał
   1414 px (długie nazwy delegatur: „Łódź-Śródmieście - delegatura").
   Tylko szerzej niż 820 px - węziej obowiązuje ogólne 16ch tabel na telefonie. */
@media (min-width: 821px) {
  .owijka--eks th, .owijka--eks td { padding: 0 var(--k-2); }
  .owijka--eks td.l { max-width: 22ch; }
  .owijka--pary td.l { max-width: 18ch; }          /* z pięcioma kolumnami pary: adres i gmina krócej */
}
.owijka--eks td.eks-rodzaj { max-width: none; }   /* znacznik „szybka odsprzedaż" nie może się uciąć */
/* „budynek · mapa" w każdym wierszu: małe, żeby nie przekrzykiwały adresu obok. */
td.eks-dalej a { font: 500 var(--t-mini)/1 var(--font); }
td.eks-dalej a + a { margin-left: var(--k-2); }
/* Zwięzła kolumna odsprzedaży (bez filtra): znacznik i zysk, pod spodem drobno kupno i okres -
   dwie linie zamiast pięciu kolumn, które wypychały tabelę poza 1280 px (1569 px). */
.owijka--eks td.eks-odsp { min-width: 250px; max-width: 290px; white-space: normal; line-height: 1.35; }
td.eks-odsp small { display: block; color: var(--sz); font-size: var(--t-mini); white-space: nowrap; }
@media (max-width: 820px) {                        /* telefon: dwie linie drobnego druku zamiast jednej */
  .owijka--eks td.eks-odsp { min-width: 220px; }
  td.eks-odsp small { white-space: normal; } }

/* ---------- notatka ----------
   Bursztyn = coś jest nie tak z danymi (SPEC 1.5). Objaśnienie bez problemu („Czego ta liczba nie
   wie”) dostaje wariant neutralny — inaczej każda strona wyglądałaby na ostrzeżenie. */
.notatka { background: var(--uwaga-tlo); border: 1px solid var(--uwaga-ramka); color: var(--uwaga-tekst);
  border-radius: var(--r-3); padding: var(--k-3) var(--k-4); font-size: var(--t-baza); line-height: 1.55;
  margin: var(--k-4) 0; }
.notatka a { color: inherit; text-decoration: underline; }
.notatka--neutralna { background: var(--plyta-2); border-color: var(--linia); color: var(--tekst); }
.notatka--neutralna a { color: var(--akcent); text-decoration: none; }

/* ---------- wykresy ----------
   Kolory wchodzą przez klasy, które nadaje app.py. Żadnych selektorów po atrybucie fill:
   generatory dawno przestały wpisywać kolory w SVG. Płyta bez udawanej siatki co 48 px - siatka
   niezwiązana z wartościami mówiła o liczbach, których nie ma; wykresy z osią rysują własną (w-siatka). */
.wykres { background: var(--plyta); border: 1px solid var(--linia); border-radius: var(--r-3); padding: var(--k-4) 18px;
  position: relative; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: thin; margin: var(--k-3) 0; }
.wykres svg { display: block; position: relative; }
.wykres > p { position: sticky; left: 0; }
svg.w { overflow: visible; }
svg.linia { width: 100%; height: auto; max-height: 320px; }
.w-slupek { fill: var(--seria-0); transition: fill var(--szyb) linear; }
.w-slupek:hover { fill: var(--akcent-swiat); }
.w-linia { stroke: var(--seria-0); stroke-width: 2; fill: none; }
.w-kropka { fill: var(--seria-0); }
.w-seria { stroke: var(--c); stroke-width: 2.2; }
.w-seria-kropka { fill: var(--c); }
.w-siatka { stroke: var(--wykres-siatka); stroke-width: 1; }
.w-os { stroke: var(--wykres-siatka); stroke-width: 1.5; }
.w-podpis { font: 500 11px var(--font); font-variant-numeric: tabular-nums; fill: var(--wykres-podpis); }
.w-wartosc { font: 650 11px var(--font); font-variant-numeric: tabular-nums; }
.w-dodatni, rect.w-dodatni { fill: var(--wzrost); }
.w-ujemny, rect.w-ujemny { fill: var(--spadek); }

/* ---------- mapa ---------- */
.mapa-owijka { position: relative; margin: var(--k-4) 0; }
.mapa { height: min(78dvh, 720px); border: 1px solid var(--linia); border-radius: var(--r-2);
  overflow: hidden; background: var(--plyta-2); }
.maplibregl-ctrl-group { background: var(--plyta) !important; border: 1px solid var(--linia) !important;
  box-shadow: none !important; border-radius: var(--r) !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--linia) !important; }
:root:not([data-motyw="jasny"]) .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(.85); }
@media (prefers-color-scheme: light) {
  :root:not([data-motyw="ciemny"]) .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: none; }
}
.etykieta { font: 600 11px/1.15 var(--font); color: var(--tekst); text-align: center; cursor: pointer;
  white-space: nowrap; text-shadow: 0 0 3px var(--tlo), 0 0 3px var(--tlo), 0 0 5px var(--tlo); }
.etykieta span { display: block; font: 500 10px/1.2 var(--mono); color: var(--sz); }
.etykieta--brak { opacity: .45; font-weight: 400; }

/* ---------- szukajka nad mapą i podpowiedzi ----------
   Statyczna (porównanie gmin, start): pole-pigułka jak „Szukaj lub zapytaj”, lista jak paleta. */
.szukajka { position: absolute; top: var(--k-3); left: var(--k-3); z-index: 5; width: min(320px, 70%); }
.szukajka--statyczna { position: relative; top: auto; left: auto; width: min(460px, 100%); margin: var(--k-4) 0; }
.szukajka input { width: 100%; height: 34px; background: var(--plyta); box-shadow: var(--cien-2); }
.szukajka--statyczna input { height: 40px; padding: 0 16px; border-radius: var(--r-pig); box-shadow: var(--cien-1);
  font: 500 var(--t-baza)/1 var(--font); }
.szukajka--statyczna input:disabled { opacity: .55; cursor: not-allowed; }
.szukajka ul { list-style: none; margin: 4px 0 0; padding: 4px; background: var(--plyta);
  border: 1px solid var(--linia-3); border-radius: var(--r-2); box-shadow: var(--cien-2);
  max-height: 320px; overflow: auto; }
.szukajka--statyczna ul { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 6px; padding: 6px;
  border: 0; border-radius: var(--r-3); box-shadow: var(--cien-plyw); }
.szukajka li { padding: 6px 8px; border-radius: 2px; cursor: pointer; font-size: var(--t-mala);
  display: flex; gap: var(--k-2); align-items: baseline; }
.szukajka--statyczna li { padding: 8px 10px; border-radius: 10px; }
.szukajka li:hover, .szukajka li[aria-selected=true] { background: var(--akcent-tlo); color: var(--akcent); }
.szukajka--statyczna li:hover, .szukajka--statyczna li[aria-selected=true] { background: var(--plyta-3); color: var(--tekst); }
.szukajka li span { color: var(--sz); font-size: var(--t-mini); }
.szukajka li em { font-style: normal; margin-left: auto; font: 500 var(--t-mini)/1 var(--font);
  font-variant-numeric: tabular-nums; color: var(--sz-2); white-space: nowrap; }

/* ---------- porównanie: znaczniki serii ----------
   Chip z kropką w barwie serii i krzyżykiem (SPEC 5: chip). Barwa niesie tylko przypisanie do
   linii na wykresie — nazwa jest obok. */
.znacznik { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 12px;
  border: 1px solid var(--linia-3); border-radius: var(--r-pig); margin: 0 var(--k-2) var(--k-2) 0;
  font: 600 var(--t-mala)/1 var(--font); background: var(--plyta); color: var(--tekst); }
.znacznik a { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  color: var(--sz); font-size: 16px; line-height: 1; }
.znacznik a:hover { background: var(--plyta-3); color: var(--tekst); text-decoration: none; }
/* Krzyżyk ma 22 px, a palec potrzebuje 44 (SPEC 7): pole dotyku powiększa niewidoczny pseudoelement,
   bez zmiany wyglądu. Wystaje poza chip mniej niż odstęp do sąsiada, więc nie zasłania innego celu. */
.znacznik a { position: relative; }
.znacznik a::after { content: ""; position: absolute; inset: -11px; }
.znacznik i, .kropka { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
td .kropka { margin-right: 8px; vertical-align: 0; }
.wybrane { display: flex; flex-wrap: wrap; margin: var(--k-3) 0; }

/* ---------- stopka ----------
   Stoi poza <main> (base.html), więc margines strony bierze z wewnętrznego .pas; sam .pas
   starej powłoki zniknął razem z nagłówkiem. */
.stopka { margin-top: var(--k-6); padding-top: var(--k-4); border-top: 1px solid var(--linia);
  color: var(--sz-2); font-size: var(--t-mini); line-height: 1.6; }
.stopka > .pas { max-width: 1640px; margin: 0 auto; padding: 0 var(--k-6) var(--k-5); }
.stopka a { color: var(--sz); }
/* Trzy kolumny (base.html, DECYZJE „Strona główna v2”): dane i źródła, ochrona danych, serwis. Krótkie akapity
   zamiast jednego bloku drobnego druku; tytuły kolumn w barwie tekstu, reszta jak dotąd szarym. */
.stopka .stopka-kol { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, .8fr);
  gap: 18px 48px; margin-top: 14px; font-size: var(--t-mala); line-height: 1.55; }
.stopka .stopka-kol > div { min-width: 0; }
.stopka .stopka-kol p { margin: 0 0 8px; max-width: 70ch; }
.stopka .stopka-kol .stopka-t { margin: 0 0 8px; color: var(--tekst); font: 650 var(--t-mala)/1.3 var(--font); }
.stopka .stopka-kol .stopka-prawne { display: grid; justify-items: start; gap: 2px; margin: 0 0 10px; }
.stopka .stopka-kol .stopka-prawne a { display: inline-flex; align-items: center; min-height: 28px; }
.stopka .stopka-kol .stopka-prawne a:hover { color: var(--tekst); }
@media (max-width: 900px) {
  .stopka .stopka-kol { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .stopka .stopka-kol .stopka-t { margin-top: 10px; }
  .stopka .stopka-kol .stopka-prawne { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .stopka .stopka-kol .stopka-prawne a { min-height: 40px; }
}

/* ---------- nawigacja bez przeładowania ---------- */
.pasek-postepu { position: fixed; inset: 0 auto auto 0; height: 2px; width: 100%; z-index: 999;
  background: linear-gradient(90deg, var(--akcent), var(--akcent-swiat)); transform: scaleX(0);
  transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.pasek-postepu.widoczny { opacity: 1; animation: pasek-rosnie 8s cubic-bezier(.12,.75,.3,1) forwards; }
.pasek-postepu.gotowy { animation: none; transform: scaleX(1); opacity: 0; transition: opacity .2s .04s; }
@keyframes pasek-rosnie { 0% { transform: scaleX(.02) } 40% { transform: scaleX(.55) } 100% { transform: scaleX(.92) } }
.tylko-czytnik { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Przejścia między stronami. Wariant bez JS (Chrome, Safari) dostaje je z tej reguły,
   reszta z document.startViewTransition w rcs-nav.js — powłoka stoi w obu przypadkach ([B]). */
/* Przejścia między dokumentami wyłączone razem z przejściami w rcs-nav.js - w Safari zrzut strony
   z mapą albo długą listą blokował nawigację na kilkanaście sekund. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(strona) { animation: zanik 130ms var(--krzywa) both; }
  ::view-transition-new(strona) { animation: wejscie 240ms var(--krzywa) both; }
  @keyframes zanik { to { opacity: 0; transform: translateY(-4px) } }
  @keyframes wejscie { from { opacity: 0; transform: translateY(6px) } }
  .karty .karta { animation: kafel 360ms var(--krzywa) both; }
  .karty .karta:nth-child(2) { animation-delay: 40ms }
  .karty .karta:nth-child(3) { animation-delay: 80ms }
  .karty .karta:nth-child(4) { animation-delay: 120ms }
  .karty .karta:nth-child(n+5) { animation-delay: 160ms }   /* dalej nie kaskadujemy: na /gmina bywa dziewięć */
  @keyframes kafel { from { opacity: 0; transform: translateY(8px) } }
}
@media (prefers-reduced-motion: reduce) {
  *, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
}

/* ---------- wąsko ---------- */
@media (max-width: 1100px) {
  .strona { padding-left: var(--k-5); padding-right: var(--k-5); }
  .stopka > .pas { padding-left: var(--k-5); padding-right: var(--k-5); }
}
@media (max-width: 820px) {
  .strona { padding: var(--k-4) var(--k-4) var(--k-6); }
  .stopka > .pas { padding-left: var(--k-4); padding-right: var(--k-4); }
  .karty { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
  .owijka { scroll-snap-type: x proximity; }
  thead th { scroll-snap-align: start; }
  th, td { padding: 0 var(--k-2); height: 24px; font-size: 12px; }
  thead th { height: 30px; }
  td.l { max-width: 16ch; }
  form.filtry { padding: var(--k-3); gap: var(--k-3) 10px; }
  form.filtry label { flex: 1 1 130px; }
  form.filtry :is(input[type=search], input[type=number], input[type=text], input[type=date]), form.filtry select { width: 100%; }
  .szukajka { width: calc(100% - var(--k-3) * 2); }
  .szukajka--statyczna { width: 100%; }
}
@media (max-width: 420px) { .karta > b { font-size: 21px; } th, td { padding: 0 6px; } }
@media (min-width: 1900px) { .strona, .stopka > .pas { max-width: 1860px; } }

/* Dwa wykresy obok siebie, gdy jest na nie miejsce — w eksploratorze rozkład i oś czasu
   mówią o tym samym wycinku i czyta się je razem. */
.dwie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--k-4); align-items: start; }
.dwie h2 { margin-top: var(--k-4); }

/* Para pól „od – do" trzyma się razem: rozdzielone, potrafiły wylądować w dwóch różnych
   wierszach formularza i wtedy nie wiadomo, co jest czyim końcem. */
.para { display: inline-flex; align-items: center; gap: 4px; }
.para input, form.filtry .para input { width: 92px; }
form.filtry .para input[type=date] { width: 156px; }
.para i { font-style: normal; color: var(--sz-2); }

/* Dymek przy akcie na mapie */
.maplibregl-popup-content { background: var(--plyta) !important; color: var(--tekst) !important;
  border: 1px solid var(--linia-3); border-radius: var(--r-2); box-shadow: var(--cien-2);
  padding: var(--k-3) var(--k-4) !important; }
.maplibregl-popup-tip { border-top-color: var(--plyta) !important;
  border-bottom-color: var(--plyta) !important; }
.maplibregl-popup-close-button { color: var(--sz); font-size: 16px; right: 4px; top: 2px; }
.dymek b { display: block; font: 600 17px/1.2 var(--mono); font-variant-numeric: tabular-nums;
  word-spacing: -.2em; margin-bottom: 4px; }
.dymek span { display: block; font-size: var(--t-mala); color: var(--sz); }
.dymek a { display: inline-block; margin-top: var(--k-2); font-size: var(--t-mala); }
/* Historia sprzedaży działki: pogrubiona cena W ŚRODKU wiersza. Bez tego `.dymek b` robi
   z niej osobny blok 17 px i każdy wiersz historii łamie się na dwie linie. */
.dymek span b { display: inline; font: 600 var(--t-mala)/1.3 var(--mono); color: var(--tekst); }
/* Podpis legendy: na jaki okres przeliczone są ceny. Mały, ale obecny zawsze - bez niego
   kolor wygląda na cenę zapłaconą, a to już nie jest prawda. */
.legenda-okres { margin: -2px 0 var(--k-1); font-size: var(--t-mikro); color: var(--sz-2); }
.legenda-okres:empty { display: none; }
.dymek .dymek-pod { margin-top: var(--k-1); color: var(--sz-2); font-size: var(--t-mikro); }

/* Kalendarz rynku: pasek w obie strony od zera, bo miesiąc może być pod albo nad zwykłym poziomem. */
table.sezon td.pasek span { background: linear-gradient(90deg, var(--wzrost),
  color-mix(in srgb, var(--wzrost) 40%, transparent)); }
table.sezon td.pasek span.ujemny { background: linear-gradient(90deg, var(--spadek),
  color-mix(in srgb, var(--spadek) 40%, transparent)); }
table.sezon td.l { width: 120px; }

/* Kody (TERYT, adresy API) zostają monospace'em — to jedyne miejsce na ten krój (SPEC 4.2). */
code { font: 500 var(--t-mala)/1.5 var(--mono); background: var(--plyta-2);
  border: 1px solid var(--linia); border-radius: 6px; padding: 2px 6px; color: var(--tekst); }

/* Przełącznik trybu koloru stref na mapie */
.tryby { display: inline-flex; gap: 1px; background: var(--linia); border: 1px solid var(--linia);
  border-radius: var(--r-2); overflow: hidden; margin: 0 0 var(--k-3); }
.tryby button { background: var(--plyta); color: var(--sz); border: 0; border-radius: 0; height: 28px;
  padding: 0 var(--k-4); font: 500 var(--t-mala)/1 var(--mono); }
.tryby button:hover { background: var(--plyta-2); color: var(--tekst); filter: none; }
.tryby button.akt { background: var(--akcent-tlo); color: var(--akcent); font-weight: 600; }

/* ─── [C2] ULICA, BUDYNEK, LOKAL — właściciel P4b (tylko nowe reguły tych stron) ─── */
/* Karty miejsc w powłoce RCS 2 (docs/rcs2/SPEC.md 6.5): korzeń .karta-miejsca. Budynek to dokument
   z mapą przyklejoną z prawej (.karta-miejsca--mapa; układ z regionu [D]: .karta-tresc, .karta-mapa,
   .karta-mob-mapa — ten sam co na karcie inwestycji), ulica i lokal to dokument (.karta-miejsca--dok).
   Ten podregion stoi w środku [C], więc stare reguły [C] niżej w pliku wygrywałyby przy tej samej
   specyficzności — dlatego każda reguła zaczyna się od korzenia (o stopień mocniej), a stare klasy
   (.karty, .owijka, .bud-lokale…) zostają w HTML-u bez zmian. Liczby: Archivo z cyframi tabelarycznymi
   zamiast monospace (SPEC 4.2); tabele kart z wierszem --wiersz-karta. */

/* ── układ ── */
main.strona:has(> .karta-miejsca--mapa) { padding: 0; max-width: none; }
.karta-miejsca--mapa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 42%); align-items: start; }
.karta-miejsca--dok { max-width: 1120px; margin: 0 auto; }
/* bez JS mapy nie ma: ani pustego panelu z prawej, ani pustych 42 vh pod tytułem */
html:not(.js) .karta-miejsca--mapa { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .karta-miejsca--mapa .karta-mapa, html:not(.js) .karta-miejsca--mapa .karta-mob-mapa { display: none; }
html:not(.js) .karta-miejsca--mapa .karta-tresc { justify-self: center; }
/* okruszki w treści to zapas (_odsprzedaze.html: okruszki_zapas) — na biurku chowa je [B], gdy pasek
   mieści całą ścieżkę; na telefonie pasek ma strzałkę do rodzica */
.karta-miejsca .crumbs { margin: 0 0 var(--k-2); }

/* ── nagłówek bytu: etykieta rodzaju, H1, meta, akcje ── */
.karta-miejsca .naglowek-bytu { gap: 8px; margin-bottom: 18px; }
.karta-miejsca .naglowek-bytu h1 { margin: 0; }
.karta-miejsca .etk-m { font-size: var(--t-mini); font-weight: 650; color: var(--sz); letter-spacing: .01em; }
.karta-miejsca .naglowek-bytu .meta { margin: 0; color: var(--sz); font-size: var(--t-tresc); line-height: 1.45; max-width: 80ch; }
.karta-miejsca .naglowek-bytu .meta b { color: var(--tekst); }
.karta-miejsca .rzad-akcji { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.karta-miejsca .rzad-akcji .przycisk { flex: none; }
.karta-miejsca .przycisk .ikn { color: var(--sz); }
.karta-miejsca .przycisk--glowny .ikn { color: inherit; }
.karta-miejsca .przycisk.obserwujesz { background: var(--akcent-tlo); color: var(--akcent); border-color: transparent; }
.karta-miejsca .przycisk.obserwujesz .ikn { color: inherit; }

/* ── podnawigacja: kotwice w jednej stronie, przyklejona pod paskiem ── */
.karta-miejsca .podnav { position: sticky; top: var(--pasek-h); z-index: 20; display: flex; gap: 2px; overflow-x: auto;
  scrollbar-width: none; background: color-mix(in srgb, var(--tlo) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linia);
  margin: 0 -32px 18px; padding: 0 32px; }
.karta-miejsca--dok .podnav { margin: 0 -24px 18px; padding: 0 24px; }
.karta-miejsca .podnav::-webkit-scrollbar { display: none; }
.karta-miejsca .podnav a { flex: none; height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px;
  color: var(--sz); font: 580 var(--t-mala)/1 var(--font); border-bottom: 2px solid transparent; white-space: nowrap;
  text-decoration: none; }
.karta-miejsca .podnav a:hover { color: var(--tekst); }
.karta-miejsca .podnav a[aria-current="true"] { color: var(--tekst); border-color: var(--tekst); }
.karta-miejsca .podnav .ile { color: var(--sz-2); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Pasek (--pasek-h) i przyklejona podnawigacja (44 px) zasłaniają górę okna. scroll-padding dokumentu
   odsuwa od nich wszystko, co przeglądarka przewija do widoku: cele kotwic, ale też element z fokusem
   przy Shift+Tab (WCAG 2.4.11 — samo scroll-margin celów działało tylko dla kotwic). scroll-margin celów
   dodałby się do tego odstępu, więc tu jest zero (stare reguły [C] niżej w pliku dawały --gora-h + 16 px);
   treść wiersza mieszkania (#m-… bez JS) staje pod jego nagłówkiem. */
html:has(main .karta-miejsca) { scroll-padding-top: calc(var(--pasek-h) + 56px); }
.karta-miejsca .sekcja-m, .karta-miejsca .bud-kotwica, .karta-miejsca .bud-lok,
.karta-miejsca .naglowek-bytu { scroll-margin-top: 0; }
.karta-miejsca .bud-lok-tresc { scroll-margin-top: 64px; }

/* ── sekcje ── */
.karta-miejsca .sekcja-m > .gl { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin: var(--k-6) 0 12px; }
.karta-miejsca .sekcja-m > .gl h2 { margin: 0; }
.karta-miejsca .sekcja-m > .gl .opis { color: var(--sz); font-size: var(--t-mala); }
.karta-miejsca .notka { margin: 0; }
.karta-miejsca .okolica + .notka { margin-top: 10px; }
.karta-miejsca .obok-lista { display: grid; gap: 8px; }
.karta-miejsca .dalej-m { margin: 10px 0 0; font-size: var(--t-mala); font-weight: 600; }
.karta-miejsca .odsylacz--inw .ods-t .m { line-height: 1.45; }
.karta-miejsca .odsylacz .ods-c > .ikn { color: var(--sz); }

/* ── kafle liczb (stare .karty/.karta: ta sama płyta, pismo jak kafle RCS 2) ── */
/* włos między kaflami z cienia kafla, nie z tła siatki: przy pięciu kaflach w trzech kolumnach
   pusta komórka świeciła kolorem linii jak dziura w panelu */
.karta-miejsca .karty { gap: 0; background: var(--plyta); border-radius: var(--r-3); margin: var(--k-3) 0; }
.karta-miejsca .karty > .karta { padding: 14px 16px 15px; box-shadow: -1px 0 0 var(--linia), 0 -1px 0 var(--linia); }
.karta-miejsca .karty > .karta::before { content: none; }
.karta-miejsca .karta > b { font: 680 var(--t-kpi)/1.15 var(--font); letter-spacing: -.02em; word-spacing: normal;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.karta-miejsca .karta--gruba { background: var(--plyta); }
.karta-miejsca .karta--gruba > b { color: var(--tekst); font-size: calc(var(--t-kpi) * 1.12); }
.karta-miejsca .karta > span { margin-top: 6px; }
.karta-miejsca .karta .zmiana { font: 600 var(--t-mini)/1.35 var(--font); word-spacing: normal; }
.karta-miejsca a.karta:hover { background: var(--plyta-2); }
.karta-miejsca .bud-przekroje > .karta { border-radius: var(--r-3); padding: 14px 16px; }

/* ── tabele ── */
.karta-miejsca .owijka { border-radius: var(--r-3); }
.karta-miejsca .owijka th, .karta-miejsca .owijka td { height: var(--wiersz-karta); padding: 0 12px; }
.karta-miejsca .owijka thead th { height: 38px; font: 600 var(--t-mini)/1.3 var(--font); text-transform: none;
  letter-spacing: 0; color: var(--sz); }
.karta-miejsca td:not(.l), .karta-miejsca .liczba { font-family: var(--font); letter-spacing: 0; word-spacing: normal; }
.karta-miejsca .owijka td:not(.l) { font-size: var(--t-mala); }
.karta-miejsca tbody tr:nth-child(even) td { background-image: none; }
.karta-miejsca tbody tr:hover td { background-image: linear-gradient(var(--plyta-2), var(--plyta-2)); }
.karta-miejsca table.przekroj td b { font-family: var(--font); }
/* tabela flipów budynku: dziewięć kolumn zamiast dwunastu (budynek.html), żeby zmieściła się w kolumnie
   treści obok mapy (723 px przy 1440) — data nad ceną, rodzaj odsprzedaży pod numerem mieszkania;
   na węższych ekranach tabela przesuwa się w bok, a pierwsza kolumna (przypięta w [C]) stoi */
.karta-miejsca table.bud-flipy th, .karta-miejsca table.bud-flipy td { padding: 0 9px; }
.karta-miejsca table.bud-flipy td { height: auto; padding-top: 6px; padding-bottom: 6px; line-height: 1.3; }
.karta-miejsca table.bud-flipy th:first-child, .karta-miejsca table.bud-flipy td:first-child { padding-left: 14px; }
.karta-miejsca table.bud-flipy thead th { white-space: normal; }
.karta-miejsca table.bud-flipy .bf-nr { max-width: none; }
.karta-miejsca table.bud-flipy .bf-nr .odsp { display: block; width: max-content; margin-top: 3px; }
.karta-miejsca table.bud-flipy .bf-dc > span { display: block; }
.karta-miejsca table.bud-flipy .bf-dc > span:first-child { color: var(--sz); font-size: var(--t-mini); }
.karta-miejsca .wykres { border-radius: var(--r-3); }
.karta-miejsca .w-podpis, .karta-miejsca .w-wartosc { font-family: var(--font); letter-spacing: 0; }

/* ── znaczniki: rynek (DEW./WT.), flip, plakietka — ten sam kształt, krój Archivo ── */
.karta-miejsca .rynek, .karta-miejsca .odsp, .karta-miejsca .plakietka { font-family: var(--font); font-weight: 650;
  letter-spacing: .04em; border-radius: 4px; }

/* ── przełączniki: rodzaj nieruchomości przy ulicy, filtr mieszkań budynku ── */
.karta-miejsca .zakladki { display: inline-flex; flex-wrap: wrap; gap: 6px; background: none; border: 0; border-radius: 0;
  overflow: visible; margin: 0 0 var(--k-3); }
.karta-miejsca .zakladki a, .karta-miejsca .zakladki label { flex: none; height: 32px; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 13px; border: 1px solid var(--linia-3); border-radius: var(--r-pig); background: var(--plyta); color: var(--tekst);
  font: 560 var(--t-mala)/1 var(--font); white-space: nowrap; }
.karta-miejsca .zakladki a:hover, .karta-miejsca .zakladki label:hover { background: var(--plyta-3); color: var(--tekst); text-decoration: none; }
.karta-miejsca .zakladki a.akt { background: var(--tekst); border-color: var(--tekst); color: var(--tlo); font-weight: 600; }
.karta-miejsca .zakladki em { font-style: normal; color: var(--sz); font-weight: 500; }
.karta-miejsca #bf-wszystkie:checked ~ .bud-zakladki label[for="bf-wszystkie"],
.karta-miejsca #bf-ponownie:checked ~ .bud-zakladki label[for="bf-ponownie"],
.karta-miejsca #bf-flip:checked ~ .bud-zakladki label[for="bf-flip"] { background: var(--tekst); border-color: var(--tekst); color: var(--tlo); font-weight: 600; }
.karta-miejsca .bud-radio:checked ~ .bud-zakladki label em { color: inherit; }
.karta-miejsca .bud-zakladki label em { color: var(--sz); }
.karta-miejsca #bf-wszystkie:checked ~ .bud-zakladki label[for="bf-wszystkie"] em,
.karta-miejsca #bf-ponownie:checked ~ .bud-zakladki label[for="bf-ponownie"] em,
.karta-miejsca #bf-flip:checked ~ .bud-zakladki label[for="bf-flip"] em { color: inherit; opacity: .7; }

/* ── mieszkania budynku: kolumna treści ma najwyżej 900 px (mapa zabiera 42% okna), a dwanaście kolumn
   listy potrzebuje ~1100 — więc wiersz zawsze składa się w dwie linijki, jak dawniej poniżej 1000 px:
   opis mieszkania i cena metra u góry, historia sprzedaży pod spodem ── */
.karta-miejsca .bud-lokale { border-radius: var(--r-3); }
.karta-miejsca .bud-lok-glowa { display: none; }
.karta-miejsca .bud-lok > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; padding: 8px 14px;
  min-height: var(--wiersz-karta); font: 400 var(--t-mala)/1.35 var(--font); font-variant-numeric: tabular-nums; word-spacing: normal; }
.karta-miejsca .bud-lok > summary > span { text-align: left; }
.karta-miejsca .bud-lokale .bl-nr { order: 0; }
.karta-miejsca .bud-lokale .bl-opis { order: 1; }
.karta-miejsca .bud-lokale .bl-opis::before { content: "· "; color: var(--sz-2); }
.karta-miejsca .bud-lokale .bl-m2 { order: 2; margin-left: auto; }
.karta-miejsca .bud-lokale .bl-m2::after { content: " zł/m²"; color: var(--sz); font-size: var(--t-mini); }
.karta-miejsca .bud-lok > summary::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
.karta-miejsca .bud-lokale .bl-n { order: 4; padding-left: 16px; }
.karta-miejsca .bud-lokale .bl-c1 { order: 5; }
.karta-miejsca .bud-lokale .bl-c1::after { content: " →"; color: var(--sz-2); }
.karta-miejsca .bud-lokale .bl-c2 { order: 6; }
.karta-miejsca .bud-lokale .bl-zm { order: 7; }
.karta-miejsca .bud-lokale .bl-is { order: 8; }
.karta-miejsca .bud-lokale .bl-zn { order: 9; margin-left: auto; }
.karta-miejsca .bud-lokale .bl-c small { font-size: var(--t-mini); }
.karta-miejsca .bud-lok:nth-of-type(even) > summary { background: none; }
.karta-miejsca .bud-lok > summary:hover { background: var(--plyta-2); }
.karta-miejsca .bud-lok[open] > summary { background: var(--akcent-tlo); }
.karta-miejsca .bud-lok-tresc { padding: 10px 14px 12px 22px; }
.karta-miejsca .bh-akt { font-family: var(--font); word-spacing: normal; }
.karta-miejsca .bh-para b { font-family: var(--font); word-spacing: normal; }

/* ── mapa z prawej (budynek) ── */
.karta-miejsca .mapa-el { position: absolute; inset: 0; background: var(--mapa-lad); }
.karta-miejsca .nakladka { position: absolute; z-index: 5; border-radius: var(--r-3); background: var(--szklo); color: var(--tekst);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: var(--cien-plyw); }
.karta-miejsca .sterowanie { position: absolute; right: 14px; top: 14px; z-index: 6; display: grid; gap: 8px; }
.karta-miejsca .sterowanie .grupa { display: grid; border-radius: 12px; overflow: hidden; background: var(--szklo);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--cien-plyw); }
.karta-miejsca .sterowanie button { width: 38px; height: 38px; display: grid; place-items: center; margin: 0; padding: 0; border: 0;
  border-radius: 0; background: none; color: var(--tekst); font: 600 15px/1 var(--font); cursor: pointer; filter: none; transform: none; }
.karta-miejsca .sterowanie button + button { border-top: 1px solid var(--linia); }
.karta-miejsca .sterowanie button:hover, .karta-miejsca .sterowanie button[aria-pressed="true"] { background: var(--plyta-3); }
.karta-miejsca .maplibregl-ctrl-attrib { font-size: 10px; }

/* ── średnie ekrany i telefon ── */
@media (max-width: 1100px) {
  .karta-miejsca--mapa { grid-template-columns: minmax(0, 1fr) 38%; }
  /* mapa ma tu 270–420 px szerokości: legenda zasłaniałaby jej połowę */
  .karta-miejsca .karta-mapa .podpis-m { display: none; }
  .karta-miejsca .podnav { margin: 0 -22px 16px; padding: 0 22px; }
  .karta-miejsca--dok .podnav { margin: 0 -16px 16px; padding: 0 16px; }
}
@media (max-width: 760px) {
  /* na dole telefonu stoi pasek kart (.dol) — fokus nie może chować się i pod nim */
  html:has(main .karta-miejsca) { scroll-padding-bottom: calc(var(--dol-h) + env(safe-area-inset-bottom, 0px)); }
  .karta-miejsca--mapa { display: block; }
  .karta-miejsca .crumbs { display: none; }
  .karta-miejsca .podnav, .karta-miejsca--dok .podnav { margin: 0 -16px 14px; padding: 0 10px; }
  /* przejścia w głąb w jednym przewijanym rzędzie: wszystkie zostają (karta inwestycji chowa trzecie
     i dalsze — tu to linki do ulicy i gminy, bez nich telefon miałby tylko strzałkę do rodzica) */
  .karta-miejsca .naglowek-bytu .rzad-akcji { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 4px -16px 0; padding: 0 16px 2px; }
  .karta-miejsca .naglowek-bytu .rzad-akcji::-webkit-scrollbar { display: none; }
  .karta-miejsca .naglowek-bytu .rzad-akcji { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .karta-miejsca .naglowek-bytu .rzad-akcji .przycisk:nth-child(n) { display: inline-flex; }
  .karta-miejsca .naglowek-bytu .meta { font-size: var(--t-baza); }
  .karta-miejsca .karta > b { font-size: 21px; }
  .karta-miejsca .karta--gruba > b { font-size: 23px; }
  .karta-miejsca .bud-lok > summary { padding: 8px 12px; }
  .karta-miejsca .zakladki a, .karta-miejsca .zakladki label { height: 36px; }
  /* „▲ 4,2% wobec tego budynku” obok nazwy zabierał jej miejsce (kolumna ceny ścięta do 36vw zostawiała
     nazwie 128 px: „Gen. Józefa Hallera 1…”), a bez ścięcia etap wjeżdżał na cenę — więc na telefonie
     cena inwestycji obok schodzi pod nazwę, która ma całą szerokość wiersza */
  .karta-miejsca .obok-lista .odsylacz { grid-template-columns: 44px minmax(0, 1fr); row-gap: 6px; }
  .karta-miejsca .obok-lista .odsylacz .miniatura { grid-row: span 2; align-self: start; }
  .karta-miejsca .obok-lista .odsylacz .ods-c { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 2px 8px; text-align: left; }
  .karta-miejsca .obok-lista .odsylacz .ods-c small { display: inline; }
  .karta-miejsca .obok-lista .odsylacz .ods-c small.roznica { white-space: normal; }
  .karta-miejsca .odsylacz .ods-e .etap { white-space: normal; flex-wrap: wrap; row-gap: 0; }
}
@media print {
  .karta-miejsca--mapa { display: block; }
  .karta-miejsca .karta-mapa, .karta-miejsca .karta-mob-mapa, .karta-miejsca .podnav, .karta-miejsca .rzad-akcji { display: none; }
}
/* ─── koniec [C2] ─── */
/* ---------- panel budynku ----------
   Wysuwa się NAD mapą, nie obok niej: mapa jest tu treścią, a nie ilustracją, więc zwężanie jej
   przy każdym kliknięciu przesuwałoby to, na co użytkownik właśnie patrzy. */
.panel { position: absolute; top: var(--k-3); right: var(--k-3); bottom: var(--k-3); z-index: 6;
  width: min(380px, 42%); background: var(--plyta); border: 1px solid var(--linia-3);
  border-radius: var(--r-2); box-shadow: var(--cien-2); overflow: auto; padding: var(--k-4);
  overscroll-behavior: contain; }
/* Panel należy do mapy (P6, docs/rcs2/PLAN.md) i do jej przeróbki wygląda jak dotąd: wspólne
   komponenty wyżej przeszły na Archivo (SPEC 4.2), a tu wracają stare wartości. :where() trzyma
   specyficzność reguł ogólnych, które te linie zastępują — reguły samego panelu niżej wygrywają
   z nimi tak samo jak wcześniej z ogólnymi. P6 usuwa ten blok, gdy przerobi panel. */
:where(.panel) .odsp, :where(.panel) .rynek { font: 600 var(--t-mikro)/1 var(--mono); text-transform: uppercase;
  letter-spacing: .05em; border-radius: 2px; padding: 3px 5px; }
:where(.panel) thead th { color: var(--sz-2); font: 600 var(--t-mikro)/1.2 var(--mono); text-transform: uppercase;
  letter-spacing: .08em; height: 28px; }
:where(.panel) .liczba, :where(.panel) td:not(.l) { font-family: var(--mono); letter-spacing: -.01em; word-spacing: -.18em; }
:where(.panel) td.l, :where(.panel) th.l { font-family: var(--font); word-spacing: normal; }
:where(.panel) table.przekroj td { height: 22px; }
:where(.panel) table.przekroj td b { font: 620 var(--t-mala)/1 var(--mono); }
:where(.panel) td.pasek span { height: 4px; border-radius: 1px; }
.panel h2 { margin: 0 var(--k-5) var(--k-2) 0; font-size: 17px; }
.panel h2::after { display: none; }
.panel-zamknij { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0;
  background: none; border: 1px solid var(--linia); color: var(--sz); font-size: 17px; line-height: 1; }
.panel-zamknij:hover { color: var(--tekst); filter: none; }
.panel-pod { color: var(--sz); font-size: var(--t-mala); margin: 0 0 var(--k-2); }
.panel-czeka, .panel-brak { color: var(--sz); font-size: var(--t-mala); }
.panel-brak { background: var(--uwaga-tlo); border: 1px solid var(--uwaga-ramka);
  color: var(--uwaga-tekst); border-radius: var(--r); padding: var(--k-3); }
.panel-liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px;
  background: var(--linia); border: 1px solid var(--linia); border-radius: var(--r);
  overflow: hidden; margin: var(--k-3) 0; }
.panel-liczby > div { background: var(--plyta-2); padding: var(--k-2) var(--k-3); }
.panel-liczby b { display: block; font: 520 17px/1.1 var(--mono); font-variant-numeric: tabular-nums;
  word-spacing: -.2em; }
.panel-liczby span { display: block; color: var(--sz); font-size: var(--t-mikro); margin-top: 2px; }
table.panel-akty { width: 100%; border-collapse: collapse; font-size: var(--t-mala); margin-top: var(--k-2); }
table.panel-akty th { position: sticky; top: 0; background: var(--plyta-2); font: 600 var(--t-mikro)/1.2 var(--mono);
  text-transform: uppercase; letter-spacing: .06em; color: var(--sz-2); padding: 4px 6px; text-align: right; }
table.panel-akty th:first-child, table.panel-akty td:first-child { text-align: left; }
table.panel-akty td { padding: 3px 6px; text-align: right; border-bottom: 1px solid var(--linia-2);
  font-family: var(--mono); font-variant-numeric: tabular-nums; word-spacing: -.15em; white-space: nowrap; }

.btn-3d { background: var(--plyta); border: 1px solid var(--linia); color: var(--sz); height: 28px;
  padding: 0 var(--k-3); border-radius: var(--r); font: 500 var(--t-mala)/1 var(--mono); }
.btn-3d:hover { color: var(--tekst); border-color: var(--linia-3); filter: none; }
.btn-3d.akt { background: var(--akcent-tlo); color: var(--akcent); border-color: var(--akcent);
  font-weight: 600; }

@media (max-width: 760px) {
  /* Na telefonie panel jest szufladą od dołu — z boku zostałby pasek szerokości kciuka. */
  .panel { top: auto; left: var(--k-2); right: var(--k-2); bottom: var(--k-2);
    width: auto; max-height: 62%; }
}

/* ── Mapa na cały ekran, sterowanie pływa nad nią ──────────────────────────────
   Poprzednia wersja miała rząd siedmiu przycisków NAD mapą: żeby cokolwiek przełączyć,
   trzeba było najpierw odwrócić wzrok od tego, na co się patrzy. */
.mapa-pelna { position: relative; height: calc(100dvh - var(--gora-h) - 2px);
  margin: calc(var(--k-5) * -1) calc(var(--k-5) * -1) calc(var(--k-7) * -1); }
.mapa-pelna .mapa { height: 100%; border: 0; border-radius: 0; }

.mapa-szukaj { position: absolute; top: var(--k-3); left: var(--k-3); z-index: 6; width: min(360px, 62%);
  display: flex; align-items: center; gap: var(--k-2); background: var(--plyta);
  border: 1px solid var(--linia-3); border-radius: 999px; padding: 0 var(--k-4); height: 40px;
  box-shadow: var(--cien-2); color: var(--sz-2); }
.mapa-szukaj input { flex: 1; height: 38px; border: 0; background: none; padding: 0;
  font: 500 var(--t-baza)/1 var(--font); color: var(--tekst); }
.mapa-szukaj input:focus { box-shadow: none; }
.mapa-szukaj ul { position: absolute; top: 46px; left: 0; right: 0; list-style: none; margin: 0;
  padding: 4px; background: var(--plyta); border: 1px solid var(--linia-3); border-radius: var(--r-2);
  box-shadow: var(--cien-2); max-height: 52vh; overflow: auto; }
.mapa-szukaj li { padding: 7px 10px; border-radius: 3px; cursor: pointer; font-size: var(--t-mala);
  display: flex; gap: var(--k-2); align-items: baseline; }
.mapa-szukaj li:hover { background: var(--akcent-tlo); color: var(--akcent); }
.mapa-szukaj li em { font-style: normal; margin-left: auto; font: 500 var(--t-mini)/1 var(--mono);
  color: var(--sz-2); }
.mapa-szukaj li[aria-selected=true] { background: var(--akcent-tlo); }
.mapa-szukaj li mark, dialog.paleta li .miejsce mark { background: none; color: var(--akcent); font-weight: 700; }
.mapa-szukaj li.podp-uwaga, .mapa-szukaj li.podp-pusto, dialog.paleta li.uwaga {
  cursor: default; font-size: var(--t-mini); color: var(--sz); padding: 6px 10px; }
.mapa-szukaj li.podp-uwaga:hover, .mapa-szukaj li.podp-pusto:hover { background: none; color: var(--sz); }

/* Wiersz wyniku wyszukiwania (mapa i paleta): znacznik rodzaju w stałej kolumnie, żeby nazwy
   stały w jednej linii, a pod nazwą - gdzie to jest. Rodzaj jest na wierzchu, bo „Wrzeszcz"
   dzielnica i „Wrzeszczańska" ulica to dwie różne odpowiedzi na to samo pytanie. */
.rodzaj-miejsca { flex: 0 0 74px; font: 600 var(--t-mikro)/1.3 var(--mono); text-transform: uppercase;
  letter-spacing: .06em; color: var(--sz-2); padding-top: 3px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.rodzaj-adres, .rodzaj-ulica, .rodzaj-rondo { color: var(--akcent); }
.rodzaj-miasto, .rodzaj-gmina, .rodzaj-dzielnica { color: var(--tekst); }
.miejsce { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.miejsce b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miejsce small { font-size: var(--t-mini); color: var(--sz-2); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.mapa-szukaj li[aria-selected=true] .miejsce b { color: var(--akcent); }

/* Pinezka wybranego miejsca: adres, rondo, wieś. Ostrze w punkcie (anchor: bottom). */
.pinezka { width: 26px; height: 34px; pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 34'%3E%3Cpath d='M13 1C6.4 1 1 6.3 1 12.8 1 21.6 13 33 13 33s12-11.4 12-20.2C25 6.3 19.6 1 13 1z' fill='%23e5484d' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='13' cy='12.6' r='4.2' fill='%23fff'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); animation: pinezka-spada .35s cubic-bezier(.3,1.5,.6,1) both; }
@keyframes pinezka-spada { from { transform: translateY(-14px); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .pinezka { animation: none; } }

.mapa-narzedzia { position: absolute; top: var(--k-3); right: var(--k-3); z-index: 6;
  display: flex; flex-direction: column; gap: var(--k-2); align-items: flex-end; }
.narz { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 var(--k-3);
  background: var(--plyta); border: 1px solid var(--linia-3); border-radius: var(--r-2);
  color: var(--sz); font: 600 var(--t-mala)/1 var(--font); box-shadow: var(--cien-2); }
.narz:hover { color: var(--tekst); filter: none; }
.narz.akt { background: var(--akcent-tlo); color: var(--akcent); border-color: var(--akcent); }
.narz--kwadrat { width: 36px; padding: 0; justify-content: center; font-family: var(--mono); }

.mapa-panel { position: absolute; top: calc(var(--k-3) + 44px); right: var(--k-3); z-index: 7;
  width: min(300px, 78vw); max-height: calc(100% - 70px); overflow: auto;
  background: var(--plyta); border: 1px solid var(--linia-3); border-radius: var(--r-2);
  box-shadow: var(--cien-2); padding: var(--k-3) var(--k-4) var(--k-4); }
.mapa-panel h3 { margin: var(--k-4) 0 var(--k-2); }
.mapa-panel h3:first-child { margin-top: 0; }
.wybor { display: flex; gap: 1px; background: var(--linia); border: 1px solid var(--linia);
  border-radius: var(--r); overflow: hidden; }
.wybor a, .wybor button { flex: 1; height: 30px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--plyta); color: var(--sz); border: 0; border-radius: 0;
  font: 500 var(--t-mala)/1 var(--mono); }
.wybor a:hover, .wybor button:hover { background: var(--plyta-2); color: var(--tekst); text-decoration: none; filter: none; }
.wybor a.akt, .wybor button.akt { background: var(--akcent-tlo); color: var(--akcent); font-weight: 600; }
.przelacznik { display: flex; align-items: center; gap: var(--k-2); padding: 5px 0;
  font-size: var(--t-mala); color: var(--tekst); cursor: pointer; }
.przelacznik input { width: 15px; height: 15px; accent-color: var(--akcent); }
.przelacznik em { font-style: normal; margin-left: auto; font: 500 var(--t-mikro)/1 var(--mono);
  color: var(--sz-2); }
.mapa-opis { color: var(--sz); font-size: var(--t-mini); line-height: 1.5; margin: var(--k-2) 0 0; }
/* [hidden] ustawia display:none, ale każda późniejsza reguła z display wygrywa — bez tej
   linijki obie legendy pokazywały się naraz. */
.legenda-mapa { display: flex; flex-direction: column; gap: 2px; font: 500 var(--t-mini)/1.4 var(--mono);
  color: var(--sz); }
.legenda-mapa span { display: flex; align-items: center; gap: 7px; }
.legenda-mapa i { width: 16px; height: 10px; border-radius: 2px; flex: 0 0 auto; }

.mapa-skala { position: absolute; left: var(--k-3); bottom: var(--k-4); z-index: 5;
  border: 1px solid var(--sz-2); border-top: 0; height: 9px; color: var(--sz);
  font: 500 var(--t-mikro)/1 var(--mono); text-align: center; padding-top: 2px;
  background: color-mix(in srgb, var(--plyta) 70%, transparent); }

@media (max-width: 760px) {
  .mapa-pelna { margin: calc(var(--k-4) * -1) calc(var(--k-4) * -1) calc(var(--k-6) * -1);
    height: calc(100dvh - 150px); }
  .mapa-szukaj { width: calc(100% - var(--k-3) * 2 - 92px); }
  .mapa-panel { left: var(--k-3); right: var(--k-3); width: auto; }
}

/* ── Strona pełnoekranowa (mapa) ───────────────────────────────────────────────
   Mapa JEST treścią, więc strona pod nią nie ma się przewijać. Wcześniej kółko myszy
   nad mapą przesuwało stronę dokładnie o wysokość stopki (109 px na biurku, 144 na
   telefonie) i mapa uciekała spod kursora.

   Układ kolumnowy, a nie wyliczanie „100dvh minus wysokość nagłówka": nagłówek na telefonie
   ma dwa wiersze i każda taka stała po prostu kłamie. */
body.pelny-ekran { display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
  overscroll-behavior: none; }
body.pelny-ekran .stopka { display: none; }   /* źródła są w podpisie na samej mapie */
body.pelny-ekran .mapa-pelna { height: 100%; margin: 0; }
body.pelny-ekran .mapa-pelna .mapa { height: 100%; }

/* ── Mapa na telefonie ─────────────────────────────────────────────────────────
   Palec ma 44 px, kursor jeden. Wszystko, w co się klika, rośnie; panele wjeżdżają
   od dołu jak szuflady, bo panel „z boku" na ekranie 390 px to pasek bez treści. */
@media (max-width: 760px) {
  .mapa-szukaj { top: var(--k-2); left: var(--k-2); height: 44px; width: calc(100% - 104px); }
  .mapa-szukaj input { height: 42px; font-size: 16px; }   /* 16 px: mniejsze pole każe iOS-owi
                                                             przybliżyć całą stronę przy dotknięciu */
  .mapa-narzedzia { top: var(--k-2); right: var(--k-2); gap: 6px; }
  .narz { height: 44px; padding: 0 var(--k-3); }
  .narz span { display: none; }            /* zostaje sama ikona — nazwa zjadałaby pół ekranu */
  .narz--kwadrat { width: 44px; }

  .mapa-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    max-height: 72dvh; border-radius: var(--r-2) var(--r-2) 0 0; border-bottom: 0;
    padding-bottom: calc(var(--k-5) + env(safe-area-inset-bottom, 0px)); }
  .mapa-panel::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px;
    background: var(--linia-3); margin: 0 auto var(--k-3); }   /* uchwyt szuflady */
  .wybor a, .wybor button { height: 40px; }
  .przelacznik { padding: 10px 0; font-size: var(--t-baza); }
  .przelacznik input { width: 20px; height: 20px; }

  .panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    max-height: 66dvh; border-radius: var(--r-2) var(--r-2) 0 0;
    padding-bottom: calc(var(--k-4) + env(safe-area-inset-bottom, 0px)); }
  .panel-zamknij { width: 40px; height: 40px; top: 4px; right: 4px; font-size: 22px; }

  /* nad paskiem źródeł, nie pod nim — na telefonie pasek zasłaniał podziałkę */
  .mapa-skala { bottom: calc(var(--k-3) + 30px + env(safe-area-inset-bottom, 0px)); }
  .maplibregl-ctrl-bottom-right { margin-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Dwa miejsca, w których treść wystawała poza ekran telefonu.
   Zakładki są paskiem wyboru, więc na wąskim ekranie przewijają się w bok zamiast rozpychać
   stronę; długi adres w <code> ma się łamać w dowolnym miejscu, bo nie ma w nim spacji. */
@media (max-width: 760px) {
  .zakladki { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .zakladki::-webkit-scrollbar { display: none; }
  .zakladki a { white-space: nowrap; flex: 0 0 auto; }
  code { overflow-wrap: anywhere; word-break: break-word; }
}

/* ── Menedżer warstw ──────────────────────────────────────────────────────────
   Wiersz = jedna warstwa: pole wyboru, nazwa, suwak krycia. Suwak siedzi w <label>,
   więc kod musi mu zablokować propagację kliknięcia — inaczej każde przesunięcie
   przełączałoby pole wyboru obok. */
.warstwy-lista { display: flex; flex-direction: column; gap: 1px; margin-bottom: var(--k-2); }
.wiersz { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: var(--k-2);
  padding: 5px 0; font-size: var(--t-mala); color: var(--tekst); cursor: pointer; }
.wiersz input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--akcent); }
.wiersz span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiersz input[type=range] { width: 66px; height: 3px; accent-color: var(--akcent);
  background: var(--linia); border-radius: 2px; cursor: ew-resize; }
.mapa-panel h3 { display: flex; align-items: center; gap: var(--k-2); }
button.mini { background: none; border: 1px solid var(--linia); color: var(--sz-2); height: 18px;
  padding: 0 6px; border-radius: 2px; font: 500 var(--t-mikro)/1 var(--mono); text-transform: none;
  letter-spacing: 0; margin-left: auto; }
button.mini:hover { color: var(--tekst); border-color: var(--linia-3); filter: none; }

/* ── Legenda na mapie ─────────────────────────────────────────────────────────
   Osobny element, nie sekcja panelu: przy wyborze warstw trzeba jednocześnie widzieć,
   co znaczy kolor, a panel przy tym znika. */
.mapa-legenda { position: absolute; left: var(--k-3); bottom: calc(var(--k-4) + 28px); z-index: 5;
  background: color-mix(in srgb, var(--plyta) 92%, transparent); border: 1px solid var(--linia-3);
  border-radius: var(--r-2); box-shadow: var(--cien-2); padding: var(--k-3);
  backdrop-filter: blur(8px); max-width: 190px; }
/* Legenda po prawej: na szerokim ekranie lewy dolny róg bywa zajęty przez to, co człowiek
   akurat ogląda. Reguła MUSI stać po bazowej, bo ma tę samą szczegółowość. */
.mapa-legenda.po-prawej { left: auto; right: var(--k-3); }
/* Wstęga barw bez liczb — dla kogoś, kto zna skalę i chce samego paska. */
.legenda-mapa.bez-liczb { display: flex; gap: 0; }
.legenda-mapa.bez-liczb span { display: block; }
.legenda-mapa.bez-liczb i { width: 20px; height: 10px; margin: 0; border-radius: 0; }
.mapa-legenda h4 { margin: 0 var(--k-4) var(--k-2) 0; font: 600 var(--t-mikro)/1.2 var(--mono);
  text-transform: uppercase; letter-spacing: .08em; color: var(--sz-2); }
.legenda-zwin { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; padding: 0;
  background: none; border: 0; color: var(--sz-2); font-size: 15px; line-height: 1; }
.legenda-zwin:hover { color: var(--tekst); filter: none; }
.mapa-legenda.zwinieta .legenda-tresc > *:not(h4) { display: none; }
.mapa-legenda.zwinieta { padding-bottom: var(--k-2); }
.legenda-stopka { margin: var(--k-2) 0 0; font-size: var(--t-mikro); color: var(--sz-2); line-height: 1.4; }

@media (max-width: 760px) {
  .mapa-legenda { left: var(--k-2); bottom: calc(var(--k-3) + 58px + env(safe-area-inset-bottom, 0px));
    max-width: 150px; padding: var(--k-2); }
  .mapa-legenda.po-prawej { left: auto; right: var(--k-2); }
  .wiersz { padding: 9px 0; font-size: var(--t-baza); grid-template-columns: 20px 1fr auto; }
  .wiersz input[type=checkbox] { width: 20px; height: 20px; }
  .wiersz input[type=range] { width: 76px; height: 20px; }
}


/* ── Panel budynku: mieszkania, nie akty ────────────────────────────────────────────────────
   Jednostką jest lokal, więc wiersz musi pomieścić dwa poziomy: czym to mieszkanie jest
   (metraż, izby, piętro) i co się z nim działo (ile razy sprzedane, o ile drożej). */

/* Werdykt: jedna liczba na całą szerokość, bo odpowiada na pytanie, po które człowiek kliknął.
   Nie .karta — ta ma stopień pisma skalowany do kolumny strony i w panelu 346 px się rozbija. */
.werdykt { display: flex; align-items: baseline; gap: var(--k-3); margin: var(--k-3) 0 var(--k-2);
  padding: var(--k-3); border-radius: var(--r-2); background: var(--plyta-2);
  border-left: 3px solid var(--linia); }
.werdykt b { font: 520 calc(var(--t-kpi) * .9)/1 var(--mono); letter-spacing: -.03em; }
.werdykt span { color: var(--sz); font: 500 var(--t-mini)/1.3 var(--font); }
.werdykt.drozej { border-left-color: var(--spadek); }
.werdykt.drozej b { color: var(--spadek); }
.werdykt.taniej { border-left-color: var(--wzrost); }
.werdykt.taniej b { color: var(--wzrost); }
.panel-zastrzezenie { border-left: 3px solid var(--linia); padding-left: var(--k-3); }

/* „O tych danych" zwinięte: przy budynku bez zastrzeżeń nie ma tej sekcji wcale, a przy
   budynku z nimi nie zabiera miejsca mieszkaniom, dopóki ktoś nie zapyta. */
.panel-jakosc { margin: var(--k-3) 0; font-size: var(--t-mini); color: var(--sz); }
.panel-jakosc summary { cursor: pointer; color: var(--sz-2); text-transform: uppercase;
  letter-spacing: .08em; font-size: var(--t-mikro); }
.panel-jakosc ul { margin: var(--k-2) 0 0; padding-left: 1.1em; }
.panel-jakosc li { margin-bottom: 2px; line-height: 1.4; }

/* Wiersz mieszkania. Druga linijka pojawia się TYLKO przy lokalu sprzedanym więcej niż raz —
   a takich jest niecałe dziesięć procent, więc lista zostaje gęsta. */
table.panel-lokale td:first-child { white-space: normal; }
.lokal-historia { display: block; color: var(--sz-2); font-size: var(--t-mikro); margin-top: 1px; }
.lokal-historia em { font-style: normal; font-family: var(--mono); font-weight: 600; }
.lokal-historia em.wzrost { color: var(--wzrost); }
.lokal-historia em.spadek { color: var(--spadek); }
/* Tylda przy cenie wyliczonej z aktu obejmującego więcej składników — znak, nie zdanie,
   bo dotyczy co trzeciego aktu i zdanie przy każdym byłoby ścianą tekstu. */
.lokal-znacznik { color: var(--sz-2); margin-left: 2px; cursor: help; }
/* Numer mieszkania. Monospace i stała szerokość minimalna, żeby numery ustawiły się
   w kolumnę mimo braku osobnej komórki - lista czyta się wtedy jak spis lokatorów.
   Kropka po „m." zostaje w treści, nie w stylu, bo to skrót, a nie ozdobnik. */
.lokal-nr { font-family: var(--mono); font-weight: 700; color: var(--tekst);
            display: inline-block; min-width: 3.4em; margin-right: var(--k-1); }
/* Zdanie o mieszkaniach bez numeru - ma być czytelne, ale nie ma konkurować z listą. */
.panel-uwaga { margin: 0 0 var(--k-1); font-size: var(--t-mikro); }
.panel-tresc h3 { margin: var(--k-4) 0 var(--k-2); font: 600 var(--t-mikro)/1 var(--mono);
  text-transform: uppercase; letter-spacing: .08em; color: var(--sz-2); }
.panel-tresc h3 .panel-pod { display: inline; text-transform: none; letter-spacing: 0; }
.panel-tresc button.mini { margin-top: var(--k-2); width: 100%; }

/* Pasek przekroju rozchodzi się od mediany budynku w obie strony — jak kalendarz rynku
   na stronie gminy. Kreska w środku to poziom odniesienia. */
table.przekroj.rozbieznie td.pasek { position: relative; }
table.przekroj.rozbieznie td.pasek::before { content: ""; position: absolute; left: 50%;
  top: 4px; bottom: 4px; width: 1px; background: var(--linia-3); }
table.przekroj.rozbieznie td.pasek span { background: var(--spadek); opacity: .8; }
table.przekroj.rozbieznie td.pasek span.ujemny { background: var(--wzrost); }
/* Wiersz oparty na jednej albo dwóch transakcjach: bez paska i przygaszony. Liczba jest
   prawdziwa, ale nie jest poziomem cen i nie ma udawać, że jest. */
table.przekroj tr.slabe td { color: var(--sz-2); }
table.przekroj tr.slabe td b { font-weight: 500; }
/* Opis mieszkania ma pierwszeństwo nad liczbami: to on odpowiada na pytanie „które to
   mieszkanie", a liczby i tak są wyrównane do prawej i czyta się je kolumną. */
/* Opis mieszkania dostaje całą resztę szerokości, a liczby tylko tyle, ile naprawdę zajmują.
   Bez `table-layout: auto` i ze sztywnym procentem kolumna opisu wypychała tabelę poza panel
   i cała treść przewijała się w poziomie. */
table.panel-lokale { table-layout: auto; }
table.panel-lokale td, table.panel-lokale th { padding-left: 3px; padding-right: 3px; }
table.panel-lokale td:not(:first-child), table.panel-lokale th:not(:first-child) {
  white-space: nowrap; text-align: right; width: 1%; }
table.panel-lokale td:first-child { white-space: normal; word-break: break-word; }
/* Przyklejony nagłówek listy musi mieć NIEPRZEZROCZYSTE tło — inaczej wiersze przewijające
   się pod nim prześwitują i nagłówek wygląda jak podwójnie wydrukowany. */
table.panel-lokale thead th { background: var(--plyta); box-shadow: 0 1px 0 var(--linia-3); }

/* ---------- karta budynku ---------- */
/* Karta budynku to spis lokatorów z historią: wiersz = mieszkanie, rozwinięcie = każda jego
   sprzedaż. Wiersz jest <details>, nie <tr>, bo tylko tak rozwija się bez JavaScriptu -
   a jego <summary> udaje wiersz tabeli siatką o tych samych kolumnach co nagłówek. */
.bud-akcje { display: flex; flex-wrap: wrap; gap: var(--k-2); margin: var(--k-3) 0 var(--k-4); }
.bud-akcje a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border: 1px solid var(--linia-3); border-radius: var(--r-pig); background: var(--plyta);
  font: 600 var(--t-mala)/1 var(--font); color: var(--tekst); white-space: nowrap; }
.bud-akcje a:hover { background: var(--plyta-3); text-decoration: none; }
.bud-akcje a:first-child { background: var(--tekst); border-color: transparent; color: var(--tlo); }
.bud-akcje a:first-child:hover { background: var(--tekst); opacity: .88; }
/* Kotwice nie mogą lądować pod przyklejonym nagłówkiem (46 px, na telefonie dwa wiersze).
   Cel #m-… to treść rozwinięcia, a nie sam <details> - tylko wtedy Chrome rozwija wiersz bez
   JavaScriptu - więc jej odstęp mieści jeszcze wiersz z numerem mieszkania nad nią
   (poniżej 1000 px wiersz ma dwie albo trzy linijki: na telefonie 77 px). */
.bud-kotwica, .bud-lok { scroll-margin-top: calc(var(--gora-h) + 16px); }
.bud-lok-tresc { scroll-margin-top: calc(var(--gora-h) + 16px + var(--wiersz) + 8px); }
@media (max-width: 1000px) { .bud-lok-tresc { scroll-margin-top: calc(var(--gora-h) + 16px + 84px); } }
@media (max-width: 820px) { .bud-kotwica, .bud-lok { scroll-margin-top: 104px; } .bud-lok-tresc { scroll-margin-top: 188px; } }
.bud-jakosc { max-width: 78ch; }
.bud-jakosc p { margin: var(--k-2) 0 0; line-height: 1.5; }
.bud-zdanie { font-size: var(--t-tresc); max-width: 86ch; line-height: 1.5; }
.bh-uwaga { color: var(--sz); font-size: var(--t-mini); margin: var(--k-2) 0 0; max-width: 78ch; }

/* Filtr listy: przyciski radiowe są niewidoczne, ale zostają w kolejności tabulacji -
   strzałki przełączają filtr jak w każdej grupie radiowej. */
.bud-lista { position: relative; }
.bud-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.bud-zakladki { margin: var(--k-2) 0 var(--k-3); }
.bud-zakladki label { padding: 0 14px; height: 30px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-pig); color: var(--sz); font: 580 var(--t-mala)/1 var(--font); cursor: pointer;
  white-space: nowrap; }
.bud-zakladki label:hover { color: var(--tekst); }
.bud-zakladki em { font-style: normal; color: var(--sz-2); }
#bf-wszystkie:checked ~ .bud-zakladki label[for="bf-wszystkie"],
#bf-ponownie:checked ~ .bud-zakladki label[for="bf-ponownie"],
#bf-flip:checked ~ .bud-zakladki label[for="bf-flip"] { background: var(--plyta); color: var(--tekst); font-weight: 650;
  box-shadow: var(--cien-1); }
#bf-wszystkie:focus-visible ~ .bud-zakladki label[for="bf-wszystkie"],
#bf-ponownie:focus-visible ~ .bud-zakladki label[for="bf-ponownie"],
#bf-flip:focus-visible ~ .bud-zakladki label[for="bf-flip"] { outline: 2px solid var(--akcent); outline-offset: -2px; }
#bf-ponownie:checked ~ .bud-lokale .bud-lok:not(.bud-lok--ponownie),
#bf-flip:checked ~ .bud-lokale .bud-lok:not(.bud-lok--flip) { display: none; }
.bud-pusto { display: none; padding: var(--k-3) var(--k-4); color: var(--sz); margin: 0; }
#bf-ponownie:checked ~ .bud-lokale .bud-pusto--ponownie,
#bf-flip:checked ~ .bud-lokale .bud-pusto--flip { display: block; }

/* Kolumny: numer, [klatka], piętro, izby, metraż, sprzedaży, pierwsza, ostatnia, zł/m², zmiana,
   przebieg, znacznik. Szerokości w em, bo treść to cyfry tabularne o znanej długości. */
/* Każdy <summary> to OSOBNA siatka, więc żadna kolumna nie może rosnąć z treścią (auto) -
   inaczej wiersz ze znacznikiem „szybka odsprzedaż" rozjeżdża się względem sąsiadów. */
.bud-lokale { --kol: minmax(6em, .8fr) 6.8em 4.6em 5.6em 7.4em minmax(8.6em, 1fr) minmax(8.6em, 1fr) 5.4em 5.4em 76px 136px;
  --obszary: "nr p i m n c1 c2 m2 zm is zn";
  border: 1px solid var(--linia); border-radius: var(--r-3); background: var(--plyta); overflow: hidden; }
.bud-lokale--klatki { --kol: minmax(6em, .8fr) minmax(4.6em, .5fr) 6.8em 4.6em 5.6em 7.4em minmax(8.6em, 1fr) minmax(8.6em, 1fr) 5.4em 5.4em 76px 136px;
  --obszary: "nr kl p i m n c1 c2 m2 zm is zn"; }
/* Każda komórka ma własny obszar siatki, więc pustych nie trzeba wypisywać - brakująca
   komórka zostawia dziurę w swojej kolumnie zamiast przesuwać w lewo wszystko za sobą. */
.bud-lok-glowa, .bud-lok > summary { display: grid; grid-template-columns: var(--kol);
  grid-template-areas: var(--obszary); column-gap: var(--k-3); align-items: center; padding: 0 var(--k-3); }
.bud-lokale .bl-nr { grid-area: nr; } .bud-lokale .bl-kl { grid-area: kl; } .bud-lokale .bl-p { grid-area: p; } .bud-lokale .bl-i { grid-area: i; }
.bud-lokale .bl-m { grid-area: m; } .bud-lokale .bl-n { grid-area: n; } .bud-lokale .bl-c1 { grid-area: c1; } .bud-lokale .bl-c2 { grid-area: c2; }
.bud-lokale .bl-m2 { grid-area: m2; } .bud-lokale .bl-zm { grid-area: zm; } .bud-lokale .bl-is { grid-area: is; } .bud-lokale .bl-zn { grid-area: zn; }
.bud-lok-glowa { height: 32px; background: var(--plyta-2); border-bottom: 1px solid var(--linia-3);
  color: var(--sz); font: 600 var(--t-mini)/1.25 var(--font); }
.bud-lokale .bl-m, .bud-lokale .bl-n, .bud-lokale .bl-c, .bud-lokale .bl-m2, .bud-lokale .bl-zm, .bud-lokale .bl-is { text-align: right; }
.bud-lokale .bud-lok-glowa > span { color: inherit; font-weight: inherit; }
.bud-lok > summary { min-height: var(--wiersz); cursor: pointer; list-style: none; border-bottom: 1px solid var(--linia-2);
  font: 400 var(--t-mala)/1.3 var(--font); font-variant-numeric: tabular-nums; }
.bud-lok > summary::-webkit-details-marker { display: none; }
.bud-lok:nth-of-type(even) > summary { background: var(--plyta-2); }
.bud-lok > summary:hover { background: var(--plyta-3); }
.bud-lok[open] > summary { background: var(--akcent-tlo); border-bottom-color: var(--linia-3); }
.bud-lok:has(> .bud-lok-tresc:target) > summary { box-shadow: inset 2px 0 0 var(--akcent); }
.bud-lokale .bl-nr { font-weight: 700; color: var(--tekst); white-space: nowrap; word-spacing: normal; }
/* Trójkąt rozwinięcia z obramowania, nie ze znaku: krój ma tylko ▲ i ▼, a ▸ z kroju
   zastępczego stał krzywo względem cyfr. */
.bud-lok > summary .bl-nr::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 7px; vertical-align: 1px;
  border: 4px solid transparent; border-left: 5px solid var(--sz-2); border-right: 0;
  transition: transform var(--szyb) var(--krzywa); }
.bud-lok[open] > summary .bl-nr::before { transform: rotate(90deg); border-left-color: var(--akcent); }
.bud-lokale .bl-opis { color: var(--sz); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-spacing: normal; }
.bud-lokale .bl-n { color: var(--sz); white-space: nowrap; word-spacing: normal; }
.bud-lokale .bl-c { white-space: nowrap; }
.bud-lokale .bl-c small { color: var(--sz-2); font-size: var(--t-mikro); margin-right: 3px; }
.bud-lokale .bl-m2 b { font-weight: 620; }
.bud-lokale .bl-zm { white-space: nowrap; }
.bud-lokale .bl-is { line-height: 0; }
.bud-lokale .bl-zn { white-space: nowrap; }
.bud-iskra { color: var(--sz); overflow: visible; vertical-align: middle; }
.bud-iskra.wzrost { color: var(--wzrost); }
.bud-iskra.spadek { color: var(--spadek); }
.bud-iskra polyline { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.bud-iskra circle { fill: currentColor; }

/* Rozwinięcie: akty po kolei, a między nimi para kupno → sprzedaż, wcięta, bo opisuje
   odstęp między dwoma wierszami, a nie osobne zdarzenie. */
.bud-lok-tresc { padding: var(--k-3) var(--k-4) var(--k-3) calc(var(--k-3) + 16px); background: var(--plyta-2);
  border-bottom: 1px solid var(--linia-3); }
.bud-hist { list-style: none; margin: 0; padding: 0; font-size: var(--t-mala); }
.bh-akt, .bh-para { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--k-4); }
.bh-akt { padding: 3px 0; font-variant-numeric: tabular-nums; }
.bh-akt .bh-data { color: var(--tekst); font-weight: 600; min-width: 6.4em; }

.bh-para { margin: 1px 0 1px 3px; padding: 3px 0 3px var(--k-4); border-left: 2px solid var(--linia-3);
  color: var(--sz); font-size: var(--t-mini); }
.bh-para b { font: 650 var(--t-mala)/1 var(--font); font-variant-numeric: tabular-nums; }
.bh-para--nie { border-left-style: dashed; }
.bud-lok-linki { margin: var(--k-2) 0 0; font-size: var(--t-mala); }
.bh-akt a { font: 500 var(--t-mala)/1.3 var(--font); }

.bud-flipy td .odsp { vertical-align: 0; }

/* Panel budynku na mapie: wejście na kartę i linijka o flipach. Odnośnik jest przyciskiem na
   całą szerokość, bo to jedyne przejście „głębiej" z panelu - drobny link ginął wśród liczb. */
.panel .panel-karta { display: flex; align-items: center; justify-content: center; min-height: 32px;
  margin: var(--k-2) 0 var(--k-3); padding: 4px var(--k-3); border: 1px solid var(--akcent);
  border-radius: var(--r); background: var(--akcent-tlo); color: var(--akcent);
  font: 600 var(--t-mala)/1.25 var(--font); text-align: center; }
.panel .panel-karta:hover { filter: brightness(1.1); text-decoration: none; }
.panel .panel-flipy .odsp { margin-right: 4px; }
.panel .lokal-historia .odsp { margin-left: 4px; padding: 2px 4px; }
@media (max-width: 760px) { .panel .panel-karta { min-height: 44px; } }
/* Rok po roku i przekroje: osobne płytki, nie jedna rozcięta włosem - przy nieparzystej liczbie
   pusta komórka siatki świeciłaby kolorem linii jak dziura w panelu. */
.bud-przekroje { display: grid; gap: var(--k-3); margin: var(--k-4) 0;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.bud-przekroje > .karta { border: 1px solid var(--linia); border-radius: var(--r-3); }
.bud-przekroje .karta h3 { margin-bottom: var(--k-2); }

/* Poniżej 1000 px dwanaście kolumn się nie mieści: wiersz składa się w dwie linijki - opis
   mieszkania i cena metra u góry, historia sprzedaży pod spodem. */
@media (max-width: 1000px) {
  .bud-lok-glowa { display: none; }
  .bud-lok > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px;
    padding: 7px var(--k-3); }
  .bud-lok > summary > span { text-align: left !important; }
  .bud-lokale .bl-nr { order: 0; }
  .bud-lokale .bl-opis { order: 1; }
  .bud-lokale .bl-opis::before { content: "· "; color: var(--sz-2); }
  .bud-lokale .bl-m2 { order: 2; margin-left: auto; }
  /* Łamanie wiersza bez dodatkowego elementu: pseudoelement kontenera flex też jest
     elementem flex i przyjmuje `order`. */
  .bud-lok > summary::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .bud-lokale .bl-n { order: 4; padding-left: 16px; }
  .bud-lokale .bl-c1 { order: 5; }
  .bud-lokale .bl-c1::after { content: " →"; color: var(--sz-2); }
  .bud-lokale .bl-c2 { order: 6; }
  .bud-lokale .bl-zm { order: 7; }
  .bud-lokale .bl-is { order: 8; }
  .bud-lokale .bl-zn { order: 9; margin-left: auto; }
  .bud-lok-tresc { padding: var(--k-2) var(--k-3) var(--k-3) calc(var(--k-3) + 8px); }
  .bud-zakladki { display: flex; flex-wrap: wrap; overflow: visible; border-radius: 20px; }
  .bud-zakladki label { flex: 1 1 auto; justify-content: center; padding: 0 var(--k-3); height: 34px; border-radius: 17px; }
}
/* Dwie kolumny kart na telefonie: nieparzysta ostatnia karta bierze cały wiersz, zamiast
   zostawiać obok siebie szarą dziurę. */
@media (max-width: 480px) { .bud-karty > .karta:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* ─── [C3] NARZĘDZIA — właściciel P4c ─── */
/* Narzędzia (eksplorator, rankingi, indeks, porównanie, wycena, jakość danych, stan, API, szukaj)
   w powłoce RCS 2: dokument na pełną szerokość treści (SPEC 6.5 — bez panelu 440 px), nagłówek jak
   karta bytu (etykieta, tytuł, jedno zdanie), niżej wspólne komponenty z tego regionu. */
.nagl-strony { margin: 0 0 var(--k-4); }
.nagl-strony .etk-strony { margin: 0 0 var(--k-2); font: 600 var(--t-mini)/1.3 var(--font); color: var(--sz); }
.nagl-strony h1 { margin-bottom: 10px; }
.nagl-strony p.sub { font-size: var(--t-tresc); line-height: 1.55; max-width: 76ch; margin-bottom: var(--k-2); }
.nagl-strony p.sub:last-child { margin-bottom: 0; }
/* podpis pod wykresem w płycie wykresu i dopisek szarym przy nagłówku sekcji */
.pod-wykresem { margin: 10px 0 0; font-size: var(--t-mini); line-height: 1.5; color: var(--sz); max-width: 78ch; }
.h2-dopisek { font-weight: 450; font-stretch: 100%; letter-spacing: 0; }
.pole-szerokie { min-width: 190px; }
form.filtry select.pole-szerokie { width: 200px; }
/* eksplorator: zdanie o domyślnych dwóch latach tuż pod formularzem, stronicowanie pod tabelą */
.eks-domyslne { margin-top: calc(-1 * var(--k-2)); }
.eks-stopka { display: flex; gap: var(--k-2) var(--k-4); align-items: center; flex-wrap: wrap; margin-top: var(--k-3); max-width: none; }
.eks-stopka .sz { font-size: var(--t-mini); }
/* wycena: nagłówek wyniku bliżej formularza — to odpowiedź na to, co przed chwilą wpisano */
h2.wycena-wynik { margin-top: var(--k-5); }
/* Wycena od adresu (pakiet V). Formularz to form.filtry (pola, podpisy, pigułka przycisku), ale
   w siatce: adres na całą szerokość, pod nim cechy lokalu, pod nimi budynek z danych. Pola
   mieszkania (.wy-lok) znikają przy działce i domu — te wyceniamy z gminy. */
form.filtry.wy-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 14px var(--k-3); }
form.filtry.wy-form label { min-width: 0; }
form.filtry.wy-form label :is(input, select) { width: 100%; }
.wy-form.wy-nie-lokal .wy-lok { display: none; }
/* UX, etap C3: rodzaj i tryb nad adresem - segmenty z przycisków radiowych (działają bez JS, klawiatura jak radio) */
.wy-wybor { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--k-2) var(--k-3); min-width: 0; }
.wy-seg { display: inline-flex; gap: 2px; min-width: 0; max-width: 100%; margin: 0; padding: 3px; border: 0;
  border-radius: var(--r-pig); background: var(--plyta-3); }
form.filtry .wy-seg label { position: relative; flex-direction: row; align-items: center; justify-content: center;
  min-height: 34px; padding: 4px 14px; border-radius: var(--r-pig); color: var(--sz); font: 600 var(--t-mala)/1.2 var(--font);
  text-align: center; cursor: pointer; }
form.filtry .wy-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
form.filtry .wy-seg label:hover { color: var(--tekst); }
form.filtry .wy-seg label:has(input:checked) { background: var(--plyta); color: var(--tekst); box-shadow: var(--cien-1); }
form.filtry .wy-seg label:has(input:focus-visible) { outline: 2px solid var(--akcent); outline-offset: 1px; }
@media (max-width: 600px) {
  .wy-seg { display: flex; width: 100%; }
  form.filtry .wy-seg label { flex: 1 1 0; min-width: 0; padding: 4px 8px; }
}
.wy-adres { grid-column: 1 / -1; position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wy-adres > label { color: var(--sz); font: 600 var(--t-mini)/1.3 var(--font); }
.wy-adres-pole { display: flex; gap: var(--k-2); min-width: 0; }
form.filtry .wy-adres-pole input[type=search] { flex: 1 1 auto; width: auto; min-width: 0; height: 44px;
  font-size: var(--t-tresc); border-radius: 12px; }
form.filtry .wy-adres-pole .wy-wskaz { flex: none; height: 44px; padding: 0 16px; border-radius: 12px; gap: 6px;
  background: var(--plyta-2); color: var(--tekst); border: 1px solid var(--linia-3); font-weight: 600; }
form.filtry .wy-adres-pole .wy-wskaz .ik { width: 18px; height: 18px; color: var(--akcent); }
form.filtry .wy-adres-pole .wy-wskaz:hover { border-color: var(--sz-2); opacity: 1; }
.wy-adres .eks-podpowiedzi { top: 70px; }
.wy-miejsce { margin: 0; min-height: 1.35em; font: 500 var(--t-mini)/1.35 var(--font); color: var(--sz); max-width: none; }
/* cena mieszkań w miejscu od razu po wyborze adresu (rcs-wycena.js pokazPodglad, 14.10.2026) */
.wy-podglad-linia { margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--akcent-tlo);
  color: var(--tekst); font: 500 var(--t-baza)/1.4 var(--font); max-width: none; }
.wy-podglad-linia b { font-weight: 720; }
.wy-podglad-linia span { color: var(--sz); font-size: var(--t-mini); }
/* adres wpisany z mapy: krótki błysk pola - widać, co się zmieniło po zamknięciu okna */
@keyframes wy-wypelnione { from { border-color: var(--akcent); box-shadow: 0 0 0 4px var(--akcent-cien); } }
form.filtry .wy-adres-pole input.wy-wypelnione { animation: wy-wypelnione 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) { form.filtry .wy-adres-pole input.wy-wypelnione { animation: none; } }

/* „Wskaż na mapie” (02.10.2026): okno z mapą. Biurko - duże okno na środku; telefon (≤ 760 px) - pełny ekran
   (jeden palec przesuwa mapę, nic pod spodem się nie przewija). Na dole stan wyboru i „Wybierz to miejsce”. */
html.wy-wskaz-otwarte { overflow: hidden; }
html dialog.wy-wskaz-okno { position: fixed; inset: 0; margin: auto; padding: 0; border: 0;
  width: min(1120px, calc(100vw - 48px)); max-width: none; height: min(780px, calc(100dvh - 48px)); max-height: none;
  border-radius: var(--r-4); background: var(--plyta); color: var(--tekst); box-shadow: var(--cien-plyw);
  overflow: hidden; overscroll-behavior: contain; }
html dialog.wy-wskaz-okno[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
html dialog.wy-wskaz-okno::backdrop { background: color-mix(in srgb, var(--tlo, #0a0d12) 55%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.wy-wskaz-gora { display: flex; align-items: center; gap: var(--k-3); padding: 10px 10px 10px var(--k-4);
  border-bottom: 1px solid var(--linia); min-width: 0; }
.wy-wskaz-t { flex: none; margin: 0; font: 650 var(--t-baza)/1.2 var(--font); }
.wy-wskaz-t:focus { outline: 0; }
.wy-wskaz-szukaj { position: relative; flex: 1 1 auto; max-width: 520px; min-width: 0; margin-left: auto;
  display: flex; align-items: center; gap: var(--k-2); height: 44px; padding: 0 var(--k-3);
  border: 1px solid var(--linia-3); border-radius: 12px; background: var(--plyta-2); color: var(--sz-2); }
.wy-wskaz-szukaj:focus-within { border-color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-cien); background: var(--plyta); }
html .wy-wskaz-szukaj input { flex: 1; min-width: 0; height: 42px; padding: 0; border: 0; border-radius: 0; background: none;
  box-shadow: none; color: var(--tekst); font: 500 16px/1 var(--font); }
html .wy-wskaz-szukaj input:focus { box-shadow: none; }
.wy-wskaz-szukaj .eks-podpowiedzi { top: 48px; z-index: 30; max-height: min(360px, 50dvh); }
.wy-wskaz-szukaj li.podp-uwaga, .wy-wskaz-szukaj li.podp-pusto { cursor: default; color: var(--sz); font-size: var(--t-mini); background: none; }
html .wy-wskaz-okno button.wy-wskaz-x { flex: none; width: 44px; height: 44px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; border: 0; border-radius: 12px; background: none; color: var(--sz); }
html .wy-wskaz-okno button.wy-wskaz-x:hover { background: var(--plyta-3); color: var(--tekst); filter: none; }
.wy-wskaz-x-wstecz { display: none; }
.wy-wskaz-el { position: relative; min-height: 0; background: var(--mapa-lad); }
.wy-wskaz-lad { margin: 0; padding: var(--k-4); font-size: var(--t-mini); color: var(--sz); }
/* celownik na środku, gdy mapę obsługuje klawiatura (Enter zaznacza to, co pod nim) */
.wy-wskaz-el:has(canvas:focus-visible)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px;
  margin: -11px 0 0 -11px; border: 2px solid var(--akcent); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px var(--plyta); }
.wy-wskaz-dol { display: flex; align-items: center; gap: var(--k-2); padding: 10px var(--k-4);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linia); min-width: 0; }
.wy-wskaz-stan { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 2px;
  font: 500 var(--t-mala)/1.35 var(--font); color: var(--sz); }
.wy-wskaz-stan b { font: 650 var(--t-baza)/1.3 var(--font); color: var(--tekst); overflow-wrap: anywhere; }
.wy-wskaz-stan small { font-size: var(--t-mini); color: var(--sz); }
.wy-wskaz-stan--uwaga { color: var(--uwaga-tekst); }
.wy-wskaz-stan small.wy-wskaz-ostrz { color: var(--uwaga-tekst); font-weight: 600; }
html .wy-wskaz-okno .wy-wskaz-dol button { flex: none; height: 44px; padding: 0 18px; border-radius: var(--r-pig);
  font: 650 var(--t-mala)/1 var(--font); }
html .wy-wskaz-okno button.wy-wskaz-anuluj { border: 1px solid var(--linia-3); background: var(--plyta); color: var(--tekst); }
html .wy-wskaz-okno button.wy-wskaz-anuluj:hover { background: var(--plyta-3); filter: none; }
html .wy-wskaz-okno button.wy-wskaz-ok { padding: 0 24px; border: 0; background: var(--akcent); color: var(--akcent-na); }
html .wy-wskaz-okno button.wy-wskaz-ok:disabled { background: var(--plyta-3); color: var(--sz-2); cursor: default; transform: none; filter: none; }
.wy-wskaz-okno .maplibregl-ctrl-group button { width: 36px; height: 36px; }
@media (max-width: 760px) {
  html dialog.wy-wskaz-okno { width: 100vw; height: 100dvh; border-radius: 0; }
  .wy-wskaz-gora { gap: var(--k-2); padding: 8px 8px 8px 12px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .wy-wskaz-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wy-wskaz-szukaj { max-width: none; margin-left: 0; }
  .wy-wskaz-dol { flex-wrap: wrap; padding: 10px 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .wy-wskaz-stan { flex-basis: 100%; min-height: 2.6em; }
  html .wy-wskaz-okno .wy-wskaz-dol button { height: 48px; }
  html .wy-wskaz-okno button.wy-wskaz-ok { flex: 1 1 auto; }
  /* zamknięcie na początku paska, strzałką: ✕ zostaje tylko w szukajce (czyści tekst) */
  .wy-wskaz-gora { padding-left: 4px; }
  html .wy-wskaz-okno button.wy-wskaz-x { order: -1; }
  .wy-wskaz-x-x { display: none; }
  .wy-wskaz-x-wstecz { display: block; }
  /* podpowiedzi: rodzaj małym drukiem nad nazwą - kolumna rodzaju ucinała nazwę do „Żupnic…” */
  .wy-wskaz-szukaj .eks-podpowiedzi li { flex-wrap: wrap; row-gap: 0; }
  .wy-wskaz-szukaj .eks-podpowiedzi .rodzaj-miejsca { flex-basis: 100%; }
  .wy-wskaz-szukaj .eks-podpowiedzi .miejsce { flex: 1 1 0; }
  .wy-wskaz-szukaj .eks-podpowiedzi .miejsce b { white-space: normal; }
}
.wy-bud { grid-column: 1 / -1; min-width: 0; margin: 0; padding: var(--k-3) 0 0; border: 0; border-top: 1px solid var(--linia); }
.wy-bud > legend { float: left; width: 100%; padding: 0 0 10px; font: 650 var(--t-mini)/1.3 var(--font); color: var(--tekst); }
.wy-bud > legend span { font-weight: 500; color: var(--sz); }
.wy-bud-pola { clear: both; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px var(--k-3); align-items: end; }
.wy-bud-opis { grid-column: span 2; align-self: center; margin: 0; font: 500 var(--t-mini)/1.4 var(--font); color: var(--sz); }
.wy-wiecej { grid-column: 1 / -1; }
.wy-wiecej > summary { cursor: pointer; width: max-content; max-width: 100%; font: 600 var(--t-mini)/1.3 var(--font); color: var(--sz); }
.wy-wiecej > summary:hover { color: var(--tekst); }
.wy-wiecej-pola { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px var(--k-3); align-items: end; margin-top: var(--k-3); }
.wy-wiecej-pola p { grid-column: span 2; margin: 0; font-size: var(--t-mini); line-height: 1.45; color: var(--sz); }
form.filtry button.wy-licz { grid-column: 1 / -1; justify-self: start; height: 44px; padding: 0 32px; font-size: var(--t-baza); }
/* wynik: pewność kolorem liczby, trafność zdaniem pod kartami, czynniki obok mapki porównań */
.wy-pewnosc--w > b { color: var(--wzrost); }
.wy-pewnosc--n > b { color: var(--uwaga-tekst); }
.wy-trafnosc { margin: calc(-1 * var(--k-2)) 0 var(--k-5); max-width: 86ch; font-size: var(--t-mala); line-height: 1.55; color: var(--sz); }
.wy-trafnosc b { color: var(--tekst); }
.wy-uklad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--k-5); align-items: start; margin: 0 0 var(--k-5); }
.wy-uklad h2 { margin-top: 0; }
.wy-czynniki { list-style: none; margin: 0; padding: 0; background: var(--plyta); border: 1px solid var(--linia); border-radius: var(--r-3); }
.wy-czynniki li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--k-3); padding: 10px var(--k-4);
  border-bottom: 1px solid var(--linia-2); }
.wy-czynniki li:last-child { border-bottom: 0; }
.wy-czynniki span { font: 600 var(--t-mala)/1.35 var(--font); }
.wy-czynniki b { text-align: right; font: 650 var(--t-mala)/1.35 var(--font); font-variant-numeric: tabular-nums; }
.wy-czynniki small { grid-column: 1 / -1; font-size: var(--t-mini); line-height: 1.4; color: var(--sz); }
.wy-mapa-k { margin: 0; min-width: 0; }
.wy-mapa { height: 380px; border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--linia); background: var(--mapa-lad); }
.wy-mapa-k figcaption { margin-top: 6px; font-size: var(--t-mini); color: var(--sz); }
.wy-tab tr.wy-ten td { font-weight: 600; }
.wy-waga { display: inline-block; width: 56px; height: 6px; border-radius: 3px; vertical-align: middle;
  background: linear-gradient(90deg, var(--tekst) var(--w), var(--linia-3) var(--w)); }
.wy-oferty { list-style: none; margin: 0 0 var(--k-5); padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--k-2); }
.wy-oferty li { display: flex; align-items: center; justify-content: space-between; gap: var(--k-3); min-width: 0;
  padding: 10px var(--k-4); background: var(--plyta); border: 1px solid var(--linia); border-radius: var(--r-3); }
.wy-oferty a { display: flex; flex-direction: column; min-width: 0; color: inherit; }
.wy-oferty a b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wy-oferty a span { font-size: var(--t-mini); color: var(--sz); }
.wy-oferta-c { flex: none; text-align: right; font: 650 var(--t-mala)/1.3 var(--font); font-variant-numeric: tabular-nums; }
.wy-oferta-c small { display: block; font-weight: 500; font-size: var(--t-mini); color: var(--sz); }
@media (max-width: 900px) {
  form.filtry.wy-form, .wy-bud-pola, .wy-wiecej-pola { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wy-bud-opis, .wy-wiecej-pola p { grid-column: 1 / -1; }
  .wy-uklad { grid-template-columns: minmax(0, 1fr); }
  .wy-mapa { height: 300px; }
}
@media (max-width: 760px) {
  /* trzecia karta (pewność, długi opis) w pełnej szerokości zamiast pół płyty z pustym miejscem obok */
  .wy-wynik .karty > .karta:last-child:nth-child(odd) { grid-column: 1 / -1; }
  form.filtry.wy-form label { flex: none; }
  /* sama pinezka 44×44: pole adresu na całą szerokość (dawniej przycisk zabierał 122 z 342 px) */
  form.filtry .wy-adres-pole .wy-wskaz { width: 44px; padding: 0; justify-content: center; }
  form.filtry .wy-adres-pole .wy-wskaz span { display: none; }
  form.filtry .wy-adres-pole .wy-wskaz .ik { width: 22px; height: 22px; }
  form.filtry button.wy-licz { justify-self: stretch; }
  /* „Oszacuj” przyklejony do dołu ekranu: od metrażu do przycisku ~700 px, a klawiatura liczbowa iOS nie ma „Idź” */
  form.filtry button.wy-licz { position: sticky; bottom: calc(var(--dol-h) + env(safe-area-inset-bottom, 0px) + 10px); z-index: 5; box-shadow: 0 4px 16px rgb(0 0 0 / .18); }
  /* 16 px: mniejsze pole każe Safari na iOS przybliżyć całą stronę przy dotknięciu (jak paleta i mapa) */
  form.filtry.wy-form :is(input, select), form.filtry .wy-adres-pole input[type=search] { font-size: 16px; }
}
/* Szacunek: filtry porównań, przedział z backtestu, cena z ogłoszenia, histogram, trend, „co gdyby”, budynki
   (pakiet „Szacunek: filtry”). Filtry to druga płyta formularza (jak „Budynek”), wynik - sekcje dokumentu. */
.wy-filtry { grid-column: 1 / -1; min-width: 0; margin: 0; padding: var(--k-3) 0 0; border: 0; border-top: 1px solid var(--linia); }
.wy-filtry > legend { float: left; width: 100%; padding: 0 0 10px; font: 650 var(--t-mini)/1.3 var(--font); color: var(--tekst); }
.wy-filtry > legend span { font-weight: 500; color: var(--sz); }
.wy-filtry-pola { clear: both; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px var(--k-3); align-items: end; }
/* WebKit nie przycina tekstu wybranej opcji: długi podpis wystawał poza pole i poszerzał stronę */
.wy-filtry-pola select { overflow: hidden; text-overflow: ellipsis; }
.wy-filtry-stopka { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-2) var(--k-4); margin-top: var(--k-3); }
.wy-licznik { margin: 0; min-height: 1.35em; font: 500 var(--t-mala)/1.35 var(--font); color: var(--sz); max-width: none; }
.wy-licznik b { color: var(--tekst); font-weight: 650; font-variant-numeric: tabular-nums; }
.wy-licznik span { color: var(--sz-2); }
.wy-licznik--liczy { opacity: .55; transition: opacity .15s .12s; }
html.js form.filtry .wy-przelicz { display: none; }
form.filtry .wy-filtry-stopka .wy-przelicz { height: 32px; padding: 0 16px; }
.wy-czysc { font: 500 var(--t-mala)/1.35 var(--font); color: var(--sz); text-decoration: underline; }
.wy-czysc:hover { color: var(--tekst); }
.wy-wynik[aria-busy="true"] { opacity: .55; transition: opacity .15s .12s; }
.wy-wynik h2[tabindex="-1"]:focus { outline: none; }
.wy-karty { margin-bottom: var(--k-3); }
.wy-zdanie { margin: 0 0 var(--k-3); max-width: 86ch; font: 500 var(--t-tresc)/1.55 var(--font); color: var(--tekst); }
/* „Z czego to wynika” (pakiet „Wycena, etap 2”): połączenie porównań i modelu, stan cen */
.wy-zczego { margin: 0 0 var(--k-3); max-width: 86ch; color: var(--sz); }
/* przycisk w treści, który wygląda jak odnośnik (wyklucz, przywróć): cel dotyku 32 px w pionie */
button.wy-link { display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 0 4px; border: 0; background: none;
  color: var(--akcent); font: 500 var(--t-mini)/1.2 var(--font); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
button.wy-link:hover { color: var(--tekst); }
.wy-tab td:last-child { padding-right: 4px; }
/* cena z ogłoszenia: pod wynikiem (#sprawdz) albo w formularzu w trybie „kupuje”; kotwica #wynik tuż pod formularzem (UX B2) -
   przewinięcie zostawia miejsce na przyklejony pasek */
.wy-kotwica, #sprawdz { scroll-margin-top: calc(var(--pasek-h) + 12px); }
.wy-kotwica + * :is(h2, p)[tabindex="-1"]:focus, .wy-kotwica + [tabindex="-1"]:focus, #wy-sprawdz-t:focus { outline: none; }
.wy-sprawdz { margin: var(--k-4) 0 var(--k-5); }
.wy-sprawdz h2 { margin: 0 0 var(--k-2); }
.wy-sprawdz-pole { display: flex; gap: var(--k-2); max-width: 420px; }
.wy-sprawdz-pole input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linia-3);
  background: var(--plyta-2); color: var(--tekst); font: 500 var(--t-baza)/1 var(--font); font-variant-numeric: tabular-nums; }
.wy-sprawdz-pole input:focus { background: var(--plyta); border-color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-cien); outline: none; }
.wy-sprawdz-pole .przycisk { height: 40px; }
.wy-werdykt { margin: var(--k-3) 0 0; padding: 10px var(--k-4); max-width: 86ch; border-left: 3px solid var(--sz-2);
  background: var(--plyta); border-radius: 0 var(--r-2) var(--r-2) 0; font-size: var(--t-mala); line-height: 1.55; }
.wy-werdykt--t { border-left-color: var(--roz-taniej); }
.wy-werdykt--d { border-left-color: var(--roz-drozej); }
/* histogram: słupki w SVG bez zachowania proporcji, podpisy w HTML (czytelne przy każdej szerokości) */
.wy-hist { margin: 0 0 var(--k-5); max-width: 980px; }
.wy-hist-t { margin: 0 0 var(--k-2); font: 650 var(--t-mala)/1.3 var(--font); color: var(--tekst); }
.wy-hist-pole { position: relative; height: 130px; margin-top: 38px; }
.wy-hist-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wy-hist-prz { fill: var(--akcent); opacity: .14; }
.wy-hist-sl { fill: var(--sz-2); }
.wy-hist-sl:hover { fill: var(--tekst); }
.wy-hist-szac { stroke: var(--tekst); stroke-width: 2; }
.wy-hist-of { stroke: var(--uwaga-tekst); stroke-width: 2; stroke-dasharray: 5 4; }
.wy-hist-et { position: absolute; top: -18px; transform: translateX(-50%); padding: 0 4px; background: var(--tlo);
  font: 650 var(--t-mikro)/1.3 var(--font); white-space: nowrap; color: var(--tekst); }
.wy-hist-et--of { top: -36px; color: var(--uwaga-tekst); }
.wy-hist-os { position: relative; height: 20px; border-top: 1px solid var(--linia-3); color: var(--sz-2);
  font: 500 var(--t-mikro)/1 var(--font); font-variant-numeric: tabular-nums; }
.wy-hist-os span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
.wy-legenda { margin: var(--k-2) 0 0; font: 500 var(--t-mini)/1.5 var(--font); color: var(--sz); max-width: none; }
.wy-lg { display: inline-block; width: 12px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 2px; }
.wy-lg--prz { background: var(--akcent); opacity: .35; }
.wy-lg--szac { width: 3px; height: 12px; background: var(--tekst); }
.wy-lg--of { width: 3px; height: 12px; background: var(--uwaga-tekst); }
.wy-lg--zasieg { height: 3px; vertical-align: 3px; background: var(--akcent); }
.wy-lg--miasto { height: 0; vertical-align: 3px; border-top: 2px dashed var(--sz-2); border-radius: 0; }
/* trend kwartałów (rcs-wycena.js; liczby w tabeli pod „Liczby”) */
.wy-trend { margin: 0 0 var(--k-5); }
.wy-trend h2 { margin-bottom: var(--k-2); }
.wy-trend-wykres { margin: var(--k-3) 0 var(--k-2); max-width: 980px; }
.wy-trend-svg .wy-trend-zasieg { stroke: var(--akcent); }
.wy-trend-svg .wy-trend-miasto { stroke: var(--sz-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.wy-trend-svg .wy-trend-pkt { fill: var(--akcent); stroke: var(--plyta); stroke-width: 1.5; }
.wy-trend-svg .wy-trend-et-z { fill: var(--akcent); }
.wy-trend-tab > summary { cursor: pointer; width: max-content; font: 600 var(--t-mini)/1.3 var(--font); color: var(--sz); }
.wy-trend-tab > summary:hover { color: var(--tekst); }
.wy-trend-tab[open] > summary { margin-bottom: var(--k-2); }
/* co gdyby, budynki, wykluczone */
.wy-cogdyby, .wy-budynki, .wy-pierwotny, .wy-staty { margin: 0 0 var(--k-5); }
.wy-karty-staty { max-width: 820px; margin-top: var(--k-3); }
.wy-karty-staty .wy-brak { color: var(--sz); }
.wy-budynki .owijka { max-width: 920px; }
.wy-bud-adres { max-width: 34ch; }
.wy-bud-adres small { display: block; margin-top: 1px; color: var(--sz); font-size: var(--t-mini); font-weight: 500; }
.wy-tab-bud td { height: auto; padding-top: 6px; padding-bottom: 6px; }
.wy-bud-n { white-space: normal; }
.wy-cg-r span { color: inherit; opacity: .8; }
.wy-cogdyby .owijka { max-width: 720px; }
.wy-tab-cg td.l { white-space: normal; }
.wy-tab-bud tr.wy-twoj td { background: var(--akcent-tlo); font-weight: 600; }
.wy-tab-bud input[type=checkbox] { width: 18px; height: 18px; margin: 0; vertical-align: middle; accent-color: var(--akcent); }
.wy-twoj-et { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pig); background: var(--akcent);
  color: var(--akcent-na); font: 650 var(--t-mikro)/1.5 var(--font); vertical-align: 1px; }
.wy-bud-akcje { display: flex; flex-wrap: wrap; gap: var(--k-2); margin: var(--k-3) 0 0; }
.wy-bud-wiecej { margin-top: var(--k-2); }
.wy-bud-wiecej > summary { cursor: pointer; width: max-content; font: 600 var(--t-mini)/1.3 var(--font); color: var(--sz); }
.wy-wykluczone { margin: var(--k-2) 0 0; font-size: var(--t-mala); color: var(--sz); max-width: 86ch; }
@media (max-width: 900px) {
  .wy-filtry-pola { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .wy-zdanie { font-size: var(--t-baza); }
  .wy-cg-m2 { display: none; }
  .wy-cg-r span { display: block; }
  .wy-bud-adres { max-width: 17ch; white-space: normal; }
  .wy-tab-bud :is(td, th) { padding-left: 6px; padding-right: 6px; }
  .wy-tab-bud th { height: auto; padding-top: 6px; padding-bottom: 6px; white-space: normal; line-height: 1.2; vertical-align: bottom; }
  .wy-tab-bud td:nth-child(3) { white-space: normal; }
  .wy-hist-pole { height: 110px; }
  .wy-sprawdz-pole { max-width: none; }
  .wy-sprawdz-pole input { font-size: 16px; }
}
@media (max-width: 560px) {
  .wy-filtry-pola > .wy-szer { grid-column: 1 / -1; }
}
/* API: każda trasa to płyta (adres w <code>, opis, przykłady); dwie kolumny, gdy jest miejsce */
.api-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: var(--k-3);
  margin: var(--k-5) 0 var(--k-4); align-items: start; }
.api-sek { background: var(--plyta); border: 1px solid var(--linia); border-radius: var(--r-3); padding: var(--k-4) 18px 6px; min-width: 0; }
.api-sek h2 { margin: 0 0 var(--k-3); }
.api-sek p { overflow-wrap: anywhere; }
.api-sek code { font-size: var(--t-mini); }
/* Wykres liniowy porównania gmin skalowany do 358 px miał podpisy osi po 4 px: na telefonie stoi
   w naturalnej szerokości i przesuwa się w bok, jak tabele. Tylko z modyfikatorem — historia cen
   lokalu (ten sam svg.linia z app.py) ma zostać w szerokości ekranu, inaczej późniejsze sprzedaże
   uciekają poza okno i linia wygląda na płaską. */
@media (max-width: 760px) { .wykres--przesuwny svg.linia { min-width: 600px; } }
@media (max-width: 820px) {
  /* Para „od – do” dzieli wiersz z sąsiednim polem: szerokość startowa 60 px (nie wewnętrzna szerokość
     pola liczbowego), dalej rośnie; daty potrzebują miejsca na „dd.mm.rrrr” i biorą cały wiersz.
     Tutaj, a nie w bloku „wąsko”: reguła .para (92 px) stoi w arkuszu niżej od niego. */
  form.filtry .para { display: flex; width: 100%; }
  form.filtry .para input { width: 60px; flex: 1 1 60px; min-width: 0; }
  form.filtry .para input[type=date] { width: 128px; flex-basis: 128px; }
}
@media (max-width: 760px) {
  .nagl-strony p.sub { font-size: var(--t-baza); }
  .pole-szerokie, form.filtry select.pole-szerokie { min-width: 0; width: 100%; }
  .api-sek { padding: 14px var(--k-4) 4px; }
}
/* ─── koniec [C3] ─── */
/* ═══ koniec [C] ═══ */

/* ═══ [D] INWESTYCJE — właściciel P3 ═══ */
/* Region [D]: strony rynku pierwotnego (/inwestycje, /inwestycje/{obszar}, /inwestycja/{…}) i komponenty
   makr _inwestycje_makra.html, z których korzystają też karty miejsc (P4). Zasady:
   • komponenty makr mają własne, niekolidujące nazwy (.etap .kr--*, .pozycja, .okolica .oko, .cena3,
     .cykl, .odsylacz, .skrot-i, .plakietka-i, .ikn, .tab) i działają na każdej stronie;
   • reszta (chipy, przyciski, segmenty, nagłówki, tabele strony) jest zawężona do korzenia .inw — nie
     nadpisuje powłoki (P1, region [B]) ani kart (P4, region [C]), a zarazem nie ulega ich starym
     regułom globalnym (button, table, h2::after, h3 w monospace);
   • nowe tokeny SPEC 4.1 (etapy, pigułki, szkło, skala --sek-*) są niżej w warstwie `rcs2-zapas`: P1 dodaje
     je do [A] bez warstwy i wtedy JEGO wartości wygrywają same (styl spoza warstwy zawsze bije warstwę),
     a zanim P1 zostanie scalony, strony inwestycji i tak mają swoje barwy. */
@layer rcs2-zapas {
  :root {
    --szer-naglowka: 112%;
    --r-3: 16px; --r-4: 22px; --r-pig: 999px; --wiersz-karta: 34px; --lista-w: 520px; --plyta-4: #262e3b;
    --etap-sprzedaz: #3987e5; --etap-budowa: #d95926; --etap-odbiory: #199e70; --etap-zapowiedz: #d95926; --etap-sprzedana: #5b6574;
    --szklo: rgba(17, 22, 29, .86); --szklo-ramka: rgba(255, 255, 255, .07);
    --cien-1: 0 1px 2px #00000066; --cien-plyw: 0 18px 50px #0000008c, 0 0 0 1px var(--szklo-ramka);
    --sek-1: #104281; --sek-2: #184f95; --sek-3: #1c5cab; --sek-4: #2a78d6; --sek-5: #5598e7; --sek-6: #86b6ef; --sek-7: #b7d3f6;
    --roz-taniej: #3987e5; --roz-zero: #383835; --roz-drozej: #e66767;
    --pig-tlo: #1a212b; --pig-tekst: #eef2f8; --pig-wyb: #eef2f8; --pig-wyb-tekst: #0a0d12;
  }
  @media (prefers-color-scheme: light) { :root:not([data-motyw="ciemny"]) {
    --plyta-4: #e1e6ec;
    --etap-sprzedaz: #2a78d6; --etap-budowa: #eb6834; --etap-odbiory: #1baf7a; --etap-zapowiedz: #eb6834; --etap-sprzedana: #97a0ad;
    --szklo: rgba(255, 255, 255, .88); --szklo-ramka: rgba(11, 15, 22, .08);
    --cien-1: 0 1px 2px #0b0f1614; --cien-plyw: 0 14px 44px #0b0f1626, 0 0 0 1px var(--szklo-ramka);
    --sek-1: #cde2fb; --sek-2: #9ec5f4; --sek-3: #6da7ec; --sek-4: #3987e5; --sek-5: #256abf; --sek-6: #184f95; --sek-7: #0d366b;
    --roz-taniej: #2a78d6; --roz-zero: #f0efec; --roz-drozej: #e34948;
    --pig-tlo: #ffffff; --pig-tekst: #0b0f16; --pig-wyb: #0b0f16; --pig-wyb-tekst: #ffffff;
  } }
  :root[data-motyw="jasny"] {
    --plyta-4: #e1e6ec;
    --etap-sprzedaz: #2a78d6; --etap-budowa: #eb6834; --etap-odbiory: #1baf7a; --etap-zapowiedz: #eb6834; --etap-sprzedana: #97a0ad;
    --szklo: rgba(255, 255, 255, .88); --szklo-ramka: rgba(11, 15, 22, .08);
    --cien-1: 0 1px 2px #0b0f1614; --cien-plyw: 0 14px 44px #0b0f1626, 0 0 0 1px var(--szklo-ramka);
    --sek-1: #cde2fb; --sek-2: #9ec5f4; --sek-3: #6da7ec; --sek-4: #3987e5; --sek-5: #256abf; --sek-6: #184f95; --sek-7: #0d366b;
    --roz-taniej: #2a78d6; --roz-zero: #f0efec; --roz-drozej: #e34948;
    --pig-tlo: #ffffff; --pig-tekst: #0b0f16; --pig-wyb: #0b0f16; --pig-wyb-tekst: #ffffff;
  }
}

/* ---------- komponenty makr (działają także poza stronami inwestycji) ---------- */
.ikn { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round;
  stroke-linejoin: round; vertical-align: -3px; }
.ikn--m { width: 16px; height: 16px; }
.ikn--s { width: 14px; height: 14px; }
.inw .num, .pozycja .num, .odsylacz .num, .cena3 .num, .oko .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sz-i { color: var(--sz); }
/* etap: kształt + tekst, kolor nigdy sam (SPEC 1.4, 11) */
.etap { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-mala); font-weight: 600; color: var(--tekst); white-space: nowrap; }
.etap .pod { color: var(--sz); font-weight: 500; }
.kr { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.kr--sprzedaz { background: var(--etap-sprzedaz); }
.kr--odbiory { background: var(--etap-odbiory); }
.kr--budowa { background: transparent; border: 2.5px solid var(--etap-budowa); }
.kr--zapowiedz { background: transparent; border: 2px dashed var(--etap-zapowiedz); }
.kr--sprzedana { background: var(--etap-sprzedana); width: 8px; height: 8px; margin: 0 1px; }
.kr--zakonczona { background: transparent; border: 2px solid var(--etap-sprzedana); width: 8px; height: 8px; margin: 0 1px; }
.plakietka-i { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 8px; border-radius: 6px;
  font: 560 var(--t-mini)/1.3 var(--font); background: var(--uwaga-tlo); color: var(--uwaga-tekst);
  border: 1px solid var(--uwaga-ramka); white-space: nowrap; }
/* miniatura obrysu: siatka z tła (bez <pattern> — powtarzane id w setkach SVG) */
.miniatura { width: 64px; height: 64px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background-color: var(--plyta-3); background-size: 8px 8px;
  background-image: linear-gradient(var(--linia-3) .6px, transparent .6px), linear-gradient(90deg, var(--linia-3) .6px, transparent .6px); }
.miniatura svg { width: 100%; height: 100%; display: block; }
.miniatura { --mn: var(--etap-sprzedana); }
.mn--sprzedaz { --mn: var(--etap-sprzedaz); } .mn--odbiory { --mn: var(--etap-odbiory); }
.mn--budowa { --mn: var(--etap-budowa); } .mn--zapowiedz { --mn: var(--etap-zapowiedz); }
.mn--zakonczona { --mn: var(--etap-sprzedana); }
.mn-obrys { fill: var(--mn); fill-opacity: .28; stroke: var(--mn); stroke-width: 1.6; stroke-linejoin: round; }
.mn--budowa .mn-obrys { stroke-dasharray: 3 2; }
.mn-pkt { fill: var(--mn); stroke: var(--plyta); stroke-width: 2; }
.mn-niep { fill: none; stroke: var(--uwaga-tekst); stroke-dasharray: 3 3; stroke-width: 1.3; }

/* pozycja listy (SPEC 5): miniatura | treść */
.pozycja { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--linia);
  color: var(--tekst); position: relative; cursor: pointer; background: var(--plyta); scroll-margin-top: 44px; }
.pozycja:hover, .pozycja.pod { background: var(--plyta-2); }
.pozycja.wyb { background: var(--akcent-tlo); cursor: default; }
.pozycja.wyb::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tekst); }
.pozycja:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }
.pozycja .poz-t { min-width: 0; }
.pozycja .g { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; min-width: 0; }
.pozycja .nazwa { font: 680 var(--t-tresc)/1.3 var(--font); font-stretch: 104%; letter-spacing: -.01em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--akcent); min-width: 0; }
.pozycja .cena-p { font-size: var(--t-tresc); white-space: nowrap; }
.pozycja .cena-p b { font-weight: 700; }
.pozycja .cena-p small, .pozycja .zakres { font-size: var(--t-mini); color: var(--sz); font-weight: 500; }
.pozycja .gdzie { color: var(--sz); font-size: var(--t-mini); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pozycja .zakres { white-space: nowrap; }
.pozycja .linia2 { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 7px; font-size: var(--t-mini); color: var(--sz); }
.pozycja .linia2 b { color: var(--tekst); font-weight: 620; }
.pozycja .linia2 .etap { font-size: var(--t-mala); }
.pozycja .pasuje { margin-top: 7px; font-size: var(--t-mini); padding: 5px 9px; border-radius: 8px; background: var(--plyta-3); color: var(--tekst); display: inline-block; }
.pozycja .pasuje b { font-weight: 650; }
.pozycja .gw { color: var(--sz); cursor: help; }
.pozycja .okol { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 7px; font-size: var(--t-mini); color: var(--sz); }
.pozycja .okol span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pozycja .okol b { color: var(--tekst); font-weight: 600; }
.pozycja .plak-w { margin-top: 7px; }
/* telefon: plakietka niepewności skrócona do „± 880 m” w wierszu etapu (pełna podnosiła pozycję do 165 px
   i w połowie arkusza druga pozycja wchodziła pod pasek kart) */
.pozycja .plak-kr { display: none; align-items: center; gap: 4px; color: var(--uwaga-tekst); font-size: var(--t-mini); font-weight: 600;
  white-space: nowrap; flex: none; }
.rozw { margin-top: 10px; cursor: auto; }
.rozw-t { font-size: var(--t-mini); font-weight: 650; color: var(--sz); margin-bottom: 6px; }
.rozw .tabela-w { border-radius: 10px; }
.rozw .notka { margin-bottom: 6px; }
.rozw-akcje { margin-top: 10px; }

/* odsyłacz do innej inwestycji: miniatura | nazwa, miejsce, etap | cena */
.odsylacz { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r-3);
  background: var(--plyta); border: 1px solid var(--linia); color: var(--tekst); text-decoration: none; }
.odsylacz:hover { background: var(--plyta-2); text-decoration: none; }
.odsylacz .miniatura { width: 56px; height: 56px; }
.odsylacz .ods-t { min-width: 0; display: grid; gap: 2px; }
.odsylacz .ods-t > b { font-weight: 680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odsylacz .m { color: var(--sz); font-size: var(--t-mini); font-weight: 500; }
.odsylacz .ods-e { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; }
.odsylacz .ods-c { text-align: right; font-weight: 700; display: grid; gap: 1px; }
.odsylacz .ods-c small { display: block; color: var(--sz); font-weight: 500; font-size: var(--t-mini); }
.roznica { font-size: var(--t-mini); font-weight: 650; color: var(--tekst); white-space: nowrap; }
.odsylacz .ods-c small.roznica { color: var(--tekst); font-weight: 650; }

/* trzy ceny: pasek koloru = seria; tekst zawsze w kolorach tekstu */
.cena3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.cena3 .cena { position: relative; background: var(--plyta); border: 1px solid var(--linia); border-radius: var(--r-2); padding: 14px 16px 14px 22px;
  display: grid; gap: 3px; align-content: start; }
.cena3 .cena::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--kol, var(--sz-2)); }
.cena3 .co { font-size: var(--t-mini); font-weight: 650; color: var(--sz); }
.cena3 .cena b { font: 700 26px/1.1 var(--font); letter-spacing: -.02em; font-stretch: 105%; white-space: nowrap; }
.cena3 .cena b small { font-size: 13px; color: var(--sz); font-weight: 560; letter-spacing: 0; margin-left: 3px; }
.cena3 .ds { font-size: var(--t-mini); color: var(--sz); }
/* Trzy kolumny według szerokości TREŚCI karty (mapa zabiera 38–42% okna): przy 768–900 px okna liczba
   „12 800 zł/m²” wychodziła 21–28 px za kafel. Węższa treść: mniejsza liczba, a poniżej 560 px jedna kolumna. */
@container karta-tresc (max-width: 700px) {
  .cena3 .cena { padding: 12px 12px 12px 20px; }
  .cena3 .cena b { font-size: 22px; }
}
@container karta-tresc (max-width: 560px) {
  .cena3 { grid-template-columns: 1fr; gap: 8px; }
  .cena3 .cena { grid-template-columns: 1fr auto; align-items: baseline; }
  .cena3 .cena .co { grid-column: 1; }
  .cena3 .cena .ds { grid-column: 1 / -1; }
}

/* W skrócie — zdania złożone z liczb strony (szablon, bez modelu językowego) */
.skrot-i { padding: 16px 18px; border-radius: var(--r-3); background: var(--plyta-2); border: 1px solid var(--linia); font-size: var(--t-tresc); line-height: 1.6; margin: 0 0 22px; }
.skrot-i .gl { display: flex; gap: 8px; align-items: center; font-size: var(--t-mini); font-weight: 650; color: var(--sz); margin-bottom: 6px; }
.skrot-i b { font-weight: 650; }

/* cykl życia: pozwolenie → budowa → sprzedaż → odbiory */
.cykl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; }
.cykl .krok { position: relative; padding: 22px 12px 0 0; }
.cykl .krok::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--linia-3); }
.cykl .krok.zrob::before { background: var(--tekst); }
.cykl .pkt { position: absolute; top: 1px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--plyta); border: 2px solid var(--linia-3); z-index: 1; }
.cykl .krok.zrob .pkt { background: var(--tekst); border-color: var(--tekst); }
.cykl .krok.teraz .pkt { background: var(--plyta); border: 3px solid var(--tekst); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tekst) 14%, transparent); }
.cykl .krok.brak .pkt { background: var(--plyta); border: 2px dashed var(--sz-2); }
.cykl .krok b { display: block; font-size: var(--t-mala); font-weight: 650; }
.cykl .krok.brak b { color: var(--sz); }
.cykl .krok span { display: block; font-size: var(--t-mini); color: var(--sz); line-height: 1.35; }
.cykl-zdanie { margin: 12px 0 0; font-size: var(--t-mala); color: var(--sz); }
.cykl-zdanie b { color: var(--tekst); font-weight: 620; }

/* okolica: kafelki z kreską „typowo” */
.opis-sek { color: var(--sz); font-size: var(--t-mala); margin: -4px 0 12px; }
.okolica { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); background: var(--plyta); border: 1px solid var(--linia);
  border-radius: var(--r-3); overflow: hidden; }
.oko { background: var(--plyta); padding: 12px 14px 13px; display: grid; gap: 4px; align-content: start; box-shadow: 1px 0 0 var(--linia), 0 1px 0 var(--linia); min-width: 0; }
.oko .n { display: flex; align-items: center; gap: 8px; font-size: var(--t-mala); color: var(--sz); font-weight: 560; }
.oko .v { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.oko .v b { font: 680 19px/1.2 var(--font); letter-spacing: -.01em; white-space: nowrap; }
.oko .v span { font-size: var(--t-mini); color: var(--sz); }
.oko .znacz { margin-left: auto; font: normal 650 11px/1.4 var(--font); color: var(--tekst); background: var(--plyta-3); border-radius: 6px; padding: 1px 6px; }
.oko .gdzie { font-size: var(--t-mini); color: var(--sz); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oko .os { position: relative; height: 6px; border-radius: 3px; background: var(--plyta-3); margin-top: 4px; }
.oko .os i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--tekst); opacity: .8; }
.oko .os u { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--sz); }
.oko .typ { font-size: 11px; color: var(--sz-2); }
.oko.minus .v b { color: var(--spadek); }
.okolica-plak { margin: 0 0 10px; }

/* tabele w komponentach i na stronach inwestycji (bez monospace i zebry starych tabel) */
.tabela-w { overflow-x: auto; border: 1px solid var(--linia); border-radius: var(--r-3); background: var(--plyta); scrollbar-width: thin; }
table.tab { width: 100%; border-collapse: collapse; font: 400 var(--t-mala)/1.3 var(--font); font-variant-numeric: tabular-nums; }
table.tab th { text-align: left; font: 600 var(--t-mini)/1.3 var(--font); color: var(--sz); text-transform: none; letter-spacing: 0; padding: 10px 12px;
  border-bottom: 1px solid var(--linia); white-space: nowrap; background: var(--plyta-2); height: auto; position: static; }
table.tab td { padding: 0 12px; height: var(--wiersz-karta); border-bottom: 1px solid var(--linia-2); white-space: nowrap; font: inherit;
  letter-spacing: 0; word-spacing: normal; text-align: left; background: none; position: static; }
table.tab tbody tr td { background-image: none; }
table.tab tbody tr:hover td { background: var(--plyta-2); box-shadow: none; }
table.tab tr:last-child td { border-bottom: 0; }
table.tab th.p, table.tab td.p { text-align: right; }
table.tab td.obc { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
table.tab th:first-child, table.tab td:first-child { position: sticky; left: 0; z-index: 1; background: var(--plyta); }
table.tab th:first-child { background: var(--plyta-2); }
table.tab--mala td { height: 30px; }
.zm-plus { color: var(--wzrost); } .zm-minus { color: var(--spadek); }
.inw-zrodla { display: grid; gap: 6px; font-size: var(--t-mala); color: var(--sz); line-height: 1.5; }
.inw-zrodla p { margin: 0; }
.inw-zrodla b { color: var(--tekst); font-weight: 620; }

/* wykresy SVG (rcs-wykresy.js) */
.wyk { width: 100%; display: block; overflow: visible; }
.wyk .siatka { stroke: var(--linia); stroke-width: 1; }
.wyk .os-t { fill: var(--sz-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.wyk .et { fill: var(--tekst); font-size: 12px; font-weight: 600; }
.wyk .et-s { fill: var(--sz); font-size: 11px; }
.wyk .med-t { paint-order: stroke; stroke: var(--plyta); stroke-width: 3.5px; stroke-linejoin: round; }
.wyk .med { stroke: var(--tekst); stroke-width: 2.5; stroke-linecap: round; }
.wyk .iqr { opacity: .16; }
.wyk .pkt { stroke: var(--plyta); stroke-width: 1.2; }
.wyk .linia { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wyk-dymek { position: fixed; z-index: 80; pointer-events: none; padding: 8px 10px; border-radius: 10px; background: var(--plyta); color: var(--tekst);
  box-shadow: var(--cien-2); font-size: var(--t-mini); display: none; max-width: 280px; }

/* ---------- strony inwestycji: podstawa w obrębie .inw (bez wpływu na resztę serwisu) ---------- */
.inw { color: var(--tekst); font-variation-settings: normal; }
/* :where — zerujemy margines akapitów bez podbijania specyficzności: `.inw p` (0,1,1) przebijało własne
   marginesy komponentów (.cykl-zdanie, .opis-sek, .okolica-plak — zdanie cyklu kleiło się do kroków) */
:where(.inw) p { margin: 0; }
.inw h1, .inw h2, .inw h3 { margin: 0; font-family: var(--font); font-stretch: var(--szer-naglowka); font-variation-settings: normal; text-transform: none;
  letter-spacing: -.02em; color: var(--tekst); display: block; }
.inw h1 { font-size: var(--t-h1); font-weight: 720; line-height: 1.08; }
.inw h2 { font-size: 19px; font-weight: 680; line-height: 1.25; }
.inw h2::after { content: none; }
.inw h3 { font-size: var(--t-tresc); font-weight: 650; line-height: 1.3; }
.inw a:hover { text-underline-offset: 3px; }
.inw button { font: inherit; color: inherit; height: auto; padding: 0; border: 0; border-radius: 0; background: none; filter: none; transform: none; cursor: pointer; }
.inw button:hover { filter: none; }
.inw .tylko-czytnik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Bez JS: klasa .js na <html> stoi w <head> (base.html) przed arkuszem, więc wariant „bez JS” rozstrzyga się
   przed pierwszą klatką. Wcześniej zależał od .js na korzeniu .inw, którą rcs-inwestycje.js dopisuje dopiero po
   pobraniu MapLibre — do tego czasu strona układała się „bez JS” i potem przeskakiwała. */
html:not(.js) .inw .tylko-js { display: none !important; }
.inw .notka { color: var(--sz); font-size: var(--t-mala); line-height: 1.5; }
.inw .notka--pad { padding: 12px 16px; }
/* zachęta do powiadomień o nowych inwestycjach w obszarze (11.11.2026) - pod pierwszą porcją listy */
.inw .powiadom-ob { display: flex; align-items: center; gap: 12px; margin: 10px 16px 14px; padding: 10px 12px;
  border: 1px solid var(--linia); border-radius: var(--r-3); background: var(--tlo-2, transparent); }
.inw .powiadom-ob p { margin: 0; flex: 1 1 auto; font-size: 14px; line-height: 1.4; }
.inw .powiadom-ob p b { display: block; }
.inw .powiadom-ob .przycisk { flex: 0 0 auto; white-space: nowrap; }
.inw .notka--pomin { padding: 8px 16px; font-size: var(--t-mini); line-height: 1.45; border-bottom: 1px solid var(--linia-2); }
.inw .etk-i { font-size: var(--t-mini); font-weight: 600; color: var(--sz); letter-spacing: .01em; }
.inw .rzad { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inw .rzad--przewin { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.inw .rzad--przewin::-webkit-scrollbar { display: none; }
/* rząd chipów dłuższy niż kolumna (Trójmiasto: „Zapowiedzi”, „Sprzedane”, „Deweloper” za krawędzią):
   wygaszenie przy krawędzi mówi, że dalej coś jest; kółko myszy nad rzędem przewija go w bok (JS) */
.inw .rzad--przewin.dalej-p { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.inw .rzad--przewin.dalej-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
  mask-image: linear-gradient(to right, transparent, #000 40px); }
.inw .rzad--przewin.dalej-l.dalej-p { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.inw .plyta-i { background: var(--plyta); border: 1px solid var(--linia); border-radius: var(--r-3); }
.inw .plyta-i--pad { padding: 18px 20px; }
.inw .przycisk { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: var(--r-pig); border: 1px solid var(--linia-3);
  background: var(--plyta); color: var(--tekst); font: 600 var(--t-mala)/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer; }
.inw .przycisk:hover { background: var(--plyta-3); text-decoration: none; }
.inw .przycisk--glowny { background: var(--tekst); color: var(--tlo); border-color: transparent; }
.inw .przycisk--glowny:hover { background: var(--tekst); opacity: .88; }
.inw .przycisk--maly { height: 30px; padding: 0 11px; font-size: var(--t-mini); }
.inw .przycisk.obserwujesz { background: var(--akcent-tlo); color: var(--akcent); border-color: transparent; }
.inw .chip { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: var(--r-pig); border: 1px solid var(--linia-3);
  background: var(--plyta); color: var(--tekst); font: 560 var(--t-mala)/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer; flex: none; }
.inw .chip:hover { background: var(--plyta-3); text-decoration: none; }
.inw .chip.wl, .inw .chip[aria-pressed="true"]:not(.chip--etap) { background: var(--tekst); color: var(--tlo); border-color: var(--tekst); }
.inw .chip .ile { color: var(--sz); font-weight: 500; font-variant-numeric: tabular-nums; }
.inw .chip.wl .ile { color: inherit; opacity: .7; }
.inw .chip--dodaj { border-style: dashed; color: var(--sz); background: transparent; }
.inw .chip--etap[aria-pressed="false"] { color: var(--sz); background: transparent; }
.inw .chip--etap[aria-pressed="false"] .kr { opacity: .45; }
.inw .chip--etap[aria-pressed="true"] { background: var(--plyta-3); color: var(--tekst); border-color: var(--linia-3); }
.inw .chip--zd { background: var(--plyta); height: 28px; padding-right: 6px; }
.inw .chip--zd .x { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--sz); margin-left: 2px; }
.inw .chip--zd .x:hover { background: var(--plyta-3); color: var(--tekst); }
.inw .chip--etapy { display: none; }
.inw .segment { display: inline-flex; padding: 3px; border-radius: var(--r-pig); background: var(--plyta-3); gap: 2px; flex: none; }
.inw .segment > a, .inw .segment > button { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r-pig);
  font: 580 var(--t-mala)/1 var(--font); color: var(--sz); white-space: nowrap; text-decoration: none; }
.inw .segment > [aria-current="true"], .inw .segment > [aria-pressed="true"] { background: var(--plyta); color: var(--tekst); box-shadow: var(--cien-1); }
.inw .segment--ikony > a { padding: 0 8px; }
.inw .mapa-el { position: absolute; inset: 0; background: var(--mapa-lad); }
.inw .nakladka { position: absolute; z-index: 5; border-radius: var(--r-3); background: var(--szklo); color: var(--tekst);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: var(--cien-plyw); }
.inw .sterowanie { position: absolute; right: 14px; top: 14px; z-index: 6; display: grid; gap: 8px; }
.inw .sterowanie .grupa { display: grid; border-radius: 12px; overflow: hidden; background: var(--szklo); -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px); box-shadow: var(--cien-plyw); }
.inw .sterowanie button { width: 38px; height: 38px; display: grid; place-items: center; color: var(--tekst); font: 600 15px/1 var(--font); }
.inw .sterowanie button + button { border-top: 1px solid var(--linia); }
.inw .sterowanie button:hover, .inw .sterowanie button[aria-pressed="true"] { background: var(--plyta-3); }
.inw .maplibregl-ctrl-attrib { font-size: 10px; }

/* ---------- /inwestycje/{obszar}: lista 520 px | mapa (SPEC 6.3) ---------- */
body.pelny-ekran main.strona:has(> .nowe) { padding: 0; max-width: none; }
.nowe { height: 100%; min-height: 0; display: grid; grid-template-columns: var(--lista-w) minmax(0, 1fr); position: relative;
  transition: grid-template-columns var(--sred) var(--krzywa); }
.nowe[data-widok="tabela"] { grid-template-columns: minmax(0, 1fr) 34%; }
.nowe-lista { min-height: 0; display: flex; flex-direction: column; background: var(--plyta); border-right: 1px solid var(--linia); position: relative; z-index: 2; }
.nowe .przewijak { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.nowe.laduje .pozycje { opacity: .55; transition: opacity var(--sred); }
/* wejście z kadrem w adresie: nagłówek i licznik obszaru strony schowane do pierwszej listy widocznego obszaru */
.nowe.laduje-kadr #inw-h1, .nowe.laduje-kadr #inw-licznik { visibility: hidden; }
.nowe .uchwyt-w { display: none; }
/* odstępy tak, żeby przy trzywierszowym zdaniu-odpowiedzi (Trójmiasto: części z miastem w nawiasie,
   „Kokoszki (Gdańsk)”) pierwsza pozycja listy stała nadal na y ≤ 360 przy 1440×900 (PLAN P3) — było 372 */
.nowe-nagl { padding: 12px 16px 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; border-bottom: 1px solid var(--linia); }
.nowe-nagl > * { min-width: 0; }
/* liczby obszaru pod nagłówkiem listy (25.10.2026) */
.nowe-liczby { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--sz); font-size: var(--t-mala); }
.nowe-liczby b { color: var(--tekst); font-weight: 700; }
.nowe-liczby small { font-size: var(--t-mini); }
.nowe-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nowe-t > div:first-child { min-width: 0; }
.nowe-t .etk { display: block; font-size: var(--t-mini); font-weight: 600; color: var(--sz); margin-bottom: 2px; }
.nowe-t h1 { font-size: 26px; font-weight: 740; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.12; }
.nowe .odpowiedz { font-size: var(--t-mala); color: var(--sz); line-height: 1.45; }
.nowe .odpowiedz b { color: var(--tekst); font-weight: 650; }
.rozumiem-p { padding: 10px 12px; border-radius: var(--r-2); background: var(--plyta-2); border: 1px solid var(--linia-3); }
.rozumiem-p .rz-g { display: flex; align-items: center; gap: 6px; font-size: var(--t-mini); color: var(--sz); font-weight: 600; margin-bottom: 8px; }
.rozumiem-p .pominalem { margin-top: 8px; font-size: var(--t-mini); color: var(--sz); }
.rozumiem-p .pominalem b { color: var(--tekst); font-weight: 600; }
.wynik-pasek { display: flex; align-items: center; gap: 10px; font-size: var(--t-mala); color: var(--sz); min-width: 0; }
.wynik-pasek b { color: var(--tekst); }
.wynik-pasek .odstep { flex: 1; }
/* po ruchu mapy licznik „Pokazuję N inwestycji w widocznym obszarze” w całym wierszu nad kolejnością i widokiem */
.wynik-pasek--mapa { flex-wrap: wrap; row-gap: 6px; }
.wynik-pasek--mapa #inw-licznik { flex: 1 0 100%; }
.nowe .sort { display: inline-flex; align-items: center; margin: 0; }
.nowe .sort label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-mini); color: var(--sz); }
.nowe .sort select { height: 30px; border-radius: 10px; border: 1px solid var(--linia-3); background: var(--plyta); color: var(--tekst);
  padding: 0 6px; font: 600 var(--t-mini)/1 var(--font); max-width: 170px; }
.grupa-nagl { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--plyta-2);
  border-bottom: 1px solid var(--linia); font-size: var(--t-mini); font-weight: 650; color: var(--sz); }
.grupa-nagl .etap { font-size: var(--t-mini); }
.nowe .stronicowanie { display: inline-flex; gap: 12px; margin-left: 6px; }
/* „Pokaż następne” pod listą (kolejna porcja doklejana na miejscu, rcs-inwestycje.js). Nie „dalej-l”: to klasa
   stanu przewiniętego w bok rzędu chipów (cieniRzedow) — reguła z paddingiem powiększała wtedy rząd filtrów. */
.nowe .lista-dalej { padding: 0 16px 18px; }
.nowe .lista-dalej .przycisk[aria-busy="true"] { opacity: .6; pointer-events: none; }
/* przeglądarka bez WebGL (RCS.mw.mapa oddał null): nakładki mapy znikają, komunikat zostaje w miejscu mapy */
.nowe.bez-mapy .mapa-warstwy, .nowe.bez-mapy .sterowanie, .nowe.bez-mapy .inw-legenda { display: none; }
.tabela-w--lista { border-width: 1px 0 0; border-radius: 0; }
.tabela-w--lista tr.wyb td, .tabela-w--lista tr.pod td { background: var(--akcent-tlo); }
.tabela-w--lista tr[data-id] { cursor: pointer; }
/* nazwy z plików deweloperów bywają zdaniami (72 znaki: „INWESTYCJA "WOLNE MIASTO", PRZEDSIĘWZIĘCIE…”) —
   jedna taka nazwa rozpychała pierwszą kolumnę na pół tabeli; pełna nazwa w title */
.tabela-w--lista td.naz { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
/* Stałe szerokości kolumn o zmiennej treści: tabela ma układ automatyczny, więc bez nich doklejone „Pokaż następne”
   wiersze (dłuższa nazwa, część miasta, etap „Odbiory trwają”, zakres „1,25 mln – 2,45 mln zł”) poszerzały kolumny
   i czytane wiersze uciekały w bok. Nazwa i obcięte kolumny — do swojej granicy (ellipsis, pełna treść w title),
   etap i cena — do najdłuższej możliwej wartości (128 i 149 px w Archivo, z zapasem). min-width, nie width: tabela
   szersza niż kolumna listy stoi na szerokościach minimalnych kolumn, a te `width` komórki nie podnosi. */
.tabela-w--lista td.naz { min-width: 280px; }
.tabela-w--lista td.obc { min-width: 150px; }
.tabela-w--lista thead th:nth-child(2) { min-width: 130px; }
.tabela-w--lista thead th:nth-child(7) { min-width: 150px; }
/* popover filtra: bez JS — sekcja pod rzędem chipów (:target), z JS — pływa pod chipem */
.nowe .popover { display: none; width: 320px; max-width: calc(100vw - 16px); padding: 14px; border-radius: var(--r-3); background: var(--plyta);
  box-shadow: var(--cien-plyw); color: var(--tekst); }
.nowe .popover:target { display: block; }
.nowe.js .popover:target { display: none; }
.nowe.js .popover.otwarty { display: block; position: fixed; z-index: 60; max-height: calc(100dvh - 16px); overflow: auto; }
.nowe .popover h4 { margin: 0 0 10px; font: 650 var(--t-mala)/1.3 var(--font); }
/* tło pod otwartym popoverem: klik obok zamyka popover i nic więcej (nie wybiera pozycji pod spodem);
   w tym samym kontekście warstw co popover (.nowe-lista), tuż pod nim */
.nowe .pop-tlo { position: fixed; inset: 0; z-index: 59; background: transparent; }
.nowe .popover .opcje { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.nowe .popover .opcje--pion { display: grid; gap: 6px; }
.nowe .popover .notka { margin-top: 10px; }
.nowe .stopka-p { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 8px; }
.nowe .histo { display: flex; align-items: flex-end; gap: 2px; height: 42px; margin: 6px 0 4px; }
.nowe .histo i { flex: 1; background: var(--sek-4); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }
.nowe .histo i.poza { background: var(--plyta-4); }
.nowe .skala-p, .inw-legenda .skala-p { display: flex; justify-content: space-between; color: var(--sz); font-size: 11px; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.nowe .wyb-ok { display: flex; align-items: center; gap: 8px; font-size: var(--t-mala); cursor: pointer; min-height: 28px; }
.nowe .wyb-ok input { width: 16px; height: 16px; accent-color: var(--tekst); margin: 0; }
/* mapa i nakładki */
.nowe-mapa { position: relative; min-height: 0; overflow: hidden; }
.mapa-warstwy { left: 14px; top: 14px; padding: 6px; display: flex; gap: 6px; border-radius: var(--r-pig); }
.nowe .mapa-warstwy .chip { height: 30px; font-size: var(--t-mini); border: 0; background: transparent; }
.nowe .mapa-warstwy .chip[aria-pressed="true"] { background: var(--plyta-3); color: var(--tekst); }
.nowe .mapa-warstwy .chip[aria-pressed="true"]::before { content: "✓"; font-weight: 700; margin-right: 2px; }
.nowe .mapa-warstwy .chip[aria-pressed="false"] { color: var(--sz); }
.inw-legenda { right: 14px; bottom: 26px; padding: 10px 12px; font-size: var(--t-mini); display: grid; gap: 6px; min-width: 180px; max-width: 320px; }
/* pusta, dopóki rcs-inwestycje.js jej nie wypełni: widoczna od pierwszej klatki (html.js) rosła potem w górę (CLS 0,01) */
.inw-legenda:empty { display: none; }
.inw-legenda .t { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 650; color: var(--sz); }
.inw-legenda .t button { color: var(--sz); font: 600 var(--t-mini)/1.3 var(--font); }
.inw-legenda.zwinieta > :not(.t) { display: none; }
.inw-legenda > button { display: flex; align-items: center; gap: 8px; padding: 2px 0; text-align: left; font: 500 var(--t-mini)/1.4 var(--font); color: var(--tekst); }
.inw-legenda > button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.inw-legenda .segment { margin-top: 4px; }
.inw-legenda .segment button { height: 26px; font-size: var(--t-mini); padding: 0 10px; }
.inw-legenda .skala { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.inw-legenda .skala i { flex: 1; }
.inw-legenda .skala-b { display: flex; align-items: center; gap: 8px; color: var(--sz); font-size: 11px; line-height: 1.35; }
.inw-legenda .skala-b i { flex: none; width: 26px; height: 14px; border-radius: 7px; border: 1.4px dashed var(--sz-2); }
.inw-dymek { position: absolute; z-index: 12; pointer-events: none; min-width: 200px; max-width: 280px; padding: 10px 12px; border-radius: 12px; background: var(--plyta);
  box-shadow: var(--cien-2); font-size: var(--t-mini); color: var(--tekst); transform: translate(-50%, calc(-100% - 18px)); display: grid; gap: 2px; }
.inw-dymek b { display: block; font: 650 var(--t-baza)/1.3 var(--font); font-stretch: 104%; }
.inw-dymek .c { font-size: 17px; font-weight: 700; margin-top: 2px; }
.inw-dymek .c small { font-size: 12px; font-weight: 500; color: var(--sz); }
.inw-dymek .e { margin-top: 4px; }
.inw-dymek.pod-punktem { transform: translate(-50%, 18px); }
.mapa-bez-js { position: absolute; left: 16px; top: 16px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--plyta); color: var(--sz); font-size: var(--t-mala); }
.inw-komunikat { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 90; margin: 0; padding: 10px 14px; border-radius: 12px;
  background: var(--tekst); color: var(--tlo); font-size: var(--t-mala); opacity: 0; pointer-events: none; transition: opacity var(--sred), transform var(--sred); }
.inw-komunikat.widoczny { opacity: 1; transform: translate(-50%, 0); }

/* ---------- karta inwestycji: dokument + mapa przyklejona z prawej (SPEC 6.4) ---------- */
/* Karta sama rysuje swoje marginesy: mapa ma stać od paska po dół okna i do prawej krawędzi, więc
   <main> powłoki (P1: 24px 24px 48px, max 1640 px) nie może jej odsuwać — tak jak lista (.nowe) wyżej. */
main.strona:has(> .inw-karta) { padding: 0; max-width: none; }
.inw-karta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 42%); align-items: start; }
.karta-tresc { min-width: 0; padding: 22px 32px 64px; max-width: 900px; width: 100%; justify-self: end;
  container: karta-tresc / inline-size; }
.karta-mapa { position: sticky; top: var(--pasek-h, 47px); height: calc(100dvh - var(--pasek-h, 47px)); border-left: 1px solid var(--linia); overflow: hidden; }
.karta-mapa .podpis-m { left: 14px; bottom: 26px; padding: 10px 12px; font-size: var(--t-mini); display: grid; gap: 4px; max-width: 300px; }
.karta-mapa .podpis-m span { color: var(--sz); }
.karta-mob-mapa { display: none; }
/* bez JS mapy nie ma: ani pustego panelu z prawej, ani pustych 42 vh pod tytułem (klasa js na <html>
   z pierwszego skryptu karty — przed pierwszą klatką, więc układ nie skacze po wczytaniu) */
html:not(.js) .inw-karta { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .inw-karta .karta-mapa, html:not(.js) .inw-karta .karta-mob-mapa { display: none; }
html:not(.js) .inw-karta .karta-tresc { justify-self: center; }
.naglowek-bytu { display: grid; gap: 10px; margin-bottom: 18px; }
.naglowek-bytu .rzad { gap: 10px; }
.tytul-bytu { font-size: clamp(28px, 1.1rem + 2vw, 44px) !important; font-weight: 760 !important; letter-spacing: -.03em !important; line-height: 1.04 !important; overflow-wrap: anywhere; }
.naglowek-bytu .meta { color: var(--sz); font-size: var(--t-tresc); }
.naglowek-bytu .rzad-akcji { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.inw-karta .podnav { position: sticky; top: var(--pasek-h, 47px); z-index: 20; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--tlo) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linia); margin: 0 -32px 22px; padding: 0 32px; }
.inw-karta .podnav::-webkit-scrollbar { display: none; }
.inw-karta .podnav a { height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--sz); font-weight: 580; font-size: var(--t-mala);
  border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; }
.inw-karta .podnav a:hover { color: var(--tekst); }
.inw-karta .podnav a[aria-current="true"] { color: var(--tekst); border-color: var(--tekst); }
.inw-karta .podnav .ile { color: var(--sz-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.inw .sekcja-k { scroll-margin-top: calc(var(--pasek-h, 47px) + 56px); margin: 0 0 34px; }
.inw .sekcja-k > .gl { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.inw .sekcja-k > .gl .opis { color: var(--sz); font-size: var(--t-mala); }
.inw .dane-wyk { margin-top: 10px; font-size: var(--t-mala); color: var(--sz); }
.inw .dane-wyk summary { cursor: pointer; width: fit-content; }
.inw .dane-wyk table { margin-top: 8px; }
.inw .plyta-i .notka { margin-top: 10px; }
.inw .lokale-rzad { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.inw .lokale-zm { margin-left: auto; }
.inw .dalej { margin-top: 10px; }
.inw .odbiory-w { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.inw .etk-i { display: block; margin-bottom: 6px; }
.inw .obok-lista { display: grid; gap: 8px; }
.inw .h3-i { margin: 18px 0 8px; }
.inw .mix { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; }
.inw .mix-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: var(--t-mini); color: var(--sz); }
.inw .mix-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.inw .mix-leg b { color: var(--tekst); }
.inw .rss-i { margin-left: -2px; }

/* ---------- /inwestycje: obszary kraju ---------- */
.inw-obszary { max-width: 1120px; margin: 0 auto; padding: 28px 32px 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.inw-obszary > h1 { font-size: var(--t-h1); }
.inw-obszary .lead-i { color: var(--sz); font-size: var(--t-tresc); max-width: 72ch; line-height: 1.55; }
.inw-obszary .lead-i b { color: var(--tekst); font-weight: 650; }
.kafle-i { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--plyta); border: 1px solid var(--linia);
  border-radius: var(--r-3); overflow: hidden; }
.kafel-i { padding: 14px 16px; display: grid; gap: 4px; align-content: start; box-shadow: 1px 0 0 var(--linia), 0 1px 0 var(--linia); color: var(--tekst); text-decoration: none; }
.kafel-i:hover { background: var(--plyta-2); text-decoration: none; }
.kafel-i b { font: 680 var(--t-kpi)/1.15 var(--font); letter-spacing: -.02em; }
.kafel-i span { color: var(--sz); font-size: var(--t-mini); line-height: 1.35; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kafel-i .etap { font-size: var(--t-mini); }
.dokad { display: grid; gap: 6px; max-width: 720px; }
.dokad label { font-size: var(--t-mini); font-weight: 650; color: var(--sz); }
.dokad-w { display: flex; gap: 8px; }
.dokad input { flex: 1 1 auto; min-width: 0; height: 44px; border-radius: var(--r-pig); border: 1px solid var(--linia-3); background: var(--plyta); color: var(--tekst);
  padding: 0 18px; font: 500 var(--t-tresc)/1 var(--font); }
.dokad .przycisk { height: 44px; padding: 0 20px; justify-content: center; }
.kandydaci { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.kandydaci li { font-size: var(--t-tresc); }
.woj-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.woj { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--r-2); background: var(--plyta); border: 1px solid var(--linia); color: var(--tekst); text-decoration: none; }
.woj:hover { background: var(--plyta-2); text-decoration: none; }
.woj > b { font-weight: 680; }
.woj span { font-size: var(--t-mini); color: var(--sz); }
.woj span b { color: var(--tekst); font-weight: 650; }
.woj .woj-etapy { font-variant-numeric: tabular-nums; white-space: normal; }
.woj--pusto { opacity: .7; }
.inw-obszary .obszar-opis { font-size: var(--t-mini); margin-left: 6px; }
.inw-obszary .sekcja-k[aria-busy="true"] { opacity: .55; transition: opacity var(--sred); }

/* ---------- średnie ekrany ---------- */
@media (max-width: 1180px) {
  .nowe { --lista-w: 440px; }
}
@media (max-width: 1100px) {
  .inw-karta { grid-template-columns: minmax(0, 1fr) 38%; }
  .karta-tresc { padding: 18px 22px 48px; }
  .inw-karta .podnav { margin: 0 -22px 18px; padding: 0 22px; }
}

/* ---------- telefon: mapa na całym ekranie, lista w arkuszu (SPEC 6.3, 7) ---------- */
@media (max-width: 760px) {
  .nowe { display: block; height: 100%; }
  .nowe-mapa { position: absolute; inset: 0; }
  .nowe-lista { position: absolute; left: 0; right: 0; bottom: 0; height: 78%; border-right: 0; border-radius: 20px 20px 0 0; box-shadow: var(--cien-plyw);
    z-index: 8; transition: height var(--wolno) var(--krzywa); overflow: hidden; }
  /* uchwyt: 44 px pola dotyku (SPEC 7), kreska na środku; tytuł arkusza też przeciąga (JS) */
  .nowe .uchwyt-w { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0; cursor: grab; touch-action: none; }
  .nowe .nowe-t { touch-action: none; }
  .nowe .uchwyt-w:focus-visible { outline: 2px solid var(--akcent); outline-offset: -4px; }
  .nowe .uchwyt { width: 40px; height: 5px; border-radius: 3px; background: var(--linia-3); margin: 0 auto; }
  .nowe-nagl { padding: 0 14px 8px; gap: 8px; }
  .nowe-t .etk, .nowe-t .segment { display: none; }
  .nowe-t h1 { font-size: 19px; }
  .nowe .wynik-pasek { display: none; }
  /* telefon po ruchu mapy: sam licznik widocznego obszaru (kolejność i widok jak dotąd ukryte) */
  .nowe .wynik-pasek--mapa { display: flex; font-size: 12.5px; }
  .nowe .wynik-pasek--mapa > :not(#inw-licznik) { display: none; }
  .nowe .odpowiedz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; }
  .nowe[data-ark="pol"] .odpowiedz, .nowe[data-ark="niski"] .odpowiedz { display: none; }
  /* „Pominięto …” jak zdanie-odpowiedź: w połowie arkusza zabierało miejsce pozycjom (zdanie o lesie
     w Gdańsku: 1 pełna pozycja zamiast 2), w pełnej wysokości jest */
  .nowe[data-ark="pol"] .notka--pomin, .nowe[data-ark="niski"] .notka--pomin { display: none; }
  .nowe .inw-etapy { display: none; }
  .nowe .chip--etapy { display: inline-flex; }
  .nowe .inw-filtry .chip { height: 30px; font-size: 12.5px; padding: 0 10px; }
  .grupa-nagl { padding: 7px 14px; }
  .pozycja { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 11px 14px; }
  .pozycja .miniatura { width: 44px; height: 44px; border-radius: 10px; }
  .pozycja .linia2 { margin-top: 5px; }
  /* zakres cen zostaje i na telefonie (25.10.2026: „od ilu” to pierwsze pytanie z Google), miejsce się skraca */
  .pozycja .linia2 > span:nth-child(3) { display: none; }
  /* 11.11.2026: „495 wolnych · 28–91 m²” ma zmieścić się obok etapu w jednej linii (trzy pozycje na pierwszym ekranie);
     dopisek etapu („przed odbiorami”) zostaje na karcie i na szerszym ekranie */
  .pozycja .linia2:has(> .wolne) .etap .pod { display: none; }
  .nowe-liczby { font-size: 12.5px; gap: 2px 12px; }
  /* 10.11.2026: w środkowej i niskiej wysokości trzy pierwsze liczby bez zakresu (dwa wiersze zamiast trzech) -
     miejsce dla trzeciej inwestycji; komplet w pełnej wysokości i w chipie etapów */
  .nowe[data-ark="pol"] .nowe-liczby > span:nth-child(n+4), .nowe[data-ark="niski"] .nowe-liczby > span:nth-child(n+4),
  .nowe[data-ark="pol"] .nowe-liczby small, .nowe[data-ark="niski"] .nowe-liczby small { display: none; }
  .pozycja .okol { margin-top: 5px; }
  .pozycja .okol span:nth-child(3) { display: none; }
  .pozycja .pasuje { margin-top: 5px; padding: 4px 8px; }
  .pozycja .plak-w { display: none; }
  .pozycja .plak-kr { display: inline-flex; }
  .rozumiem-p { padding: 6px 8px; border-radius: 12px; }
  .rozumiem-p .rz-g { display: none; }
  .rozumiem-p .rzad { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rozumiem-p .rzad::-webkit-scrollbar { display: none; }
  .rozumiem-p .pominalem { margin-top: 4px; }
  .nowe .mapa-warstwy { top: 10px; left: 10px; }
  .nowe .mapa-warstwy .chip[data-warstwa="wid"] { display: none; }
  .nowe .inw-legenda, .nowe .inw-dymek { display: none; }
  .nowe .sterowanie { top: 10px; right: 10px; }
  .nowe .sterowanie .grupa:first-child { display: none; }
  /* popover jako arkusz nad paskiem kart: pod chipem nie mieścił się ze stopką „Pokaż N” */
  .nowe.js .popover.otwarty { left: 8px !important; right: 8px; width: auto; max-width: none; top: auto !important;
    bottom: calc(var(--dol-h, 0px) + env(safe-area-inset-bottom, 0px) + 8px); max-height: 72dvh; }
  .nowe .pop-tlo { background: rgba(5, 8, 12, .38); }
  .inw-karta { display: block; }
  .karta-mapa { display: none; }
  .karta-mob-mapa { display: block; position: relative; height: 42vh; margin: 14px -16px 16px; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
  .karta-tresc { padding: 14px 16px 40px; }
  .inw-karta .podnav { margin: 0 -16px 16px; padding: 0 10px; }
  .tytul-bytu { font-size: 30px !important; }
  .naglowek-bytu .rzad-akcji .przycisk:nth-child(n+3) { display: none; }
  .cykl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .okolica { grid-template-columns: 1fr 1fr; }
  .oko { padding: 10px 12px; }
  .oko .v { flex-wrap: wrap; gap: 2px 8px; }
  .oko .v b { font-size: 17px; }
  .odsylacz { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .odsylacz .miniatura { width: 44px; height: 44px; }
  .inw .lokale-zm { margin-left: 0; flex-basis: 100%; }
  .inw-obszary { padding: 16px 16px 40px; }
  .dokad-w { flex-direction: column; }
}
@media (max-width: 760px) {
  /* bez JS arkusza nie da się przesunąć, a mapy i tak nie ma — lista na cały ekran. Warunek na <html>
     (klasa z <head>), nie na .nowe: ta dostaje .js dopiero po MapLibre, a do tego czasu lista stała na całym
     ekranie i potem zjeżdżała do środkowej wysokości nad pustą mapą (CLS 0,4, w Safari 11 kroków animacji). */
  html:not(.js) .nowe .nowe-mapa { display: none; }
  html:not(.js) .nowe .nowe-lista { position: static; height: 100%; border-radius: 0; box-shadow: none; }
  html:not(.js) .nowe .uchwyt-w { display: none; }
  /* to samo bez WebGL: mapy nie będzie, więc lista na cały ekran */
  .nowe.bez-mapy .nowe-mapa, .nowe.bez-mapy .uchwyt-w { display: none; }
  .nowe.bez-mapy .nowe-lista { position: static; height: 100%; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nowe, .nowe-lista, .inw-komunikat { transition: none; }
}
/* Kontekst mapy przy oddaleniu (RCS.mw w rcs-mapa-wspolne.js): ląd sąsiednich krajów, granice kraju, województw
   i powiatów, nazwy województw, autostrady z daleka. Stonowane — kolor na mapie należy do etapów inwestycji —
   i na :root, bo tej samej biblioteki używa karta budynku (P4). Zagranica ciemniejsza (w jasnym motywie
   szarsza) od lądu kraju: Polska jest płytą, na której leżą kropki. */
:root {
  --mapa-zagranica: #080b0f; --mapa-granica-kraju: #5b6677; --mapa-granica-woj: #4a5567; --mapa-granica-pow: #343e4c;
  --mapa-napis-woj: #6f7a8a; --mapa-szkic-droga: #4a5568;
}
@media (prefers-color-scheme: light) {
  :root:not([data-motyw="ciemny"]) {
    --mapa-zagranica: #dde2e8; --mapa-granica-kraju: #8e98a6; --mapa-granica-woj: #a4aebb; --mapa-granica-pow: #c5ccd5;
    --mapa-napis-woj: #7b8594; --mapa-szkic-droga: #cbb68c;
  }
}
:root[data-motyw="jasny"] {
  --mapa-zagranica: #dde2e8; --mapa-granica-kraju: #8e98a6; --mapa-granica-woj: #a4aebb; --mapa-granica-pow: #c5ccd5;
  --mapa-napis-woj: #7b8594; --mapa-szkic-droga: #cbb68c;
}
/* ═══ koniec [D] ═══ */

/* ═══ [E] MAPA — właściciel P6 ═══ */
/* /mapa w powłoce RCS 2 (docs/rcs2/SPEC.md 6.2, 7). Mapa na całą treść strony-mapy (body.tryb-mapa
   z [B]), nakładki ze szkła: płyta warstw w lewym górnym rogu, przybliżanie i 3D w prawym, karta
   „W tym widoku mapy” w lewym dolnym, legenda w prawym dolnym. Na telefonie płyta zwija się do
   przycisku „Warstwy” i wysuwa szufladą nad paskiem kart, a karta „w widoku” staje się jednym wierszem.

   Stare reguły mapy (.mapa-pelna, .mapa-panel, .narz, .mapa-legenda, .panel) stoją w [C]; tutaj są
   o stopień mocniejsze (przedrostek .mapa-pelna), więc nadpisują je bez ruszania cudzego regionu. */

/* ── mapa na całą treść ─────────────────────────────────────────────────────────────────── */
body.tryb-mapa .mapa-pelna, body.pelny-ekran .mapa-pelna { position: relative; height: 100%; margin: 0; overflow: hidden; }
.mapa-pelna .mapa { height: 100%; border: 0; border-radius: 0; background: var(--mapa-lad); }

/* Barwy komunikacji na mapie — czyta je skrypt mapy (getComputedStyle na .mapa-pelna). Tramwaj
   ma własną, ochrową barwę: nie jest etapem inwestycji ani ceną (SPEC 1.4), a kolej zostaje szara. */
.mapa-pelna { --mapa-kom-kolej: #95a0b0; --mapa-kom-tram: #c9a05a; --mapa-kom-stacja: #0d1117; --mapa-kom-stacja-obw: #d3dbe6; }
@media (prefers-color-scheme: light) {
  :root:not([data-motyw="ciemny"]) .mapa-pelna { --mapa-kom-kolej: #5f6b7c; --mapa-kom-tram: #a8741f;
    --mapa-kom-stacja: #ffffff; --mapa-kom-stacja-obw: #2f3845; }
}
:root[data-motyw="jasny"] .mapa-pelna { --mapa-kom-kolej: #5f6b7c; --mapa-kom-tram: #a8741f;
  --mapa-kom-stacja: #ffffff; --mapa-kom-stacja-obw: #2f3845; }

/* ── szkło nakładek ─────────────────────────────────────────────────────────────────────── */
.mapa-pelna .mapa-panel, .mapa-pelna .w-widoku, .mapa-pelna .mapa-chip, .mapa-pelna .narz,
.mapa-pelna .mapa-legenda, .mapa-pelna .mapa-dymek {
  background: var(--szklo); color: var(--tekst); border: 0; box-shadow: var(--cien-plyw);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }

/* ── płyta warstw ───────────────────────────────────────────────────────────────────────── */
.mapa-pelna .mapa-panel { position: absolute; left: 14px; top: 14px; right: auto; bottom: auto; z-index: 7;
  width: 300px; max-height: calc(100% - 28px); overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 8px; border-radius: var(--r-3); }
.mapa-pelna .mapa-panel[hidden] { display: none; }
/* Nad kartą „W tym widoku”, nie na niej: przy niższym oknie (1280×600) płyta zachodziła na kartę,
   a rozwinięte „Kolory, dane…” przykrywały ją całą. Płyta przewija się wtedy w sobie. */
.mapa-pelna:has(> .w-widoku:not([hidden])) .mapa-panel { max-height: calc(100% - 58px - var(--w-widoku-h, 0px)); }
/* przy braku miejsca płyta się przewija — kolumna flex ściskała zamiast tego przycisk „Kolory, dane…” */
.mapa-pelna .mapa-panel > * { flex-shrink: 0; }
.mapa-pelna .pw-glowa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mapa-pelna .pw-glowa h2 { margin: 0; font: 700 15px/1.2 var(--font); font-stretch: var(--szer-naglowka); letter-spacing: -.01em; }
.mapa-pelna .pw-zamknij { display: none; width: 40px; height: 40px; margin: -6px -8px -6px 0; padding: 0; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--sz); filter: none; transform: none; }
.mapa-pelna .pw-zamknij:hover { background: var(--plyta-3); color: var(--tekst); }

/* segmenty: mieszkania | działki oraz cena | wobec miasta */
.mapa-pelna .mapa-panel .wybor { display: flex; gap: 2px; padding: 3px; margin: 0; border: 0; border-radius: var(--r-pig);
  background: var(--plyta-3); overflow: visible; }
.mapa-pelna .mapa-panel .wybor a, .mapa-pelna .mapa-panel .wybor button { flex: 1; height: 28px; padding: 0 10px;
  border: 0; border-radius: var(--r-pig); background: transparent; color: var(--sz); filter: none; transform: none;
  font: 600 var(--t-mini)/1 var(--font); text-decoration: none; }
.mapa-pelna .mapa-panel .wybor a:hover, .mapa-pelna .mapa-panel .wybor button:hover { color: var(--tekst); background: transparent; }
.mapa-pelna .mapa-panel .wybor a.akt, .mapa-pelna .mapa-panel .wybor button.akt { background: var(--plyta); color: var(--tekst);
  box-shadow: var(--cien-1); }
.mapa-pelna .mapa-panel .wybor[aria-busy="true"] { opacity: .6; }
.mapa-pelna .mapa-panel .mapa-opis { margin: 0; }

/* cztery główne przełączniki */
.mapa-pelna .pw-glowne { display: grid; gap: 0; }
.mapa-pelna .pw-wiersz { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 7px 0; margin: 0; font: 500 var(--t-mala)/1.25 var(--font); color: var(--tekst); cursor: pointer; }
.mapa-pelna .pw-wiersz > .ik { color: var(--sz); }
.mapa-pelna .pw-wiersz .t { min-width: 0; overflow: visible; white-space: normal; text-overflow: clip; }
.mapa-pelna .pw-wiersz small { display: block; margin-top: 2px; color: var(--sz); font: 400 var(--t-mikro)/1.35 var(--font); }
.mapa-pelna .pw-wiersz input[role="switch"] { -webkit-appearance: none; appearance: none; position: relative; flex: none;
  width: 36px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 11px; background: var(--plyta-4);
  cursor: pointer; box-shadow: none; transition: background var(--szyb); }
.mapa-pelna .pw-wiersz input[role="switch"]::before { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--plyta); box-shadow: var(--cien-1); transition: transform var(--sred) var(--krzywa); }
.mapa-pelna .pw-wiersz input[role="switch"]:checked { background: var(--tekst); }
.mapa-pelna .pw-wiersz input[role="switch"]:checked::before { transform: translateX(14px); }
.mapa-pelna .pw-wiersz input[role="switch"]:focus { box-shadow: none; border: 0; }
.mapa-pelna .pw-wiersz input[role="switch"]:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

/* „Kolory, dane, podkład i podpisy”: dawny panel warstw, zwinięty pod przełącznikami */
.mapa-pelna .pw-wiecej { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px;
  margin: 0; padding: 0 2px; border: 0; border-top: 1px solid var(--linia); border-radius: 0; background: none;
  color: var(--sz); font: 600 var(--t-mini)/1 var(--font); cursor: pointer; filter: none; transform: none; }
.mapa-pelna .pw-wiecej:hover { color: var(--tekst); }
.mapa-pelna .pw-strzalka { transform: rotate(90deg); transition: transform var(--sred) var(--krzywa); }
.mapa-pelna .pw-wiecej[aria-expanded="true"] .pw-strzalka { transform: rotate(-90deg); }
.mapa-pelna .pw-wiecej-tresc[hidden] { display: none; }
.mapa-pelna .pw-wiecej-tresc { margin-top: -6px; }
.mapa-pelna .pw-wiecej-tresc h3 { margin: 12px 0 4px; font: 650 var(--t-mini)/1.3 var(--font); color: var(--sz);
  text-transform: none; letter-spacing: 0; }
.mapa-pelna .pw-wiecej-tresc h3:first-child { margin-top: 0; }
.mapa-pelna .pw-wiecej-tresc .tryby { margin: 0 0 6px; }

/* ── przybliżanie, 3D, północ ───────────────────────────────────────────────────────────── */
.mapa-pelna .maplibregl-ctrl-top-right { top: 4px; right: 4px; }
.mapa-pelna .maplibregl-ctrl-top-right .maplibregl-ctrl-group { border: 0 !important; border-radius: 12px !important;
  overflow: hidden; background: var(--szklo) !important; box-shadow: var(--cien-plyw) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.mapa-pelna .maplibregl-ctrl-top-right .maplibregl-ctrl-group button { width: 38px; height: 38px; }
.mapa-pelna .mapa-narzedzia { top: 98px; right: 14px; gap: 8px; }
.mapa-pelna .narz { height: 38px; min-width: 38px; padding: 0 10px; border-radius: 12px; justify-content: center;
  color: var(--tekst); font: 700 var(--t-mala)/1 var(--font); }
.mapa-pelna .narz:hover { background: var(--plyta-3); }
.mapa-pelna .narz.akt { background: var(--tekst); color: var(--tlo); }

/* ── karta „W tym widoku mapy” ──────────────────────────────────────────────────────────── */
.mapa-pelna .w-widoku { position: absolute; left: 14px; bottom: 30px; z-index: 5; width: 300px; padding: 14px;
  display: grid; gap: 8px; border-radius: var(--r-3); }
.mapa-pelna .w-widoku[hidden] { display: none; }
.mapa-pelna .w-widoku .etk { margin: 0; font: 600 var(--t-mini)/1.2 var(--font); letter-spacing: 0; color: var(--sz); }
.mapa-pelna .w-widoku .liczby { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.mapa-pelna .w-widoku .liczby > div { display: grid; gap: 3px; min-width: 0; }
.mapa-pelna .w-widoku .liczby b { font: 700 20px/1.1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Trzy kolumny po 85 px mieszczą „w sprzedaży” i „3 998” (kraj); podpis, który by się nie zmieścił,
   urywa się wielokropkiem, zamiast wejść pod kółko sąsiedniej kolumny. */
.mapa-pelna .w-widoku .liczby span { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--sz);
  font-size: var(--t-mikro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-pelna .w-widoku .liczby .kr { flex: none; }
.mapa-pelna .w-widoku .liczby .kr { width: 8px; height: 8px; }
.mapa-pelna .w-widoku .liczby .kr--budowa { border-width: 2px; }
.mapa-pelna .w-widoku .notka { margin: 0; color: var(--sz); font-size: var(--t-mala); line-height: 1.45; }
.mapa-pelna .w-widoku .notka b { color: var(--tekst); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mapa-pelna .w-widoku .przycisk { justify-self: start; }

/* ── legenda (prawy dolny róg; „Po lewej stronie” — nad kartą) ─────────────────────────── */
.mapa-pelna .mapa-legenda { left: auto; right: 14px; bottom: 38px; max-width: 210px; padding: 12px; border-radius: var(--r-3); }
.mapa-pelna .mapa-legenda.po-lewej { right: auto; left: 14px; bottom: calc(40px + var(--w-widoku-h, 0px)); }
.mapa-pelna .mapa-legenda h4 { font: 650 var(--t-mikro)/1.25 var(--font); letter-spacing: .04em; color: var(--sz); }
.mapa-pelna .legenda-mapa { font: 500 var(--t-mini)/1.45 var(--font); font-variant-numeric: tabular-nums; }
.mapa-pelna .legenda-zwin { top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; color: var(--sz); }
.mapa-pelna .legenda-zwin:hover { background: var(--plyta-3); }
/* Otwarty panel budynku (z-index 6) zajmuje całą prawą krawędź i przykrywał legendę w prawym dolnym
   rogu — po kliknięciu bryły, z ?budynek= i z adresu z paska. Legenda staje wtedy na lewo od panelu
   (ta sama szerokość co w [C]: min(380px, 42%)). Na węższym oknie tam stoi karta „W tym widoku”, więc
   legenda wchodzi nad nią, a poniżej 900 px zostaje z niej sam tytuł. */
@media (min-width: 761px) {
  .mapa-pelna:has(> .panel:not([hidden])) .mapa-legenda:not(.po-lewej) { right: calc(min(380px, 42%) + 28px); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .mapa-pelna:has(> .panel:not([hidden])) .mapa-legenda:not(.po-lewej) { bottom: calc(40px + var(--w-widoku-h, 0px)); }
}
@media (min-width: 761px) and (max-width: 900px) {
  .mapa-pelna:has(> .panel:not([hidden])) .mapa-legenda .legenda-tresc > *:not(h4) { display: none; }
}

/* ── dymek inwestycji i podziałka ───────────────────────────────────────────────────────── */
.mapa-pelna .mapa-dymek { position: absolute; z-index: 8; display: grid; gap: 3px; max-width: 260px; padding: 9px 12px;
  border-radius: var(--r-2); pointer-events: none; font-size: var(--t-mala); line-height: 1.3;
  transform: translate(-50%, calc(-100% - 16px)); }
.mapa-pelna .mapa-dymek.pod-punktem { transform: translate(-50%, 18px); }
.mapa-pelna .mapa-dymek[hidden] { display: none; }
.mapa-pelna .mapa-dymek b { font-weight: 650; }
.mapa-pelna .mapa-dymek .e { display: flex; align-items: center; gap: 6px; color: var(--sz); font-size: var(--t-mini); }
.mapa-pelna .mapa-dymek .e .kr { width: 8px; height: 8px; }
.mapa-pelna .mapa-dymek .c { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mapa-pelna .mapa-dymek small { color: var(--sz); font-weight: 400; }
.mapa-pelna .mapa-skala { left: 14px; bottom: 9px; }

/* panel budynku: ta sama płyta co reszta nakładek (treść i jej logika bez zmian) */
.mapa-pelna .panel { top: 14px; right: 14px; bottom: 14px; border: 0; border-radius: var(--r-3); box-shadow: var(--cien-plyw); }

.mapa-pelna .mapa-chip { display: none; }

/* ── układ zwarty: telefon i niski ekran ────────────────────────────────────────────────────
   Telefon w poziomie (844×390) ma ponad 760 px szerokości, więc dostawał układ biurkowy: stale otwarta
   płyta, karta i rozwinięta legenda zakrywały ponad połowę mapy, a karta leżała w całości pod płytą.
   Do 600 px wysokości (i na telefonie) płyta jest przyciskiem „Warstwy”, karta jednym wierszem,
   a legenda startuje zwinięta (skrypt mapy, KOMPAKT). Ten sam próg co KOMPAKT w mapa.html. */
@media (max-width: 760px), (max-height: 600px) {
  .mapa-pelna .mapa-chip { display: inline-flex; align-items: center; gap: 8px; position: absolute; left: 10px; top: 10px; z-index: 6;
    height: 44px; padding: 0 18px 0 14px; margin: 0; border-radius: var(--r-pig); font: 650 var(--t-baza)/1 var(--font);
    filter: none; transform: none; }
  .mapa-pelna .mapa-chip[aria-expanded="true"] { background: var(--tekst); color: var(--tlo); }
  .mapa-pelna .mapa-panel { display: none; }
  .mapa-pelna.warstwy-otwarte .mapa-panel { display: flex; }
  .mapa-pelna .pw-zamknij { display: grid; }

  /* karta „w widoku” w jednym wierszu: dwie liczby i strzałka do listy */
  .mapa-pelna .w-widoku { min-height: 56px; padding: 6px 6px 6px 18px; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 10px; border-radius: var(--r-4); }
  .mapa-pelna .w-widoku .etk, .mapa-pelna .w-widoku .notka { display: none; }
  .mapa-pelna .w-widoku .liczby { display: flex; gap: 16px; overflow: hidden; }
  .mapa-pelna .w-widoku .liczby > div { display: flex; align-items: baseline; gap: 5px; }
  .mapa-pelna .w-widoku .liczby > div:nth-child(n+3) { display: none; }
  .mapa-pelna .w-widoku .liczby b { font-size: 18px; }
  .mapa-pelna .w-widoku .liczby span { font-size: var(--t-mala); }
  .mapa-pelna .w-widoku .liczby .kr { display: none; }
  .mapa-pelna .w-widoku .przycisk { position: relative; width: 44px; height: 44px; padding: 0; justify-content: center;
    border-radius: 50%; }
  .mapa-pelna .w-widoku .przycisk span { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  .mapa-pelna .mapa-legenda.zwinieta { padding: 9px 36px 9px 12px; }
  .mapa-pelna .mapa-legenda.zwinieta h4 { margin: 0; font-size: 10px; }
}
/* niski ekran szerszy niż telefon: płyta rozwija się spod przycisku, przybliżanie i dymek zostają */
@media (min-width: 761px) and (max-height: 600px) {
  .mapa-pelna .mapa-panel { top: 62px; left: 10px; max-height: calc(100% - 72px); }
  .mapa-pelna:has(> .w-widoku:not([hidden])) .mapa-panel { max-height: calc(100% - 72px); }
}

/* ── telefon ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .mapa-pelna .maplibregl-ctrl-top-right { display: none; }     /* przybliża się palcami */
  .mapa-pelna .mapa-narzedzia { top: 10px; right: 10px; gap: 8px; }
  .mapa-pelna .narz { height: 44px; min-width: 44px; }

  /* Szuflady nad paskiem kart (most z [B]): płyta warstw i panel budynku stoją na dolnej krawędzi
     mapy, a tam jest teraz pasek kart — wjeżdżają nad niego, a nie pod. */
  .mapa-pelna .mapa-panel { position: fixed; left: 0; right: 0; top: auto; width: auto;
    bottom: calc(var(--dol-h) + env(safe-area-inset-bottom, 0px)); max-height: 72dvh; z-index: 45;
    padding: 12px 16px 16px; border-radius: var(--r-4) var(--r-4) 0 0; background: var(--plyta); }
  .mapa-pelna:has(> .w-widoku:not([hidden])) .mapa-panel { max-height: 72dvh; }
  .mapa-pelna .mapa-panel::before { display: none; }
  .mapa-pelna .pw-wiersz { padding: 9px 0; font-size: var(--t-baza); }
  .mapa-pelna .mapa-panel .wybor a, .mapa-pelna .mapa-panel .wybor button { height: 36px; }
  .mapa-pelna .pw-wiecej { height: 48px; }
  body.tryb-mapa .mapa-pelna .panel, body.pelny-ekran .mapa-pelna .panel { top: auto; right: 0; left: 0;
    bottom: calc(var(--dol-h) + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-4) var(--r-4) 0 0; }

  /* karta „w widoku” na całą szerokość, nad paskiem kart */
  .mapa-pelna .w-widoku { left: 10px; right: 10px; bottom: 10px; width: auto; }

  /* nad kartą: podziałka z lewej, atrybucja i legenda z prawej */
  .mapa-pelna .mapa-skala { left: 12px; bottom: calc(var(--w-widoku-h, 0px) + 22px); }
  .mapa-pelna .maplibregl-ctrl-bottom-right { bottom: calc(var(--w-widoku-h, 0px) + 12px); }
  .mapa-pelna .mapa-legenda, .mapa-pelna .mapa-legenda.po-lewej { bottom: calc(var(--w-widoku-h, 0px) + 50px); max-width: 180px; padding: 10px; }
  .mapa-pelna .mapa-legenda.zwinieta { padding: 9px 36px 9px 12px; }   /* po .po-lewej, która ma tę samą wagę */
  .mapa-pelna .mapa-legenda { right: 10px; }
  .mapa-pelna .mapa-legenda.po-lewej { left: 10px; }
  .mapa-pelna .mapa-dymek { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-pelna .pw-wiersz input[role="switch"], .mapa-pelna .pw-wiersz input[role="switch"]::before,
  .mapa-pelna .pw-strzalka { transition: none; }
}

/* ── szukajka i rodzaj nad mapą (02.10.2026) ────────────────────────────────────────────────
   Prośby właściciela: szukajka na mapie i selektor mieszkania / działki / domy widoczny CAŁY czas, nieduży. Biurko:
   pole i selektor w jednym rzędzie w lewym górnym rogu, płyta warstw pod nimi (761–1100 px: selektor pod polem, bo
   z prawej stoi panel budynku). Telefon i niski ekran: pole w pierwszym rzędzie (z prawej 3D), w drugim „Warstwy”
   z lewej i selektor z prawej. Pasek nie chowa się przy otwartym panelu, arkuszu ani szufladzie. */
.mapa-pelna .mapa-gora { position: absolute; left: 14px; top: 14px; z-index: 8; display: flex; align-items: flex-start;
  gap: 8px; max-width: calc(100% - 84px); pointer-events: none; }
.mapa-pelna .mapa-gora > * { pointer-events: auto; }
.mapa-pelna .mapa-szukaj { position: relative; top: auto; left: auto; z-index: 2; flex: none; width: 300px; height: 44px;
  display: flex; align-items: center; gap: 8px; padding: 0 6px 0 14px; border: 0; border-radius: var(--r-pig);
  background: var(--szklo); color: var(--sz); box-shadow: var(--cien-plyw);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
.mapa-pelna .mapa-szukaj:focus-within { box-shadow: var(--cien-plyw), 0 0 0 2px var(--akcent); }
.mapa-pelna .mapa-szukaj input { flex: 1; min-width: 0; height: 42px; margin: 0; padding: 0; border: 0; background: none;
  color: var(--tekst); font: 500 var(--t-mala)/1 var(--font); }
.mapa-pelna .mapa-szukaj input:focus { outline: none; box-shadow: none; }
.mapa-pelna .mapa-szukaj ul { top: 50px; left: 0; right: auto; width: max(100%, 380px); max-width: calc(100vw - 28px);
  max-height: min(60vh, 460px); overscroll-behavior: contain; z-index: 9; border: 0; border-radius: var(--r-3);
  box-shadow: var(--cien-plyw); }
.mapa-pelna .mapa-szukaj li { border-radius: 10px; }
.mapa-pelna .mapa-szukaj li[data-rodzaj="szukaj"] .miejsce b { color: var(--akcent); }
/* działka: etykieta z ulicą i obrębem łamie się zamiast urywać (na telefonie to cała informacja wiersza) */
.mapa-pelna .mapa-szukaj li[data-rodzaj] .miejsce b { white-space: normal; }
.mapa-pelna .mapa-szukaj .rodzaj-miejsca { flex-basis: 70px; }
.mapa-pelna .wybor-mini { position: relative; z-index: 1; display: flex; flex: none; gap: 2px; height: 44px; margin: 0; padding: 3px; border: 0;
  border-radius: var(--r-pig); background: var(--szklo); box-shadow: var(--cien-plyw);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
.mapa-pelna .wybor-mini a { flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 13px;
  border-radius: var(--r-pig); background: transparent; color: var(--sz); font: 600 var(--t-mala)/1 var(--font);
  white-space: nowrap; text-decoration: none; }
.mapa-pelna .wybor-mini a:hover { color: var(--tekst); background: var(--plyta-3); }
.mapa-pelna .wybor-mini a.akt { background: var(--tekst); color: var(--tlo); }
.mapa-pelna .wybor-mini[aria-busy="true"] { opacity: .6; }
.mapa-pelna .mapa-panel { top: 66px; max-height: calc(100% - 80px); }
.mapa-pelna:has(> .w-widoku:not([hidden])) .mapa-panel { max-height: calc(100% - 110px - var(--w-widoku-h, 0px)); }
#mapa-pelna[data-wybor] .mapa-wybor { top: 66px; }
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 601px) {
  .mapa-pelna .mapa-gora { flex-direction: column; }
  .mapa-pelna .mapa-panel { top: 118px; max-height: calc(100% - 132px); }
  .mapa-pelna:has(> .w-widoku:not([hidden])) .mapa-panel { max-height: calc(100% - 162px - var(--w-widoku-h, 0px)); }
  #mapa-pelna[data-wybor] .mapa-wybor { top: 118px; }
}
@media (max-width: 760px), (max-height: 600px) {
  .mapa-pelna .mapa-gora { left: 10px; top: 10px; right: 10px; max-width: none; flex-wrap: wrap; justify-content: flex-end; }
  .mapa-pelna .mapa-szukaj { flex: 0 0 calc(100% - 52px); width: auto; margin-right: 52px; }
  .mapa-pelna .wybor-mini a { padding: 0 11px; }
  .mapa-pelna .mapa-chip { top: 62px; }
  #mapa-pelna[data-wybor] .mapa-wybor { top: 114px; }
}
@media (min-width: 761px) and (max-height: 600px) {
  .mapa-pelna .mapa-gora { right: auto; width: min(520px, calc(100% - 20px)); }
  .mapa-pelna .mapa-szukaj { flex-basis: 100%; margin-right: 0; }
  .mapa-pelna .mapa-panel { top: 114px; max-height: calc(100% - 124px); }
  .mapa-pelna:has(> .w-widoku:not([hidden])) .mapa-panel { max-height: calc(100% - 124px); }
}
@media (max-width: 760px) {
  .mapa-pelna .mapa-szukaj ul { width: calc(100vw - 20px); max-width: none; max-height: 50dvh; }
  /* otwarta szuflada „Warstwy” kończy się pod paskiem z polem i selektorem (ten stoi niżej, z-index 8) - selektor
     rodzaju widać cały czas, także przy otwartych warstwach (przegląd 02.10.2026). Szuflada stoi na dole (top: auto -
     „top: 66px” z biurka wyżej rozciągał ją pod sam nagłówek), najwyżej do 172 px od góry okna (nagłówek strony i dwa
     rzędy paska nad mapą). */
  .mapa-pelna .mapa-panel { top: auto; }
  .mapa-pelna.warstwy-otwarte .mapa-panel,
  .mapa-pelna.warstwy-otwarte:has(> .w-widoku:not([hidden])) .mapa-panel {
    max-height: min(72dvh, calc(100% - 172px - var(--dol-h) - env(safe-area-inset-bottom, 0px))); }
}
@media (max-width: 380px) {
  .mapa-pelna .mapa-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mapa-pelna .mapa-chip { padding: 0 14px; }
  .mapa-pelna .wybor-mini a { padding: 0 9px; }
}
/* ═══ koniec [E] ═══ */

/* ═══ [F] ZGODA I DOKUMENTY PRAWNE — właściciel pakietu „prawne” (opis: templates/_zgoda.html) ═══ */
/* --zgoda-h: miejsce pod banerem (baner + odstępy; na telefonie także pasek kart) na końcu .ukl i w scroll-padding */
:root { --zgoda-h: 124px; }
@media screen {
  html.zgoda-pyt .zgoda[hidden] { display: flex !important; }
  html.zgoda-pyt .ukl { padding-bottom: var(--zgoda-h); }
  :root.zgoda-pyt { scroll-padding-bottom: var(--zgoda-h); }
}
.zgoda { flex-wrap: wrap; align-items: center; gap: 12px 20px; position: fixed; z-index: 44; left: calc(var(--szyna-w) + 16px);
  right: 16px; bottom: 16px; max-width: 920px; margin: 0 auto; padding: 14px 16px 14px 20px; border-radius: var(--r-3);
  background: var(--plyta); color: var(--tekst); box-shadow: var(--cien-plyw); }
.zgoda-o { flex: 1 1 380px; margin: 0; color: var(--sz); font-size: var(--t-mala); line-height: 1.5; }
.zgoda-o b { display: block; margin-bottom: 2px; color: var(--tekst); font: 650 var(--t-tresc)/1.35 var(--font); }
.zgoda-p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zgoda-p .przycisk { height: 40px; min-width: 132px; justify-content: center; }
button.zgoda-link { height: auto; min-height: 28px; margin: 0; padding: 0 4px; border: 0; background: none; color: var(--akcent);
  font: 600 var(--t-mala)/1.3 var(--font); text-decoration: underline; cursor: pointer; filter: none; transform: none; }
html dialog.zgoda-okno { width: min(560px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto;
  padding: 20px 22px 16px; border: 0; border-radius: var(--r-4); background: var(--plyta); color: var(--tekst);
  box-shadow: var(--cien-plyw); overflow: auto; }
html dialog.zgoda-okno::backdrop { background: color-mix(in srgb, var(--tlo, #0a0d12) 55%, transparent); }
.zgoda-okno p { color: var(--sz); font-size: var(--t-mala); line-height: 1.5; }
.zgoda-okno .zgoda-okno-t { margin-bottom: 8px; color: var(--tekst); font: 700 var(--t-h2)/1.25 var(--font); }
.zgoda-kat { margin: 12px 0; padding: 12px 14px 2px; border: 1px solid var(--linia); border-radius: var(--r-2); background: var(--plyta-2); }
.zgoda-kat p:first-child { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin: 0 0 4px;
  color: var(--tekst); font-size: var(--t-tresc); font-weight: 650; }
.zgoda-kat span { color: var(--sz); font-size: var(--t-mini); }
.zgoda-kat label { flex: 1; cursor: pointer; }
.zgoda-okno input[role="switch"] { min-width: 24px; min-height: 24px; margin: 0; accent-color: var(--akcent); cursor: pointer; }
.zgoda-okno input[role="switch"]:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
.zgoda-dol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--linia); }
.zgoda-dol .zgoda-link { padding: 0; color: var(--spadek); }
@media (max-width: 1020px) { :root { --zgoda-h: 144px; } }
@media (max-width: 910px) { :root { --zgoda-h: 176px; } }
/* Telefon (UX B1, 01.10.2026: dawniej ok. 23% ekranu 390×844): jeden wiersz - pytanie, „Szczegóły” i „Ustawienia” - a pod
   nim dwa równe przyciski. Opis (.zgoda-dl) jest pod „Szczegóły”; .zgoda-p znika z układu (display: contents), więc
   jego przyciski i odnośnik ustawia kolejność w samym banerze, a ::before łamie wiersz przed przyciskami. */
@media (max-width: 760px) {
  :root { --zgoda-h: calc(var(--dol-h) + env(safe-area-inset-bottom, 0px) + 132px); }
  .zgoda { left: 8px; right: 8px; bottom: calc(var(--dol-h) + env(safe-area-inset-bottom, 0px) + 8px); gap: 4px 10px; padding: 10px 12px; }
  .zgoda-o { flex: 1 1 0; min-width: 0; line-height: 1.35; }
  .zgoda-o b { display: inline; margin: 0 4px 0 0; font-size: var(--t-mala); }
  .zgoda-dl { display: none; }
  .zgoda-p { display: contents; }
  .zgoda-p::before { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .zgoda .zgoda-link { order: 1; flex: none; min-height: 28px; }
  .zgoda-p .przycisk { order: 3; flex: 1 1 0; min-width: 0; height: 44px; }
  /* 10.11.2026: lista inwestycji z mapą - baner stoi u góry, na mapie, a nie pod listą. Na dole zabierał 132 px
     i na pierwszym ekranie mieściła się jedna inwestycja (wejścia z ChatGPT: 2/3 nie otwierało żadnej karty). */
  html.zgoda-pyt:has(.nowe:not(.bez-mapy)) .ukl { padding-bottom: calc(var(--dol-h) + env(safe-area-inset-bottom, 0px)); }
  html.zgoda-pyt:has(.nowe:not(.bez-mapy)) .zgoda { top: calc(var(--pasek-h) + 8px); bottom: auto; }
  html dialog.zgoda-okno { padding: 18px 16px 14px; }
  /* szuflady mapy są w <main> (view-transition-name = osobny kontekst nakładania): gdy któraś jest otwarta, baner czeka */
  html.zgoda-pyt:has(.mapa-pelna.warstwy-otwarte, .mapa-pelna > .panel:not([hidden])) .zgoda[hidden] { display: none !important; }
}
@media (max-width: 380px) { :root { --zgoda-h: calc(var(--dol-h) + env(safe-area-inset-bottom, 0px) + 152px); } }
/* stan zgody na /prywatnosc (tekst wybiera klasa na <html>, bez skryptu), linki w stopce, „Twoje” i „Więcej” */
.zgoda-stan { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--linia); border-radius: var(--r-3); background: var(--plyta); }
.zgoda-stan p { margin: 0 0 10px; }
.zgoda-stan [class^="gdy-"] { display: none; }
html.zgoda-tak .gdy-tak, html.zgoda-nie .gdy-nie, html.zgoda-pyt .gdy-pyt, html.zgoda-brak .gdy-brak, html:not(.js) .gdy-bez-js { display: inline; }
.stopka-prawne { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
.wysuw a.wysuw-prywatnosc { margin-top: 6px; border-top: 1px solid var(--linia); border-radius: 0; }
.lista-m > button small { display: block; color: var(--sz); font-size: var(--t-mini); text-align: left; }

/* ── strony /regulamin i /prywatnosc (main.prawne): jedna kolumna do czytania ── */
main.prawne .dok { max-width: 780px; margin: 0 auto; }
.dok .dok-etk { margin: 0 0 var(--k-2); color: var(--sz); font: 600 var(--t-mini)/1.35 var(--font); }
.dok .dok-lead { color: var(--sz); font-size: var(--t-tresc); line-height: 1.55; max-width: 68ch; }
.dok [id] { scroll-margin-top: calc(var(--pasek-h) + 16px); }
.dok h2 { margin: 40px 0 12px; }
.dok h3 { margin: 22px 0 6px; color: var(--tekst); font: 650 var(--t-tresc)/1.4 var(--font); letter-spacing: 0; }
.dok p, .dok li { font-size: var(--t-tresc); line-height: 1.62; }
.dok p, .dok :is(ul, ol) { max-width: 72ch; }
.dok :is(ul, ol) { margin: 0 0 var(--k-3); padding-left: 1.4em; }
.dok li + li { margin-top: 6px; }
.dok li::marker { color: var(--sz); }
.dok a:not(.przycisk) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--akcent) 45%, transparent); }
.dok code { padding: 1px 5px; border-radius: 5px; background: var(--plyta-3); font: 500 .9em/1.3 var(--mono); overflow-wrap: anywhere; }
.dok .dok-drobne { color: var(--sz); font-size: var(--t-mala); }
.dok-skrot, .dok-spis { margin: 20px 0; padding: 16px 20px 6px; border: 1px solid var(--linia); border-radius: var(--r-3); background: var(--plyta); }
.dok .dok-skrot h2, .dok .dok-spis h2 { margin: 0 0 10px; font-size: var(--t-tresc); }
.dok-spis ol { columns: 2 260px; column-gap: 32px; }
.dok-spis li { break-inside: avoid; }
.dok .dok-wazne { max-width: none; margin: 16px 0; padding: 12px 16px; border-left: 3px solid var(--akcent);
  border-radius: 0 var(--r-2) var(--r-2) 0; background: var(--akcent-tlo); }
.dok-stopka { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--linia); }
.dok-stopka p { color: var(--sz); font-size: var(--t-mala); }
/* tabele tekstu, nie liczb: bez nowrap, wyrównania do prawej, przyklejonej kolumny i zebry z [C] */
.dok-tab { margin: 12px 0 18px; border: 1px solid var(--linia); border-radius: var(--r-3); background: var(--plyta); overflow: hidden; }
.dok-tab caption { padding: 10px 14px; caption-side: top; text-align: left; color: var(--sz); font: 600 var(--t-mini)/1.35 var(--font); }
.dok-tab :is(th, td), .dok-tab :is(th, td):first-child, .dok-tab thead th { position: static; height: auto; padding: 10px 14px;
  white-space: normal; text-align: left; vertical-align: top; line-height: 1.5; font-variant-numeric: normal; background: none; }
.dok-tab tbody tr:nth-child(even) td, .dok-tab tbody tr:hover td { background-image: none; box-shadow: none; }
.dok-tab td:first-child { min-width: 9em; }
.dok-tab td:first-child code { white-space: nowrap; }
/* telefon: wiersz tabeli jako karta z podpisami z data-etykieta (bez przewijania w bok) */
@media (max-width: 640px) {
  .dok-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dok-tab :is(table, caption, tbody, tr, td) { display: block; }
  .dok-tab tr { padding: 8px 0; border-top: 1px solid var(--linia-2); }
  .dok-tab td, .dok-tab td:first-child { min-width: 0; padding: 4px 14px; border: 0; }
  .dok-tab td::before { content: attr(data-etykieta); display: block; color: var(--sz); font: 600 var(--t-mikro)/1.4 var(--font); }
  .dok section[id] > h2 { margin-top: 32px; }
}
@media print { .zgoda-stan .tylko-js { display: none !important; } }
/* ═══ koniec [F] ═══ */

/* SEO i AI (rcs/web/seo.py, _seo.html): akapit „odpowiedź najpierw” pod nagłówkiem karty gminy, ulicy i budynku -
   liczby karty zdaniami, z okresem i źródłem w tym samym akapicie. */
.seo-lead { margin: .75rem 0 1rem; max-width: 80ch; color: var(--tekst); font-size: var(--t-tresc); line-height: 1.5; }
.seo-lead .seo-zrodlo { color: var(--sz); }

/* Telefon: pola formularzy co najmniej 16 px - iOS przy mniejszej czcionce sam przybliża stronę po dotknięciu pola
   (14.10.2026: wyszukiwarka mapy 13 px, formularz raportu dla biznesu 15 px) */
@media (max-width: 760px) {
  input[type=search], input[type=text], input[type=number], input[type=email], input[type=tel], input:not([type]),
  select, textarea { font-size: 16px !important; }
}

/* ── Obserwuj z powiadomieniami (rcs-obserwuj.js, konto.html; 18.10.2026) ── */
.obs-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--linia); border-radius: var(--r-4);
  background: var(--plyta); color: var(--tekst); box-shadow: 0 20px 60px rgb(0 0 0 / .25); z-index: 9000; }
.obs-dialog::backdrop { background: rgb(0 0 0 / .45); }
.obs-form { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.obs-form h2 { margin: 0; font-size: var(--t-naglowek, 1.15rem); }
.obs-co { margin: 0; font-weight: 600; }
.obs-opcja { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linia);
  border-radius: var(--r-3); cursor: pointer; }
.obs-opcja input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--akcent); }
.obs-opcja small { color: var(--sz); }
.obs-email { height: 44px; padding: 0 12px; border: 1px solid var(--linia); border-radius: var(--r-3); background: var(--tlo);
  color: var(--tekst); font: inherit; font-size: 16px; }
.obs-podpowiedz, .obs-maly { margin: 0; color: var(--sz); font-size: var(--t-mala); }
.obs-wynik { margin: 0; min-height: 1.2em; font-size: var(--t-mala); }
.obs-wynik.obs-blad { color: var(--zle, #b42318); }
.obs-przyciski { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.konto-dok h2 { margin-top: 28px; }
.konto-pod { color: var(--sz); }
.konto-ok, .konto-uwaga { padding: 10px 14px; border-radius: var(--r-3); background: var(--akcent-tlo); }
.konto-uwaga { background: var(--uwaga-tlo, #fff1d6); }
.konto-lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.konto-lista li { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--linia); border-radius: var(--r-3); }
.konto-akcje { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.konto-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.konto-form input { height: 44px; min-width: min(320px, 100%); padding: 0 12px; border: 1px solid var(--linia);
  border-radius: var(--r-3); font: inherit; font-size: 16px; background: var(--tlo); color: var(--tekst); }
.przycisk--niebezpieczny { color: var(--zle, #b42318); border-color: currentColor; }
.konto-stopka { margin-top: 32px; font-size: var(--t-mala); }

/* /rynek/gminy: lista 2,5 tys. odnośników do hubów gmin (SEO 21.10.2026) */
.gminy-lista { line-height: 1.9; overflow-wrap: anywhere; }
.gminy-lista a { white-space: nowrap; }

/* ── karta inwestycji v4 (24.10.2026): ten sam język co karta działki - mapa od góry na telefonie, liczby bez ramek, płaskie sekcje ── */
.inw-karta--v4 .cena3 { gap: 0; margin: 0 0 18px; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.inw-karta--v4 .cena3 .cena { background: none; border: 0; border-radius: 0; padding: 14px 10px 12px; text-align: center; display: grid; gap: 3px; justify-items: center; }
.inw-karta--v4 .cena3 .cena::before { display: none; }
.inw-karta--v4 .cena3 .cena + .cena { border-left: 1px solid var(--linia-2); }
.inw-karta--v4 .cena3 .co { order: 2; font-weight: 500; color: var(--sz); font-size: 11px; line-height: 1.2; }
.inw-karta--v4 .cena3 .cena b { order: 1; font-size: clamp(20px, 4.8vw, 26px); }
.inw-karta--v4 .cena3 .cena b small { display: block; margin: 0; font-size: 11px; }
.inw-karta--v4 .cena3 .ds { order: 3; font-size: 11px; line-height: 1.25; }
.inw-karta--v4 .inw-skrot-det { margin: 0 0 22px; }
.inw-karta--v4 .inw-skrot-det > summary { color: var(--akcent); font: 600 var(--t-mala)/1.3 var(--font); cursor: pointer; padding: 8px 0; }
.inw-karta--v4 .skrot-i { margin: 6px 0 0; padding: 0; background: none; border: 0; }
.inw-karta--v4 .plyta-i { background: none; border: 0; border-radius: 0; }
.inw-karta--v4 .plyta-i--pad { padding: 0; }
.inw-karta--v4 .sekcja-k { padding-top: 24px; border-top: 1px solid var(--linia); margin-bottom: 30px; }
.inw-karta--v4 .sekcja-k > .gl h2 { font-size: clamp(20px, 1rem + .5vw, 24px); }
.inw-karta--v4 .podnav { display: none; }
.inw-karta--v4 .oko { border: 0; background: var(--plyta-2); }
@media (max-width: 760px) {
  .inw-karta--v4 .inw-hero { position: relative; margin: -14px -16px 0; }
  .inw-karta--v4 .inw-hero .karta-mob-mapa { height: min(62vh, 520px); margin: 0; border: 0; }
  .inw-karta--v4 .inw-hero .naglowek-bytu { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; margin: 0; padding: 72px 16px 12px; gap: 6px;
    background: linear-gradient(to top, rgb(10 13 18 / .86) 0%, rgb(10 13 18 / .55) 55%, transparent 100%); color: #fff; pointer-events: none; }
  .inw-karta--v4 .inw-hero .naglowek-bytu a, .inw-karta--v4 .inw-hero .naglowek-bytu button { pointer-events: auto; }
  .inw-karta--v4 .inw-hero .tytul-bytu { color: #fff; font-size: clamp(24px, 7vw, 30px) !important; text-shadow: 0 1px 2px rgb(0 0 0 / .4); }
  .inw-karta--v4 .inw-hero .meta { color: #dbe3ee; font-size: var(--t-mala); }
  .inw-karta--v4 .inw-hero .rzad, .inw-karta--v4 .inw-hero .rzad * { color: #e5edf7; }
  .inw-karta--v4 .inw-hero .rzad-akcji .przycisk { border-color: rgb(255 255 255 / .3); background: rgb(255 255 255 / .16); color: #fff;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .inw-karta--v4 .inw-hero .rzad-akcji .przycisk .ikn, .inw-karta--v4 .inw-hero .rzad-akcji .przycisk svg { color: #fff; }
  .inw-karta--v4 .inw-hero .rzad-akcji .przycisk--glowny { background: #fff; color: #0b0f16; border-color: #fff; }
  .inw-karta--v4 .inw-hero .rzad-akcji .przycisk--glowny svg { color: #0b0f16; }
  .inw-karta--v4 .cena3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
}

/* „Gdzie jestem” przy mapach budynku i inwestycji (RCS.mw.gdzieJestem, 24.10.2026) */
.sterowanie .grupa button .ik { display: block; width: 18px; height: 18px; margin: auto; }
.sterowanie .grupa button[aria-busy="true"] { opacity: 0.45; cursor: progress; }
.sterowanie .grupa button[data-blad] { color: var(--zle, #b3261e); }

/* ── Kalkulator kosztów zakupu (templates/_koszty.html, plan luk A1, 25.10.2026) ── */
.kz { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--linia); border-radius: 14px; background: var(--plyta); }
.kz-t { margin: 0; font-size: 1.15rem; }
.kz-form { display: grid; gap: 10px; }
.kz-pole { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: 8px; }
.kz-pole span { color: var(--sz); }
.kz-pole input { height: auto; min-height: 40px; padding: 6px 10px; font: inherit; font-variant-numeric: tabular-nums;
  border: 1px solid var(--linia-3); border-radius: 8px; background: var(--plyta-2); color: var(--tekst); width: 100%; min-width: 0; }
.kz-pole em { font-style: normal; color: var(--sz); }
.kz-wybor { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.kz-wybor label, .kz-check { display: inline-flex; align-items: center; gap: 6px; }
.kz-btn { height: auto; min-height: 40px; }
.kz-poz { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kz-poz li, .kz-razem { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kz-poz b, .kz-razem b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kz-co small, .kz-razem small { display: block; color: var(--sz); font-size: .82rem; }
.kz-razem { margin: 0; padding-top: 10px; border-top: 1px solid var(--linia); font-weight: 600; }
.kz-razem--z { border-top: 0; padding-top: 0; font-weight: 400; color: var(--sz); }
.kz-wiecej { color: var(--sz); font-size: .9rem; }
.kz-zmien summary { cursor: pointer; color: var(--akcent); }
.kz-zmien[open] summary { margin-bottom: 10px; }
.kz-wiecej p { margin: 8px 0; }
.kz-strona { max-width: 44rem; margin: 0 auto; display: grid; gap: 16px; }
.kz-strona h1 { margin: 8px 0 0; }
.kz-lead { margin: 0; color: var(--sz); }
.kz-rodzaje { display: flex; gap: 8px; flex-wrap: wrap; }
.kz-chip { padding: 6px 12px; border: 1px solid var(--linia-3); border-radius: 999px; color: var(--tekst); }
.kz-chip[aria-current="true"] { background: var(--akcent-tlo); border-color: var(--akcent); color: var(--akcent); }
.kz-podstawy { color: var(--sz); font-size: .9rem; }
.kz-podstawy h2 { font-size: 1rem; color: var(--tekst); }

/* „Jakie sieci komórkowe są w pobliżu?” (25.10.2026, s_lacznosc; karta miejsca i karta inwestycji): ikona w barwie sieci */
.an-k-sieci-ik, .k26-sieci-ik { color: var(--barwa-sieci, var(--akcent)) !important;
  background: color-mix(in srgb, var(--barwa-sieci, var(--akcent)) 13%, transparent) !important; }

/* ── Znacznik właściciela w statystykach (/ja-…, rcs/web/templates/znacznik.html; 26.10.2026) ── */
.zn-strona .zn-stan { display: grid; gap: 10px; margin: 20px 0 8px; padding: 18px 20px; border: 1px solid var(--linia);
  border-radius: var(--r-3); background: var(--plyta); }
.zn-strona .zn-stan--wyl { border-left: 4px solid var(--wzrost); }
.zn-strona .zn-stan--wl { border-left: 4px solid var(--linia-3); }
.zn-strona .zn-stan p { margin: 0; line-height: 1.55; }
.zn-strona .zn-glowne { font: 650 var(--t-czyt)/1.4 var(--font); }
.zn-strona .zn-znak { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px;
  border-radius: 50%; background: var(--plyta-3); font-size: 15px; vertical-align: -3px; }
.zn-strona .zn-stan--wyl .zn-znak { background: var(--wzrost-tlo); color: var(--wzrost); }
.zn-strona .zn-stan .przycisk { min-height: 44px; }

/* „Zdjęcie lotnicze” (RCS.mw.sterOrto, 26.10.2026): przycisk w grupie .sterowanie (lista inwestycji) albo kontrolka
   MapLibre (/mapa, wycena). */
.maplibregl-ctrl-group button.mw-orto { display: grid; place-items: center; color: var(--tekst); }
.maplibregl-ctrl-group button.mw-orto .ik { display: block; width: 18px; height: 18px; }
.maplibregl-ctrl-group button.mw-orto[aria-pressed="true"],
.sterowanie .grupa button.mw-orto[aria-pressed="true"] { background: var(--plyta-3) !important; color: var(--akcent); }

/* „Coś się nie zgadza?” (_zglos.html, 03.11.2026): szara linijka na końcu działu, formularz rozwijany w miejscu */
.zglos { margin: 12px 0 0; font-size: 14px; color: var(--sz); }
.zglos > summary { display: inline-block; cursor: pointer; list-style: none; color: var(--sz);
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.zglos > summary::-webkit-details-marker { display: none; }
.zglos[open] > summary { color: var(--tekst); }
.zglos-f { display: grid; gap: 10px; margin-top: 8px; padding: 12px 14px; max-width: 520px; color: var(--tekst);
  border: 1px solid var(--linia-2); border-radius: 10px; background: var(--plyta); }
.zglos-f fieldset { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.zglos-f legend { margin-bottom: 4px; font-weight: 600; }
.zglos-opcja { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.zglos-pole { display: grid; gap: 4px; }
.zglos-pole small { color: var(--sz); font-weight: 400; }
.zglos-pole textarea, .zglos-pole input { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px;
  border: 1px solid var(--linia-3, var(--linia-2)); border-radius: 8px; background: var(--tlo, transparent); color: var(--tekst); }
.zglos-dol { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.zglos-wynik { color: var(--sz); }
.zglos-info { margin: 0; color: var(--sz); font-size: 14px; }
.zglos-dzieki { margin: 0; font-weight: 600; }
.zglos-pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* „Dla mediów” (rcs/media.py, dla_mediow*.html): karta prasowa miasta - liczby, zdania do skopiowania, wykresy mw-*
   (te same klasy ma ramka /osadz/{slug} z własnym arkuszem), tabele liczb i formularz zapytania. */
.mw-liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 20px 0 8px; }
.mw-liczby > div { padding: 14px 16px; border: 1px solid var(--linia); border-radius: var(--r-3); background: var(--plyta); }
.mw-liczby dt { color: var(--sz); font: 600 var(--t-mini)/1.35 var(--font); }
.mw-liczby dd { margin: 4px 0 0; font: 700 1.45rem/1.2 var(--font); font-variant-numeric: tabular-nums; }
.mw-liczby dd.mw-pod { margin-top: 4px; color: var(--sz); font: 400 var(--t-mala)/1.4 var(--font); }
.mw-zdanie { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: start; margin: 0 0 10px;
  padding: 12px 16px; border: 1px solid var(--linia); border-radius: var(--r-3); background: var(--plyta); }
.dok .mw-zdanie p { margin: 0; max-width: none; grid-column: 1; }
.dok .mw-zdanie .mw-co { color: var(--sz); font: 600 var(--t-mini)/1.35 var(--font); }
.mw-zdanie .przycisk { grid-column: 2; grid-row: 1 / span 2; }
.mw-fig { margin: 12px 0; padding: 14px 16px 8px; max-width: 760px; border: 1px solid var(--linia); border-radius: var(--r-3); background: var(--plyta); }
.mw-wykres { display: block; height: auto; }
.mw-slupek { fill: var(--seria-0); }
.mw-wart { fill: var(--tekst); font: 600 13px var(--font); }
.mw-os { fill: var(--sz); font: 13px var(--font); }
.mw-kod { margin: 8px 0 16px; padding: 10px 12px; max-width: 760px; overflow-x: auto; border-radius: var(--r-3);
  background: var(--plyta-3); color: var(--tekst); font: 500 12.5px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.mw-tab { margin: 12px 0 18px; max-width: 760px; overflow-x: auto; border: 1px solid var(--linia); border-radius: var(--r-3); background: var(--plyta); }
.mw-tab table { width: 100%; border-collapse: collapse; }
.mw-tab :is(th, td) { padding: 9px 14px; text-align: left; border-top: 1px solid var(--linia-2); font-size: var(--t-tresc); line-height: 1.4; background: none; }
.mw-tab thead th { border-top: 0; color: var(--sz); font: 600 var(--t-mini)/1.35 var(--font); }
.mw-tab :is(th, td).num { text-align: right; font-variant-numeric: tabular-nums; }
.mw-form { display: grid; gap: 12px; margin-top: 12px; padding: 16px 18px; max-width: 620px;
  border: 1px solid var(--linia); border-radius: var(--r-3); background: var(--plyta); }
.mw-form .zglos-pole { font-weight: 600; }
.mw-form .zglos-pole :is(textarea, input) { font-weight: 400; }
@media (max-width: 640px) {
  .mw-zdanie { grid-template-columns: 1fr; }
  .mw-zdanie .przycisk { grid-column: 1; grid-row: auto; justify-self: start; }
  .mw-tab :is(th, td) { padding: 8px 10px; }
  .mw-form .zglos-pole :is(textarea, input) { font-size: 16px; }
}

/* filtr tabeli „Wszystkie ulice z ceną” (11.11.2026) */
.ul-filtr { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; margin: 0 0 12px; }
.ul-filtr label { display: grid; gap: 4px; font-size: 13px; color: var(--sz); }
.ul-filtr label:first-child { flex: 1 1 200px; }
.ul-filtr input, .ul-filtr select { height: 40px; padding: 0 10px; font: inherit; font-size: 16px; color: var(--tekst);
  background: var(--tlo); border: 1px solid var(--linia-3); border-radius: var(--r-1); min-width: 0; width: 100%; }
.ul-filtr input[type="number"] { width: 112px; }
.ul-filtr .ul-ile { flex: 1 0 100%; margin: 0; font-size: 14px; color: var(--sz); min-height: 1.4em; }
/* blog i strony obniżek (11.11.2026) */
.blog-lista { list-style: none; margin: 24px 0 0; padding: 0; }
.blog-lista li { padding: 16px 0; border-top: 1px solid var(--linia); }
.blog-lista li p { margin: 6px 0 0; }
.obn-nav { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; margin: 16px 0 8px; }
.dok.obn .dok-tab td:first-child { min-width: 12em; }
@media (max-width: 640px) {
  /* obniżki na telefonie: nazwa w całym wierszu, liczby w dwóch kolumnach (karta 150 px zamiast 280 px) */
  .dok.obn .dok-tab tr { display: grid; grid-template-columns: 1fr 1fr; }
  .dok.obn .dok-tab td:first-child { grid-column: 1 / -1; min-width: 0; }
  .dok.obn .dok-tab td:empty { display: none; }
}