/* Atomy Feuer.pl — elementy wspólne komponentów (atom buduje pierwszy task, który go
   potrzebuje; kolejne rozszerzają, nie duplikują).
   Zbudowane w task01.10 (przycisk, link akcji, chip, etykieta kategorii, pole wyboru,
   wskaźniki karuzeli), wyrównane do sekcji Atoms Feuer DS (task03.03),
   pełna implementacja atomów DS ze stanami — task01.20.
   Ikony SVG (eksport z Figmy): feuer-komponenty/ikony/ i sprite symbole.svg — w komponentach wklejane inline
   z fill/stroke="currentColor", żeby stany mogły je przebarwiać.

   Stany = działające zachowania (docs/budowa-komponentow.md): prawdziwe pseudoklasy
   (:hover, :focus, :active, :disabled, :user-invalid). Galeria statyczna na atomy.html
   wymusza te same style klasami .stan-hover / .stan-wcisniety / .stan-nieaktywny /
   .stan-fokus / .stan-blad — każdy stan ma selektor podwójny (pseudoklasa + klasa stanu).
   Stany niezaprojektowane w DS (fokus przycisków/linków/checkboxa, link odwiedzony) —
   bez wymyślania: task01.19. */

/* Elementy interaktywne: bez systemowego niebieskiego „tap highlight" Chrome
   na dotyku — stany tapnięcia definiujemy sami (np. karta wybrana K25). */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

/* ---- Ikony (inline SVG) ----
   Ikony atomów wyeksportowane z Figmy (task01.20);
   komplet ikon serwisu i inwentarz — nadal otwarte (docs/pytania-otwarte.md poz. 15). */

.ikona {
  display: inline-block;
  width: 1.5rem;   /* 24 px */
  height: 1.5rem;
  flex: none;
}

.ikona-drobna {
  width: 1rem;     /* 16 px — chevron w polu telefonu */
  height: 1rem;
}

.ikona-mala {
  width: 1.25rem;  /* 20 px — caret przełącznika języka */
  height: 1.25rem;
}

.ikona svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Logo (A50; DS: grupa Logo w Header 7:5752, w Header Black 7:5799 — bez osobnego atomu) ----
   Litery w kolorze tekstu (currentColor — na ciemnym bieleją przez token), znak czerwony
   na stałe (w pliku ikony/logo.svg). Desktop 178×30, mobile 131×22 (.logo-maly) — jeden
   plik skalowany wysokością. Zbudowane w task01.09. */

.logo {
  display: inline-flex;
  color: var(--kolor-tekstu);
}

.logo svg {
  display: block;
  height: 1.875rem;   /* 30 px */
  width: auto;
}

.logo-maly svg { height: 1.375rem; }   /* 22 px */

/* ---- Przycisk ----
   Wg DS (frame Buttons, rendery): kształt jednolity — prostokąt bez zaokrągleń,
   wysokość 56, padding poziomy 20, odstęp tekst–ikona 12, tekst 16 Bold.
   (cornerRadius 28 na wrapperach komponentów w JSON — artefakt bez efektu wizualnego.)
   Odmiany: primary czerwony, primary czarny, secondary (obrysowy);
   tertiary z DS = atom „link akcji ze strzałką" niżej.
   Stany wg DS: hover, pressed (:active), disabled oraz „Hover 2" — hover przycisku
   leżącego na tle ciemnym/czerwonym (odmiana .przycisk-odwrocony; DS projektuje
   dla takich teł wyłącznie hover, pozostałe stany bez zmian). */

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;                /* 12 px */
  box-sizing: border-box;
  height: 3.5rem;              /* 56 px */
  padding-inline: 1.25rem;     /* 20 px */
  /* Kolory wypełnienia przez zmienne przycisku — kontekst tła przemapowuje je
     bez walki o specyficzność ze stanami (zasada klas tła, tokeny.css). */
  --przycisk-tlo: var(--kolor-marki);
  --przycisk-tlo-wcisniety: var(--kolor-marki-wcisniety);
  border: 1px solid var(--przycisk-tlo);
  border-radius: 0;            /* także na markupie core/button (core: :where(.wp-block-button__link) 9999px) */
  background: var(--przycisk-tlo);
  color: var(--kolor-tekstu-odwrocony);
  font-family: var(--font-podstawowy);
  font-size: var(--tekst-16);
  line-height: var(--interlinia-16);
  font-weight: var(--waga-gruba);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.przycisk:hover,
.przycisk.stan-hover {
  border-color: var(--kolor-ciemny);
  background: var(--kolor-ciemny);
}

.przycisk:active,
.przycisk.stan-wcisniety {
  border-color: var(--przycisk-tlo-wcisniety);
  background: var(--przycisk-tlo-wcisniety);
}

/* Przycisk w kolorze tła (czerwony na czerwieni, czarny na ciemnym): domyślny
   i wciśnięty przyjmują kolory drugiej odmiany primary — doprojektowanie bez
   projektu w DS, decyzja 2026-09-12 (rejestr spojnosc-designu.md). Hover =
   „Hover 2" (biały, niżej), nieaktywny bez zmian. Reguła czarnego niżej, po
   definicji .przycisk-czarny. */
.tlo-czerwone .przycisk {
  --przycisk-tlo: var(--kolor-ciemny);
  --przycisk-tlo-wcisniety: var(--kolor-ciemny-wcisniety);
}

.przycisk:disabled,
.przycisk[aria-disabled="true"],
.przycisk.stan-nieaktywny {
  border-color: var(--kolor-tla-nieaktywnego);
  background: var(--kolor-tla-nieaktywnego);
  color: var(--kolor-tekstu-pomocniczy);
  cursor: default;
  pointer-events: none;
}

/* Primary czarny */
.przycisk-czarny {
  --przycisk-tlo: var(--kolor-ciemny);
  --przycisk-tlo-wcisniety: var(--kolor-ciemny-wcisniety);
}

