/*
 * baza.css - szkielet wspólny obu serwisów (M3.1).
 *
 * Tu są wyłącznie rzeczy niezależne od tożsamości: reset, siatka, skala typograficzna, komponenty
 * i klasy szerokości słupków. Kolory, fonty i detal wnosi plik motywu przez wartości tokenów.
 * Każda wartość ad hoc w tym pliku (kolor z palca, rozmiar spoza skali) jest błędem: dwa skiny
 * trzymają się razem tylko dlatego, że różnią się WYŁĄCZNIE wartościami tokenów.
 *
 * Zakazy z wytycznych §2 są tu widoczne przez brak: żadnych gradientów, żadnych cieni na kartach,
 * żadnego centrowania całości, żadnych markerów emoji.
 */

/* ---------------------------------------------------------------------------------------------
 * 1. Reset - minimalny, bez normalize.css (waga strony to też UX, wytyczne §6)
 * ------------------------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
table {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ---------------------------------------------------------------------------------------------
 * 2. Skala typograficzna i odstępy - zdefiniowane raz, bez wartości ad hoc (wytyczne §3)
 * ------------------------------------------------------------------------------------------- */

:root {
  /* Skala 1.200 (minor third) od 16 px; kwota główna dostaje własny, większy stopień. */
  --skala-xs: 0.833rem;
  --skala-s: 0.926rem;
  --skala-m: 1rem;
  --skala-l: 1.2rem;
  --skala-xl: 1.44rem;
  --skala-xxl: 1.728rem;
  --skala-kwota: clamp(2.4rem, 1.6rem + 3.6vw, 3.6rem);

  --odstep-1: 0.25rem;
  --odstep-2: 0.5rem;
  --odstep-3: 0.75rem;
  --odstep-4: 1rem;
  --odstep-5: 1.5rem;
  --odstep-6: 2rem;
  --odstep-7: 3rem;

  --miara-tekstu: 65ch;
  --szerokosc-strony: 68rem;
  --wysokosc-celu: 2.75rem; /* 44 px - cel dotykowy, wytyczne §6 */
}

/* ---------------------------------------------------------------------------------------------
 * 3. Szkielet strony
 * ------------------------------------------------------------------------------------------- */

body {
  /* Tło jawne zawsze - token, nigdy „domyślnie białe" (wytyczne §3). */
  background: var(--kolor-tlo);
  color: var(--kolor-tekst);
  font-family: var(--font-tekst);
  font-size: var(--skala-m);
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.strona {
  width: 100%;
  max-width: var(--szerokosc-strony);
  margin-inline: auto;
  padding-inline: var(--odstep-4);
}

main {
  flex: 1 0 auto;
  padding-block: var(--odstep-5) var(--odstep-7);
}

h1,
h2,
h3 {
  font-family: var(--font-naglowki);
  line-height: 1.2;
  font-weight: 600;
  /* Tekst nagłówka wyrównany do lewej: „wszystko wycentrowane" jest na czarnej liście (§2). */
  text-align: left;
  text-wrap: balance;
}

h1 {
  font-size: var(--skala-xxl);
}

h2 {
  font-size: var(--skala-xl);
  margin-block: var(--odstep-6) var(--odstep-3);
}

h3 {
  font-size: var(--skala-l);
  margin-block: var(--odstep-5) var(--odstep-2);
}

p,
li {
  max-width: var(--miara-tekstu);
}

p + p {
  margin-top: var(--odstep-3);
}

a {
  color: var(--kolor-akcent-tekst);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--kolor-akcent);
  outline-offset: 2px;
}

.tylko-dla-czytnika {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pomijacz {
  position: absolute;
  left: -999px;
  top: var(--odstep-2);
  background: var(--kolor-tlo-podniesione);
  color: var(--kolor-tekst);
  padding: var(--odstep-2) var(--odstep-3);
  border: 1px solid var(--kolor-linia);
  z-index: 10;
}

.pomijacz:focus {
  left: var(--odstep-4);
}

/* ---------------------------------------------------------------------------------------------
 * 4. Nagłówek i stopka
 * ------------------------------------------------------------------------------------------- */

.naglowek-serwisu {
  border-bottom: 1px solid var(--kolor-linia);
  background: var(--kolor-tlo);
}

.naglowek-serwisu .strona {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-3);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--odstep-3);
}

.marka {
  font-family: var(--font-naglowki);
  font-weight: 700;
  font-size: var(--skala-l);
  color: var(--kolor-tekst);
  text-decoration: none;
  letter-spacing: var(--trop-marki, 0);
}

.marka:hover {
  text-decoration: underline;
}

.nawigacja {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-4);
  align-items: center;
  font-size: var(--skala-s);
}

.stopka-serwisu {
  border-top: 1px solid var(--kolor-linia);
  background: var(--kolor-tlo-podniesione);
  font-size: var(--skala-s);
  color: var(--kolor-tekst-slaby);
}

.stopka-serwisu .strona {
  padding-block: var(--odstep-5);
  display: grid;
  gap: var(--odstep-3);
}

/* ---------------------------------------------------------------------------------------------
 * 5. Liczby - tabular-nums obowiązkowo w obu serwisach (ADR-PSEO-006)
 * ------------------------------------------------------------------------------------------- */

.liczba,
.kwota,
td.liczba,
.slupek-kwota {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------------------------------------------------------------------------------------------
 * 6. Szerokości słupków - klasy zamiast atrybutu style (CSP bez unsafe-inline, brief §3.3)
 *
 * 101 reguł to cena za CSP bez wyjątków. Alternatywa `style-src-attr 'unsafe-inline'` otwierałaby
 * atrybuty stylu na całej witrynie dla jednej wygody, więc została odrzucona.
 * ------------------------------------------------------------------------------------------- */

.szer-0 {
  width: 0%;
}
.szer-1 {
  width: 1%;
}
.szer-2 {
  width: 2%;
}
.szer-3 {
  width: 3%;
}
.szer-4 {
  width: 4%;
}
.szer-5 {
  width: 5%;
}
.szer-6 {
  width: 6%;
}
.szer-7 {
  width: 7%;
}
.szer-8 {
  width: 8%;
}
.szer-9 {
  width: 9%;
}
.szer-10 {
  width: 10%;
}
.szer-11 {
  width: 11%;
}
.szer-12 {
  width: 12%;
}
.szer-13 {
  width: 13%;
}
.szer-14 {
  width: 14%;
}
.szer-15 {
  width: 15%;
}
.szer-16 {
  width: 16%;
}
.szer-17 {
  width: 17%;
}
.szer-18 {
  width: 18%;
}
.szer-19 {
  width: 19%;
}
.szer-20 {
  width: 20%;
}
.szer-21 {
  width: 21%;
}
.szer-22 {
  width: 22%;
}
.szer-23 {
  width: 23%;
}
.szer-24 {
  width: 24%;
}
.szer-25 {
  width: 25%;
}
.szer-26 {
  width: 26%;
}
.szer-27 {
  width: 27%;
}
.szer-28 {
  width: 28%;
}
.szer-29 {
  width: 29%;
}
.szer-30 {
  width: 30%;
}
.szer-31 {
  width: 31%;
}
.szer-32 {
  width: 32%;
}
.szer-33 {
  width: 33%;
}
.szer-34 {
  width: 34%;
}
.szer-35 {
  width: 35%;
}
.szer-36 {
  width: 36%;
}
.szer-37 {
  width: 37%;
}
.szer-38 {
  width: 38%;
}
.szer-39 {
  width: 39%;
}
.szer-40 {
  width: 40%;
}
.szer-41 {
  width: 41%;
}
.szer-42 {
  width: 42%;
}
.szer-43 {
  width: 43%;
}
.szer-44 {
  width: 44%;
}
.szer-45 {
  width: 45%;
}
.szer-46 {
  width: 46%;
}
.szer-47 {
  width: 47%;
}
.szer-48 {
  width: 48%;
}
.szer-49 {
  width: 49%;
}
.szer-50 {
  width: 50%;
}
.szer-51 {
  width: 51%;
}
.szer-52 {
  width: 52%;
}
.szer-53 {
  width: 53%;
}
.szer-54 {
  width: 54%;
}
.szer-55 {
  width: 55%;
}
.szer-56 {
  width: 56%;
}
.szer-57 {
  width: 57%;
}
.szer-58 {
  width: 58%;
}
.szer-59 {
  width: 59%;
}
.szer-60 {
  width: 60%;
}
.szer-61 {
  width: 61%;
}
.szer-62 {
  width: 62%;
}
.szer-63 {
  width: 63%;
}
.szer-64 {
  width: 64%;
}
.szer-65 {
  width: 65%;
}
.szer-66 {
  width: 66%;
}
.szer-67 {
  width: 67%;
}
.szer-68 {
  width: 68%;
}
.szer-69 {
  width: 69%;
}
.szer-70 {
  width: 70%;
}
.szer-71 {
  width: 71%;
}
.szer-72 {
  width: 72%;
}
.szer-73 {
  width: 73%;
}
.szer-74 {
  width: 74%;
}
.szer-75 {
  width: 75%;
}
.szer-76 {
  width: 76%;
}
.szer-77 {
  width: 77%;
}
.szer-78 {
  width: 78%;
}
.szer-79 {
  width: 79%;
}
.szer-80 {
  width: 80%;
}
.szer-81 {
  width: 81%;
}
.szer-82 {
  width: 82%;
}
.szer-83 {
  width: 83%;
}
.szer-84 {
  width: 84%;
}
.szer-85 {
  width: 85%;
}
.szer-86 {
  width: 86%;
}
.szer-87 {
  width: 87%;
}
.szer-88 {
  width: 88%;
}
.szer-89 {
  width: 89%;
}
.szer-90 {
  width: 90%;
}
.szer-91 {
  width: 91%;
}
.szer-92 {
  width: 92%;
}
.szer-93 {
  width: 93%;
}
.szer-94 {
  width: 94%;
}
.szer-95 {
  width: 95%;
}
.szer-96 {
  width: 96%;
}
.szer-97 {
  width: 97%;
}
.szer-98 {
  width: 98%;
}
.szer-99 {
  width: 99%;
}
.szer-100 {
  width: 100%;
}

/* ---------------------------------------------------------------------------------------------
 * 7. Ruch - respektujemy prefers-reduced-motion (wytyczne §3)
 * ------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------------------------
 * 8. Komponenty (M3.3) - okruszki, odznaka klasy, przyciski, baner zgód, blok afiliacyjny
 * ------------------------------------------------------------------------------------------- */

.okruszki {
  font-size: var(--skala-s);
  color: var(--kolor-tekst-slaby);
  padding-block: var(--odstep-3) 0;
}

.okruszki-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.okruszki-element + .okruszki-element::before {
  content: '/';
  margin-right: var(--odstep-2);
  color: var(--kolor-linia-mocna);
}

.odznaka-klasy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: var(--odstep-1);
  border: 1px solid var(--kolor-linia-mocna);
  border-radius: var(--promien);
  font-size: var(--skala-xs);
  font-weight: 600;
  text-decoration: none;
  color: var(--kolor-tekst-slaby);
  background: transparent;
}

.odznaka-klasy:hover,
.odznaka-klasy:focus-visible {
  color: var(--kolor-tekst);
  border-color: var(--kolor-tekst);
}

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wysokosc-celu);
  padding-inline: var(--odstep-4);
  border: 1px solid var(--kolor-akcent);
  border-radius: var(--promien);
  background: var(--kolor-akcent);
  color: var(--kolor-tlo-podniesione);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.przycisk--cichy {
  background: transparent;
  color: var(--kolor-akcent-tekst);
  border-color: var(--kolor-linia-mocna);
}

.przelacznik-motywu {
  min-height: var(--wysokosc-celu);
  min-width: var(--wysokosc-celu);
  padding-inline: var(--odstep-3);
  background: transparent;
  border: 1px solid var(--kolor-linia-mocna);
  border-radius: var(--promien);
  color: var(--kolor-tekst);
  cursor: pointer;
  font-size: var(--skala-xs);
  text-transform: lowercase;
}

.baner-zgod {
  position: sticky;
  bottom: 0;
  background: var(--kolor-tlo-podniesione);
  border-top: 1px solid var(--kolor-linia);
}

.baner-zgod-tresc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-3);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--odstep-3);
}

.baner-zgod-tekst {
  font-size: var(--skala-s);
  margin: 0;
  max-width: 46ch;
}

.baner-zgod-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-2);
}

.blok-afiliacyjny {
  margin-block: var(--odstep-6);
  max-width: var(--miara-tekstu);
}

.blok-afiliacyjny-etykieta {
  font-size: var(--skala-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
  margin-bottom: var(--odstep-2);
}

.blok-afiliacyjny-naglowek {
  margin-top: 0;
}

.stopka-nawigacja {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-4);
}

/* ---------------------------------------------------------------------------------------------
 * 9. Odpowiedź główna i rozbicie kosztów - szkielet wizualny (dane dochodzą w M3.5)
 * ------------------------------------------------------------------------------------------- */

.kwota-glowna {
  font-family: var(--font-naglowki);
  font-size: var(--skala-kwota);
  font-weight: 700;
  line-height: 1.05;
  color: var(--kolor-akcent-tekst);
  margin-block: var(--odstep-2);
}

.kwota-okres {
  font-size: var(--skala-l);
  color: var(--kolor-tekst-slaby);
  font-weight: 400;
}

.zalozenia {
  color: var(--kolor-tekst-slaby);
  font-size: var(--skala-s);
}

/*
  Akapit narracyjny (M3.7). Bez ozdobników i bez ramki: proza ma być czytana jak zdanie
  wyjaśniające, a nie jak wyróżniony blok „ciekawostka" - to jedna z pozycji czarnej listy
  szablonów AI z wytycznych §2.
*/
/*
  Skala mas (klasy wielkości §4.3). Tabela z warstwą słupków: liczba i długość mówią to samo,
  więc czytelnik dostaje jedno i drugie, a czytnik ekranu - samą liczbę bez powtórzeń.
*/
.skala-mas {
  width: 100%;
  max-width: var(--miara-tekstu);
  border-collapse: collapse;
  margin-top: var(--odstep-4);
}

.skala-mas th,
.skala-mas td {
  padding: var(--odstep-2) var(--odstep-2) var(--odstep-2) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--kolor-linia);
}

.skala-mas-etykieta {
  display: block;
  font-size: var(--skala-xs);
  font-weight: 400;
  color: var(--kolor-tekst-slaby);
}

/* Tor zaczyna się od zera: ucięta podstawa robiłaby ze schodka większy skok, niż jest naprawdę. */
.skala-tor {
  display: block;
  margin-top: var(--odstep-1);
  height: 6px;
  background: var(--kolor-tlo-podniesione);
  border-radius: var(--promien-maly);
}

.skala-wypelnienie {
  display: block;
  height: 100%;
  background: var(--kolor-akcent);
  border-radius: var(--promien-maly);
}

/*
  Wiersz tuż za progiem opakowania. Znacznik jest **dodatkiem** do zdania pod tabelą, nie jedynym
  nośnikiem informacji (WCAG 1.4.1) - i pojawia się wyłącznie w klasie, która próg naprawdę ma.
*/
.skala-mas tr[data-za-progiem] th {
  border-left: 3px solid var(--kolor-akcent);
  padding-left: var(--odstep-2);
}

.skala-mas-prog,
.skala-mas-odsylacz {
  max-width: var(--miara-tekstu);
  font-size: var(--skala-s);
  color: var(--kolor-tekst-slaby);
}

/*
  Lista not metodologicznych. Bez ikon i bez ramki „uwaga": nota jest częścią metody, więc ma się
  czytać jak zdanie wyjaśniające, a nie jak ostrzeżenie, które czytelnik nauczy się pomijać.
*/
.lista-not {
  max-width: var(--miara-tekstu);
  padding-left: var(--odstep-4);
}

.lista-not li {
  margin-top: var(--odstep-3);
}

.narracja {
  max-width: var(--miara-tekstu);
  margin-top: var(--odstep-4);
  color: var(--kolor-tekst);
}

.adnotacja-przy-kwocie {
  margin-top: var(--odstep-3);
  padding: var(--odstep-2) var(--odstep-3);
  border-left: 3px solid var(--kolor-ostrzezenie);
  background: var(--kolor-tlo-podniesione);
  font-size: var(--skala-s);
  max-width: var(--miara-tekstu);
}

