/* DOŁĄCZ — przyklejony PASEK do oferty. NA ŻYWO od 08.10.2026 wieczorem: WYBÓR KUBY spośród dziewięciu wersji z podglądu
   (https://przycisk.hvmbak-landing.pages.dev/; źródła, pozostałe wersje i historia: ~/Desktop/strony/HVMBAK-DOSTEP/przycisk/ i DOSTEP.md tamże).
   Jego link: ?w=pasek&napis=3&s=1.16&mgla=5&mleko=0.18&ziarno=0.13&zw=52&mat=szklo&strzalka=2 → pasek ze SZKŁA na całą szerokość przy dolnej
   krawędzi, rozmiar 1,16, rozmycie tła 5 px, mleczność 0,18, ziarno 0,13 przy kafelku 52 px, strzałka w prawo, bez licznika dni i bez chowania
   przy zjeździe. Komputer: termin po lewej, napis po prawej; telefon: sam napis na środku. Ostre rogi, Inter 600 wersalikami.
   Uwagi Kuby po wyborze, wdrożone: (1) „napis za wysoko”, gdy Safari schowa pasek narzędzi i pod pasem zostaje bezpieczny margines iPhone'a
   (34 px): dawniej cały margines szedł w padding i napis siedział 14 px od góry pasa 63 px; teraz w padding idzie 0,4 marginesu, napis stoi
   24 px od góry (prawie na środku) i 20 px nad kreską gestów; przy widocznym pasku Safari (margines 0) nic się nie zmienia. (2) krawędź
   „delikatnie za jasna, zbyt biała”: biała linia u góry 0,9 → 0,6, ciemna kreska nad nią 0,10 → 0,12.
   Przy mleczności 0,18 czarne teczki prześwitują jako ciemne plamy i czarny napis nad nimi ginie, więc nad czarnym napis i strzałka bieleją
   (.ciemno z src/dolacz.js, pole pod środkiem napisu; termin po lewej zostaje czarny).
   Runda 2 (08.10 ok. 20:30, Kuba po obejrzeniu na iPhonie, „delikatnie, naprawdę delikatnie”): (3) pas WĘŻSZY, gdy widać pasek narzędzi Safari
   (margines 0, po przewinięciu w górę): 50 px·s = 58 px zamiast 54 px·s = 62,6 px; przy schowanym pasku (margines 34) wysokość dalej 62,6 px
   (50 px·s + 0,135 marginesu). (4) napis jeszcze trochę niżej przy schowanym pasku: w padding idzie 0,25 marginesu zamiast 0,4 → środek napisu
   27 px od góry pasa (było 24,5), dół liter 28 px nad krawędzią ekranu. Na komputerze bez zmian (58 px·s z media query).
   ZAPAS KUBY z tej samej rozmowy: wersja „bordo” z narzędzia (?w=bordo&napis=3&s=0.92&bok=25&ziarno=0.13&zw=40&strzalka=2: tusz bordo, rozmiar 0,92,
   boki 25 px, ziarno 0,13 przy 40 px, strzałka w prawo), „bardzo możliwe, że zostawimy przy tym jednak”; liczby są domyślne w bloku bordo w warsztacie.
   Historia: wersja 1 (mleczna płytka, niebieski myślnik) odrzucona 06.10 „wygląda tanio”; wersja 2 (przejrzysta tafla na środku, szum z SVG,
   obracająca się srebrna ramka) na żywo 06–08.10, odrzucona 08.10: „przejrzysty kafelek z nałożonym szumem, a nie ziarnem… tandetnie”.
   Ten plik = blok „pasek” z dolacz.css warsztatu bez pozostałych ośmiu wersji, te same selektory (data-w="pasek", data-mat="szklo") i te same
   liczby (zmienne --dl-*): stroić w podglądzie, wynik przepisać tu i do warsztatu. Ziarno: img/ziarno-a.png = szum niebieski landingu
   (img/ziarno.png) z kryciem zamiast szarości (przycisk/ziarno-a.py), mieszany z taflą trybem soft-light, więc rozjaśnia jasne i przyciemnia
   ciemne miejsca zamiast kłaść szarą zasłonę. Pokazywanie (.wid) i bielenie napisu (.ciemno): src/dolacz.js.
   08.10 ok. 21:30 (wybór Kuby z podglądu KONWERSJA): pas widać TAKŻE przy pytaniach (gaśnie tylko, gdy oferta jest na ekranie); oferta jest wtedy wyżej,
   więc strzałka obraca się w górę (.gora, własność rotate, żeby nie bić się z translateX pod kursorem); nad stopką pas podjeżdża o tyle, ile stopki widać
   (--dl-dok z src/dolacz.js, własność translate osobno od transform, które robi wjazd/zjazd; bez przejścia, więc idzie co klatkę ze stopką).
   09.10.2026 (Kuba z iPhone'a: na samym dole strony pas „się gliczuje, zacina się, tak jakby nie może znaleźć miejsca”): podnoszenie skryptem ZDJĘTE.
   Skrypt zna położenie stopki z opóźnieniem względem przewijania (iPhone przewija i odbija stronę na końcu poza wątkiem skryptów), więc pas gonił
   stopkę skokami. Pas jest teraz position:sticky w torze, który kończy się na górnej krawędzi stopki (.dolacz-kotwica i .dolacz-tor, opis w index.html):
   przy dolnej krawędzi ekranu trzyma go przeglądarka, a nad stopką jedzie razem ze stroną, bez udziału skryptu. Wygląd, wysokość i wjazd bez zmian.
   Warsztat (HVMBAK-DOSTEP/przycisk/) ma dalej wersję z position:fixed: tam nie ma stopki, więc różnicy nie widać.
   10.10.2026 (Kuba, zrzuty z iPhone'a, koniec strony): (5) pas NIŻSZY na telefonie, 45 px·s = 52,2 px zamiast 58 („troszeczkę za wysoki… nie musi być
   on taki wielki”, wchodził na zdanie „Nie ma tu twojego pytania?”); komputer bez zmian. (6) Nad stopką przy schowanym pasku przeglądarki pas był
   wyższy (62,6 px) i napis stał 4 px nad środkiem, bo dodatek na margines iPhone'a ma sens tylko przy dolnej krawędzi EKRANU. Dodatek (ćwierć
   marginesu = 8,5 px, napis nad kreską gestów) zostaje, ale tor pasa kończy się teraz o tyle samo POD górną krawędzią stopki, a stopka leży nad
   pasem (z-index w src/stopka.css): przy krawędzi ekranu widać cały pas z dodatkiem (60,7 px), a kiedy wjeżdża stopka, zasłania sam dodatek
   i nad nią stoi pas 52,2 px z napisem dokładnie na środku, taki sam jak przy widocznym pasku przeglądarki. Dalej bez skryptu. */
