/*
 * APLIKACJA DEKARZA - styl.
 *
 * PISANY POD TELEFON I POD SLONCE NA DACHU. Stad: mocny kontrast, duze
 * liczby, przyciski co najmniej 48 px wysokosci i nic, co wymaga celowania.
 * Na szerszym ekranie tresc dostaje maksymalna szerokosc zamiast rozlewac sie
 * na cala szerokosc monitora - dluga linia tekstu czyta sie zle niezaleznie od
 * tego, na czym.
 *
 * TRYB CIEMNY WYLACZNIE Z PRZELACZNIKA - patrz blok nizej. Ten akapit mowil
 * przedtem cos odwrotnego ("dziedziczony z telefonu, dekarz nie ma tu
 * przelacznika") i zostal po poprzedniej wersji stylu. Komentarz, ktory
 * przeczy kodowi dwadziescia linii dalej, jest gorszy niz jego brak.
 */

/*
 * TRYB DZIENNY JEST DOMYSLNY - ZAWSZE, niezaleznie od ustawienia telefonu.
 *
 * Wczesniej styl szedl za @media (prefers-color-scheme: dark), wiec telefon
 * ustawiony na noc pokazywal ciemna aplikacje, a czlowiek nie mial jak tego
 * zmienic. Teraz jasny jest podstawa, a ciemny wlacza sie WYLACZNIE na wyrazne
 * zyczenie - przelacznikiem w pasku, ktory zapamietuje wybor w przegladarce.
 *
 * Dlatego nie ma tu juz zadnego @media od schematu kolorow: brak wpisu znaczy
 * jasno, i to jest cala regula.
 */

/*
 * PALETA WZIETA Z PANELU ENIGMY (crm-pdf-test/assets/style.css) - te same
 * wartosci, tylko pod nazwami uzywanymi w tej aplikacji. Dekarz widuje oba
 * ekrany tego samego dnia i maja wygladac na jedno narzedzie, nie na dwa.
 *
 *   --tlo    = Enigma --bg          --ramka = Enigma --border
 *   --karta  = Enigma --card-bg     --marka = Enigma --brand-red
 *   --tekst  = Enigma --text        --plus  = Enigma --ok-text
 *   --slaby  = Enigma --muted       --minus = Enigma --error-text
 *
 * Wczesniej marka byla granatowa (#1a4f8a) - to kolor, ktory w Enigmie pelni
 * role AKCENTU (--akcent), a nie znaku firmowego. Stad wrazenie dwoch roznych
 * marek. Granat zostaje wylacznie tam, gdzie i w Enigmie: w blokach
 * informacyjnych (--info-*).
 */
:root {
    color-scheme: light;
    --tlo: #f4f5f7;
    --karta: #ffffff;
    --tekst: #232323;
    --slaby: #6b7280;
    --ramka: #e2e4e8;
    --marka: #c22e2f;
    --marka-tekst: #ffffff;
    --plus: #147a3f;
    --minus: #a11a1a;
    --uwaga-tlo: #fff8e6;
    --uwaga-tekst: #6b5300;
    --info-tlo: #eef3fa;
    --info-tekst: #1a4f8a;
}

/*
 * TRYB NOCNY - tylko po wybraniu przelacznikiem.
 *
 * Grafit, nie granat. Poprzednia wersja szla w mocny blekit (#10161c), przez co
 * caly ekran mial niebieski odcien i gryzl sie z marka. Tutaj tlo jest
 * neutralnie szare, a kolor firmowy rozjasniony do poziomu, na ktorym da sie
 * go przeczytac na ciemnym - ciemny granat na ciemnym grafitcie nie byl
 * czytelny.
 *
 * Kontrast liczony pod ekran w slabym swietle, nie pod zrzut ekranu: tekst
 * podstawowy jasny i spokojny, a nie czysto bialy, ktory na OLED-zie razi.
 */