.slupki {
  display: grid;
  gap: var(--odstep-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.slupek-wiersz {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--odstep-2) var(--odstep-3);
  align-items: baseline;
  max-width: none;
}

.slupek-nazwa {
  font-weight: 600;
}

.slupek-kwota {
  white-space: nowrap;
}

.slupek-tor {
  grid-column: 1 / -1;
  height: 0.75rem;
  background: var(--kolor-tlo-podniesione);
  border: 1px solid var(--kolor-linia);
  border-radius: var(--promien);
  overflow: hidden;
}

.slupek-wypelnienie {
  display: block;
  height: 100%;
  background: var(--kolor-wykres-1);
}

.slupek-wypelnienie--2 {
  background: var(--kolor-wykres-2);
}
.slupek-wypelnienie--3 {
  background: var(--kolor-wykres-3);
}
.slupek-wypelnienie--4 {
  background: var(--kolor-wykres-4);
}
.slupek-wypelnienie--5 {
  background: var(--kolor-wykres-5);
}
.slupek-wypelnienie--6 {
  background: var(--kolor-wykres-6);
}

.slupek-wypelnienie--brak {
  background: repeating-linear-gradient(
    45deg,
    var(--kolor-linia),
    var(--kolor-linia) 4px,
    transparent 4px,
    transparent 8px
  );
}

.suma-wiersz {
  margin-top: var(--odstep-5);
  padding-top: var(--odstep-3);
  border-top: 2px solid var(--kolor-linia-mocna);
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-3);
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--skala-l);
  font-weight: 600;
}

.tabela-zrodel th,
.tabela-zrodel td {
  border-bottom: 1px solid var(--kolor-linia);
  padding: var(--odstep-2) var(--odstep-2) var(--odstep-2) 0;
  text-align: left;
  vertical-align: top;
  font-size: var(--skala-s);
}

.przyklad-ostrzezenie {
  margin-block: var(--odstep-4);
  padding: var(--odstep-3) var(--odstep-4);
  border: 2px dashed var(--kolor-ostrzezenie);
  border-radius: var(--promien);
  color: var(--kolor-tekst);
  background: var(--kolor-tlo-podniesione);
  max-width: none;
}

/* ---------------------------------------------------------------------------------------------
 * 10. Kalkulator (M3.6) - kontrolki dostępne kciukiem i klawiaturą
 * ------------------------------------------------------------------------------------------- */

.kalkulator {
  margin-block: var(--odstep-6);
}

.kalkulator-kontrolki {
  display: grid;
  gap: var(--odstep-4);
  max-width: var(--miara-tekstu);
}

.kalkulator-pole {
  display: grid;
  gap: var(--odstep-2);
}

.kalkulator-etykieta {
  font-weight: 600;
}

/*
  Kolejność wyglądu odwrotna niż w DOM: suwak widocznie pierwszy, pole liczbowe obok. W DOM pole
  stoi przed suwakiem (kolejność tabulacji i ochrona przed przycinaniem wartości), a `order`
  przestawia je wizualnie - to jest dokładnie ten przypadek, do którego `order` służy.
*/
.kalkulator-para {
  display: grid;
  grid-template-columns: 1fr 7rem;
  gap: var(--odstep-3);
  align-items: center;
}

.kalkulator-para input[type='range'] {
  order: 1;
}

.kalkulator-para .kalkulator-liczba {
  order: 2;
}

.kalkulator-para .kalkulator-przycisk {
  order: 3;
}

.kalkulator-para input[type='range'] {
  width: 100%;
  min-height: var(--wysokosc-celu);
}

.kalkulator-liczba,
.kalkulator select {
  min-height: var(--wysokosc-celu);
  padding-inline: var(--odstep-2);
  border: 1px solid var(--kolor-linia-mocna);
  border-radius: var(--promien);
  background: var(--kolor-tlo-podniesione);
}

/*
  Kontrolka masy psa: suwak, pole i przycisk „masa typowa" w jednym rzędzie, znaczniki progów
  na torze. Tor jest pozycjonowany, bo znaczniki muszą leżeć **na nim**, a nie obok.
*/
.kalkulator-masa {
  grid-template-columns: 1fr 7rem auto;
  position: relative;
}

/*
  Przycisk pomocniczy. Cel dotykowy >= 44 px (2.5.5) i kontrast obramowania >= 3:1 (1.4.11) -
  przycisk „na płasko", bez tła, nadal musi być widoczny jako element sterujący.
*/
.kalkulator-przycisk {
  min-height: var(--wysokosc-celu);
  padding-inline: var(--odstep-3);
  border: 1px solid var(--kolor-linia-mocna);
  border-radius: var(--promien);
  background: var(--kolor-tlo-podniesione);
  color: var(--kolor-tekst);
  font: inherit;
  cursor: pointer;
}

.kalkulator-przycisk:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/*
  Stan „nie wybrano" na suwaku. Sam brak liczby w polu obok bywa niezauważalny, więc suwak mówi
  o tym również wyglądem - a dla czytnika ekranu robi to `aria-valuetext`, nie ten styl.
*/
.kalkulator-masa input[type='range'].bez-wyboru {
  opacity: 0.65;
  filter: grayscale(1);
}

/*
  Znacznik progu opakowania na torze suwaka. Pozycja idzie klasą `szer-N` (CSP bez `unsafe-inline`
  blokuje atrybut `style`), a informację niesie **także** lista tekstowa pod suwakiem - znacznik
  sam w sobie jest grafiką i nie może być jedynym nośnikiem (1.4.1).
*/
.znacznik-progu {
  position: absolute;
  top: 0;
  width: 2px;
  height: var(--wysokosc-celu);
  background: var(--kolor-akcent);
  pointer-events: none;
}

.kalkulator-progi {
  grid-column: 1 / -1;
}

.kalkulator-stan {
  max-width: var(--miara-tekstu);
  font-size: var(--skala-s);
  color: var(--kolor-tekst);
}

.kalkulator-opis {
  font-size: var(--skala-xs);
  color: var(--kolor-tekst-slaby);
  margin: 0;
}

.kalkulator-zaawansowane summary {
  cursor: pointer;
  min-height: var(--wysokosc-celu);
  display: flex;
  align-items: center;
  font-weight: 600;
}

.kalkulator-komunikat:empty {
  display: none;
}

.kalkulator-komunikat {
  margin-top: var(--odstep-3);
  padding: var(--odstep-2) var(--odstep-3);
  border-left: 3px solid var(--kolor-ostrzezenie);
  font-size: var(--skala-s);
}

.kalkulator-noscript {
  padding: var(--odstep-3);
  border: 1px solid var(--kolor-linia);
  border-radius: var(--promien);
  font-size: var(--skala-s);
}

/* Kontrolki wyłączone (brak JS) mają wyglądać na wyłączone - udawanie działania myli czytelnika. */
.kalkulator input:disabled,
.kalkulator select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/*
 * Sygnał zmiany kwoty: krótkie podświetlenie samej kwoty, nie animacja całej sekcji.
 * Blok `prefers-reduced-motion` w sekcji 7 skraca to do zera - ruch bywa realną przeszkodą.
 */
@keyframes kwota-blysk {
  from {
    background-color: var(--kolor-akcent-tlo);
  }
  to {
    background-color: transparent;
  }
}

.kwota-zmieniona {
  animation: kwota-blysk 300ms ease-out;
}

/* --- Strony przeglądowe: listy poziomów i wyszukiwarka ------------------------------------- */

/*
 * Lista pozycji poziomu. Bez słupków i bez koloru niosącego znaczenie: to lista wartości,
 * a nie porównanie kształtu - słupek przy widełkach sugerowałby dokładność, której nie mają.
 * Tekst nosi tokeny tekstowe, kwota jest wyróżniona wagą i nieprzenoszona.
 */
.lista-poziomu {
  display: grid;
  gap: var(--odstep-3);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.lista-poziomu-wiersz {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--odstep-1) var(--odstep-3);
  align-items: baseline;
  padding-block: var(--odstep-2);
  border-bottom: 1px solid var(--kolor-linia);
}

.lista-poziomu-nazwa {
  font-weight: 600;
}

.lista-poziomu-kwota {
  white-space: nowrap;
  font-weight: 600;
}

.lista-poziomu-liczebnosc {
  grid-column: 1 / -1;
  color: var(--kolor-tekst-slaby);
  font-size: var(--skala-s);
}

/*
 * Wiersz bez odnośnika nie jest uszkodzony i nie wolno go tak pokazać (ADR-PSEO-014, Decyzja 3):
 * bez przekreśleń, bez czerwieni, bez wygaszenia kwoty. Wyróżnia go wyłącznie zdanie powodu.
 */
.lista-poziomu-powod {
  grid-column: 1 / -1;
  color: var(--kolor-tekst-slaby);
  font-size: var(--skala-s);
  max-width: var(--miara-tekstu);
}

.wyszukiwarka {
  display: grid;
  gap: var(--odstep-2);
  margin-block: var(--odstep-5);
  max-width: var(--miara-tekstu);
}

.wyszukiwarka-etykieta {
  font-weight: 600;
}

.wyszukiwarka input[type='search'] {
  padding: var(--odstep-2) var(--odstep-3);
  font: inherit;
  color: var(--kolor-tekst);
  background: var(--kolor-tlo-podniesione);
  border: 1px solid var(--kolor-linia-mocna);
  border-radius: var(--promien);
  /* Cel dotykowy: 44 px wysokości przy tym wypełnieniu i rozmiarze pisma. */
  min-height: 2.75rem;
}

.wyszukiwarka input[type='search']:disabled {
  color: var(--kolor-tekst-slaby);
  background: var(--kolor-tlo);
  cursor: not-allowed;
}

.wyszukiwarka-opis,
.wyszukiwarka-komunikat {
  color: var(--kolor-tekst-slaby);
  font-size: var(--skala-s);
  margin: 0;
}

