/* ============================================================================
   komponenty.css — komponenty panelu Tropu (ARCHITEKTURA §10.2; port 1:1 komponentów Geist panelu Gońca, GEIST-2 01.10.2026).
   Gramatyka Geist (Vercel = MAŁO, nie SZARO): nagłówek ekranu = tytuł + najwyżej 1 znacznik i 1 akcja (UI-16), liczba zamiast zdania —
   zdanie na drugi poziom pod ⓘ (.info → .zr-pop) albo w <details class="wiecej"> (UI-17), odstęp zamiast ramki: jedna ramka na listę
   albo tabelę, ⛔ ramka w ramce, znacznik bez ramki, linie 1 px tylko ciągłe (UI-18), Geist Sans do wszystkiego (liczby tabular-nums),
   Geist Mono tylko identyfikatory, ⛔ wersaliki (UI-19), czerń i biel + jeden szary, niebieski = „czeka na Ciebie”, zieleń = „zrobione”,
   odwrócony znacznik = „po terminie”, stan domyślny bez znacznika (UI-20). Reguły Tomka (lint-ui): ⛔ czerwone przyciski i wypełnienia
   (UI-1), ⛔ natywny select — klik w obiekt otwiera .zr-pop (UI-3), zero gradientów (UI-6), promienie wyłącznie z tokenów (UI-5).
   Ekrany Tropu mają własne klasy w css/ekrany.css.
   ============================================================================ */

/* ── przyciski: główny = tło --tekst (inwersja per motyw), drugorzędny = karta z linią pola, cichy = sam tekst ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--dotyk); padding: 0 12px;
    border: 1px solid var(--linia-pole); border-radius: var(--r-pole); background: var(--karta); color: var(--tekst);
    font: var(--t-tekst); font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: border-color .15s var(--ease), opacity .15s var(--ease), background .15s var(--ease); }
.btn:hover:not(:disabled) { border-color: var(--mute); background: var(--arkusz); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.glowny { background: var(--tekst); border-color: var(--tekst); color: var(--karta); }
.btn.glowny:hover:not(:disabled) { opacity: .86; background: var(--tekst); }
.btn.cicho { background: transparent; border-color: transparent; color: var(--tekst); padding-left: 10px; padding-right: 10px; }
.btn.cicho:hover:not(:disabled) { background: var(--hover); border-color: transparent; }
.btn.mala { padding: 0 10px; font: var(--t-maly); font-weight: 500; }   /* 13/500 (GEIST-4, decyzja integratora: bez 12 px; ekrany robią miejsce, nie przycisk się kurczy) */
.btn.pelny { width: 100%; min-height: 44px; }
.btn .ico { width: 14px; height: 14px; }
.btn.krec .ico svg { animation: tr-obrot .8s linear infinite; }
.ikb { width: var(--dotyk); height: var(--dotyk); flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0;
    border: 1px solid var(--linia-pole); border-radius: var(--r-pole); background: var(--karta); color: var(--tekst); cursor: pointer;
    transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease), opacity .15s var(--ease); }
.ikb:hover:not(:disabled) { border-color: var(--mute); }
.ikb.cicho { border-color: transparent; background: transparent; color: var(--olow); }
.ikb.cicho:hover:not(:disabled) { background: var(--hover); color: var(--tekst); }

/* obiekt klikany (UI-3): wartość, którą da się zmienić, otwiera .zr-pop — ⛔ osobny przycisk „zmień”, ⛔ natywny select */
.obiekt { display: inline-flex; align-items: center; gap: 6px; min-height: var(--dotyk); max-width: 100%; min-width: 0; padding: 0 10px;
    border: 1px solid var(--linia-pole); border-radius: var(--r-pole); background: var(--karta); color: var(--tekst);
    font: var(--t-tekst); font-weight: 500; cursor: pointer; text-align: left; transition: border-color .15s var(--ease); }
.obiekt:hover { border-color: var(--mute); }
.obiekt[aria-expanded="true"] { border-color: var(--tekst); }
.obiekt > span:not(.ico) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.obiekt .obiekt-et { color: var(--olow); font-weight: 400; flex: none; }
.obiekt.zawijaj { height: auto; padding-top: 6px; padding-bottom: 6px; }
.obiekt.zawijaj > span:not(.ico) { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.obiekt .ico { width: 12px; height: 12px; color: var(--olow); }

/* ── stan = kropka + słowo, BEZ ramki i tła (UI-18); znacznik = 22 px na tle arkusza, tylko nagłówek i „po terminie” (odwrócony) ── */
.kr { display: inline-block; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--kol, var(--mute)); }
.stan { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--tekst); font: var(--t-maly); white-space: nowrap; }
.stan > span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.stan.czeka { --kol: var(--akcja); color: var(--akcja-tekst); }
.stan.zrobione { --kol: var(--zrobione); color: var(--zrobione); }
.stan.blad { --kol: var(--blad); color: var(--blad); }
.stan.ai { --kol: var(--ai); color: var(--ai); }
.stan.wylaczone { --kol: var(--mute); color: var(--olow); }
.stan.neutralny { --kol: var(--olow); color: var(--tekst); }
.stan.duzy { font: var(--t-tekst); }
.kr.ton-czeka { --kol: var(--akcja); }
.kr.ton-zrobione { --kol: var(--zrobione); }
.kr.ton-blad { --kol: var(--blad); }
.kr.ton-ai { --kol: var(--ai); }
.kr.ton-wylaczone { --kol: var(--mute); }
.kr.ton-neutralny { --kol: var(--olow); }
.znacznik { display: inline-flex; align-items: center; gap: 6px; height: 22px; max-width: 100%; padding: 0 8px; border-radius: var(--r-chip);
    background: var(--arkusz); color: var(--tekst); font: var(--t-etykieta); white-space: nowrap; }