:root[data-theme="dark"] {
    color-scheme: dark;
    --tlo: #26292f;
    --karta: #2f333b;
    --tekst: #e7e8ea;
    --slaby: #a5abb6;
    --ramka: #454a54;
    /* JEDYNE odstepstwo od Enigmy w tym pliku, i celowe. Enigma trzyma
       #c22e2f takze noca, bo uzywa czerwieni prawie wylacznie jako TLA
       przyciskow z bialym napisem. Tutaj --marka jest rowniez kolorem TEKSTU
       (ceny, liczby na kafelkach, odnosniki, aktywna zakladka) - a #c22e2f na
       tle #26292f ma kontrast ponizej czytelnosci. Rozjasniamy wiec dokladnie
       tak, jak sama Enigma robi to ze swoim akcentem (#1a4f8a -> #7fb3e8),
       zachowujac odcien marki. */
    --marka: #e8595a;
    --marka-tekst: #1a1a1a;
    --plus: #6fd08a;
    --minus: #ff8a8a;
    --uwaga-tlo: #4a3b12;
    --uwaga-tekst: #f0dca0;
    --info-tlo: #26313d;
    --info-tekst: #7fb3e8;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--tlo);
    color: var(--tekst);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    padding-bottom: env(safe-area-inset-bottom);
}

/* ------------------------------------------------------------ naglowek */
/*
 * PASEK BIALY, NIE CZERWONY.
 *
 * Wzorzec od wlasciciela ma gorny pasek bialy, z kolorowym logo po lewej
 * i garstka sterowania po prawej. Czerwony pasek na calej szerokosci
 * zabieral na telefonie pierwsze 56 px ekranu na sam kolor - a tresc
 * zaczyna sie dopiero pod nim.
 *
 * Pasek jest PRZYKLEJONY do gory: saldo to liczba, po ktora dekarz siega
 * najczesciej, i nie powinna znikac po przewinieciu katalogu nagrod.
 */
.ad-pasek {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--karta);
    color: var(--tekst);
    border-bottom: 1px solid var(--ramka);
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.ad-marka { display: flex; align-items: center; text-decoration: none; }
.ad-logo { height: 26px; width: auto; display: block; }
.ad-pasek-prawa { display: flex; align-items: center; gap: 10px; }

/* Saldo jako pigulka w kolorze marki - we wzorcu ta rola ma ikona karty
   w pasku. Liczba niesie wiecej niz ikona, wiec zostaje liczba. */
.ad-saldo {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-decoration: none;
    background: var(--marka);
    color: var(--marka-tekst);
    padding: 7px 13px;
    border-radius: 999px;
    font-size: .92rem;
}

/* --------------------------------------------------------------- menu */
/*
 * MENU JAKO ARKUSZ, OTWIERANY BEZ JAVASCRIPTU.
 *
 * Poprzednio bylo paskiem zakladek przewijanym w bok - piec pozycji nie
 * mieszczlo sie na telefonie, wiec czesc byla poza ekranem i nikt o niej
 * nie wiedzial. Wzorzec pokazuje arkusz na pelna szerokosc: ikona po
 * lewej, pelna nazwa obok, wszystko widoczne naraz.
 *
 * Stan trzyma ukryte pole wyboru, wiec arkusz dziala takze wtedy, gdy
 * skrypt sie nie zaladuje. `:checked ~` siega do rodzenstwa, stad pole
 * musi stac PRZED paskiem w kodzie strony.
 */
/* Schowane stylem, nie atrybutem `hidden` - patrz komentarz przy polu
   w _wspolne.php. Zostaje zogniskowalne, wiec menu otwiera sie takze
   z klawiatury (Tab, potem spacja). */
.ad-menu-przel { position: absolute; width: 1px; height: 1px; opacity: 0;
    margin: 0; }

.ad-hamburger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; box-sizing: border-box;
    cursor: pointer; border-radius: 10px;
}
.ad-hamburger span { display: block; height: 2.5px; border-radius: 2px;
    background: var(--marka); }
.ad-menu-przel:focus-visible + .ad-pasek .ad-hamburger { outline: 2px solid var(--marka); }

.ad-menu-zaslona {
    position: fixed; inset: 0; z-index: 35;
    background: rgba(0, 0, 0, .34);
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
}
.ad-menu-przel:checked ~ .ad-menu-zaslona { opacity: 1; pointer-events: auto; }

.ad-menu {
    position: fixed; z-index: 36;
    top: 0; right: 0;
    width: min(20rem, 86vw);
    height: 100%;
    overflow-y: auto;
    background: var(--karta);
    border-left: 1px solid var(--ramka);
    padding: calc(16px + env(safe-area-inset-top)) 0 24px;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .2s ease;
}
.ad-menu-przel:checked ~ .ad-menu { transform: translateX(0); }

.ad-menu-poz {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px;
    color: var(--tekst);
    text-decoration: none;
    font-weight: 600;
}
.ad-menu-ikona { flex: 0 0 auto; color: var(--slaby); }
.ad-menu-poz.aktywny { color: var(--marka); }
.ad-menu-poz.aktywny .ad-menu-ikona { color: var(--marka); }
.ad-menu-poz:hover { background: var(--tlo); }