.lista-wynikow {
  display: grid;
  gap: var(--odstep-2);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.lista-wynikow li[hidden] {
  display: none;
}

.wynik-szczebel {
  color: var(--kolor-tekst-slaby);
  font-size: var(--skala-s);
}

/* --- Konwencje: „względem czego liczymy" (ADR-PSEO-015) ------------------------------------ */

.lista-konwencji {
  display: grid;
  gap: var(--odstep-4);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.konwencja {
  padding-inline-start: var(--odstep-3);
  border-inline-start: 3px solid var(--kolor-linia);
  max-width: var(--miara-tekstu);
}

.konwencja p {
  margin-block: var(--odstep-1);
}

.konwencja-wartosc {
  font-weight: 600;
}

/*
 * Zdanie o stałości nie jest ostrzeżeniem i nie wolno go tak pomalować: konwencja nie jest
 * usterką ani ryzykiem, tylko wyborem jednostki odniesienia.
 */
.konwencja-sterowanie,
.konwencja-zakres {
  color: var(--kolor-tekst-slaby);
  font-size: var(--skala-s);
}

/*
 * Brak kwoty nie jest usterka i nie wolno go tak pokazac: to zdanie o tym, czego nie liczymy.
 * Bez czerwieni, bez przekreslenia - ten sam ton co wiersz bez odnosnika.
 */
.lista-poziomu-kwota--brak,
.kwota-glowna--brak {
  color: var(--kolor-tekst-slaby);
  font-weight: 400;
}

.kwota-glowna--brak {
  font-size: var(--skala-l);
  max-width: var(--miara-tekstu);
}

/* Wartosc zalozenia wyrozniona waga, a nie kolorem: to nie jest ostrzezenie ani odnosnik. */
.zalozenie-wartosc {
  font-weight: 600;
  white-space: nowrap;
}

/* --- Katalog marek: siatka kart zamiast listy wierszy ------------------------------------- */

.wprowadzenie {
  font-size: var(--skala-l);
  max-width: var(--miara-tekstu);
}

.siatka-marek {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--odstep-3);
  margin: var(--odstep-4) 0 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.karta-marki {
  display: grid;
  gap: var(--odstep-1);
  padding: var(--odstep-3);
  background: var(--kolor-tlo-podniesione);
  border: 1px solid var(--kolor-linia);
  border-radius: var(--promien);
}

/*
 * Cel klikniecia jest najwiekszy, bo po to sie tu przyszlo. Rozciagamy odnosnik na cala karte -
 * mniejszy cel niz karta zmuszalby do celowania w tekst.
 */
.karta-marki-nazwa {
  font-family: var(--font-naglowki);
  font-size: var(--skala-l);
  font-weight: 700;
  text-decoration: none;
}

.karta-marki-nazwa::after {
  content: '';
  position: absolute;
  inset: 0;
}

.karta-marki {
  position: relative;
}

.karta-marki:focus-within {
  outline: 3px solid var(--kolor-akcent);
  outline-offset: 2px;
}

.karta-marki-kwota {
  font-weight: 600;
  white-space: nowrap;
}

.karta-marki-opis {
  color: var(--kolor-tekst-slaby);
  font-size: var(--skala-s);
}

.katalog-odsylacz {
  margin-top: var(--odstep-4);
}

.lista-opisow {
  max-width: var(--miara-tekstu);
}

.lista-opisow dt {
  font-weight: 600;
  margin-top: var(--odstep-3);
}

.lista-opisow dd {
  margin: 0;
  color: var(--kolor-tekst-slaby);
}

/*
 * Motyw ZWIERZĘTA - kierunek wizualny 3 „Karta danych" (wybór właściciela 2026-10-01).
 *
 * Dane + zdjęcie: szwajcarska siatka, czarny panel z wąskimi, wielkimi liczbami obok zdjęcia rasy,
 * etykiety w kroju mono i jeden akcent (kobalt). Kwota jest największym elementem strony, a każdy
 * pasek kosztu stoi na wspólnej osi - porównanie ras jednym spojrzeniem.
 *
 * Ten sam szkielet co AUTO (baza.css): tutaj są wartości tokenów i fonty. Komponenty strony psa
 * w tym kierunku są w `wspolne/css/psy.css` (doklejane wyłącznie do arkusza zwierząt).
 */

/* ---------------------------------------------------------------------------------------------
 * Fonty. WOFF2 lokalnie (bez CDN-u), subsety `latin` i `latin-ext`, kroje zmienne, SIL OFL 1.1
 * (`zasoby/fonty/*-OFL.txt`). Big Shoulders Display - kwoty i nagłówki (nie ma cyfr tabelarycznych,
 * więc stoi tylko przy pojedynczych dużych liczbach); Schibsted Grotesk - tekst (tnum w kolumnach);
 * Martian Mono - etykiety i liczby w kolumnach (stała szerokość z natury); `font-display: optional`:
 * krój etykiet nie podmienia się po pierwszym malowaniu (bez przesunięć układu), przy kolejnej stronie
 * jest już w pamięci podręcznej.
 * Pliki odświeża `node serwisy/wspolne/pobierz-fonty.mjs`.
 * ------------------------------------------------------------------------------------------- */

@font-face {
  font-family: 'Big Shoulders Display';
  src: url('/zasoby/fonty/big-shoulders-display-latin.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
  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: 'Big Shoulders Display';
  src: url('/zasoby/fonty/big-shoulders-display-latin-ext.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/zasoby/fonty/schibsted-grotesk-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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: 'Schibsted Grotesk';
  src: url('/zasoby/fonty/schibsted-grotesk-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: 'Martian Mono';
  src: url('/zasoby/fonty/martian-mono-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: optional;
  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: 'Martian Mono';
  src: url('/zasoby/fonty/martian-mono-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: optional;
  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;
}

/* ---------------------------------------------------------------------------------------------
 * Tryb jasny. Kontrast (WCAG 1.4.3, `npm run strony:kontrast`): tekst 19,4:1, drugorzędny 7,3:1
 * (6,4:1 na szarym), akcent 8,0:1; panel: tekst 17,3:1, drugorzędny 7,8:1, akcent panelu 8,1:1.
 * ------------------------------------------------------------------------------------------- */

:root {
  --kolor-tlo: #ffffff;
  --kolor-tlo-podniesione: #f0f0ec;
  --kolor-tekst: #0d0d0f;
  --kolor-tekst-slaby: #55565c;
  --kolor-akcent: #1636e0; /* kobalt - jedyny akcent: linki, paski, wyróżnienia */
  --kolor-akcent-tekst: #1636e0;
  --kolor-akcent-tlo: #dce2ff;
  --kolor-na-akcencie: #ffffff;
  --kolor-linia: #d6d6d0;
  --kolor-linia-mocna: #0d0d0f; /* reguły 2 px nad sekcjami i tabelami, obramowania kontrolek */
  --kolor-tor: #80838c; /* tor osi kosztu - element graficzny, co najmniej 3:1 do tła */
  --kolor-ostrzezenie: #8a4b00;
  --kolor-brak: #ffd84d; /* „brak wiarygodnej ceny" - zawsze z ciemnym tekstem */
  --kolor-na-braku: #0d0d0f;

  /* Czarny panel danych (hero, pasek górny, stopka) - w obu trybach ciemny. */
  --kolor-panel: #0d0d0f;
  --kolor-panel-tekst: #f2f2ee;
  --kolor-panel-tekst-slaby: #a2a4ad;
  --kolor-panel-akcent: #8fa2ff;
  --kolor-panel-linia: #75787f;

  --kolor-wykres-1: #1636e0;
  --kolor-wykres-2: #5b72ea;
  --kolor-wykres-3: #a2a4ad;
  --kolor-wykres-4: #55565c;
  --kolor-wykres-5: #d6d6d0;
  --kolor-wykres-6: #0d0d0f;

  /* Grupy czynników na wykresach W1-W6 (kolor = grupa). Kolejność karma, akcesoria, profilaktyka,
   * pielęgnacja, start, opłaty przeszła walidator dataviz (`validate_palette.js`, sąsiednie pary:
   * pasmo jasności, nasycenie, CVD ΔE >= 8, ΔE >= 15, znak >= 3:1 do tła); tekst na wypełnieniu
   * >= 4,5:1 (`npm run strony:kontrast`). Start (magenta) stoi też obok akcentu w kolumnie roku 1
   * wykresu W1 - para sprawdzona osobno. Szary „pozostałe" to de-emfaza, nie kolor kategorii. */
  --kolor-grupa-karma: #1636e0;
  --kolor-grupa-akcesoria: #946300;
  --kolor-grupa-profilaktyka: #199e70;
  --kolor-grupa-pielegnacja: #eb6834;
  --kolor-grupa-start: #c43d80;
  --kolor-grupa-oplaty: #4a3aa7;
  --kolor-grupa-pozostale: #8a8c94;
  --kolor-na-grupie-karma: #ffffff;
  --kolor-na-grupie-akcesoria: #ffffff;
  --kolor-na-grupie-profilaktyka: #0d0d0f;
  --kolor-na-grupie-pielegnacja: #0d0d0f;
  --kolor-na-grupie-start: #ffffff;
  --kolor-na-grupie-oplaty: #ffffff;
  --kolor-na-grupie-pozostale: #0d0d0f;

  --font-naglowki: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-tekst: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --promien: 0;
  --promien-maly: 0;
  --trop-marki: 0.01em;
  --grubosc-linii-tozsamosci: 2px;
  --szerokosc-strony: 77.5rem;
  --margines-strony: 1rem;

  color-scheme: light;
}

/* ---------------------------------------------------------------------------------------------
 * Tryb ciemny - systemowy (tokeny osobno dobrane do ciemnego tła, nie odwrócone automatycznie)
 * ------------------------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --kolor-tlo: #0c0d11;
    --kolor-tlo-podniesione: #17191f;
    --kolor-tekst: #f2f2ee;
    --kolor-tekst-slaby: #a2a4ad;
    --kolor-akcent: #8fa2ff;
    --kolor-akcent-tekst: #8fa2ff;
    --kolor-akcent-tlo: #232a4d;
    --kolor-na-akcencie: #0c0d11;
    --kolor-linia: #2a2d35;
    --kolor-linia-mocna: #f2f2ee;
    --kolor-tor: #6b6e78;
    --kolor-ostrzezenie: #f0b45c;
    --kolor-brak: #ffd84d;
    --kolor-na-braku: #0d0d0f;

    --kolor-panel: #17191f;
    --kolor-panel-tekst: #f2f2ee;
    --kolor-panel-tekst-slaby: #a2a4ad;
    --kolor-panel-akcent: #8fa2ff;
    --kolor-panel-linia: #75787f;

    --kolor-wykres-1: #8fa2ff;
    --kolor-wykres-2: #5b72ea;
    --kolor-wykres-3: #a2a4ad;
    --kolor-wykres-4: #6b6e78;
    --kolor-wykres-5: #2a2d35;
    --kolor-wykres-6: #f2f2ee;

    --kolor-grupa-karma: #5b73f0;
    --kolor-grupa-akcesoria: #c98500;
    --kolor-grupa-profilaktyka: #199e70;
    --kolor-grupa-pielegnacja: #d95926;
    --kolor-grupa-start: #ea54a4;
    --kolor-grupa-oplaty: #9085e9;
    --kolor-grupa-pozostale: #8a8c94;
    --kolor-na-grupie-karma: #0c0d11;
    --kolor-na-grupie-akcesoria: #0c0d11;
    --kolor-na-grupie-profilaktyka: #0c0d11;
    --kolor-na-grupie-pielegnacja: #0c0d11;
    --kolor-na-grupie-start: #0c0d11;
    --kolor-na-grupie-oplaty: #0c0d11;
    --kolor-na-grupie-pozostale: #0c0d11;

    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------------------------------------
 * Tryb wybrany ręcznie (przełącznik; `motyw.js` ustawia atrybut przed pierwszym malowaniem)
 * ------------------------------------------------------------------------------------------- */

[data-motyw='ciemny'] {
  --kolor-tlo: #0c0d11;
  --kolor-tlo-podniesione: #17191f;
  --kolor-tekst: #f2f2ee;
  --kolor-tekst-slaby: #a2a4ad;
  --kolor-akcent: #8fa2ff;
  --kolor-akcent-tekst: #8fa2ff;
  --kolor-akcent-tlo: #232a4d;
  --kolor-na-akcencie: #0c0d11;
  --kolor-linia: #2a2d35;
  --kolor-linia-mocna: #f2f2ee;
  --kolor-tor: #6b6e78;
  --kolor-ostrzezenie: #f0b45c;
  --kolor-brak: #ffd84d;
  --kolor-na-braku: #0d0d0f;

  --kolor-panel: #17191f;
  --kolor-panel-tekst: #f2f2ee;
  --kolor-panel-tekst-slaby: #a2a4ad;
  --kolor-panel-akcent: #8fa2ff;
  --kolor-panel-linia: #75787f;

  --kolor-wykres-1: #8fa2ff;
  --kolor-wykres-2: #5b72ea;
  --kolor-wykres-3: #a2a4ad;
  --kolor-wykres-4: #6b6e78;
  --kolor-wykres-5: #2a2d35;
  --kolor-wykres-6: #f2f2ee;

  --kolor-grupa-karma: #5b73f0;
  --kolor-grupa-akcesoria: #c98500;
  --kolor-grupa-profilaktyka: #199e70;
  --kolor-grupa-pielegnacja: #d95926;
  --kolor-grupa-start: #ea54a4;
  --kolor-grupa-oplaty: #9085e9;
  --kolor-grupa-pozostale: #8a8c94;
  --kolor-na-grupie-karma: #0c0d11;
  --kolor-na-grupie-akcesoria: #0c0d11;
  --kolor-na-grupie-profilaktyka: #0c0d11;
  --kolor-na-grupie-pielegnacja: #0c0d11;
  --kolor-na-grupie-start: #0c0d11;
  --kolor-na-grupie-oplaty: #0c0d11;
  --kolor-na-grupie-pozostale: #0c0d11;

  color-scheme: dark;
}

[data-motyw='jasny'] {
  --kolor-tlo: #ffffff;
  --kolor-tlo-podniesione: #f0f0ec;
  --kolor-tekst: #0d0d0f;
  --kolor-tekst-slaby: #55565c;
  --kolor-akcent: #1636e0;
  --kolor-akcent-tekst: #1636e0;
  --kolor-akcent-tlo: #dce2ff;
  --kolor-na-akcencie: #ffffff;
  --kolor-linia: #d6d6d0;
  --kolor-linia-mocna: #0d0d0f;
  --kolor-tor: #80838c;
  --kolor-ostrzezenie: #8a4b00;
  --kolor-brak: #ffd84d;
  --kolor-na-braku: #0d0d0f;

  --kolor-panel: #0d0d0f;
  --kolor-panel-tekst: #f2f2ee;
  --kolor-panel-tekst-slaby: #a2a4ad;
  --kolor-panel-akcent: #8fa2ff;
  --kolor-panel-linia: #75787f;

  --kolor-wykres-1: #1636e0;
  --kolor-wykres-2: #5b72ea;
  --kolor-wykres-3: #a2a4ad;
  --kolor-wykres-4: #55565c;
  --kolor-wykres-5: #d6d6d0;
  --kolor-wykres-6: #0d0d0f;

  --kolor-grupa-karma: #1636e0;
  --kolor-grupa-akcesoria: #946300;
  --kolor-grupa-profilaktyka: #199e70;
  --kolor-grupa-pielegnacja: #eb6834;
  --kolor-grupa-start: #c43d80;
  --kolor-grupa-oplaty: #4a3aa7;
  --kolor-grupa-pozostale: #8a8c94;
  --kolor-na-grupie-karma: #ffffff;
  --kolor-na-grupie-akcesoria: #ffffff;
  --kolor-na-grupie-profilaktyka: #0d0d0f;
  --kolor-na-grupie-pielegnacja: #0d0d0f;
  --kolor-na-grupie-start: #ffffff;
  --kolor-na-grupie-oplaty: #ffffff;
  --kolor-na-grupie-pozostale: #0d0d0f;

  color-scheme: light;
}

@media (min-width: 700px) {
  :root {
    --margines-strony: 2rem;
  }
}

/*
 * psy.css - komponenty strony psa w kierunku wizualnym 3 „Karta danych" (wybór właściciela
 * 2026-10-01), doklejane wyłącznie do arkusza zwierząt (`motyw.11ty.js`). Arkusz aut zostaje bajt
 * w bajt ten sam: tu nadpisujemy szkielet `baza.css` tylko dla strony psa.
 *
 * Zasady: wyłącznie tokeny z `zwierzeta/motyw.css` (kolory, fonty), mobile-first (reguły bazowe dla
 * 375 px, szersze ekrany dostają więcej kolumn), żadnych stylów inline - geometria pasków przychodzi
 * w atrybutach SVG z modelu widoku, szerokości słupków przeglądu przez klasy `.szer-*` (CSP).
 * Wymiary slotów reklamowych są treścią kontraktu z reklamodawcą - jedyne wartości „z palca".
 */

/* =============================================================================================
 * 1. Typografia i rytm
 * =========================================================================================== */

body {
  font-size: 1.0625rem;
  line-height: 1.55;
}

h1,
h2,
h3 {
  font-family: var(--font-naglowki);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.005em;
  overflow-wrap: break-word;
}

h2 {
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  margin-block: 0 var(--odstep-4);
  border: 0;
  padding: 0;
}

h3 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-block: var(--odstep-6) var(--odstep-3);
}

a {
  color: var(--kolor-akcent-tekst);
}

:focus-visible {
  outline: 3px solid var(--kolor-akcent);
  outline-offset: 2px;
}

/* Etykieta w kroju mono: nadtytuły, podpisy wykresów, legendy. */
.etykieta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
}

h2.etykieta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  margin: 0;
}

.wprowadzenie {
  font-size: 1.125rem;
  max-width: 60ch;
}

.zalozenia,
.etykieta-danych {
  color: var(--kolor-tekst-slaby);
  font-size: 0.9rem;
}

/*
 * Cyfry tabelaryczne w Schibsted Grotesk poszerzają też przecinek („21 ,06 kg"), więc tekst ich nie
 * używa; liczby w kolumnach stoją w kroju mono, który ma stałą szerokość z natury.
 */
.kwota,
.liczba {
  font-variant-numeric: normal;
  font-feature-settings: normal;
}

/* Kwota nie łamie się przed „zł" ani w środku widełek (strażnik R9 N-8: „1 294-2 519 / zł" w rankingu). */
.kwota {
  white-space: nowrap;
}

.tabela-kosztow td .liczba,
.tabela-kosztow td.liczba {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* =============================================================================================
 * 2. Siatka strony: treść wyrównana do siatki 1240 px, sekcje „pełne" od krawędzi do krawędzi
 * =========================================================================================== */

main.strona {
  max-width: none;
  padding: 0 0 var(--odstep-7);
  counter-reset: sekcja;
}

/*
 * Każdy bezpośredni element treści stoi na lewej krawędzi siatki (margines liczony z szerokości
 * strony), więc akapit z miarą 65 znaków zostaje wyrównany do lewej, a nie wyśrodkowany.
 */
main.strona > *,
.pas-ras-wnetrze,
.naglowek-serwisu > .strona,
.stopka-serwisu > .strona {
  margin-inline: max(var(--margines-strony), calc((100% - var(--szerokosc-strony)) / 2));
}

.naglowek-serwisu > .strona,
.stopka-serwisu > .strona {
  max-width: none;
  width: auto;
  padding-inline: 0;
}

main.strona > .pelna {
  margin-inline: 0;
  max-width: none;
}

main.strona > section {
  margin-top: var(--odstep-7);
}

main.strona > :first-child {
  margin-top: 0;
}

/* Numer sekcji jako nadtytuł („01", „02"…) - licznik CSS, nie cyfra w szablonie; pusty tekst
 * alternatywny, żeby czytnik ekranu nie dopisywał numeru do nazwy nagłówka. */
main.strona > section > h2::before,
.pas-ras-wnetrze > h2::before {
  counter-increment: sekcja;
  content: counter(sekcja, decimal-leading-zero) / '';
  display: block;
  margin-bottom: var(--odstep-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--kolor-akcent-tekst);
}

/* =============================================================================================
 * 3. Pasek serwisu i stopka - czarny panel
 * =========================================================================================== */

.naglowek-serwisu {
  background: var(--kolor-panel);
  color: var(--kolor-panel-tekst);
  border: 0;
}

.naglowek-serwisu > .strona {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--odstep-1) var(--odstep-5);
  padding-block: var(--odstep-2);
}

.marka {
  font-family: var(--font-naglowki);
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--trop-marki);
  color: var(--kolor-panel-tekst);
  text-decoration: none;
}

.marka:hover {
  text-decoration: none;
}

.marka-akcent {
  color: var(--kolor-panel-akcent);
}

.nawigacja {
  gap: 0;
  font-size: 0.72rem;
}

.nawigacja > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--wysokosc-celu);
  padding-inline: var(--odstep-3);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-panel-tekst);
  text-decoration: none;
}

.nawigacja > a:first-child {
  padding-left: 0;
}

.nawigacja > a:hover {
  color: var(--kolor-panel-akcent);
  text-decoration: underline;
}

.naglowek-serwisu :focus-visible,
.hero-panel :focus-visible,
.stopka-serwisu :focus-visible {
  outline-color: var(--kolor-panel-akcent);
}

