` ma regułę modułu o wyższej specyficzności i dostaje własną korektę w §12. */ .dark :focus-visible { outline-color: var(--dw-accent); } .dw-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .dw-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--dw-surface); padding: var(--dw-r3) var(--dw-r4); border-radius: 0 0 var(--dw-radius) 0; } .dw-skip:focus { left: 0; } /* ── reklamy: miejsce zarezerwowane zawsze, więc CLS = 0 ──────────────────── */ .dw-ad { /* Wymiary per placement — świadomie w CSS, nie w atrybucie style: strict CSP blokuje style inline, a slot musi rezerwować miejsce, żeby CLS został zerem. */ --dw-ad-w: 300px; --dw-ad-h: 600px; position: relative; margin-inline: auto; width: min(100%, var(--dw-ad-w)); max-width: var(--dw-ad-w); } .dw-ad::before { content: ""; display: block; padding-top: calc(var(--dw-ad-h) / var(--dw-ad-w) * 100%); } .dw-ad > * { position: absolute; inset: 0; } .dw-ad__label { position: absolute; inset: auto auto 100% 0; margin: 0 0 2px; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--dw-text-soft); } .dw-ad__empty { background: transparent; } /* KREACJA W KSZTAŁCIE POLA (2026-09-15, polecenie właściciela): ten sam promień, kreska i cień co lista `.dw-rows` — baner był jedynym prostokątem z ostrymi rogami wśród kart. Kreacja ma sztywne piksele, więc NIE dostaje `border` (zjadłby 1 px kreacji z każdej strony albo rozepchnął skorupę ponad rezerwację). Promień przycina samą kreację, a kreska jest nakładką `::after` rysowaną do środka. Nakładka wyłącznie przy wstawionej kreacji: skorupa bez kreacji nie może stać się widocznym pustym prostokątem (§4a specyfikacji). Od ADR-0083 kreacja to NASZ odnośnik z obrazem (`a.dw-ad__frame > img`), nie ramka Revive. */ .dw-ad__frame { display: block; overflow: hidden; border: 0; width: 100%; height: 100%; border-radius: var(--dw-radius-lg); box-shadow: var(--dw-shadow); } .dw-ad__frame img { display: block; width: 100%; height: 100%; } /* Fokus jak reguła modułu `main#main a:focus-visible` (leki.css §12): w jasnym `--brand-500`, w ciemnym akcent. Akcent na tle strony w jasnym to 2,17 : 1 — poniżej 3 : 1 (WCAG 1.4.11, bramka `bin/a11y.mjs`, widoki z reklamą: pusty wynik i 404). */ .dw-ad__frame:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; } .dark .dw-ad__frame:focus-visible { outline-color: var(--dw-accent); } .dw-ad:has(> .dw-ad__frame)::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--dw-border); border-radius: var(--dw-radius-lg); } .dw-ad--top { --dw-ad-w: 750px; --dw-ad-h: 200px; margin-block: var(--dw-r4); } .dw-ad--right { --dw-ad-w: 300px; --dw-ad-h: 600px; } .dw-ad--phone { --dw-ad-w: 300px; --dw-ad-h: 250px; margin-block: var(--dw-r4); } /* Nowe pozycje (poza legacy `top`/`right`/`phone`, patrz DW_SLOT_KLASA_CSS w ads.php) dostają rozmiar po FORMACIE, nie po placemencie — 750×200 wraca np. w in-feedzie i w śródtekście karty leku, nie tylko w pasie górnym. */ .dw-ad--f750x200 { --dw-ad-w: 750px; --dw-ad-h: 200px; } .dw-ad--f300x250 { --dw-ad-w: 300px; --dw-ad-h: 250px; } .dw-ad--f300x600 { --dw-ad-w: 300px; --dw-ad-h: 600px; } /* ── STREFA W LIŚCIE REZERWUJE KSZTAŁT DOCELOWY, NIE DZISIEJSZY (ADR-0097) ─── Pas między lekami ma być NISKI I SZEROKI, bo takie kreacje mają w nim stanąć: 750×200 na komputerze, 300×250 na telefonie (zony 2755/2756 i 2753/2754, dziś bez kampanii). Dlatego pudełko NIE bierze rozmiaru z klasy formatu — ta niesie wymiar kreacji, którą dostaniemy DZIŚ (300×600, jedyny format z kampanią), a on dałby pas na 600 px wysokości. Reguła stoi PO klasach formatu, więc wygrywa przy tej samej sile selektora. Kreacja jest WPISANA w pas: bierze jego WYSOKOŚĆ, szerokość liczy sobie sama z proporcji i staje na środku. Pionowy baner jest przez to mały — to cena stanu roboczego, która znika sama w dniu, w którym Polpharma zabookuje format poziomy: 750×200 wypełni pudełko co do piksela. Bez tego `.dw-ad__frame img` (100% × 100%) ROZCIĄGNĄŁBY 300×600 na 750×200, czyli zniekształcił cudzą kreację. Kreacja niosąca własny kształt zabiera też ramkę: pole z promieniem i cieniem obejmuje sam baner, a nie całą zarezerwowaną powierzchnię — inaczej pas roboczy wyglądałby jak pusta karta z małym obrazkiem w środku. Stąd `::after` (kreska po obwodzie skorupy) tutaj milczy. Rezerwacja miejsca zostaje nietknięta, więc CLS dalej wynosi zero. */ .dw-ad--strona-infeed, .dw-ad--strona-infeed-2 { --dw-ad-w: 750px; --dw-ad-h: 200px; } /* `:has()` w selektorze, bo reguła kreski liczy się jako dwie klasy (`.dw-ad:has(> .dw-ad__frame)::after`) — bez tego wyjątek przegrywa siłą. */ .dw-ad--strona-infeed:has(> .dw-ad__frame)::after, .dw-ad--strona-infeed-2:has(> .dw-ad__frame)::after { content: none; } .dw-ad--strona-infeed .dw-ad__frame, .dw-ad--strona-infeed-2 .dw-ad__frame { left: 50%; right: auto; transform: translateX(-50%); width: auto; max-width: 100%; } .dw-ad--strona-infeed .dw-ad__frame img, .dw-ad--strona-infeed-2 .dw-ad__frame img { width: auto; height: 100%; max-width: 100%; object-fit: contain; } @media (max-width: 863.98px) { .dw-ad--strona-infeed, .dw-ad--strona-infeed-2 { --dw-ad-w: 300px; --dw-ad-h: 250px; } } /* Ramka Revive ma sztywne piksele i `scrolling='no'` — w zwężonym pudełku kreacja zostałaby PRZYCIĘTA, nie przeskalowana. Dlatego poniżej progu slot znika w całości. Progi muszą się zgadzać z DW_AD_SIZES w ads.php (`min` / `maks`), skąd jadą do przeglądarki w `data-min-szer` / `data-maks-szer` i tam czyta je drwidget.js. PROGI SĄ W PIKSELACH I MUSZĄ BYĆ W PIKSELACH. Do 2026-08-31 stały tu w `rem` (53.99 / 54 / 67.99) przy pikselach po stronie PHP i JS-a — a `rem` w media query rozwiązuje się względem POCZĄTKOWEJ czcionki przeglądarki, nie sztywnych 16 px (ustawienie `html { font-size }` tego NIE zmienia, MQ go nie widzą). Gość z czcionką 20 px — ustawienie dostępności, a odbiorcy to lekarze i farmaceuci — w oknie 900 px dostawał dokładnie te dwa błędy, przed którymi broni cała architektura §4a specyfikacji: • `top` — JS tworzył ramkę (900 ≥ 864), arkusz ją chował (53.99rem = 1079 px), czyli ramka ładowała się NIEWIDOCZNA: obce ciasteczko postawione, odsłona zalogowana Polpharmie, człowiek nie zobaczył nic; • `phone`— arkusz go nie chował, JS ramki nie robił: widoczny PUSTY prostokąt 300×250 z etykietą „Reklama". Kontrakt brzmi „ramka Revive ma sztywne piksele i się nie skaluje, tylko przycina", więc próg JEST wielkością w pikselach — niezależną od czcionki użytkownika. Liczenie `rem` po stronie JS-a byłoby odwrotnym rozwiązaniem tego samego problemu i wnosiłoby zależność od stanu, którego serwer nie zna. `.99`/`.98` to zwyczajowy włos poniżej progu: `max-width` domyka przedział, więc granica należy do slotu szerszego. */ @media (max-width: 863.98px) { .dw-ad--top { display: none; } } @media (min-width: 864px) { .dw-ad--phone { display: none; } } @media (max-width: 1087.98px) { .dw-ad--right { display: none; } } /* Te same trzy progi, ale po BREAKPOINCIE zamiast po placemencie — dla nowych pozycji (poza legacy trójką), które dzielą format z więcej niż jednym miejscem na stronie (750×200: pas górny ORAZ in-feed ORAZ śródtekst karty leku). Progi MUSZĄ liczbowo zgadzać się z `min`/`maks` w DW_SLOTY (app/includes/reklamy-zony.php) i z progami legacy wyżej — patrz uzasadnienie „PROGI SĄ W PIKSELACH" powyżej. */ @media (max-width: 863.98px) { .dw-ad--bp-desktop { display: none; } } @media (min-width: 864px) { .dw-ad--bp-tel { display: none; } } @media (max-width: 1087.98px) { .dw-ad--bp-rail { display: none; } } /* Próg 1152 px — rejestr trzynastu pozycji z briefu agencji (2026-09-04). Brief operuje 1152 px, arkusz miał do tej pory tylko 864 i 1088, więc pozycje o tym progu nie miały czym się chować: wariant wąski zostawał widoczny na desktopie jako pusty prostokąt 300x250 (zmierzone na /substancja/sulfacetamid-2086). */ @media (max-width: 1151.98px) { .dw-ad--bp-szeroki { display: none; } } @media (min-width: 1152px) { .dw-ad--bp-waski { display: none; } } /* Stał tu pasek zgody na reklamy i strona jej wycofania (`.dw-zgoda*`) — zdjęte z ADR-0083: reklama jedzie przez nasz serwer i nie zapisuje nic na urządzeniu, więc nie ma o co pytać. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ========================================================================== PORT MODUŁU leki.farm — warstwa skóry DrWidgeta. Wzorzec wysyła te reguły stylem inline w ; nasze CSP tego zabrania, więc mieszkają tutaj. Sekcja ładuje się PO regułach starego frontendu, dlatego typografia i tło obowiązują na obu (stary frontend zostaje do czasu weryfikacji portu — patrz plan, „Czego ten plan świadomie nie robi"). ========================================================================== */ /* Krój wzorca, self-hosted (CSP font-src 'self'). Krój zastępczy ma metryki dociągnięte do Outfit, więc podmiana po pobraniu nie przesuwa tekstu. */ @font-face { font-family: 'Outfit Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'), local('Roboto'); size-adjust: 99.23%; ascent-override: 100.77%; descent-override: 26.20%; line-gap-override: 0%; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/outfit/outfit-variable-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/outfit/outfit-variable-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } html, body { font-family: 'Outfit', 'Outfit Fallback', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } body { /* Wzorzec ma tu gradient z zielonkawym #e8f4ee (jego akcent). DrWidget bierze błękit #eef7fb — ten sam, który tabela palety podstawia pod turkus tła wzorca. */ background: linear-gradient(135deg, #f0f4f8 0%, #eef7fb 100%); margin: 0; min-height: 100dvh; color: var(--brand-700, #0a324a); font: normal 16px/1.6 'Outfit', 'Outfit Fallback', system-ui, sans-serif; } /* Jasny pasek wzorca USUNIĘTY: DrWidget ma pasek granatowy (patrz .dw-topnav niżej). Reguła `nav.sticky` (typ+klasa) biła `.dw-topnav` specyficznością i malowała pasek na biało wszędzie poza logo, które ma własne tło. */ h1 { font-weight: 800; letter-spacing: -0.02em; } /* ── stopka DrWidgeta ───────────────────────────────────────────────────────── Kolory zmierzone na żywym drwidget.pl (.footer-cont): tło #0f4769, górna krawędź 2px #d6461f. */ .dw-footer { margin-top: 2rem; background: var(--brand-500, #0f4769); border-top: 2px solid #d6461f; color: #fff; } .dw-footer a { color: #dbe9f2; text-decoration: none; } .dw-footer a:hover { color: #fff; text-decoration: underline; } /* Stopka jest granatowa w OBU motywach, więc w ciemnym wygląda tak samo jak w jasnym. Bez tych dwóch reguł `:root.dark a` (akcent, specyficzność wyższa od `.dw-footer a`) przemalowywał menu stopki na błękit — czytelny, ale inny niż podpis i przełącznik obok. */ :root.dark .dw-footer a { color: #dbe9f2; } :root.dark .dw-footer a:hover { color: #fff; } .dw-footer__sign { margin: 0; font-size: .9rem; color: #fff; font-weight: 600; } /* Pięć pozycji od 2026-09-15 (regulamin i prywatność) — na 390 px nie mieszczą się w wierszu, więc tor się łamie; odstęp wierszy trzyma cele dotyku osobno (WCAG 2.5.8). */ .dw-footer__nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .82rem; letter-spacing: .04em; } .dw-footer__nav a { display: inline-block; padding-block: .25rem; } /* Nota D-0: #dbe9f2 na #0f4769 = 8,6 : 1 — jak odnośniki stopki, bez przezroczystości. Szerokość z osi serwisu (sekcja „oś" niżej), jak kontener stopki nad nią. */ .dw-footer__legal { margin: 0 auto; padding: 0 1rem 1.5rem; font-size: .8rem; line-height: 1.5; color: #dbe9f2; } @media (min-width: 640px) { .dw-footer__legal { padding-inline: 1.5rem; } } .dw-footer__partners { display: flex; align-items: center; gap: 1.25rem; } .dw-footer__partners img { display: block; height: auto; } .dw-footer__partners a:hover img { opacity: .85; } @media (max-width: 640px) { .dw-footer__partners { justify-content: center; flex-wrap: wrap; } .dw-footer__nav { justify-content: center; } .dw-footer__sign { text-align: center; } .dw-footer__legal { text-align: center; } } /* ── przełącznik motywu w pasku nawigacji (ADR-0078; do 2026-09-15 w stopce) ── Trzy ikony w jednym torze, przy prawej krawędzi paska. Pasek jest granatowy w OBU motywach (`--brand-700`), więc barwy są te same co zakładek — #dbe9f2 i biel: ikona #dbe9f2 na #0a324a 10,8 : 1 wybrany: `--brand-700` na bieli 13,39 : 1 (wypełnienie, nie sam kolor ikony) pierścień fokusu biel na #0a324a 13,39 : 1 Pomarańcz zostaje wyłącznie przy zakładce bieżącej strony — druga pomarańczowa płytka w pasku mówiłaby „tu jesteś" o czymś, co nie jest miejscem. Wybór pokazuje biel, jak wybrany przycisk w dawnej stopce, a czytnik dostaje `aria-pressed`. OPAKOWANIE MA STAŁĄ SZEROKOŚĆ = szerokość toru (3 × 36 + 2 × 2 odstępu + 2 × 2 wcięcia + 2 × 1 obrysu = 118 px). Grupa odsłania się po pierwszym malowaniu (skrypt z `defer`), a zakładki są dosunięte do prawej — bez tej rezerwy przeskoczyłyby o 118 px w lewo. Poniżej 1024 px zakładek nie ma, więc opakowanie samo dosuwa się do prawej. */ .dw-topnav__motyw { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; width: 118px; margin-left: auto; } @media (min-width: 1024px) { .dw-topnav__motyw { margin-left: 12px; } } .dw-motyw { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 2px; border: 1px solid rgb(255 255 255 / .28); border-radius: var(--dw-radius-sm); } /* `display: flex` wyżej ma tę samą specyficzność co `[hidden]` w arkuszach bazowych i przychodzi po nich — bez tej linii grupa byłaby widoczna także bez JavaScriptu. */ .dw-motyw[hidden] { display: none; } .dw-motyw__opcja { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; padding: 0; background: transparent; border: 0; border-radius: 4px; cursor: pointer; transition: background-color .125s ease-in-out, color .125s ease-in-out; } .dw-motyw__opcja svg { width: 18px; height: 18px; } /* Kolory przez `.dw-topnav` i `!important`: pasek maluje każdy `button` na #dbe9f2 z `!important` (wyżej w arkuszu), więc wybrany potrzebuje wyższej specyficzności. */ .dw-topnav .dw-motyw__opcja:hover { background: rgb(255 255 255 / .12); } .dw-topnav .dw-motyw__opcja[aria-pressed="true"], .dw-topnav .dw-motyw__opcja[aria-pressed="true"]:hover { color: var(--brand-700, #0a324a) !important; background: #fff; } /* Pierścień NA ZEWNĄTRZ segmentu: reguła paska rysuje biel do środka (`outline-offset: -3px`), a na białym wypełnieniu wybranej opcji taki pierścień byłby niewidoczny. */ .dw-topnav .dw-motyw__opcja:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; } /* Oznaczenie pozycji z polityki w listach zamienników USUNIĘTE 2026-09-02 (ADR-0055) — razem z regułą `.dw-zam-tag--promo` (pomarańcz CTA na białym tekście). */ /* Strony informacyjne renderują się w shellu wzorca, a ten stoi na preflight Tailwinda: bez tych reguł nagłówki i listy wyglądają jak zwykłe akapity. */ .dw-prose-static > * + * { margin-top: .85rem; } .dw-prose-static h2 { font-size: 1.15rem; font-weight: 700; color: var(--brand-700, #0a324a); margin-top: 1.6rem; } /* Granat marki jako PISMO w ciemnym motywie schodzi na jasne (ADR-0061): #0a324a na karcie #131f33 dawał 1,23 : 1 na każdym nagłówku stron informacyjnych. Token pisma: 14,22 : 1. */ :root.dark .dw-prose-static h2 { color: var(--dw-text); } .dw-prose-static ul { list-style: disc; padding-left: 1.4rem; } .dw-prose-static ol { list-style: decimal; padding-left: 1.4rem; } .dw-prose-static li + li { margin-top: .35rem; } .dw-prose-static a { color: var(--brand-600, #0d3d5a); } .dw-prose-static p { line-height: 1.7; } /* ── pasek nawigacji ────────────────────────────────────────────────────────── Logo DrWidgeta ma wtopione granatowe tło (znak jest bielą na granacie), więc na jasnym pasku wzorca wyglądało jak naklejka. Pasek dostaje ten sam granat co logo — zmierzony w jego rogach: #0a3349, czyli marka #0a324a — i pomarańczową krawędź dolną z żywego drwidget.pl (`.header-cont`: 2px #d6461f). Zawartość paska renderuje moduł (leki_v3_topnav_desktop), więc jej kolory nadpisujemy TUTAJ, zakresem `.dw-topnav`, zamiast dotykać plików kopii. */ .dw-topnav { background: var(--brand-700, #0a324a); border-bottom: 2px solid #d6461f; } /* Wysokość paska = 65 px oryginału (`.header-cont { height: 65px }`), z czego 2 px bierze pomarańczowa krawędź — stąd 63 px na treść, dokładnie tyle, ile miały zakładki (`ul.top-nav li a { height: 63px }`). Zmienną czyta nie tylko ten pasek: `--farm-nav-h` niesie offsety wszystkich przyklejonych elementów pod nim (leki.css: .leki-jumpnav, .leki-quickbar, scroll-margin kotwic), więc wysokość zmienia się w JEDNYM miejscu, a nie w dziesięciu. Telefon i tablet zostają na 44/56 px wzorca — tam pasek jest w trybie szuflady, poza geometrią oryginału. */ @media (min-width: 1024px) { :root { --farm-nav-h: 63px; } } /* Znak marki. Oryginał pokazuje go w natywnych 240×63, czyli na PEŁNĄ wysokość paska (`.logo-drwidget`); nasz plik to ten sam znak w 2× (480×126, ta sama proporcja 3,81). Na 63 px nie schodzimy z tego samego powodu, co przy stopniu pisma zakładek: w pasku stoi jeszcze pole szukania (176 px), którego oryginał nie miał, i przy 1280 px zabrakłoby 22 px. 48 px to największy znak, który mieści się na KAŻDEJ szerokości desktopu (przy 1024 px zostaje 55 px zapasu). Niżej pasek ma 44/56 px i znak schodzi razem z nim. */ .dw-topnav .dw-logo { height: 36px; } @media (min-width: 640px) { .dw-topnav .dw-logo { height: 40px; } } @media (min-width: 1024px) { .dw-topnav .dw-logo { height: 48px; } } /* Napisy i ikony w pasku: jasne na granacie. `!important` jest tu konieczne — klasy Tailwinda z buildu (`text-slate-600`) mają tę samą specyficzność, a ładują się wcześniej, więc bez tego wygrywałyby kolejnością źródła (LESSONS §3). */ .dw-topnav a, .dw-topnav button, .dw-topnav .farm-nav-pill { color: #dbe9f2 !important; } .dw-topnav .farm-nav-pill:hover, .dw-topnav button:hover { color: #fff !important; } .dw-topnav svg { color: inherit; } /* ── zakładki menu ──────────────────────────────────────────────────────────── Oryginał nie ma pigułek: pozycja menu to ZAKŁADKA pełnej wysokości paska, która na hover zalewa się pomarańczem (`ul.top-nav li a:hover { background:#c8411e }`), a pozycja bieżąca stoi zalana na stałe (`.active-menu-link`). Kwadratowe rogi, zero odstępu między zakładkami — sąsiadują bokami, więc pomarańcz jednej dotyka następnej. Klasa `.farm-nav-pill` zostaje w markupie (asercje testów, wspólny renderer wzorca), ale nie jest już pigułką. ODSTĘPSTWO, świadome: oryginał daje zakładkom 16 px i padding 15 px. My mamy w pasku pole wyszukiwania, którego oryginał nie miał (176 px), więc na wspólnej z treścią osi 1152 px szóstka pozycji przy 16 px po prostu nie mieści się — wychodzi ~1145 px przy 1104 px do dyspozycji. Zostaje 14 px, czyli rozmiar reszty naszej skórki; struktura (pełna wysokość, zalanie pomarańczem, kwadrat) jest z oryginału i to ona niesie jego charakter. */ .dw-topnav .leki-navlinks { gap: 0; height: 100%; align-items: stretch; } .dw-topnav .leki-navlinks > * { height: 100%; } .dw-topnav .farm-nav-pill { height: 100%; padding: 0 10px; border-radius: 0; font-size: .875rem; transition: background-color .125s ease-in-out, color .125s ease-in-out; } .dw-topnav .farm-nav-pill:hover, .dw-topnav .farm-nav-pill:focus-visible, .dw-topnav .farm-nav-pill[aria-expanded="true"] { background: #c8411e; color: #fff !important; } .dw-topnav .farm-nav-pill.is-active, .dw-topnav .farm-nav-pill.is-active:hover { background: #c8411e; color: #fff !important; border-radius: 0; } /* KOTWICA PASKA (ADR-0016). Zakładki stoją przy PRAWEJ krawędzi, jak `ul.top-nav { float: right }` w oryginale — i nic już przy nich nie stoi. Pole szukania i lupa, które kiedyś tu były, przesuwały całe menu o swoją szerokość za każdym razem, gdy znikały na home (192 px przy 1280–1440 px, 44 px przy 1024 px). Szukanie zeszło do kolumny treści, tam gdzie ma je oryginał, więc dosunięcie nie ma już od czego zależeć: wiersz ma dwoje dzieci, znak i zakładki. */ .dw-topnav .dw-navgroup { margin-left: auto; } /* Pierścień focusu w pasku: biały, do ŚRODKA zakładki. Globalny pierścień to błękit marki `--dw-accent` z odstępem 2 px na zewnątrz (§ początek arkusza) — na granacie paska zderza się z pomarańczem stanu aktywnego, a przy zakładce pełnej wysokości wychodzi poza pasek i obcina go jego krawędź. Ta sama zasada, co przy ciemnych panelach (`.dw-panel :focus-visible`). */ .dw-topnav a:focus-visible, .dw-topnav button:focus-visible { outline: 3px solid #fff; outline-offset: -3px; border-radius: 0; } /* ── rozwijane panele ───────────────────────────────────────────────────────── USUNIĘTE 2026-08-25 (ADR-0041). Stała tu skórka panelu rozwijanego w pasku — granat #0a324a, kwadratowe rogi, kolumna 195 px, pomarańczowy hover — czyli przedłużenie paska z oryginalnego drwidget.pl. Zakres miała `.dw-topnav .leki-navlinks [x-show]`, a jedynym takim panelem było menu „Narzędzia i kalkulatory": „Aplikacje mobilne" straciły rozwijanie w ADR-0025, kalkulatory wyszły z serwisu w ADR-0041. Pasek jest dziś płaski, więc reguły nie miały już czego malować. Panel podpowiedzi wyszukiwarki (`.leki-sugg`) też siedzi w `[x-show]`, ale stoi POZA `.leki-navlinks` — nigdy nie był w zakresie tych reguł i zostaje biały. */ /* Arkusz szukania (`.leki-searchsheet`) wraca do roli WYŁĄCZNIE mobilnej — rządzi nim samo `leki.css` (`display:none` od 1024 px). Stała tu reguła przywracająca go w paśmie 1024–1279 px, bo otwierała go tamtejsza lupa; lupy nie ma, więc nie ma czego przywracać. Na telefonie arkusz otwiera zakładka „Szukaj" z dolnego paska. */ /* Nagłówek szuflady mobilnej — ten sam granat co pasek, bo znak jest bielą na przezroczystości i na białym tle zostawałaby z niego sama ikona. */ .dw-drawer-head { background: var(--brand-700, #0a324a); } .dw-drawer-head button { color: #dbe9f2; } .dw-drawer-head button:hover { color: #fff; background: rgb(255 255 255 / .12); } /* ========================================================================== KOMPONENTY LISTY WYNIKÓW — struktura oryginalnego DrWidgeta, język styles.md. Odtwarzają kolejność i gęstość informacji ze starego serwisu (panel wyszukiwania z zakładkami → pasek „Znaleziono wyników" → poziomy wiersz produktu → kafle refundacji → wiersz przypisów), ale wyłącznie na tokenach marki: skala `--brand-*` (app/config/palette.php → drwidget-palette.css), CTA `--dw-cta-*`, neutralne `--dw-*`. Żadnego hexa poza tokenami; każdy kolor ma wariant ciemny. Znaczenie NIGDY nie stoi na samym kolorze: kategoria wydania niesie skrót („OTC", „Rx"), a kafel refundacji — poziom odpłatności. Kolor tylko przyspiesza skanowanie wiersza. Dlatego wyróżnienie pozycji objętych polityką zniknęło 2026-09-02 w całości (ADR-0055): skoro podpis miał zejść, krecha nie mogła zostać. Referencja struktury: analysis/golden-master/drwidget-home-2026-08-11.html (`.search-header`, `.found-items`, `.search-list-row`, `.price-cont`, `.chpl-row`) oraz analysis/reference-assets/drwidget-live.css. DECISIONS: ADR-0012. ========================================================================== */ :root { /* Krawędź marki — zmierzona na żywym drwidget.pl (`.header-cont`, `.footer-cont`). Do tej pory powtarzana literałem w trzech miejscach; teraz jeden token. */ --dw-edge: #d6461f; /* Prawy rail = DOKŁADNIE szerokość kreacji 300×600 (ADR-0006). Nie skalujemy. */ --dw-rail: 300px; --dw-rail-gap: 1.5rem; /* Kategorie wydania. Odcienie wzięte z oryginału (`.drug-status-*`: OTC #39b536, Rx #a22eb7, Lz #00aeef, SD #e4ae25, WM #321bb7) i przeliczone na parę tło/tekst spełniającą WCAG 2.2 AA — oryginał stawiał biały tekst na tych kolorach, co dawało kontrast poniżej 3:1. Test palety pilnuje progu 4,5. */ --dw-cat-fg: #34495a; --dw-cat-bg: #e8edf1; --dw-cat-otc-fg: #14603f; --dw-cat-otc-bg: #dcf1e2; --dw-cat-rx-fg: #6b2183; --dw-cat-rx-bg: #f1e3f7; --dw-cat-lz-fg: #0b5771; --dw-cat-lz-bg: #d9eef8; --dw-cat-sd-fg: #6f4a00; --dw-cat-sd-bg: #faedd2; --dw-cat-wm-fg: #2c2c85; --dw-cat-wm-bg: #e2e4f8; --dw-cat-off-fg: #8c1d1d; --dw-cat-off-bg: #fbe3e3; } :root.dark { --dw-cat-fg: #cbd9e4; --dw-cat-bg: #21394a; --dw-cat-otc-fg: #8fe3b6; --dw-cat-otc-bg: #17402f; --dw-cat-rx-fg: #e2b6f2; --dw-cat-rx-bg: #3c2145; --dw-cat-lz-fg: #8fd8f2; --dw-cat-lz-bg: #123a4c; --dw-cat-sd-fg: #f2ce8a; --dw-cat-sd-bg: #45340f; --dw-cat-wm-fg: #b9bcf2; --dw-cat-wm-bg: #262a52; --dw-cat-off-fg: #f5b3b3; --dw-cat-off-bg: #4a1d1d; } /* ── 0. OŚ SERWISU: 1200 px oryginału na KAŻDEJ stronie ─────────────────────── Jedna szerokość dla całego DrWidgeta — paska nawigacji, kolumny treści i stopki. ŹRÓDŁO LICZBY — oryginał, nie gust (analysis/reference-assets/drwidget-live.css): .row-cont 1200px ← pasek nagłówka .row-container 1200px ← treść Oba pojemniki stoją w żywym drwidget.pl na TEJ SAMEJ osi i na każdej stronie: sprawdzone w golden masterze zarówno dla strony startowej (var/drwidget-ref/home.html), jak i dla karty produktu (var/drwidget-ref/produkt.html) — ten sam `.row-cont` w nagłówku, ten sam `.row-container` w treści. HISTORIA: oś 1200 px weszła 2026-08-19 (ADR-0029) WYŁĄCZNIE na stronę główną, klasą `dw-wide` na `` — zlecenie zabraniało wtedy ruszać pozostałych widoków. Skutek zobaczył właściciel 2026-08-20: „topnav jest różnej wielkości na różnych stronach". Belka na `/` miała 1248 px, a na `/lek/acard` 1152 px, więc logo i wyszukiwarka przeskakiwały o 48 px przy każdym przejściu z listy w kartę leku. Klasa zniknęła — oś jest dziś jedna dla wszystkich 20 widoków (ADR-0031). POJEMNIKÓW JEST CZTERY, NIE TRZY. Wąski pas szukania (`.dw-searchbar__in`, ADR-0026) jest PRZYKLEJONY do belki i wisi tuż pod nią, więc jego wcięcie widać jako uskok w tej samej pionowej krawędzi: przy osi 1200 px na belce, a `max-w-6xl` w pasie, pole szukania stało 48 px do środka od logo nad nim (pomiar 1440 px: belka x=96, pas x=144). Dlatego pas czyta tę samą regułę, co pozostałe trzy pojemniki. ADR-0013 (pasek, treść i stopka na jednej osi) dostaje przez to mocniejszą postać: nie da się już rozjechać tych pojemników na żadnej stronie, bo wszystkie czytają jedną regułę i jeden token. Wzór szerokości czyta się od środka: `min(…)` zostawia gutter 2,5 rem, żeby przy 1280 px strona nie kleiła się do krawędzi ekranu, a `max(72rem, …)` gwarantuje, że poniżej progu wzorca (1152 px) nic się NIE ZWĘŻA wobec stanu sprzed zmiany. Strony tekstowe zwężają miarę wiersza SAME, wewnątrz osi (`max-w-3xl` w karcie `static-page.php`), więc szersza oś nie rozciąga akapitów do 1200 px. */ :root { --dw-os: 1200px; /* oryginał: .row-cont / .row-container */ --dw-os-pad: 3rem; /* px-6 kontenera z obu stron (2 × 1,5 rem) */ } .farm-topnav-row, .dw-searchbar__in, main#main > .max-w-6xl, .dw-footer > .max-w-6xl, .dw-footer__legal { max-width: max(72rem, min(calc(var(--dw-os) + var(--dw-os-pad)), 100% - 2.5rem)); } /* ── 1. SearchPanel ─────────────────────────────────────────────────────────── Oryginał: `.search-menu` (dwie zakładki) + `.search-inp-drug` (granatowy panel #0f4769 z dolną krawędzią 2px #d6461f, białe pole, pomarańczowy „Szukaj"). Tutaj: te same role, ale zakładka aktywna łączy się z panelem WSPÓLNYM KOLOREM zamiast doklejanego trójkąta (`:after` z border-hackiem), a rogi biorą promień z rytmu marki. */ /* PANEL JEDZIE Z TREŚCIĄ (2026-08-19, zdejmuje dokowanie z ADR-0016 pkt 3-4). Przyklejony pod paskiem panel PRZESKAKIWAŁ w oczach przy przewijaniu: w chwili zetknięcia z belką zmieniał postać (znikały zakładki, wychodziła etykieta, pas rozlewał się na szerokość ekranu), a zmiana postaci to zmiana wysokości bloku — więc treść pod nim drgała. Właściciel ocenił to jako usterkę: szukajka ma stać zwyczajnie na górze strony i odjeżdżać razem z nią. Zostaje zwykły blok w normalnym przepływie — bez `sticky`, bez `top`, bez stanu `.is-docked` i bez `assets/js/dw-search-dock.js` (plik usunięty). Bez `position` panel nie tworzy też własnego kontekstu układania, więc podpowiedzi (`.dw-panel__suggest`, z-index 60) kładą się na treści pod polem. */ .dw-panel { margin-bottom: var(--dw-r4); } .dw-panel__tabs { display: flex; flex-wrap: wrap; gap: 2px; } .dw-panel__tab { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem 1.125rem; font-size: .9375rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; color: #cfe0ea; background: var(--brand-700); border-radius: var(--dw-radius) var(--dw-radius) 0 0; } .dw-panel__tab:hover, .dw-panel__tab:focus-visible { color: #fff; background: var(--brand-600); } /* Aktywna zakładka NIE różni się samym kolorem: niesie `aria-current="page"`, pogrubienie i podkreślenie krawędzią marki od spodu panelu. */ .dw-panel__tab[aria-current="page"] { color: #fff; font-weight: 700; background: var(--brand-500); cursor: default; } .dw-panel__body { background: var(--brand-500); border-bottom: 3px solid var(--dw-edge); border-radius: 0 var(--dw-radius) var(--dw-radius) var(--dw-radius); padding: var(--dw-r4); } .dw-panel__label { display: block; margin-bottom: .375rem; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: #d5e6f0; } .dw-panel__form { position: relative; display: flex; align-items: stretch; } .dw-panel__input { flex: 1 1 auto; min-width: 0; height: 48px; padding: .5rem .875rem; font: inherit; font-size: 1rem; /* 16px — iOS nie zoomuje przy focusie */ color: var(--dw-text); background: #fff; border: 1px solid rgb(255 255 255 / .6); border-right: 0; border-radius: var(--dw-radius-sm) 0 0 var(--dw-radius-sm); } .dw-panel__input::placeholder { color: var(--dw-text-soft); } .dw-panel__submit { flex: 0 0 auto; min-height: 48px; min-width: 5.5rem; padding: 0 1.125rem; font: inherit; font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer; background: var(--dw-cta); border: 0; border-radius: 0 var(--dw-radius-sm) var(--dw-radius-sm) 0; } .dw-panel__submit:hover { background: var(--dw-cta-hover); } /* Panel jest ciemny — domyślny błękitny obrys focusu zostaje, ale dokładamy biały prześwit, żeby był widoczny także na pomarańczowym przycisku. */ /* Panel jest ciemny, więc pierścień fokusu MUSI świecić bielą — i musi wygrać z regułą modułu `main#main a:focus-visible` (leki-components.css §12), która rysuje 2 px w `--brand-500`, czyli granat na granacie: na zakładkach panelu (tło `--brand-700`) taki pierścień jest praktycznie niewidoczny. Poprzednia wersja (`.dw-panel :focus-visible`, specyficzność 0-1-0) przegrywała z (1-0-2) modułu i nie robiła nic — sprawdzone tabulatorem: zakładki i pole dostawały granatową obwódkę. Podnosimy specyficzność tą samą drogą, którą moduł rozwiązał identyczny problem dla stopki, zamiast sięgać po `!important`. */ main#main .dw-panel a:focus-visible, main#main .dw-panel button:focus-visible, main#main .dw-panel input:focus-visible, .dw-panel :focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* Podpowiedzi wyszukiwarki (Alpine `lekiSearch`) wiszą pod polem. */ .dw-panel__suggest { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 60; } .dw-panel__status { margin: .5rem 0 0; font-size: .8125rem; color: #d5e6f0; } .dw-panel__status--error { color: #ffd7cc; } @media (max-width: 29.99rem) { .dw-panel__tab { flex: 1 1 0; min-width: 0; padding-inline: .5rem; font-size: .875rem; } .dw-panel__form { flex-wrap: wrap; gap: .5rem; } .dw-panel__input { flex: 1 1 100%; border-right: 1px solid rgb(255 255 255 / .6); border-radius: var(--dw-radius-sm); } .dw-panel__submit { flex: 1 1 100%; border-radius: var(--dw-radius-sm); } .dw-panel__suggest { position: static; margin-top: .5rem; } } /* ── 1b. Wąski pas szukania sklejony z belką ────────────────────────────────── ADR-0026. Zlecenie właściciela brzmiało: „strona leku nie musi mieć wyszukiwarki, poza główną stroną przyklej ją na stałe do topnav, pod nim tuż". NA STAŁE — i to jest tu wymaganie techniczne, nie ozdobne. Poprzednie dokowanie (ADR-0016 pkt 3) było STANEM: panel jechał z treścią, a przy zetknięciu z belką przełączał się w inną postać — gubił zakładki, odsłaniał etykietę, rozlewał się na szerokość ekranu. Zmiana postaci to zmiana wysokości bloku w normalnym przepływie, więc treść pod nim drgała i ADR-0023 dokowanie zdjął. Pas jest przyklejony OD PIERWSZEJ KLATKI i nie ma drugiej postaci, do której mógłby przeskoczyć. `top` = wysokość belki PLUS 2 px jej pomarańczowej krawędzi (`.dw-topnav` `border-bottom`). Bez tych 2 px pas wchodzi pod krawędź i zjada ją przy przewijaniu. z-index 40: NIŻEJ niż belka (50) i niż szuflada mobilna (100), WYŻEJ niż treść. Podpowiedzi (`.dw-panel__suggest`, z-index 60) są w kontekście układania pasa, więc kładą się na treści, a nie na belce. Pas jest dzieckiem ``, nie `