.ad-menu-stopka { margin-top: auto; padding-top: 12px;
    border-top: 1px solid var(--ramka); }
.ad-menu-wyloguj { color: var(--slaby); }

/* Ruch wylaczony dla tych, ktorzy go sobie wylaczyli w systemie. */
@media (prefers-reduced-motion: reduce) {
    .ad-menu, .ad-menu-zaslona { transition: none; }
}

.ad-tresc { max-width: 46rem; margin: 0 auto; padding: 16px 14px 40px; }

/* -------------------------------------------------------------- karty */
.karta {
    background: var(--karta);
    border: 1px solid var(--ramka);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
}
.karta h2 { margin: 0 0 12px; font-size: 1.1rem; }
.pod, .drobne { color: var(--slaby); font-size: .92rem; }
.pusto { color: var(--slaby); }

.ad-saldo-duze { text-align: center; }
.liczba-duza {
    font-size: 2.9rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--marka);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- kafelki */
.kafle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kafel {
    background: var(--karta);
    border: 1px solid var(--ramka);
    border-radius: 14px;
    padding: 14px 10px;
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.kafel .liczba { font-size: 1.5rem; font-weight: 800; color: var(--marka); }
.kafel .lb { font-size: .78rem; color: var(--slaby); line-height: 1.25; }

/* ------------------------------------------------------------- tabele */
.ad-tabela { width: 100%; border-collapse: collapse; font-size: .93rem; }
.ad-tabela th, .ad-tabela td {
    padding: 9px 6px;
    border-bottom: 1px solid var(--ramka);
    text-align: left;
    vertical-align: top;
}
.ad-tabela th { color: var(--slaby); font-weight: 600; font-size: .85rem; }
.ad-tabela td.num, .ad-tabela th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ad-tabela .plus { color: var(--plus); font-weight: 700; }
.ad-tabela .minus { color: var(--minus); font-weight: 700; }

.ad-plakietka {
    display: inline-block;
    background: var(--info-tlo);
    color: var(--info-tekst);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: .78rem;
    font-weight: 700;
}

/* ------------------------------------------------------------ filtry */
.ad-filtry { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tab {
    padding: 9px 14px;
    border: 1px solid var(--ramka);
    border-radius: 999px;
    text-decoration: none;
    color: var(--slaby);
    font-size: .9rem;
    font-weight: 600;
}
.tab.aktywny { background: var(--marka); color: var(--marka-tekst); border-color: var(--marka); }

/* ------------------------------------------------------------ nagrody */
/*
 * KATALOG NAGROD - DWIE KOLUMNY NA TELEFONIE.
 *
 * Wzorzec pokazuje dwie karty obok siebie juz na telefonie: zdjecie na
 * gorze przez cala szerokosc karty, nazwa pod spodem na srodku i duzy
 * zaokraglony przycisk. Poprzednio minmax(15rem) dawal na telefonie
 * JEDNA kolumne, wiec katalog stu nagrod byl sto ekranow dlugi i nic sie
 * nie dalo porownac.
 *
 * 9,5rem to prog, przy ktorym dwie karty mieszcza sie na najwezszym
 * telefonie (320 px) razem z odstepami.
 */
.ad-nagrody { display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.ad-nagroda {
    display: flex; flex-direction: column;
    border: 1px solid var(--ramka); border-radius: 14px;
    overflow: hidden;
    background: var(--karta);
}
/* Stala proporcja kadru - zdjecia przychodza w roznych rozmiarach, a katalog
   ma wygladac jak katalog, nie jak sterta obrazkow o losowej wysokosci.
   Kadr siega krawedzi karty, tak jak we wzorcu. */
.ad-nagroda-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    display: block; background: var(--tlo); }
.ad-nagroda-tresc { padding: 12px 12px 14px; display: flex; flex-direction: column;
    gap: 6px; flex: 1 1 auto; text-align: center; }
.ad-nagroda h3 { margin: 0; font-size: .96rem; line-height: 1.35; }
/* Przycisk siada na DOLE karty, rowno we wszystkich kartach rzedu -
   inaczej dluzsza nazwa przesuwa go i siatka przestaje byc siatka. */
.ad-nagroda .btn, .ad-nagroda .ad-poza { margin-top: auto; }
.ad-nagroda .btn { width: 100%; box-sizing: border-box; border-radius: 999px;
    padding: 11px 14px; font-weight: 700; }
.ad-poza { color: var(--slaby); font-size: .84rem; }

/* Pole szukania nad katalogiem - we wzorcu stoi tuz pod naglowkiem. */
.ad-szukaj { display: flex; gap: 8px; margin: 0 0 14px; }
.ad-szukaj input { flex: 1 1 auto; min-width: 0; padding: 13px 16px;
    border: 1px solid var(--ramka); border-radius: 999px;
    background: var(--karta); color: var(--tekst); font-size: 1rem; }
.ad-szukaj input::placeholder { color: var(--slaby); }
.ad-cena { font-weight: 800; color: var(--marka); margin-bottom: 8px; }
.ad-cena-duza { font-size: 1.6rem; font-weight: 800; color: var(--marka); margin: 4px 0 10px; }
/* Poza zasiegiem: przygaszone, ale CZYTELNE - to jest zacheta, a nie zakaz. */
.ad-nagroda.poza-zasiegiem { opacity: .72; }

/* ------------------------------------------------------- pola i guziki */
.ad-pole { margin-bottom: 15px; }
.ad-pole label { display: block; font-weight: 600; margin-bottom: 5px; }
/* 16 px, bo mniejsza czcionka kaze Safari na iPhonie przyblizyc ekran przy
   dotknieciu pola - a wtedy formularz ucieka poza widok. */
.ad-pole input, .ad-pole textarea {
    width: 100%;
    padding: 13px 12px;
    font-size: 16px;
    font-family: inherit;
    color: var(--tekst);
    background: var(--karta);
    border: 1px solid var(--ramka);
    border-radius: 10px;
}
/* --- pole hasla z oczkiem --- */
.ad-haslo { position: relative; }
/* Miejsce na przycisk, zeby dlugie haslo nie wjezdzalo pod oczko. */
.ad-haslo input { padding-right: 50px; }
/* Edge rysuje w polu hasla SWOJE oczko. Dwa obok siebie wygladaja jak blad,
   a tamto i tak znika w chwili, gdy zmienimy type na "text" - czyli
   przestawaloby dzialac dokladnie wtedy, kiedy jest potrzebne. */
.ad-haslo input::-ms-reveal { display: none; }
.ad-oko {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--slaby);
    border-radius: 0 10px 10px 0;
    cursor: pointer;
}
.ad-oko:hover { color: var(--tekst); }
.ad-oko:focus-visible { outline: 2px solid var(--marka); outline-offset: -2px; }
.ad-oko[aria-pressed="true"] { color: var(--tekst); }
.ad-oko-kreska { display: none; }
.ad-oko[aria-pressed="true"] .ad-oko-kreska { display: inline; }

.ad-wybor {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--ramka);
    border-radius: 10px;
    margin-bottom: 8px;
    font-weight: 500;
}
.ad-wybor input { width: 22px; height: 22px; }