.tlo-ciemne .przycisk-czarny {
  --przycisk-tlo: var(--kolor-marki);
  --przycisk-tlo-wcisniety: var(--kolor-marki-wcisniety);
}

.przycisk-czarny:hover,
.przycisk-czarny.stan-hover {
  border-color: var(--kolor-marki);
  background: var(--kolor-marki);
}

/* Secondary (obrysowy) */
.przycisk-drugorzedny {
  background: transparent;
  color: var(--kolor-marki);
}

/* Na tle czerwonym domyślny secondary dostaje ciemny obrys i tekst (wygląd
   hovera z tła białego) — świadome doprojektowanie bez projektu w DS, decyzja
   2026-07-21 (rejestr w spojnosc-designu.md): czerwony obrys znikał na
   czerwieni. Na tle ciemnym zostaje czerwony. Hover na tłach = biały („Hover 2",
   reguły kontekstowe niżej); wciśnięty/nieaktywny na tłach nadal
   niezaprojektowane. */
.tlo-czerwone .przycisk-drugorzedny {
  border-color: var(--kolor-ciemny);
  color: var(--kolor-ciemny);
}

.przycisk-drugorzedny:hover,
.przycisk-drugorzedny.stan-hover {
  background: transparent;
  border-color: var(--kolor-ciemny);
  color: var(--kolor-ciemny);
}

.przycisk-drugorzedny:active,
.przycisk-drugorzedny.stan-wcisniety {
  background: transparent;
  border-color: var(--kolor-marki-wcisniety);
  color: var(--kolor-marki-wcisniety);
}

.przycisk-drugorzedny:disabled,
.przycisk-drugorzedny[aria-disabled="true"],
.przycisk-drugorzedny.stan-nieaktywny {
  background: transparent;
  border-color: var(--kolor-tekstu-pomocniczy);
  color: var(--kolor-tekstu-pomocniczy);
}

/* Niska odmiana — przycisk E-learning w headerze (DS: Header 7:5778 / Header Black 7:5825):
   wysokość 36, padding 20, tekst 14/22 Regular w kolorze tekstu (ciemny; na ciemnym biały
   przez token), obrys czerwony. Projekt headera ≠ atom secondary (56, 16 Bold, tekst
   czerwony) — decyzja 2026-09-12: odmiana niska łączona z secondary
   (.przycisk .przycisk-drugorzedny .przycisk-niski); stany hover / wciśnięty / nieaktywny
   bez projektu w headerze — z odmiany secondary (rejestr spojnosc-designu.md). */
.przycisk-niski {
  height: 2.25rem;
  gap: var(--odstep-1);
  font-size: var(--tekst-14);
  line-height: 1.375rem;
  font-weight: var(--waga-zwykla);
  color: var(--kolor-tekstu);
}

/* „Hover 2" — przycisk na tle ciemnym lub czerwonym (klasa tła .tlo-ciemne /
   .tlo-czerwone na kontenerze — tokeny.css): hover biały z czerwonym tekstem
   (primary), obrysowy biały (secondary). Dotyczy wyłącznie hovera — pozostałe
   stany na tłach niezaprojektowane. .przycisk-odwrocony — przestarzały alias
   per element (do wygaszenia na rzecz klas tła). */
:is(.tlo-ciemne, .tlo-czerwone) .przycisk:hover,
:is(.tlo-ciemne, .tlo-czerwone) .przycisk.stan-hover,
.przycisk-odwrocony:hover,
.przycisk-odwrocony.stan-hover {
  border-color: var(--kolor-tla);
  background: var(--kolor-tla);
  color: var(--kolor-marki);
}

:is(.tlo-ciemne, .tlo-czerwone) .przycisk-drugorzedny:hover,
:is(.tlo-ciemne, .tlo-czerwone) .przycisk-drugorzedny.stan-hover,
.przycisk-drugorzedny.przycisk-odwrocony:hover,
.przycisk-drugorzedny.przycisk-odwrocony.stan-hover {
  background: transparent;
  border-color: var(--kolor-tekstu-odwrocony);
  color: var(--kolor-tekstu-odwrocony);
}

/* Przestarzały (Page 9 pokazywał kształty mieszane — pigułka na top visualu
   produktowym desktop; DS ujednolica prostokąt). Zostaje pusty, bo komponenty
   wciąż go niosą — do zdjęcia przy ich analizie wg kanonu. */
.przycisk-zaokraglony {}

.przycisk-na-cala-szerokosc { display: flex; width: 100%; }

/* „Do góry" (A61, DS: Button 5318:7889 w komponencie footer): primary czerwony
   130×56, padding 16 (nie 20), tekst + strzałka w górę (ikony/strzalka-gora.svg).
   Stany jak .przycisk (DS projektuje tylko domyślny). Działanie: href="#" —
   natywne przewinięcie na początek strony (stopka.css: scroll-behavior). */
.przycisk-do-gory { padding-inline: 1rem; }

/* Strzałka za tekstem bez markupu ikony — przycisk core/button z palety treści (klasę nadaje
   wtyczka; ustawienie „Strzałka" w bloku, domyślnie włączone). Ta sama ikona co i-strzalka
   (strzalka-prawo.svg), rysowana maską w currentColor — przebarwia się ze stanami przycisku. */