.przelacznik-motywu {
  margin-left: var(--odstep-2);
  border-color: var(--kolor-panel-tekst-slaby);
  color: var(--kolor-panel-tekst);
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.baner-testowy {
  flex-basis: 100%;
  max-width: none;
  margin: var(--odstep-1) 0 var(--odstep-2);
  padding: var(--odstep-2) var(--odstep-3);
  background: var(--kolor-brak);
  color: var(--kolor-na-braku);
  font-size: 0.85rem;
}

.stopka-serwisu {
  background: var(--kolor-panel);
  color: var(--kolor-panel-tekst-slaby);
  border: 0;
  font-size: 0.88rem;
}

.stopka-serwisu > .strona {
  display: grid;
  gap: var(--odstep-3);
  padding-block: var(--odstep-6) var(--odstep-7);
}

.stopka-serwisu strong {
  color: var(--kolor-panel-tekst);
  font-weight: 600;
}

.stopka-serwisu a {
  color: var(--kolor-panel-tekst);
}

.stopka-nawigacja {
  gap: 0 var(--odstep-5);
}

.stopka-nawigacja a {
  display: inline-flex;
  align-items: center;
  min-height: var(--wysokosc-celu);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stopka-wydawca,
.stopka-sponsor {
  margin: 0;
}

/* =============================================================================================
 * 4. Okruszki, znak przypisu (litera klasy pewności)
 * =========================================================================================== */

.okruszki {
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
}

.okruszki a {
  color: inherit;
}

/*
 * Znak przypisu: litera klasy jako indeks górny (0,62 em kroju mono) na delikatnym tle z koloru
 * litery. Podniesiony przez `position: relative`, a nie `vertical-align: super` - nie rozpycha
 * interlinii; `line-height: 0` i pionowy padding elementu w linii też jej nie zmieniają.
 * Tło to 10% koloru litery: kontrast litery do tego tła sprawdza `npm run strony:kontrast` (pary
 * z domieszką - udział zapisany tam tak samo jak tutaj).
 * Cel dotykowy: znak w zdaniu ma wyjątek „inline" WCAG 2.5.8, ale pole kliknięcia i tak rośnie do
 * 24 px przez `::before` - bez wpływu na układ.
 */
.znak-przypisu {
  position: relative;
  inset-block-start: -0.6em;
  padding: 0.14em 0.34em;
  font-family: var(--font-mono);
  font-size: max(0.62em, 0.625rem);
  font-weight: 600;
  font-style: normal;
  line-height: 0;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  color: var(--kolor-tekst-slaby);
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.znak-przypisu::before {
  content: '';
  position: absolute;
  inset: -0.75rem -0.4rem;
}

.znak-przypisu:hover,
.znak-przypisu:focus-visible {
  color: var(--kolor-akcent-tekst);
  background: var(--kolor-akcent-tlo);
}

.znak-przypisu:focus-visible {
  outline-width: 2px;
}

.przypis:target {
  outline: 3px solid var(--kolor-akcent);
  outline-offset: 2px;
  background: var(--kolor-akcent-tlo);
}

/* =============================================================================================
 * 5. Odpowiedź główna: zdjęcie obok czarnego panelu danych (hero)
 * =========================================================================================== */

.hero {
  display: grid;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: var(--kolor-panel);
  color: var(--kolor-panel-tekst);
}

.hero-foto {
  position: relative;
  margin: 0;
  min-height: 0;
}

.hero-foto img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hero-foto figcaption {
  position: absolute;
  inset: auto auto 0 0;
}

.hero-panel {
  display: grid;
  align-content: start;
  gap: var(--odstep-3);
  min-width: 0;
  padding: var(--odstep-5) var(--margines-strony) var(--odstep-6);
}

.hero-panel .okruszki,
.hero-panel .etykieta,
.hero-panel .zalozenia,
.hero-panel .etykieta-danych {
  color: var(--kolor-panel-tekst-slaby);
}

.hero-panel a {
  color: var(--kolor-panel-tekst);
}

.hero-panel .znak-przypisu {
  color: var(--kolor-panel-tekst-slaby);
}

.hero-panel .znak-przypisu:hover,
.hero-panel .znak-przypisu:focus-visible {
  color: var(--kolor-panel-tekst);
  background: color-mix(in srgb, currentColor 18%, transparent);
}

.hero-typ {
  margin: 0;
  font-size: 0.9rem;
}

.naglowek-encji {
  margin: 0;
  line-height: 0.86;
  font-weight: 900;
  text-wrap: balance;
}

.naglowek-encji-nazwa {
  display: block;
  font-size: clamp(3.2rem, 15vw, 7.2rem);
}

/* Długość nazwy (ryzyko kierunku 3): stopień tak, żeby najdłuższe słowo mieściło się w 375 px. */
.naglowek-encji--srednia .naglowek-encji-nazwa {
  font-size: clamp(2.6rem, 11.5vw, 6rem);
}

.naglowek-encji--dluga .naglowek-encji-nazwa {
  font-size: clamp(2rem, 8.6vw, 4.8rem);
}

.naglowek-encji-dopisek {
  display: block;
  margin-top: var(--odstep-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--kolor-panel-tekst-slaby);
}

.tagi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tagi li {
  padding: var(--odstep-1) var(--odstep-2);
  border: 1px solid var(--kolor-panel-tekst-slaby);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kwota-etykieta {
  margin: var(--odstep-2) 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-panel-tekst-slaby);
}

.kwota-glowna {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--odstep-3);
  margin: 0;
  font-family: var(--font-naglowki);
  font-weight: 800;
  font-size: clamp(2.4rem, 11.5vw, 5.6rem);
  line-height: 0.88;
  letter-spacing: -0.005em;
  color: var(--kolor-panel-akcent);
}

/*
 * Widełki łamią się najwyżej po łączniku (tysiące mają twardą spację), wyrównane na dwie linie zamiast „zł"
 * samotnie w drugiej - na wąskim ekranie kwota zostaje dużą liczbą bez poziomego przewijania.
 */
.kwota-glowna .kwota {
  text-wrap: balance;
  font-variant-numeric: normal;
}

/* Kwota ze znakiem: jeden element flex, żeby znak nie odjechał od kwoty o odstęp siatki. */
.kwota-glowna-wartosc {
  text-wrap: balance;
}

/* Znak przy wielkiej kwocie: przy górnej krawędzi cyfr, stały stopień (0,62 em kwoty byłoby za duże). */
.kwota-glowna .znak-przypisu {
  inset-block-start: 0.35rem;
  vertical-align: top;
  font-size: 0.75rem;
}

.kwota-okres {
  font-family: var(--font-tekst);
  font-size: 1rem;
  font-weight: 400;
  color: var(--kolor-panel-tekst);
}

.kwota-miesiecznie {
  margin: 0;
  font-size: 1rem;
  color: var(--kolor-panel-tekst);
}

.na-tle {
  display: grid;
  gap: var(--odstep-1);
  margin-top: var(--odstep-2);
}

.na-tle .os-tor {
  fill: var(--kolor-panel-linia);
}

.na-tle .os-zakres {
  fill: var(--kolor-panel-akcent);
}

.na-tle .os-skala {
  color: var(--kolor-panel-tekst-slaby);
}

.hero-data,
.hero-wstep {
  margin: 0;
}

.hero-data {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-panel-tekst-slaby);
}

/* Jasny pas pod panelem: założenia, warianty, adnotacje braków - część tej samej odpowiedzi. */
.hero-uwagi {
  display: grid;
  gap: var(--odstep-3);
  padding: var(--odstep-5) var(--margines-strony);
  background: var(--kolor-tlo);
  color: var(--kolor-tekst);
  border-bottom: 2px solid var(--kolor-linia-mocna);
}

.hero-uwagi > * {
  margin: 0;
  max-width: 80ch;
}

.hero-uwagi:empty {
  display: none;
}

.hero--bez-zdjecia .hero-panel {
  padding-top: var(--odstep-6);
}

/* Telefon: niższe zdjęcie i ciaśniejszy panel - kwota i linia „typowo" nad banerem zgód przy pierwszej
 * wizycie (strażnik S-5, runda 5; N-16, runda 6). */
@media (max-width: 599px) {
  .hero-foto img {
    aspect-ratio: 2 / 1;
  }

  .hero-panel {
    gap: var(--odstep-2);
    padding-block: var(--odstep-4) var(--odstep-5);
  }

  .hero-uwagi {
    padding-block: var(--odstep-4);
  }
}

@media (min-width: 1000px) {
  .hero {
    grid-template-columns: 58fr 42fr;
  }

  .hero-foto img {
    aspect-ratio: auto;
    min-height: 30rem;
  }

  .hero-panel {
    padding: var(--odstep-6) var(--odstep-6) var(--odstep-6) var(--odstep-6);
  }

  /*
   * Kwota w kolumnie 42% szerokości: stopień od szerokości okna, nie mniejszy niż nagłówki sekcji (h2 3,6 rem) -
   * kwota zostaje najwyraźniejszą liczbą strony; dłuższe widełki łamią się po łączniku.
   */
  .kwota-glowna {
    font-size: clamp(3.6rem, 4.6vw, 5.6rem);
  }

  .hero-uwagi {
    grid-column: 1 / -1;
    padding-inline: max(var(--margines-strony), calc((100% - var(--szerokosc-strony)) / 2));
  }

  .hero--bez-zdjecia {
    grid-template-columns: 1fr;
  }

  .hero--bez-zdjecia .hero-panel {
    padding-inline: max(var(--margines-strony), calc((100% - var(--szerokosc-strony)) / 2));
  }

  .hero--bez-zdjecia .na-tle {
    max-width: 40rem;
  }
}

/* =============================================================================================
 * 6. Zdjęcia: podpis z licencją, zamiennik bez zdjęcia
 * =========================================================================================== */

.zdjecie-podpis {
  margin: 0;
  max-width: none;
  padding: var(--odstep-1) var(--odstep-2);
  background: rgb(13 13 15 / 0.8);
  color: #f2f2ee;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-transform: uppercase;
}

.zdjecie-podpis a {
  color: #f2f2ee;
}

.zdjecie-brak {
  display: grid;
  align-content: end;
  gap: var(--odstep-2);
  height: 100%;
  min-height: 12rem;
  aspect-ratio: 4 / 3;
  padding: var(--odstep-4);
  background-color: var(--kolor-tlo-podniesione);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 9px,
    color-mix(in srgb, var(--kolor-tekst) 10%, transparent) 9px 10px
  );
  color: var(--kolor-tekst);
}

.zdjecie-brak-opis {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
}

.zdjecie-brak--hero {
  min-height: 16rem;
  background-color: #1d1f26;
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgb(242 242 238 / 0.08) 11px 12px);
}

.zdjecie-brak--hero .zdjecie-brak-opis {
  color: #a2a4ad;
}

@media (min-width: 1000px) {
  .zdjecie-brak--hero {
    aspect-ratio: auto;
    min-height: 36rem;
  }
}

/* Pozycja kadru zdjęcia (strażnik N-17): punkt, wokół którego przeglądarka przycina zdjęcie w wąskiej
 * kolumnie hero i w kartach. Klasy osi zamiast atrybutu style (CSP bez unsafe-inline) - 21 wartości na
 * oś (siatka co 5%, ta sama co w kontrakcie snapshotu), łączone przez zmienne CSS. */
.kadr {
  object-position: var(--kadr-x, 50%) var(--kadr-y, 50%);
}

.kx-0 {
  --kadr-x: 0%;
}
.kx-5 {
  --kadr-x: 5%;
}
.kx-10 {
  --kadr-x: 10%;
}
.kx-15 {
  --kadr-x: 15%;
}
.kx-20 {
  --kadr-x: 20%;
}
.kx-25 {
  --kadr-x: 25%;
}
.kx-30 {
  --kadr-x: 30%;
}
.kx-35 {
  --kadr-x: 35%;
}
.kx-40 {
  --kadr-x: 40%;
}
.kx-45 {
  --kadr-x: 45%;
}
.kx-50 {
  --kadr-x: 50%;
}
.kx-55 {
  --kadr-x: 55%;
}
.kx-60 {
  --kadr-x: 60%;
}
.kx-65 {
  --kadr-x: 65%;
}
.kx-70 {
  --kadr-x: 70%;
}
.kx-75 {
  --kadr-x: 75%;
}
.kx-80 {
  --kadr-x: 80%;
}
.kx-85 {
  --kadr-x: 85%;
}
.kx-90 {
  --kadr-x: 90%;
}
.kx-95 {
  --kadr-x: 95%;
}
.kx-100 {
  --kadr-x: 100%;
}
.ky-0 {
  --kadr-y: 0%;
}
.ky-5 {
  --kadr-y: 5%;
}
.ky-10 {
  --kadr-y: 10%;
}
.ky-15 {
  --kadr-y: 15%;
}
.ky-20 {
  --kadr-y: 20%;
}
.ky-25 {
  --kadr-y: 25%;
}
.ky-30 {
  --kadr-y: 30%;
}
.ky-35 {
  --kadr-y: 35%;
}
.ky-40 {
  --kadr-y: 40%;
}
.ky-45 {
  --kadr-y: 45%;
}
.ky-50 {
  --kadr-y: 50%;
}
.ky-55 {
  --kadr-y: 55%;
}
.ky-60 {
  --kadr-y: 60%;
}
.ky-65 {
  --kadr-y: 65%;
}
.ky-70 {
  --kadr-y: 70%;
}
.ky-75 {
  --kadr-y: 75%;
}
.ky-80 {
  --kadr-y: 80%;
}
.ky-85 {
  --kadr-y: 85%;
}
.ky-90 {
  --kadr-y: 90%;
}
.ky-95 {
  --kadr-y: 95%;
}
.ky-100 {
  --kadr-y: 100%;
}

/* =============================================================================================
 * 7. Wspólna oś kosztu: tor od zera, zakres widełek, podziałki
 * =========================================================================================== */

.os-pasek {
  display: block;
  width: 100%;
  height: 0.75rem;
}

.os-tor {
  fill: var(--kolor-tor);
}

.os-zakres {
  fill: var(--kolor-akcent);
}

.os-skala {
  display: flex;
  justify-content: space-between;
  gap: var(--odstep-1);
  margin: 0;
  max-width: none;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--kolor-tekst-slaby);
}

.os-skala-odstep {
  display: none;
}

@media (forced-colors: active) {
  .os-zakres {
    fill: CanvasText;
  }

  .os-tor {
    fill: GrayText;
  }
}

/* =============================================================================================
 * 8. Przegląd kategorii jako rząd liczb (KPI)
 * =========================================================================================== */

.przeglad-kategorii > h2 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: var(--odstep-2);
  color: var(--kolor-tekst-slaby);
}

main.strona > .przeglad-kategorii > h2::before {
  content: none;
}

.przeglad-kategorii .slupki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0;
  border-top: 2px solid var(--kolor-linia-mocna);
}

.slupek-wiersz {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: var(--odstep-1);
  padding: var(--odstep-4) var(--odstep-4) var(--odstep-4) 0;
  border-bottom: 1px solid var(--kolor-linia);
}

.slupek-nazwa {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
}

.slupek-kwota {
  white-space: normal;
  font-size: 0.88rem;
  color: var(--kolor-tekst-slaby);
}

.slupek-kwota .kwota {
  display: inline-block;
  font-family: var(--font-naglowki);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: normal;
  color: var(--kolor-tekst);
}

/* Znak przy dużej kwocie kafla: przy górnej krawędzi cyfr i w tej samej linii co kwota. */
.slupek-kwota:not(.slupek-kwota--brak) {
  white-space: nowrap;
}

.slupek-okres {
  display: block;
  white-space: normal;
}

.slupek-kwota .znak-przypisu {
  inset-block-start: 0.35em;
  vertical-align: top;
}

.slupek-kwota--brak {
  font-weight: 400;
}

.slupek-sklad {
  color: var(--kolor-tekst-slaby);
  font-size: 0.85rem;
}

@media (min-width: 1000px) {
  .slupek-wiersz + .slupek-wiersz {
    padding-left: var(--odstep-4);
    border-left: 1px solid var(--kolor-linia);
  }
}

/* =============================================================================================
 * 9. Pozycje kosztu: rachunek „cena × razy = rocznie" i słupek z widełkami
 * =========================================================================================== */

.lista-pozycji {
  display: grid;
  gap: 0;
  margin: var(--odstep-4) 0 0;
  padding: 0;
  list-style: none;
  max-width: 56rem;
  border-top: 2px solid var(--kolor-linia-mocna);
}

.pozycja {
  display: grid;
  gap: var(--odstep-1);
  max-width: none;
  padding-block: var(--odstep-3);
  border-bottom: 1px solid var(--kolor-linia);
}

.pozycja > p {
  margin: 0;
}

.pozycja-nazwa {
  font-weight: 700;
}

.pozycja--poza-suma .pozycja-nazwa {
  font-weight: 500;
}

.pozycja-rachunek strong .kwota {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Linie pomocnicze pod rachunkiem: mniejszy stopień, kolor drugorzędny, ten sam odstęp co reszta pozycji. */
.pozycja-widelki,
.pozycja-uzasadnienie,
.pozycja-fakt {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--kolor-tekst-slaby);
}

.pozycja-etykieta {
  margin-inline-end: 0.35em;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tabela-kosztow .kwota,
.lista-pozycji .kwota {
  white-space: nowrap;
}

/* Brak wiarygodnej ceny: żółta etykieta (kolor zawsze z ciemnym tekstem, kontrast 14:1). */
.pozycja-brak,
.komorka-brak {
  justify-self: start;
  display: inline-block;
  padding: 0.15rem var(--odstep-2);
  background: var(--kolor-brak);
  color: var(--kolor-na-braku);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-transform: uppercase;
}

.pozycja-brak .znak-przypisu,
.komorka-brak .znak-przypisu {
  inset-block-start: 0;
  margin-inline-start: 0.4em;
  color: var(--kolor-na-braku);
}

.adnotacja-przy-kwocie {
  margin-top: var(--odstep-3);
  padding: var(--odstep-2) var(--odstep-3);
  border-left: 4px solid var(--kolor-brak);
  background: var(--kolor-tlo-podniesione);
  color: var(--kolor-tekst);
  font-size: 0.9rem;
}

.nota-wyrozniona {
  padding: var(--odstep-3) var(--odstep-4);
  border-left: 4px solid var(--kolor-akcent);
  background: var(--kolor-akcent-tlo);
  color: var(--kolor-tekst);
}

.nota-wyrozniona a,
.adnotacja-przy-kwocie a {
  color: var(--kolor-akcent-tekst);
}

/* =============================================================================================
 * 10. Tabele: reguła 2 px nad tabelą, nagłówki w mono, liczby w kolumnach
 * =========================================================================================== */

.tabela-przewijana {
  max-width: 100%;
  overflow-x: auto;
  margin-block: var(--odstep-4);
  border-top: 2px solid var(--kolor-linia-mocna);
}

.tabela-przewijana:focus-visible {
  outline: 3px solid var(--kolor-akcent);
  outline-offset: 2px;
}

.tabela-kosztow {
  font-size: 0.95rem;
}

.tabela-kosztow caption {
  caption-side: top;
  text-align: left;
  padding-block: var(--odstep-2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
}

.tabela-kosztow th,
.tabela-kosztow td {
  padding: var(--odstep-3) var(--odstep-3) var(--odstep-3) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--kolor-linia);
}

.tabela-kosztow thead th {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
  vertical-align: bottom;
  border-bottom: 1px solid var(--kolor-linia-mocna);
}

.tabela-kosztow tbody th {
  font-weight: 700;
}

.tabela-kosztow td .kwota {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.tabela-kosztow tfoot th,
.tabela-kosztow tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--kolor-linia-mocna);
  background: var(--kolor-akcent-tlo);
}