.btn {
    display: inline-block;
    min-height: 48px;
    padding: 13px 20px;
    background: var(--marka);
    color: var(--marka-tekst);
    border: 0;
    border-radius: 10px;
    font: 600 1rem/1.3 inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.btn-drugi { background: transparent; color: var(--marka); border: 1px solid var(--marka); }

/* ----------------------------------------------------------- komunikaty */
.alert { padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; }
.alert-info { background: var(--info-tlo); color: var(--info-tekst); }
.alert-uwaga { background: var(--uwaga-tlo); color: var(--uwaga-tekst); font-weight: 600; }

/* ----------------------------------------------------------- logowanie */
.ad-tlo-logowania { background: var(--tlo); }
.ad-logowanie { max-width: 22rem; margin: 8vh auto; padding: 0 18px; }
.ad-logowanie h1 { font-size: 1.4rem; margin: 0 0 4px; color: var(--marka); }
/* Logo na ekranach przed zalogowaniem (wlasciciel 2026-10-13). Na ciemnym
   motywie tlo jest ciemne, wiec idzie biala wersja znaku. */
/* Ekran logowania: formularz po lewej, zdjecie po prawej (od 900 px). */
.ad-start-foto { display: none; }
@media (min-width: 900px) {
    .ad-start-uklad { display: grid; grid-template-columns: minmax(360px, 1fr) 1fr; min-height: 100vh; }
    .ad-start-uklad .ad-logowanie { align-self: center; margin: 6vh auto; }
    .ad-start-foto { display: block; position: relative; overflow: hidden; }
    .ad-start-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
}
.ad-logo-start { height: 44px; width: auto; display: block; margin: 0 0 18px; }
.ad-logo-ciemny { display: none; }
:root[data-theme="dark"] .ad-logo-jasny { display: none; }
:root[data-theme="dark"] .ad-logo-ciemny { display: block; }

/* ------------------------------------------------------------- stopka */
.ad-stopka {
    max-width: 46rem;
    margin: 0 auto;
    padding: 20px 14px 34px;
    color: var(--slaby);
    font-size: .86rem;
    text-align: center;
}
.ad-stopka p { margin: 2px 0; }

a { color: var(--marka); }

/* ------------------------------------------------------- pasek podgladu */
/* Mocny, nieprzeoczalny - pracownik musi wiedziec, ze to nie jego konto.
   Przygaszony pasek w tym miejscu byloby prosba o pomylke. */
.ad-podglad-pasek {
    background: #7b1fa2;
    color: #fff;
    padding: 9px 14px;
    font-size: .88rem;
    text-align: center;
}

/* --------------------------------------------------- przelacznik trybu */
/*
 * Siedzi w pasku, bo tam czlowiek go szuka - i jest widoczny na kazdym
 * ekranie, a nie schowany w ustawieniach, do ktorych trzeba trafic.
 */
.ad-motyw {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    color: var(--marka-tekst);
    border-radius: 999px;
    padding: 5px 11px;
    font: 600 .82rem/1 inherit;
    cursor: pointer;
    white-space: nowrap;
}
.ad-motyw:hover { border-color: var(--marka-tekst); }
.ad-pasek-prawa { display: flex; align-items: center; gap: 10px; }

/* ---------------------------------------------- zaproszenie do instalacji */
/* Okno buduje pwa.js - tam siedzi cala logika i wyjasnienie, kiedy sie
   pokazuje. Tutaj tylko wyglad, w tej samej palecie co reszta aplikacji. */
.ad-instal-tlo {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    /* Od dolu, nie na srodku: kciuk siega dolu ekranu, a nie jego srodka. */
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
@media (min-width: 560px) { .ad-instal-tlo { align-items: center; } }

.ad-instal {
    background: var(--karta);
    color: var(--tekst);
    border-radius: 16px;
    padding: 22px 20px 18px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
.ad-instal-ikona { width: 76px; height: 76px; border-radius: 16px; display: block; margin: 0 auto 14px; }
.ad-instal h2 { margin: 0 0 8px; font-size: 1.15rem; line-height: 1.3; }
.ad-instal p { margin: 0; color: var(--slaby); font-size: .95rem; }

.ad-instal-kroki { margin: 14px 0 0; padding-left: 22px; text-align: left; font-size: .95rem; }
.ad-instal-kroki li { margin-bottom: 6px; }

.ad-instal-przyciski {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
/* Przyciski w jednej linii, ale przy dlugim napisie "Nie pokazuj ponownie"
   na waskim telefonie schodza pod siebie zamiast sciskac tekst do dwoch liter. */
.ad-instal-przyciski > * { flex: 1 1 150px; margin: 0; }
@media (max-width: 380px) { .ad-instal-przyciski { flex-direction: column-reverse; } }

/* =========================================================================
   POMOC - przycisk na kazdej stronie i lista wlasnych zgloszen
   =========================================================================
   Przycisk jest przyklejony do dolu okna, bo uczestnik siega po niego
   wtedy, gdy na czyms utknal - czyli w polowie ekranu, a nie po
   przewinieciu do stopki. Na waskim ekranie zwija sie do samej ikony,
   zeby nie zaslanial tresci. */
.ad-pomoc-guzik {
    position: fixed; right: 16px; bottom: 16px; z-index: 40;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 16px; border-radius: 999px;
    background: var(--marka); color: var(--marka-tekst); text-decoration: none;
    font-weight: 600; font-size: .92rem; line-height: 1;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.ad-pomoc-guzik:hover, .ad-pomoc-guzik:focus-visible { filter: brightness(1.08); }
.ad-pomoc-guzik svg { flex: 0 0 auto; }

@media (max-width: 560px) {
    /* Sam znak zapytania - podpis zabiera polowe szerokosci telefonu. */
    .ad-pomoc-guzik { padding: 13px; gap: 0; }
    .ad-pomoc-guzik span { position: absolute; width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.ad-lista-wiadomosci { list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 12px; }
.ad-lista-wiadomosci li { border: 1px solid var(--ramka);
    border-radius: 10px; padding: 12px 14px; }
.ad-wiad-glowa { display: flex; flex-wrap: wrap; gap: 8px;
    align-items: baseline; justify-content: space-between; }
.ad-wiad-tresc { margin: 6px 0; white-space: pre-line; }
.ad-wiad-stan { font-size: .74rem; font-weight: 700; padding: 2px 9px;
    border-radius: 999px; white-space: nowrap; }
/* Stany biora kolory z tokenow motywu, wiec czytaja sie tak samo
   w dzien i w nocy - bez osobnej regulki dla trybu ciemnego. */
.ad-wiad-stan.w-drodze { background: var(--uwaga-tlo); color: var(--uwaga-tekst); }
.ad-wiad-stan.doszla   { background: var(--info-tlo);  color: var(--info-tekst); }

/* ------------------------------------------------ formularz zgloszenia */
/* Pola na pelna szerokosc i wysokie na 48 px - te same zasady co reszta
   aplikacji: pisane pod rekawice i pod slonce, nie pod mysz. */
.ad-pomoc-form { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 10px; }
.ad-pomoc-form label { font-weight: 700; font-size: .92rem; margin-top: 10px; }
.ad-pomoc-form input[type=text],
.ad-pomoc-form textarea {
    width: 100%; box-sizing: border-box;
    padding: 13px 15px;
    border: 1px solid var(--ramka); border-radius: 12px;
    background: var(--karta); color: var(--tekst);
    font: inherit; font-size: 1rem;
}
.ad-pomoc-form textarea { resize: vertical; min-height: 7.5rem; line-height: 1.5; }
.ad-pomoc-form input::placeholder, .ad-pomoc-form textarea::placeholder { color: var(--slaby); }
.ad-pomoc-form .btn { margin-top: 14px; align-self: flex-start; }
.ad-pomoc-form label .drobne { font-weight: 400; }

/* ------------------------------------------------- strony do poczytania */
/* Naglowek dzialu w menu - oddziela rzeczy, ktore sie ROBI, od tych,
   ktore sie CZYTA. */
.ad-menu-dzial {
    padding: 16px 20px 6px;
    font-size: .74rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--slaby);
}
.ad-menu-strona { font-weight: 500; }
.ad-menu-strona span { font-size: .94rem; line-height: 1.35; }

/*
 * TRESC STRONY - TYPOGRAFIA POD DLUGI TEKST.
 *
 * Regulamin ma prawie dwanascie tysiecy znakow i czyta sie go na
 * telefonie. Stad wieksza interlinia niz w reszcie aplikacji i odstepy
 * miedzy akapitami - scisniety regulamin to regulamin nieprzeczytany.
 *
 * Tabele w tresci przewijaja sie WE WLASNYM pudelku. Szeroka tabela
 * w regulaminie potrafi rozepchnac cala strone w bok i wtedy nie da sie
 * przewijac pionowo bez ucieczki w prawo.
 */
.ad-artykul { line-height: 1.7; overflow-wrap: break-word; }
.ad-artykul > :first-child { margin-top: 0; }
.ad-artykul > :last-child { margin-bottom: 0; }
.ad-artykul p { margin: 0 0 1em; }
.ad-artykul h2, .ad-artykul h3, .ad-artykul h4 {
    margin: 1.6em 0 .5em; line-height: 1.3; text-wrap: balance;
}
.ad-artykul h2 { font-size: 1.16rem; }
.ad-artykul h3 { font-size: 1.05rem; }
.ad-artykul h4 { font-size: .98rem; }
.ad-artykul ul, .ad-artykul ol { margin: 0 0 1em; padding-left: 1.4em; }
.ad-artykul li { margin-bottom: .4em; }
.ad-artykul a { color: var(--marka); overflow-wrap: anywhere; }
.ad-artykul hr { border: 0; border-top: 1px solid var(--ramka); margin: 1.6em 0; }
.ad-artykul blockquote {
    margin: 1.2em 0; padding: 2px 0 2px 14px;
    border-left: 3px solid var(--ramka); color: var(--slaby);
}
.ad-artykul table { display: block; overflow-x: auto; border-collapse: collapse;
    width: 100%; margin: 0 0 1em; font-size: .92rem; }
.ad-artykul th, .ad-artykul td { border: 1px solid var(--ramka);
    padding: 7px 10px; text-align: left; vertical-align: top; }