.przycisk-strzalka::after {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.7806 12.5306L14.0306 19.2806C13.8899 19.4213 13.699 19.5003 13.5 19.5003C13.301 19.5003 13.1101 19.4213 12.9694 19.2806C12.8286 19.1398 12.7496 18.949 12.7496 18.7499C12.7496 18.5509 12.8286 18.36 12.9694 18.2193L18.4397 12.7499H3.75C3.55109 12.7499 3.36032 12.6709 3.21967 12.5303C3.07902 12.3896 3 12.1988 3 11.9999C3 11.801 3.07902 11.6103 3.21967 11.4696C3.36032 11.3289 3.55109 11.2499 3.75 11.2499H18.4397L12.9694 5.78055C12.8286 5.63982 12.7496 5.44895 12.7496 5.24993C12.7496 5.05091 12.8286 4.86003 12.9694 4.7193C13.1101 4.57857 13.301 4.49951 13.5 4.49951C13.699 4.49951 13.8899 4.57857 14.0306 4.7193L20.7806 11.4693C20.8504 11.539 20.9057 11.6217 20.9434 11.7127C20.9812 11.8038 21.0006 11.9014 21.0006 11.9999C21.0006 12.0985 20.9812 12.1961 20.9434 12.2871C20.9057 12.3782 20.8504 12.4609 20.7806 12.5306Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Link akcji (A43) jako core/button — styl „Link ze strzałką" palety treści (klasy .link-akcji
   i .przycisk-strzalka nadaje wtyczka): strzałka w kolorze marki jak .ikona atomu, w stanie
   wciśniętym, nieaktywnym i na tłach kolorowych w kolorze tekstu; bez paddingu i zaokrąglenia
   przycisku core (:where(.wp-block-button__link)). */
.link-akcji.wp-block-button__link { padding: 0; border-radius: 0; }

.link-akcji.przycisk-strzalka::after { background: var(--kolor-marki); }

.link-akcji.przycisk-strzalka:is(:active, .stan-wcisniety, [aria-disabled="true"], .stan-nieaktywny)::after,
:is(.tlo-ciemne, .tlo-czerwone) .link-akcji.przycisk-strzalka::after { background: currentColor; }

/* ---- Przycisk-ikona (strzałki karuzeli) ----
   Wg DS (frame'y Buttons/Icon button): 32×32, strzałka → (ikony/przycisk-ikona.svg,
   wstecz przez odbicie lustrzane). Stany: hover w DS nie zmienia wyglądu
   (narysowany identycznie jak default), pressed ciemniejszy, disabled szary;
   odmiana biała na tła ciemne/czerwone — .przycisk-ikona-odwrocony
   (pressed pozostaje biały, disabled w kolorze linii). */

.przycisk-ikona {
  display: inline-grid;
  place-content: center;
  box-sizing: border-box;
  width: 2rem;                 /* 32 px */
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kolor-marki);
  cursor: pointer;
}

.przycisk-ikona svg {
  display: block;
  width: 2rem;
  height: 2rem;
}

.przycisk-ikona:active,
.przycisk-ikona.stan-wcisniety { color: var(--kolor-marki-wcisniety); }

.przycisk-ikona:disabled,
.przycisk-ikona.stan-nieaktywny { color: var(--kolor-tekstu-pomocniczy); cursor: default; pointer-events: none; }

/* Na tłach kolorowych: biały, wciśnięty biały (DS: strzałki na tłach bez własnych
   stanów; hover w DS = bez zmiany), nieaktywny z palety stanów tła — wspólny blok
   „Stany na tłach kolorowych" niżej. .przycisk-ikona-odwrocony = przestarzały
   alias per element (biały, nieaktywny w kolorze linii — jak dawniej). */
.przycisk-ikona-odwrocony,
.przycisk-ikona-odwrocony:active,
.przycisk-ikona-odwrocony.stan-wcisniety { color: var(--kolor-tekstu-odwrocony); }

.przycisk-ikona-odwrocony:disabled,
.przycisk-ikona-odwrocony.stan-nieaktywny { color: var(--kolor-linii); }

.przycisk-ikona-wstecz svg { transform: scaleX(-1); }

/* ---- Link tekstowy (DS: frame Links) ----
   16 Bold, kolor marki, podkreślony. Stany: hover czarny, pressed, disabled. */

.link-tekstowy {
  --link-kolor: var(--kolor-marki);   /* kolor domyślny przez zmienną — kontekst tła przemapowuje bez walki ze stanami */
  color: var(--link-kolor);
  font-size: var(--tekst-16);
  line-height: var(--interlinia-16);
  font-weight: var(--waga-gruba);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.link-tekstowy:hover,
.link-tekstowy.stan-hover { color: var(--kolor-ciemny); }

.link-tekstowy:active,
.link-tekstowy.stan-wcisniety { color: var(--kolor-marki-wcisniety); }

.link-tekstowy[aria-disabled="true"],
.link-tekstowy.stan-nieaktywny { color: var(--kolor-tekstu-pomocniczy); pointer-events: none; }

/* ---- Link akcji ze strzałką (w DS: „Tertiary button") ----
   → akcje („Zapisz się już teraz”); ↗ w kaflach/kartach (osobna ikona, nie link).
   Stany: hover cały czerwony, pressed, disabled; na tłach kolorowych DS projektuje
   hover biały („Hover 2") = wygląd odmiany .link-akcji-odwrocony. */

.link-akcji {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--kolor-tekstu);
  font-size: var(--tekst-16);
  line-height: var(--interlinia-16);
  font-weight: var(--waga-gruba);
  text-decoration: none;
}

.link-akcji .ikona { color: var(--kolor-marki); }

/* Jako <button> (wyzwalacz layeru — Terminy): bez wyglądu przycisku przeglądarki. */
button.link-akcji {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-podstawowy);
  cursor: pointer;
}

.link-akcji:hover,
.link-akcji.stan-hover { color: var(--kolor-marki); }

.link-akcji:active,
.link-akcji.stan-wcisniety { color: var(--kolor-marki-wcisniety); }
.link-akcji:active .ikona,
.link-akcji.stan-wcisniety .ikona { color: inherit; }

.link-akcji[aria-disabled="true"],
.link-akcji.stan-nieaktywny { color: var(--kolor-tekstu-pomocniczy); pointer-events: none; }
.link-akcji[aria-disabled="true"] .ikona,
.link-akcji.stan-nieaktywny .ikona { color: inherit; }

