/* ---------------------------------------------------------------------
   BLOK 8 - POWIADOMIENIA (zloty standard 26.10, dyzajn BLOK-08-POWIADOMIENIA).
   Liczby i kolory wprost z dyzajnu, dwa motywy w zmiennych `--p-*` na `.b8`
   (te same wartosci, co `.b6`). Telefon jest baza; laptop (od 1024 px) -
   ta sama kolumna, szersza. Menu ⋯ na telefonie to arkusz od dolu (B8-04),
   na laptopie - okienko przy wierszu. Przedrostek `b8-`, arkusz stoi tylko
   na ekranach bloku 8 (@pushOnce).
--------------------------------------------------------------------- */
.b8{--p-tlo:#09090B;--p-karta:#101014;--p-ramka:#2B2B34;--p-linia:#22222A;
  --p-tytul:#FFFFFE;--p-t:#E7E3DB;--p-szary:#8B867E;
  --p-zl:#E8C96A;--p-zl-r:#8A6A12;--p-zl-t:#15120A;
  --p-zloto:linear-gradient(135deg,#FBEFC2 0%,#D9B64A 45%,#B08A24 100%);
  --p-zl-tlo:rgba(217,182,74,.12);--p-ziel:#6FCF8E;--p-czer:#F07167;
  --p-kolo:#000;--p-kolo-r:rgba(232,201,106,.4);--p-zaslona:rgba(0,0,0,.64);
  box-sizing:border-box;width:100%;max-width:560px;margin:0 auto;padding:16px 18px 28px;
  background:var(--p-tlo);color:var(--p-t);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
:root[data-theme="light"] .b8{--p-tlo:#F7F5F1;--p-karta:#FFFFFF;--p-ramka:#E2DDD3;--p-linia:#ECE8E0;
  --p-tytul:#15120A;--p-t:#1C1A16;--p-szary:#7D776D;
  --p-zl:#9A7616;--p-zl-r:#D9C27A;--p-zloto:linear-gradient(135deg,#FBEFC2 0%,#B08A24 45%,#B08A24 100%);
  --p-zl-tlo:rgba(176,138,36,.10);--p-ziel:#2E8B57;--p-czer:#D2433A;
  --p-kolo:#FFFFFF;--p-kolo-r:#D9C27A;--p-zaslona:rgba(21,18,10,.38)}
body:has(.b8){background:#09090B}
:root[data-theme="light"] body:has(.b8){background:#F7F5F1}
:where(.b8) *{box-sizing:border-box}
:where(.b8) a{color:inherit;text-decoration:none}
:where(.b8) form{margin:0}
:where(.b8) button{font-family:inherit;cursor:pointer}

/* naglowek */
.b8-firma{margin:0 0 4px;font-size:12px;font-weight:800;color:var(--p-zl)}
.b8-gl{display:flex;align-items:center;gap:10px}
.b8-gl h1{flex:1;margin:0;font-size:24px;letter-spacing:-.4px;line-height:1.2;color:var(--p-tytul);font-weight:800}
.b8-kolo{flex:none;width:38px;height:38px;border-radius:19px;background:var(--p-kolo);border:1px solid var(--p-kolo-r);display:flex;align-items:center;justify-content:center;color:var(--p-zl)}
.b8-gl-w h1{font-size:20px;text-align:center;padding-right:38px}
.b8-wstecz{flex:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--p-tytul)}

/* filtry */
.b8-chipy{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.b8-chip{flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:12px;background:var(--p-karta);color:var(--p-tytul);border:1px solid var(--p-ramka);font-size:13.5px;font-weight:800;white-space:nowrap}
.b8-chip svg{color:var(--p-zl)}
.b8-chip-on{background:var(--p-zloto);color:var(--p-zl-t);border-color:#B08A24}
.b8-chip-on svg{color:var(--p-zl-t)}

/* grupy i wiersze */
.b8-grp{display:flex;align-items:center;margin:16px 0 0;font-size:10.5px;letter-spacing:2.2px;font-weight:800;color:var(--p-szary)}
.b8-grp form{margin-left:auto}
.b8-przecz{padding:6px 0 6px 10px;border:0;background:none;letter-spacing:0;font-size:13px;font-weight:800;color:var(--p-zl)}
.b8-w{position:relative;display:flex;gap:12px;padding:12px 0}
.b8-w + .b8-w{border-top:1px solid var(--p-linia)}
.b8-kr{position:absolute;left:-12px;top:20px;width:7px;height:7px;border-radius:4px;background:var(--p-zl)}
.b8-zn{flex:none;width:46px;height:46px;border-radius:13px;border:1px solid var(--p-zl-r);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;color:var(--p-zl);overflow:hidden}
.b8-zn img{width:100%;height:100%;object-fit:cover;display:block}
.b8-zn-cz{color:var(--p-czer)}
.b8-zn:has(.b8-stos){border:0;overflow:visible}
.b8-stos{position:relative;display:block;width:46px;height:46px}
.b8-stos > span{position:absolute;width:30px;height:30px;border-radius:9px;background:var(--p-tlo);border:1px solid var(--p-zl-r);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--p-zl);overflow:hidden}
.b8-stos > span:nth-child(2){left:9px;top:9px}
.b8-stos > span:nth-child(3){left:16px;top:16px}
.b8-stos img{width:100%;height:100%;object-fit:cover}
.b8-razem-p{margin-top:8px}
.b8 .b8-w > .b8-b{align-self:center}
.b8-zn-m{width:40px;height:40px;border-radius:12px}
.b8-tr{flex:1;min-width:0;display:flex;flex-direction:column}
.b8-t{display:flex;gap:8px;align-items:flex-start}
.b8-t b,.b8-k-t{flex:1;font-size:14.5px;line-height:1.35;color:var(--p-tytul);font-weight:700;overflow-wrap:anywhere}
.b8-nowy .b8-t b{font-weight:800}
.b8-cz{flex:none;font-size:11.5px;font-weight:700;color:var(--p-szary);padding-top:2px}
.b8-nowy .b8-cz{color:var(--p-zl)}
.b8-o{display:block;margin:3px 0 0;font-size:13px;line-height:1.4;font-weight:600;color:var(--p-szary);overflow-wrap:anywhere}
.b8-g{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.b8-b{min-height:34px;padding:0 14px;border-radius:10px;border:1px solid var(--p-ramka);background:transparent;display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:800;color:var(--p-tytul);white-space:nowrap}
.b8-b-zl{background:var(--p-zloto);border-color:transparent;color:var(--p-zl-t)}
.b8-b-szer{width:100%;min-height:52px;border-radius:14px;font-size:15px}
.b8-ok{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:var(--p-ziel);margin-right:4px}

/* menu ⋯ (B8-04) */
.b8-menu{flex:none;align-self:flex-start;position:relative}
.b8-menu summary{list-style:none;width:30px;height:30px;margin:-4px -6px 0 0;display:flex;align-items:center;justify-content:center;color:var(--p-szary);cursor:pointer;border-radius:8px}
.b8-menu summary::-webkit-details-marker{display:none}
.b8-menu[open] summary::before{content:"";position:fixed;inset:0;background:var(--p-zaslona);z-index:1700;cursor:default}
.b8-ark{position:fixed;left:0;right:0;bottom:0;z-index:1701;background:var(--p-karta);border:1px solid var(--p-zl-r);border-bottom:0;border-radius:14px 14px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.35)}
.b8-ark::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:var(--p-ramka)}
.b8-ark-t{margin:0 0 6px;font-size:13px;font-weight:800;color:var(--p-szary)}
.b8-ark button,.b8-ark a{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 0;border:0;border-top:1px solid var(--p-linia);background:none;text-align:left;color:var(--p-tytul)}
.b8-ark form:first-of-type button{border-top:0}
.b8-ark svg{flex:none;color:var(--p-zl);margin-top:1px}
.b8-ark span{display:flex;flex-direction:column;gap:2px}
.b8-ark b{font-size:15px;font-weight:800}
.b8-ark small{font-size:12.5px;font-weight:600;color:var(--p-szary)}

/* pusto, gosc, uwagi, tost */
.b8-pusto{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 0 8px;gap:10px}
.b8-pusto-ik{width:58px;height:58px;border-radius:14px;border:1px solid var(--p-zl-r);display:flex;align-items:center;justify-content:center;color:var(--p-zl)}
.b8-pusto h1,.b8-pusto h2{margin:8px 0 0;font-size:20px;font-weight:800;color:var(--p-tytul)}
.b8-pusto p{margin:0 0 12px;font-size:13.5px;line-height:1.45;font-weight:600;color:var(--p-szary)}
.b8-gosc{padding-top:48px}
.b8-uwaga{margin:16px 0 0;font-size:12.5px;line-height:1.45;font-weight:600;color:var(--p-szary)}
.b8-tost{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom));margin-top:16px;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:var(--p-karta);border:1px solid var(--p-zl-r);font-size:13.5px;font-weight:800;color:var(--p-tytul);z-index:5}
.b8-tost span{flex:1}
.b8-tost button{border:0;background:none;padding:6px 0;font-weight:800;color:var(--p-zl)}

/* pasek zgody na push (B8-08) */
.b8-bar{display:flex;gap:12px;margin-top:14px;padding:14px;border-radius:14px;background:var(--p-karta);border:1px solid var(--p-zl-r)}
.b8-bar[hidden]{display:none}
.b8-bar-ik{flex:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--p-zl-r);display:flex;align-items:center;justify-content:center;color:var(--p-zl)}
.b8-bar-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.b8-bar-t b{font-size:14.5px;font-weight:800;color:var(--p-tytul)}
.b8-bar-t > span{font-size:13px;font-weight:600;color:var(--p-szary)}

/* ustawienia (B8-07) */
.b8-info{display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;padding:12px 14px;border-radius:12px;background:var(--p-karta);border:1px solid var(--p-ramka);font-size:13px;line-height:1.45;font-weight:700;color:var(--p-tytul)}
.b8-info svg{flex:none;color:var(--p-zl)}
.b8-k{display:flex;gap:12px;padding:14px 0}
.b8-k + .b8-k{border-top:1px solid var(--p-linia)}
.b8-pig{position:relative;display:inline-flex}
.b8-pig input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.b8-pig span{min-height:32px;padding:0 13px;border-radius:9px;border:1px solid var(--p-ramka);display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;color:var(--p-szary)}
.b8-pig input:checked + span{background:var(--p-zloto);border-color:transparent;color:var(--p-zl-t)}
.b8-pig input:focus-visible + span{outline:2px solid var(--p-zl);outline-offset:2px}
.b8-pig-stale input{cursor:default}
.b8-pig-stale input:checked + span{background:transparent;border-color:var(--p-ramka);color:var(--p-szary)}
.b8-h2{margin:22px 0 10px;font-size:17px;font-weight:800;color:var(--p-tytul)}
.b8-karta{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--p-karta);border:1px solid var(--p-ramka)}
.b8-urz{flex-direction:column;align-items:stretch;padding:4px 14px}
.b8-urz-w{display:flex;align-items:center;gap:12px;padding:10px 0}
.b8-urz-w + .b8-urz-w{border-top:1px solid var(--p-linia)}
.b8-urz-w b{font-size:14px;font-weight:800;color:var(--p-tytul)}
.b8-usun{border:0;background:none;padding:8px 0 8px 8px;font-size:13px;font-weight:800;color:var(--p-zl)}