.znacznik > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.znacznik .kr { width: 6px; height: 6px; }
.znacznik.po { background: var(--po-tlo); color: var(--po-tekst); }
.znacznik.czeka { color: var(--akcja-tekst); }
.licz { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 16px; color: var(--olow); font: var(--t-etykieta); font-variant-numeric: tabular-nums; }
.licz.czeka { color: var(--akcja-tekst); }
.blad-tekst { display: flex; align-items: baseline; gap: 8px; color: var(--blad); font: var(--t-maly); }
.blad-tekst .kr { --kol: var(--blad); transform: translateY(-1px); }
.czeka-tekst { color: var(--akcja-tekst); }

/* ── drugi poziom (UI-17): ⓘ otwiera .zr-pop ze zdaniem; <details class="wiecej"> w tym samym kontenerze ── */
.info { display: inline-flex; align-items: center; justify-content: center; width: var(--dotyk); height: var(--dotyk); flex: none; padding: 0; border-radius: var(--r-pole);
    color: var(--mute); vertical-align: middle; cursor: pointer; }
.info .ico { width: 16px; height: 16px; }
.info:hover, .info[aria-expanded="true"] { color: var(--tekst); background: var(--hover); }
.zr-info { display: flex; flex-direction: column; gap: 10px; padding: 8px 12px 12px; font: var(--t-maly); color: var(--tekst); }
.zr-info p { margin: 0; }
.zr-info .olow { color: var(--olow); }
.zr-pop.szeroki { width: 380px; }
details.wiecej > summary { display: inline-flex; align-items: center; gap: 6px; min-height: var(--dotyk); color: var(--olow); font: var(--t-maly); cursor: pointer; list-style: none; }
details.wiecej > summary::-webkit-details-marker { display: none; }
details.wiecej > summary::after { content: '›'; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; transition: transform .15s var(--ease); }   /* kwadrat: obrót o 90° nie wystaje poza summary */
details.wiecej[open] > summary::after { transform: rotate(90deg); }
details.wiecej > summary:hover { color: var(--tekst); }

/* ── sekcja = nagłówek + treść, BEZ ramki i szarego pasa (UI-18); karta = wyłącznie kontener listy, tabeli albo wierszy ── */
.sekcja { display: flex; flex-direction: column; gap: var(--o3); min-width: 0; }
.sekcja-glowa { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.sekcja-glowa h2 { font: var(--t-h2); letter-spacing: -.01em; }
.sekcja-glowa small { font: var(--t-maly); color: var(--olow); }
.sekcja-prawo { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r-karta); min-width: 0; }
.karta-glowa { display: flex; align-items: center; gap: 4px 10px; min-height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--linia); flex-wrap: wrap; }
.karta-glowa h2 { font: var(--t-h2); letter-spacing: -.01em; white-space: nowrap; }
/* podpis nagłówka: Sans, zawija się zamiast wielokropka (PP-UI-POP3) */
.karta-glowa .pod { font: var(--t-maly); color: var(--olow); min-width: 0; overflow-wrap: anywhere; flex: 1 1 16em; }
.karta-tresc { padding: 16px; }
.karta-tresc.bez { padding: 0; }
.siatka-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o5); }

/* ── pasek akcji: okna i akcje po lewej, linki po prawej (UI-9) ── */
.pasek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; background: var(--karta); border: 1px solid var(--linia);
    border-radius: var(--r-karta); min-width: 0; }
.linki { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 10px; margin-left: auto; min-width: 0; max-width: 100%; }
.w-link-grupa { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; }
.w-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--dotyk); min-width: 0; max-width: 280px; padding: 0 4px;
    color: var(--akcja-tekst); font: var(--t-maly); text-decoration: underline; text-decoration-color: var(--akcja-linia); text-underline-offset: 3px;
    text-decoration-thickness: 1px; border-radius: var(--r-chip); }
.w-link > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.w-link .ico { width: 14px; height: 14px; }
.w-link:hover { text-decoration-color: currentColor; }
/* „Kopiuj” = ikona 16 px z aria-label, widoczna przy najechaniu i fokusie; na dotyku zawsze (UI-9, GEIST-2) — w DOM zostaje zawsze */
.kopiuj { display: inline-flex; align-items: center; justify-content: center; min-height: var(--dotyk); min-width: var(--dotyk); padding: 0;
    border-radius: var(--r-pole); color: var(--olow); opacity: 0; transition: opacity .15s var(--ease); }
.kopiuj .ico { width: 16px; height: 16px; }
.kopiuj:hover { background: var(--hover); color: var(--tekst); }
.w-link-grupa:hover .kopiuj, .w-link-grupa:focus-within .kopiuj, .kopiuj:focus-visible { opacity: 1; }
@media (hover: none), (max-width: 720px) { .kopiuj { opacity: 1; } }