.tabela-przewijana--przyklejona th[scope='row'],
.tabela-przewijana--przyklejona thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--kolor-tlo);
}

.tabela-karmy,
.tabela-faktow {
  min-width: 40rem;
}

.komorka-opis {
  display: block;
  font-size: 0.8rem;
  color: var(--kolor-tekst-slaby);
}

/* Ubezpieczenie (Aneks 4 pkt 6): opis wariantu i produktu w nagłówku zwykłym tekstem (nie mono wersalikami);
 * porównanie polis - kolumny o stałej szerokości, tekst OWU zawija się, na wąskim ekranie przewijanie. */
/* Podpis tabeli szerszej niż ekran: akapit w kontenerze przewijania przyklejony do lewej krawędzi -
 * szerokość ekranu, nie tabeli, więc zawija się zamiast uciekać w przewijanie (wygląd jak `caption`). */
.podpis-tabeli {
  position: sticky;
  left: 0;
  max-width: 100%;
  margin: 0;
  padding-block: var(--odstep-2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
}

.tabela-skladek {
  min-width: 34rem;
}

.tabela-skladek thead .komorka-opis,
.tabela-polis thead .komorka-opis {
  font-family: var(--font-tekst);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.tabela-skladu {
  min-width: 26rem;
}

.tabela-polis {
  min-width: 52rem;
  table-layout: fixed;
}

.tabela-polis th[scope='row'] {
  width: 9rem;
}

.lista-w-komorce {
  margin: 0;
  padding-left: var(--odstep-4);
}

.lista-w-komorce li + li {
  margin-top: var(--odstep-1);
}

/* =============================================================================================
 * 11. Wykresy W1-W6 (projekt aneks 2 A2.4, makieta kierunku 3): figura, wskaźnik pewności, znaki
 *
 * Znaki stoją w SVG o rozciągliwym `viewBox` (szerokość z kontenera, wysokość w pikselach), tekst
 * w HTML obok. Linie mają `vector-effect: non-scaling-stroke`, więc grubość nie zależy od skali;
 * kropka to odcinek zerowej długości z okrągłym zakończeniem (koło niezależne od rozciągnięcia).
 * Kolor znaku = grupa czynnika (`--kolor-grupa-*` w motywie, paleta zwalidowana dataviz w obu
 * trybach); tekst zawsze w tokenach tekstu, poza liczbą na wypełnieniu (`--kolor-na-grupie-*`).
 * =========================================================================================== */

.g-karma {
  --kolor-znaku: var(--kolor-grupa-karma);
  --kolor-na-znaku: var(--kolor-na-grupie-karma);
}

.g-akcesoria {
  --kolor-znaku: var(--kolor-grupa-akcesoria);
  --kolor-na-znaku: var(--kolor-na-grupie-akcesoria);
}

.g-profilaktyka {
  --kolor-znaku: var(--kolor-grupa-profilaktyka);
  --kolor-na-znaku: var(--kolor-na-grupie-profilaktyka);
}

.g-pielegnacja {
  --kolor-znaku: var(--kolor-grupa-pielegnacja);
  --kolor-na-znaku: var(--kolor-na-grupie-pielegnacja);
}

.g-start {
  --kolor-znaku: var(--kolor-grupa-start);
  --kolor-na-znaku: var(--kolor-na-grupie-start);
}

.g-oplaty {
  --kolor-znaku: var(--kolor-grupa-oplaty);
  --kolor-na-znaku: var(--kolor-na-grupie-oplaty);
}

.g-pozostale {
  --kolor-znaku: var(--kolor-grupa-pozostale);
  --kolor-na-znaku: var(--kolor-na-grupie-pozostale);
}

/* Jedna seria (koszt roku, wybrany segment karmy) - pierwszy kolor palety, czyli akcent. */
.g-rok {
  --kolor-znaku: var(--kolor-akcent);
  --kolor-na-znaku: var(--kolor-na-akcencie);
}

.wykres {
  display: grid;
  gap: var(--odstep-4);
  margin: var(--odstep-6) 0 0;
  padding-top: var(--odstep-4);
  border-top: 1px solid var(--kolor-linia);
}

/* Elementy list wykresów (pasma, etykiety osi, legenda) nie dziedziczą miary tekstu akapitu. */
.wykres li {
  max-width: none;
}

.wykres-naglowek {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--odstep-2) var(--odstep-4);
}

.wykres-naglowek-tekst {
  display: grid;
  gap: var(--odstep-1);
}

.wykres-tytul {
  font-family: var(--font-naglowki);
  font-size: clamp(1.6rem, 4.6vw, 2.2rem);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
}

.wykres-lede {
  max-width: 68ch;
}

/* Wskaźnik pewności: liczba wypełnionych kresek = klasa (A trzy, B dwie, C jedna), litera obok. */
.pewnosc {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--kolor-tekst-slaby);
}

.pewnosc-paski {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.pewnosc-paski i {
  display: block;
  width: 4px;
  background: var(--kolor-linia);
}

.pewnosc-paski i:nth-child(1) {
  height: 6px;
}

.pewnosc-paski i:nth-child(2) {
  height: 9px;
}

.pewnosc-paski i:nth-child(3) {
  height: 12px;
}

.pewnosc--a .pewnosc-paski i,
.pewnosc--b .pewnosc-paski i:nth-child(-n + 2),
.pewnosc--c .pewnosc-paski i:nth-child(1) {
  background: var(--kolor-tekst);
}

.pewnosc .znak-przypisu {
  inset-block-start: 0;
  font-size: 0.78rem;
  color: var(--kolor-tekst);
}

.wykres-siatka {
  display: grid;
  gap: var(--odstep-4);
}

.wykres-rysunek {
  --os-szerokosc: 3.4rem;
  min-width: 0;
}

.wykres-noty {
  display: grid;
  align-content: start;
  gap: var(--odstep-3);
}

@media (min-width: 1000px) {
  .wykres-siatka:not(.wykres-siatka--pod) {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    gap: var(--odstep-6);
  }

  .wykres-siatka:not(.wykres-siatka--pod) > .wykres-noty {
    padding-left: var(--odstep-5);
    border-left: 1px solid var(--kolor-linia);
  }
}

/* Lista pod rysunkiem (W3): pozycje w kolumnach na szerokim ekranie, legenda grup pod listą. */
.wykres-siatka--pod .wykres-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  column-gap: var(--odstep-6);
}

.wykres-jednostka {
  margin: 0 0 var(--odstep-2);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-align: right;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
}

/* Pole rysunku z osią wartości po prawej: etykiety podziałek równo na wysokości rysunku. */
.wykres-pole {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--os-szerokosc);
  align-items: stretch;
}

.wykres-svg {
  display: block;
  width: 100%;
  height: 200px;
  overflow: visible;
}

.wykres-os {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% + 1rem);
  margin: -0.5rem 0;
  padding: 0 0 0 0.4rem;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1rem;
  white-space: nowrap;
  color: var(--kolor-tekst-slaby);
}

.wykres-x,
.wykres-pasma {
  display: flex;
  margin: 0 var(--os-szerokosc) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--kolor-tekst-slaby);
}

.wykres-x {
  margin-top: 0;
  padding-top: var(--odstep-1);
  border-top: 1px solid var(--kolor-linia-mocna);
}

.wykres-x li {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.wykres-pasma {
  gap: 2px;
  margin-top: var(--odstep-2);
}

.pasmo {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  padding-top: var(--odstep-1);
  border-top: 2px solid var(--kolor-tekst-slaby);
  letter-spacing: 0.04em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.pasmo--2 {
  flex-grow: 2;
}
.pasmo--3 {
  flex-grow: 3;
}
.pasmo--4 {
  flex-grow: 4;
}
.pasmo--5 {
  flex-grow: 5;
}
.pasmo--6 {
  flex-grow: 6;
}
.pasmo--7 {
  flex-grow: 7;
}
.pasmo--8 {
  flex-grow: 8;
}
.pasmo--9 {
  flex-grow: 9;
}
.pasmo--10 {
  flex-grow: 10;
}
.pasmo--11 {
  flex-grow: 11;
}
.pasmo--12 {
  flex-grow: 12;
}
.pasmo--13 {
  flex-grow: 13;
}
.pasmo--14 {
  flex-grow: 14;
}
.pasmo--15 {
  flex-grow: 15;
}
.pasmo--16 {
  flex-grow: 16;
}
.pasmo--17 {
  flex-grow: 17;
}
.pasmo--18 {
  flex-grow: 18;
}
.pasmo--19 {
  flex-grow: 19;
}
.pasmo--20 {
  flex-grow: 20;
}

/*
 * Znaki SVG: wypełnienie z grupy, linie bez skalowania grubości - rysunek rozciąga się w poziomie,
 * a kreska ma zostać kreską 1-2 px (właściwość CSS zamiast atrybutu przy każdej linii: budżet KW-7).
 */
[data-wykres] line {
  vector-effect: non-scaling-stroke;
}

.znak {
  fill: var(--kolor-znaku);
}

/* Podświetlenie znaku pod kursorem (podpowiedź z natywnego `<title>`) - pojedynczy prostokąt, także w grupie. */
[data-wykres] rect:hover {
  opacity: 0.8;
}

.znak-brak {
  stroke: var(--kolor-tor);
  stroke-width: 1;
}

.kreska {
  stroke: var(--kolor-tor);
  stroke-width: 1.5;
}

.siatka {
  stroke: var(--kolor-linia);
  stroke-width: 1;
}

.odstep {
  stroke: var(--kolor-tlo);
  stroke-width: 2;
}

.wasy {
  stroke: var(--kolor-tekst);
  stroke-width: 2;
  stroke-linecap: round;
}

.kropka,
.kropka-tlo {
  stroke-linecap: round;
}

.kropka {
  stroke: var(--kolor-akcent);
  stroke-width: 10;
}

.kropka-tlo {
  stroke: var(--kolor-tlo);
  stroke-width: 14;
}

/* Legenda i lista: próbka koloru obok tekstu w tokenach tekstu (tożsamość niesie nazwa). */
.probka {
  display: inline-block;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--kolor-znaku);
}

.probka--brak {
  border: 1px solid var(--kolor-tor);
  background: repeating-linear-gradient(-45deg, var(--kolor-tor) 0 1.5px, transparent 1.5px 4px);
}

.probka--wasy {
  height: 0.6rem;
  border: solid var(--kolor-tekst);
  border-width: 0 2px;
  background: linear-gradient(var(--kolor-tekst), var(--kolor-tekst)) center / 100% 2px no-repeat;
}

.wykres-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-1) var(--odstep-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.wykres-legenda li {
  display: inline-flex;
  align-items: center;
  gap: var(--odstep-2);
}

.wykres-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
}

.wykres-lista li {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--odstep-1) var(--odstep-2);
  padding: var(--odstep-2) 0;
  border-bottom: 1px solid var(--kolor-linia);
}

.wykres-lista-kwota {
  white-space: nowrap;
}

.wykres-lista .liczba {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: nowrap;
}

.wykres-lista-sklad {
  display: block;
  font-size: 0.8rem;
  color: var(--kolor-tekst-slaby);
}

.wykres-lista .znak-przypisu {
  inset-block-start: 0;
}

.nota {
  margin: 0;
  font-size: 0.88rem;
  color: var(--kolor-tekst-slaby);
}

.stat {
  display: grid;
  gap: var(--odstep-1);
  margin: 0;
  padding-bottom: var(--odstep-3);
  border-bottom: 1px solid var(--kolor-linia);
}

.stat-wartosc {
  font-family: var(--font-naglowki);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--kolor-akcent-tekst);
}

.stat-wartosc--brak {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--kolor-tekst-slaby);
}

/* Tabela danych pod wykresem: zwinięta (wygląd przycisku jak lista źródeł, sekcja 12). */
.wykres-dane .tabela-przewijana {
  margin-top: var(--odstep-2);
}

.wykres-dane-ciagle {
  margin: var(--odstep-2) 0 0;
  font-size: 0.9rem;
}

/* W3: słupek skumulowany i widełki sumy pod nim. */
.w3-pasek {
  display: block;
  width: 100%;
  height: 24px;
}

.w3-widelki {
  display: block;
  overflow: visible;
  width: 100%;
  height: 16px;
  margin-top: var(--odstep-2);
}

.w3-suma {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--odstep-1) var(--odstep-3);
  margin: var(--odstep-2) 0 0;
}

.w3-suma .liczba {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
}

.w3-suma-widelki {
  font-size: 0.85rem;
  color: var(--kolor-tekst-slaby);
}

/*
 * W2: kalendarz - tabela z tłem w kolorze grupy, mieści się na 375 px bez przewijania strony. Klasa
 * grupy stoi na wierszu (`tr.g-*`); `kc` - pas wydatku co miesiąc, `k` - termin z kwotą, `kb` -
 * termin bez ceny. Jednostka „zł" w komórce jest tylko dla czytnika ekranu.
 */
.kalendarz {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 0.85rem;
}

.kalendarz th,
.kalendarz td {
  padding: 0;
  border: 0;
}

.kalendarz thead th {
  height: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  text-align: center;
  vertical-align: bottom;
  color: var(--kolor-tekst-slaby);
}

.kalendarz thead th:first-child {
  width: 34%;
}

.kalendarz tbody th,
.kalendarz tfoot th {
  padding-right: var(--odstep-2);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  overflow-wrap: anywhere;
}

/* Próbka koloru grupy przed nazwą pozycji - z klasy wiersza, bez osobnego elementu. */
.kalendarz tbody th::before {
  content: '';
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: var(--odstep-2);
  vertical-align: -0.05em;
  background: var(--kolor-znaku);
}

.kalendarz td {
  height: 1.7rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-align: center;
  vertical-align: middle;
  background: var(--kolor-tlo-podniesione);
}

.kalendarz td span {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.kalendarz td.k {
  color: var(--kolor-na-znaku);
  background: var(--kolor-znaku);
}

/*
 * Wydatek co miesiąc to tło roku, nie termin: pas w odcieniu grupy (domieszka 28% do tła) z tekstem
 * w kolorze tekstu i pełnym kolorem grupy na lewej krawędzi. Pełne wypełnienie zostaje dla terminów -
 * to one są treścią kalendarza (dataviz: nasycone bloki tylko dla małych znaków i akcentów).
 */
.kalendarz td.kc {
  overflow: hidden;
  padding: 0 var(--odstep-2);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kolor-tekst);
  background: color-mix(in srgb, var(--kolor-znaku) 28%, var(--kolor-tlo));
  box-shadow: inset 3px 0 0 var(--kolor-znaku);
}

.kalendarz td.kb {
  background: repeating-linear-gradient(-45deg, var(--kolor-tor) 0 1.5px, var(--kolor-tlo) 1.5px 5px);
}

.kalendarz tfoot td {
  font-weight: 600;
  border-top: 2px solid var(--kolor-linia-mocna);
  background: none;
}

.wykres-pod {
  display: grid;
  gap: var(--odstep-2);
}

@media (min-width: 1000px) {
  .kalendarz thead th:first-child {
    width: 16rem;
  }

  .kalendarz td {
    font-size: 0.7rem;
  }
}