.dolacz{--dl-s:1.06;--dl-mgla:9px;--dl-mleko:.05;--dl-ziarno:.2;--dl-zw:96px;
  position:fixed;z-index:40;box-sizing:border-box;isolation:isolate;
  display:flex;align-items:center;gap:calc(12px*var(--dl-s));
  opacity:0;visibility:hidden;pointer-events:none;
  color:var(--black,#0d0d0d);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;font-weight:600;font-size:calc(12.5px*var(--dl-s));line-height:1;
  letter-spacing:.14em;text-transform:uppercase;
  transition:opacity .3s,transform .4s cubic-bezier(.3,.7,.2,1),visibility 0s .4s,color .25s,background-color .18s}
.dolacz.wid{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.dolacz > *{position:relative;z-index:2}
.dolacz::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1}                   /* ziarno */
.dolacz-n{margin-right:-.14em;transition:color .25s}                                                  /* bez światła po ostatniej literze */
.dolacz-e{display:none;margin-right:auto;font-size:calc(10.5px*var(--dl-s));letter-spacing:.1em;opacity:.58}       /* termin (komputer) */
.dolacz-s{flex:none;display:block;width:calc(11px*var(--dl-s));height:calc(11px*var(--dl-s));fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .2s,rotate .25s,color .25s}
.dolacz.gora[data-strzalka="2"] .dolacz-s{rotate:-90deg}                                           /* pod ofertą (pytania): oferta jest wyżej, strzałka w górę */
/* tor pasa: kotwica bez wysokości tuż nad stopką, tor od niej w górę ponad początek strony; pas stoi na dole toru i klei się do dołu ekranu */
.dolacz-kotwica{position:relative;z-index:40;height:0;pointer-events:none}
/* overflow:clip (nie hidden: hidden zrobiłby z toru kontener przewijania i pas kleiłby się do toru, nie do ekranu): schowany pas jest zsunięty
   o własną wysokość w dół (transform) i bez przycięcia wydłużałby stronę o tyle, o ile jest wyższy od stopki (komputer: 9 px).
   bottom ujemny o ćwierć marginesu iPhone'a: tyle pasa (sam dodatek pod napisem) chowa się nad stopką pod jej białe tło, opis (6) na górze pliku */
.dolacz-tor{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom)*-.25);height:200000px;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none;overflow:clip}
.dolacz:focus-visible{outline:2px solid var(--black,#0d0d0d);outline-offset:3px}
@media(hover:hover){.dolacz[data-strzalka="2"]:hover .dolacz-s{transform:translateX(3px)}}
@media(min-width:821px){.dolacz{font-size:calc(13px*var(--dl-s))}}
@media(prefers-reduced-motion:reduce){.dolacz{transition:opacity .2s,visibility 0s .2s,color .2s} .dolacz.wid{transition-delay:0s} .dolacz-s{transition:none}}

/* ---------- PASEK: pas na całą szerokość przy dolnej krawędzi; po lewej termin, po prawej napis. data-mat="papier" (biały, kreska u góry)
   albo data-mat="szklo" (przejrzysty pas z rozmyciem; bez bocznych krawędzi szkło wygląda naturalnie, jak pasek w iOS) ---------- */
.dolacz[data-w="pasek"]{--dl-s:1.16;--dl-mgla:5px;--dl-mleko:.18;--dl-ziarno:.13;--dl-zw:52px;position:sticky;flex:none;left:auto;right:auto;bottom:0;width:100%;height:auto;justify-content:space-between;
  padding:0 max(20px,calc(50% - 600px)) calc(env(safe-area-inset-bottom)*.25);min-height:calc(45px*var(--dl-s));min-height:calc(45px*var(--dl-s) + env(safe-area-inset-bottom)*.25);transform:translate(0,100%);
  background:#fff;box-shadow:0 -1px 0 rgba(13,13,13,.12),0 -12px 30px -16px rgba(13,13,13,.3)}
.dolacz[data-w="pasek"].wid{transform:none}
.dolacz[data-w="pasek"] .dolacz-e{display:block}
.dolacz[data-w="pasek"][data-mat="szklo"]{background:linear-gradient(180deg,rgba(255,255,255,calc(var(--dl-mleko) + .12)),rgba(255,255,255,var(--dl-mleko)));
  -webkit-backdrop-filter:blur(var(--dl-mgla)) saturate(1.4);backdrop-filter:blur(var(--dl-mgla)) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 -1px 0 rgba(13,13,13,.12),0 -12px 30px -16px rgba(13,13,13,.25)}
.dolacz[data-w="pasek"][data-mat="szklo"]::before{background:url(../img/ziarno-a.png) 0 0/var(--dl-zw) var(--dl-zw);mix-blend-mode:soft-light;opacity:var(--dl-ziarno)}
.dolacz[data-w="pasek"][data-mat="szklo"].ciemno :is(.dolacz-n,.dolacz-s){color:#fff}
@media(max-width:820px){.dolacz[data-w="pasek"] .dolacz-e{display:none} .dolacz[data-w="pasek"]{justify-content:center}}   /* telefon: sam napis na środku (termin się nie mieści) */
@media(min-width:821px){.dolacz[data-w="pasek"]{min-height:calc(58px*var(--dl-s))}}
@media(hover:hover){.dolacz[data-w="pasek"]:hover .dolacz-n{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}}

/* przeglądarka bez rozmycia tła: pas mleczny, żeby napis się czytał */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.dolacz[data-w="pasek"][data-mat="szklo"]{--dl-mleko:.86}}