/* ── lista jak CRM: jedna tabela (jedna ramka), szukanie, filtry w .zr-pop (UI-7) ── */
.tabela { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.narzedzia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.szukaj { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; max-width: 360px; min-height: var(--dotyk); padding: 0 10px;
    background: var(--karta); border: 1px solid var(--linia-pole); border-radius: var(--r-pole); color: var(--mute); }
.szukaj:focus-within { border-color: var(--akcja); box-shadow: 0 0 0 3px var(--akcja-tlo); }
.szukaj input { flex: 1; min-width: 0; min-height: calc(var(--dotyk) - 2px); border: 0; background: none; outline: 0; color: var(--tekst); font: var(--t-tekst); }
.szukaj input::placeholder { color: var(--mute); }
.szukaj input::-webkit-search-cancel-button { -webkit-appearance: none; }
.filtr .obiekt-war { color: var(--tekst); }
.filtr.aktywny { border-color: var(--tekst); }
.licznik { margin-left: auto; font: var(--t-maly); font-variant-numeric: tabular-nums; color: var(--olow); white-space: nowrap; }
.tab-wrap { border: 1px solid var(--linia); border-radius: var(--r-karta); background: var(--karta); min-width: 0; }
.tab { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font: var(--t-tekst); }
.tab thead th { position: sticky; top: 0; z-index: 2; padding: 10px 16px; background: var(--karta); border-bottom: 1px solid var(--linia);
    color: var(--olow); font: var(--t-etykieta); text-align: left; overflow-wrap: break-word; vertical-align: bottom; }
.tr-glowna .tab thead th { top: var(--gora-h); }
.tab thead th:first-child { border-top-left-radius: var(--r-karta); }
.tab thead th:last-child { border-top-right-radius: var(--r-karta); }
.tab tbody td { height: var(--wiersz-h); padding: 8px 16px; border-top: 1px solid var(--linia-miekka); vertical-align: middle; color: var(--tekst);
    overflow-wrap: break-word; }   /* komórka zawija się (powód wykluczenia, źródło) zamiast wielokropka — PP-UI-POP3 */
.tab tbody td.mono { overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* identyfikator nie łamie się w środku (pełny w title) */
.tab tbody tr:first-child td { border-top: 0; }
.tab tbody tr.klik { cursor: pointer; }
.tab tbody tr.klik:hover td { background: var(--arkusz); }
.tab tbody tr.klik:focus-visible { outline: none; }
.tab tbody tr.klik:focus-visible td { box-shadow: inset 0 2px 0 var(--akcja), inset 0 -2px 0 var(--akcja); }
.tab tbody tr.wybrany td:first-child { box-shadow: inset 2px 0 0 var(--tekst); }
.tab tbody tr.wybrany td { background: var(--arkusz); }
.tab .r { text-align: right; }
.tab td.liczba-k { font-variant-numeric: tabular-nums; text-align: right; color: var(--tekst); }
.tab td .glowna-k { color: var(--tekst); font-weight: 500; }
/* tytuł w liście zawija się do 2 linii (pełny w title) — ⛔ ucinanie w połowie słowa przy wąskiej kolumnie obok szuflady */
.glowna-k, .kafel-tyt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; overflow-wrap: break-word; }
.tab td .pod-k { display: block; font: var(--t-maly); color: var(--olow); overflow-wrap: anywhere; }
.kafle { display: none; flex-direction: column; border: 1px solid var(--linia); border-radius: var(--r-karta); background: var(--karta); min-width: 0; }
.kafel { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: var(--wiersz-h); padding: 12px 16px; border-top: 1px solid var(--linia-miekka);
    text-align: left; color: inherit; cursor: pointer; min-width: 0; }
.kafel:first-child { border-top: 0; border-radius: var(--r-karta) var(--r-karta) 0 0; }
.kafel:active, .kafel.wybrany { background: var(--arkusz); }
.kafel-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.kafel-tyt { color: var(--tekst); font: var(--t-tekst); font-weight: 500; }
.kafel-pod { font: var(--t-maly); color: var(--olow); overflow-wrap: anywhere; }   /* telefon — zawijanie, bez ucinania (PP-UI-POP3) */
.kafel-prawo { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; max-width: 45%; min-width: 0; }
.tab-dalej { align-self: center; }
.tab-stopka { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }   /* licznik pod tabelą (licznikNaDole) */
.tab-stopka .licznik { margin-left: 0; }
.tab-stopka .tab-dalej { margin-left: auto; }

/* ── stany danych: pusto (ikona 20 px, powód, jedna akcja — UI-13), ładowanie (bez gradientu, UI-6), błąd (tekst + kropka, UI-1) ── */
.pusto { display: flex; flex-direction: column; align-items: center; gap: var(--o3); padding: var(--o6) var(--o5); text-align: center; color: var(--olow); }
.pusto > .ico { width: 20px; height: 20px; color: var(--mute); }
.pusto-powod { max-width: 480px; color: var(--tekst); font: var(--t-tekst); }
.pusto-pod { max-width: 480px; font: var(--t-maly); color: var(--olow); }
.ladowanie { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.ladowanie i { display: block; height: 10px; border-radius: var(--r-chip); background: var(--pasmo); animation: tr-puls 1.4s ease-in-out infinite; }
.ladowanie i:nth-child(3n + 2) { width: 72%; }
.ladowanie i:nth-child(3n) { width: 48%; }
.blad-stan { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 20px; text-align: center; }

/* ── .zr-pop: menu na klik w obiekt; zawsze w kadrze; na telefonie arkusz dolny (UI-3, UI-11); tytuł zwykłymi literami, bez pasa ── */
.zr-pop { position: fixed; z-index: 85; width: 300px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); display: flex; flex-direction: column;
    background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r-karta); box-shadow: var(--cien-arkusz); overflow: auto;
    animation: tr-wejscie .12s ease-out both; }