@media (max-width: 599px) {
  .kalendarz {
    border-spacing: 1px;
    font-size: 0.78rem;
  }

  .kalendarz thead th:not(:first-child) {
    height: 2.6rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: left;
    vertical-align: middle;
  }

  .kalendarz thead th:first-child {
    width: 38%;
  }

  /* Liczby terminów i sum chowają się wizualnie: kolor pokazuje termin, kwoty są w tabeli danych. */
  .kalendarz td.k {
    font-size: 0;
  }

  .kalendarz tfoot {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* W4, W5: wiersze z nazwą, znakiem na wspólnej osi i wartością; oś pod wierszami. */
.wiersze-osi {
  display: grid;
  gap: 0;
}

.wiersze-osi-grupa {
  margin: var(--odstep-3) 0 var(--odstep-1);
  padding-bottom: var(--odstep-1);
  border-bottom: 1px solid var(--kolor-linia);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wiersze-osi-grupa:first-child {
  margin-top: 0;
}

.wiersz-osi {
  display: grid;
  grid-template-columns: minmax(6.5rem, 30%) minmax(0, 1fr);
  grid-template-areas:
    'nazwa nazwa'
    'znak wartosc';
  align-items: center;
  gap: 0 var(--odstep-3);
  padding: var(--odstep-1) var(--odstep-1);
  font-size: 0.9rem;
}

.wiersz-osi-nazwa {
  grid-area: nazwa;
}

.wiersz-osi-svg,
.wiersz-osi-brak {
  grid-area: znak;
}

.wiersz-osi-wartosc {
  grid-area: wartosc;
}

@media (min-width: 600px) {
  .wiersz-osi {
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) minmax(7.5rem, auto);
    grid-template-areas: 'nazwa znak wartosc';
  }

  .wiersz-osi-brak {
    grid-column: 2 / 4;
  }
}

/* Na wąskim ekranie nazwa nad wierszem, znak na całej szerokości, wartość pod nim po prawej. */
@media (max-width: 599px) {
  .wiersz-osi {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.wiersz-osi-svg {
  display: block;
  width: 100%;
  height: 16px;
  overflow: visible;
}

.wiersz-osi-wartosc {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  white-space: nowrap;
}

.wiersz-osi-wartosc .liczba {
  font-weight: 600;
}

.wykres-widelki {
  color: var(--kolor-tekst-slaby);
}

.wiersz-osi-brak {
  display: inline-flex;
  align-items: center;
  gap: var(--odstep-2);
  font-size: 0.82rem;
  color: var(--kolor-tekst-slaby);
}

.wiersz-osi--wybrany {
  background: var(--kolor-akcent-tlo);
}

.wiersz-osi--wybrany .wiersz-osi-nazwa {
  font-weight: 700;
}

.wiersz-osi-znacznik {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-akcent-tekst);
}

/* Odesłanie do ostrzeżenia (BARF): czytelny stopień (KW-5, co najmniej 12 px) i kolor ostrzeżenia z podkreśleniem. */
.wiersz-osi-znacznik--ostrzezenie {
  font-size: 0.75rem;
  color: var(--kolor-ostrzezenie);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.lista-zalecen {
  margin-block: var(--odstep-2) var(--odstep-4);
  padding-inline-start: 1.2em;
}

.lista-zalecen li + li {
  margin-top: var(--odstep-1);
}

.nota-barf {
  margin-block: var(--odstep-4);
}

.nota-barf h3 {
  margin-top: 0;
}

.wiersz-osi--skala {
  padding-top: var(--odstep-1);
  border-top: 1px solid var(--kolor-linia-mocna);
}

.wiersz-osi--skala > span:first-child {
  grid-area: nazwa;
}

.wykres-os-pozioma {
  display: flex;
  grid-area: znak;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--kolor-tekst-slaby);
}

.wiersz-osi-jednostka {
  grid-area: wartosc;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
}

@media (max-width: 599px) {
  .wiersz-osi--skala > span:first-child {
    display: none;
  }
}

.zakres {
  stroke: var(--kolor-grupa-pozostale);
  stroke-width: 2;
  stroke-linecap: round;
}

.zakres--wybrany {
  stroke: var(--kolor-akcent);
}

.kropka--tlo {
  stroke: var(--kolor-grupa-pozostale);
}

.probka--kropka {
  border-radius: 50%;
  background: var(--kolor-akcent);
}

.probka--kropka-tlo {
  background: var(--kolor-grupa-pozostale);
}

.wykres-legenda--pion {
  flex-direction: column;
}

/* W6: dwa panele na wspólnej osi wieku, podpisy gramów nad kolumnami. */
.wykres-rysunek--pelny {
  max-width: 56rem;
}

.wykres-jednostka--lewa {
  text-align: left;
}

.wykres-jednostka--odstep {
  margin-top: var(--odstep-4);
  text-align: left;
}

.w6-gramy {
  height: 72px;
}

.w6-koszt {
  height: 140px;
}

.w6-gramy-wartosci {
  display: flex;
  margin: 0 var(--os-szerokosc) var(--odstep-1) 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--kolor-tekst-slaby);
}

.w6-gramy-wartosci li {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

/*
 * Wąski ekran: kolumna ma kilkanaście pikseli - zostają podpisy co drugiej kolumny i kluczowe wartości
 * gramów, a pasmo jednej kolumny (pierwszy rok, dorosły, senior) nie mieści nazwy; wszystkie wartości
 * są w podpowiedzi znaku i w tabeli danych pod wykresem.
 */
@media (max-width: 599px) {
  .w6-drugorzedna,
  .w6-etap,
  .pasmo--1,
  .wykres-x li:nth-child(even):not(:last-child) {
    visibility: hidden;
  }
}

@media (forced-colors: active) {
  .znak,
  .probka,
  .kalendarz td.k,
  .kalendarz td.kc,
  .kalendarz tbody th::before {
    forced-color-adjust: none;
  }
}

/* =============================================================================================
 * 12. Listy opisów, karta danych, FAQ, przypisy
 * =========================================================================================== */

.lista-opisow {
  display: grid;
  gap: 0;
  margin: var(--odstep-4) 0 0;
  max-width: 56rem;
  border-top: 2px solid var(--kolor-linia-mocna);
}

.lista-opisow dt {
  margin: 0;
  padding-top: var(--odstep-3);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
}

.lista-opisow dd {
  margin: 0;
  padding: var(--odstep-1) 0 var(--odstep-3);
  color: var(--kolor-tekst);
  border-bottom: 1px solid var(--kolor-linia);
}

.lista-opisow dd ul {
  margin: 0;
  padding-left: 1.2em;
}

@media (min-width: 700px) {
  .lista-opisow {
    grid-template-columns: 12rem 1fr;
  }

  .lista-opisow dt {
    padding: var(--odstep-3) var(--odstep-4) var(--odstep-3) 0;
    border-bottom: 1px solid var(--kolor-linia);
  }

  .lista-opisow dd {
    padding-top: var(--odstep-3);
  }
}

.lista-opisow .kwota,
.zycie-kwota .kwota {
  font-family: var(--font-naglowki);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: normal;
}

.faq {
  max-width: var(--miara-tekstu);
  border-top: 2px solid var(--kolor-linia-mocna);
}

.faq-pozycja {
  padding-block: var(--odstep-4);
  border-bottom: 1px solid var(--kolor-linia);
}

.faq-pozycja + .faq-pozycja {
  margin-top: 0;
}

.faq-pytanie {
  font-weight: 700;
}

/* Pytanie jako rozwijana pozycja (strażnik S-5): cel dotykowy co najmniej 44 px, znacznik jak w .szczegoly. */
.faq-pozycja > summary {
  display: flex;
  align-items: center;
  gap: var(--odstep-2);
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
}

.faq-pozycja > summary::-webkit-details-marker {
  display: none;
}

.faq-pozycja > summary::before {
  content: '+' / '';
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid currentColor;
  font-size: 0.85rem;
  line-height: 1;
}

.faq-pozycja[open] > summary::before {
  content: '\2212' / '';
}

.faq-pozycja > summary:hover {
  text-decoration: underline;
}

.faq-odpowiedz {
  margin: var(--odstep-1) 0 0;
}

/* Odnośniki pod legendą (strona główna): ten sam odstęp co między blokami sekcji źródeł. */
.legenda-klas + .odnosniki {
  margin-top: var(--odstep-5);
}

.przypisy-wstep {
  max-width: 60ch;
  margin: var(--odstep-4) 0 0;
  font-size: 0.9rem;
  color: var(--kolor-tekst-slaby);
}

.przypisy-wiecej {
  margin: var(--odstep-4) 0 0;
  font-size: 0.9rem;
}

/* Legenda klas: trzy pozycje w rzędzie (od 700 px), litera w kwadracie, nazwa i jedno zdanie. */
.legenda-klas {
  display: grid;
  gap: var(--odstep-4);
  margin: var(--odstep-4) 0 0;
  padding-top: var(--odstep-4);
  border-top: 2px solid var(--kolor-linia-mocna);
}

.legenda-klas-pozycja {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--odstep-3);
  align-items: center;
}

.legenda-klas dt {
  display: contents;
  font-weight: 700;
}

.legenda-klas dd {
  grid-column: 2;
  margin: var(--odstep-1) 0 0;
  font-size: 0.88rem;
  color: var(--kolor-tekst-slaby);
}

.litera-klasy {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  color: var(--kolor-tekst);
  background: var(--kolor-tlo-podniesione);
}

@media (min-width: 700px) {
  .legenda-klas {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--odstep-5);
  }
}

/*
 * Zwijane części strony: lista przypisów i źródeł, rachunki pozycji (szczegóły pod wykresem), tabele
 * danych wykresów. <details> bez JS; przycisk w kroju etykiet, cel 44 px wysokości.
 */
.zrodla-zwijane,
.szczegoly {
  max-width: 56rem;
  margin-top: var(--odstep-5);
  border-top: 1px solid var(--kolor-linia);
  border-bottom: 1px solid var(--kolor-linia);
}

.zrodla-zwijane > summary,
.szczegoly > summary,
.wykres-dane > summary {
  display: flex;
  align-items: center;
  gap: var(--odstep-2);
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-akcent-tekst);
}

.zrodla-zwijane > summary::-webkit-details-marker,
.szczegoly > summary::-webkit-details-marker,
.wykres-dane > summary::-webkit-details-marker {
  display: none;
}

.zrodla-zwijane > summary::before,
.szczegoly > summary::before,
.wykres-dane > summary::before {
  content: '+' / '';
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid currentColor;
  font-size: 0.85rem;
  line-height: 1;
}

.zrodla-zwijane[open] > summary::before,
.szczegoly[open] > summary::before,
.wykres-dane[open] > summary::before {
  content: '\2212' / '';
}

.zrodla-zwijane > summary:hover,
.szczegoly > summary:hover,
.wykres-dane > summary:hover {
  text-decoration: underline;
}

.zrodla-zwijane-tresc {
  padding-bottom: var(--odstep-5);
}

.zrodla-zwijane-tresc h3 {
  margin: var(--odstep-5) 0 0;
}

.grupa-przypisow {
  display: flex;
  align-items: center;
  gap: var(--odstep-2);
  margin: var(--odstep-4) 0 0;
  font-family: var(--font-tekst);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.grupa-przypisow .litera-klasy {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.72rem;
}

.lista-przypisow {
  display: grid;
  gap: 0;
  margin: var(--odstep-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  line-height: 1.45;
}

.przypis {
  display: grid;
  gap: 0.125rem;
  padding: var(--odstep-2) 0;
  border-bottom: 1px solid var(--kolor-linia);
  overflow-wrap: anywhere;
}

.przypis:last-child {
  border-bottom: 0;
}

.przypis > p {
  max-width: none;
  margin: 0;
}

.przypis-zrodla {
  color: var(--kolor-tekst-slaby);
}

/* Lista źródeł: numer to znacznik listy (nie tekst strony), nazwa z odnośnikiem, wydawca i data niżej. */
.lista-zrodel {
  display: grid;
  list-style: decimal;
  gap: var(--odstep-3);
  margin: var(--odstep-3) 0 0;
  padding-inline-start: 2.25rem;
  font-size: 0.88rem;
  line-height: 1.45;
}

.lista-zrodel > li {
  padding-inline-start: var(--odstep-1);
  overflow-wrap: anywhere;
}

.lista-zrodel > li::marker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--kolor-tekst-slaby);
}

.lista-zrodel > li:target {
  outline: 3px solid var(--kolor-akcent);
  outline-offset: 2px;
  background: var(--kolor-akcent-tlo);
}

.zrodlo-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--kolor-tekst-slaby);
}

.odnosniki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-2) var(--odstep-5);
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

/* =============================================================================================
 * 13. Porównanie kosztu na wspólnej osi (rasy podobne, rodzina, krzyżówki)
 * =========================================================================================== */

.porownanie {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
  border-top: 2px solid var(--kolor-linia-mocna);
}

.porownanie-wiersz {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--odstep-1) var(--odstep-4);
  max-width: none;
  padding-block: var(--odstep-3);
  border-bottom: 1px solid var(--kolor-linia);
}

.porownanie-wiersz .os-pasek {
  grid-column: 1 / -1;
}

.porownanie-nazwa {
  font-weight: 600;
  color: var(--kolor-tekst);
}

.porownanie-kwota .kwota {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Wiersz tej strony: tło wysunięte poza kolumny cieniem, żeby paski zostały w jednej linii z resztą. */
.porownanie-wiersz--biezacy {
  background: var(--kolor-akcent-tlo);
  box-shadow:
    calc(-1 * var(--odstep-2)) 0 0 var(--kolor-akcent-tlo),
    var(--odstep-2) 0 0 var(--kolor-akcent-tlo);
}

.porownanie-ta {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-akcent-tekst);
}

.porownanie-wiersz--skala {
  border-bottom: 0;
}

.porownanie-wiersz--skala .os-skala {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .porownanie-wiersz {
    grid-template-columns: 18rem 11rem 1fr;
  }

  .porownanie-wiersz .os-pasek {
    grid-column: auto;
  }

  .porownanie-wiersz--skala .os-skala {
    grid-column: 3;
  }
}

/* Lista odnośników z kwotą (warianty w odpowiedzi, rasy klasy) - zwarta, bez osi. */
.lista-poziomu {
  display: grid;
  gap: 0;
  margin: var(--odstep-2) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--kolor-linia);
}

.lista-poziomu-wiersz {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--odstep-1) var(--odstep-4);
  max-width: 56rem;
  padding-block: var(--odstep-2);
  border-bottom: 1px solid var(--kolor-linia);
}

.lista-poziomu-nazwa {
  font-weight: 600;
}

/* =============================================================================================
 * 14. Strona główna: nagłówek, koszt według wielkości, pas kart
 * =========================================================================================== */

.glowa {
  display: grid;
  gap: var(--odstep-6);
  /* Obie kolumny od góry: przy dłuższym wstępie (skład kwot) wyrównanie do dołu zostawiało nad wykresem
   * klas wielkości ok. 380 px pustego miejsca na ekranie 1280 px. */
  align-items: start;
  padding-block: var(--odstep-6) var(--odstep-7);
}

.glowa-tekst {
  display: grid;
  gap: var(--odstep-3);
}

.glowa-tekst > p {
  margin: 0;
}

.glowa h1 {
  font-size: clamp(3.4rem, 15vw, 9rem);
  font-weight: 900;
  line-height: 0.84;
}

.wielkosci {
  display: grid;
  gap: var(--odstep-2);
  margin: 0;
  padding-top: var(--odstep-3);
  border-top: 2px solid var(--kolor-linia-mocna);
}

.wielkosci-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wielkosci-wiersz {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--odstep-1) var(--odstep-3);
  max-width: none;
  padding-block: var(--odstep-3);
  border-bottom: 1px solid var(--kolor-linia);
}

.wielkosci-wiersz .os-pasek {
  grid-column: 1 / -1;
}

.wielkosci-nazwa {
  font-weight: 700;
  color: var(--kolor-tekst);
}

.wielkosci-kwota .kwota {
  font-family: var(--font-naglowki);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: normal;
}

.wielkosci-okres {
  font-size: 0.85rem;
  color: var(--kolor-tekst-slaby);
}

.wielkosci > .zalozenia,
.wielkosci > .adnotacja-przy-kwocie {
  margin: var(--odstep-2) 0 0;
}

@media (min-width: 1000px) {
  .glowa {
    grid-template-columns: 1.25fr 1fr;
    gap: var(--odstep-7);
  }
}

/* Pas ras (szary, od krawędzi do krawędzi): karty albo tabela katalogu. */
.pas-ras {
  padding-block: var(--odstep-7);
  background: var(--kolor-tlo-podniesione);
}

.pas-ras-wnetrze > p {
  max-width: 80ch;
}