/* Na tłach kolorowych: paleta stanów z klasy tła (wspólny blok „Stany na tłach
   kolorowych" niżej). .link-akcji-odwrocony = przestarzały alias per element
   (top visuale bez klasy tła): biały we wszystkich stanach jak dawne „Hover 2". */
.link-akcji-odwrocony,
.link-akcji-odwrocony .ikona,
.link-akcji-odwrocony:hover,
.link-akcji-odwrocony.stan-hover,
.link-akcji-odwrocony:active,
.link-akcji-odwrocony.stan-wcisniety { color: var(--kolor-tekstu-odwrocony); }

/* ---- Link pobrania pliku (DS: frame Links, „Link with icon") ----
   Ikona pobierania 32 (ikony/pobieranie.svg) + nazwa 16/24 Bold + meta „PDF | rozmiar"
   14/22 Regular (oba wiersze w kolorze tekstu). Stany: hover nazwa czerwona podkreślona,
   pressed nazwa i ikona ciemniejsze, disabled całość szara. */

.link-pobrania {
  display: inline-flex;
  align-items: flex-start;
  gap: 1rem;                   /* 16 px */
  color: var(--kolor-tekstu);
  font-size: var(--tekst-16);
  line-height: 1.5rem;         /* 16/24 wg węzłów DS */
  text-decoration: none;
}

.link-pobrania .ikona-pobrania {
  width: 2rem;                 /* 32 px */
  height: 2rem;
  flex: none;
  color: var(--kolor-marki);
}

.link-pobrania .ikona-pobrania svg { display: block; width: 100%; height: 100%; }

.link-pobrania-nazwa { display: block; font-weight: var(--waga-gruba); }

.link-pobrania-meta {
  display: block;
  font-size: var(--tekst-14);
  line-height: 1.375rem;       /* 14/22 wg węzłów DS */
}

.link-pobrania:hover .link-pobrania-nazwa,
.link-pobrania.stan-hover .link-pobrania-nazwa {
  color: var(--kolor-marki);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.link-pobrania:active .link-pobrania-nazwa,
.link-pobrania.stan-wcisniety .link-pobrania-nazwa {
  color: var(--kolor-marki-wcisniety);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---- Stany na tłach kolorowych (link tekstowy, link akcji, link pobrania, przycisk-ikona) ----
   Wg projektu linku pobrania na stronie „check" FeuerDS (5327:4732 czerwony, 5364:6325 ciemny;
   stan 2026-09-13), rozciągniętego na pozostałe linki i strzałki decyzją użytkownika 2026-09-14
   (rejestr spojnosc-designu.md): cały element (tekst, ikona, meta) zmienia kolor ze stanem —
   spoczynek biały, hover jasny, wciśnięty czarny (czerwone tło) / czerwony (ciemne tło),
   nieaktywny szary; wartości w zmiennych --stan-* klas tła (tokeny.css). Wyjątki: przycisk-ikona
   bez zmiany na hover i wciśnięciu (DS: hover strzałki = domyślny), link tekstowy zachowuje
   podkreślenie, link pobrania podkreśla nazwę na hover/wciśnięciu (reguły bazowe). */
:is(.tlo-ciemne, .tlo-czerwone) :is(.link-tekstowy, .link-akcji, .link-pobrania, .przycisk-ikona) {
  --link-kolor: var(--kolor-tekstu-odwrocony);
  color: var(--kolor-tekstu-odwrocony);
}

:is(.tlo-ciemne, .tlo-czerwone) :is(.link-akcji, .link-pobrania) :is(.ikona, .ikona-pobrania, .link-pobrania-nazwa),
:is(.tlo-ciemne, .tlo-czerwone) :is(.link-akcji, .link-pobrania):is(:hover, .stan-hover, :active, .stan-wcisniety, [aria-disabled="true"], .stan-nieaktywny) :is(.ikona, .ikona-pobrania, .link-pobrania-nazwa) { color: inherit; }

:is(.tlo-ciemne, .tlo-czerwone) :is(.link-tekstowy, .link-akcji, .link-pobrania):is(:hover, .stan-hover) { color: var(--stan-hover); }

:is(.tlo-ciemne, .tlo-czerwone) :is(.link-tekstowy, .link-akcji, .link-pobrania):is(:active, .stan-wcisniety) { color: var(--stan-wcisniety); }

:is(.tlo-ciemne, .tlo-czerwone) :is(.link-tekstowy, .link-akcji, .link-pobrania):is([aria-disabled="true"], .stan-nieaktywny),
:is(.tlo-ciemne, .tlo-czerwone) .przycisk-ikona:is(:disabled, .stan-nieaktywny) { color: var(--stan-nieaktywny); }

.link-pobrania:active .ikona-pobrania,
.link-pobrania.stan-wcisniety .ikona-pobrania { color: var(--kolor-marki-wcisniety); }

.link-pobrania[aria-disabled="true"],
.link-pobrania.stan-nieaktywny { color: var(--kolor-tekstu-pomocniczy); pointer-events: none; }
.link-pobrania[aria-disabled="true"] .ikona-pobrania,
.link-pobrania.stan-nieaktywny .ikona-pobrania { color: var(--kolor-tekstu-pomocniczy); }

/* ---- Tag / badge (DS: frame Icons, „Badge") ----
   Pigułka 32, r 16, ikona 24 + tekst 14/20 Semibold w kapitalikach, tła wg odmian
   semantycznych (tokeny --kolor-tag-*). Ikony: ikony/badge-*.svg. Bez stanów w DS. */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;               /* 2 px (korektor odstępu z DS) */
  height: 2rem;                /* 32 px */
  padding-inline: 0.75rem;     /* 12 px */
  border-radius: 1rem;
  color: var(--kolor-ciemny); /* pigułka ma zawsze jasne tło — tekst nie przełącza się na tłach kolorowych */
  font-family: var(--font-podstawowy);
  font-size: var(--tekst-14);
  line-height: 1.25rem;        /* 14/20 */
  font-weight: var(--waga-polgruba);
  font-variant-caps: all-small-caps;
  white-space: nowrap;
}