.zr-pop.arkusz { left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-width: none; max-height: 72dvh; }
.zr-glowa { display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px; flex: none; font: var(--t-etykieta); color: var(--olow); }
.zr-glowa .ico { width: 14px; height: 14px; }
.zr-lista { display: flex; flex-direction: column; padding: 4px; min-height: 0; }
.zr-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; width: 100%; min-height: 36px;
    padding: 6px 10px; border-radius: var(--r-chip); color: var(--tekst); text-align: left; font: var(--t-tekst); cursor: pointer; }
.zr-item:hover:not(:disabled), .zr-item:focus-visible { background: var(--arkusz); outline: none; }
.zr-item:disabled { color: var(--mute); cursor: default; }
.zr-item .ico { width: 16px; height: 16px; color: var(--olow); }
.zr-item[aria-checked="true"] .ico { color: var(--tekst); }
.zr-item .zr-et { display: flex; flex-direction: column; min-width: 0; }
.zr-item .zr-et > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zr-item .zr-pod { font: var(--t-maly); color: var(--olow); white-space: normal; }
.zr-item .zr-prawo { font: var(--t-maly); color: var(--olow); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zr-sep { height: 1px; margin: 4px 6px; background: var(--linia-miekka); }
.zr-potw { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.zr-potw p { font: var(--t-tekst); color: var(--tekst); }
.zr-potw .rzad { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.zr-stopka { padding: 8px 12px; border-top: 1px solid var(--linia-miekka); font: var(--t-maly); color: var(--olow); }

/* ── szuflada: szczegół obiektu z własnym adresem; ≥ 1200 px obok listy, niżej nad listą, telefon = pełny ekran ── */
.szuflada-tlo { position: fixed; inset: 0; z-index: 60; background: var(--scrim); }
.szuflada { position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(var(--szuflada-w), 100vw); display: flex; flex-direction: column;
    background: var(--karta); border-left: 1px solid var(--linia); box-shadow: var(--cien-arkusz); outline: 0; animation: tr-wejscie .16s ease-out both; }
.sz-glowa { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--linia); background: var(--karta); flex: none; }
.sz-tyt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; padding-top: 4px; }
.sz-tyt h2 { font: var(--t-h2); overflow-wrap: anywhere; }
.sz-tyt .pod { font: var(--t-maly); color: var(--olow); overflow-wrap: anywhere; }
.sz-tresc { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 32px; display: flex; flex-direction: column; gap: var(--o5); }
/* sekcja nie kurczy się w przewijanej kolumnie (ostatnia sekcja — np. „Plan maszyny” celu — cała nad paskiem akcji) */
.sz-sek { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: none; }
.sz-sek > .et { font: var(--t-h3); color: var(--tekst); }   /* podsekcja = h3 zwykłymi literami (GEIST-2) */
.sz-sek .wiersz { padding-left: 0; padding-right: 0; }   /* GEIST-5: wiersze w szufladzie bez wcięcia i ramki — równo z resztą treści */
.sz-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--linia); background: var(--karta); flex: none; }
/* wiersze klucz → wartość: bez zewnętrznej ramki (UI-18), wiersze rozdziela linia */
.wiersze { display: flex; flex-direction: column; min-width: 0; }
.karta > .wiersze { border-top: 1px solid var(--linia); }
.wiersz { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px;
    border-top: 1px solid var(--linia-miekka); font: var(--t-tekst); min-width: 0; }
.wiersz:first-child { border-top: 0; }
.wiersz-k { color: var(--tekst); flex: none; }   /* GEIST-6 („MAŁO, nie SZARO”): klucz wiersza pełnym kolorem — szary zostaje dla podpisów i objaśnień */
.wiersz-w { color: var(--tekst); min-width: 0; text-align: right; overflow-wrap: anywhere; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
@media (min-width: 1200px) {
    .szuflada-tlo.obok { background: transparent; pointer-events: none; }
    body.tr-sz-otwarta [data-obok-szuflady] { margin-right: var(--szuflada-w); }
    /* lista obok szuflady = wąska kolumna: karty zamiast tabeli (tytuł nie łamie się po literze), liczby-filtry w rzędach po 3 */
    body.tr-sz-otwarta [data-obok-szuflady] .tabela .tab-wrap { display: none; }
    body.tr-sz-otwarta [data-obok-szuflady] .tabela .kafle { display: flex; }
    body.tr-sz-otwarta [data-obok-szuflady] .filtry-liczb:not(.malo) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.tr-sz-otwarta [data-obok-szuflady] .filtry-liczb:not(.malo) .filtr-liczba:nth-child(3n + 1) { border-left: 0; }
    body.tr-sz-otwarta [data-obok-szuflady] .filtry-liczb:not(.malo) .filtr-liczba:nth-child(n + 4) { border-top: 1px solid var(--linia); }
}

/* ── okno: tylko edycja i decyzja; ⛔ zakładki; stopka po prawej: Anuluj + ≤ 1 główny (UI-8); telefon = stopka przy dolnej krawędzi ── */
.okno-tlo { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--scrim); }
.okno { width: 100%; max-width: 560px; max-height: min(88dvh, 900px); display: flex; flex-direction: column; background: var(--karta);
    border: 1px solid var(--linia); border-radius: var(--r-karta); box-shadow: var(--cien-arkusz); outline: 0; animation: tr-wejscie .16s ease-out both; }