.karty-ras {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--odstep-5);
  margin: var(--odstep-5) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .karty-ras {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .karty-ras {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1240px) {
  .karty-ras {
    grid-template-columns: repeat(4, 1fr);
  }
}

.karta-rasy {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  max-width: none;
  border: 1px solid var(--kolor-linia);
  background: var(--kolor-tlo);
}

.karta-rasy:hover {
  outline: 2px solid var(--kolor-tekst);
}

.karta-rasy:has(.karta-rasy-nazwa a:focus-visible) {
  outline: 3px solid var(--kolor-akcent);
  outline-offset: 2px;
}

.karta-rasy-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.karta-rasy-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.karta-rasy-foto .zdjecie-podpis {
  position: absolute;
  inset: auto auto 0 0;
  z-index: 2;
}

.karta-rasy-dane {
  display: grid;
  align-content: start;
  gap: var(--odstep-2);
  padding: var(--odstep-3) var(--odstep-4) var(--odstep-4);
}

.karta-rasy-dane > p {
  margin: 0;
}

.karta-rasy-etykiety {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-2);
}

.karta-rasy-etykiety span {
  padding: 0.1rem var(--odstep-2);
  border: 1px solid var(--kolor-tekst-slaby);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
}

.karta-rasy-nazwa {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
}

.karta-rasy-nazwa a {
  color: var(--kolor-tekst);
  text-decoration: none;
}

/* Cała karta klikalna (odnośnik nazwy rozciągnięty), podpis zdjęcia i znak przypisu nad nim. */
.karta-rasy-nazwa a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.karta-rasy-nazwa a:focus-visible {
  outline: none;
}

.karta-rasy .znak-przypisu,
.karta-rasy-rodzice a {
  position: relative;
  z-index: 2;
}

.karta-rasy-kwota .kwota {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
}

.karta-rasy-rodzice {
  font-size: 0.88rem;
  color: var(--kolor-tekst-slaby);
}

/* Na karcie tylko skrajne podziałki osi (zero i maksimum) - środek zagęszczałby małą kartę. */
.karta-rasy .os-skala span:not(:first-child, :last-child, .os-skala-odstep) {
  visibility: hidden;
}

.wiecej {
  margin-top: var(--odstep-5);
}

.przycisk-pelny {
  display: inline-flex;
  align-items: center;
  gap: var(--odstep-3);
  min-height: 3rem;
  padding: 0 var(--odstep-5);
  background: var(--kolor-tekst);
  color: var(--kolor-tlo);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.przycisk-pelny:hover {
  background: var(--kolor-akcent);
  color: var(--kolor-na-akcencie);
}

/* =============================================================================================
 * 15. Katalog: filtry bez skryptu (radio + :has) i tabela z osią
 * =========================================================================================== */

.filtry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-4) var(--odstep-6);
  margin-block: var(--odstep-4);
}

.filtr {
  display: grid;
  gap: var(--odstep-1);
  margin: 0;
  padding: 0;
  border: 0;
}

.filtr legend {
  padding: 0;
  margin-bottom: var(--odstep-1);
}

.filtr-opcje {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid var(--kolor-linia-mocna);
}

.filtr-opcje input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.filtr-opcje label {
  display: inline-flex;
  align-items: center;
  min-height: var(--wysokosc-celu);
  padding: 0 var(--odstep-4);
  background: var(--kolor-tlo);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.filtr-opcje label + input + label {
  border-left: 2px solid var(--kolor-linia-mocna);
}

.filtr-opcje input:checked + label {
  background: var(--kolor-tekst);
  color: var(--kolor-tlo);
}

.filtr-opcje input:focus-visible + label {
  outline: 3px solid var(--kolor-akcent);
  outline-offset: 2px;
}

.katalog:has(#filtr-wielkosc-maly:checked) tbody tr:not([data-klasa='maly']),
.katalog:has(#filtr-wielkosc-sredni:checked) tbody tr:not([data-klasa='sredni']),
.katalog:has(#filtr-wielkosc-duzy:checked) tbody tr:not([data-klasa='duzy']),
.katalog:has(#filtr-typ-rasa:checked) tbody tr:not([data-typ='rasa']),
.katalog:has(#filtr-typ-odmiana:checked) tbody tr:not([data-typ='odmiana']),
.katalog:has(#filtr-typ-krzyzowka:checked) tbody tr:not([data-typ='krzyzowka']),
.katalog:has(#filtr-rodowod-z_rodowodem:checked) tbody tr[data-rodowod='brak'],
.katalog:has(#filtr-rodowod-bez_rodowodu:checked) tbody tr:not([data-rodowod='brak']) {
  display: none;
}

/* Licznik pokazanych wierszy bez skryptu: wiersz ukryty filtrem (display: none) nie zwiększa licznika,
 * więc liczba po etykiecie to wynik wszystkich filtrów łącznie. Etykieta jest w HTML ze słownika. */
.katalog .pas-ras-wnetrze {
  counter-reset: wyniki-katalogu;
  /* Licznik stoi w DOM po tabeli (licznik CSS liczy wiersze przed sobą), a na ekranie - nad tabelą, przy
   * filtrach: kolumna flex z kolejnością. Licznik nie jest elementem fokusowalnym, więc kolejność
   * fokusu się nie zmienia. */
  display: flex;
  flex-direction: column;
  gap: var(--odstep-3);
}

.katalog .pas-ras-wnetrze > * {
  margin-block: 0;
}

.katalog .katalog-licznik {
  order: 1;
}

.katalog .katalog-licznik ~ *,
.katalog .tabela-przewijana {
  order: 2;
}

.katalog tbody tr {
  counter-increment: wyniki-katalogu;
}

.katalog-licznik {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.katalog-licznik::after {
  content: ' ' counter(wyniki-katalogu);
  font-variant-numeric: tabular-nums;
}

.katalog .tabela-przewijana {
  background: var(--kolor-tlo);
}

.tabela-ras th,
.tabela-ras td {
  padding-left: var(--odstep-2);
}

.kolumna-osi {
  min-width: 10rem;
  width: 22%;
  vertical-align: middle;
}

.kolumna-osi .os-skala {
  margin-top: var(--odstep-1);
  text-transform: none;
}

.kolumna-kwoty {
  white-space: nowrap;
}

/* =============================================================================================
 * 16. Nagłówek stron bez odpowiedzi (katalog, krzyżówki, źródła, metodologia, systemowe)
 * =========================================================================================== */

.naglowek-strony,
main.strona > h1:first-child {
  padding-top: var(--odstep-5);
}

.naglowek-strony {
  display: grid;
  gap: var(--odstep-3);
}

.naglowek-strony > p {
  margin: 0;
}

.naglowek-strony h1,
main.strona > h1 {
  margin-block: var(--odstep-2) var(--odstep-3);
  font-size: clamp(2.8rem, 10vw, 6rem);
  font-weight: 900;
  line-height: 0.88;
}

main.strona > h1 + p {
  font-size: 1.125rem;
}

main.strona > h2 {
  margin-top: var(--odstep-7);
}

main.strona > ul,
main.strona > ol {
  padding-left: 1.2em;
}

/* =============================================================================================
 * 17. Pielęgnacja, opcje, sloty, baner zgód
 * =========================================================================================== */

.opcje {
  margin-top: var(--odstep-6);
}

.slot-reklamy {
  width: 100%;
  margin: var(--odstep-6) auto;
  border: 1px solid var(--kolor-linia);
  background: var(--kolor-tlo-podniesione);
}

.slot-etykieta {
  margin: 0;
  padding: var(--odstep-1) var(--odstep-2);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
}

.slot-300x250 {
  max-width: 300px;
  min-height: 250px;
}

.slot-336x280 {
  max-width: 336px;
  min-height: 280px;
}

.slot-728x90 {
  max-width: 728px;
  min-height: 90px;
}

.slot-320x100 {
  max-width: 320px;
  min-height: 100px;
}

.baner-zgod {
  border-top: 2px solid var(--kolor-linia-mocna);
}

/* Telefon: niższy baner, żeby przy pierwszej wizycie nie zasłaniał linii „typowo" i założeń widełek
 * pod kwotą (strażnik N-16, runda 6). Trzy przyciski w jednym rzędzie o równej wadze, cele dotykowe
 * zostają pełnej wysokości (--wysokosc-celu). */
@media (max-width: 599px) {
  .baner-zgod-tresc {
    gap: var(--odstep-1);
    padding-block: var(--odstep-2);
  }

  .baner-zgod-tekst {
    font-size: var(--skala-xs);
    line-height: 1.35;
    max-width: none;
  }

  .baner-zgod-akcje {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: var(--odstep-1);
    width: 100%;
  }

  .baner-zgod-akcje .przycisk {
    padding-inline: var(--odstep-2);
    font-size: var(--skala-xs);
    white-space: nowrap;
  }
}

/* Przyciski banera zgód krojem tekstowym (wstępnie pobranym): krój mono dochodzi później i jego
 * podmiana zmieniałaby wysokość przyklejonego banera - przesunięcie układu (CLS). */
.przycisk {
  border-radius: 0;
}

/* =============================================================================================
 * 18. Druk i preferencje
 * =========================================================================================== */

@media print {
  .naglowek-serwisu,
  .stopka-serwisu,
  .hero {
    background: none;
    color: #000;
  }

  .hero-panel .kwota-glowna {
    color: #000;
  }

  .filtry,
  .przelacznik-motywu {
    display: none;
  }
}

/* =============================================================================================
 * Spis treści strony rasy i krótsza strona (strażnik treści runda 3, S-9)
 * =========================================================================================== */

.spis-tresci {
  margin-block: var(--odstep-4);
  padding-block: var(--odstep-2);
  border-block: 1px solid var(--kolor-linia-mocna);
}

.spis-tresci-naglowek {
  margin: 0 0 var(--odstep-1);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-tekst-slaby);
}

.spis-tresci ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-1) var(--odstep-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Telefon: spis treści w jednym przewijanym wierszu zamiast kilku linii (strażnik S-5, runda 5). Ucięta etykieta
 * przy krawędzi zanika (maska), a nie urywa się w pół słowa - widać, że wiersz przewija się dalej. Prawy zanik
 * stoi na marginesie końcowym, więc ostatnia etykieta po przewinięciu jest w pełni widoczna; lewy pojawia się
 * dopiero po przewinięciu (oś przewijania - przeglądarki bez niej mają tylko prawy zanik).
 */
@property --spis-zanik-lewy {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --spis-zanik-prawy {
  syntax: '<length>';
  inherits: false;
  initial-value: 2rem;
}

@keyframes spis-tresci-zanik {
  from {
    --spis-zanik-lewy: 0px;
    --spis-zanik-prawy: 2rem;
  }

  8%,
  92% {
    --spis-zanik-lewy: 2rem;
    --spis-zanik-prawy: 2rem;
  }

  to {
    --spis-zanik-lewy: 2rem;
    --spis-zanik-prawy: 0px;
  }
}

@media (max-width: 599px) {
  .spis-tresci ol {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--odstep-1);
    padding-inline-end: 2rem;
    scrollbar-width: thin;
    mask-image: linear-gradient(
      to right,
      transparent,
      #000 var(--spis-zanik-lewy),
      #000 calc(100% - var(--spis-zanik-prawy)),
      transparent
    );
  }

  @supports (animation-timeline: scroll()) {
    .spis-tresci ol {
      animation: spis-tresci-zanik linear both;
      animation-timeline: scroll(self inline);
    }
  }

  .spis-tresci li {
    flex: none;
  }
}

/* Cel dotykowy co najmniej 44 px (wymóg urządzeń, 07.10.2026; wcześniej 24 px - WCAG 2.5.8). */
.spis-tresci a {
  display: inline-flex;
  align-items: center;
  min-height: var(--wysokosc-celu);
}

.opis-rasy p {
  max-width: 70ch;
}

@media (min-width: 1000px) {
  /* Cztery sekcje opisu w dwóch kolumnach - ta sama treść, połowa wysokości. */
  .opis-rasy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--odstep-5);
  }

  .opis-rasy > h2,
  .opis-rasy > [data-pole='opis-zrodla'] {
    grid-column: 1 / -1;
  }

  .opis-rasy-sekcja h3 {
    margin-top: var(--odstep-3);
  }

  /* Zalecenia i ostrzeżenie BARF obok siebie - ta sama treść, krótsza sekcja karmy. */
  .zywienie {
    display: grid;
    grid-template-columns: 3fr 2fr;
    column-gap: var(--odstep-5);
    align-items: start;
  }

  .zywienie > :only-child {
    grid-column: 1 / -1;
  }

  .zywienie .nota-barf {
    margin-top: var(--odstep-4);
  }
}

.kwota-klasa {
  margin: var(--odstep-1) 0 0;
  font-size: 0.8rem;
  color: var(--kolor-panel-tekst-slaby);
}

/* Opis widełek sumy pod kwotą miesięczną (audyt R4-4): ta sama skala co adnotacja klasy. */
.kwota-widelki {
  margin: var(--odstep-1) 0 0;
  font-size: 0.8rem;
  color: var(--kolor-panel-tekst-slaby);
}

.kwota-widelki a {
  color: inherit;
}

/* =============================================================================================
 * 19. Kalkulator strony encji (projekt §4.6, krok 6): formularz w siatce, wynik jako lista kwot
 * =========================================================================================== */

.kalk-psa {
  margin-block: var(--odstep-7);
}

.kalk-psa-pola {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--odstep-4) var(--odstep-6);
  align-items: start;
  margin: var(--odstep-4) 0;
  padding: 0;
  border: 0;
}

/* Radiogrupa w siatce formularza: opcje w jednym pasku, bez rozciągania na wysokość wiersza siatki. */
.kalk-psa-grupa .filtr-opcje {
  align-items: start;
}

.kalk-psa-pole {
  display: grid;
  gap: var(--odstep-1);
  align-content: start;
}

.kalk-psa-pole label {
  font-weight: 600;
}

.kalk-psa-pole input[type='text'] {
  min-height: var(--wysokosc-celu);
  max-width: 12rem;
  padding: 0 var(--odstep-3);
  border: 2px solid var(--kolor-linia-mocna);
  background: var(--kolor-tlo);
  color: var(--kolor-tekst);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.kalk-psa-pole input:focus-visible {
  outline: 3px solid var(--kolor-akcent);
  outline-offset: 2px;
}

.kalk-psa-pole input[aria-invalid='true'] {
  border-color: var(--kolor-ostrzezenie);
}

.kalk-psa-opis {
  margin: 0;
  font-size: 0.85rem;
  color: var(--kolor-tekst-slaby);
}

.kalk-psa-blad {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kolor-tekst);
  border-left: 4px solid var(--kolor-ostrzezenie);
  padding-left: var(--odstep-2);
}

.kalk-psa-grupa-pol {
  display: grid;
  gap: var(--odstep-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.kalk-psa-grupa-pol legend {
  padding: 0;
  margin-bottom: var(--odstep-1);
}

.kalk-psa-wybor {
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: var(--wysokosc-celu);
}

.kalk-psa-wybor input {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--kolor-akcent);
}

.kalk-psa-pola:disabled {
  opacity: 0.6;
}

.kalk-psa-wynik {
  padding: var(--odstep-4) var(--odstep-5);
  border-top: 2px solid var(--kolor-linia-mocna);
  background: var(--kolor-tlo-podniesione);
}

.kalk-psa-wynik h3 {
  margin-top: 0;
}

.kalk-psa-lista {
  display: grid;
  gap: var(--odstep-3);
  margin: 0;
}

.kalk-psa-lista > div {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) 2fr;
  gap: var(--odstep-2) var(--odstep-4);
  padding-bottom: var(--odstep-2);
  border-bottom: 1px solid var(--kolor-linia);
}

.kalk-psa-lista dd {
  margin: 0;
}

.kalk-psa-lista .kwota {
  font-weight: 700;
}

.kalk-psa-typowo {
  display: block;
  font-size: 0.9rem;
  color: var(--kolor-tekst-slaby);
}

/* Szeroki ekran: formularz i wynik obok siebie, wynik przyklejony - zmiana pola widoczna bez przewijania. */
@media (min-width: 64rem) {
  .kalk-psa-uklad {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--odstep-6);
    align-items: start;
  }

  .kalk-psa-wynik {
    position: sticky;
    top: var(--odstep-4);
  }

  .kalk-psa-lista > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 40rem) {
  .kalk-psa-lista > div {
    grid-template-columns: 1fr;
  }

  .kalk-psa-wynik {
    padding-inline: var(--odstep-3);
  }
}

/* Atrybut `hidden` wygrywa z `display` klas komponentu (skrypt pokazuje i ukrywa pola zależne i braki). */
.kalk-psa [hidden] {
  display: none !important;
}

.kalk-psa-rasy ul {
  columns: 16rem;
  column-gap: var(--odstep-6);
  padding-left: var(--odstep-5);
}

.kalk-psa-rasy li {
  break-inside: avoid;
}

/* Odnośnik na całą wysokość celu dotykowego (44 px), znacznik listy zostaje. */
.kalk-psa-rasy li a {
  display: inline-block;
  padding-block: var(--odstep-3);
}

/* Wejścia ze strony głównej: kalkulator, porównanie, rankingi (krok 6). */
.wejscia-lista {
  display: grid;
  gap: var(--odstep-2);
  padding-left: var(--odstep-5);
}

.wejscia-lista a {
  display: inline-block;
  padding-block: var(--odstep-2);
  font-weight: 600;
}

/* Filtr pielęgnacji (krok 6, US-13): tokeny wszystkich wariantów encji w `data-pielegnacja`. */
.katalog:has(#filtr-pielegnacja-strzyzenie:checked) tbody tr:not([data-pielegnacja~='strzyzenie']),
.katalog:has(#filtr-pielegnacja-trymowanie:checked) tbody tr:not([data-pielegnacja~='trymowanie']),
.katalog:has(#filtr-pielegnacja-bez_strzyzenia:checked) tbody tr[data-pielegnacja~='strzyzenie'],
.katalog:has(#filtr-pielegnacja-bez_strzyzenia:checked) tbody tr[data-pielegnacja~='trymowanie'] {
  display: none;
}

/* Ze skryptem licznik pisze „X z Y" słowami (region aria-live) - licznik CSS milknie. */
.katalog-licznik--skrypt::after {
  content: none;
}

.katalog-sortowanie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--odstep-2) var(--odstep-3);
}

.katalog-sortowanie select {
  /* Najdłuższa etykieta sortowania jest szersza niż ekran 375 px - pole nie wychodzi poza kolumnę (WCAG 1.4.10). */
  max-width: 100%;
  min-height: var(--wysokosc-celu);
  padding: 0 var(--odstep-3);
  border: 2px solid var(--kolor-linia-mocna);
  background: var(--kolor-tlo);
  color: var(--kolor-tekst);
  font: inherit;
}

.katalog-sortowanie select:focus-visible {
  outline: 3px solid var(--kolor-akcent);
  outline-offset: 2px;
}

.katalog-brak[hidden],
.katalog-sortowanie[hidden] {
  display: none;
}

/* Porównanie ras (krok 6, US-14): kolumna wyboru tylko ze skryptem, pole wyboru z celem dotykowym. */
.tabela-porownania.bez-skryptu .kolumna-wyboru {
  display: none;
}

.kolumna-wyboru input {
  width: 1.5rem;
  height: 1.5rem;
  margin: var(--odstep-2);
  accent-color: var(--kolor-akcent);
}

.porownanie-ras {
  margin-block: var(--odstep-6);
}

.porownanie-ras[hidden] {
  display: none;
}

.tabela-porownania-wybranych th[scope='row'] {
  position: sticky;
  left: 0;
  background: var(--kolor-tlo);
}

/* Ranking (krok 6, US-10): lista numerowana, nazwa i miara w jednym wierszu, na telefonie pod sobą. */
.ranking-lista {
  padding-left: 0;
  list-style: none;
}

.ranking-miejsce {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--kolor-tekst-slaby);
}

.ranking-widelki {
  font-size: 0.9rem;
  color: var(--kolor-tekst-slaby);
}

.ranking-wiersz {
  display: grid;
  grid-template-columns: 3rem minmax(12rem, 2fr) minmax(6rem, 1fr) 3fr;
  gap: var(--odstep-1) var(--odstep-4);
  align-items: baseline;
  padding-block: var(--odstep-2);
  border-bottom: 1px solid var(--kolor-linia);
}

.ranking-nazwa {
  display: inline-block;
  padding-block: var(--odstep-2);
  font-weight: 600;
}

.ranking-klasa {
  color: var(--kolor-tekst-slaby);
}

@media (max-width: 40rem) {
  .ranking-wiersz {
    grid-template-columns: 2.5rem 1fr;
  }

  .ranking-klasa,
  .ranking-miara {
    grid-column: 2;
  }
}

/* =============================================================================================
 * Wyszukiwarka fraz (krok 7, projekt §3.6): pole w pasku serwisu, lista podpowiedzi, `/szukaj/`, `/spis/`
 * =========================================================================================== */

/* Atrybut `hidden` wygrywa z `display` klas komponentu (skrypt odsłania formularz i listę). */
.szukaj-psa [hidden] {
  display: none !important;
}

.szukaj-psa {
  position: relative;
}

/* Bez JS: link do spisu tematów w miejscu pola (US-12), w stylu odnośników paska. */
.szukaj-psa-spis {
  display: inline-flex;
  align-items: center;
  min-height: var(--wysokosc-celu);
  padding-inline: var(--odstep-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kolor-panel-tekst);
}

.szukaj-psa-wiersz {
  display: flex;
  gap: var(--odstep-2);
  align-items: stretch;
}

.szukaj-psa-pole {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.szukaj-psa input[type='search'] {
  width: 100%;
  min-height: var(--wysokosc-celu);
  padding-inline: var(--odstep-3);
  border: 1px solid var(--kolor-linia-mocna);
  border-radius: var(--promien);
  background: var(--kolor-tlo);
  color: var(--kolor-tekst);
  font: inherit;
  font-size: 1rem;
}

.szukaj-psa input[type='search']::placeholder {
  color: var(--kolor-tekst-slaby);
  opacity: 1;
}

.szukaj-psa-etykieta {
  display: block;
  margin-bottom: var(--odstep-2);
  font-weight: 600;
}

/* Lista podpowiedzi i komunikat nad treścią strony - pasek serwisu nie zmienia wysokości przy pisaniu. */
.szukaj-psa-lista,
.szukaj-psa--naglowek .szukaj-psa-komunikat {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--odstep-1));
  left: 0;
  width: min(32rem, calc(100vw - 2 * var(--margines-strony)));
  max-height: min(28rem, 70vh);
  overflow-y: auto;
  margin: 0;
  padding: var(--odstep-1) 0;
  list-style: none;
  border: 1px solid var(--kolor-linia-mocna);
  border-radius: var(--promien);
  background: var(--kolor-tlo);
  color: var(--kolor-tekst);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.25);
}

.szukaj-psa--naglowek .szukaj-psa-komunikat {
  top: calc(100% + var(--odstep-1));
  padding: var(--odstep-3) var(--odstep-4);
}

.szukaj-opcja {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--wysokosc-celu);
  padding: var(--odstep-2) var(--odstep-4);
  border-left: 4px solid transparent;
  cursor: pointer;
}

/* Wybrana podpowiedź: tło i pasek z lewej - wybór widać nie tylko kolorem (WCAG 1.4.1). */
.szukaj-opcja[aria-selected='true'],
.szukaj-opcja:hover {
  border-left-color: var(--kolor-akcent);
  background: var(--kolor-akcent-tlo);
}

.szukaj-tytul {
  font-weight: 600;
}

/* Trafione słowa: pogrubienie i podkreślenie, nie sam kolor tła. */
.szukaj-psa mark {
  background: transparent;
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.szukaj-strona {
  font-size: 0.85rem;
  color: var(--kolor-tekst-slaby);
}

.szukaj-psa-komunikat p {
  margin: 0 0 var(--odstep-2);
}

.szukaj-psa-komunikat p:last-child {
  margin-bottom: 0;
}

.szukaj-brak-tytul {
  font-weight: 700;
}

.szukaj-psa-komunikat a {
  display: inline-block;
  padding-block: var(--odstep-1);
}

/* Pole w pasku serwisu: obok nawigacji na szerokim ekranie, cały wiersz na telefonie. Krój i stopień
 * tekstu, nie mono paska - podpowiedzi czyta się jak zdania. */
.nawigacja > .szukaj-psa--naglowek {
  flex: 1 1 14rem;
  max-width: 22rem;
  margin-left: var(--odstep-3);
  font-family: var(--font-tekst);
  font-size: 1rem;
}

.szukaj-psa--naglowek .szukaj-psa-przycisk {
  border-color: var(--kolor-panel-akcent);
  background: var(--kolor-panel-akcent);
  color: var(--kolor-panel);
}

@media (max-width: 599px) {
  .nawigacja > .szukaj-psa--naglowek {
    order: 10;
    flex-basis: 100%;
    max-width: none;
    margin: var(--odstep-1) 0 0;
  }
}

/* Strona `/szukaj/`: duże pole, komunikat w treści, pełna lista wyników. */
.szukaj-strony {
  max-width: 44rem;
  margin-top: var(--odstep-6);
}

.szukaj-psa--strona .szukaj-psa-komunikat {
  margin-top: var(--odstep-4);
  padding: var(--odstep-3) var(--odstep-4);
  border-left: 4px solid var(--kolor-akcent);
  background: var(--kolor-tlo-podniesione);
}

.szukaj-psa-wyniki {
  margin: var(--odstep-5) 0 0;
  padding-left: var(--odstep-5);
}

.szukaj-psa-wyniki li + li {
  margin-top: var(--odstep-2);
}

.szukaj-psa-wyniki a {
  display: inline-flex;
  flex-direction: column;
  min-height: var(--wysokosc-celu);
  justify-content: center;
}

/* Sekcja docelowa wyniku (`url#id`) i podświetlony fragment tekstu (`:~:text=`). */
main [data-sekcja][id]:target {
  outline: 3px solid var(--kolor-akcent);
  outline-offset: var(--odstep-2);
}

::target-text {
  background: var(--kolor-akcent-tlo);
  color: var(--kolor-tekst);
}

/* Spis tematów A-Z. */
.spis-litery ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-1);
  margin: var(--odstep-5) 0 0;
  padding: 0;
  list-style: none;
}