.tag-nowosc { background: var(--kolor-tag-nowosc); }
.tag-wymog-prawny { background: var(--kolor-tag-wymog-prawny); }
.tag-zmiana-przepisow { background: var(--kolor-tag-zmiana-przepisow); }
/* „Ważne teraz" bez projektu w DS: do czasu projektu pigułka neutralna (biała) z ikoną nowości (spojnosc-designu.md). */
.tag-wazne-teraz { background: var(--kolor-tla); }

/* ---- Chip — ciemna pigułka tekstowa (belka zapowiedzi; w Figmie z ikoną-placeholderem,
   ikona dojdzie z kompletem od projektanta). Wartości wg frame'u komponentu FeuerDS
   7:6063 „Badge dodatkowe": 32 px, tekst 14/20 Regular, padding 12 + 2 px „Padding
   Corrector" = 14 px (stan 2026-09-13, task01.10). ---- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;                /* 32 px */
  padding-inline: 0.875rem;    /* 14 px */
  border-radius: 1rem;
  background: var(--kolor-ciemny);
  color: var(--kolor-tekstu-odwrocony);
  font-size: var(--tekst-14);
  line-height: 1.25rem;        /* 14/20 */
  font-weight: var(--waga-zwykla);
}

/* Na tle ciemnym chip dostaje tło w kolorze wciśniętego czarnego (#010101) —
   ciemna pigułka zlewała się z tłem; doprojektowanie bez projektu w DS,
   decyzja 2026-09-12 (rejestr spojnosc-designu.md). */
.tlo-ciemne .chip { background: var(--kolor-ciemny-wcisniety); }

/* ---- Etykieta kategorii sekcji otwierających ----
   Drobny tekst z czerwonym podkreśleniem 4 px. Reguła szerokości (decyzja
   2026-07-21): podkreślenie zawsze pod pierwszymi dwoma słowami tekstu (jedno
   słowo → pod jednym) — szerokość mierzy js/etykieta-kategorii.js i wpisuje
   w --szerokosc-podkreslenia (fallback bez JS: 91 px = „Wsparcie BHP" z DS;
   w samym DS linie rysowane ręcznie: 91/56 px = dokładnie dwa pierwsze słowa).
   Odstęp linii: wariant mobile DS (linia centrowana 4 px w odległości 4 pod
   boksem tekstu → 2 px do krawędzi); desktopowe 9 px odrzucone jako za duże
   (decyzja 2026-07-21). W inwentarzu figuruje jako „chip kategorii” —
   w Figmie to nie pigułka. */

.etykieta-kategorii {
  display: block;
  width: fit-content;
  font-size: var(--tekst-14);
  line-height: 1.5rem;         /* 14/24 */
  color: var(--kolor-tekstu);
}

.etykieta-kategorii::after {
  content: "";
  display: block;
  width: var(--szerokosc-podkreslenia, 5.6875rem);
  max-width: 100%;
  margin-top: 0.125rem;        /* 2 px */
  border-top: 0.25rem solid var(--kolor-marki);
}

/* Na tle kolorowym etykieta przełącza się sama (czyta --kolor-tekstu, który
   przemapowuje klasa tła); .etykieta-kategorii-odwrocona = przestarzały alias
   dla użyć bez klasy tła (zdjęcia top visuali). Podkreślenie na tle ciemnym
   zostaje czerwone (tak w DS); na tle czerwonym czarne #010101 — ginęło na
   czerwieni; doprojektowanie bez projektu w DS, decyzja 2026-09-12 (rejestr). */
.etykieta-kategorii-odwrocona { color: var(--kolor-tekstu-odwrocony); }
.tlo-czerwone .etykieta-kategorii::after { border-top-color: var(--kolor-ciemny-wcisniety); }