/* zablokowane (B8-09) */
.b8-blok{margin-top:14px;padding:16px;border-radius:14px;background:var(--p-karta);border:1px solid var(--p-zl-r)}
.b8-blok[hidden]{display:none}
.b8-blok h2{margin:0;font-size:17px;font-weight:800;color:var(--p-tytul)}
.b8-blok > p{margin:6px 0 12px;font-size:13px;line-height:1.45;font-weight:600;color:var(--p-szary)}
.b8-zak{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.b8-zak > input{position:absolute;opacity:0;pointer-events:none}
.b8-zak > label{height:34px;padding:0 13px;border-radius:10px;border:1px solid var(--p-ramka);display:inline-flex;align-items:center;font-size:13px;font-weight:800;color:var(--p-tytul);cursor:pointer}
/* Strefa palca 44 px (06.11, `tools/kasanie.mjs`): guzik rysuje sie 34 px, przezroczysta warstwa lapie dotkniecie 5 px wyzej i nizej. */
.b8-zak > label{position:relative}
.b8-zak > label::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
.b8-zak > input:checked + label{background:var(--p-zloto);border-color:transparent;color:var(--p-zl-t)}
.b8-zak > input:focus-visible + label{outline:2px solid var(--p-zl);outline-offset:2px}
.b8-kroki,.b8-przegl{flex-basis:100%;margin:4px 0 0}
.b8-kroki{padding-left:20px;font-size:13.5px;line-height:1.5;font-weight:600;color:var(--p-t)}
.b8-kroki li{margin:4px 0}
.b8-przegl p{margin:0;font-size:13px;line-height:1.5;font-weight:600;color:var(--p-t)}
.b8-nad{font-size:10.5px!important;letter-spacing:2.2px;font-weight:800!important;color:var(--p-szary)!important;margin-bottom:4px!important}
#b8-zak-a:checked ~ .b8-przegl{display:none}
#b8-zak-c:checked ~ .b8-kroki,#b8-zak-i:checked ~ .b8-kroki{display:none}

/* laptop: ta sama kolumna, szersza; menu ⋯ jako okienko przy wierszu */
@media (min-width:1024px){
  .b8{max-width:var(--kr-waska,760px);padding:28px 24px 40px}
  .b8-menu[open] summary::before{background:transparent}
  .b8-ark{position:absolute;left:auto;right:0;bottom:auto;top:30px;width:320px;border-radius:14px;border-bottom:1px solid var(--p-zl-r);padding:10px 16px}
  .b8-ark::before,.b8-ark-t{display:none}
  .b8-tost{bottom:24px}
}

/* B8-05: nieaktualne - wiersz szarzeje, ekran "Tej oferty juz nie ma". */
.b8-w.b8-nie{opacity:.5}
.b8-nie-g{text-align:center;padding:4px 0}
.b8-nie-ik{display:inline-flex;width:76px;height:76px;border-radius:14px;border:1px solid var(--p-zl-r);align-items:center;justify-content:center;color:var(--p-zl)}
.b8-nie-g h1{margin:18px 0 0;font-size:22px;line-height:1.12;font-weight:800;color:var(--p-tytul);letter-spacing:-.6px}
.b8-nie-g p{margin:6px 0 0;font-size:14px;line-height:1.45;font-weight:600;color:var(--p-szary)}
.b8-pod{color:inherit;text-decoration:none;padding:10px 0}
.b8-pod-zn{flex:none;width:52px;height:52px;border-radius:12px;background:var(--p-linia) center/cover}
.b8 .b8-nie-wsz{display:flex;width:100%;min-height:54px;margin-top:12px;border-radius:14px;font-size:16px}

/* B8-13: kto w zespole firmy dostaje - karta z rodzajami, pigulki wyboru 28 px. */
.b8-z-p{margin:12px 0 10px}
.b8-z{display:block;border-radius:14px;padding:2px 14px}
.b8-z-wej{margin-top:12px;color:inherit;text-decoration:none}
.b8 fieldset.b8-k{margin:0;border:0;min-width:0;padding:12px 0}
.b8 fieldset.b8-k + fieldset.b8-k{border-top:1px solid var(--p-linia)}
.b8-z legend{float:left;width:100%;padding:0;font-size:15px}
.b8-z .b8-o{clear:both}
.b8-pig-z span{min-height:28px;padding:0 10px;border-radius:8px;font-size:12px}
.b8-z .b8-pig-stale input:checked + span{background:var(--p-zloto);border-color:transparent;color:var(--p-zl-t)}

/* ===== 05.11 (wlasciciel, "wyglada zle - zrobic ladnie"): GESTA LISTA zamiast ciezkich kart.
   Wiersz 64-72 px: znak 44 (kwadrat z zaokragleniem), tytul 1-2 wiersze, czas z prawej drobno,
   nieprzeczytane = zlota kropka + odrobine jasniejsze tlo, bez ramek; cienkie kreski miedzy wierszami.
   Stukniecie w wiersz otwiera rzecz (`.b8-t::after` na caly wiersz), dzialania w ⋯.
   Odstepy - wspolne `--kr-blok` / `--kr-nag` (tabbar.css). */
.b8{--p-nowy:rgba(255,255,255,.04)}
:root[data-theme="light"] .b8{--p-nowy:rgba(176,138,36,.07)}
.b8-grp{margin:var(--kr-blok,20px) 0 var(--kr-nag,8px)}
.b8-lista{display:flex;flex-direction:column;margin-left:-18px;margin-right:-18px}
.b8-lista .b8-w{gap:12px;min-height:68px;padding:12px 18px;align-items:flex-start;border:0;border-radius:0;background:none}
.b8-lista .b8-w + .b8-w{border-top:1px solid var(--p-linia)}
.b8-lista .b8-w.b8-nowy{background:var(--p-nowy)}
.b8-lista .b8-zn{position:relative;z-index:1;width:44px;height:44px;border-radius:12px}
.b8-lista .b8-zn .b8-stos{width:44px;height:44px}
.b8-lista .b8-tr{align-self:center}
.b8-lista .b8-t{display:block}
.b8-lista .b8-t::after{content:"";position:absolute;inset:0;z-index:0}
.b8-lista .b8-t b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14.5px;line-height:1.35;font-weight:600}
.b8-lista .b8-nowy .b8-t b{font-weight:800}
.b8-lista .b8-o{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;margin-top:2px}
.b8-lista .b8-cz{display:flex;align-items:center;gap:6px;padding-top:3px;white-space:nowrap}
.b8-lista .b8-kr{position:static;flex:none;width:8px;height:8px;border-radius:4px;background:var(--p-zl)}
.b8-lista .b8-g{position:relative;z-index:1;margin-top:8px}
.b8-lista .b8-b{min-height:32px;padding:0 12px;font-size:13px}
.b8-lista .b8-menu{z-index:1;margin-left:-4px}
.b8-lista .b8-menu summary{margin:-2px -8px 0 0}
.b8-lista .b8-w.b8-nie{opacity:.55}
/* Filtry: jedna linia w bok bez znakow, wysokosc jak czipy portalu (38 px), ostatni czip w calosci za brzegiem. */
@media (max-width:1023px){
.b8 .b8-chipy.ch-siatka{display:flex !important;flex-wrap:nowrap !important;grid-template-columns:none !important;overflow-x:auto;scrollbar-width:none;
  margin-left:-18px;margin-right:-18px;padding:0 18px 2px;scroll-padding:0 18px;scroll-snap-type:x proximity}
.b8 .b8-chipy.ch-siatka::-webkit-scrollbar{display:none}
.b8 .b8-chipy .b8-chip{flex:none;width:auto !important;height:38px;min-height:38px;padding:0 14px;white-space:nowrap;scroll-snap-align:start}
.b8 .lw-bok{min-width:0;overflow:visible}
.b8 .b8-chipy.ch-siatka{width:calc(100% + 36px);max-width:none;box-sizing:border-box}
.b8 .b8-chipy.ch-siatka::after{content:"";flex:none;width:4px}
}
@media (min-width:1024px){
  .b8-lista{margin-left:0;margin-right:0}
  .b8-lista .b8-w{padding-left:16px;padding-right:12px}
}

