/* ============================================================
   Plonek | plonek.pl — WYGLAD STRONY (nowa strona, 17.10.2026)

   Uklad z makiety s62_makieta_strona_www_v4 (wzor: szablon Canva
   „Green Landscaping”). Kolor z logo Plonka (#4F8F58).
   Trzy szerokosci: komputer, tablet (do 900 px), telefon (do 520 px).
   Grafiki w kodzie strony (`data-g`), teksty w kodzie strony — panel
   podmienia je w miejscu i publikuje plik od nowa.
   ============================================================ */
:root{
  --zielen:#4F8F58;--tekst:#2b3328;--szary:#4b5446;--pole:#eef0f2;--kreska:#c9ced3;
  --boki:max(48px,calc((100vw - 1140px) / 2 + 48px));
  /* zmienne arkusza mapy (js/mapa.js) */
  --accent:#4F8F58;--bg:#f5f6f8;--line:#d9dce1;--text:#1f2328;--muted:#6b7280;--surface:#fff;--radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;font-family:'Inter','Helvetica Neue',Arial,sans-serif;color:var(--tekst)}
a{color:inherit}
img{max-width:100%}
/* --- naglowek --- */
.nag{display:flex;align-items:center;gap:26px;padding:18px var(--boki);border-bottom:1px solid var(--pole);position:sticky;top:0;z-index:30;background:#ffffffd9;-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);transition:padding .3s,box-shadow .3s;view-transition-name:naglowek}
.nag.zwiniety{padding-top:9px;padding-bottom:9px;box-shadow:0 6px 24px -12px #0003}
.logo{display:flex;align-items:center;margin-right:auto}.logo img{height:38px;display:block;transition:height .3s}.nag.zwiniety .logo img{height:30px}
/* MENU (19.10.2026, makieta s62_makieta_ozywienie_v2): jasnozielone podswietlenie
   (prostokat, rogi 4 px jak w aplikacji) plynie za myszka — `.kulka` dokłada strona.js;
   pod aktualna strona zielona kreska. */
.menu{position:relative;display:flex;gap:2px;font-size:14px;align-items:center}
.menu a{position:relative;z-index:1;text-decoration:none;white-space:nowrap;padding:9px 12px;border-radius:4px;transition:color .2s}.menu a:hover{color:var(--zielen)}
.menu .akt{color:var(--zielen);font-weight:600}
.menu .akt::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:1px;background:var(--zielen)}
.menu .menu-app{display:none}
.menu .kulka{position:absolute;z-index:0;top:0;left:0;height:100%;border-radius:4px;background:#4f8f581f;opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.3,1.4,.5,1),width .35s cubic-bezier(.3,1.4,.5,1),opacity .2s}
.ham{display:none;font-size:24px;line-height:1;color:var(--tekst);background:none;border:0;padding:4px;cursor:pointer}
.ham.linie{position:relative;width:44px;height:44px;padding:0;font-size:0;background:#4f8f5814;border-radius:4px}
.ham.linie span{position:absolute;left:13px;width:18px;height:2px;border-radius:2px;background:var(--tekst);transition:transform .35s,opacity .2s,top .35s}
.ham.linie span:nth-child(1){top:15px}.ham.linie span:nth-child(2){top:21px}.ham.linie span:nth-child(3){top:27px}
.ham.linie[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}.ham.linie[aria-expanded="true"] span:nth-child(2){opacity:0}.ham.linie[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}
/* PRZYCISK JAK W APLIKACJI (19.10.2026, Stefan: „takich pastylek nie stosujemy w apce”): prostokat
   z rogami 4 px, wysokosc 40 px; po najechaniu unosi sie i przebiega po nim blysk. */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;height:40px;background:var(--zielen);color:#fff;border:1.5px solid var(--zielen);border-radius:4px;padding:0 20px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;font-family:inherit;margin:2px 0;transition:transform .2s,box-shadow .2s,filter .2s}
.btn:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 8px 20px -8px #4f8f58aa}
.btn::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#fff6,transparent);transform:skewX(-20deg);transition:left .6s;pointer-events:none}
.btn:hover::before{left:130%}
.btn.bia{background:#fff;color:var(--tekst);border-color:#fff}.btn.obr{background:transparent;color:var(--zielen)}
/* --- tytul strony --- */
.wyb{padding:56px var(--boki) 28px}.wyb h1{font-weight:400;font-size:58px;line-height:1.05;margin:0;letter-spacing:-1px;max-width:900px}
.zi{color:var(--zielen)}
/* --- zdjecie na cala szerokosc --- */
.foto{position:relative;background-size:cover;background-color:#a9c58a;display:flex;align-items:flex-end;color:#fff}
.pas{padding:60px var(--boki) 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;background:linear-gradient(transparent,#000c);text-shadow:0 1px 3px #000a}
.pas p{margin:0;font-size:16px;max-width:620px;line-height:1.4}.pas .btn{text-shadow:none}
/* --- sekcje --- */
.sek{padding:56px var(--boki)}.sek h2{font-weight:400;font-size:38px;margin:0 0 6px;letter-spacing:-.5px;line-height:1.1}
.sek .pd{font-size:15px;color:var(--szary);max-width:720px;line-height:1.5;margin:0 0 26px}
.szare{background:var(--pole)}
.k2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.k3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.k4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.karta{background:var(--pole);border-radius:10px;padding:14px}.szare .karta{background:#fff}
/* KARTY INSTRUKCJI OTWIERAJA APLIKACJE (19.10.2026, makieta s62_makieta_instrukcje_strona_v1). */
a.karta{display:block;text-decoration:none;color:inherit;transition:box-shadow .35s,transform .35s cubic-bezier(.2,.8,.2,1)}a.karta:hover{box-shadow:0 16px 30px -16px #0005;transform:translateY(-5px)}a.karta:hover h3{color:var(--zielen)}
.karta .otw{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;color:var(--zielen);text-decoration:none}.karta .otw+.otw{margin-left:14px}
/* LOGO PLATNOSCI W „JAK ZAPLACISZ” (19.10.2026, makieta s62_makieta_logo_platnosci_v2): BLIK i P24 z oficjalnych
   plikow, gotowka — kafelek tej samej wielkosci w zieleni strony. */
.pl-logo{display:block;height:40px;width:84px;border-radius:8px;margin-bottom:10px;object-fit:cover}.pl-got{display:flex;align-items:center;justify-content:center;background:var(--zielen);color:#fff}
.fk{height:150px;border-radius:6px;margin-bottom:12px;position:relative;background-size:cover;background-color:#c9d8b8}
.znacznik{position:absolute;right:8px;bottom:8px;font-size:10.5px;background:#fff;color:var(--tekst);border:1px dashed #889;padding:2px 7px;border-radius:9px}
.karta h3{font-size:16px;margin:0 0 6px;font-weight:600}.karta p{font-size:13.5px;line-height:1.45;margin:0;color:var(--szary)}
.ety{display:inline-block;font-size:11px;background:#e2efe3;color:#3b7445;border-radius:10px;padding:2px 8px;margin-bottom:6px}
/* ODZNAKI W „WIESZ, KOMU UFASZ” (19.10.2026, makieta s62_makieta_odznaki_strona_v1): te same rozetki co w aplikacji
   (assets/cert, srodek tarczy bialy jak karta), po lewej obok tekstu karty. */
.odz-karta{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start}.odz-karta>*:not(.odz){grid-column:2}
.odz-karta .ety{justify-self:start}.odz{grid-row:1/span 3;width:48px;height:auto;margin-top:2px}
.cyt{padding:56px var(--boki);text-align:right}.cyt q{font-size:30px;line-height:1.3;font-weight:400;display:block;max-width:860px;margin-left:auto}
.cyt .kto{font-size:13px;color:#667;margin-top:10px}
.dwie{display:grid;grid-template-columns:1fr 1fr;min-height:330px}
.fs{background-size:cover;background-color:#c9d8b8;min-height:330px}
/* ZDJECIA W PASIE TRESCI (19.10.2026, makieta s62_makieta_zdjecia_w_pasie_v1; Stefan: „górny pas z grafiką ok,
   reszta w pasie pionowym jak kafelki”). Pierwsza sekcja strony zostaje pasem do krawedzi (naglowek),
   kolejne „tekst + zdjecie” trzymaja zdjecie w pasie tresci; szare tlo sekcji dalej na cala szerokosc. */
@media (min-width:521px){
 main>.dwie:not(:first-child){padding:48px var(--boki);column-gap:48px;align-items:center;min-height:0}
 main>.dwie:not(:first-child)>.tx{padding:0}
 main>.dwie:not(:first-child)>.fs{min-height:0;aspect-ratio:4/3;border-radius:14px}
 main>.dwie:not(:first-child):has(>.tx.szare){background:var(--pole)}
 main>.dwie:not(:first-child)>.tx.szare{background:none}
 /* KOLEJNE PASY ZE ZDJECIEM (nie pierwszy) tez w pasie tresci. */
 main>.foto~.foto{margin:0 var(--boki);border-radius:14px}
}
.tx{padding:48px}.dwie>.tx:first-child{padding-left:var(--boki)}.dwie>.tx:last-child{padding-right:var(--boki)}
.tx h2{font-weight:400;font-size:34px;margin:0 0 12px;line-height:1.1}.tx h2.duzy{font-size:46px}.tx p{font-size:14.5px;line-height:1.55;color:var(--szary)}
.lista{margin:10px 0 18px;padding:0;list-style:none}.lista li{font-size:14px;padding:7px 0;border-bottom:1px solid #e2e5e8}
.lista li b{color:var(--zielen);margin-right:8px}
.faq .w{display:grid;grid-template-columns:1fr 1.6fr;gap:24px;background:var(--pole);border-radius:10px;padding:18px 22px;margin-bottom:12px}
.szare.faq .w{background:#fff}
.faq .w b{color:var(--zielen);font-size:15px}.faq .w span{font-size:14px;line-height:1.5;color:var(--szary)}
.kont{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.srodek{display:flex;align-items:center}
/* ZNACZKI SKLEPOW (19.10.2026, makieta s62_makieta_sklepy_na_stronie_v1): oficjalne pliki, App Store pierwszy.
   Znaczek Google ma w pliku przezroczysty margines, wiec jest wyzszy - czarne pola maja te sama wysokosc (jak oferta.php). */
.sklepy-www{display:flex;gap:12px;align-items:center;margin-top:18px;flex-wrap:wrap}.sklep-www img{display:block;height:48px;width:auto}.sklep-www img.gp{height:62px;margin:-7px}
.qr{display:flex;align-items:center;gap:18px}.qr img{width:120px;height:120px;border-radius:6px}.qr p{font-size:13px;color:var(--szary);max-width:220px}
.dane{font-size:15px}.dane a{color:var(--zielen)}
.liczby{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.liczby div{background:var(--pole);border-radius:10px;padding:18px}
.liczby b{display:block;font-size:34px;font-weight:400;color:var(--zielen);font-variant-numeric:tabular-nums}.liczby span{font-size:13px;color:var(--szary)}
.kroki{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.krok{border-top:3px solid var(--zielen);padding-top:12px}.krok b{font-size:13px;color:var(--zielen)}.krok h3{font-size:16px;margin:4px 0 6px;font-weight:600}.krok p{font-size:13.5px;color:var(--szary);line-height:1.45;margin:0}
/* --- formularze --- */
.formularz label{display:block;font-size:12px;color:#556;margin-bottom:12px}
.formularz input,.formularz textarea{display:block;width:100%;margin-top:4px;border:1px solid var(--kreska);border-radius:6px;padding:8px 10px;font:inherit;font-size:14px;color:var(--tekst);background:#fff}
.formularz input:focus,.formularz textarea:focus{outline:2px solid var(--zielen);outline-offset:0;border-color:var(--zielen)}
.mala{font-size:12px;color:#667;margin:8px 0 0}
/* --- wyszukiwarka i zakladki --- */
.szuk{display:block;border:1px solid var(--kreska);border-radius:4px;padding:11px 16px;font:inherit;font-size:14px;width:100%;max-width:520px;margin-bottom:18px;background:#fff;color:var(--tekst)}
.zakl{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.zakl button,.zakl a{border:0;border-radius:4px;padding:7px 12px;font:inherit;font-size:13px;background:#f0f3ee;color:var(--szary);cursor:pointer;text-decoration:none;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.zakl button:hover,.zakl a:hover{transform:translateY(-1px);background:#e3eae1;color:var(--tekst)}
.zakl .a,.zakl .a:hover{background:var(--zielen);color:#fff;box-shadow:0 6px 14px -8px #4f8f58aa}
/* --- pomoc: pytania z aplikacji (tools/faq_www.py) --- */
.pomoc .faq h3{font-weight:400;font-size:24px;margin:26px 0 12px}
.pomoc details{display:grid;grid-template-columns:1fr 1.6fr;gap:6px 24px;background:var(--pole);border-radius:10px;padding:18px 22px;margin-bottom:12px}
.pomoc summary{color:var(--zielen);font-weight:700;font-size:15px;cursor:pointer;list-style:none;grid-row:span 2}
.pomoc summary::-webkit-details-marker{display:none}
.pomoc summary small{display:block;font-weight:400;color:#7a8475;font-size:12px;margin-top:4px}
.pomoc details p{margin:0;font-size:14px;line-height:1.5;color:var(--szary)}
.pomoc details p small{color:#7a8475;font-size:12px}
/* --- stopka --- */
footer{background:var(--tekst);color:#d5dbd2}
.stopka{padding:36px var(--boki);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px;font-size:13px;line-height:1.5}
.stopka b{color:#fff;display:block;margin-bottom:8px}.stopka a{display:block;padding:3px 0;text-decoration:none}.stopka a:hover{color:#fff}
.dol{background:#232a20;color:#9aa596;font-size:12px;padding:12px var(--boki);display:flex;justify-content:space-between}
.dol{flex-wrap:wrap;gap:8px 20px;align-items:center}.dol .platnosci{display:inline-flex;align-items:center;gap:6px}.dol .platnosci img{height:18px;width:auto;background:#fff;padding:2px 4px;border-radius:3px}
/* MENU POD ☰ PONIZEJ 1040 PX — szesc pozycji i przycisk nie mieszcza sie w jednej linii. */
@media (max-width:1040px){
 /* MENU NA CALY EKRAN (makieta s62_makieta_ozywienie_v2): rozlewa sie kolem od ☰. Naglowek traci przy
    otwarciu rozmycie tla — `backdrop-filter` zamykalby `position:fixed` menu w pasku naglowka. */
 .menu{position:fixed;inset:0;z-index:-1;flex-direction:column;align-items:stretch;gap:0;padding:96px var(--boki) 24px;background:linear-gradient(160deg,#f3f8f2,#fff 60%);clip-path:circle(0 at var(--hx,100%) var(--hy,0));visibility:hidden;transition:clip-path .55s cubic-bezier(.7,0,.2,1),visibility 0s .55s;overflow-y:auto}
 .menu.otwarte{clip-path:circle(150% at var(--hx,100%) var(--hy,0));visibility:visible;transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
 .menu a{padding:12px 0;font-size:26px;border-radius:0;border-bottom:1px solid #0000000d;opacity:0;transform:translateY(18px);transition:opacity .4s,transform .4s}
 .menu.otwarte a{opacity:1;transform:none}
 .menu a::after{display:none}.menu .akt{border-bottom-color:var(--zielen)}
 .menu .kulka{display:none}
 .menu a.menu-app{display:inline-flex;margin-top:22px;height:48px;font-size:16px;color:#fff;border-radius:4px;border-bottom:0}
 .nag.menu-otwarte{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
 .ham{display:block}
 .nag{gap:14px}
}
/* ============================== TABLET ============================== */
@media (max-width:900px){
 :root{--boki:28px}
 .wyb{padding:40px var(--boki) 22px}.wyb h1{font-size:46px}
 .sek h2{font-size:32px}.tx{padding:34px var(--boki)}.tx h2{font-size:30px}.tx h2.duzy{font-size:40px}
 .cyt q{font-size:26px}
 .k4,.kroki{grid-template-columns:1fr 1fr}
 .stopka{grid-template-columns:1fr 1fr 1fr}.stopka>div:first-child{grid-column:1/-1}
}
/* ============================== TELEFON ============================== */
@media (max-width:520px){
 :root{--boki:16px}
 .nag .btn-app{display:none}.logo img{height:32px}
 .wyb{padding:26px var(--boki) 14px}.wyb h1{font-size:34px;letter-spacing:-.5px}
 .sek h2{font-size:26px}.sek .pd{font-size:14px}
 .tx{padding:26px var(--boki)}.tx h2,.tx h2.duzy{font-size:26px}
 .k2,.k3,.k4,.kroki,.kont{grid-template-columns:1fr}.kont{gap:20px}
 .dwie{grid-template-columns:1fr;min-height:0}.dwie>.fs{min-height:220px;order:-1}
 .dwie>.fs[data-g$="telefon"]{min-height:330px}
 .foto{height:300px!important}
 .pas{display:block;padding:80px var(--boki) 16px}.pas p{font-size:14px;margin-bottom:12px}
 .faq .w,.pomoc details{grid-template-columns:1fr;gap:6px;padding:14px 16px}
 .pomoc summary{grid-row:auto}
 .cyt q{font-size:21px}
 .liczby{grid-template-columns:1fr 1fr}.liczby b{font-size:26px}
 .qr{display:none}
 .stopka{grid-template-columns:1fr 1fr}
}


/* --- aktualnosci (wpisy) --- */
.wpis{display:block;background:var(--pole);border-radius:8px;overflow:hidden;text-decoration:none;color:inherit}
.szare .wpis{background:#fff}
.wpis .fk{height:170px;border-radius:0;margin:0;background-position:center}
.wpis .wt{padding:14px 16px 16px}
.wpis time,.artykul time{display:block;font-size:12px;color:#7a8475;margin-bottom:6px}
.wpis h3{font-size:17px;margin:0 0 6px;font-weight:600;line-height:1.25}.wpis p{font-size:13.5px;line-height:1.45;margin:0 0 10px;color:var(--szary)}
.czytaj{font-size:13px;font-weight:600;color:var(--zielen)}
.wpis:hover h3{color:var(--zielen)}
.wpisy.k3{margin-bottom:22px}
.sek h2+.wpisy{margin-top:22px}
.lista-wpisow{display:grid;gap:22px}
.wpis.duzy{display:grid;grid-template-columns:1.4fr 1fr}
.wpis.duzy .fk{height:100%;min-height:300px}.wpis.duzy .wt{padding:28px;align-self:center}.wpis.duzy h3{font-size:28px;font-weight:400}
.wpis.duzy p{font-size:15px}
/* BEZ max-width NA .wyb (18.10.2026): .wyb ma box-sizing border-box i boki
   var(--boki) — na szerokim ekranie (1920: 2 x 438 px) z 900 px zostawalo
   24 px na tresc i tytul szedl po jednym slowie w linii. Szerokosc trzymaja
   h1 (900) i .zaj (760). */
.artykul .wyb h1{font-size:50px}
.wstecz{display:inline-block;font-size:13px;color:var(--zielen);text-decoration:none;margin-bottom:18px}
.zaj{font-size:18px;line-height:1.5;color:var(--szary);margin:14px 0 0;max-width:760px}
.tresc{max-width:760px;margin:0 auto;padding:44px var(--boki) 56px;box-sizing:content-box;font-size:16px;line-height:1.7}
.tresc h2{font-weight:400;font-size:28px;margin:34px 0 10px;line-height:1.2}
.tresc p{margin:0 0 16px}.tresc ul,.tresc ol{margin:0 0 16px;padding-left:22px}.tresc li{margin-bottom:6px}
.tresc blockquote{margin:26px 0;padding:6px 0 6px 20px;border-left:3px solid var(--zielen);font-size:20px;line-height:1.45}
.tresc figure{margin:26px 0}.tresc figure img{width:100%;border-radius:8px;display:block}.tresc figcaption{font-size:13px;color:#7a8475;margin-top:6px}
.tresc a{color:var(--zielen)}
/* PODPIS POD ZDJECIEM (maly, szary) stoi tuz pod nim: edytor sklada zdjecie i nastepna
   linie w jeden akapit z <br> miedzy nimi — <br> po zdjeciu nic nie wnosi (zdjecie jest
   blokiem), a dawal pusta linie miedzy zdjeciem a podpisem. */
.tresc img{display:block;width:100%;height:auto;border-radius:8px;margin:22px 0 6px}
.tresc img+br{display:none}
.tresc p:has(> img:only-child){margin:0}
/* OZNACZENIE AI JAK W APLIKACJI (19.10.2026, makieta s62_makieta_oznaczenie_ai_strona_v2):
   szary znaczek „AI” pod pasem z grafikami z AI; okienko z wyjasnieniem nad nim (<details>). */
.pas-ai{grid-column:1/-1;justify-self:end;position:relative;margin-top:-10px;color:#7a8475}
.pas-ai summary{list-style:none;display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;padding:6px 0}
.pas-ai summary::-webkit-details-marker{display:none}
.pas-ai svg{display:block}
.okno-ai{position:absolute;right:0;bottom:100%;width:300px;max-width:calc(100vw - 32px);background:#fff;border:1px solid #e3e6df;border-radius:10px;box-shadow:0 10px 30px #0002;padding:14px 16px;font-size:13.5px;line-height:1.5;color:var(--tekst,#2b3328);z-index:30}
.okno-ai b{display:block;font-size:15px;margin-bottom:6px}
.wiersz-ai{display:flex;justify-content:flex-end;padding:0 var(--boki)}.wiersz-ai .pas-ai{margin-top:2px}
.wpis .fk{position:relative}
/* FORMATOWANIE Z EDYTORA PANELU (18.10.2026, makieta s62_makieta_formatowanie_wpisu_v1):
   rozmiar i wyrownanie przychodza jako klasy, kolor i tlo jako styl z palety. */
.tresc .ql-size-small{font-size:.85em}.tresc .ql-size-large{font-size:1.3em;line-height:1.4}
.tresc .ql-align-center{text-align:center}.tresc .ql-align-right{text-align:right}
/* OKLADKA WPISU W CALOSCI PONIZEJ 900 PX (Stefan, 18.10.2026, makieta
   s62_makieta_okladka_telefon_v1): okladki maja 1600x500, wiec karta i strona wpisu
   biora proporcje 16:5 — bez obcinania bokow (3 telefony na okladce byly uciete). */
@media (max-width:900px){
 .wpis.duzy{grid-template-columns:1fr}.wpis.duzy .fk{min-height:0;height:auto;aspect-ratio:16/5}
 .artykul .foto{height:auto!important;aspect-ratio:16/5}.wpis.duzy h3{font-size:24px}
 .artykul .wyb h1{font-size:40px}
}
@media (max-width:520px){
 .artykul .wyb h1{font-size:30px}.zaj{font-size:16px}
 .wpis .fk{height:auto;aspect-ratio:16/5}
 .tresc{padding:28px var(--boki) 40px;font-size:15.5px}
 .wpis.duzy .wt{padding:16px}
}

/* ============================================================
   MAPA POLSKI — przeniesione bez zmian z css/style.css (js/mapa.js)
   ============================================================ */
/* ---------- MAPA POLSKI ---------- */
/* WYGLAD JEST TUTAJ, zachowanie w `js/mapa.js` — ta sama zasada co przy pasku. */

.mapa { display: block; }

.mapa-pasek {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.mapa-okruchy { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mapa-strzalka { color: var(--muted); font-size: 14px; }

/* OKRUCH JEST PRZYCISKIEM, nie napisem: powrot o poziom wyzej musi dzialac
   takze z klawiatury. Biezacy poziom jest wylaczony — klikniecie w miejsce,
   w ktorym juz jestes, nic by nie dalo. */
.mapa-okruch {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
  font-size: 13px; color: inherit;
}
.mapa-okruch:hover:not(:disabled) { background: var(--bg); }
.mapa-okruch:disabled { cursor: default; opacity: .55; }
.mapa-okruch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mapa-nazwy {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
  font-size: 13px; color: inherit;
}
.mapa-nazwy.jest { background: var(--accent); color: #fff; border-color: var(--accent); }
.mapa-nazwy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* LISTA REGIONOW obok okruchow. Wyglada jak przyciski nawigacji, bo robi to
   samo — tylko bez celowania w ksztalt na mapie. */
.mapa-wybor {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 5px 10px;
  font-size: 13px; color: inherit; font-family: inherit;
  max-width: 220px;
}
.mapa-wybor[hidden] { display: none; }
.mapa-wybor:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mapa-plotno { position: relative; }
.mapa-svg { display: block; width: 100%; height: auto; }

/* GRANICA SZARA I CIENKA.
   Byla w kolorze tla (bialym) — regiony sasiadujace jasnymi odcieniami zlewaly
   sie wtedy w jedna plame i nie bylo widac podzialu. Szary rozdziela je przy
   kazdym wypelnieniu, a przy gminach nie tworzy czarnej siatki, ktora zabijala
   kolor. 0,8 px, bo przy 1,2 px setki gmin daja wiecej kreski niz powierzchni. */
.mapa-region path {
  stroke: #9aa3ad; stroke-width: 0.8;
  stroke-linejoin: round;
  transition: fill-opacity .12s;
}
.mapa-region--klik { cursor: pointer; }
.mapa-region--klik:hover path { fill-opacity: 1 !important; }

/* Napisy NIE MOGA lapac kliknięcia — inaczej klik w liczbe nie schodzi nizej. */
.mapa-region text { pointer-events: none; text-anchor: middle; }
/* ROZMIAR PISMA W JEDNOSTKACH RYSUNKU, nie w pikselach ekranu.
   =========================================================================
   `viewBox` ma 1000 jednostek szerokosci, a rysunek na ekranie bywa szeroki
   na 409 px albo na 900 — przegladarka skaluje wtedy WSZYSTKO oprocz pisma
   podanego w `px`, bo to jednostka ekranu, nie rysunku.

   Skutek byl taki, ze odstepy miedzy nazwa a liczba (ustawiane w `mapa.js`
   w jednostkach rysunku) kurczyly sie razem z mapa, a litery zostawaly duze —
   i przy waskim rysunku napisy WCHODZILY NA SIEBIE, mimo ze przy szerokim
   wygladaly dobrze (03.08.2026).

   `em` w SVG odnosi sie do jednostek rysunku, wiec pismo skaluje sie razem
   z reszta i proporcja jest ta sama w kafelku, w ramce i na pelnym ekranie.
   Wartosci dobrane tak, zeby przy typowej szerokosci 500 px wyszlo mniej
   wiecej tyle, co dotychczasowe 15,6 i 51 px. */
.mapa-nazwa { font-size: 22px; fill: var(--muted); }
/* NA CIEMNYM WYPELNIENIU SZARY NAPIS ZNIKA. Liczba miala juz swoja odmiane,
   nazwa nie — a przy mocno wypelnionym regionie to ona gubi sie pierwsza.
   `paint-order` z obwodka: nazwa lezy czesto na granicy dwoch odcieni, wiec
   sam kolor nie wystarcza. Obwodka rysowana POD wypelnieniem nie zjada
   ksztaltu liter. */
.mapa-nazwa.na-ciemnym { fill: #fff; }
.mapa-region text {
  paint-order: stroke fill;
  stroke: rgba(0, 0, 0, .35);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}
.mapa-region .mapa-nazwa:not(.na-ciemnym),
.mapa-region .mapa-liczba:not(.na-ciemnym) {
  stroke: rgba(255, 255, 255, .75);
}
/* Po to sie na te mape patrzy: nazwa mowi GDZIE, ale odpowiedzia jest liczba.
   Te same jednostki co przy nazwie — patrz komentarz wyzej. */
.mapa-liczba { font-size: 27px; font-weight: 700; fill: var(--text); }
.mapa-liczba.na-ciemnym { fill: #fff; }

/* PODSUMOWANIE POZIOMU. Mapa pokazuje rozklad, ale nie odpowiada na „ile
   w sumie" ani „gdzie najwiecej" — a to zwykle pierwsze dwa pytania. */
.mapa-podsumowanie {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.mapa-poz { display: flex; flex-direction: column; }
.mapa-poz-w { font-size: 17px; font-weight: 700; line-height: 1.2; }
.mapa-poz-o { font-size: 12px; color: var(--muted); }
.mapa-poz-uwaga { font-size: 11px; color: var(--muted); font-style: italic; }

/* LEGENDA. Bez niej odcien nic nie znaczy — nie wiadomo, czy ciemniejszy
   to wiecej czy mniej. */
.mapa-legenda {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12px; color: var(--muted);
}
/* PASEK PLYNNY, z liczbami W SRODKU na obu koncach. Piec prostokatow z podpisami
   „mniej"/„wiecej" mowilo o kolejnosci, ale nie o wartosciach — a to wlasnie
   wartosci na krancach sa jedyna informacja, ktora ten pasek niesie. */
.mapa-legenda { flex-direction: column; align-items: stretch; }
.mapa-legenda-pasek {
  position: relative; height: 26px; border-radius: 4px;
  display: flex; align-items: center;
  border: 1px solid var(--line);
}
.mapa-legenda-kraniec {
  position: absolute; left: 8px;
  font-size: 12px; font-weight: 700; color: var(--text);
  /* OBWODKA ZAMIAST TLA. Liczba na ciemnym koncu paska musi byc czytelna,
     a bialy prostokat pod nia przerywalby gradient dokladnie tam, gdzie
     pokazuje on wartosc najwieksza. */
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
.mapa-legenda-kraniec--prawy { left: auto; right: 8px; }

/* W TRYBIE OSADZONYM KLIKNIECIE W REGION NIC NIE ROBI — nawigacja nalezy do
   listy w panelu. Kursor musi to mowic, inaczej obiecuje ruch, ktorego nie ma. */
.mapa--bez-klikania .mapa-region,
.kafel-mapa .mapa-region { cursor: default; }

/* METRYCZKA POD KURSOREM.
   `position: fixed`, bo `overflow` plotna przycinaloby ja przy krawedzi mapy.
   `pointer-events: none` — inaczej pudelko przechwytywaloby kursor i region
   pod nim natychmiast traciloby najechanie, co dawaloby miganie. */
.mapa-metryczka {
  position: fixed; z-index: 60; pointer-events: none;
  min-width: 180px; max-width: 280px;
  padding: 12px 16px; text-align: center;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.12);
  font-size: 13px; line-height: 1.45;
}
.mapa-metryczka[hidden] { display: none; }
.mapa-metryczka-nazwa { font-weight: 700; margin-bottom: 6px; }
.mapa-metryczka-opis { color: var(--muted); font-size: 12.5px; }
.mapa-metryczka-w { font-size: 15px; margin-bottom: 4px; }
.mapa-metryczka-w:last-child { margin-bottom: 0; }

/* KARTA REGIONU — po klinieciu na najnizszym poziomie. */
.mapa-karta {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.mapa-karta-naglowek {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.mapa-karta-kod { font-size: 11.5px; color: var(--muted); font-family: monospace; }
.mapa-karta-zamknij {
  margin-left: auto; border: none; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--muted); padding: 0 4px;
}
.mapa-karta-zamknij:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mapa-karta .mapa-poz { flex-direction: row; align-items: baseline; gap: 8px; }
.mapa-karta-pusto { font-size: 12.5px; color: var(--muted); }

/* WYBRANY REGION obrysowany, zeby bylo widac, ktorego dotyczy karta. */
.mapa-region.jest path { stroke: var(--text); stroke-width: 2.5; }

.mapa-czekaj, .mapa-blad {
  padding: 28px; text-align: center; font-size: 13px; color: var(--muted);
}

/* BEZ OSOBNEJ REGULY DLA TELEFONU.
   Byla potrzebna, dopoki pismo mierzylo sie w pikselach ekranu: na waskim
   ekranie te same 51 px zaslanialy wojewodztwo, w ktorym stalo. W jednostkach
   rysunku napis kurczy sie razem z mapa, wiec proporcja jest ta sama wszedzie
   i regula nie ma czego poprawiac (03.08.2026). */



/* ============================================================
   OZYWIENIE STRONY (Stefan, 19.10.2026: „nasze menu jest obecnie bardzo smutne —
   otwieranie sie stron nie ma animacji, wszystko jest bardzo statyczne”; makiety
   s62_makieta_ozywienie_v2 — „ok podoba mi się” — i s62_makieta_gospodarstwa_v1).
   Klasy dokłada strona.js: `ruch` na <html> (stan poczatkowy animacji), `wejscie`
   chwile pozniej, `odslon`/`widac` przy przewijaniu. Bez skryptu strona stoi jak dawniej.
   ============================================================ */
/* WEJSCIE STRONY: tytul z rozmycia, pierwsze zdjecie powoli sie przybliza, opis i przycisk wjezdzaja. */
.ruch .wyb>*:not(h1),.ruch .wyb .sl{position:relative;top:.35em;opacity:0;filter:blur(6px);transition:opacity .7s,top .7s cubic-bezier(.2,.8,.2,1),filter .7s}
.ruch.wejscie .wyb>*:not(h1),.ruch.wejscie .wyb .sl{top:0;opacity:1;filter:none}
.foto-wej{overflow:hidden}
.foto-wej::before{content:"";position:absolute;inset:0;background:inherit;transform:scale(1.1);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.wejscie .foto-wej::before{transform:none}
.foto-wej>*{position:relative}
.ruch .foto-wej .pas>*{position:relative;top:20px;opacity:0;transition:opacity .8s .5s,top .8s .5s}
.ruch.wejscie .foto-wej .pas>*{top:0;opacity:1}
/* PRZEWIJANIE: karty wjezdzaja po kolei, gdy wejda w pole widzenia. */
.odslon{opacity:0;transform:translateY(34px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.odslon.widac{opacity:1;transform:none}
.wpis{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.wpis:hover{transform:translateY(-5px);box-shadow:0 16px 30px -16px #0005}
.wpis{border-radius:10px}
/* KARTA UNOSI SIE, ZDJECIE LEKKO SIE PRZYBLIZA (makieta s62_makieta_ozywienie_v2, punkt 4) — takze karty
   bez odnosnika („Jak trafisz do rolnika”). Zdjecie w ::before z `background: inherit`, wiec styl
   z panelu (adres i kadr w atrybucie) zostaje tam, gdzie byl. */
.karta{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.karta:hover,.karta.widac:hover{transform:translateY(-5px);box-shadow:0 16px 30px -16px #0005;transition-delay:0s}
.karta .fk,.wpis .fk{overflow:hidden}
.karta .fk::before,.wpis .fk::before{content:"";position:absolute;inset:0;background:inherit;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.karta:hover .fk::before,.wpis:hover .fk::before{transform:scale(1.08)}
.karta .fk>*,.wpis .fk>*{z-index:1}
/* PRZEJSCIE MIEDZY STRONAMI: stara odjezdza, nowa wjezdza (Chrome, Edge, Safari 18+; reszta jak dawniej).
   Naglowek ma wlasna nazwe, wiec stoi w miejscu. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.25s ease both przejscie-wyj}
::view-transition-new(root){animation:.35s ease both przejscie-wej}
@keyframes przejscie-wyj{to{opacity:0;transform:translateY(-12px)}}
@keyframes przejscie-wej{from{opacity:0;transform:translateY(16px)}}
/* WYSZUKIWARKA (Gospodarstwa, Pomoc): jasne tlo zamiast obwodki, lupa, wlasne ✕ zamiast
   przegladarkowego; przy pisaniu obrys grubieje i zostaje szary — jak pola w aplikacji. */
.szuk-pole{position:relative;display:flex;align-items:center;height:40px;max-width:560px;margin-bottom:18px;background:#f4f6f3;border-radius:4px;transition:background .25s,box-shadow .25s}
.szare .szuk-pole{background:#fff}
.szuk-pole:hover{background:#eef2ec}
.szuk-pole:focus-within{background:#fff;box-shadow:inset 0 0 0 2px #9aa3a0,0 10px 26px -14px #0004}
.szuk-pole>svg{flex:none;margin-left:14px;color:#7b8577;transition:color .25s,transform .35s}
.szuk-pole:focus-within>svg{color:var(--zielen);transform:rotate(-12deg) scale(1.1)}
.szuk-pole .szuk{flex:1;min-width:0;max-width:none;height:40px;margin:0;padding:0 10px;border:0;border-radius:0;background:transparent;outline:0;font-size:15px}
.szuk-pole .szuk::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.szuk-czysc{flex:none;width:26px;height:26px;margin-right:7px;border:0;border-radius:4px;background:#e3e7e1;color:var(--szary);font-size:14px;line-height:1;cursor:pointer;opacity:0;transform:scale(.5);pointer-events:none;transition:opacity .2s,transform .25s}
.szuk-pole.ma .szuk-czysc{opacity:1;transform:scale(1);pointer-events:auto}
.szuk-klaw{flex:none;margin-right:12px;font-size:11px;color:#8a9386;border:1px solid #d6dbd3;border-radius:4px;padding:2px 7px}
.szuk-pole:focus-within .szuk-klaw,.szuk-pole.ma .szuk-klaw{display:none}
@media (hover:none){.szuk-klaw{display:none}}
.szuk-podp{position:absolute;left:44px;right:60px;top:50%;transform:translateY(-50%);pointer-events:none;color:#80897c;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.szuk-podp span{display:inline-block;transition:opacity .35s,transform .35s}
.szuk-podp span.wyj{opacity:0;transform:translateY(-12px)}.szuk-podp span.wej{opacity:0;transform:translateY(12px)}
.szuk-pole.ma .szuk-podp{display:none}
.szuk-pole.z-podp .szuk::placeholder{color:transparent}
/* SZYBKIE WYBORY pod wyszukiwarka gospodarstw: wojewodztwa z najwieksza liczba gospodarstw (mapa-dane.json). */
.chipy{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:-6px 0 8px}
.chipy small{font-size:12px;color:var(--szary);margin-right:2px}
.chipy button{border:0;background:#f0f3ee;border-radius:4px;padding:7px 12px;font:inherit;font-size:12.5px;color:var(--szary);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.chipy button b{font-weight:600;margin-left:4px;opacity:.75}
.chipy button:hover{transform:translateY(-1px);background:#e3eae1}
.chipy button.a{background:var(--zielen);color:#fff}
/* PAS KAFLI GOSPODARSTW JAK W APLIKACJI (KafelAgroGospodarstwa: 168 px, zdjecie 156, bialy pas 36 z herbem
   48 na bialym kolku, rogi 12; strzalki 40x40 z rogami 4 tylko przy myszy). Porcje z `gospodarstwa_strona`. */
.pas-g{position:relative;margin-top:22px}
.pas-nag{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.pas-nag h2{font-size:20px!important;font-weight:600!important;margin:0!important;letter-spacing:0!important}
.pas-nag span{font-size:13px;color:var(--szary)}
.tasma{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 16px;scrollbar-width:none}
.tasma::-webkit-scrollbar{display:none}
.kafel-g{flex:none;width:168px;height:244px;scroll-snap-align:start;position:relative;background:#fff;border-radius:12px;box-shadow:inset 0 0 0 1px #e1e5e0;overflow:hidden;text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;animation:kafel-wej .45s both}
@keyframes kafel-wej{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.kafel-g:hover,.kafel-g:focus-visible{transform:translateY(-5px);box-shadow:inset 0 0 0 1px #e1e5e0,0 16px 30px -16px #0006}
.kafel-g .zd{height:156px;position:relative;overflow:hidden;background:#dfe7dc}
.kafel-g .zd .t{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.kafel-g:hover .zd .t{transform:scale(1.08)}
.kafel-g .zd .bez{display:flex;align-items:center;justify-content:center}
.kafel-g .zd .pasb{position:absolute;left:0;right:0;bottom:0;height:36px;background:#ffffff80}
.kafel-g .herb{position:absolute;left:8px;top:126px;width:48px;height:48px;border-radius:50%;background:#fff center/cover no-repeat;box-shadow:0 2px 6px #0003;display:flex;align-items:center;justify-content:center;font-size:24px}
.kafel-g .tr{padding:24px 8px 8px}
.kafel-g h3{font-size:14px;line-height:20px;font-weight:400;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kafel-g p{margin:4px 0 0;font-size:12px;color:var(--szary)}
.kafel-g.zaladunek{animation:none;background:linear-gradient(90deg,#eef0ee 25%,#f6f7f5 50%,#eef0ee 75%) 0 0/200% 100%;box-shadow:none;animation:mig 1.2s linear infinite}
@keyframes mig{to{background-position:-200% 0}}
.strz{position:absolute;top:calc(50% + 14px);transform:translateY(-50%);width:40px;height:40px;border-radius:4px;border:1px solid #6b7268;background:#fff;color:var(--tekst);font-size:22px;line-height:1;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s,background .2s;z-index:2;box-shadow:0 4px 14px -6px #0004}
.strz:hover{background:#f4f6f3}
.strz.l{left:-6px}.strz.p{right:-6px}
.pas-g.mysz .strz.jest{opacity:1;pointer-events:auto}
@media (hover:none){.strz{display:none}}
/* MAPA GOSPODARSTW: wojewodztwa w odcieniach zieleni wedlug liczby, liczba w kolku (skracana: „1,2 tys.”),
   region unosi sie po najechaniu, klikniecie przybliza i filtruje kafle. */
.mapa-sek{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center;margin-top:30px}
.mapa-g{position:relative;border-radius:12px;background:radial-gradient(120% 90% at 30% 20%,#f6faf4,#e9f0e6);padding:14px;overflow:hidden}
.mapa-g svg{display:block;width:100%;height:auto}
.mapa-g path{fill:var(--f,#dfe7dc);stroke:#fff;stroke-width:1.4;stroke-linejoin:round;cursor:pointer;transition:fill .3s,opacity .4s,filter .3s,transform .3s;transform-box:fill-box;transform-origin:center}
.mapa-g path:hover,.mapa-g path.wsk{filter:drop-shadow(0 6px 8px #2b332855) brightness(1.06);transform:translateY(-3px)}
.mapa-g.zoom path:not(.wyb){opacity:.25}
.mapa-g .babel{pointer-events:none;transform-box:fill-box;transform-origin:center;animation:babel-wej .5s cubic-bezier(.3,1.6,.5,1) both}
.mapa-g .babel circle{fill:#fff;stroke:var(--zielen);stroke-width:2.5;filter:drop-shadow(0 2px 3px #0003)}
.mapa-g .babel text{font-size:22px;font-weight:700;fill:var(--zielen);text-anchor:middle;dominant-baseline:central}
@keyframes babel-wej{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.mapa-g.zoom .babel{opacity:0;transition:opacity .2s}
.dymek{position:absolute;pointer-events:none;background:#fff;border-radius:8px;padding:8px 12px;font-size:13px;box-shadow:0 10px 26px -10px #0005;opacity:0;transform:translate(-50%,-110%) scale(.95);transition:opacity .15s,transform .15s;white-space:nowrap;z-index:3}
.dymek.jest{opacity:1;transform:translate(-50%,-120%) scale(1)}
.dymek b{display:block;font-size:14px}.dymek span{color:var(--zielen);font-weight:600}
.mapa-g .wroc{position:absolute;left:14px;top:14px;z-index:2;opacity:0;pointer-events:none;transition:opacity .3s;background:#fff;color:var(--tekst);border-color:#fff;box-shadow:0 4px 14px -6px #0004}
.mapa-g.zoom .wroc{opacity:1;pointer-events:auto}
.legenda{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--szary);margin:4px 0 18px}
.legenda i{display:inline-block;width:150px;height:8px;border-radius:2px;background:linear-gradient(90deg,#dfe7dc,#a9cfa6,#6fae70,#3f7f48)}
.bok h2{font-weight:400;font-size:34px;margin:0 0 8px;line-height:1.1}
.bok .pd{margin:0 0 14px}
.stat{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.stat div{background:var(--pole);border-radius:10px;padding:14px}
.stat b{display:block;font-size:28px;font-weight:400;color:var(--zielen);font-variant-numeric:tabular-nums}.stat span{font-size:12.5px;color:var(--szary)}
@media (max-width:900px){.mapa-sek{grid-template-columns:1fr}.bok h2{font-size:28px}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{transition:none!important;animation:none!important}
 .odslon,.ruch .wyb>*,.ruch .wyb .sl,.ruch .foto-wej .pas>*{opacity:1;transform:none;top:0;filter:none}
 @view-transition{navigation:none}
}

/* POMOC: ROZWIN / ZWIN WSZYSTKIE I ODPOWIEDZI ROZWIJANE PLYNNIE (Stefan, 19.10.2026: „dla pomocy na stronie
   powinny być przyciski zwijające wszystkie i rozwijające wszystkie, a przyciski ożywione jak pozostałe”;
   makieta s62_makieta_pomoc_przyciski_v1). Przyciski dokłada strona.js — plik z tools/faq_www.py bez zmian. */
.pomoc-gora{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pomoc-gora .zakl{margin-bottom:12px}
.zwin-rozwin{display:flex;gap:6px;margin-bottom:12px}
.zwin-rozwin button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:4px;background:transparent;color:var(--zielen);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s,opacity .2s}
.zwin-rozwin button:hover{background:#4f8f581a;transform:translateY(-1px)}
.zwin-rozwin button svg{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.zwin-rozwin button:hover svg{transform:translateY(2px)}
.zwin-rozwin button.zwin:hover svg{transform:translateY(-2px)}
.zwin-rozwin button:disabled{opacity:.4;cursor:default;transform:none;background:transparent}
.pomoc summary{position:relative;padding-left:24px;transition:color .2s}
.pomoc summary::before{content:"";position:absolute;left:2px;top:.35em;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.pomoc details[open]>summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.pomoc summary:hover{color:#3d7546}
.pomoc details{transition:box-shadow .3s,background .3s}
.pomoc details:hover{box-shadow:0 10px 24px -16px #0004}
.pomoc{interpolate-size:allow-keywords}
.pomoc details::details-content{block-size:0;overflow-y:clip;opacity:0;transition:block-size .35s cubic-bezier(.2,.8,.2,1),opacity .35s,content-visibility .35s allow-discrete}
.pomoc details[open]::details-content{block-size:auto;opacity:1}
@media (prefers-reduced-motion:reduce){.pomoc details::details-content{transition:none}}
/* MISJA PLONKA (28.10.2026, s62_makieta_misja_www) */
.pas .przyciski{display:flex;gap:10px;flex-wrap:wrap}.btn.bia.obr{background:transparent;color:#fff;border-color:#fff}
.lista.misja{max-width:760px}.lista.misja li{line-height:1.5}.lista.misja li b{margin-right:6px}
.schemat{max-width:760px;margin:8px 0 0}.schemat svg{width:100%;height:auto;display:block}.schemat .pion{display:none;max-width:380px}
@media (max-width:640px){.schemat svg{display:none}.schemat .pion{display:block}}
/* CO ZNAJDZIESZ W PLONKU (28.10.2026) */
.kat{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;padding:48px var(--boki)}
.kat.odw{grid-template-columns:7fr 5fr}.kat.odw .kat-ob{order:2}.kat.szare{background:var(--pole)}
.kat-ob{aspect-ratio:4/3;border-radius:14px;background:radial-gradient(circle at 50% 55%,#fff 0,#f4f6f1 60%,#e9eee5 100%);display:flex;align-items:center;justify-content:center}
.kat.szare .kat-ob{background:radial-gradient(circle at 50% 55%,#fff 0,#fbfcfa 60%,#f1f4ee 100%)}
.kat-ob img{width:62%;max-width:256px;height:auto}
.kat-naz{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--zielen);margin-bottom:6px}
.kat-tx h2{font-weight:400;font-size:32px;line-height:1.15;margin:0 0 12px;letter-spacing:-.3px}.kat-tx p{font-size:15px;line-height:1.6;color:var(--szary);margin:0 0 12px;max-width:620px}
.kat-rol{border-left:3px solid var(--zielen);padding-left:12px}
.kat-skok{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.kat-skok a{font-size:13px;padding:6px 12px;border:1px solid var(--kreska);border-radius:20px;color:var(--tekst);text-decoration:none}.kat-skok a:hover{border-color:var(--zielen);color:var(--zielen)}
.kat-alk{padding-top:32px;padding-bottom:32px}.kat-alk h3{font-size:16px;margin:0 0 6px}.kat-alk p{font-size:13.5px;color:var(--szary);max-width:720px;margin:0}
.kat-kafle{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:0 0 22px}.kat-kafle a{background:#fff;border-radius:12px;padding:10px 8px 12px;text-align:center;text-decoration:none;color:var(--tekst);font-size:13px;transition:transform .2s,box-shadow .2s}
.kat-kafle a:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px #0003}.kat-kafle img{width:72%;height:auto;display:block;margin:0 auto 6px}
@media (max-width:900px){.kat,.kat.odw{grid-template-columns:1fr;gap:20px;padding:34px var(--boki)}.kat.odw .kat-ob{order:0}.kat-ob{aspect-ratio:16/9}.kat-ob img{width:auto;height:80%}.kat-kafle{grid-template-columns:repeat(3,1fr)}.kat-tx h2{font-size:26px}}
/* DOKUMENTY (T39 K8.6, makieta s62_makieta_www_k8 — „ok” Stefana) */
.dok-lista .karta{margin-bottom:12px;scroll-margin-top:96px}.dok-lista h3.grupa{margin:22px 0 10px;font-size:18px}
.dok-lista .meta{font-size:13px;color:var(--szary);margin:0 0 8px}.dok-lista .akcje a{margin-right:14px}
.dok-lista .nowa{background:#FFF3E0;color:#8a4b00;border-radius:6px;padding:8px 10px;font-size:13px;margin-top:10px}
.dok-czytaj{background:#fff;border:1px solid #e3e6e8;border-radius:10px;padding:18px;margin-top:10px;max-height:70vh;overflow:auto;font-size:14px;line-height:1.55}
.dok-czytaj h1{font-size:22px}.dok-czytaj h2{font-size:18px}.dok-czytaj table{border-collapse:collapse}.dok-czytaj td,.dok-czytaj th{border:1px solid #ddd;padding:4px 6px}
.uwaga-cennik{font-size:13px;margin-top:22px}