/* Mobilny rząd etykiety: strzałka wstecz + etykieta (na frame'ach mobile sekcji otwierających) */
.etykieta-rzad {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.etykieta-rzad .ikona { transform: scaleX(-1); } /* strzałka wstecz */

/* ---- Pola formularza (DS: frame'y Input / Input phone) ----
   Etykieta 14/20 nad polem (gwiazdka wymagalności czerwona), pole 56 r 2
   z paddingiem 16, tekst 16/24 (placeholder szary), tekst błędu 14/20 pod polem;
   odstępy pionowe 4. Stany pola: initial (linia), hover (ciemny), fokus/active
   (ciemny, czerwony kursor tekstowy), filled, error (czerwony obrys — tylko input
   tekstowy i select; telefon wg DS zostaje z szarym obrysem), disabled (tło
   nieaktywne, teksty szare). Dynamicznie błąd realizuje :user-invalid. */

.pole {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;                /* 4 px */
  font-family: var(--font-podstawowy);
}

.pole-etykieta {
  font-size: var(--tekst-14);
  line-height: 1.25rem;        /* 14/20 */
  color: var(--kolor-tekstu);
}

.pole-etykieta .wymagane { color: var(--kolor-marki); }

.pole-wejscie {
  box-sizing: border-box;
  height: 3.5rem;              /* 56 px */
  padding-inline: 1rem;        /* 16 px */
  border: 1px solid var(--kolor-linii);
  border-radius: 0.125rem;     /* 2 px */
  background: var(--kolor-tla);
  color: var(--kolor-tekstu);
  font-family: var(--font-podstawowy);
  font-size: var(--tekst-16);
  line-height: 1.5rem;         /* 16/24 wg węzłów DS */
  caret-color: var(--kolor-marki);
}

.pole-wejscie::placeholder { color: var(--kolor-tekstu-pomocniczy); opacity: 1; }

.pole-wejscie:hover,
.pole-wejscie.stan-hover { border-color: var(--kolor-ciemny); }

.pole-wejscie:focus,
.pole-wejscie.stan-fokus {
  border-color: var(--kolor-ciemny);
  outline: none;               /* stan fokusa = obrys pola wg DS (Active) */
}

.pole-wejscie:disabled,
.pole-wejscie.stan-nieaktywny {
  background: var(--kolor-tla-nieaktywnego);
  border-color: var(--kolor-linii);
  color: var(--kolor-tekstu-pomocniczy);
}

.pole.stan-nieaktywne .pole-etykieta { color: var(--kolor-tekstu-pomocniczy); }

/* Błąd: galeria klasą na .pole, dynamicznie :user-invalid (po interakcji użytkownika) */
.pole.stan-blad .pole-wejscie:not(.pole-telefon-wejscie),
.pole-wejscie:user-invalid { border-color: var(--kolor-marki); }

.pole-tekst-bledu {
  font-size: var(--tekst-14);
  line-height: 1.25rem;        /* 14/20 */
  color: var(--kolor-marki);
}

.pole .pole-tekst-bledu { display: none; }
.pole.stan-blad .pole-tekst-bledu { display: block; }
.pole:has(.pole-wejscie:user-invalid) .pole-tekst-bledu { display: block; }

/* Pole telefonu: flaga kraju 20 + chevron 16 + maska prefiksu (atrapa statyczna).
   Hover wg DS #010101 (rozjazd kosmetyczny z inputem — task03.03), error bez
   czerwonego obrysu (nierozstrzygnięte — rejestr w spojnosc-designu.md). */

.pole-telefon-wejscie {
  display: flex;
  align-items: center;
  gap: 0.5rem;                 /* 8 px */
}

.pole-telefon-wejscie:hover,
.pole-telefon-wejscie.stan-hover { border-color: var(--kolor-ciemny-wcisniety); }

.pole-telefon-wejscie:focus-within,
.pole-telefon-wejscie.stan-fokus { border-color: var(--kolor-ciemny); }

.pole-telefon-wejscie.stan-nieaktywny { background: var(--kolor-tla-nieaktywnego); color: var(--kolor-tekstu-pomocniczy); border-color: var(--kolor-linii); }

.pole-telefon-kraj {
  display: flex;
  align-items: center;
  gap: 0.5rem;                 /* 8 px */
  flex: none;
}

.pole-telefon-maska { color: var(--kolor-tekstu-pomocniczy); white-space: nowrap; }
.pole-telefon-maska .wpisane { color: var(--kolor-tekstu); }
.pole-telefon-wejscie.stan-nieaktywny .pole-telefon-maska,
.pole-telefon-wejscie.stan-nieaktywny .pole-telefon-maska .wpisane { color: var(--kolor-tekstu-pomocniczy); }

.flaga {
  display: block;
  width: 1.25rem;              /* 20 px */
  height: 1.25rem;
}

/* Flaga w polu nieaktywnym: czerwień → szarość (przybliżenie filtrem;
   DS maluje czerwoną połówkę kolorem pomocniczym; chevron szarzeje przez currentColor) */
.pole-telefon-wejscie.stan-nieaktywny .flaga { filter: grayscale(1) brightness(1.25); }

/* Kraj nierozpoznany (prefiks spoza kompletu flag): pusty neutralny placeholder —
   decyzja 2026-07-21, rejestr w spojnosc-designu.md */
.flaga-nierozpoznana {
  box-sizing: border-box;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--kolor-tla-nieaktywnego);
  border: 1px solid var(--kolor-linii);
}

/* ---- Pole wyboru (select) — DS: frame Drop down (104:835) ----
   Pole 56 r 2, padding 16, tekst 16/24 (placeholder .zastepczy szary), chevron 24.
   Szerokość nadaje komponent; tekst dłuższy od pola ucięty wielokropkiem, chevron zawsze
   w obrysie, pełny tekst w liście (DS bez projektu przepełnienia; decyzja 2026-09-26, rejestr).
   Stany: initial (linia), hover (ciemny), active = rozwinięty — [aria-expanded="true"]
   przełączane klikiem (js/rozwijane.js): ciemny obrys, chevron w górę; filled (tekst
   ciemny); disabled (tło nieaktywne, tekst i chevron szare). Bez stanu błędu — DS go
   nie projektuje (decyzja 2026-09-10, rejestr spojnosc-designu.md). Fokus klawiaturą
   niezaprojektowany — task01.19. Rozwinięta lista niezaprojektowana — biblioteka
   przy formularzach (task01.15). */