.okno.szeroki { max-width: 860px; }
.okno-glowa { display: flex; align-items: flex-start; gap: 10px; padding: 16px 12px 12px 20px; border-bottom: 1px solid var(--linia); flex: none; }
.okno-tyt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; padding-top: 4px; }
.okno-tyt h2 { font: var(--t-h2); }
.okno-tyt h2, .okno-tyt .pod { min-width: 0; overflow-wrap: anywhere; }   /* długi adres (np. skrzynka do spraw danych) łamie się zamiast rozpychać okno */
.okno-tyt .pod { font: var(--t-maly); color: var(--olow); }
.okno-tresc { padding: 16px 20px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; display: flex; flex-direction: column; gap: var(--o4); }
.okno-tresc h3 { font: var(--t-h3); }
.okno-stopka { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--linia); flex: none; }

/* ── pola formularza (⛔ natywny select — wybór z listy = .obiekt + .zr-pop) ── */
.pole { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pole > label, .pole .pole-et { font: var(--t-maly); color: var(--olow); }
.pole input, .pole textarea { width: 100%; min-height: var(--dotyk); padding: 5px 10px; border: 1px solid var(--linia-pole); border-radius: var(--r-pole);
    background: var(--karta); color: var(--tekst); font: var(--t-tekst); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.pole textarea { min-height: 88px; padding-top: 8px; padding-bottom: 8px; resize: vertical; }
.pole input::placeholder, .pole textarea::placeholder { color: var(--mute); }
.pole input:focus, .pole textarea:focus { outline: none; border-color: var(--akcja); box-shadow: 0 0 0 3px var(--akcja-tlo); }
.pole input:disabled { opacity: .55; }
.pole .podpowiedz { font: var(--t-maly); color: var(--olow); }
.przelacznik { display: inline-flex; align-items: center; gap: 10px; min-height: var(--dotyk); cursor: pointer; user-select: none; font: var(--t-tekst); color: var(--tekst); }
/* przełącznik 42×24 px (PP-UI-POP3); włączony = czarno-biały (GEIST-2: niebieski znaczy „czeka na Ciebie”, nie „włączone”) */
.przelacznik input { appearance: none; -webkit-appearance: none; position: relative; width: 42px; height: 24px; margin: 0; flex: none; border-radius: 999px;
    background: var(--linia-pole); cursor: pointer; transition: background .15s var(--ease); }
.przelacznik input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--karta);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s var(--ease); }
.przelacznik input:checked { background: var(--tekst); }
.przelacznik input:checked::after { transform: translateX(18px); }
.przelacznik .przelacznik-stan { color: var(--olow); font: var(--t-maly); }

/* ── liczby: JEDEN pasek w jednej ramce z pionowymi separatorami (nie N kart); liczba Sans tabular, etykieta 13 px, ≤ 1 linia pod ── */
.liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: 1px solid var(--linia); border-radius: var(--r-karta);
    background: var(--karta); overflow: hidden; min-width: 0; }
.liczba { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; min-width: 0; box-shadow: 1px 0 0 var(--linia), 0 1px 0 var(--linia); }   /* 20 px wcięcia jak filtry E1 (GEIST-4) */
.liczba .et { font: var(--t-maly); color: var(--olow); }
.liczba-w { font: var(--t-liczba); font-variant-numeric: tabular-nums; color: var(--tekst); letter-spacing: -.02em; white-space: nowrap; }
.liczba-w.malo { font: var(--t-tekst); font-weight: 500; color: var(--olow); letter-spacing: 0; }
.liczba-pod { font: var(--t-maly); color: var(--olow); overflow-wrap: anywhere; }

/* liczby-filtry (ui/liczba.js liczbaFiltr — E1): liczba 32 px czarna (⛔ niebieska), klik = filtr listy, wybrany = kreska 2 px pod spodem */
.filtry-liczb { display: grid; grid-template-columns: repeat(var(--filtry-n, 4), minmax(0, 1fr)); border: 1px solid var(--linia); border-radius: var(--r-karta);
    background: var(--karta); overflow: hidden; min-width: 0; }
.filtr-liczba { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 14px 20px 16px;
    text-align: left; color: var(--tekst); cursor: pointer; transition: background .15s var(--ease); }