` — patrz komentarz w `core/layout.php`. */ .dw-searchbar { position: sticky; top: calc(var(--farm-nav-h, 56px) + 2px); z-index: 40; background: var(--brand-500); box-shadow: 0 2px 8px rgb(10 50 74 / .22); } .dw-searchbar__in { padding-block: .5rem; } /* 8 + 44 + 8 = 60 px, patrz --dw-dock-h */ /* `relative` niesie pozycjonowanie podpowiedzi (`.dw-panel__suggest`, sekcja 1). */ .dw-searchbar__form { position: relative; display: flex; align-items: stretch; } .dw-searchbar__input { flex: 1 1 auto; min-width: 0; height: 44px; padding: .375rem .875rem; font: inherit; font-size: 1rem; /* 16px — iOS nie zoomuje przy focusie */ color: var(--dw-text); background: #fff; border: 1px solid rgb(255 255 255 / .6); border-right: 0; border-radius: var(--dw-radius-sm) 0 0 var(--dw-radius-sm); } .dw-searchbar__input::placeholder { color: var(--dw-text-soft); } /* POLA SZUKANIA W MOTYWIE CIEMNYM — ciemne, nie białe (ADR-0069). Oba pola (panel strony głównej, sekcja 1, i ten pas) mają w jasnym motywie białe tło wpisane literałem, a pismo z tokenu — w ciemnym token jaśniał do #e8eff4 i wpisany tekst wychodził 1,16 : 1, czyli niewidoczny. Wybór ciemnego pola zamiast „białe zostaje, pismo ciemne": białe pole świeciło na granatowym panelu jak jedyna jasna plama ekranu, a aplikacja mobilna w ciemnym motywie też ma pole ciemne z pismem `tekst` i podpowiedzią `tekstSlaby`. Zmierzone na tych tokenach: wpisany tekst --dw-text #e8eff4 na --dw-bg #0a1b26 15,10 : 1 podpowiedź --dw-text-soft #a9bdc9 na #0a1b26 9,03 : 1 obrys #a9bdc9 na panelu --brand-500 #0f4769 5,09 : 1 (1.4.11 ≥ 3) Obrys jest tu konieczny, nie ozdobny: samo tło pola (#0a1b26) odcina się od panelu tylko na 1,8 : 1. Grubości krawędzi zostają z reguł bazowych (bez prawej przy przycisku), więc geometria pola jest ta sama w obu motywach. */ :root.dark .dw-panel__input, :root.dark .dw-searchbar__input { color: var(--dw-text); background: var(--dw-bg); border-color: var(--dw-text-soft); } .dw-searchbar__submit { flex: 0 0 auto; height: 44px; min-width: 5.5rem; padding: 0 1.125rem; font: inherit; font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer; background: var(--dw-cta); border: 0; border-radius: 0 var(--dw-radius-sm) var(--dw-radius-sm) 0; } .dw-searchbar__submit:hover { background: var(--dw-cta-hover); } /* Pas jest granatowy, więc pierścień fokusu świeci bielą. Reguła modułu `main#main a:focus-visible` (leki-components.css §12) tu NIE sięga — pas stoi poza `