.pole-wyboru {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;                /* 12 px */
  box-sizing: border-box;
  height: 3.5rem;              /* 56 px */
  padding-inline: 1rem;
  border: 1px solid var(--kolor-linii);
  border-radius: 0.125rem;
  background: var(--kolor-tla);
  color: var(--kolor-tekstu);
  font-family: var(--font-podstawowy);
  font-size: var(--tekst-16);
  line-height: 1.5rem;         /* 16/24 */
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.pole-wyboru > span {
  flex: 1;
  min-width: 0;                /* pole węższe od tekstu → wielokropek zamiast wypchnięcia chevronu */
  overflow: hidden;
  text-overflow: ellipsis;
}
.pole-wyboru > .ikona { flex: none; }
.pole-wyboru .zastepczy { color: var(--kolor-tekstu-pomocniczy); }

.pole-wyboru:hover,
.pole-wyboru.stan-hover,
.pole-wyboru[aria-expanded="true"],
.pole-wyboru.stan-aktywny { border-color: var(--kolor-ciemny); }

.pole-wyboru[aria-expanded="true"] .ikona,
.pole-wyboru.stan-aktywny .ikona { transform: scaleY(-1); }   /* chevron w górę */

.pole-wyboru:disabled,
.pole-wyboru.stan-nieaktywny {
  background: var(--kolor-tla-nieaktywnego);
  border-color: var(--kolor-linii);
  color: var(--kolor-tekstu-pomocniczy);
  cursor: default;
  pointer-events: none;
}

/* Lista opcji selecta (DS: frame Drop down, komponent „Select option list", stan 2026-09-12):
   2 px pod polem, biała, obrys linii, r 2, cień 0 4 10 / 15%, padding 16
   pion / 12 poziom, odstęp pozycji 16, pozycje 16/22.4, wybrana ([aria-selected]) Bold.
   Hover pozycji niezaprojektowany — tło pola nieaktywnego #e3e8f1 (decyzja użytkownika
   2026-09-12, rejestr). Lista zawsze jasna → tekst na stałe ciemny (jak przełącznik języka).
   Wybór pozycji (js/rozwijane.js) przenosi tekst do pola i zamyka listę.
   Szerokość: nie węższa od pola, rośnie do najdłuższej opcji (opcje w jednym wierszu), nie szersza
   od ekranu — dłuższa opcja łamie się; max-width ustawia js/rozwijane.js przy otwarciu (DS rysuje
   listę szerokości pola z krótkimi opcjami; decyzja 2026-09-26, rejestr). */
.wybor {
  position: relative;
  display: inline-block;
}

.pole-wyboru-lista {
  display: none;
  position: absolute;
  top: calc(100% + 0.125rem);  /* 2 px pod polem */
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  min-width: 100%;
  width: max-content;
  margin: 0;
  padding: 0.5rem 0;           /* 8 px + 8 px paddingu pozycji = 16 px z DS; 12 px poziom daje pozycja, żeby hover sięgał krawędzi */
  list-style: none;
  background: var(--kolor-tla);
  border: 1px solid var(--kolor-linii);
  border-radius: 0.125rem;
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.15);
  color: var(--kolor-ciemny);
  font-family: var(--font-podstawowy);
  font-size: var(--tekst-16);
  line-height: var(--interlinia-16);
}

.wybor:has(> .pole-wyboru[aria-expanded="true"], > .pole-wyboru.stan-aktywny) .pole-wyboru-lista { display: grid; }

.pole-wyboru-lista li {
  padding: 0.5rem 0.75rem;     /* 8 px pion = połowa odstępu 16 z DS: podświetlenia sąsiednich pozycji stykają się (decyzja 2026-09-12); 12 px poziom */
  cursor: pointer;
}

.pole-wyboru-lista li[aria-selected="true"] { font-weight: var(--waga-gruba); }

.pole-wyboru-lista li:hover,
.pole-wyboru-lista li.stan-hover { background: var(--kolor-tla-nieaktywnego); }

/* ---- Przełącznik języka (DS: frame Language 108:5319) ----
   Pigułka 36: padding poziomy 12, flaga 16 (obrys w kolorze tła nieaktywnego),
   kod języka 14/22, caret 20 (ikony/caret-dol.svg), odstępy 4, obrys linii.
   Otwarta ([aria-expanded="true"], js/rozwijane.js): obrys ciemny, caret w górę,
   pod pigułką lista języków — obrys linii, cień 0 0 4 / 15%, padding 16/12,
   odstęp pozycji 16; bieżący ([aria-current]) 16 Bold, pozostałe 14/22. Lista
   zawsze jasna → tekst na stałe ciemny (jak tag). Na tle ciemnym (widoki Header
   Black): obrys pomocniczy na ciemnym, tekst biały z tokenu; stan otwarty i lista
   na tłach kolorowych niezaprojektowane. Przełączanie języka = nawigacja (epic04)
   — w makiecie pozycje są linkami bez logiki. Fokus — task01.19. */

.jezyk {
  position: relative;
  display: inline-block;
  font-family: var(--font-podstawowy);
}

.jezyk-przycisk {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;                /* 4 px */
  box-sizing: border-box;
  height: 2.25rem;             /* 36 px */
  padding: 0 0.75rem;          /* 12 px */
  border: 1px solid var(--kolor-linii);
  background: transparent;
  color: var(--kolor-tekstu);
  font-family: inherit;
  font-size: var(--tekst-14);
  line-height: 1.375rem;       /* 14/22 */
  cursor: pointer;
}

.flaga-mala {
  box-sizing: border-box;
  width: 1rem;                 /* 16 px */
  height: 1rem;
  border: 1px solid var(--kolor-tla-nieaktywnego);
  border-radius: 50%;
}

.jezyk-przycisk[aria-expanded="true"],
.jezyk-przycisk.stan-aktywny { border-color: var(--kolor-ciemny); }

.jezyk-przycisk[aria-expanded="true"] .ikona,
.jezyk-przycisk.stan-aktywny .ikona { transform: scaleY(-1); }   /* caret w górę */

.tlo-ciemne .jezyk-przycisk { border-color: var(--kolor-pomocniczy-na-ciemnym); }

.jezyk-lista {
  display: none;
  position: absolute;
  top: calc(100% + 0.125rem);  /* 2 px pod pigułką */
  left: 0;
  z-index: 1;
  margin: 0;
  padding: 1rem 0.75rem;       /* 16 / 12 */
  list-style: none;
  gap: 1rem;                   /* 16 px */
  background: var(--kolor-tla);
  border: 1px solid var(--kolor-linii);
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.15);
  color: var(--kolor-ciemny);
  white-space: nowrap;
}

.jezyk:has(> .jezyk-przycisk[aria-expanded="true"], > .jezyk-przycisk.stan-aktywny) .jezyk-lista { display: grid; }

.jezyk-lista a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
  font-size: var(--tekst-14);
  line-height: 1.375rem;       /* 14/22 */
}

.jezyk-lista a[aria-current] {
  font-size: var(--tekst-16);
  line-height: var(--interlinia-16);
  font-weight: var(--waga-gruba);
}