/* STREFA KASANIA (05.11, `tools/kasanie.mjs`): palec trafia w kwadrat co najmniej
   44x44 px, choc rysunek zostaje ten sam - przezroczysta warstwa wokol guzika
   (pseudo-element) lapie dotkniecie za niego. Wiekszy od 44 nie rosnie (`min`).
   `:where()` przy `position` ma zerowa wage, wiec kazda regula ekranu z wlasnym
   `position` wygrywa. */
:where(a.b8-b,a.b8-chip,a.b8-kolo,.b8-menu > summary,button.b8-przecz,a.b8-wstecz){position:relative}
a.b8-b::after,
a.b8-chip::after,
a.b8-kolo::after,
.b8-menu > summary::after,
label.b8-pig::after,
button.b8-przecz::after,
a.b8-wstecz::after{content:"";position:absolute;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}
/* Wiersz powiadomienia stuka sie CALY (`.b8-lista .b8-t::after`, wiersz 64-72 px) -
   bez `position` na samym odnosniku. Filtry jada w bok (`overflow-x`) i przycinaja
   strefe chipow 38 px: 3 px paddingu zjedzone ujemnym marginesem (uklad stoi). */
@media (max-width:1023px){.b8 .b8-chipy.ch-siatka{padding-top:3px;padding-bottom:5px;margin-top:9px;margin-bottom:-3px}}