` — więc wystarczy sama klasa, bez podnoszenia specyficzności. */ .dw-searchbar :focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* Pas zostaje JEDNYM WIERSZEM na każdej szerokości — także na telefonie, gdzie właściciel wybrał przyklejenie (2026-08-19). Panel z zakładkami łamie się poniżej 30 rem na dwa wiersze; pas nie może, bo drugi wiersz to 44 px zjedzone z ekranu telefonu na stałe. Miejsce oddaje przycisk, nie pole. */ @media (max-width: 29.99rem) { .dw-searchbar__submit { min-width: 0; padding: 0 .75rem; } } /* Kotwice pod przyklejonym pasem. `--dw-dock-h` niesie jego wysokość i jest zerem, gdy pasa nie ma (strona główna nie dostaje klasy `dw-dock`) — dzięki temu offsety liczą się jednym wzorem na obu rodzajach stron. Reguły bazowe siedzą w leki.css (§ kotwice) i mają niższą specyficzność, więc kolejność arkuszy nie ma tu znaczenia. */ :root { --dw-dock-h: 0px; } .dw-dock { --dw-dock-h: 60px; } .dw-dock .leki-section { scroll-margin-top: calc(var(--farm-nav-h, 56px) + var(--dw-dock-h) + 3.5rem); } .dw-dock .leki-card [id], .dw-dock .leki-aside [id] { scroll-margin-top: calc(var(--farm-nav-h, 72px) + var(--dw-dock-h) + 1.5rem); } /* ── 2. ResultsSummary ──────────────────────────────────────────────────────── Oryginał: `.found-items` — „Znaleziono wyników: N" po lewej, „Strona X z Y" po prawej, cienka linia pod spodem. Bez osobnej karty (nie jest treścią). */ .dw-resbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; padding: .625rem 0; margin-bottom: .25rem; border-bottom: 1px solid var(--dw-border); font-size: .9375rem; color: var(--dw-text-soft); } .dw-resbar p { margin-block: 0; } .dw-resbar__pages { margin-left: auto; white-space: nowrap; } .dw-resbar b, .dw-resbar strong { color: var(--brand-500); font-weight: 700; font-variant-numeric: tabular-nums; } :root.dark .dw-resbar b, :root.dark .dw-resbar strong { color: var(--dw-accent); } /* Duże liczby na wąskim ekranie: pasek łamie się na dwa wiersze zamiast rozpychać stronę (oryginał puszczał `float: right` i przy 21 590 wynikach uciekał poza kadr). */ @media (max-width: 29.99rem) { .dw-resbar__pages { margin-left: 0; flex-basis: 100%; } } /* ── 3. ProductResultRow ────────────────────────────────────────────────────── Oryginał: `.search-list-row` — tabela trzech komórek (tytuł | ceny | firmy) rozdzielona włoskową linią, bez własnej karty. Tutaj grid z nazwanymi obszarami, więc kolejność DOM-u zostaje logiczna (nazwa → status → opis → refundacja → producent), a układ zmienia się bez duplikowania treści. ≥56rem "name cat co" / "meta refund co" (trzy kolumny; od 68rem obok raila) ≥40rem "name cat" / "meta refund" / "co" (dwa poziomy — tablet pionowo) <40rem wszystko w pionie w kolejności czytania (telefon) */ /* LISTA JEST JEDNYM POLEM (2026-08-14, ADR-0020). Oryginał trzymał wiersze na gołym tle strony i tak było tu do dziś — ale reszta serwisu (moduły pod listą, rail, `/baza`, karty produktu) mieszka w białych kartach `card-static`, więc lista odstawała od wszystkiego dookoła. Kartę dostaje LISTA, nie wiersz: pięćdziesiąt osobnych kart z odstępami wydłużyłoby stronę o ~900 px i rozbiło rytm, który jest sednem listy rejestrowej. Wiersze zostają rozdzielone włoskową linią wewnątrz pola. Powierzchnia jest wspólna dla `/`, `/szukaj`, `/kategoria/*`, `/icd/*` i `/nowe-rejestracje` — decyzja właściciela z 2026-08-14: jeden wygląd listy wszędzie. Dlatego reguła stoi w sekcji 3 (komponent), a nie w sekcji 11 (`.dw-home`). Kształt bierzemy z `card-static` modułu (promień 1 rem, cienka ramka, miękki cień), ale w TOKENACH DrWidgeta — inaczej tryb ciemny rozjechałby się z resztą skóry. */ .dw-rows { list-style: none; margin: 0; padding: 0; background: var(--dw-surface); border: 1px solid var(--dw-border); border-radius: var(--dw-radius-lg); box-shadow: var(--dw-shadow); /* Kreski wierszy i pionowa krecha pozycji promowanej są prostokątne — bez tego wychodziłyby poza zaokrąglone rogi pola. Wewnątrz wiersza nie ma niczego pozycjonowanego absolutnie, więc nie ma czego przyciąć za dużo. */ overflow: hidden; } .dw-row { padding: .875rem var(--dw-r4); border-bottom: 1px solid var(--dw-border); } .dw-row:first-child { padding-top: 1rem; } /* Ostatni wiersz nie rysuje kreski: w polu robiłaby drugą ramkę tuż nad dolną krawędzią karty (2 px zamiast 1). */ .dw-rows > .dw-row:last-child { border-bottom: 0; } /* Telefon: 16 px marginesu z każdej strony zjada 32 px z 358 px kolumny, a nazwy leków się nie skracają (`overflow-wrap: anywhere`) — węższe pole oznaczałoby więcej łamanych nazw w każdym z 50 wierszy. */ @media (max-width: 39.99rem) { .dw-row { padding-left: var(--dw-r3); padding-right: var(--dw-r3); } } /* ── STREFA REKLAMOWA W LIŚCIE: pas poziomy między lekami (ADR-0097) ───────── Wstawka in-feed jest POWIERZCHNIĄ, nie wierszem bez nazwy: bierze całą szerokość pola, własne tło z `--dw-surface-2` (więc tryb ciemny idzie za tokenem, jak reszta skóry) i oddycha pionowo bardziej niż wiersz leku. Bez tego reklama czytała się jak lek, któremu nie wczytała się treść. PAS JEST POZIOMY, KREACJA W NIM BYWA PIONOWA. Polpharma ma dziś kampanie wyłącznie w formacie 300×600 (zony 25 i 48), więc w środku stoi wąski baner wyśrodkowany — stan roboczy, nie docelowy. Wymiar rezerwuje `.dw-ad` po klasie formatu, więc gdy dojdzie 750×200, pas wypełni się bez ruszania tej reguły i bez skoku układu (CLS). */ .dw-row--reklama { padding-block: var(--dw-r4); background: var(--dw-surface-2); } .dw-row__main { display: grid; gap: .375rem .875rem; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name cat" "meta meta" "refund refund" "co co"; align-items: start; } .dw-row__name { grid-area: name; min-width: 0; } .dw-row__cat { grid-area: cat; display: flex; flex-wrap: wrap; gap: .25rem; justify-content: flex-end; } .dw-row__meta { grid-area: meta; min-width: 0; } .dw-row__refund { grid-area: refund; min-width: 0; } .dw-row__co { grid-area: co; min-width: 0; } @media (min-width: 40rem) { .dw-row__main { grid-template-columns: minmax(0, 1fr) minmax(0, auto); grid-template-areas: "name cat" "meta refund" "co co"; } .dw-row__refund { justify-self: end; } } /* Trzecia kolumna wchodzi ZANIM pojawi się rail (56rem = 896 px). Bez tego iPad poziomo i laptop 1024 px dostawały układ dwupoziomowy rozciągnięty na całą szerokość: kafle refundacji uciekały 600 px od opisu, do którego należą. */ @media (min-width: 56rem) { .dw-row__main { grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(8rem, 11.5rem); grid-template-areas: "name cat co" "meta refund co"; column-gap: 1.25rem; } .dw-row__co { grid-row: 1 / span 2; text-align: right; } .dw-row__cat { justify-content: flex-start; } .dw-reimb { justify-content: flex-start; } } /* Nazwa produktu ma najwyższy priorytet w wierszu — jedyny element w rozmiarze nagłówkowym. `overflow-wrap` zamiast `truncate`: nazwy leków bywają sześciowyrazowe, a ucięta nazwa leku to realny błąd, nie kosmetyka. */ .dw-row__title { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; } @media (min-width: 68rem) { .dw-row__title { font-size: 1.1875rem; } } .dw-row__title a { color: var(--brand-700); text-decoration: none; overflow-wrap: anywhere; } .dw-row__title a:hover { color: var(--dw-cta-dark); text-decoration: underline; } .dw-row__title sup { font-size: .6em; } :root.dark .dw-row__title a { color: #e8eff4; } :root.dark .dw-row__title a:hover { color: var(--dw-accent); } /* Opis rejestrowy: postać · MOC · wielkość opakowania · droga podania. Moc wyróżniona jak w oryginale (`.drug-dose`: bold, kolor marki). */ .dw-row__meta { font-size: .875rem; color: var(--dw-text-soft); line-height: 1.45; } .dw-row__meta > * + *::before { content: "·"; margin: 0 .45em; opacity: .55; } .dw-row__dose { font-weight: 700; color: var(--brand-500); } :root.dark .dw-row__dose { color: var(--dw-accent); } /* Moc nie łamie się w środku. Przy kolumnie 302 px „Tabletki o przedłużonym uwalnianiu · 500 mg · 60 tabl." zawijało się MIĘDZY liczbą a jednostką („500" na końcu wiersza, „mg" na początku następnego) — dawka przeczytana z takiego wiersza jest dawką przeczytaną błędnie. REGUŁA OBOWIĄZUJE NA KAŻDEJ LIŚCIE OD 2026-09-16. Do tej pory miała zakres `.dw-home`, bo zlecenie z 2026-08-19 zawęziło zmiany wyglądu do strony głównej (ADR-0029, DEFERRED D-8.5) — a sam wpis w DEFERRED nazywał to „defektem klinicznym, nie kosmetycznym" i odnotowywał, że na pozostałych listach usterka ZOSTAJE. Zlecenie „napraw błędy frontendowe na mobilu" to zawężenie zdejmuje. Zmierzone przed zdjęciem zakresu (emulacja iOS, `.dw-row__dose` łamane na dwie linie): /szukaj?q=roztwor 320 px: 3 360 px: 3 390 px: 2 („13 mcg", „200 mg/g", „(0,5 mg + 0,25 mg)/ml", „100 I.R./ml lub 100 I.C./ml") /icd/A01 320 px: 2 360 px: 1 390 px: 1 („20 mg/mL", „500 mg + 500 mg") /kategoria/refundowane 390 px: 1 („400 mg") / 0 na każdej szerokości — bo tam reguła już była. To NIE jest zmiana wyglądu listy: `nowrap` nie przestawia ani nie przerysowuje niczego, tylko zabrania złamania WEWNĄTRZ dawki. Wiersz łamie się dalej, w kropkach rozdzielających. */ .dw-row__dose { white-space: nowrap; } /* ── Flaga PL przy nazwie leku (ADR-0024) ───────────────────────────────────── Znacznik grupy Polpharmy odtworzony ze starego drwidget.pl: „mala" w wierszu listy (przed postacią), „duza" w nagłówku karty leku. SVG jedzie bez atrybutów width/height, więc BEZ tych reguł rozlałby się na całą szerokość rodzica. Skaluje się z tekstem (`em`), bo stoi w zdaniu, a nie obok niego. */ .dw-flaga-pl { display: inline-block; width: .95em; height: auto; flex: none; vertical-align: -.1em; border-radius: 1px; color: var(--dw-text-soft); /* obrys rysuje się z currentColor */ } .dw-flaga-pl--duza { width: 1.5rem; margin-left: .12em; vertical-align: .06em; } /* Kropka-separator w `.dw-row__meta` należy się kolejnym POZYCJOM opisu, nie ikonie, która je poprzedza — oryginał miał tu spację, nie „·". */ .dw-row__meta > .dw-flaga-pl { margin-right: .1em; } .dw-row__meta > .dw-flaga-pl + *::before { content: none; margin: 0; } /* Prawa kolumna: substancja czynna (akcent CTA jak w oryginale — kursywa, ceglasty) i podmiot odpowiedzialny (neutralny). */ .dw-row__co { font-size: .8125rem; line-height: 1.4; } .dw-row__subst a { color: var(--dw-cta-dark); font-style: italic; text-decoration: none; } .dw-row__subst a:hover { color: var(--brand-500); text-decoration: underline; } .dw-row__maker { margin-top: .25rem; color: var(--dw-text-soft); } .dw-row__maker a { color: inherit; text-decoration: none; } .dw-row__maker a:hover { color: var(--brand-500); text-decoration: underline; } :root.dark .dw-row__subst a { color: #ff9d78; } :root.dark .dw-row__subst a:hover, :root.dark .dw-row__maker a:hover { color: var(--dw-accent); } /* WYRÓŻNIENIE POZYCJI Z POLITYKI USUNIĘTE 2026-09-02 (ADR-0055, decyzja właściciela). Stały tu dwie reguły: `.dw-row--promo` (krecha w kolorze CTA przy krawędzi pola) i `.dw-promo-tag` (podpis pod producentem). Poszły RAZEM, nie osobno: sam podpis właściciel polecił zdjąć, a krecha bez podpisu zostawiłaby znaczenie na samym kolorze — czego zabrania i nagłówek tego arkusza, i WCAG 1.4.1. Kolejność wierszy dalej ustala warstwa rankingu (app/includes/promotion.php), której ten komponent nie zna (ADR-0004) — po prostu nic już tego nie sygnalizuje w wierszu. */ /* ── 4. Badge kategorii / statusu ─────────────────────────────────────────── */ .dw-cat { display: inline-flex; align-items: center; gap: .25rem; min-height: 1.375rem; padding: .0625rem .5rem; font-size: .75rem; font-weight: 700; line-height: 1.3; white-space: nowrap; border-radius: 999px; background: var(--dw-cat-bg); color: var(--dw-cat-fg); } .dw-cat--otc { background: var(--dw-cat-otc-bg); color: var(--dw-cat-otc-fg); } .dw-cat--rx { background: var(--dw-cat-rx-bg); color: var(--dw-cat-rx-fg); } .dw-cat--lz { background: var(--dw-cat-lz-bg); color: var(--dw-cat-lz-fg); } .dw-cat--sd { background: var(--dw-cat-sd-bg); color: var(--dw-cat-sd-fg); } .dw-cat--wm { background: var(--dw-cat-wm-bg); color: var(--dw-cat-wm-fg); } .dw-cat--off { background: var(--dw-cat-off-bg); color: var(--dw-cat-off-fg); } /* ── 5. ReimbursementTiles ──────────────────────────────────────────────────── Oryginał: `.price-cont` — kwadraciki 55×55 px, poziom odpłatności u góry, kwota („12,65 zł" / „bezpł.") pod spodem, przypis w `^{`. Zostaje kształt
i kolejność; znika szary gradient bez kontrastu. */

.dw-reimb { display: flex; flex-wrap: wrap; gap: .375rem; }
@media (min-width: 40rem) { .dw-reimb { justify-content: flex-end; } }
@media (min-width: 68rem) { .dw-reimb { justify-content: flex-start; } }

.dw-reimb__tile {
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-width: 3.5rem; min-height: 3.25rem; padding: .25rem .5rem;
text-align: center; line-height: 1.2;
background: var(--dw-surface); color: var(--dw-text);
border: 1px solid var(--dw-border); border-radius: var(--dw-radius-sm);
}
.dw-reimb__lvl { font-size: .75rem; font-weight: 700; }
.dw-reimb__lvl sup { font-size: .65em; font-weight: 700; vertical-align: super; }
.dw-reimb__val { margin-top: .125rem; font-size: .8125rem; font-variant-numeric: tabular-nums; }
/* Cena pełna (100 %) — powierzchnia neutralna, bez akcentu. */
.dw-reimb__tile--full { background: var(--dw-surface-2); }
/* Odpłatność ulgowa — akcent marki. */
.dw-reimb__tile--part {
background: color-mix(in srgb, var(--brand-500) 8%, var(--dw-surface));
border-color: color-mix(in srgb, var(--brand-500) 28%, var(--dw-surface));
}
/* Bezpłatnie dla grupy pacjentów — najmocniejszy akcent marki. Znaczenie niesie
napis „bezpł." i etykieta grupy, nie kolor. */
.dw-reimb__tile--free {
background: color-mix(in srgb, var(--brand-500) 14%, var(--dw-surface));
border-color: color-mix(in srgb, var(--brand-500) 45%, var(--dw-surface));
color: var(--brand-700);
}
:root.dark .dw-reimb__tile--free { color: #cfe8f5; }
.dw-reimb__empty { font-size: .8125rem; color: var(--dw-text-soft); }

/* ── 6. Wiersz dodatkowy: wskazania refundacyjne, przypisy, ChPL ──────────────
Oryginał: `.chpl-row` pod główną tabelą wiersza. */

.dw-row__extra {
margin-top: .5rem; padding-top: .5rem;
border-top: 1px dashed var(--dw-border);
font-size: .8125rem; line-height: 1.55; color: var(--dw-text-soft);
}
/* Wariant zwarty (`slimExtra`) — lista bazy na stronie głównej, gdzie wiersz dodatkowy
ma KAŻDA pozycja (ChPL istnieje dla całego rejestru). Pięćdziesiąt kresek
przerywanych na stronę czytało się jak pięćdziesiąt osobnych kart. */
.dw-row__extra--slim { margin-top: .25rem; padding-top: 0; border-top: 0; }
/* …a odnośnik do ChPL schodzi z pogrubienia: powtórzony w każdym z 50 wierszy był
najmocniejszym akcentem na liście i konkurował z nazwą produktu, która ma tu
priorytet. Kolor zostaje (to odnośnik), waga i rozmiar schodzą o stopień. */
.dw-row__extra--slim .dw-chpl { font-weight: 500; font-size: .75rem; }
.dw-row__extra ol { margin: 0; padding-left: 1.5rem; list-style: decimal; }
.dw-row__extra li + li { margin-top: .25rem; }
.dw-row__extra a { color: var(--brand-500); }
:root.dark .dw-row__extra a { color: var(--dw-accent); }
.dw-chpl {
display: inline-flex; align-items: center; gap: .25rem;
min-height: 44px; padding: .25rem 0; /* dotyk: 44 px (styles.md §7) */
font-weight: 600; color: var(--dw-cta-dark); text-decoration: none;
}
.dw-chpl:hover { text-decoration: underline; }
:root.dark .dw-chpl { color: #ff9d78; }

/* ── Zwinięte wskazania refundacyjne (`collapseNotes`) ────────────────────────
Opt-in listy bazy: ``, czyli natywny akordeon —
przeglądarka sama zamyka poprzedni rekord przy otwarciu następnego. Stan stoi
w HTML-u od pierwszego bajtu, więc rozwijanie nie przeładowuje strony i nie
generuje CLS (lekcja z ADR-0012). Markup i uzasadnienie: results.php. */
.dw-refnotes summary::-webkit-details-marker { display: none; } /* Safari */
.dw-refnotes__sum {
display: inline-flex; flex-wrap: wrap; align-items: center; gap: .375rem;
min-height: 44px; padding: .25rem 0; /* dotyk: 44 px (styles.md §7) */
font-size: .8125rem; line-height: 1.4; color: var(--dw-text-soft);
list-style: none; cursor: pointer;
border-radius: var(--dw-radius-sm);
}
.dw-refnotes__sum:hover .dw-refnotes__cta { text-decoration: underline; }
.dw-refnotes__lead b { font-weight: 700; color: var(--dw-text); }
.dw-refnotes__sep { opacity: .55; }
.dw-refnotes__cta { font-weight: 600; color: var(--brand-500); }
/* Napis zmienia się w HTML-u (dwa ``), nie w `content` CSS-a — treść, którą
czyta czytnik ekranu, ma mieszkać w dokumencie. */
.dw-refnotes__cta--hide { display: none; }
.dw-refnotes[open] .dw-refnotes__cta--show { display: none; }
.dw-refnotes[open] .dw-refnotes__cta--hide { display: inline; }
.dw-refnotes__caret { flex: 0 0 auto; color: var(--brand-500); transition: transform .15s ease-in-out; }
.dw-refnotes[open] .dw-refnotes__caret { transform: rotate(180deg); }
.dw-refnotes__body { padding-bottom: .25rem; }
/* Pierścień fokusu rysujemy na ``, bo to ono jest celem tabulatora.
`main#main` w selektorze jest KONIECZNE: moduł ma w leki.css §12 regułę
`main#main summary:focus-visible` (specyficzność 1-0-2) z pierścieniem 2 px
w `--brand-500`, a arkusz modułu wchodzi do PO tym pliku. Bez podniesienia
specyficzności reguła niżej nie robi nic — sprawdzone tabulatorem: summary dostawało
granatowe 2 px zamiast błękitnych 3 px. Ta sama droga, którą skórka rozwiązała
identyczny problem dla panelu (sekcja 1) — bez `!important`. */
main#main .dw-refnotes summary:focus-visible,
.dw-refnotes summary:focus-visible {
outline: 3px solid var(--dw-accent); outline-offset: 2px;
}
:root.dark .dw-refnotes__cta,
:root.dark .dw-refnotes__caret { color: var(--dw-accent); }
:root.dark .dw-refnotes__lead b { color: var(--dw-text); }
@media (min-width: 68rem) { .dw-refnotes__sum { min-height: 30px; } }

/* Rozwijana lista wariantów rodziny — cel dotykowy 44 px na każdy wariant. */
.dw-row__variants { margin: .375rem 0 0; padding: 0; list-style: none; }
.dw-row__variants a {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: .25rem .75rem; min-height: 44px; padding: .375rem .25rem;
font-size: .875rem; text-decoration: none; color: var(--dw-text);
border-top: 1px solid var(--dw-border);
}
.dw-row__variants a:hover { color: var(--brand-500); background: var(--dw-surface-2); }
.dw-row__summary {
display: inline-flex; align-items: center; min-height: 44px;
font-size: .8125rem; font-weight: 600; color: var(--brand-500); cursor: pointer;
}
/* Powyżej progu raila stronę obsługuje mysz — cel schodzi do 28 px (WCAG 2.2 AA
wymaga 24 px; 44 px z HIG-a zostaje tam, gdzie realnie jest palec). */
@media (min-width: 68rem) {
.dw-chpl, .dw-row__summary { min-height: 28px; }
.dw-row__variants a { min-height: 34px; }
}
:root.dark .dw-row__summary { color: var(--dw-accent); }

/* ── 7. ResultsLayout — treść + prawy rail 300 px ─────────────────────────────
Rail pojawia się dokładnie tam, gdzie mieści się kreacja 300×600 bez skalowania
(68rem, przy domyślnej czcionce 16 px = 1088 px). To jest próg UKŁADU i jest
celowo w `rem`: kolumna z filtrami ma ustępować, gdy tekst rośnie. Próg SLOTU
(`.dw-ad--right`, wyżej) jest osobny i celowo w PIKSELACH, bo ramka Revive się
nie skaluje — przy powiększonej czcionce te dwie liczby się rozjeżdżają i tak
ma być: rail bez reklamy jest poprawny, reklama przycięta nie jest. Poniżej progu rail
wskakuje NAD wyniki (`order`), bo niesie wtedy wyłącznie zwinięte filtry —
slot reklamowy jest już ukryty, więc nic nie przeskakuje i CLS zostaje zerem. */

.dw-results { display: grid; gap: .75rem; align-items: start; }
.dw-results__main { min-width: 0; }
.dw-results__rail { min-width: 0; }
@media (max-width: 67.99rem) { .dw-results__rail { order: -1; } }
@media (min-width: 68rem) {
.dw-results { grid-template-columns: minmax(0, 1fr) var(--dw-rail); gap: var(--dw-rail-gap); }
.dw-results__rail { position: sticky; top: calc(var(--farm-nav-h, 56px) + 1rem); }
}
.dw-rail__block + .dw-rail__block { margin-top: var(--dw-r4); }

/* ── 8. Paginacja z numerami ──────────────────────────────────────────────────
Pasek nad listą obiecuje „Strona X z Y", więc musi istnieć sposób, żeby na
stronę Y przejść. Cel dotykowy każdego numeru: 44 × 44 px. */

.dw-pager { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: var(--dw-r5); }
.dw-pager__page, .dw-pager__step {
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; min-height: 44px; padding: 0 .75rem;
font-size: .9375rem; font-weight: 600; text-decoration: none;
color: var(--brand-500); background: var(--dw-surface);
border: 1px solid var(--dw-obrys); border-radius: var(--dw-radius-sm);
font-variant-numeric: tabular-nums;
}
.dw-pager__page:hover, .dw-pager__step:hover { border-color: var(--brand-500); background: var(--dw-surface-2); }
.dw-pager [aria-current="page"] {
color: #fff; background: var(--brand-500); border-color: var(--brand-500); cursor: default;
}
/* Krok brzegowy bez celu (opt-in `edges`): widoczny, ale wygaszony i nieklikalny.
Rezerwuje miejsce, więc numery nie przeskakują między stroną 1 a 2. */
.dw-pager__step--off {
color: var(--dw-text-soft); background: var(--dw-surface-2);
border-color: var(--dw-border); cursor: default; opacity: .75;
}
:root.dark .dw-pager__page,
:root.dark .dw-pager__step { color: var(--dw-accent); }
:root.dark .dw-pager [aria-current="page"] { color: #fff; }

/* ── 9. Rail: przełącznik filtrów i nota o źródle ────────────────────────── */
.dw-rail__toggle {
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
min-height: 44px; padding: .5rem .875rem;
font-size: .9375rem; font-weight: 600; color: var(--dw-text); cursor: pointer;
background: var(--dw-surface); border: 1px solid var(--dw-obrys);
border-radius: var(--dw-radius); margin-bottom: .75rem;
}

/* Zwijanie filtrów CHECKBOXEM, nie skryptem. Stan jest w HTML-u od pierwszego
bajtu, więc nic się nie przesuwa po hydracji (poprzednia wersja zamykała
`` Alpine'em i generowała CLS 0,56–0,70 poniżej progu raila).
Checkbox jest ukryty wizualnie, ale FOKUSOWALNY — obrys rysujemy na etykiecie. */
.dw-facets__panel { display: none; }
.dw-facets__cb:checked ~ .dw-facets__panel { display: block; }
.dw-facets__cb:checked ~ .dw-rail__toggle .dw-facets__caret { transform: rotate(180deg); }
.dw-facets__cb:focus-visible ~ .dw-rail__toggle {
outline: 3px solid var(--dw-accent); outline-offset: 2px;
}
.dw-facets__caret { flex: 0 0 auto; transition: transform .15s ease-in-out; }

@media (min-width: 68rem) {
/* Rail jest wtedy osobną kolumną — filtry stoją otwarte na stałe, a przełącznik
nie ma czego przełączać. */
.dw-rail__toggle { display: none; }
.dw-facets__panel { display: block; }
}

.dw-provenance-note {
margin: var(--dw-r5) 0 0; font-size: .78rem; line-height: 1.5; color: var(--dw-text-soft);
}

/* Wariant „przypis całej strony" — nota o źródle na dole strony głównej, nad stopką
(2026-08-20). Wcześniej ta sama nota stała pod paginacją, w kolumnie listy, gdzie
czytała się jak podpis pod tabelą; mówi natomiast o całej powierzchni.

Kreska nad przypisem jest WŁOSKOWA i pełnej szerokości osi — to ten sam gest, co
pas nad stopką: „treść się skończyła, dalej idą metadane". Miara wiersza schodzi
do 78 znaków, bo przypis na osi 1200 px czytałby się w jednej długiej linii.
Odstęp dolny zostawia oddech przed granatem stopki, żeby nota nie kleiła się do
jej górnej krawędzi. */
.dw-provenance-note--strona {
margin: var(--dw-r6) 0 var(--dw-r5);
padding-top: 1rem;
border-top: 1px solid var(--dw-border);
}
.dw-provenance-note__t { display: block; max-width: 78ch; }
.dw-provenance-note--strona a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dw-provenance-note--strona a:hover { color: var(--brand-700); }
:root.dark .dw-provenance-note--strona a:hover { color: #e8eff4; }
@media (max-width: 48rem) {
.dw-provenance-note--strona { margin-top: var(--dw-r5); }
}

/* ── 10. Nagłówek listy poza wyszukiwarką (ICD, kategorie, producent…) ───────
JEDEN nagłówek dla wszystkich list. Do 2026-08-24 stały tu dwa: ten (DrWidget,
`/nowe-rejestracje`) oraz karta odziedziczona po skórce leki.farm, którą stawiał
`leki_page_header()` na czternastu pozostałych stronach — `card-static
leki-card-hero p-6 md:p-8`, czyli biała płyta z 4-pikselowym gradientem u góry,
tytuł `text-3xl`, nadtytuł w `tracking-[0.2em]`. Ta karta stała NAD listą, która
sama jest kartą (ADR-0020): strona zaczynała się od dwóch białych płyt jedna na
drugiej, w dodatku o tym samym kroju. ZMIERZONE na /kategoria/rx (wysokość bloku
razem z marginesem dolnym): 192 px przy 1440 px i 246 px przy 390 px — dziś 166 px
i 188 px, przy wyraźniejszej granicy między nagłówkiem a listą.

ŹRÓDŁO LICZB — oryginał, nie gust (analysis/reference-assets/drwidget-live.css):
.static-header font-size: 30px; color: #0f4769 ← nagłówek strony
.drug-info-row h1 font-size: 22px; color: #0a324a ← tytuł karty produktu
.top-header-frame border: 1px solid #0f4769; border-bottom: 3px solid #d6461f
Stąd skala tytułu 22 → 30 px i ramka pola (niżej).

NAGŁÓWEK JEST POLEM (korekta 2026-08-24, polecenie właściciela: „pole ma być wciąż
w stylu drwidgeta"). Pierwsze podejście zdejmowało kartę do zera i zostawiało tytuł
na gołym tle — to zabierało nagłówkowi status osobnej powierzchni, którą oryginał
mu dawał. Pole wraca, ale w ramce DrWidgeta, nie w karcie wzorca: `.top-header-frame`
z oryginału to `border: 1px solid #0f4769` + `border-bottom: 3px solid #d6461f`,
czyli granatowy włos domknięty krawędzią marki od spodu. Tę samą krawędź nosi panel
wyszukiwania (§1), więc pole nagłówka i pole szukania są z jednej rodziny.

RÓŻNICA WOBEC `.card-static` (biała karta wzorca, w której siedzi lista): tamta ma
promień 1 rem, cień i szary włos #e2e8f0 — jest MEBLEM treści. Ta ramka jest znakiem
marki: kanciastsza (promień z rytmu), bez cienia, z krawędzią #d6461f. Dwie różne
powierzchnie jedna nad drugą mają się różnić, bo niosą co innego. */
.dw-listhead {
margin: 0 0 var(--dw-r4);
padding: var(--dw-r4);
background: var(--dw-surface);
border: 1px solid var(--brand-500);
border-bottom: 3px solid var(--dw-edge);
border-radius: var(--dw-radius);
}
:root.dark .dw-listhead { border-color: var(--dw-border); border-bottom-color: var(--dw-edge); }
@media (min-width: 48rem) { .dw-listhead { padding: var(--dw-r5); } }

/* NADTYTUŁ — „Kategoria", „ICD-10 · rozdział A", „Klasyfikacja ATC · drzewo".
Mówi, w którym dziale serwisu stoi ta lista; przy nim stoi odznaka `.dw-cat`
(sekcja 4) — DOKŁADNIE ten sam komponent, co w wierszach listy niżej. „Rx"
w nagłówku i „Rx" przy każdym produkcie muszą być tym samym znakiem, inaczej
nagłówek uczy innego alfabetu niż lista pod nim. */
.dw-listhead__kicker {
display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
margin: 0 0 .5rem;
font-size: .75rem; font-weight: 700; line-height: 1.4;
letter-spacing: .1em; text-transform: uppercase; color: var(--dw-text-soft);
}
/* Pastylka NIE dziedziczy po nadtytule wersalików ani rozstrzelenia. Bez tej
reguły „Rx" z nagłówka wychodziło jako „RX" z odstępem .1em, czyli innym znakiem
niż „Rx" w wierszu listy — a to jest dokładnie ta jedna rzecz, dla której odznaka
w ogóle tu stoi. Zmierzone na /kategoria/refundowane: „REFUNDOWANE" zamiast
„Refundowane". */
.dw-listhead__kicker .dw-cat { text-transform: none; letter-spacing: normal; }
.dw-listhead__title {
margin: 0; font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--brand-700);
text-wrap: balance;
}
:root.dark .dw-listhead__title { color: #e8eff4; }
/* Miara wiersza, nie szerokość kolumny: przy osi 1200 px lead bez ograniczenia
ciągnie się przez ~150 znaków i wraca do lewej krawędzi przez pół ekranu.
Rozmiar 15 px zrównuje go z `.dw-resbar` — oba są metadanymi listy, nie treścią. */
.dw-listhead__lead {
margin: .5rem 0 0; max-width: 68ch;
font-size: .9375rem; line-height: 1.6; color: var(--dw-text-soft); text-wrap: pretty;
}

/* ── 11. Strona główna: nagłówek bazy i wiersz czynności ──────────────────────
ZAKRES: wyłącznie `/` i `/strona/N` (klasa `.dw-home` opakowuje tę powierzchnię).
Nic tutaj nie dotyczy pozostałych stron — panel, pasek, wiersz i rail biorą styl
z sekcji 1–9, wspólnych dla /szukaj, /kategoria, /icd i /nowe-rejestracje.

Do 2026-08-14 stało tu przemalowanie przycisku w hero (`.leki3-hero-search`).
Hero zniknęło razem z korektą zakresu (ADR-0015): strona główna wróciła do układu
oryginału, w którym pod paskiem stoi panel wyszukiwania, a nie pełnoekranowy hero.
Akcję główną niesie dziś `.dw-panel__submit` (sekcja 1) — w tym samym pomarańczu,
więc reguła nie miała już czego malować.

Nagłówek jest ZWARTY, nie hero: pod nim musi się zmieścić panel, pasek wyników
i pierwsze wiersze listy (gęstość oryginału). Akcent w `` bierze pomarańcz
marki, bo `--brand-500` i `--brand-700` to dwa odcienie tego samego granatu —
akcent w granacie na granacie nie byłby akcentem.

Nagłówek to DZIŚ SAM `
`. Akapit wprowadzający (`.dw-home__lead`) wyleciał
2026-08-14 razem z regułą: opisywał to, co widać niżej — etykietę pola panelu
i kolumny wiersza listy — a kosztował ~100 px pierwszego ekranu (~160 px przy
390 px), czyli tyle, co pas skrótów przycięty do jednej linii (ADR-0018/0019). */

/* OŚ STRONY GŁÓWNEJ ODESZŁA STĄD DO SEKCJI 0 (2026-08-20, ADR-0031).
Stał tu blok `body.dw-wide` — oś 1200 px zakresowana na jedną stronę. Zakres padł
razem ze zgłoszeniem właściciela „topnav jest różnej wielkości na różnych stronach":
szeroka oś obowiązuje dziś cały serwis, więc reguła nie ma czego zakresować i nie
należy już do sekcji strony głównej. Klasa `dw-wide` nie istnieje — nie ma jej ani
w `layout.php`, ani w żadnym selektorze. */

/* Stał tu widoczny nagłówek strony głównej (`.dw-home__head` + `.dw-home__h1`
w rozmiarze 24–34 px, z dwubarwnym ``). Zdjęty 2026-08-19 na polecenie
właściciela — oryginał drwidget.pl nie miał na stronie startowej ŻADNEGO ``,
a nazwę strony powtarzały obok trzy inne miejsca (zakładka panelu, pozycja paska,
tytuł karty). Sam `
` został w markupie jako `.dw-visually-hidden`, więc nie
ma już czego stylować: schowany tekst nie ma rozmiaru ani koloru. Panel wchodzi
dzięki temu ~48 px wyżej na desktopie i ~40 px na telefonie. */

/* Stał tu wiersz czynności (`.dw-home__tools`): skaner kodu EAN i pigułki „Znajdź
zamiennik" / „Sprawdź interakcje", w jednej linii pod panelem. Wszystkie trzy
funkcje zniknęły z serwisu 2026-08-14 (ADR-0021), więc reguła nie ma czego układać.
Razem z nią wypadła wspólna wysokość 44 px dla `.leki-scan-btn` i `.leki-pill`
w tym wierszu — `.dw-home__goto .leki-pill` niżej ma własną i zostaje. */

/* ── Panel wyszukiwania na stronie głównej ────────────────────────────────────
Panel jest komponentem wspólnym (sekcja 1), ale JEDYNYM jego gospodarzem jest dziś
strona główna (ADR-0026), a zlecenie 2026-08-19 prosi tu o większą skalę: pole
52–56 px, szerszy „Szukaj", wyraźne stany. Korekta siedzi mimo to w zakresie
`.dw-home`, żeby domyślna postać komponentu została nietknięta — gdy panel wróci
kiedyś na inną powierzchnię, wróci w rozmiarze, w jakim był zaprojektowany.

ŻADEN ZE STANÓW NIE ZMIENIA GEOMETRII: hover i active malują tło, focus rysuje
`outline` (poza obrysem, nie w środku), a `active` przesuwa wyłącznie cień.
Zmiana obramowania albo paddingu w stanie przesuwałaby sąsiadów o piksel. */
.dw-home .dw-panel__input,
.dw-home .dw-panel__submit { height: 54px; min-height: 54px; font-size: 1.0625rem; }
.dw-home .dw-panel__input { padding-inline: 1rem; }
.dw-home .dw-panel__submit { min-width: 8.5rem; padding-inline: 1.5rem; letter-spacing: .01em; }
.dw-home .dw-panel__submit:active { background: var(--dw-cta-dark); }
.dw-home .dw-panel__submit:disabled { background: var(--brand-600); color: #cfe0ea; cursor: not-allowed; }
/* Zakładka aktywna zlewa się z panelem kolorem — dokładamy jej ten sam ciężar
optyczny co polu: wyższy wiersz i szersze wcięcie, żeby czytała się jak język
panelu, a nie jak przycisk obok niego. */
.dw-home .dw-panel__tab { min-height: 46px; padding: .5rem 1.25rem; font-size: .96875rem; }
.dw-home .dw-panel__body { padding: var(--dw-r4) var(--dw-r4) 1.125rem; }
@media (max-width: 29.99rem) {
.dw-home .dw-panel__input,
.dw-home .dw-panel__submit { height: 50px; min-height: 50px; font-size: 1rem; }
.dw-home .dw-panel__submit { min-width: 0; }
}

/* ── Pas skrótów w bazę ───────────────────────────────────────────────────────
Pięć pigułek pod panelem — wycinki bazy, po które sięga się najczęściej.
Kolor bierze `--pill` domyślne z `.leki-pill`, czyli granat marki: pas jest
nawigacją i ma być cichy.

KOSZT PIERWSZEGO EKRANU TO JEDNA LINIA 44 px — i to jest cały powód, dla którego
pas wygrał z siatką kafli (ADR-0018, ADR-0019). Siatka dwunastu kafli kosztowała
~200 px na desktopie i ~330 px na telefonie, czyli spychała pod fold to, czym ta
strona ma być: listę bazy.

Dlatego poniżej 40 rem pas NIE ZAWIJA SIĘ, tylko przewija w poziomie: pięć pigułek
zawinęłoby się na telefonie w trzy wiersze (132 px) i cały zysk by przepadł.
Przewijanie jest wewnątrz pasa — `` i `` zostają przy `overflow-x: hidden`,
więc strona nadal nie jeździ na boki. Ostatnia pigułka jest celowo przycięta
krawędzią: to jedyny sygnał, że pas ma ciąg dalszy. */
/* Odstęp ujemny u góry domyka dolny margines `.dw-panel` — pas stoi teraz PIERWSZY
pod panelem, więc przejął tę rolę (i wartość) po wyciętym wierszu czynności. */
.dw-home__goto {
display: flex; align-items: center; gap: var(--dw-r2);
margin: calc(-1 * var(--dw-r2)) 0 var(--dw-r3);
}/* Cel dotykowy ze styles.md §7 — moduł skraca pigułkę na telefonie do 29 px.
Zlecenie 2026-08-19 prosi o 36–40 px; 44 px zostaje tam, gdzie realnie jest palec
(poniżej progu raila), a wyżej pas schodzi do 38 px i przestaje konkurować
z panelem nad nim. WCAG 2.2 AA wymaga 24 px, więc 38 px zostaje z zapasem. */
.dw-home__goto .leki-pill {
min-height: 44px;
display: inline-flex; align-items: center;
border: 1px solid transparent; /* rezerwacja obrysu — stan nie przesuwa sąsiadów */
}
.dw-home__goto .leki-pill:hover { border-color: color-mix(in srgb, var(--brand-500) 35%, transparent); }
.dw-home__goto .leki-pill:active { background: color-mix(in srgb, var(--brand-500) 18%, var(--dw-surface)); }
/* Pigułka prowadząca na stronę, na której właśnie stoimy (dziś nie zdarza się na `/`,
ale pas jeździ też po `/strona/N`) — stan aktywny niesie `aria-current`, nie sam kolor. */
.dw-home__goto .leki-pill[aria-current] {
background: var(--brand-500); color: var(--dw-text-invert) !important;
border-color: var(--brand-500); font-weight: 700;
}
@media (min-width: 56rem) {
.dw-home__goto .leki-pill { min-height: 38px; }
}
/* PAS SKRÓTÓW W MOTYWIE CIEMNYM (ADR-0069). Moduł maluje pigułkę w ciemnym mieszanką
granatu z przezroczystością — tło 16 %, obrys 34 % — więc na tle strony #0b1220 obrys
miał 1,2 : 1 (pigułek praktycznie nie było widać jako kontrolek), a napis wychodził
przygaszony. Tu powierzchnia, pismo i obrys kontrolki (`--dw-obrys`) z tokenów:
napis --dw-text #e8eff4 na --dw-surface-2 #16374a 10,77 : 1
obrys 55 % --dw-text-soft w --dw-surface-2 na tle strony #0b1220 4,56 : 1
ten sam obrys na wypełnieniu pigułki 3,05 : 1
`!important` przy kolorze pisma, bo `:root.dark .leki-pill` w §12 ma go też. Obrys
ma zawsze 1 px (rezerwacja z reguły bazowej), więc stan nie przesuwa sąsiadów. */
:root.dark .dw-home__goto .leki-pill {
background: var(--dw-surface-2);
border-color: var(--dw-obrys);
color: var(--dw-text) !important;
}
:root.dark .dw-home__goto .leki-pill:hover { border-color: var(--dw-accent); }
:root.dark .dw-home__goto .leki-pill[aria-current] {
background: var(--brand-500); border-color: var(--dw-accent); color: var(--dw-text-invert) !important;
}
@media (max-width: 39.99rem) {
.dw-home__goto {
flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dw-home__goto::-webkit-scrollbar { display: none; }
/* Bez tego pigułki ściskają się do szerokości ekranu zamiast wyjechać poza pas. */
.dw-home__goto .leki-pill { flex: 0 0 auto; }
}
@media (min-width: 40rem) {
.dw-home__goto { flex-wrap: wrap; }
}

/* Telefon: nazwa dostaje CAŁĄ szerokość, pastylki schodzą pod nią ─────────────
Wiersz wspólny stawia przy 390 px nazwę i pastylki w jednej linii („name cat"),
przez co na kolumnę nazwy zostaje ~200 px z 326 px. Nazwy leków się nie skracają
(`overflow-wrap: anywhere`), więc „Amlodipine + Valsartan + Hydrochlorothiazide
Polpharma" łamało się W ŚRODKU SŁOWA na cztery wiersze („Hydrochloroth / iazide").

Kolejność w gridzie zostaje DOKŁADNIE taka jak w DOM-ie (nazwa → kategoria → opis
→ refundacja → producent) — przestawianie obszarów rozjeżdża kolejność widzianą
z kolejnością czytaną i łamie kontrakt z docs/KOMPONENTY-LISTY.md. Zmienia się
tylko liczba kolumn: z dwóch na jedną. Zakres: `.dw-home`. */
@media (max-width: 39.99rem) {
.dw-home .dw-row__main {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "name" "cat" "meta" "refund" "co";
}
.dw-home .dw-row__cat { justify-content: flex-start; }
}

/* Pastylki kategorii wydania: prostokąt z promieniem 6 px zamiast pełnej pigułki.
Zlecenie 2026-08-19 pkt 5 („zwarte oznaczenia z promieniem 4–6 px"). Semantyka
kolorów zostaje bez zmian — OTC zielony, Rx fioletowy, SD żółty, WM niebieski,
z tokenów `--dw-cat-*` przeliczonych na kontrast ≥ 4,5 : 1. Zmienia się kształt
i gęstość, nie znaczenie; skrót nadal niesie pełne brzmienie dla czytnika ekranu. */
.dw-home .dw-cat {
border-radius: var(--dw-radius-sm);
min-height: 1.5rem; padding: .125rem .5rem;
font-size: .78125rem; letter-spacing: .01em;
}

/* Kafel odpłatności: procent u góry, MOCNIEJSZA cena pod spodem (zlecenie pkt 5).
Wymiary minimalne zostają z komponentu (3,5 × 3,25 rem) — cztery kafle muszą się
zmieścić w kolumnie 17,25 rem w jednym rzędzie, więc szerokość nie rośnie. */
.dw-home .dw-reimb__val { font-weight: 600; }
.dw-home .dw-reimb__lvl { font-size: .78125rem; }

/* Wiersz o stopień gęstszy: zwinięte wskazania zabrały mu ~70 px, więc pionowe
wcięcie 14 px zaczęło rozjeżdżać rytm listy. 12 px trzyma pięćdziesiąt pozycji
w zwartym bloku, nie odbierając wierszowi oddechu. */
@media (min-width: 56rem) { .dw-home .dw-row { padding-block: .75rem; } }

/* Substancja i podmiot odpowiedzialny w JEDNYM wierszu na telefonie — cel dotykowy.
Domyślnie te dwa odnośniki stoją jeden pod drugim i mają po 16 px wysokości, czyli
dwa cele oddalone od siebie o 4 px (Lighthouse `tap-targets`: 80 %, zgłoszona para
„substancja / producent" na liście bazy). Pionowe rozepchnięcie ich do 44 px każdy
kosztowałoby +56 px na wiersz, czyli ~2800 px scrolla na 50 pozycjach. Ustawienie
ich obok siebie daje JEDEN pas 44 px zamiast dwóch szesnastek — cel dotykowy ze
`styles.md` §7 jest spełniony, a wiersz rośnie o 12 px, nie o 56.
Zakres: `.dw-home`. Ten sam problem mają pozostałe listy — do naprawy osobno
(DEFERRED), bo korekta zakresu zabroniła ruszania ich wyglądu. */
@media (max-width: 55.99rem) {
.dw-home .dw-row__co {
display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem;
}
.dw-home .dw-row__maker { margin-top: 0; }
.dw-home .dw-row__subst a,
.dw-home .dw-row__maker a {
display: inline-flex; align-items: center; min-height: 44px;
}
}

/* TRZY KOLUMNY O STAŁEJ SZEROKOŚCI — MODYFIKATOR, nie zmiana domyślnego wiersza.
Zakres: `.dw-home`, czyli `/` i `/strona/N`. Ten sam układ pomógłby /szukaj
i /kategoria, ale to inne strony i inny zakres (DEFERRED).

DLACZEGO STAŁE, A NIE `auto`. Każdy wiersz listy jest OSOBNYM gridem, więc kolumna
liczona z treści (`minmax(0, auto)`) wychodzi w każdym wierszu inna: pozycja bez
refundacji zwężała środek do zera i przesuwała producenta o ~270 px w lewo wobec
sąsiada. Pięćdziesiąt takich wierszy przestaje się skanować w pionie — a to jest
cały sens listy rejestrowej. Stałe `rem`-y dają jedną oś kolumn na całej liście
niezależnie od długości nazw i liczby kafli (wymóg zlecenia 2026-08-19, pkt 4).

SKĄD TE LICZBY (zmierzone na /, /strona/2 i /strona/7, nie dobrane na oko):
17,25 rem = 276 px ← cztery kafle odpłatności w JEDNYM rzędzie potrzebują 274 px
(najszerszy kafel to cena czterocyfrowa, „100,68 zł" = 76 px).
Piąty kafel (trzy grupy pacjentów) zawija się w drugi rząd —
dokładnie tak, jak w oryginale, który trzymał tu 270 px.
13,5 rem = 216 px ← substancja czynna + podmiot odpowiedzialny; wcześniej 168 px,
przez co „Zakłady Farmaceutyczne Polpharma SA" schodziło
na trzy wiersze.
reszta ≈ 302 px ← nazwa i opis rejestrowy (przy liście 876 px).
Proporcje wychodzą 38 / 35 / 27 zamiast orientacyjnych 42 / 28 / 30 ze zlecenia:
kolumna kafli ma twardą dolną granicę (cztery kafle albo drugi rząd i wyższy wiersz),
więc to ona dyktuje podział, a nie procent. */
@media (min-width: 56rem) {
.dw-home .dw-row__main {
grid-template-columns: minmax(0, 1fr) 17.25rem 13.5rem;
column-gap: var(--dw-r5);
}
}

/* ── Typografia listy bazy: o stopień większa niż na pozostałych powierzchniach ──
Zlecenie 2026-08-19: „elementy oraz tekst są za małe". Powód, dla którego korekta
siedzi w zakresie `.dw-home`, a nie w komponencie: strona główna niesie 50 pozycji
i jest jedyną powierzchnią, na której skanuje się je seriami. Pozostałe listy
(/szukaj — kilka wyników, /kategoria, /icd) zostają nietknięte (zakres zlecenia).

Nazwa produktu jest jedynym elementem w rozmiarze nagłówkowym i dostaje 800,
czyli tę samą grubość, co `` strony — w liście rejestrowej to ona jest punktem
zaczepienia oka. Kolor bez zmian: `--brand-700`, najciemniejszy granat marki. */
.dw-home .dw-row__title { font-size: 1.125rem; font-weight: 800; line-height: 1.3; }
@media (min-width: 40rem) { .dw-home .dw-row__title { font-size: 1.1875rem; } }
@media (min-width: 68rem) { .dw-home .dw-row__title { font-size: 1.25rem; } }

/* Opis rejestrowy zostaje przy 14 px (górna granica ze zlecenia), ale dostaje
luźniejszą interlinię — przy 876 px kolumny łamie się na dwa wiersze i przy 1,45
sklejał się w blok. */
.dw-home .dw-row__meta { line-height: 1.55; }

/* Substancja i producent: 13 px było minimum ze zlecenia i jednocześnie najmniejszym
tekstem na stronie. Po poszerzeniu kolumny do 216 px zmieściło się 14 px. */
.dw-home .dw-row__co { font-size: .875rem; line-height: 1.45; }

/* Pasek wyników i paginacja: 16 px. To metadane, ale czyta się je z odległości
całej strony („ile tego jest", „gdzie jestem") i przy 15 px ginęły pod listą. */
.dw-home { --dw-home-resbar-pad: .75rem; --dw-home-resbar-lh: 1.6rem; }
.dw-home .dw-resbar { font-size: 1rem; line-height: var(--dw-home-resbar-lh); padding-block: var(--dw-home-resbar-pad); }

/* RAIL RÓWNO Z GÓRĄ LISTY (2026-09-15, polecenie właściciela). Rail startował na wysokości
paska „Znaleziono wyników", czyli kreacja wystawała 55 px ponad pole listy. Przesunięcie
to dokładnie wysokość paska: padding z obu stron + wiersz + kreska 1 px + margines .25rem
z bazowego `.dw-resbar` (§2). Dlatego wiersz jest tu jawny (1.6rem = dziedziczone 1.6
z body) — licząc z tokenów, rail nadąża za powiększoną czcionką razem z paskiem.
Tylko od progu raila: niżej rail stoi nad listą i margines zrobiłby dziurę.

PRZY PRZEWIJANIU (2026-09-15, polecenie właściciela) — bazowe sticky z §7 robiło tu dwie
rzeczy źle, bo rail strony głównej zaczyna się od kreacji, a nie od filtrów:
• `top` liczył odstęp od nawigacji do GÓRY KREACJI, a etykieta „Reklama" wisi 20 px
nad nią (`.dw-ad__label`, §4) — po przyklejeniu wchodziła w połowie pod pasek.
Odstęp liczy się więc od góry etykiety: pasek (`--farm-nav-h` + 2 px pomarańczowej
krawędzi, §6) + 1rem + wiersz etykiety (.7rem × 1.6) + jej margines 2 px;
• blokiem, w którym rail się przykleja, jest cała siatka wyników RAZEM z paginacją,
więc na końcu listy kreacja zjeżdżała 68 px poniżej dolnej krawędzi pola.
`margin-bottom` = margines paginacji + wysokość jej przycisków (min-height 44 px,
§7) zatrzymuje kreację równo z dołem listy. Tylko gdy paginacja jest — bez niej
(za sufitem głębokości) margines wydłużałby wiersz siatki o pustkę. */
@media (min-width: 68rem) {
.dw-home .dw-results__rail {
margin-top: calc(2 * var(--dw-home-resbar-pad) + var(--dw-home-resbar-lh) + 1px + .25rem);
top: calc(var(--farm-nav-h, 56px) + 2px + 1rem + .7rem * 1.6 + 2px);
}
.dw-home .dw-results:has(.dw-pager) > .dw-results__rail { margin-bottom: calc(var(--dw-r5) + 44px); }
}
/* Niskie okno: przyklejona kreacja 600 px + pasek + etykieta nie mieszczą się w pionie, więc
dół kreacji byłby nieosiągalny, dopóki lista się nie skończy. Poniżej 45rem (720 px przy
16 px) rail po prostu jedzie z dokumentem — ta sama zasada co `.leki-aside` w leki.css.
Próg w `rem`, bo z czcionką rośnie też etykieta i odstępy nad kreacją. */
@media (min-width: 68rem) and (max-height: 44.99rem) {
.dw-home .dw-results__rail { position: static; }
}
.dw-home .dw-pager__page,
.dw-home .dw-pager__step { font-size: 1rem; }

/* ── 12. Korekty kontrastu w komponentach wzorca ──────────────────────────────
Moduł leki.farm używa w kilku miejscach szarości `#94a3b8` / `#8b95a3` i mieszanek
koloru marki, które na jasnym tle dają 2,5–3,2 : 1 — poniżej progu WCAG 2.2 AA
(4,5 : 1 dla tekstu mniejszego niż 18,66 px). Wykryte przez axe-core
(`bin/a11y.mjs`) na stronie głównej, karcie leku i listingu producentów.

Poprawka mieszka TUTAJ, w skórce, a nie w skopiowanym module — tym samym zakresem,
którym skórka nadpisuje kolory paska nawigacji (ADR-0010: dosłowna kopia modułu,
różnice wyłącznie w warstwie DrWidgeta).

`!important` jest tu KONIECZNE i nie jest skrótem: arkusz modułu (`leki.css`)
wchodzi do `` przez `head_html`, czyli PO `drwidget.css`. Przy równej
specyficzności wygrywa kolejnością źródła, więc zwykła reguła nic by nie zmieniła
(sprawdzone — axe pokazywał te same 29 naruszeń). Zmieniamy WYŁĄCZNIE jasność
tekstu; rozmiary, odstępy i hierarchia zostają nietknięte. */

.leki-mini__pack,
.leki-reg__d,
.leki-chip__n,
.leki-war__lab,
.leki-war__note,
.leki-war__n,
.leki-mod__note,
.leki-mod__d,
.leki-atcf__reszta,
.leki-aside__t,
.leki-aside__mfr-m,
.leki-safety__src { color: var(--dw-text-soft) !important; }

/* Licznik w chipie ma we wzorcu `opacity: .6`, więc sama zmiana koloru nic nie dawała
— przezroczystość rozcieńczała go z powrotem do 2,9 : 1. Hierarchię niesie tu rozmiar
(11 px wobec 13 px) i grubość, nie wyblakły odcień. */
.leki-chip__n { opacity: 1 !important; }

/* Znacznik „brak w rejestrze" — bursztyn wzorca na własnym tle dawał 4,4 : 1. */
.leki-reg__tag--missing { color: var(--dw-warn) !important; }

/* Pilla hero: `color-mix(--pill 82%, #0f172a)` na tle `--pill 10%` schodziło do
3,15 : 1 przy jasnych akcentach (błękit #00aeef). Więcej granatu w mieszance. */
.leki-pill { color: color-mix(in srgb, var(--pill) 45%, #0f172a) !important; }

/* NAJAZD NA PIGUŁKĘ — wiersz wyżej miał skutek uboczny, którego nikt nie zmierzył.
Wzorzec odwraca pigułkę pod kursorem na PEŁNY akcent z białym pismem
(`.leki-pill:hover` w leki.css), ale linijka wyżej maluje pismo granatem
z `!important`, więc odwracało się samo tło: granat na granacie. Zmierzone przed
poprawką (Playwright, kolor tekstu i tła ze stylu obliczonego): pigułki pasa skrótów
**1,44 : 1**, pas listingu 2,02–2,73 : 1 — przy 8–12 : 1 w spoczynku. Tekst znikał
dokładnie w chwili, w której użytkownik go szukał.

SAMO ODDANIE BIELI PISMU NIE WYSTARCZY i dlatego nie tędy droga: biel na surowym
akcencie wzorca daje 2,3 : 1 (#00aeef), 3,0 : 1 (#d97706) i 3,6 : 1 (#0284c7) —
ta sama usterka, tylko w drugą stronę. Najazd zostaje więc w języku DrWidgeta:
głębszy odcień tego samego akcentu POD NIEZMIENIONYM PISMEM, tak jak stan `:active`
pasa skrótów. Pełny akcent zostaje stanem `[aria-current]`, gdzie pismo jest jawnie
odwrócone na `--dw-text-invert`. */
/* `:root:not(.dark)` nie jest ozdobą: `!important` bije siłę selektora, więc reguła bez
tego zawężenia podmieniała też powierzchnię pigułek pasa skrótów w CIEMNYM — jasne tło
pod jasnym pismem, 1,27 : 1. Zmierzone przy tej poprawce, na własnym pomiarze. */
:root:not(.dark) .leki-pill:hover,
:root:not(.dark) .leki-pill:focus-visible {
background: color-mix(in srgb, var(--pill) 22%, #fff) !important;
border-color: color-mix(in srgb, var(--pill) 50%, transparent) !important;
}
/* W ciemnym pigułki pasa skrótów mają własną powierzchnię (`--dw-surface-2`, wyżej)
i pod kursorem zmieniają wyłącznie obrys — ta reguła ich nie dotyka. Pas listingu
idzie w ciemnym prosto z modułu, więc odwrócenie trzeba zdjąć tak samo jak w jasnym,
tylko mieszając z przezroczystością zamiast z bielą. */
:root.dark .leki-listing-nav .leki-pill:hover,
:root.dark .leki-listing-nav .leki-pill:focus-visible {
background: color-mix(in srgb, var(--pill) 28%, transparent) !important;
border-color: color-mix(in srgb, var(--pill) 55%, transparent) !important;
}

:root.dark .leki-mini__pack,
:root.dark .leki-reg__d,
:root.dark .leki-chip__n,
:root.dark .leki-war__lab,
:root.dark .leki-war__note,
:root.dark .leki-war__n,
:root.dark .leki-mod__note,
:root.dark .leki-mod__d,
:root.dark .leki-atcf__reszta,
:root.dark .leki-aside__t,
:root.dark .leki-aside__mfr-m,
:root.dark .leki-safety__src,
/* Trzy szare #64748b wzorca, które w JASNYM mają 4,76 : 1 na bieli, a w ciemnym moduł
zostawia je bez zmiany (albo, jak etykieta nawigacji listingu, jawnie powtarza tę samą
szarość w `.dark`): 3,93 : 1 na tle strony #0b1220 i 3,47 : 1 na karcie #131f33.
Zmierzone axe przy włączaniu trybu ciemnego (ADR-0069); tu #a9bdc9 daje 9,64 i 8,50. */
:root.dark .leki-listing-nav__label,
:root.dark .leki-atc-kody__n,
:root.dark .leki-pag__i { color: #a9bdc9 !important; }
:root.dark .leki-reg__tag--missing { color: #ffc46b !important; }
:root.dark .leki-pill { color: color-mix(in srgb, var(--pill) 55%, #fff) !important; }

/* NAJAZD W BARWIE MARKI — w ciemnym motywie granat na granacie (ADR-0069, ta sama zasada
co ADR-0061: granat jako pismo schodzi w ciemnym na akcent). Moduł stawia
`group-hover:text-brand-500` na nazwach w listach ICD-10 i producentów, a klasa
z buildu nie ma wariantu ciemnego: pod kursorem jasna nazwa (#e2e8f0) gasła do #0f4769,
czyli 1,67 : 1 na karcie #131f33 i 1,45 : 1 na #1f2a3d. axe to złapał przypadkiem —
kursor pomiaru został nad pozycją listy. Akcent #35c3f5: 8,08 i 7,05 : 1. */
:root.dark .group:hover .group-hover\:text-brand-500,
:root.dark .group:hover .group-hover\:text-brand-600,
:root.dark .hover\:text-brand-500:hover,
:root.dark .hover\:text-brand-600:hover,
:root.dark .hover\:text-brand-700:hover { color: var(--dw-accent); }

/* `dark:text-brand-400` — wariant ciemny, który moduł dał granatowi jako pismu (78 miejsc:
kody ICD-10, ścieżki ATC, liczniki). U wzorca brand-400 był jasną zielenią; w palecie
DrWidgeta generator skali (bin/repaint.php) robi z niego średni błękit #4a83a8, który na
karcie #131f33 ma 4,01 : 1 — kody na /icd/{kod} poniżej progu. Skali nie ruszamy (służy
też jasnemu motywowi); pismo idzie na akcent, jak każdy granat-pismo w ciemnym (ADR-0061):
8,08 : 1 na #131f33. */
:root.dark .dark\:text-brand-400 { color: var(--dw-accent); }

/* `text-slate-600 dark:text-slate-300` (49 miejsc) nie dostawało swojego wariantu ciemnego:
`vendor/style.css` ma `.dark .text-slate-600 { #94a3b8 }` o tej samej specyficzności
i przychodzi PO buildzie Tailwinda, więc wygrywał kolejnością. Na zwykłej karcie #94a3b8
wystarczało; na żetonie `dark:bg-white/10` (wpisana fraza w pustych wynikach /szukaj)
dawał 4,14 : 1. Przywracamy zamiar modułu tokenem pisma drugiego planu: 5,46 : 1 na tym
żetonie, 7,81 : 1 na karcie. */
:root.dark .dark\:text-slate-300 { color: var(--dw-text-soft); }

/* Najazd na numer strony w ciemnym: `--brand-500` jako obrys to granat na granacie. */
:root.dark .dw-pager__page:hover,
:root.dark .dw-pager__step:hover { border-color: var(--dw-accent); }

/* PIERŚCIEŃ FOKUSU W TREŚCI W CIEMNYM (poprawka po recenzji 2026-09-14, ADR-0069).
Reguła modułu `main#main a/button/input/summary/[tabindex]:focus-visible` (leki.css §12,
specyficzność 1-1-2) rysuje fokus w `--brand-500` #0f4769 w OBU motywach: w jasnym to
9,88 : 1 na bieli, w ciemnym granat na granacie — pigułki skrótów i numery stron 1,90 : 1
na #0b1220, wiersze listy 1,51 : 1 na #102a39, karta leku (kody ATC, akordeon, warianty
opakowań) 1,67–1,84 : 1. Ta sama lista selektorów co u modułu, podniesiona o `:root.dark`,
zmienia WYŁĄCZNIE kolor — grubość, odsunięcie i promień zostają modułowe. Akcent:
9,16 : 1 na #0b1220, 8,08 na #131f33, 8,89 na #0d1529, 7,28 na #102a39.
Mierzy to `bin/a11y.mjs` (pierścień ≥ 3 : 1 wobec tła, oba motywy, 1280 i 390 px). */
:root.dark main#main a:focus-visible,
:root.dark main#main button:focus-visible,
:root.dark main#main input:focus-visible,
:root.dark main#main summary:focus-visible,
:root.dark main#main [tabindex]:focus-visible { outline-color: var(--dw-accent); }
/* …ale panel szukania strony głównej zostaje z BIAŁYM pierścieniem (sekcja 1) — reguła
wyżej ma wyższą specyficzność niż `main#main .dw-panel …` i by go przemalowała. */
:root.dark main#main .dw-panel a:focus-visible,
:root.dark main#main .dw-panel button:focus-visible,
:root.dark main#main .dw-panel input:focus-visible { outline-color: #fff; }
/* Stopka jest granatowa w obu motywach, więc jej pierścień jest biały w obu (leki.css
`footer a:focus-visible`). W ciemnym przegrywał z vendorowym `.dark *:focus-visible`
i z domyślnym akcentem na początku tego arkusza: #4a83a8 na #0f4769 to 2,40 : 1. */
:root.dark .dw-footer a:focus-visible { outline-color: #fff; }

/* Powyżej progu raila panel filtrów jest otwarty na stałe, więc przełącznik nie ma
czego przełączać. Sam checkbox też musi wtedy zniknąć Z DRZEWA DOSTĘPNOŚCI —
`.dw-visually-hidden` zostawiał go fokusowalnym, a axe słusznie zgłaszał pole
formularza, którego etykieta jest ukryta (`label`, critical). */
@media (min-width: 68rem) { .dw-facets__cb { display: none; } }

/* ── 13. Pasy pod listą: rejestr w dwóch kolumnach, nagłówek sekcji łamie się ──
Strona główna kończy się dwoma pasami na pełną szerokość — chipy substancji
i zmiany w rejestrze (v3/home.php). Do 2026-08-19 stały obok siebie w kolumnach
2:3 i nie schodziły się dołem; szczegóły przy markupie i w ADR-0027.

Sześć wierszy rejestru na całej szerokości byłoby pasem samego powietrza: wiersz
niesie etykietę, nazwę, INN i datę, czyli ~40 znaków na 1100 px. Dwie kolumny
skracają pas o połowę i domykają go nad stopką.

Selektor jest DWUKLASOWY nie dla ozdoby: `.leki-reg { display: flex }` przychodzi
z `leki.css`, a ten arkusz wchodzi do PO `drwidget.css` (patrz §12), więc
przy równej specyficzności wygrałby kolejnością źródła. Dwie klasy (0,2,0) biją
jedną (0,1,0) niezależnie od kolejności — i nie trzeba `!important`.

`minmax(0, 1fr)`, nie `1fr`: samo `1fr` znaczy `minmax(auto, 1fr)`, czyli ścieżka
nigdy nie schodzi poniżej MIN-CONTENT wiersza — a wiersz niesie łacińską nazwę
substancji z `white-space: nowrap`. Na 390 px ścieżka rozpychała się do 393 px
i data uciekała za krawędź (kolumna flex tego nie robiła, bo item dostawał tam
szerokość kontenera, nie min-content). */
.leki-reg.dw-reg--kolumny { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
@media (min-width: 64rem) {
.leki-reg.dw-reg--kolumny { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .75rem; }
}

/* Nagłówek sekcji (`leki_v3_section_header`) trzyma tytuł z podtytułem po lewej,
a odnośnik „więcej" po prawej — bez zawijania. Na telefonie podtytuł łamał się
na dwa wiersze i kończył tuż przy „Wszystkie zmiany →", więc dwa różne zdania
sklejały się w jedno. Zawijanie zsuwa odnośnik do własnego wiersza dopiero wtedy,
kiedy zabraknie miejsca — na desktopie nagłówek wygląda tak samo jak wcześniej. */
.leki-secthead { flex-wrap: wrap; row-gap: .25rem; }
.leki-secthead > a { margin-left: auto; }

/* Rytm pionowy pasów pod listą. `.leki3-stack` przyszło z modułu jako SAMA NAZWA —
w żadnym arkuszu DrWidgeta ta klasa nie ma definicji (sprawdzone: leki.css,
leki-components.css, style.css, tailwind-built.css), więc sekcje stały jedna na
drugiej: nota jednej kończyła się 0 px nad nagłówkiem następnej i dwa różne pasy
czytały się jak jeden. Odstęp stawiamy tu, w skórce, bo to decyzja układu DrWidgeta.
Margines górny odsuwa pierwszy pas od paginacji listy — nota o źródle, która stała
tu wcześniej, zeszła 2026-08-20 na sam dół strony (`.dw-provenance-note--strona`). */
.leki3-stack { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 2rem; }
@media (max-width: 48rem) { .leki3-stack { gap: 2rem; margin-top: 1.5rem; } }

/* Dół strony głównej z pozycją `home.H2` (ADR-0091): pasy „Substancje czynne" i „Zmiany
w rejestrze" w lewej kolumnie, kreacja 300×600 w prawej — ta sama oś co lista i rail nad nimi
(§7: `minmax(0, 1fr) var(--dw-rail)`, ten sam odstęp). Kolumna treści powtarza rytm
`.leki3-stack`, bo pasy przestały być jego bezpośrednimi dziećmi. Poniżej progu układu kreacja
schodzi pod pasy. `padding-top` = wiersz etykiety „Reklama" (§4: .7rem × 1.6 + 2 px), która wisi
nad kreacją — dzięki temu góra etykiety staje równo z nagłówkiem pierwszego pasa. */
.dw-home__dol { display: grid; gap: 2.5rem; align-items: start; }
.dw-home__dol-tresc { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }
.dw-home__dol-reklama { min-width: 0; padding-top: calc(.7rem * 1.6 + 2px); }
@media (max-width: 48rem) { .dw-home__dol, .dw-home__dol-tresc { gap: 2rem; } }
@media (min-width: 68rem) {
.dw-home__dol { grid-template-columns: minmax(0, 1fr) var(--dw-rail); gap: var(--dw-rail-gap); }
}

/* ── 14. Profil bezpieczeństwa: układ wiersza po naprawie `` (D-7) ────────
Markup wzorca wkładał między listę a parę termin–ocena DWA poziomy ``
(` > .leki-safety__r > .leki-safety__w > `) i stawiał obok pary akapit,
a na karcie substancji jeszcze ``. Model treści `` dopuszcza dokładnie
jeden poziom `` i nic poza ``/`
` w środku, więc axe-core zgłaszał
`definition-list` i `dlitem` (waga „serious") na karcie leku i substancji —
czytnik ekranu nie odczytywał tego jako par termin–definicja.

Markup poprawiony w module (inaczej się nie da), UKŁAD siedzi tutaj, w skórce —
tą samą zasadą, co korekty kontrastu w §12 (ADR-0010: różnice w warstwie DrWidgeta).
Siatkę przejmuje `.leki-safety__r`, bo `.leki-safety__w` zniknęło z markupu.

Selektor jest DWUKLASOWY (`.leki-safety__lista .leki-safety__r`), bo `leki.css`
wchodzi do PO tym arkuszu i przy równej specyficzności wygrałby kolejnością.
Reguł wzorca nie ruszamy: te dla `.leki-safety__w` po prostu nie mają już do czego
się przyczepić, a `.leki-safety__z` (rozmiar, kolor, margines) działa dalej — zmienia
się tylko element, na którym ta klasa siedzi (`
` zamiast ``; `dd` ma margines
wyzerowany preflightem Tailwinda, więc wcięcie 40 px z UA nie wraca). */
.leki-safety__lista .leki-safety__r {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: center; column-gap: .75rem;
}
.leki-safety__lista .leki-safety__r > dt {
font-size: .875rem; font-weight: 500; line-height: 1.35; color: var(--color-navy, #0a324a);
}
:root.dark .leki-safety__lista .leki-safety__r > dt { color: #e2e8f0; }
.leki-safety__lista .leki-safety__r .leki-sig {
min-width: 6.75rem; justify-content: center; padding: .3125rem .5rem;
}
/* Zalecenie i rozkład ocen idą pod parą, na całą szerokość wiersza. */
.leki-safety__lista dd.leki-safety__z { grid-column: 1 / -1; }

/* Wariant w kolumnie bocznej karty leku — te same trzy korekty, które wzorzec
trzymał na `.leki-aside__safety .leki-safety__w`. */
.leki-aside__safety .leki-safety__lista .leki-safety__r { column-gap: .5rem; }
.leki-aside__safety .leki-safety__lista .leki-safety__r > dt { font-size: .8125rem; }
.leki-aside__safety .leki-safety__lista .leki-safety__r .leki-sig {
min-width: 5.5rem; padding: .25rem .4375rem; font-size: .6875rem;
}

/* ==========================================================================
`[x-cloak]` — stan początkowy elementów sterowanych Alpine'em

Alpine jedzie z `defer`, więc do czasu jego startu `x-show` nie robi NIC:
element, który ma być schowany, jest rysowany, a znika dopiero po pierwszym
malowaniu — zabierając ze sobą swoją wysokość. To dokładnie ten wzorzec,
którego zakazuje `styles.md` §6 (lekcja z CLS 0,56–0,70, ADR-0012).

Moduł stawia `x-cloak` w trzech miejscach — `shell-ui.php:301` i `:353`
(pasek szukania, czyli od ADR-0026 KAŻDA podstrona) oraz `listing-inn.php:252`
— ale żaden z pięciu arkuszy ładowanych przez `layout.php` nie definiował
reguły: `vendor/style.css` ma ją zawężoną do `.pmodal`, `tailwind-built.css`
nie ma jej wcale. Atrybut wisiał więc w markupie bez skutku.

Rozwijanego menu w belce to NIE dotyczy — tam `x-cloak` nie występuje,
a stanem początkowym jest `style="display:none"` z markupu (komentarz wyżej).
========================================================================== */
[x-cloak] { display: none; }

/* ==========================================================================
BRAMA OŚWIADCZENIA (ADR-0035)

Nakładka, przez którą przechodzi się raz na sesję przeglądarki. Renderuje ją
`app/includes/oswiadczenie.php` jako pierwsze dziecko ``, wyłącznie gdy
ciasteczka zgody jeszcze nie ma — więc TU nie ma żadnego stanu „schowana":
czego nie widać, tego w dokumencie po prostu nie ma. To celowe. Gdyby nakładka
stała w HTML zawsze i chowała ją reguła, wróciłaby pułapka z `[x-cloak]` wyżej:
element rysowany i znikający po pierwszym malowaniu.

Kolory i proporcje z żywego drwidget.pl (`#agreementAccept`, mierzone na
analysis/reference-assets/drwidget-live.css:2925): granatowy tytuł, szary
podpis, granatowy pas przycisków, ceglany przycisk akceptacji. Wartości bierzemy
z tokenów, nie z tamtych `#hex`-ów, żeby brama zmieniła się razem z paletą.
========================================================================== */

.dw-oswiadczenie {
position: fixed; inset: 0; z-index: 1100;
display: flex; align-items: center; justify-content: center;
padding: var(--dw-r4);
background: rgb(10 34 46 / .72);
overflow-y: auto; /* niski ekran: przewija się nakładka, nie strona */
overscroll-behavior: contain;
}

.dw-oswiadczenie__okno {
width: 100%; max-width: 34.375rem; /* 550 px oryginału */
background: var(--dw-surface);
border-radius: var(--dw-radius-lg);
box-shadow: 0 24px 60px rgb(10 34 46 / .35);
overflow: hidden; /* pas przycisków siada w zaokrąglony róg */
}

.dw-oswiadczenie__tresc { position: relative; padding: var(--dw-r5); }

/* Znak firmowy — u oryginału w rogu karty (`#agreementAccept > div:before`,
112×32 px), u nas na granatowym pasie: plik jest wybielony pod granat belki
i na białym tle nie istnieje. Dekoracja — nazwę serwisu niesie tytuł dokumentu. */
.dw-oswiadczenie__logo { width: 6.5rem; height: auto; margin-left: auto; opacity: .92; }

.dw-oswiadczenie__tytul {
margin: 0;
font-size: 1.75rem; font-weight: 300; line-height: 1.2;
color: var(--dw-navy-soft);
}

.dw-oswiadczenie__opis {
margin: var(--dw-r5) 0 0;
font-size: 1rem; font-weight: 400; line-height: 1.5;
color: var(--dw-text-soft);
}

/* Pole zgody: siatka „kwadrat + tekst", więc druga i kolejne linijki etykiety
trzymają wcięcie, zamiast podchodzić pod kratkę. */
.dw-oswiadczenie__zgoda {
display: grid; grid-template-columns: auto 1fr; gap: var(--dw-r3);
align-items: start; margin-top: var(--dw-r5);
}
.dw-oswiadczenie__zgoda input[type="checkbox"] {
width: 1.25rem; height: 1.25rem; margin: .125rem 0 0;
accent-color: var(--dw-orange); flex: none; cursor: pointer;
}
.dw-oswiadczenie__zgoda label {
font-size: 1.0625rem; line-height: 1.45; color: var(--dw-navy);
cursor: pointer;
}

/* KOMUNIKAT PO NIEUDANEJ PRÓBIE (ADR-0037). Przy niezaznaczonym polu klik
w „Akceptacja" nie wysyła żądania: przeglądarka blokuje wysyłkę i rysuje własny
dymek POZA stroną, przelotny i łatwy do przeoczenia — bez tego zdania brama
wyglądałaby na zepsutą. Domyślnie UKRYTE (właściciel zdjął pouczenie z powitania,
2026-08-20): pokazuje się dopiero, gdy jest co zgłosić.

`:user-invalid`, nie `:invalid` — `:invalid` byłby czerwony od pierwszego malowania,
czyli krzyczałby na kogoś, kto jeszcze niczego nie zrobił źle. `:user-invalid`
zapala się dopiero po próbie wysłania. Przeglądarki bez tego selektora nie tracą
nic: u nich `required` też nie blokuje wysyłki, więc komunikat przychodzi z serwera
(klasa `--blad`). */
.dw-oswiadczenie__wymog {
display: none; /* karta wita bez pouczeń */
margin: var(--dw-r3) 0 0;
padding-left: calc(1.25rem + var(--dw-r3)); /* równo z tekstem etykiety */
font-size: .9375rem; line-height: 1.45; color: var(--dw-text-soft);
}
.dw-oswiadczenie__wymog--blad,
.dw-oswiadczenie__form:has(#dw-oswiadczenie-zgoda:user-invalid) .dw-oswiadczenie__wymog {
display: block;
color: var(--dw-orange); font-weight: 600;
}
.dw-oswiadczenie__zgoda:has(input:user-invalid) input[type="checkbox"],
.dw-oswiadczenie__form:has(.dw-oswiadczenie__wymog--blad) .dw-oswiadczenie__zgoda input[type="checkbox"] {
outline: 2px solid var(--dw-orange); outline-offset: 2px;
}

.dw-oswiadczenie__przyciski {
display: flex; align-items: center; gap: var(--dw-r4);
margin-top: var(--dw-r5); padding: var(--dw-r4) var(--dw-r5);
background: var(--dw-navy);
}

.dw-oswiadczenie__akceptuj {
appearance: none; border: 0; cursor: pointer;
padding: .625rem 1.875rem; border-radius: var(--dw-radius-sm);
font: inherit; font-size: 1rem; font-weight: 600;
color: var(--dw-text-invert); background: var(--dw-orange);
transition: background-color .125s ease-in-out;
/* Cel dotykowy 44×44 px (WCAG 2.2 AA, 2.5.8) — wysokość z paddingu to 40 px,
więc dokładamy minimum wprost, zamiast puchnąć wizualnie paddingiem. */
min-height: 2.75rem;
}
.dw-oswiadczenie__akceptuj:hover { background: var(--dw-orange-warm); }
.dw-oswiadczenie__akceptuj:active { transform: translateY(1px); }

/* „Odrzuć" — wyjście z serwisu, więc przycisk drugoplanowy: obrys zamiast wypełnienia.
Ceglany zostaje jeden i prowadzi do środka, żeby na granatowym pasie nie licytowały
się dwa równie mocne przyciski. Wysokość ta sama co „Akceptacja" (44 px, WCAG 2.5.8),
bo obie drogi klika się tym samym palcem. */
.dw-oswiadczenie__odrzuc {
appearance: none; cursor: pointer;
padding: .625rem 1.875rem; border-radius: var(--dw-radius-sm);
border: 1px solid rgb(255 255 255 / .45);
font: inherit; font-size: 1rem; font-weight: 600;
color: var(--dw-text-invert); background: transparent;
transition: background-color .125s ease-in-out, border-color .125s ease-in-out;
min-height: 2.75rem;
}
.dw-oswiadczenie__odrzuc:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .7); }
.dw-oswiadczenie__odrzuc:active { transform: translateY(1px); }

/* BRAMA W MOTYWIE CIEMNYM (ADR-0069). Tryb ciemny idzie za systemem, więc gość z ciemnym
systemem widzi bramę jako PIERWSZY ekran serwisu — a brama brała granat marki jako pismo
(ADR-0061): tytuł #0f4769 i etykieta zgody #0d3d5a na oknie #102a39 miały 1,51 i 1,30 : 1.
Pomarańcz komunikatu o błędzie na tym oknie: 3,12 : 1, za mało dla pisma 15 px (#ff9d78: 7,33).

KRATKA ZGODY ZOSTAJE W BARWACH JASNYCH (`color-scheme: light`). W ciemnym motywie
przeglądarka rysuje niezaznaczoną kratkę po swojemu — ciemne pole z szarym obrysem,
inaczej w każdym silniku — i tego obrysu arkusz nie mierzy ani nie ustawia. Jasna kratka
odcina się od okna całym polem (biel na #102a39), więc granica kontrolki (WCAG 1.4.11)
jest spełniona w Chromium, Firefoksie i WebKicie tak samo, a zaznaczenie zostaje
w pomarańczu marki (`accent-color`). To jedyne pole na ścieżce wejścia do serwisu. */
:root.dark .dw-oswiadczenie__tytul,
:root.dark .dw-oswiadczenie__zgoda label { color: var(--dw-text); }
:root.dark .dw-oswiadczenie__zgoda input[type="checkbox"] { color-scheme: light; }
:root.dark .dw-oswiadczenie__wymog--blad,
:root.dark .dw-oswiadczenie__form:has(#dw-oswiadczenie-zgoda:user-invalid) .dw-oswiadczenie__wymog { color: #ff9d78; }
:root.dark .dw-oswiadczenie__zgoda:has(input:user-invalid) input[type="checkbox"],
:root.dark .dw-oswiadczenie__form:has(.dw-oswiadczenie__wymog--blad) .dw-oswiadczenie__zgoda input[type="checkbox"] {
outline-color: #ff9d78;
}

/* Strona pod nakładką nie przewija się — inaczej gość „ucieka" spod bramy kółkiem
myszy albo gestem. Dwie reguły, bo zamykają dwie różne dziury:

• `` — to wystarcza w Chromium (zmierzone kółkiem i klawiszem End na
1440×900 i 390×844: scrollY zostaje 0). Overflow z `` propaguje się na
viewport, bo `` swojego nie ustawia.
• `` przez `:has()` — bo propagacja z `` nie wszędzie blokuje gest
(rodzina Safari/iOS słynie z tego, że `overflow:hidden` na `` przewijania
nie zatrzymuje). To ten sam chwyt, co `html.pmodal-lock` we `vendor/style.css`,
tyle że bez JS-a — brama nie ma prawa od niego zależeć.

Uwaga na przyszłe pomiary: `window.scrollBy()` przejeżdża przez tę blokadę
(`overflow:hidden` zatrzymuje wejście użytkownika, nie skrypt), więc testem
jest kółko/klawiatura, a nie scrollBy. */
:root:has(> body.dw-oswiadczenie-otwarte) { overflow: hidden; }
body.dw-oswiadczenie-otwarte { overflow: hidden; }

/* Wąski ekran: karta zostaje kartą (nie rozciąga się na pełny ekran) — nakładka
ma być komunikatem, nie osobnym ekranem aplikacji. Wysokość bierze się z treści,
więc pod spodem widać, że serwis tam jest. */
@media (max-width: 34.375rem) {
.dw-oswiadczenie { align-items: flex-start; padding: var(--dw-r5) var(--dw-r4); }
.dw-oswiadczenie__tresc { padding: var(--dw-r4); }
.dw-oswiadczenie__logo { display: none; } /* pas oddaje całą szerokość przyciskowi */
.dw-oswiadczenie__tytul { font-size: 1.5rem; }
.dw-oswiadczenie__opis { margin-top: var(--dw-r4); font-size: .9375rem; }
.dw-oswiadczenie__zgoda { margin-top: var(--dw-r4); }
.dw-oswiadczenie__zgoda label { font-size: 1rem; }
.dw-oswiadczenie__przyciski { margin-top: var(--dw-r4); padding: var(--dw-r4); }
/* Dwa przyciski nie zmieszczą się obok siebie w kolumnie 320 px — siadają
jeden pod drugim, każdy na całą szerokość. */
.dw-oswiadczenie__przyciski { flex-direction: column; align-items: stretch; gap: var(--dw-r3); }
.dw-oswiadczenie__akceptuj,
.dw-oswiadczenie__odrzuc { width: 100%; }
}

/* ==========================================================================
§14. TELEFON — usterki, które widać dopiero na wąskim ekranie
Zmierzone na podglądzie 8099 przy 320 / 360 / 390 / 412 px, emulacja iOS
(`isMobile`, `hasTouch`). Każdy blok niżej ma pomiar w komentarzu: bez niego
„poprawka dotykowa" jest zgadywaniem, a te same reguły wrócą za pół roku.
========================================================================== */

/* ── 14.1. Pole formularza mniejsze niż 16 px = Safari na iOS ZOOMUJE stronę ──
Safari powiększa widok przy fokusie w pole, którego pismo jest mniejsze niż
16 px, i NIE wraca po rozmyciu — użytkownik zostaje na przybliżonej stronie
i musi ją odsunąć palcami. Pola główne (`.dw-panel__input`, `.dw-searchbar__input`,
`.leki-searchsheet__input`) mają 16 px od początku, więc reguła jest już w serwisie
przyjęta; przeoczone zostały pola WEWNĄTRZ treści, dokładane przez moduł:

/lek/{slug} input[type=search] „Substancja czynna…" 13 px
select (lista interakcji) 13 px
/substancja/{slug} .leki-filtry__s × 2 (moc, producent) 13 px
.leki-intszuk__i „Szukaj substancji…" 14 px

Dlatego selektor jest RODZAJOWY, a nie listą czterech klas: następne pole
dołożone do treści ma być objęte regułą, zanim ktokolwiek je zmierzy.
`main#main` (1,0,2) bije `.leki-filtry__s` (0,1,0) mimo że `leki.css` wchodzi
do PO tym arkuszu — ta sama droga co §12, bez `!important`.

Próg 64rem, nie „tylko telefon": zoomuje każde urządzenie z Safari, również
iPad w układzie tabletu. Na desktopie pola zostają, jakie były. */
@media (max-width: 63.99rem) {
main#main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
main#main select,
main#main textarea { font-size: 1rem; }
}

/* ── 14.2. Dolny pasek nawigacji a pasek gestu iPhone'a ──
`.leki3-bottombar` stoi `fixed bottom-0` i kończy się na krawędzi ekranu, więc
na iPhonie X i nowszych jego dolne ~34 px leżą POD paskiem gestu systemowego:
podpis zakładki („Szukaj", „Baza") ląduje w pasie, w którym przeciągnięcie
wraca do ekranu głównego zamiast kliknąć zakładkę.

Ten sam chwyt jest już w serwisie — `.sticky-apply-bar` (vendor/style.css) liczy
swoje dolne dopełnienie przez `env(safe-area-inset-bottom)`. Pasek DrWidgeta
został wtedy pominięty; tutaj dostaje tę samą regułę.

PODKŁADKA MUSI ROSNĄĆ RAZEM Z PASKIEM. Pod paskiem stoi rozpórka, która nie
pozwala treści schować się pod nim na końcu strony. Miała sztywne `h-16` (64 px)
przy pasku 53 px, czyli 11 px zapasu — po dodaniu wcięcia pasek urósłby PONAD
rozpórkę i zjadł ostatni wiersz stopki. Obie wartości liczą się więc z jednego
wyrażenia. */
.leki3-bottombar { padding-bottom: env(safe-area-inset-bottom, 0px); }
.leki3-bottombar-rozporka { height: calc(4rem + env(safe-area-inset-bottom, 0px)); }

/* ── 14.3. Szuflada mobilna nie puszcza strony pod spodem ──
Do 2026-09-16 `
` dostawał przy otwartej szufladzie klasę `overflow-hidden`.
Pasek nawigacji nie jest pojemnikiem przewijania strony, więc reguła nie robiła
NIC: przy otwartej szufladzie strona pod spodem jechała dalej (zmierzone na `/`
przy 390 px — scrollY 288 → 882 po geście). Na telefonie widać to natychmiast:
przeciągnięcie palcem po szufladzie przesuwa treść za nią.

Blokada jest DWUCZŁONOWA, dokładnie jak przy bramie oświadczenia na końcu tego
arkusza, i z tego samego powodu: `overflow: hidden` na `` wystarcza
w Chromium, ale rodzina Safari/iOS gestu tym nie zatrzymuje — dopiero ``
przez `:has()` domyka dziurę. Skoro usterka jest telefonowa, człon iOS-owy jest
tu ważniejszy niż w bramie.

Pomiar robi się kółkiem albo klawiszem End, nie `window.scrollBy()`:
`overflow: hidden` zatrzymuje wejście użytkownika, a nie skrypt. */
:root:has(> body.dw-szuflada-otwarta) { overflow: hidden; }
body.dw-szuflada-otwarta { overflow: hidden; }

/* ── 14.4. Cel „Przejdź do treści" chowa się pod przyklejonym pasem ──
Pierwsze, co robi obsługa klawiaturą i VoiceOverem, to skok do `#main`. Cel nie
miał `scroll-margin-top`, a nad treścią stoją dwa przyklejone pasy (belka 46 px
+ pas szukania 60 px = 106 px), więc skok chował 106 px początku treści —
na karcie leku cały nagłówek z nazwą preparatu.

Wartość liczy się z tych samych zmiennych, co kotwice sekcji (`leki.css` §30):
`--dw-dock-h` jest zerem na stronach bez pasa szukania (strona główna)
i 60 px tam, gdzie `` ma klasę `.dw-dock`. Dzięki temu jedna reguła
obsługuje oba układy i nie trzeba jej ruszać przy zmianie wysokości belki. */
#main { scroll-margin-top: calc(var(--farm-nav-h, 56px) + var(--dw-dock-h, 0px) + 2px); }

/* ── 14.5. Cele dotykowe w chromie serwisu ──
WCAG 2.5.8 (AA) stawia podłogę na 24 × 24 px, 2.5.5 (AAA) na 44 × 44. Poniżej
NIE podnosimy gęstych list danych (wiersze interakcji, preparatów, zamienników
mają 24 px i podłogę AA spełniają) — rozepchnięcie ich do 44 px wydłużyłoby
`/substancja` trzykrotnie i pogorszyło stronę. Podnosimy CHROME: elementy, po
które sięga się celowo, jest ich kilka i nic nie kosztuje ich powiększenie.

Zmierzone przy 390 px przed poprawką:
przełącznik motywu 36 × 32 (trzy przyciski obok siebie w belce)
zamknięcie szuflady 36 × 36
indeks liter A–Z 36 × 36, odstęp 4 px (/producenci, /alfabet)
okruchy 66 × 20 (pasek „Baza leków › Leki OTC › Acard")
.leki-mod__cta … × 19–21 („Wszystkie leki z: …")

Przełącznik i zamknięcie dostają pełne 44 px. Okruchy i `__cta` to odnośniki
W ZDANIU — powiększenie ich prostokątów rozepchnęłoby tekst, więc dostają
dopełnienie w pionie: obrys rośnie do 24 px (podłoga AA), a litery stoją tam,
gdzie stały. `min-height` zamiast `height` — napis, który się zawinie, ma się
zmieścić, a nie zostać przycięty. */
/* PRZEŁĄCZNIK MOTYWU ROŚNIE POLEM TRAFIENIA, NIE PROSTOKĄTEM. Belka ma na telefonie
46 px i ta liczba nie jest przypadkowa — `--farm-nav-h` niesie ją do offsetów
wszystkich przyklejonych elementów pod spodem (pas szukania, kotwice, `.leki-quickbar`).
Przycisk 44 px + 2 px dopełnienia grupy + 1 px obrysu dałby 50 px, czyli belka
urosłaby o 4 px i rozjechały się wszystkie te offsety naraz. Dlatego rośnie sama
warstwa dotykowa: `::after` rozciąga prostokąt trafienia w PIONIE do 44 px, obraz
przycisku zostaje 36 × 32 i belka ma nadal 46 px.

Tylko w pionie: trzy segmenty stoją obok siebie w odstępie 2 px, więc rozepchnięcie
ich w poziomie nałożyłoby pola trafienia sąsiadów na siebie — a wtedy wygrywa ten,
który maluje się później, i „Jasny" łapie kliknięcia „Systemu". */
.dw-motyw__opcja { position: relative; }
.dw-motyw__opcja::after {
content: ""; position: absolute; left: 0; right: 0;
top: 50%; height: 44px; transform: translateY(-50%);
}

@media (max-width: 63.99rem) {
/* Wstęga liter A–Z (`/producenci`, `/alfabet`): 36 × 36 w odstępie 4 px, czyli
mniej niż opuszek palca — sąsiednia litera łapie kliknięcie zamiast celowanej.
Zaczep jest na `aria-label` wstęgi, nie na utylitkach Tailwinda w środku:
obie listy to pliki KOPIOWANE z modułu leki.farm i im mniej ich dotykamy,
tym mniej pozycji na liście świadomych rozjazdów (STATUS, „Ile z tego jest kopią").

Koszt zmierzony na 390 px: wierszy jest nadal CZTERY (7 liter w wierszu zamiast 8),
wstęga rośnie ze 180 na 214 px. Wstęga jest przyklejona, więc to jest 34 px mniej
treści przy przewijaniu — na jump-nawigacji tych stron warte trafiania w literę,
w którą się celowało. */
nav[aria-label="Skocz do litery"] a,
nav[aria-label="Skocz do litery"] span { min-width: 44px; height: 44px; }

/* Odnośniki w zdaniu — rośnie tylko obrys dotykowy. `display: inline-block`
jest konieczne: `padding-block` na elemencie `inline` nie powiększa jego
prostokąta trafienia, więc bez tej linii reguła byłaby ozdobą. */
nav[aria-label="Breadcrumb"] a,
main#main .leki-mod__cta {
display: inline-block;
padding-block: .25rem;
min-height: 24px;
}
}

/* ── 14.6. Pas skrótów na stronie głównej: widać, że jedzie dalej ──
`.dw-home__goto` przewija się w poziomie (516 px treści w 358 px pasa przy 390 px
ekranu), ale ostatnia pigułka urywała się w połowie słowa bez żadnego znaku, że za
krawędzią coś jest — wyglądało to na przycięty układ, nie na pas do przewinięcia.

ZASIĘG MASKI JEST ZAWĘŻONY DO WĄSKICH EKRANÓW I TO NIE JEST OSTROŻNOŚĆ NA WYROST.
Pierwsza wersja tej reguły nie miała media query i wygaszała ostatnią pigułkę także
tam, gdzie pas STOI: zmierzone `scrollWidth`/`clientWidth` pasa to 516/288 przy 320 px
i 516/358 przy 390 px (jedzie), ale 720/720 przy 768 px oraz 1192/1192 przy 1280 px
(nie jedzie). `animation-timeline: scroll()` tego nie ratuje — pojemnik bez przewijania
daje oś zerowej długości, więc animacja zostaje w klatce startowej, czyli w zaciemnieniu.
Zapowiadanie treści, której nie ma, jest gorsze niż brak zapowiedzi.

Przystanki i schowany pasek przewijania zostają na KAŻDEJ szerokości: nie rysują
niczego, czego nie ma, a na pasie, który akurat jedzie, pomagają. */
.dw-home__goto {
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
}
.dw-home__goto::-webkit-scrollbar { display: none; }
.dw-home__goto > * { scroll-snap-align: start; }

@media (max-width: 47.99rem) {
.dw-home__goto {
mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
}
/* Pas dojechany do końca nie ma już czego zapowiadać — maska znika, żeby ostatnia
pigułka nie stała wyblakła. Bez wsparcia dla `animation-timeline` warunek nie
wchodzi i maska zostaje stała; to nadal lepszy stan niż ucięte słowo. */
@supports (animation-timeline: scroll(x)) {
.dw-home__goto {
animation: dw-goto-maska linear both;
animation-timeline: scroll(self x);
}
@keyframes dw-goto-maska {
to { mask-image: linear-gradient(to right, #000 100%, transparent 100%); }
}
}
}}

` bierze pomarańcz marki, bo `--brand-500` i `--brand-700` to dwa odcienie tego samego granatu — akcent w granacie na granacie nie byłby akcentem. Nagłówek to DZIŚ SAM `

`, a nazwę strony powtarzały obok trzy inne miejsca (zakładka panelu, pozycja paska, tytuł karty). Sam `