.filtr-liczba + .filtr-liczba { border-left: 1px solid var(--linia); }
.filtr-liczba:hover { background: var(--hover); }
.filtr-liczba:focus-visible { outline: 2px solid var(--akcja); outline-offset: -2px; }
.filtr-liczba[aria-pressed="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tekst); }
.filtr-et { max-width: 100%; font: var(--t-maly); color: var(--olow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtr-w { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; min-height: 40px; }
.filtr-n { font: var(--t-liczba-xl); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--tekst); }
.filtr-liczba.zero .filtr-n { color: var(--mute); }

/* ── lejek: paski o szerokości ∝ n względem 1. szczebla, jeden kolor; przejście % tylko przy n ≥ progu ── */
.lejek { display: flex; flex-direction: column; min-width: 0; }
.lejek-w { display: grid; grid-template-columns: minmax(150px, 220px) minmax(80px, 1fr) 88px minmax(120px, 170px); align-items: center;
    column-gap: 14px; row-gap: 6px; padding: 10px 16px; border-top: 1px solid var(--linia-miekka); min-width: 0;
    grid-template-areas: 'et pasek n przejscie'; }
.lejek-w:first-child { border-top: 0; }
.lejek-w.glowa { padding-top: 8px; padding-bottom: 8px; background: var(--karta); border-bottom: 1px solid var(--linia); font: var(--t-etykieta); color: var(--olow); }
.lejek-w.glowa > * { white-space: normal; overflow-wrap: anywhere; }
.lejek-et { grid-area: et; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--tekst); font: var(--t-tekst); font-weight: 500; }
.lejek-et > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lejek-nr { font: var(--t-etykieta); color: var(--mute); min-width: 14px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.lejek-pasek { grid-area: pasek; display: flex; height: 8px; border-radius: var(--r-chip); background: var(--pasmo); min-width: 0; }
.lejek-pasek i { display: block; height: 100%; width: var(--udzial, 0%); border-radius: var(--r-chip); background: var(--tekst); opacity: .78; }
.lejek-n { grid-area: n; font: var(--t-h3); font-variant-numeric: tabular-nums; color: var(--tekst); text-align: right; white-space: nowrap; }
.lejek-przejscie { grid-area: przejscie; font: var(--t-maly); color: var(--olow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lejek-przejscie b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tekst); }
.lejek-mob { display: none; }

/* ── słupki SVG: jeden kolor, linia limitu ciągła (UI-18), odczyt pod wykresem (bez dymków) ── */
.slupki-kontener { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 760px; margin: 0; }
.slupki-ramka { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.slupki { display: block; width: 100%; height: 161px; overflow: visible; color: var(--mute); }
.slupki .s { fill: var(--pasmo); }
.slupki .s.dzis { fill: var(--tekst); }
.slupki .s.aktywny { fill: var(--tekst); }
.slupki .limit { stroke: var(--olow); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.slupki .os { stroke: var(--linia); stroke-width: 1; vector-effect: non-scaling-stroke; }
.slupki-os { position: relative; height: 16px; }
.slupki-os span { position: absolute; top: 0; transform: translateX(-50%); font: var(--t-etykieta); font-weight: 400; color: var(--olow); white-space: nowrap; }
.slupki-os span.pocz { transform: none; }
.slupki-os span.kon { transform: translateX(-100%); }
.slupki .cel { fill: transparent; cursor: pointer; }
.slupki-odczyt { min-height: 18px; font: var(--t-maly); color: var(--tekst); font-variant-numeric: tabular-nums; }   /* odczyt wykresu = dane (GEIST-6, szary ≤ 40 %) */
.slupki-odczyt b { color: var(--tekst); font-weight: 500; }

/* ── gotowa treść AI = jedna akcja w miejscu kliku, reszta w „⋯” (UI-15) ── */
.tresc-ai { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border: 1px solid var(--linia); border-radius: var(--r-karta); background: var(--karta); }
.tresc-ai-tekst { white-space: pre-line; color: var(--tekst); font: var(--t-tekst); }
.tresc-ai-akcje { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

/* ── toast: 6 s, z „Cofnij” 20 s; błąd = kropka, nie czerwone tło ── */
.toasty { position: fixed; left: 50%; bottom: 20px; z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; min-height: 40px; max-width: 100%; padding: 6px 8px 6px 14px; border-radius: var(--r-pole);
    background: var(--tekst); color: var(--karta); box-shadow: var(--cien-arkusz); font: var(--t-tekst); pointer-events: auto; animation: tr-wejscie .15s ease-out both; }
.toast .kr { --kol: var(--mute); }
.toast.blad .kr { --kol: var(--blad); }
.toast-tekst { padding-right: 6px; overflow-wrap: anywhere; }
.toast-akcja { min-height: var(--dotyk); padding: 0 10px; border-radius: var(--r-chip); color: var(--karta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.toast-akcja:hover { opacity: .8; }

/* ── powłoka: menu 240 px + górny pasek 56 px; telefon = pasek 52 px + menu w arkuszu ── */
.tr-app { display: flex; min-height: 100dvh; }
.menu { position: sticky; top: 0; width: var(--menu-w); flex: 0 0 var(--menu-w); height: 100dvh; display: flex; flex-direction: column;
    background: var(--tlo); border-right: 1px solid var(--linia); z-index: 40; }
.menu-glowa { display: flex; align-items: center; gap: 8px; min-height: var(--gora-h); padding: 0 16px; border-bottom: 1px solid var(--linia); flex: none; }
.znak { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: var(--r-pole);
    background: var(--tekst); color: var(--karta); font: var(--t-maly); font-weight: 600; letter-spacing: -.02em; }
/* marka w jednej linii: „Trop · organizacja” (organizacja szara i ucięta, pełna nazwa w title) */
.menu-nazwa { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; white-space: nowrap; }
.menu-nazwa b { font: var(--t-h3); letter-spacing: -.02em; color: var(--tekst); flex: none; }
.menu-nazwa span { font: var(--t-maly); color: var(--olow); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.menu-nav { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.menu-poz { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--r-pole); color: var(--olow);
    font: var(--t-tekst); text-decoration: none; white-space: nowrap; }
.menu-poz:hover { background: var(--hover); color: var(--tekst); }
.menu-poz.on { background: var(--pasmo); color: var(--tekst); font-weight: 500; }
.menu-poz .ico { color: currentColor; }
.menu-poz .licz { margin-left: auto; }
/* stopka menu: jedna linia „awatar + adres”, klik otwiera .zr-pop z motywem i wylogowaniem (UI-3) */
.menu-dol { display: flex; flex-direction: column; padding: 8px 12px 12px; border-top: 1px solid var(--linia); flex: none; }
.konto { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 8px; border-radius: var(--r-pole); min-width: 0;
    color: var(--olow); text-align: left; }
.konto:hover, .konto[aria-expanded="true"] { background: var(--hover); color: var(--tekst); }
.konto-ini { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
    background: var(--pasmo); color: var(--tekst); font: var(--t-etykieta); font-weight: 600; }
.konto-mail { font: var(--t-maly); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.konto .ico { width: 14px; height: 14px; }
.menu-tlo { position: fixed; inset: 0; z-index: 39; background: var(--scrim); }
.tr-glowna { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* nagłówek ekranu (UI-16): okruszek, h1, po prawej najwyżej 1 znacznik i 1 akcja */
.gora { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; height: var(--gora-h); padding: 0 var(--o-strona);
    background: var(--tlo); border-bottom: 1px solid var(--linia); min-width: 0; }
.gora h1 { font: var(--t-h1); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.okruszek { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--olow); font: var(--t-tekst); text-decoration: none; white-space: nowrap; }
.okruszek::after { content: '/'; color: var(--mute); }
.okruszek:hover { color: var(--tekst); }
/* podpis nagłówka starych ekranów (string w ustawTytul) — Sans, szary; etap 2 przenosi go do znacznika albo pod ⓘ */
.gora-pod { margin-left: 4px; font: var(--t-maly); color: var(--olow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gora-prawo { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
.hamburger { display: none; }
.demo-etykieta { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-chip); background: var(--arkusz);
    font: var(--t-etykieta); color: var(--olow); white-space: nowrap; }
/* szerokość z rozciągnięcia w .tr-glowna (bez width:100% — ta znosiła margin-right szuflady ≥ 1200 px i lista chowała się pod szufladą) */
.tr-tresc { display: flex; flex-direction: column; gap: var(--o4); max-width: var(--tresc-max); padding: var(--o5) var(--o-strona) var(--o7); min-width: 0; }
.tr-start { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 24px 16px; }
.tr-start .karta { width: 100%; max-width: 460px; }

/* ── logowanie (/login) ── */
.login { display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; }
.login-karta { width: 100%; max-width: 400px; margin: auto; padding: 28px 24px 24px; background: var(--karta); border: 1px solid var(--linia);
    border-radius: var(--r-karta); box-shadow: var(--cien-arkusz); animation: tr-wejscie .25s ease-out both; }
.lockup { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.login-karta h1 { font: var(--t-h1); margin-bottom: 4px; }
.login-karta .lead { color: var(--olow); font: var(--t-maly); margin-bottom: 20px; }
.g-blok { display: flex; justify-content: center; min-height: 44px; transition: opacity .2s var(--ease); }
.g-blok.czeka { visibility: hidden; opacity: 0; min-height: 0; max-height: 0; overflow: hidden; }
.g-mount { width: 100%; display: flex; justify-content: center; }
.lub { display: flex; align-items: center; gap: 12px; margin: 16px 0; font: var(--t-etykieta); color: var(--olow); }
.lub::before, .lub::after { content: ''; flex: 1; height: 1px; background: var(--linia); }
.lub.czeka { display: none; }
.kroki { display: flex; flex-direction: column; gap: 14px; }
.kod6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.kod6 input { min-height: 44px; padding: 8px 0; text-align: center; font: var(--t-h1); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.login-rzad { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.login-stopka { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--linia); font: var(--t-maly); color: var(--olow); }

/* ── wzornik (www/wzornik.html) ── */
.wz { display: flex; flex-direction: column; gap: var(--o6); width: 100%; max-width: var(--tresc-max); margin: 0 auto; padding: 24px 32px 80px; min-width: 0; }
.wz-glowa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--linia); }
.wz-glowa .lockup { margin: 0; }
.wz-glowa .gora-prawo { flex-wrap: wrap; }
.wz-sek { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wz-sek > p { max-width: 760px; color: var(--olow); font: var(--t-maly); }
.wz-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.wz-demo.kolumna { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }   /* column + wrap = wysokość liczona przy min-content (Chrome) */
.probki { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.probka { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--linia); border-radius: var(--r-pole); background: var(--karta); min-width: 0; }
.probka .kr { width: 12px; height: 12px; border: 1px solid var(--linia-pole); }
.probka-txt { display: flex; flex-direction: column; min-width: 0; }
.probka-txt b { font: var(--t-maly); font-weight: 600; color: var(--tekst); }
.probka-txt span { font: var(--t-etykieta); font-weight: 400; color: var(--olow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.probka .k-tlo { --kol: var(--tlo); } .probka .k-karta { --kol: var(--karta); } .probka .k-tekst { --kol: var(--tekst); }
.probka .k-olow { --kol: var(--olow); } .probka .k-linia { --kol: var(--linia-pole); } .probka .k-akcja { --kol: var(--akcja); }
.probka .k-ai { --kol: var(--ai); } .probka .k-blad { --kol: var(--blad); }
.probka.zrobione .kr { --kol: var(--zrobione); }
.typo { display: flex; flex-direction: column; gap: 8px; }

/* ── pasek liczb (ui/wyniki.js — E5 wyniki od startu): liczba Sans tabular, słowo pod nią, podpis szary; wariant „lejkowy” = strzałki ──
   Kolor tylko w tekście (ton czeka = niebieski), tło neutralne. Na telefonie dwie kolumny, bez strzałek. */
.pasek-liczb { display: flex; flex-direction: column; min-width: 0; }
.pl-glowa { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-height: 40px; padding: 12px 16px 0; min-width: 0; }
.pl-glowa h2 { font: var(--t-h2); white-space: nowrap; }
.pl-glowa .pod { font: var(--t-maly); color: var(--olow); min-width: 0; overflow-wrap: anywhere; }
.pl-prawo { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pl-lista { list-style: none; margin: 0; padding: 12px 16px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px 20px; min-width: 0; }
.pl-lista.lejkowy > li { position: relative; }
.pl-lista.lejkowy > li + li::before { content: '→'; position: absolute; left: -16px; top: 6px; font: var(--t-maly); color: var(--mute); }
.pl-poz { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-poz .pl-n { font: var(--t-liczba); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--tekst); white-space: nowrap; }
.pl-poz .pl-et { font: var(--t-maly); color: var(--tekst); overflow-wrap: anywhere; }
.pl-poz .pl-pod { font: var(--t-maly); color: var(--olow); overflow-wrap: anywhere; }
.pl-poz.olow .pl-n { color: var(--olow); }
.pl-poz.czeka .pl-n { color: var(--akcja-tekst); }
.pl-poz.osobno { padding-left: 16px; border-left: 1px solid var(--linia); }
.pl-lista.lejkowy > li.osobno::before { display: none; }

/* ── telefon i wąskie okna ── */
@media (max-width: 1199.98px) {
    .lejek-w { grid-template-columns: minmax(130px, 180px) minmax(60px, 1fr) 72px minmax(110px, 150px); column-gap: 12px; }
}
@media (max-width: 720px) {
    .slupki-os span.waska { display: none; }
    .pl-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-lista.lejkowy > li + li::before { display: none; }
    .menu { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; flex-basis: 280px; transform: translateX(-100%); visibility: hidden;
        transition: transform .2s var(--ease), visibility .2s; z-index: 50; }
    .tr-app.menu-otwarte .menu { transform: none; visibility: visible; box-shadow: var(--cien-arkusz); }
    .hamburger { display: inline-flex; }
    .gora { height: 52px; padding: 0 12px; gap: 8px; }
    .gora-pod { display: none; }
    .okruszek { display: none; }
    .tr-tresc { padding: 16px 16px var(--o7); gap: 12px; }
    .tabela .tab-wrap { display: none; }
    .tabela .kafle { display: flex; }
    .szukaj { max-width: none; flex-basis: 100%; }
    .licznik { margin-left: 0; }
    .szuflada { width: 100vw; border-left: 0; }
    .sz-glowa, .sz-tresc, .sz-akcje { padding-left: 16px; padding-right: 16px; }
    .okno-tlo { padding: 0; align-items: stretch; }
    .okno, .okno.szeroki { max-width: none; max-height: none; height: 100dvh; border-radius: 0; border: 0; }
    .okno-tresc { flex: 1 1 auto; padding: 16px; }
    .okno-stopka { position: sticky; bottom: 0; background: var(--karta); padding: 12px 16px; }
    .siatka-2 { grid-template-columns: 1fr; }
    .liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .liczba { padding: 12px 16px; }
    .filtry-liczb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filtr-liczba { padding: 12px 16px; }
    .filtr-liczba:nth-child(odd) { border-left: 0; }
    .filtr-liczba:nth-child(n + 3) { border-top: 1px solid var(--linia); }
    /* ≤ 3 liczby: jeden rząd także na telefonie (bez pustej komórki w siatce 2 × 2) */
    .filtry-liczb.malo { grid-template-columns: repeat(var(--filtry-n), minmax(0, 1fr)); }
    .filtry-liczb.malo .filtr-liczba { border-top: 0; padding: 12px; }
    .filtry-liczb.malo .filtr-liczba + .filtr-liczba { border-left: 1px solid var(--linia); }
    .filtr-n { font: var(--t-liczba); }
    .filtr-w { min-height: 32px; }
    .lejek-w { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'et n' 'pasek pasek' 'przejscie przejscie'; padding: 12px 16px; }
    .lejek-w.glowa { display: none; }
    .lejek-mob { display: inline; margin-right: 4px; font: var(--t-maly); color: var(--olow); }
    .lejek-start { visibility: hidden; }
    .w-link { max-width: 200px; }
    .wz { padding: 16px 16px 72px; gap: var(--o5); }
    .toasty { bottom: 16px; }
    .pole input, .pole textarea, .szukaj input { font-size: var(--ts-h2); }
    .zr-pop.szeroki { width: auto; }
}