.spis-litery a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wysokosc-celu);
  min-height: var(--wysokosc-celu);
  border: 1px solid var(--kolor-linia-mocna);
  border-radius: var(--promien);
  font-family: var(--font-mono);
  font-weight: 600;
  text-decoration: none;
}

.spis-grupa {
  margin-top: var(--odstep-6);
}

.spis-grupa ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.spis-grupa li {
  padding-block: var(--odstep-2);
  border-bottom: 1px solid var(--kolor-linia);
}

.spis-grupa li > a:first-child {
  font-weight: 600;
}

.spis-sekcje {
  color: var(--kolor-tekst-slaby);
}

.spis-sekcje a {
  display: inline-block;
  padding-block: var(--odstep-1);
}

@media (forced-colors: active) {
  .szukaj-opcja[aria-selected='true'] {
    outline: 2px solid Highlight;
  }
}

/*
 * Kalkulator: wynik dla ostatniej poprawnej wartości oznaczony przerywaną ramką (nota obok mówi to słowami).
 * Bez przygaszania: przezroczystość obniżała kontrast kwot poniżej 4,5:1 (WCAG 1.4.3, axe color-contrast).
 */
[data-wynik-nieaktualny] .kalk-psa-lista {
  outline: 2px dashed var(--kolor-linia-mocna);
  outline-offset: var(--odstep-1);
}

/* Lista podpowiedzi pola w pasku serwisu dosunięta do prawej krawędzi pola - pole stoi przy prawej krawędzi
   strony, więc lista od lewej krawędzi pola wychodziła poza ekran przy 768-1440 px (strażnik S-4). */
@media (min-width: 40rem) {
  .szukaj-psa--naglowek .szukaj-psa-lista,
  .szukaj-psa--naglowek .szukaj-psa-komunikat {
    left: auto;
    right: 0;
  }
}

/* Baner zgód przy 320 px: przyciski zawijają się zamiast trzech kolumn szerszych niż ekran (QA Q7-5). */
@media (max-width: 22.5rem) {
  .baner-zgod-akcje {
    display: flex;
    flex-wrap: wrap;
  }
}

/* Wykres i rozwinięta tabela danych mieszczą się w kolumnie przy 360 px: elementy siatki i flex nie rosną
   do szerokości treści, długie słowa tytułów łamią się (QA Q7-6, WCAG 1.4.10). */
.wykres,
.wykres-dane,
.wykres-naglowek-tekst {
  min-width: 0;
  max-width: 100%;
}

.wykres-tytul,
h1 {
  overflow-wrap: break-word;
}

/* Poradniki (aneks 3 A3.3): tabele i listy w treści, wartości odwołań nie łamią się w środku kwoty. */
.tabela-poradnika td,
.tabela-poradnika th {
  vertical-align: top;
}

.zastrzezenie-poradnika {
  margin-block: var(--odstep-6);
  max-width: var(--miara-tekstu);
  font-size: var(--skala-s);
  color: var(--kolor-tekst-slaby);
}

/* =============================================================================================
 * Urządzenia: smartfony, tablety, składane (wymóg właściciela 07.10.2026). Bramka: przegląd siatki
 * szerokości 280-1440 px z poziomem telefonu i składanego (serwisy/zwierzeta/urzadzenia).
 * - cele dotykowe ≥ 44 px: marka serwisu, odnośniki okruszków i nazwy klas wielkości;
 * - tekst ≥ 16 px: notki i podpisy czytane jak akapit (założenia, widełki, wstęp przypisów, opisy pól);
 * - długie słowa (nazwy plików, adresy) zawijają się zamiast poszerzać stronę na 280 px.
 * =========================================================================================== */

main {
  overflow-wrap: break-word;
}

.marka,
.okruszki a,
.wielkosci-nazwa {
  display: inline-flex;
  align-items: center;
  min-height: var(--wysokosc-celu);
}

.zalozenia,
.kwota-widelki,
.kwota-klasa,
.kwota-etykieta,
p.etykieta,
.przypisy-wstep,
.kalk-psa-opis,
.zdjecie-podpis,
.konwencja-sterowanie,
.baner-testowy,
.okruszki {
  font-size: 1rem;
}

/* Baner zgód na wąskim ekranie stoi na końcu strony, nie przyklejony - na telefonie zasłaniałby treść. */
@media (max-width: 599px) {
  .baner-zgod {
    position: static;
  }
}

/*
 * Tekst czytany ≥ 16 px (wymóg urządzeń): akapity i punkty list treści - także te, którym komponent nadaje
 * mniejszy stopień jedną klasą (uzasadnienie pozycji, adnotacja przy kwocie, notki). Wykresy, tabele i podziałki
 * osi mają własne stopnie (gęste dane, etykiety skali) - poza regułą. Akapity z WIĘKSZYM stopniem (kwota główna,
 * wprowadzenie) też poza regułą: `max(1rem, 1em)` liczy em od rodzica, więc zmniejszałoby je do 16-17 px.
 */
main :is(p, li)[class]:not(figure *, table *, .os-skala, .kwota-glowna, .wprowadzenie),
main :is(p, li):not(figure *, table *, .os-skala, .kwota-glowna, .wprowadzenie) {
  font-size: max(1rem, 1em);
}

/* Nagłówki strony na 280 px (zewnętrzny ekran składanego): najdłuższe słowo nazwy mieści się w szerokości. */
@media (max-width: 359px) {
  .naglowek-encji-nazwa {
    font-size: clamp(2.3rem, 15vw, 7.2rem);
  }

  .naglowek-encji--srednia .naglowek-encji-nazwa {
    font-size: clamp(1.9rem, 11.5vw, 6rem);
  }

  .naglowek-encji--dluga .naglowek-encji-nazwa {
    font-size: clamp(1.5rem, 8.6vw, 4.8rem);
  }

  .glowa h1 {
    font-size: clamp(2.4rem, 15vw, 9rem);
  }
}

.tagi li {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Cele dotykowe nawigacji: krótkie odnośniki („Rasy”, „Psy”) mają co najmniej 44 px szerokości. */
.nawigacja > a,
.okruszki a,
.stopka-nawigacja a {
  min-width: var(--wysokosc-celu);
  justify-content: center;
}

/*
 * Siatki jednokolumnowe: kolumna `auto` rośnie do najszerszego nierozdzielnego elementu (kwota, nazwa pliku)
 * i poszerza stronę na 280 px - kolumna minmax(0, 1fr) zostaje w szerokości ekranu. Siatki z własnymi
 * kolumnami na szerokim ekranie (glowa od 1000 px) - tylko poniżej progu.
 */
.hero-panel,
.glowa-tekst,
.wykres,
.naglowek-strony,
.lista-konwencji {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 999px) {
  .glowa {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wykres-siatka {
  grid-template-columns: minmax(0, 1fr);
}

.wielkosci-nazwa {
  min-width: var(--wysokosc-celu);
}