/* ---- Checkbox zgody (DS: frame Check Box) ----
   Pudełko 24, r 2, czerwony znacznik (dokładna ścieżka z DS), tekst zgody 14/22.
   Stany: initial (linia), hover (ciemny), checked, error (czerwony obrys pustego),
   disabled (tło nieaktywne, znacznik szary).
   Tekst zgody z sekcji (task03.45): .zgoda-tresc (formaty wg A40, .tresc) = <label> z pierwszym
   akapitem — klik zaznacza — i opis pod nim (reszta tekstu: akapity, listy) bez zaznaczania. */

.zgoda {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;                 /* 8 px */
  font-family: var(--font-podstawowy);
  font-size: var(--tekst-14);
  line-height: 1.375rem;       /* 14/22 wg węzłów DS */
  color: var(--kolor-tekstu);
}

.zgoda-tresc { flex: 1; min-width: 0; }
.zgoda-tresc label { display: block; cursor: pointer; }
.zgoda-opis { margin-block-start: var(--odstep-2); }   /* 16 — jak między akapitami treści */
.zgoda-opis > :last-child { margin-block-end: 0; }

.zgoda-znacznik {
  appearance: none;
  box-sizing: border-box;
  width: 1.5rem;               /* 24 px */
  height: 1.5rem;
  margin: 0;
  flex: none;
  border: 1px solid var(--kolor-linii);
  border-radius: 0.125rem;     /* 2 px */
  background: var(--kolor-tla);
  display: grid;
  place-content: center;
  cursor: pointer;
}

.zgoda-znacznik:hover,
.zgoda-znacznik.stan-hover { border-color: var(--kolor-ciemny); }

.zgoda-znacznik:checked::before {
  content: "";
  width: 1.011875rem;          /* 16.19 px */
  height: 0.714375rem;         /* 11.43 px */
  background: var(--kolor-marki);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.19 11.43"><path d="M5 11.1667L0 5.975L1.20083 4.81833L5.61167 9.39917L15.0117 0L16.19 1.17833L6.19 11.1783C5.975 11.3925 5.42167 11.6033 5 11.1667Z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.19 11.43"><path d="M5 11.1667L0 5.975L1.20083 4.81833L5.61167 9.39917L15.0117 0L16.19 1.17833L6.19 11.1783C5.975 11.3925 5.42167 11.6033 5 11.1667Z"/></svg>') center / contain no-repeat;
}

.zgoda-znacznik.stan-blad,
.zgoda.stan-blad .zgoda-znacznik,
.zgoda-znacznik:user-invalid { border-color: var(--kolor-marki); }

.zgoda-znacznik:disabled,
.zgoda-znacznik.stan-nieaktywny {
  background: var(--kolor-tla-nieaktywnego);
  border-color: var(--kolor-linii);
  cursor: default;
}

.zgoda-znacznik:disabled::before,
.zgoda-znacznik.stan-nieaktywny::before { background: var(--kolor-tekstu-pomocniczy); }

/* ---- Wskaźniki karuzeli — poziome kreski 64×4, aktywna w kolorze marki.
   Wg DS (frame Carusele): na jasnym tle nieaktywne w kolorze linii, na tle
   kolorowym białe (klasa tła na kontenerze; .wskazniki-karuzeli-odwrocone =
   przestarzały alias per element). Strzałki: atom .przycisk-ikona wyżej.
   Drugi zestaw DS — kropki ze strzałkami — niżej (.kropki-karuzeli). ---- */

.wskazniki-karuzeli {
  display: flex;
  gap: 0.25rem;
}

.wskazniki-karuzeli .wskaznik {
  width: 4rem;                 /* 64 px */
  height: 0.25rem;             /* 4 px */
  background: var(--kolor-linii);
}

:is(.tlo-ciemne, .tlo-czerwone) .wskazniki-karuzeli .wskaznik,
.wskazniki-karuzeli-odwrocone .wskaznik { background: var(--kolor-tla); }

.wskazniki-karuzeli .wskaznik-aktywny,
:is(.tlo-ciemne, .tlo-czerwone) .wskazniki-karuzeli .wskaznik-aktywny,
.wskazniki-karuzeli-odwrocone .wskaznik-aktywny { background: var(--kolor-marki); }

/* Na tle czerwonym aktywna kreska czarna #010101 — czerwona ginęła na czerwieni;
   doprojektowanie bez projektu w DS, decyzja 2026-09-12 (rejestr). */
.tlo-czerwone .wskazniki-karuzeli .wskaznik-aktywny { background: var(--kolor-ciemny-wcisniety); }

/* ---- Wskaźniki kropkowe karuzeli ze strzałkami (DS: frame Carusele, zestaw 108:5185) ----
   6 kropek 12 px w odstępie 8 (aktywna w kolorze marki, reszta w kolorze linii),
   strzałki = atom .przycisk-ikona w odstępie 24. Na początku/końcu listy strzałka
   znika, ale zajmuje miejsce (:disabled → visibility hidden — kropki nie przeskakują).
   Zaprojektowane tylko na białym — na tłach kolorowych kropki bez przemapowań. */

.kropki-karuzeli {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;                 /* 24 px */
}

.kropki-karuzeli .przycisk-ikona:disabled { visibility: hidden; }

.kropki {
  display: flex;
  gap: 0.5rem;                 /* 8 px */
}

.kropka {
  width: 0.75rem;              /* 12 px */
  height: 0.75rem;
  border-radius: 50%;
  background: var(--kolor-linii);
}

.kropka-aktywna { background: var(--kolor-marki); }

/* Na tle czerwonym aktywna kropka czarna #010101 (jak aktywna kreska) — czerwona
   ginęła na czerwieni; doprojektowanie bez projektu w DS, decyzja 2026-09-12 (rejestr). */
.tlo-czerwone .kropka-aktywna { background: var(--kolor-ciemny-wcisniety); }