/* =============================================================================
   Przegląd dostępności — jedyny arkusz aplikacji `ranking`.

   Zastąpił ranking-components.css i ranking-landing.css oraz bloki page_style
   rozsypane po szablonach. Kolejność sekcji jest znacząca: powierzchnie (04)
   muszą stać po szkielecie (03), a warianty na ciemnym po prymitywach (06).

   01 Reset
   02 Tokeny lokalne
   03 Szkielet: powłoka, nawigacja, stopka
   04 Powierzchnie sekcji i pełne tło
   05 Typografia sekcji
   06 Prymitywy
   07 Warianty na ciemnym tle
   08 Fokus
   09 Dane i wykresy
   10 Komponenty stron
   11 Breakpointy
   12 Ruch, wysoki kontrast, druk
   ========================================================================== */


/* == 01 Reset ============================================================== */

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


/* == 02 Tokeny lokalne ===================================================== */

:root {
  /* Tekst komponentów jedzie tymi tokenami, nie kolorami wprost. Powierzchnia
     ciemna przełącza je u siebie, więc komponent nie musi mieć bliźniaczej
     reguły pod `.rk-section--dark`, która i tak przegrywała specyficznością
     z własną regułą komponentu (`.rk-plot__data > summary`). */
  --rk-text: var(--ink-900);
  --rk-text-soft: var(--ink-700);
  --rk-text-muted: var(--ink-500);
  --rk-link: var(--rk-text);
  --rk-line: var(--ink-200);
  /* Kreska rozdzielająca wiersze danych. Mocniejsza od `--rk-line`, bo tam nie
     obrysowuje płyty, tylko dzieli treść i musi być widoczna sama z siebie. */
  --rk-rule: var(--ink-300);
  /* Tło komponentu, który maluje własną powierzchnię (płyta wykresu, kafel,
     karta ustalenia). Ciemne pasmo przełącza go u siebie, więc komponent nie
     może wylądować z białym tłem pod jasnym tekstem. */
  --rk-panel: var(--card);

  --rk-gutter: 40px;
  --rk-gutter-sm: 22px;
  --rk-section-y: var(--space-9);
  --rk-section-y-sm: var(--space-8);
  --rk-measure: 68ch;
  --rk-measure-lead: 62ch;

  --rk-focus-ring: var(--ink-900);
  --rk-focus-halo: var(--paper);

  /* Rampa porządkowa na jasnym tle. Zwalidowana względem bieli (--card):
     jasny kraniec daje 3,45:1 na #ffffff, ale tylko 2,82:1 na --paper-2,
     dlatego płyta wykresu na jasnej sekcji jest zawsze biała. */
  --rk-data-1: var(--ink-400);
  --rk-data-2: var(--ink-500);
  --rk-data-3: var(--ink-600);
  --rk-data-4: var(--ink-700);
  --rk-data-5: var(--ink-900);
  --rk-data-track: var(--paper-2);
  --rk-data-gap: var(--card);
}


/* == 03 Szkielet =========================================================== */

body { margin: 0; background: var(--card); overflow-x: clip; }

@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

.ranking-shell {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--paper);
  font-family: var(--font-sans);
  color: var(--ink-900);
}

/* Treści bez klasy linku nie mogą dziedziczyć domyślnego niebieskiego koloru
   przeglądarki. CTA i linki kart mają własne, świadome warianty. Lista
   wykluczeń musi znać KAŻDĄ własną odmianę przycisku — `.method-cta__*` i
   `.eaa-cta__*` dostały kiedyś własne kolory (tło i tekst `--ink-900`), ale
   nie były na tej liście, więc ta reguła i tak nadpisywała im kolor tekstu
   na `--ink-900` = czarny tekst na czarnym tle. */
.ranking-shell main a:not(.rk-btn):not(.card-btn):not(.card-print__link):not(.method-cta__primary):not(.method-cta__secondary):not(.eaa-cta__primary):not(.eaa-cta__secondary) {
  color: var(--ink-900);
  text-decoration-color: currentColor;
  text-underline-offset: 0.16em;
}
.ranking-shell main .rk-section--dark a:not(.rk-btn):not(.card-btn):not(.card-print__link):not(.method-cta__primary):not(.method-cta__secondary):not(.eaa-cta__primary):not(.eaa-cta__secondary),
.ranking-shell main .rk-card--dark a:not(.rk-btn):not(.card-btn):not(.card-print__link):not(.method-cta__primary):not(.method-cta__secondary):not(.eaa-cta__primary):not(.eaa-cta__secondary) {
  color: var(--paper);
}

.eac-skip {
  position: absolute;
  left: var(--space-2);
  top: -60px;
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--ink-900);
  color: var(--paper);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: top var(--dur) var(--ease-out);
}
.eac-skip:focus { top: 0; }

.ranking-shell-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--rk-gutter);
  background: var(--card);
  isolation: isolate;
}
.ranking-shell-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--card);
  border-bottom: 1px solid var(--ink-300);
}
.ranking-shell-nav__brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ranking-shell-nav__brand-name {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-subtitle);
  color: var(--ink-900);
  text-decoration: none;
  white-space: nowrap;
}
.ranking-shell-nav__brand-context {
  padding-left: 18px;
  border-left: 1px solid var(--ink-300);
  font-size: var(--fs-caption);
  color: var(--ink-500);
  white-space: nowrap;
}
.ranking-shell-nav__brand-context--short { display: none; }
.ranking-shell-nav__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
.ranking-nav-link {
  font-size: 13px;
  color: var(--ink-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.ranking-nav-link:hover { color: var(--ink-900); border-color: var(--ink-300); }
.ranking-nav-link[aria-current="page"] {
  color: var(--ink-900);
  font-weight: var(--fw-semibold);
  border-color: var(--ink-900);
}
.ranking-nav-link--eac { color: var(--ink-700); font-weight: var(--fw-bold); white-space: nowrap; }
.ranking-nav-separator { color: var(--ink-500); font-size: 13px; user-select: none; }

.ranking-shell-footer {
  --rk-footer-muted: var(--text-on-dark-muted);
  --rk-footer-line: rgb(255 255 255 / .24);
  padding: var(--space-8) var(--rk-gutter) var(--space-7);
}
.ranking-shell-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(150px, .6fr) minmax(260px, 1fr);
  gap: var(--space-7);
  align-items: start;
}
.ranking-shell-footer__brand {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: 19px;
}
.ranking-shell-footer__copy {
  margin: var(--space-3) 0 0;
  max-width: 500px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--rk-footer-muted);
}
.ranking-shell-footer__heading {
  margin: 0 0 13px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rk-footer-muted);
}
.ranking-shell-footer__links { display: grid; gap: 9px; }
.ranking-shell-footer__links a,
.ranking-shell-footer__meta a,
.ranking-shell-footer__copy a {
  width: fit-content;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rk-footer-line);
}
.ranking-shell-footer__meta { display: grid; gap: var(--space-3); justify-items: start; }
.ranking-shell-footer__meta p {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--rk-footer-muted);
}
/* Serwis usługowy wymusza globalnie `footer a:hover { color: var(--paper) }`.
   Na jasnej stopce przeglądu i w stopce karty dawało to biały tekst na jasnym
   tle (1,00:1). Odnośnik trzyma kolor kontekstu, a najechanie zmienia wyłącznie
   podkreślenie. */
.ranking-shell-footer a:hover,
.ranking-shell-footer a:focus-visible,
.card-foot a:hover,
.card-foot a:focus-visible { color: inherit !important; border-bottom-color: currentColor; }


/* == 04 Powierzchnie sekcji i pełne tło ==================================== */

/* Pełne tło sekcji przy zachowaniu czytelnej szerokości treści. Powłoka nadal
   ogranicza layout do 1280 px, a tło wychodzi do krawędzi viewportu.

   `.rk-bleed` NIE zna kolorów: maluje w obie strony jednym tokenem, który
   ustawia klasa powierzchni. Domyślka jest równa tłu powłoki, więc pominięta
   powierzchnia daje widoczny szew, a nie tekst w kolorze tła. */
.rk-bleed {
  position: relative;
  background: var(--rk-bleed-bg, var(--paper));
  box-shadow: 0 0 0 100vmax var(--rk-bleed-bg, var(--paper));
  clip-path: inset(0 -100vmax);
}

/* PRZEJŚCIOWE: stary mechanizm, dopóki wszystkie szablony nie przejdą na
   `.rk-bleed`. Do usunięcia w etapie sprzątania. */
.ranking-full-bleed {
  --full-bleed-bg: var(--ink-900);
  position: relative;
  box-shadow: 0 0 0 100vmax var(--full-bleed-bg);
  clip-path: inset(0 -100vmax);
}

/* Każda powierzchnia deklaruje tło I kolor tekstu w tym samym bloku.
   To jedyny sposób nadania sekcji ciemnego tła. */
.rk-section--light  { --rk-bleed-bg: var(--paper);   background: var(--paper);   color: var(--ink-900); }
.rk-section--card   { --rk-bleed-bg: var(--card);    background: var(--card);    color: var(--ink-900); }
/* Tor wykresu jest domyślnie `--paper-2`, czyli dokładnie tłem tej sekcji:
   pasek bez płyty tracił wtedy skalę i nie było widać, do ilu odmierza. */
.rk-section--sunken { --rk-bleed-bg: var(--paper-2); --rk-data-track: var(--paper); background: var(--paper-2); color: var(--ink-900); }
.rk-section--dark   { --rk-bleed-bg: var(--ink-900); background: var(--ink-900); color: var(--paper); }

/* Ciemna powierzchnia przełącza tokeny tekstu u siebie: wszystko, co jest
   pod nią, dostaje właściwe kolory bez wojny o specyficzność. */
.rk-section--dark, .rk-card--dark {
  --rk-text: var(--paper);
  --rk-text-soft: rgb(244 242 237 / .82);
  --rk-text-muted: var(--text-on-dark-muted);
  --rk-line: var(--border-on-dark);
  --rk-rule: var(--border-on-dark);
  --rk-panel: var(--ink-800);
  /* Rampa porządkowa na ciemnym. Zaczyna się od `--ink-400` (5,74:1 na
     `--ink-900`), nie od `--ink-600` (2,17:1): dwa najniższe stopnie były
     ciemniejsze od progu 3:1 dla obiektów graficznych i przy histogramie na
     ciemnym pasie najniższe kubełki po prostu znikały. */
  --rk-data-1: var(--ink-400);
  --rk-data-2: var(--text-on-dark-muted);
  --rk-data-3: var(--ink-300);
  --rk-data-4: var(--ink-200);
  --rk-data-5: var(--paper);
  --rk-data-track: rgb(255 255 255 / .14);
  --rk-data-gap: var(--ink-900);
}

.rk-section { padding: var(--rk-section-y) var(--rk-gutter); }
.rk-section--tight { padding-block: var(--space-7); }
/* Pasmo sekcji karty. Licznik jedzie tutaj, bo dokładnie te elementy niosą
   numer w szynie — sekcja nagłówkowa i stopka numeru nie dostają. */
.card-flow-section {
  counter-increment: card-section;
  padding-block: clamp(48px, 7vw, 96px);
  border-top: 1px solid var(--ink-300);
}
.card-flow-section--annex { padding-block: clamp(40px, 6vw, 72px); }

/* Stopka jasna, gdy ostatnia sekcja strony jest ciemna. Rytm należy do strony,
   nie do bazy: szablon deklaruje klasę przez {% block body_class %}. */
body.rk-footer-light .ranking-shell-footer {
  --rk-bleed-bg: var(--paper);
  --rk-footer-muted: var(--ink-700);
  --rk-footer-line: var(--ink-300);
  --rk-focus-ring: var(--ink-900);
  --rk-focus-halo: var(--paper);
  background: var(--paper);
  color: var(--ink-900);
  border-top: 1px solid var(--ink-200);
}


/* == 05 Typografia sekcji ================================================== */

.rk-kicker {
  margin: 0 0 var(--space-3);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.rk-h1 {
  margin: 0;
  overflow-wrap: break-word;
  max-width: 20ch;
  font-size: clamp(38px, 5vw, var(--fs-display-lg));
  line-height: var(--lh-display-lg);
  letter-spacing: var(--ls-display-lg);
  font-weight: var(--fw-medium);
}
.rk-h2 {
  margin: 0;
  overflow-wrap: break-word;
  max-width: 24ch;
  font-size: clamp(28px, 3.4vw, var(--fs-display-md));
  line-height: var(--lh-display-md);
  letter-spacing: var(--ls-display-md);
  font-weight: var(--fw-medium);
}
.rk-h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-semibold);
}
.rk-lead {
  margin: var(--space-4) 0 0;
  max-width: var(--rk-measure-lead);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-700);
}
.rk-prose { max-width: var(--rk-measure); }
.rk-prose p, .rk-prose li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-700);
}
.rk-prose p { margin: 0 0 var(--space-4); }
.rk-prose p:last-child { margin-bottom: 0; }
.rk-note {
  margin: var(--space-6) 0 0;
  max-width: var(--rk-measure);
  padding-left: var(--space-4);
  border-left: 3px solid var(--ink-300);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ink-500);
}
.rk-head { margin: 0 0 var(--space-6); }
.rk-note--wide { max-width: none; }

/* Wartości uzupełniające pod rzędem kafli: mniejsze, w jednym rzędzie. */
.rk-medians {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-7) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--rk-line);
  list-style: none;
}
.rk-medians strong {
  display: block;
  font-size: var(--fs-title);
  line-height: 1.1;
  font-weight: var(--fw-medium);
  font-variant-numeric: proportional-nums;
}
.rk-medians span { display: block; margin-top: var(--space-2); font-size: 13px; line-height: 1.5; color: var(--rk-text-muted); }
.rk-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--space-7);
  align-items: end;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Druk karty EKRANOWEJ (Ctrl+P na `/karta/…/`). Pełny układ A4 mieszka pod
   `/karta/…/druk/` i jedzie `doc.css`; tutaj chodzi tylko o to, żeby przypadkowy
   wydruk strony był czytelny i niczego nie ukrył.

   `break-inside: avoid` dostają WYŁĄCZNIE jednostki mniejsze od kartki. Nałożone
   na kontenery (całą sekcję, całe ustalenie) kazało przeglądarce przerzucać na
   następną stronę blok, który i tak się nie mieści — i zostawiać po sobie pustą
   kartkę. */
@media print {
  .card-nav,
  .ranking-shell-nav,
  .ranking-shell-footer,
  .card-print,
  .card-zoom,
  .eac-skip { display: none !important; }
  .ranking-shell,
  .rk-section,
  .rk-section--dark,
  .rk-section--light,
  .rk-section--card,
  .rk-section--sunken { color: #000 !important; background: #fff !important; }
  details:not([open]) > *:not(summary) { display: block !important; }
  details summary { list-style: none; }
  details summary::after { display: none !important; }
  a { color: #000 !important; text-decoration: underline; }
  h2, h3 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  tr, figure, .card-meta > div, .card-issue-metrics > div, .card-legal li,
  .card-organizer__panel { break-inside: avoid; }
  .card-col--split { display: block; }
  .card-rail { display: none; }
  .card-archive,
  .card-limit-box,
  .card-organizer__panel,
  .card-meta,
  .card-meta > div,
  .card-favorable,
  .card-scope-grid > div,
  .card-evidence-finding__proof,
  .card-tech { color: #000 !important; background: #fff !important; box-shadow: none !important; }
  .card-evidence-figure img, .card-shot img, .card-alt-semantic__shot { max-height: 110mm; object-fit: contain; }
}


/* == 06 Prymitywy ========================================================== */

.rk-link {
  color: var(--ink-900);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-300);
}
.rk-link:hover { border-color: var(--ink-900); }

.rk-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--ink-900);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.rk-btn--primary { background: var(--ink-900); color: var(--paper); }
.rk-btn--ghost { background: transparent; color: var(--ink-900); }
.rk-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }

.rk-card {
  padding: var(--space-6);
  background: var(--rk-panel);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
}
.rk-card--dark {
  background: var(--ink-900);
  color: var(--paper);
  border-color: var(--ink-900);
}
.rk-grid { display: grid; gap: var(--space-5); }
.rk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.rk-list--divided { margin: 0; padding: 0; list-style: none; }
.rk-list--divided > li {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--ink-200);
}
.rk-list--divided > li:first-child { border-top: 0; }

.rk-accent {
  display: block;
  width: 82px;
  height: 2px;
  margin: var(--space-5) 0 var(--space-4);
  background: var(--rank-gold);
}


/* == 07 Warianty na ciemnym tle ============================================
   Zasada przeniesiona z .home-card--dark w serwisie usługowym: dla KAŻDEGO
   elementu tekstowego istnieje jawny wariant, a kolor siedzi na tym samym
   elemencie co tło. Brak tej pary dał kontrast 1,08:1 na krokach „Jak badamy”.
   ========================================================================== */

.rk-section--dark .rk-kicker,        .rk-card--dark .rk-kicker,
.rk-section--dark .rk-note,          .rk-card--dark .rk-note,
.rk-section--dark .rk-stat__label,   .rk-card--dark .rk-stat__label,
.rk-section--dark .rk-plot__sub,     .rk-card--dark .rk-plot__sub,
.rk-section--dark .rk-bars__name,    .rk-card--dark .rk-bars__name,
.rk-section--dark .rk-meter__label,  .rk-card--dark .rk-meter__label,
.rk-section--dark .rk-buckets__axis, .rk-card--dark .rk-buckets__axis {
  color: var(--text-on-dark-muted);
}

.rk-section--dark h1, .rk-section--dark h2, .rk-section--dark h3,
.rk-section--dark .rk-h1, .rk-section--dark .rk-h2, .rk-section--dark .rk-h3,
.rk-section--dark strong, .rk-section--dark summary,
.rk-section--dark .rk-stat__value, .rk-section--dark .rk-plot__title,
.rk-section--dark .rk-meter__value, .rk-section--dark .rk-bars__value,
.rk-card--dark h1, .rk-card--dark h2, .rk-card--dark h3,
.rk-card--dark .rk-h1, .rk-card--dark .rk-h2, .rk-card--dark .rk-h3,
.rk-card--dark strong, .rk-card--dark summary,
.rk-card--dark .rk-stat__value, .rk-card--dark .rk-plot__title,
.rk-card--dark .rk-meter__value, .rk-card--dark .rk-bars__value {
  color: var(--paper);
}

.rk-section--dark .rk-lead, .rk-section--dark .rk-prose p, .rk-section--dark .rk-prose li,
.rk-card--dark .rk-lead, .rk-card--dark .rk-prose p, .rk-card--dark .rk-prose li {
  color: rgb(244 242 237 / .82);
}

.rk-section--dark .rk-link, .rk-card--dark .rk-link {
  color: var(--paper);
  border-bottom-color: var(--border-on-dark);
}
.rk-section--dark .rk-link:hover, .rk-card--dark .rk-link:hover { border-bottom-color: var(--paper); }

.rk-section--dark .rk-btn--primary, .rk-card--dark .rk-btn--primary {
  background: var(--paper);
  color: var(--ink-900);
  border-color: var(--paper);
}
.rk-section--dark .rk-btn--ghost, .rk-card--dark .rk-btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--border-on-dark);
}

.rk-section--dark .rk-card {
  background: var(--ink-800);
  color: var(--paper);
  border-color: var(--border-on-dark);
}
.rk-section--dark .rk-note { border-left-color: var(--border-on-dark); }
.rk-section--dark .rk-list--divided > li { border-top-color: var(--border-on-dark); }


/* == 08 Fokus ==============================================================
   Reguła uniwersalna zamiast listy elementów: obejmuje też <textarea>
   i <summary>, których stara lista nie miała. Pierścień i poświata jadą
   z tokenów, więc ciemny kontekst odwraca je jednym nadpisaniem. */

:focus-visible {
  outline: 2px solid var(--rk-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--rk-focus-halo);
}
.rk-section--dark, .rk-card--dark, .ranking-shell-footer {
  --rk-focus-ring: var(--paper);
  --rk-focus-halo: var(--ink-900);
}


/* == 09 Dane i wykresy =====================================================
   Formy dobrane przed kolorem: pojedyncza liczba to kafel (nie wykres z jednym
   słupkiem), pojedynczy udział to pasek z torem (nie pierścień ani wykres
   kołowy), kubełki są porządkowe (jedna barwa, monotoniczne kroki jasności),
   kategorie są nominalne (wszystkie słupki jedną barwą, wartości podpisane).
   Każdy wykres ma bliźniaka tabelarycznego, więc żaden nie opiera się na
   samym kolorze.
   ========================================================================== */

/* Płyta wykresu na jasnej sekcji jest zawsze biała. Rampa jest zwalidowana
   względem bieli; na --paper-2 jej jasny kraniec spada do 2,82:1. */
.rk-plot {
  margin: 0;
  padding: var(--space-6);
  background: var(--rk-panel);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-lg);
}
/* Wykres bez płyty: siedzi wprost na powierzchni sekcji. Wolno tylko tam, gdzie
   wartość niesie długość paska albo podpis pod nim, a nie odcień z rampy:
   rampa jest zwalidowana względem bieli i poza płytą traci kontrast. */
.rk-plot--flat { padding: 0; background: none; border: 0; border-radius: 0; }
.rk-plot__title {
  margin: 0;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  font-weight: var(--fw-semibold);
}
.rk-plot__sub {
  margin: var(--space-2) 0 0;
  max-width: 60ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--rk-text-muted);
}
.rk-section--dark .rk-plot { background: var(--ink-900); }

/* -- Kafel liczbowy -------------------------------------------------------- */

.rk-statrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.rk-statrow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rk-stat { min-width: 0; }
.rk-stat__value {
  display: block;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: -.03em;
  /* Liczba wiodąca proporcjonalnymi cyframi: tabular-nums rozstrzeliłoby ją
     na tym rozmiarze. Wyrównanie kolumnowe jest potrzebne tylko w tabelach. */
  font-variant-numeric: proportional-nums;
}
.rk-stat__label {
  display: block;
  margin: var(--space-3) 0 0;
  max-width: 26ch;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--rk-text-muted);
}
.rk-stat__sub {
  margin: var(--space-3) 0 0;
  max-width: 46ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--rk-text-soft);
}

/* Lejek: kafle spięte włosową linią, bez strzałek i bez proporcji. */
.rk-statrow--flow .rk-stat { position: relative; padding-right: var(--space-5); }
.rk-statrow--flow .rk-stat + .rk-stat::before {
  content: "";
  position: absolute;
  left: calc(var(--space-5) * -1);
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--rk-line);
}

/* -- Meter ----------------------------------------------------------------- */

.rk-meter + .rk-meter { margin-top: var(--space-6); }
.rk-meter__value {
  display: block;
  margin: 0;
  font-size: var(--fs-display-sm);
  line-height: 1;
  font-weight: var(--fw-medium);
  font-variant-numeric: proportional-nums;
}
.rk-meter__label {
  display: block;
  margin: var(--space-2) 0 var(--space-3);
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--rk-text-muted);
}
.rk-meter__track {
  /* <span> bez display:block zostaje elementem liniowym i ignoruje wysokość:
     pasek nachodził wtedy na etykietę następnego wskaźnika. */
  display: block;
  block-size: 12px;
  background: var(--rk-data-track);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.rk-meter__fill {
  display: block;
  block-size: 100%;
  background: var(--rk-data-4);
  border-radius: 0 4px 4px 0;
}

/* -- Histogram kubełkowy --------------------------------------------------- */

.rk-buckets__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-3);
  align-items: end;
  block-size: 170px;
  margin-top: var(--space-6);
  border-bottom: 1px solid var(--rk-line);
}

.rk-buckets__col { display: grid; justify-items: center; align-items: end; block-size: 100%; }
.rk-buckets__bar {
  inline-size: 100%;
  max-inline-size: 24px;
  block-size: var(--h, 0%);
  /* Kubełek o wartości 1% musi zostać widoczny. */
  min-block-size: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--rk-data-3);
}
.rk-buckets__bar[data-step="1"] { background: var(--rk-data-1); }
.rk-buckets__bar[data-step="2"] { background: var(--rk-data-2); }
.rk-buckets__bar[data-step="3"] { background: var(--rk-data-3); }
.rk-buckets__bar[data-step="4"] { background: var(--rk-data-4); }
.rk-buckets__bar[data-step="5"] { background: var(--rk-data-5); }
.rk-buckets__axis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  color: var(--rk-text-muted);
}
.rk-buckets__mark {
  display: block;
  margin-top: var(--space-1);
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--rk-text);
}
.rk-buckets--tall .rk-buckets__track { block-size: 260px; }
.rk-buckets--tall .rk-buckets__bar { max-inline-size: none; border-radius: 0; }

/* -- Słupki poziome -------------------------------------------------------- */

.rk-bars__list { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.rk-bars__row {
  display: grid;
  grid-template-columns: minmax(150px, 17rem) minmax(0, 1fr) 5.5rem;
  gap: var(--space-4);
  align-items: center;
}
.rk-bars__name { font-size: var(--fs-small); line-height: 1.4; color: var(--rk-text-muted); }
.rk-bars__track {
  display: block;
  block-size: 16px;
  background: var(--rk-data-track);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.rk-bars__fill {
  display: block;
  block-size: 100%;
  /* Jedna seria, jedna barwa: długość słupka niesie wartość, kolor nie
     powtarza tej samej informacji. */
  background: var(--rk-data-4);
  border-radius: 0 4px 4px 0;
  /* Wartość 1% musi zostać widoczna, ale zero ma być puste: przy 0% ten sam
     minimalny pasek rysował ślad tam, gdzie nie znaleźliśmy ani jednego
     serwisu („pełna ścieżka skargi"). */
  min-inline-size: 2px;
}
.rk-bars__fill[data-grow-to="0"] { min-inline-size: 0; }
.rk-bars__value {
  text-align: end;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--rk-text);
}
.rk-bars__note { display: block; margin-top: 2px; font-size: 11px; line-height: 1.3; color: var(--rk-text-muted); }
/* Wiersze rozdzielone kreską zamiast odstępem: bez płyty wykresu lista
   potrzebuje własnej siatki, inaczej rozsypuje się na tle sekcji. */
.rk-bars__list--ruled { gap: 0; }
.rk-bars__list--ruled > .rk-bars__row {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rk-rule);
}
.rk-bars__list--ruled > .rk-bars__row:last-child { border-bottom: 1px solid var(--rk-rule); }
.rk-bars__list--ruled .rk-bars__name { font-size: var(--fs-body); color: var(--rk-text); }
.rk-bars__list--ruled .rk-bars__track { block-size: 14px; border-radius: 0; }
.rk-bars__list--ruled .rk-bars__fill { border-radius: 0; background: var(--rk-text); }
.rk-bars__list--ruled .rk-bars__value { font-size: var(--fs-body-lg); font-weight: var(--fw-medium); }
/* Szesnaście województw w dwóch kolumnach, czytanych w dół i dopiero w prawo:
   lista jest uporządkowana malejąco, więc układ wierszami dałby 1, 3, 5 po
   lewej i 2, 4, 6 po prawej. Liczba wierszy jest stała, bo województw jest 16. */
.rk-bars__list--2col {
  grid-auto-flow: column;
  grid-template-rows: repeat(8, auto);
  column-gap: var(--space-8);
}
.rk-bars__list--2col .rk-bars__row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 4rem; }
.rk-bars__list--2col .rk-bars__value { font-size: var(--fs-body); }
.rk-bars__scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rk-line);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  color: var(--rk-text-muted);
}

/* -- Bliźniak tabelaryczny ------------------------------------------------- */

.rk-plot__data { margin-top: var(--space-5); }
.rk-plot__data > summary {
  cursor: pointer;
  padding: var(--space-3) 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--rk-text-soft);
}
.rk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.rk-table th, .rk-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--rk-line);
}
.rk-table td, .rk-table th[scope="col"] { font-variant-numeric: tabular-nums; }
.rk-table th[scope="col"] { color: var(--rk-text-muted); font-weight: var(--fw-semibold); }


/* == 10 Komponenty stron =================================================== */

.rk-hero__action { display: grid; gap: var(--space-5); justify-items: start; }

.rk-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.rk-split--rail { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.rk-rail { display: grid; gap: var(--space-6); align-content: start; }
.rk-rail__stat { padding-top: var(--space-5); border-top: 1px solid var(--ink-200); }
.rk-statrow--rail { grid-template-columns: 1fr; gap: var(--space-6); }
/* Jedna liczba jako figura sekcji: rośnie, bo nie dzieli miejsca z innymi. */
.rk-statrow--solo { grid-template-columns: 1fr; }
.rk-statrow--solo .rk-stat__value { font-size: clamp(52px, 7vw, 92px); letter-spacing: -.04em; }
.rk-statrow--solo .rk-stat__label { max-width: 22ch; font-size: var(--fs-body); }
.rk-split--figure { align-items: center; }

.rk-belief { text-align: center; }
.rk-belief__title { max-width: 860px; margin-inline: auto; }
.rk-belief .rk-accent { margin-inline: auto; }
.rk-belief__text {
  max-width: 720px;
  margin-inline: auto;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--rk-text-soft);
}
/* Przerywnik strony głównej niesie jedno zdanie, więc wolno mu urosnąć: to
   jedyne miejsce, w którym mówimy, co bariera znaczy dla firmy. */
.rk-belief--strong { padding-block: var(--space-10); }
.rk-belief--strong .rk-belief__title { font-size: clamp(38px, 5vw, var(--fs-display-lg)); }
.rk-belief__text--quote {
  max-width: 46ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-title);
  line-height: 1.35;
  color: var(--rk-text-muted);
}

/* -- Hero stron danych ---------------------------------------------------- */

.rk-phero { padding-block: var(--space-9) var(--space-10); }
/* Dolny zapas jest pod pasek faktów. Strony bez niego kończą symetrycznie. */
.rk-phero--plain { padding-bottom: var(--space-9); }
.rk-phero__title {
  margin: var(--space-5) 0 0;
  font-size: clamp(40px, 6vw, var(--fs-display-xl));
  line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl);
  font-weight: var(--fw-medium);
}
/* Drugie słowo nazwy szeryfową kursywą: nazwa zostaje jednym zdaniem, a nie
   dwiema liniami tej samej wagi. */
.rk-phero__alt {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--rk-text-muted);
}
.rk-phero__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: var(--space-8);
  align-items: end;
  margin-top: var(--space-8);
}
/* `--rk-text`, nie `--paper`: to ta sama barwa na ciemnym pasie, ale token jedzie
   z powierzchnią, więc lead nie zbieleje, jeśli hero kiedyś zjaśnieje. */
.rk-phero .rk-lead { margin: 0; color: var(--rk-text); }
/* Hero bez siatki `__split` (Wyróżnieni, Ponowne badanie): lead leży wprost pod
   tytułem, więc `margin: 0` sklejał go z nagłówkiem. Odstęp tylko dla tego układu. */
.rk-phero__title + .rk-lead { margin-top: var(--space-5); }

.rk-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: var(--space-9) 0 0;
}
.rk-phero__split--ruled { padding-top: var(--space-6); border-top: 1px solid var(--rk-line); }
/* Stan badania przy nagłówku, nie drobnym drukiem na dole strony. Kwadrat jest
   ozdobą: informację niesie napis obok, więc nie zostaje sam z komunikatem. */
.rk-phero__state {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--rk-text);
}
.rk-phero__state::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 9px;
  block-size: 9px;
  background: currentColor;
}
.rk-phero__state-note {
  margin: var(--space-3) 0 var(--space-4);
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--rk-text-muted);
}

.rk-fact { padding-top: var(--space-4); border-top: 1px solid var(--rk-line); }
.rk-fact dt { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--rk-text); }
.rk-fact dd {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--rk-text-muted);
}

/* -- Strona główna: drabina zakresu --------------------------------------- */

/* Wcięcie rośnie co szczebel, więc wzrok schodzi od populacji do liczby barier.
   Robi to arkusz, nie szablon: pozycja wiersza jest cechą układu, nie danych. */
.rk-scope { margin: 0; padding: 0; list-style: none; }
.rk-scope__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rk-rule);
}
.rk-scope__row:nth-child(2) { padding-left: 32px; }
.rk-scope__row:nth-child(3) { padding-left: 64px; }
.rk-scope__row:nth-child(4) { padding-left: 96px; }
.rk-scope__row:nth-child(5) { padding-left: 128px; }
.rk-scope__row--accent {
  padding-right: var(--space-4);
  background: var(--paper-2);
  border-top-color: var(--ink-900);
  border-bottom: 1px solid var(--ink-900);
  font-weight: var(--fw-medium);
}
.rk-scope__label { font-size: var(--fs-body); line-height: var(--lh-body); }
.rk-scope__value {
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-medium);
  font-variant-numeric: proportional-nums;
}
.rk-scope__note { margin-top: var(--space-5); text-align: end; }
.rk-split--scope { align-items: start; }

/* -- Raporty: lista sektorów ---------------------------------------------- */

/* Sektor dostaje własny wiersz z paskiem udziału i liczbą podmiotów. Pasek nie
   jest jedyną drogą do wartości: liczba stoi obok jako tekst, więc ta lista
   nie potrzebuje bliźniaka tabelarycznego. */
.rk-sectors { margin: 0; padding: 0; list-style: none; }
.rk-sector {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rk-rule);
}
.rk-sector:last-child { border-bottom: 1px solid var(--rk-rule); }
.rk-sector h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-medium);
}
.rk-sector__track {
  display: block;
  block-size: 10px;
  background: var(--rk-data-track);
  overflow: hidden;
}
.rk-sector__fill { display: block; block-size: 100%; background: var(--rk-text); }
.rk-sector__side { text-align: end; }
.rk-sector__value {
  margin: 0;
  font-size: var(--fs-display-md);
  line-height: 1;
  letter-spacing: var(--ls-display-md);
  font-weight: var(--fw-medium);
  font-variant-numeric: proportional-nums;
}
.rk-sector__state { margin: var(--space-3) 0 0; font-size: var(--fs-small); color: var(--rk-text-muted); }

/* -- Raporty: dwa duże udziały -------------------------------------------- */

.rk-meters--big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
.rk-meters--big .rk-meter + .rk-meter { margin-top: 0; }
.rk-meters--big .rk-meter__value { font-size: clamp(56px, 7vw, 96px); letter-spacing: -.03em; }
.rk-meters--big .rk-meter__label { max-width: 40ch; font-size: var(--fs-body); }
.rk-meters--big .rk-meter__track { block-size: 10px; border-radius: 0; }
.rk-meters--big .rk-meter__fill { border-radius: 0; background: var(--rk-text); }

/* -- Lista hasło/wyjaśnienie ---------------------------------------------- */

/* Hasło po lewej, wyjaśnienie po prawej, wiersze rozdzielone kreską. Zastąpiło
   płytę `.imp-card`: te same pary czytało się tam jak formularz, a to jest
   spis rzeczy, z którymi można napisać. */
.rk-deflist { margin: 0; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 0 var(--space-8); }
.rk-deflist dt {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rk-rule);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-medium);
}
.rk-deflist dd {
  margin: 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rk-rule);
  max-width: 62ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--rk-text-soft);
}
.rk-deflist dt:last-of-type, .rk-deflist dd:last-of-type { border-bottom: 1px solid var(--rk-rule); }

/* -- Impressum ------------------------------------------------------------- */

.rk-imprint { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); }
.rk-imprint__row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rk-line);
}
.rk-imprint__row--wide { grid-column: 1 / -1; }
.rk-imprint__row:last-child { border-bottom: 1px solid var(--rk-line); }
.rk-imprint dt {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--rk-text-muted);
}
.rk-imprint dd { margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.rk-imprint a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rk-line); overflow-wrap: anywhere; }
.rk-imprint a:hover { border-bottom-color: currentColor; }

/* Adres redakcyjny jako główna droga kontaktu: duży, ale nadal odnośnik. */
.rk-mailto {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  font-weight: var(--fw-medium);
  color: var(--rk-text);
  text-decoration: none;
  border-bottom: 1px solid var(--rk-line);
  padding-bottom: 4px;
  overflow-wrap: anywhere;
}
.rk-mailto:hover { border-bottom-color: currentColor; }

/* -- Nota metodologiczna --------------------------------------------------- */

/* Podwójna klasa: `.rk-prose p` jest bardziej szczegółowe niż sama klasa
   akapitu i podbijało oba te warianty do rozmiaru zwykłego tekstu. */
.rk-prose .rk-prose__fine { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--rk-text-muted); }
.rk-prose .rk-prose__lead {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rk-rule);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--rk-text);
}

/* -- Strona główna: trzy udziały jako liczby ------------------------------ */

.rk-figures { margin: 0; align-self: end; }
.rk-figures__item { padding: var(--space-5) 0; border-top: 1px solid var(--rk-line); }
.rk-figures__item:last-child { border-bottom: 1px solid var(--rk-line); }
.rk-figures__value {
  font-size: var(--fs-display-md);
  line-height: 1;
  letter-spacing: var(--ls-display-md);
  font-weight: var(--fw-medium);
  font-variant-numeric: proportional-nums;
}
.rk-figures__label {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--rk-text-muted);
}
.rk-split--persite { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; }

/* -- Strona główna: kroki metody ------------------------------------------ */

.rk-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rk-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rk-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rk-step { padding-top: var(--space-4); border-top: 1px solid var(--rk-line); }
/* Podwójna klasa: `.rk-steps p` niżej jest bardziej szczegółowe i podbijało
   numer do rozmiaru tekstu kroku. */
.rk-steps .rk-step__num {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--rk-text-muted);
}
.rk-steps p { margin: 0; font-size: var(--fs-small); line-height: 1.6; }
.rk-steps .rk-h3 { margin: 0 0 var(--space-2); }

.rk-rule {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rk-text);
}
.rk-rule p { margin: 0; max-width: 64ch; font-size: var(--fs-body); line-height: 1.7; color: var(--rk-text); }
/* Etykieta z ukośnikiem: szeryfowa kursywa przy nagłówku sekcji. Osobna klasa,
   bo używa jej i pasek zasad, i nagłówek impressum, a `.rk-rule p` wygrywało
   specyficznością z samą klasą etykiety. */
.rk-slug {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  color: var(--rk-text-muted);
}
.rk-rule .rk-slug { font-size: var(--fs-subtitle); }

.rk-check li { font-size: var(--fs-small); line-height: 1.7; color: var(--rk-text-soft); }
.rk-check strong { color: var(--rk-text); }
.rk-h2--lead { font-size: clamp(34px, 4.4vw, var(--fs-display-lg)); }

/* Strona dokumentowa: nagłówek na szynie po lewej, treść po prawej. Szyna
   trzyma się przy przewijaniu, żeby długa proza nie gubiła kontekstu. */
.rk-doc-hero { padding-block: var(--space-9) var(--space-7); }
.rk-doc-hero .rk-h1 { max-width: 14ch; }
.rk-serif { font-family: var(--font-serif); font-weight: var(--fw-medium); }
.rk-split--doc { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--space-8); }
.rk-rail-head { position: sticky; top: 96px; }
.rk-rail-head .rk-h2 { max-width: 14ch; }

.rk-tiles { margin: 0; padding: 0; list-style: none; }
.rk-tiles p { margin: 0; font-size: var(--fs-small); line-height: 1.7; color: var(--rk-text-soft); }
.rk-tiles strong { color: var(--rk-text); }
.rk-tile__num {
  display: block;
  margin-bottom: var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--fs-subtitle);
  color: var(--rk-text-muted);
}

.rk-rules li { font-size: var(--fs-body); line-height: 1.7; color: var(--rk-text-soft); }
.rk-cta--center { justify-content: center; }

/* Pojedyncza liczba wiodąca w zdaniu: mocny akcent bez robienia z niej kafla. */
.rk-figure {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--rk-line);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--rk-text-muted);
}
.rk-figure strong {
  display: block;
  font-size: var(--fs-display-sm);
  line-height: 1.1;
  font-weight: var(--fw-medium);
  color: var(--rk-text);
  font-variant-numeric: proportional-nums;
}

.rk-chip {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: 5px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.rk-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-6);
  background: var(--rk-panel);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
}
.rk-teaser:hover { border-color: var(--ink-500); }
.rk-teaser p { margin: 0 0 var(--space-4); font-size: var(--fs-small); line-height: 1.6; color: var(--rk-text-muted); }
.rk-teaser__more { font-size: var(--fs-small); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--ink-300); }
.rk-teaser__mini { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.rk-teaser__mini-name { display: block; margin-bottom: 4px; font-size: 11px; color: var(--rk-text-muted); }
.rk-teaser__mini-track { display: block; block-size: 8px; background: var(--rk-data-track); border-radius: var(--radius-sm); overflow: hidden; }
.rk-teaser__mini-fill { display: block; block-size: 100%; background: var(--rk-data-4); border-radius: 0 4px 4px 0; }

.rk-meta { display: grid; gap: var(--space-4); margin: 0; align-content: start; }
.rk-meta > div { padding-top: var(--space-4); border-top: 1px solid var(--rk-line); }
.rk-meta dt { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--rk-text-muted); }
.rk-meta dd { margin: var(--space-1) 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--rk-text-soft); }

.rk-coverage { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--rk-line); }
.rk-coverage .rk-bars__list { margin-top: var(--space-5); }


/* -- Karta wyniku ---------------------------------------------------------
   Dokument, nie strona marketingowa: jedna kolumna o stałej mierze, ale
   w pasmach, żeby dziewięć sekcji nie zlało się w ścianę tekstu. */

.card-gate-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(193, 154, 91, .16), transparent 34rem),
    var(--paper-2);
}
.card-gate-page .ranking-shell { min-height: 100vh; max-width: none; background: transparent; }
.card-gate-page main { display: grid; min-height: 100vh; }
.card-gate {
  display: grid;
  place-items: center;
  padding: clamp(28px, 7vw, 88px) var(--space-4);
}
.card-gate__panel {
  width: min(100%, 620px);
  padding: clamp(28px, 6vw, 56px);
  border: 1px solid var(--rk-line);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 0 28px 70px rgba(24, 31, 29, .12);
}
.card-gate__brand {
  margin: 0 0 var(--space-8);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
}
.card-gate__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--rk-text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.card-gate h1 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-serif);
  font-size: clamp(30px, 6vw, 46px);
  font-weight: var(--fw-medium);
  line-height: 1.08;
}
.card-gate__lead {
  margin: 0 0 var(--space-3);
  color: var(--rk-text);
  font-size: 18px;
  font-weight: var(--fw-bold);
}
.card-gate__copy {
  margin: 0;
  color: var(--rk-text-soft);
  font-size: 15px;
  line-height: 1.7;
}
.card-gate__form {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--rk-line);
  border-radius: 18px;
  background: var(--paper-2);
}
.card-gate__form label {
  color: var(--rk-text);
  font-size: 14px;
  font-weight: var(--fw-bold);
}
.card-gate__form input[type="password"] {
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid var(--rk-text-muted);
  border-radius: 10px;
  background: var(--paper);
  color: var(--rk-text);
  font: inherit;
  font-size: 17px;
  letter-spacing: .08em;
  box-shadow: inset 0 1px 1px rgba(24, 31, 29, .05);
}
.card-gate__form input[type="password"]:hover { border-color: var(--rk-text); }
.card-gate__form input[type="password"]:focus {
  outline: 3px solid rgba(24, 31, 29, .2);
  outline-offset: 2px;
  border-color: var(--rk-text);
}
.card-gate__form [role="alert"] {
  margin: 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: #fbe9e7;
  color: #7a271c;
  font-size: 13px;
  font-weight: var(--fw-semibold);
}
.card-gate__form button {
  width: 100%;
  min-height: 52px;
  padding: 12px 22px;
  border: 1px solid var(--rk-text);
  border-radius: var(--radius-pill);
  background: var(--rk-text);
  color: var(--paper);
  font: inherit;
  font-size: 15px;
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.card-gate__form button:hover { transform: translateY(-1px); }
.card-gate__form button:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--rk-text);
}
.card-gate__note,
.card-gate__privacy {
  margin: 0;
  color: var(--rk-text-muted);
  font-size: 12.5px;
  line-height: 1.6;
}
.card-gate__privacy { margin-top: var(--space-3); }
.card-gate__panel a {
  color: inherit;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* -- Karta wyniku: układ ---------------------------------------------------
   Dokument firmy, nie podstrona serwisu. Każda sekcja to szyna (numer +
   etykieta) obok kolumny treści, a pasma powierzchni (`--light`, `--card`,
   `--sunken`, `--dark`) dają rytm, żeby czternaście sekcji nie zlało się
   w ścianę tekstu.

   KOLORY: `--ink-400` NIE WYSTĘPUJE tu jako kolor tekstu. Na powierzchniach
   karty daje 3,09:1 na `--paper`, 2,82:1 na `--paper-2` i 3,45:1 na `--card`,
   czyli poniżej progu 4,5:1 dla tekstu. Najjaśniejszy dopuszczony krok to
   `--ink-500` (5,98 / 5,46 / 6,69). Obramowania KONTROLEK też jadą `--ink-500`
   (próg 3:1 z 1.4.11); `--ink-300` zostaje wyłącznie liniami rozdzielającymi,
   które niczego nie identyfikują. */

.card-col { max-width: 1200px; margin: 0 auto; }
.card-col--split {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
.card-body { max-width: 900px; min-width: 0; }

/* Numer sekcji rysuje LICZNIK CSS, nie liczba wpisana w szablon: sekcja
   „Ilościowy obraz problemu" jest warunkowa i przy jej braku ręczna numeracja
   zostawiałaby dziurę w ciągu. Numer jest dekoracją (szablon daje mu
   `aria-hidden`), więc treść generowana nikomu nie ucieka. */
.card-page main { counter-reset: card-section; }
.card-rail { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.card-rail__num::before {
  content: counter(card-section, decimal-leading-zero);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--rk-text-muted);
}
.card-rail__label {
  font-size: var(--fs-caption);
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--rk-text-muted);
}
.card-rail--motif { color: var(--rk-text); }

/* -- Karta wyniku: nawigacja po sekcjach ----------------------------------- */

/* Tło paska musi sięgać krawędzi okna, a nie kończyć się na 1280 px powłoki:
   przy przewijaniu spod pasa wychodziła treść po lewej i prawej stronie.
   Ten sam mechanizm co w `.ranking-shell-nav` — pseudoelement na 100vw pod
   spodem, bo `box-shadow` z rozrostem nie przyjmuje `backdrop-filter`. */
.card-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  isolation: isolate;
}
.card-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: rgb(244 242 237 / .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ink-300);
}
.card-nav__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  max-width: 1280px;
  min-height: 62px;
  margin: 0 auto;
  padding: var(--space-3) var(--rk-gutter);
}
.card-nav__brand { flex: 0 0 auto; display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.card-nav__brand-name { font-family: var(--font-serif); font-size: 19px; letter-spacing: .01em; }
.card-nav__brand-year { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.card-nav__subject {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  padding-left: var(--space-6);
  overflow: hidden;
  border-left: 1px solid var(--ink-300);
}
.card-nav__org {
  min-width: 0;
  font-size: 13px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-nav__count { flex: 0 1 auto; min-width: 0; font-size: var(--fs-caption); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-nav__links { flex: 0 0 auto; display: flex; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.card-nav__links a {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  font-size: 13px;
  color: var(--ink-500);
  text-decoration: none;
  white-space: nowrap;
}
.card-nav__links a:hover,
.card-nav__links a:focus-visible { color: var(--ink-900); border-bottom-color: var(--ink-900); }
/* Stan „jesteś tutaj" dokłada skrypt. Nie jest jedyną różnicą kolorystyczną:
   pogrubienie i kreska niosą to samo bez polegania na kolorze. */
.card-nav__links a[aria-current] { color: var(--ink-900); font-weight: var(--fw-medium); border-bottom-color: var(--ink-900); }

/* Kotwica nie może chować nagłówka pod przyklejonym paskiem. */
.card-flow-section, .card-hero { scroll-margin-top: 74px; }

/* -- Karta wyniku: nagłówek ------------------------------------------------ */

.card-hero { padding-block: clamp(40px, 7vw, 88px) clamp(36px, 6vw, 72px); }
.card-head__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.card-head__kicker {
  margin: 0;
  font-size: 13px;
  letter-spacing: .09em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-500);
}
.card-head__title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-7);
  flex-wrap: wrap;
  margin-top: clamp(28px, 5vw, 56px);
}
.card-head h1 {
  margin: 0;
  max-width: 900px;
  font-weight: var(--fw-medium);
  letter-spacing: -.02em;
  line-height: 1.02;
  text-wrap: pretty;
}
.card-head__label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: var(--fw-regular);
  letter-spacing: .01em;
  color: var(--ink-500);
}
.card-head__name { display: block; font-size: clamp(30px, 6vw, 68px); overflow-wrap: anywhere; }

.card-meta {
  margin: clamp(32px, 5vw, 64px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--ink-300);
  border-block: 1px solid var(--ink-300);
}
.card-meta > div { min-width: 0; padding: 22px var(--space-5) var(--space-5); background: var(--rk-bleed-bg, var(--paper)); }
.card-meta dt { font-size: var(--fs-caption); letter-spacing: .07em; line-height: 1.4; text-transform: uppercase; color: var(--ink-500); }
.card-meta dd { margin: var(--space-2) 0 0; font-size: 17px; line-height: 1.4; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.card-meta dd small { display: block; margin-top: 2px; font-size: 13px; font-weight: var(--fw-regular); color: var(--ink-500); }

.card-head__split { display: flex; flex-wrap: wrap; gap: var(--space-7); margin-top: clamp(32px, 5vw, 56px); }
.card-head__aside { flex: 1 1 340px; max-width: 440px; display: flex; flex-direction: column; gap: var(--space-5); }

.card-audited-pages { flex: 1 1 520px; min-width: 0; }
.card-audited-pages h2 {
  margin: 0 0 18px;
  font-size: var(--fs-caption);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--ink-500);
}
.card-audited-pages ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.card-audited-pages li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ink-300);
}
.card-audited-pages strong { flex: 0 0 130px; font-size: 15px; font-weight: var(--fw-medium); }
.card-audited-pages a, .card-page-url { min-width: 0; font-size: var(--fs-small); overflow-wrap: anywhere; word-break: break-word; }

.card-private { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-500); }
.card-private strong { color: var(--ink-900); }

/* Ciemna wyspa na jasnym paśmie: tło I kolor tekstu w jednym bloku, inaczej
   kontrakt wizualny słusznie krzyczy o białym na białym. */
.card-archive {
  padding: 22px var(--space-5);
  border-radius: 2px 2px 2px var(--radius-lg);
  background: var(--ink-900);
  color: var(--text-on-dark);
}
.card-archive strong { display: block; font-size: 15px; font-weight: var(--fw-medium); color: var(--text-on-dark); }
.card-archive p { margin: var(--space-2) 0 0; font-size: var(--fs-small); line-height: 1.6; color: var(--text-on-dark-muted); }
.card-archive .card-btn { margin-top: var(--space-4); }

/* -- Karta wyniku: typografia sekcji --------------------------------------- */

.card-body > h2, .card-body > section > h2 {
  margin: 0 0 clamp(18px, 3vw, 32px);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: var(--fw-medium);
  letter-spacing: -.015em;
  line-height: 1.08;
  text-wrap: pretty;
}
/* `:where()` zeruje szczegółowość, więc to jest DOMYŚLNA typografia sekcji,
   a nie reguła bijąca komponenty. Bez tego `.card-body p` (0,2,0) wygrywało
   z klasą komponentu (0,1,0) i wielka liczba wyniku schodziła do 17 px,
   a blok „Jak powtórzyć" łapał miarę 64ch zamiast pełnej szerokości. */
.card-body :where(h3) { margin: 0 0 var(--space-3); font-size: clamp(19px, 2.4vw, 24px); font-weight: var(--fw-medium); letter-spacing: -.01em; line-height: 1.2; }
.card-body :where(p) { margin: 0 0 var(--space-4); max-width: 64ch; font-size: 17px; line-height: 1.6; color: var(--rk-text-soft); text-wrap: pretty; }
.card-body :where(p:last-child) { margin-bottom: 0; }
.card-body :where(li) { font-size: var(--fs-body); line-height: 1.6; color: var(--rk-text-soft); }
.card-note { max-width: 70ch; font-size: 13px; line-height: 1.6; color: var(--rk-text-muted); }
.card-strong { margin: var(--space-6) 0 0; max-width: 60ch; font-size: 19px; line-height: 1.5; font-weight: var(--fw-medium); color: var(--rk-text); }
.card-context-lead { margin: 0; max-width: 56ch; font-size: clamp(19px, 2.6vw, 22px); line-height: 1.45; color: var(--rk-text-soft); }
.card-pullquote {
  margin: var(--space-6) 0 0;
  padding-left: var(--space-6);
  border-left: 1px solid var(--ink-300);
  max-width: 44ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(21px, 3vw, 26px);
  line-height: 1.4;
  color: var(--rk-text);
}

/* Zamknięty <details> chowamy jawnie, autorskim CSS, zamiast polegać
   wyłącznie na natywnym mechanizmie przeglądarki. Chromium ukrywa zawartość
   zamkniętego <details> wewnętrznie (nie przez zwykłe `display: none` na
   dzieciach), przez co potrafi zostawić „widmowy" prostokąt geometrii po
   poprzednim layoucie — axe-core łapie go wtedy jako realny element i liczy
   kontrast koloru tekstu z tej martwej pozycji względem tła, które akurat
   tam teraz wizualnie leży (u nas: `.card-tech` zderzone z sekcją
   Organizatora). Efekt jest niewidoczny dla użytkownika, ale fałszywie
   wywala zerowo-tolerancyjną bramkę dostępności karty (patrz
   ranking/tests_a11y.py) przy KAŻDEJ zmianie długości strony w pobliżu
   zamkniętego bloku technicznego — nie tylko przy tej konkretnej. Jawne
   `display: none` na dzieciach usuwa martwe dane geometrii u źródła. */
details:not([open]) > *:not(summary) { display: none; }

/* Lekka animacja rozwijania — tylko przy otwarciu, celowo asymetrycznie.
   Zamknięcie musi zostać natychmiastowe (`display: none` od razu, patrz
   reguła wyżej), inaczej wraca ten sam fałszywy błąd axe-core. `@keyframes`
   zamiast `transition`, bo `display: none → block` i tak nie da się
   tranzycjonować bez chwilowego zachowania layoutu w tle. */
details[open] > *:not(summary) {
  animation: card-details-in .22s ease-out;
}
@keyframes card-details-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  details[open] > *:not(summary) { animation: none; }
}

/* Wspólny wskaźnik rozwijania: słowo „rozwiń"/„zwiń" i strzałka.
   Słowo mieszka w pustym `<span aria-hidden>` z szablonu, a nie w `::before`
   samego `<summary>`: treść generowana CSS-em wchodzi do nazwy dostępnej
   elementu, więc czytnik ekranu czytałby „Podstawa sprawdzenia rozwiń" i po
   otwarciu zmieniałby nazwę kontrolki. Stan otwarcia niesie już sam
   `<details>`, więc dla czytnika to informacja podwójna i myląca.

   Strzałkę rysują obramowania (`content: ""` niczego nie dokłada do nazwy).
   Kolor `--ink-500` daje 5,46:1 na najciemniejszej jasnej powierzchni, czyli
   powyżej progu 3:1 dla wskaźnika stanu. */
.card-disclosure__label { min-width: 0; }
.card-disclosure__hint {
  flex: 0 0 auto;
  margin-left: auto;
  padding-right: var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--rk-text-muted);
}
.card-disclosure__hint::after { content: "rozwiń"; }
details[open] > summary .card-disclosure__hint::after { content: "zwiń"; }

.card-tech > summary,
.card-evidence-details > summary,
.card-legal-evidence > summary,
.dist-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
  color: var(--rk-text);
}
.card-tech > summary::-webkit-details-marker,
.card-evidence-details > summary::-webkit-details-marker,
.card-legal-evidence > summary::-webkit-details-marker,
.dist-details > summary::-webkit-details-marker { display: none; }
.card-tech > summary::after,
.card-evidence-details > summary::after,
.card-legal-evidence > summary::after,
.dist-details > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 1.5px solid var(--rk-text-muted);
  border-bottom: 1.5px solid var(--rk-text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-fast) var(--ease-out);
}
.card-tech[open] > summary::after,
.card-evidence-details[open] > summary::after,
.card-legal-evidence[open] > summary::after,
.dist-details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* -- Karta wyniku: wynik --------------------------------------------------- */

.card-result { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(20px, 4vw, 48px); }
.card-result__number {
  flex: 0 0 auto;
  margin: 0;
  max-width: none;
  font-size: clamp(78px, 13vw, 168px);
  line-height: .82;
  font-weight: var(--fw-medium);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--rk-text);
}
.card-result__copy { flex: 1 1 380px; margin: 0; max-width: 46ch; font-size: 18px; line-height: 1.55; }
.card-result__copy strong { display: block; margin-bottom: var(--space-2); font-size: 22px; font-weight: var(--fw-medium); color: var(--rk-text); }
.card-result__copy br { display: none; }
.card-howto {
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--rk-rule);
  max-width: none;
  font-size: 15px;
  line-height: 1.6;
  color: var(--rk-text-muted);
}
.card-howto small { font-size: 13px; }

/* -- Karta wyniku: ilościowy obraz problemu -------------------------------- */

.card-issue-overview__lead { max-width: 64ch; }
.card-issue-metrics {
  margin: clamp(24px, 4vw, 40px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--rk-rule);
  border: 1px solid var(--rk-rule);
}
.card-issue-metrics > div { min-width: 0; padding: var(--space-5); background: var(--rk-bleed-bg, var(--paper)); }
.card-issue-metrics dt { font-size: var(--fs-caption); letter-spacing: .07em; line-height: 1.4; text-transform: uppercase; color: var(--rk-text-muted); }
.card-issue-metrics dd {
  margin: var(--space-2) 0 0;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1;
  font-weight: var(--fw-medium);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.table-scroll { max-width: 100%; margin-top: clamp(24px, 4vw, 40px); overflow-x: auto; }
.card-issue-table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 15px; }
.card-issue-table th[scope="col"] {
  padding: 0 var(--space-4) var(--space-3) 0;
  font-size: var(--fs-caption);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--rk-text-muted);
  border-bottom: 1px solid var(--rk-text);
}
.card-issue-table th, .card-issue-table td { text-align: left; vertical-align: middle; }
.card-issue-table tbody th, .card-issue-table tbody td { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: 1px solid var(--rk-rule); }
.card-issue-table tbody th { font-weight: var(--fw-medium); }
.card-issue-table th:nth-child(3), .card-issue-table td:nth-child(3),
.card-issue-table th:nth-child(4), .card-issue-table td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.card-issue-table td:nth-child(3) { color: var(--rk-text-muted); }

/* Waga jako pigułka. Nazwa wagi zostaje słowem, więc kolor niczego tu sam
   nie przenosi (1.4.1) — jest tylko wzmocnieniem hierarchii. */
.card-sev {
  display: inline-block;
  padding: 4px var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  letter-spacing: .05em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.card-sev--critical { background: var(--rk-text); border-color: var(--rk-text); color: var(--rk-bleed-bg, var(--paper)); }
.card-sev--serious { border-color: var(--rk-text); color: var(--rk-text); }
.card-sev--moderate, .card-sev--minor { border-color: var(--ink-500); color: var(--rk-text-muted); }

/* -- Karta wyniku: ustalenia ----------------------------------------------- */

.card-evidence-intro { max-width: 64ch; margin: 0 0 clamp(28px, 5vw, 56px); }
.card-evidence-stack { display: flex; flex-direction: column; }
.card-evidence-finding {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--space-6);
  align-items: start;
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--rk-rule);
}
.card-evidence-finding:first-child { padding-top: 0; }
.card-evidence-finding:last-child { padding-bottom: 0; border-bottom: 0; }
.card-evidence-finding:has(.card-evidence-figure) { grid-template-columns: minmax(0, 1fr) auto; }
.card-evidence-finding__body { grid-column: 1 / -1; min-width: 0; }
.card-evidence-finding:has(.card-evidence-figure) > .card-evidence-finding__body { grid-column: 1; grid-row: 1; }
.card-evidence-finding > .card-evidence-figure { grid-column: 2; grid-row: 1; }
.card-evidence-finding > .card-evidence-details,
.card-evidence-finding > .card-evidence-finding__proof { grid-column: 1 / -1; }

.card-evidence-finding__label {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--ink-500);
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--rk-text-muted);
}
.card-evidence-finding--main .card-evidence-finding__label {
  background: var(--rk-text);
  border-color: var(--rk-text);
  color: var(--rk-bleed-bg, var(--paper));
}
.card-evidence-finding h3 { margin: 18px 0; max-width: 26ch; font-size: clamp(20px, 2.8vw, 24px); }
.card-evidence-finding--main h3 { max-width: 22ch; font-size: clamp(23px, 3.4vw, 30px); letter-spacing: -.015em; line-height: 1.15; }
.card-evidence-finding__body p { max-width: 56ch; font-size: var(--fs-body-lg); }
.card-evidence-finding--main .card-evidence-finding__body > p:first-of-type { font-size: 17px; }
.card-evidence-finding__body .card-note { font-size: var(--fs-small); color: var(--rk-text-muted); }
.card-evidence-finding__proof {
  margin: var(--space-6) 0 0;
  padding: 18px var(--space-5);
  max-width: none;
  border-left: 2px solid var(--rk-text);
  background: var(--paper);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.card-evidence-figure { margin: 0; width: min(200px, 100%); }
.card-evidence-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  object-position: top left;
  border: 1px solid var(--rk-rule);
  border-radius: 2px 2px 2px 14px;
  background: var(--paper-2);
}
.card-evidence-figure img.is-zoomable { cursor: zoom-in; }
.card-evidence-figure figcaption { margin-top: var(--space-2); font-size: 12.5px; line-height: 1.45; color: var(--rk-text-muted); }
/* Powiększenie ma prawdziwy przycisk, a nie klikalny obraz: obraz musi zostać
   obrazem, żeby jego opis alternatywny dalej opisywał dowód. */
.card-zoom {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--rk-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.card-zoom:hover { color: var(--rk-text-muted); }

.card-evidence-details { margin-top: var(--space-5); border-top: 1px solid var(--rk-rule); }
.card-evidence-details > summary { padding: var(--space-3) 0; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.card-evidence-details > *:not(summary) { margin-top: var(--space-3); }
.card-evidence-details .card-evidence-figure { width: min(420px, 100%); }
.card-evidence-details .card-evidence-figure img { max-height: 420px; object-fit: contain; }
.card-evidence-details--technical { padding-bottom: var(--space-4); }
.card-technical-finding { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--rk-rule); border: 1px solid var(--rk-rule); }
.card-technical-finding > div { padding: var(--space-3) var(--space-4); background: var(--rk-bleed-bg, var(--paper)); }
.card-technical-finding dt { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--rk-text-muted); }
.card-technical-finding dd { margin: var(--space-1) 0 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.card-technical-meta { display: grid; gap: 0; margin-top: var(--space-4); }
.card-technical-meta__field { display: grid; grid-template-columns: minmax(112px, .22fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-top: 1px solid var(--rk-rule); }
.card-technical-meta dt { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .04em; line-height: 1.5; text-transform: uppercase; color: var(--rk-text-muted); }
.card-technical-meta dd { min-width: 0; margin: 0; font-size: 12px; line-height: 1.55; }
.card-technical-meta__field--code dd code { display: block; max-height: 9.5em; padding: var(--space-3); overflow: auto; border: 1px solid var(--rk-rule); background: var(--paper-2); font-size: 11.5px; line-height: 1.5; }
.card-evidence-details code { overflow-wrap: anywhere; white-space: pre-wrap; }

.card-evidence-summary { margin-top: var(--space-6); padding: var(--space-5); background: var(--paper); border-left: 2px solid var(--rk-rule); }
.card-evidence-summary > span { display: block; margin-bottom: var(--space-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rk-text-muted); }
.card-evidence-summary p { margin: 0; font-size: var(--fs-small); line-height: 1.6; }

.card-lightbox { width: min(90vw, 960px); height: min(82vh, 760px); padding: var(--space-3); border: 0; background: var(--ink-900); color: var(--paper); overflow: hidden; box-sizing: border-box; }
.card-lightbox[open] { display: flex; flex-direction: column; }
.card-lightbox::backdrop { background: rgb(10 10 10 / .92); }
.card-lightbox__scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; }
/* Zrzut mieści się w szerokości okna i nigdy się nie powiększa: dowodem bywa
   pełny zrzut strony szerszy od modala, a `min-width: 100%` kazał mu wystawać
   w prawo. Widać było wtedy lewą część i nic nie zapowiadało, że reszta czeka
   za krawędzią. Wysoki zrzut przewija się w pionie, czyli w tę stronę, w którą
   i tak czyta się stronę internetową. */
.card-lightbox__image {
  display: block;
  width: auto;
  min-width: 0;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  background: var(--paper);
}
.card-lightbox__close {
  display: block;
  margin: 0 0 var(--space-2) auto;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--paper);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}

/* -- Karta wyniku: rozkład próby ------------------------------------------
   Słupki jadą rampą `--rk-data-*`, nie `--ink-300`: linia włosowa daje 1,38:1
   na `--paper-2`, czyli obiekt graficzny niosący dane byłby poniżej 3:1.
   Wartość każdego słupka i tak stoi obok jako tekst, a pod wykresem jest pełna
   tabela — wykres nie jest jedynym nośnikiem informacji. */
/* `--dist-share` zarejestrowany jako liczba: bez tego przeglądarka nie umie
   go płynnie animować (nieopisany custom property zawsze przeskakuje
   skokowo), a licząc z niego `height` przez `calc()` w linii niżej — animacja
   `--dist-share` w JS (`rozwin()` w ranking.js) automatycznie animuje
   wysokość słupka, bez zmiany istniejącej skali `--dist-unit`. */
@property --dist-share {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.dist { --dist-unit: 5px; margin: clamp(24px, 4vw, 44px) 0 0; }
.dist__caption { margin: 0 0 var(--space-5); max-width: 64ch; font-size: 13px; line-height: 1.5; color: var(--rk-text-muted); }
.dist__track { display: flex; align-items: flex-end; gap: var(--space-2); min-height: 230px; border-bottom: 1px solid var(--rk-text); }
.dist__band { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: center; }
.dist__marker { order: -1; margin-bottom: var(--space-2); font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; color: var(--rk-text); }
.dist__share { margin-bottom: var(--space-2); font-size: 13px; color: var(--rk-text-muted); font-variant-numeric: tabular-nums; }
.dist__bar { display: block; height: calc(var(--dist-unit) * var(--dist-share, 0)); min-height: 4px; background: var(--rk-data-2); }
.dist__band--current .dist__share { color: var(--rk-text); font-weight: var(--fw-medium); }
.dist__band--current .dist__bar { background: var(--rk-data-5); }
.dist__axis { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.dist__label { flex: 1 1 0; min-width: 0; text-align: center; font-size: 13px; line-height: 1.4; color: var(--rk-text-muted); overflow-wrap: anywhere; }
.dist__label--current { color: var(--rk-text); font-weight: var(--fw-medium); }
.dist-details { margin-top: var(--space-6); border-top: 1px solid var(--rk-rule); }
.dist-details > summary { padding: var(--space-3) 0; font-size: var(--fs-small); }
.dist__table { width: 100%; max-width: 460px; border-collapse: collapse; margin-top: var(--space-4); font-size: 15px; }
.dist__table th[scope="col"] { padding: 0 0 var(--space-2); font-size: var(--fs-caption); letter-spacing: .07em; text-transform: uppercase; font-weight: var(--fw-medium); color: var(--rk-text-muted); border-bottom: 1px solid var(--rk-text); }
.dist__table th, .dist__table td { text-align: left; }
.dist__table tbody th, .dist__table tbody td { padding: 11px 0; border-bottom: 1px solid var(--rk-rule); font-weight: var(--fw-regular); }
.dist__table td { text-align: right; font-variant-numeric: tabular-nums; }
.dist__row--current th, .dist__row--current td { font-weight: var(--fw-medium); border-bottom-color: var(--rk-text); }
.dist__disclaimer { margin: var(--space-5) 0 0; max-width: 64ch; }

/* -- Karta wyniku: poza wynikiem ------------------------------------------- */

.card-favorable { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(24px, 4vw, 48px); }
.card-favorable__count { flex: 0 0 auto; min-width: 150px; padding-top: var(--space-3); border-top: 2px solid var(--rk-text); }
.card-favorable__number {
  margin: 0;
  font-size: clamp(56px, 8vw, 88px);
  line-height: .9;
  font-weight: var(--fw-medium);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--rk-text);
}
.card-favorable__count span { display: block; margin-top: var(--space-2); max-width: 14ch; font-size: 13px; line-height: 1.4; color: var(--rk-text-muted); }
.card-favorable > div:not(.card-favorable__count) { flex: 1 1 420px; min-width: 0; }
.card-favorable__eyebrow { margin: 0 0 var(--space-2); font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--rk-text-muted); }
.card-favorable h3 { margin: 0 0 18px; }

/* -- Karta wyniku: zakres -------------------------------------------------- */

.card-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--rk-rule);
  border: 1px solid var(--rk-rule);
}
.card-scope-grid > div { min-width: 0; padding: var(--space-6); background: var(--rk-bleed-bg, var(--paper)); }
.card-scope-grid h3 { margin: 0 0 var(--space-4); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: var(--fw-medium); }
.card-scope-grid > div:last-child h3 { color: var(--rk-text-muted); }
.card-scope-grid ul, .card-limit-box ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--space-2); }
.card-scope-grid li::marker { color: var(--rk-text); }
.card-scope-grid > div:last-child li { color: var(--rk-text-muted); }
.card-scope-grid > div:last-child li::marker { color: var(--rk-text-muted); }

.card-limit-box {
  margin-top: var(--space-6);
  padding: clamp(22px, 4vw, 36px) clamp(22px, 4vw, 40px);
  border-radius: 2px 2px 2px var(--radius-xl);
  background: var(--ink-900);
  color: var(--text-on-dark);
}
.card-limit-box h3 { margin: 0 0 18px; font-size: 20px; color: var(--text-on-dark); }
.card-limit-box ul { margin-bottom: 18px; }
.card-limit-box li { font-size: var(--fs-body); line-height: 1.6; color: var(--text-on-dark-muted); }
.card-limit-box li::marker { color: var(--paper); }
.card-limit-box p { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.6; color: var(--text-on-dark-muted); }

/* -- Karta wyniku: publiczne informacje ------------------------------------ */

.card-legal { margin: 0 0 var(--space-5); padding: 0; list-style: none; border-top: 1px solid var(--rk-text); }
.card-legal li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 18px 0;
  border-bottom: 1px solid var(--rk-rule);
}
.card-legal li > span { min-width: 0; font-size: 17px; line-height: 1.4; }
/* Pary tło/tekst zwalidowane osobno: każda daje ponad 8,8:1, a status niesie
   też słowo, więc kolor nie jest jedynym nośnikiem znaczenia (1.4.1). */
.card-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  padding: 4px var(--space-3);
  border: 1px solid var(--ink-500);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}
.card-status--detected { background: #e8f4ed; border-color: #31734d; color: #184b2c; }
.card-status--partial { background: #fbf0dc; border-color: #96611b; color: #603a08; }
.card-status--needs-review { background: #f7efd9; border-color: #876719; color: #573d05; border-style: dashed; }
.card-status--not-detected { background: #fbe9e7; border-color: #a53e31; color: #6a211a; }
.card-status--not-applicable { background: #edf2f7; border-color: #64748b; color: #334155; }

.card-legal-evidence { margin-top: var(--space-5); border-top: 1px solid var(--rk-rule); }
.card-legal-evidence > summary { padding: var(--space-3) 0; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.card-legal-evidence article { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--rk-rule); }
.card-legal-evidence article h3 { margin: 0 0 var(--space-2); font-size: var(--fs-body); }
.card-legal-evidence blockquote { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border-left: 2px solid var(--rk-rule); background: var(--paper); }
.card-legal-evidence blockquote p { margin: 0 0 var(--space-2); font-size: var(--fs-small); }
.card-legal-evidence blockquote footer { font-size: 12px; overflow-wrap: anywhere; }

/* -- Karta wyniku: opisy alternatywne (aneks) ------------------------------ */

.card-alt-semantic { margin-bottom: var(--space-7); }
.card-alt-semantic__item { padding: var(--space-5) 0; border-top: 1px solid var(--rk-rule); }
.card-alt-semantic__shot { display: block; width: auto; max-width: min(100%, 300px); max-height: 180px; margin-top: var(--space-3); object-fit: contain; border: 1px solid var(--rk-rule); }

/* -- Karta wyniku: co dalej (pasmo ciemne) --------------------------------- */

.card-retest { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); }
.card-retest__intro { flex: 1 1 100%; min-width: 0; }
.card-option__label {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: 5px 13px;
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--rk-text-muted);
}
.card-retest__intro h3 { margin: 0 0 var(--space-4); font-size: clamp(20px, 2.6vw, 24px); color: var(--rk-text); }
.card-retest__intro p { max-width: 56ch; font-size: clamp(17px, 2.2vw, 19px); line-height: 1.55; }
.card-retest__comparison { flex: 1 1 320px; min-width: 0; padding-top: var(--space-6); border-top: 1px solid var(--rk-line); }
.card-retest__comparison h4 { margin: 0 0 var(--space-4); font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--rk-text-muted); }
.card-retest__comparison ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--space-3); }
.card-retest__comparison li { font-size: 17px; line-height: 1.5; color: var(--rk-text); }
.card-retest__comparison li::marker { color: var(--rk-text-muted); }
.card-retest__action { flex: 1 1 320px; min-width: 0; padding-top: var(--space-6); border-top: 1px solid var(--rk-line); }
.card-retest__note { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.card-retest__note p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--rk-text-muted); }

/* -- Karta wyniku: aneks techniczny ---------------------------------------- */

.card-tech { border-top: 1px solid var(--rk-text); border-bottom: 1px solid var(--rk-rule); }
.card-tech > summary { padding: 22px 0; font-size: clamp(18px, 2.2vw, 20px); font-weight: var(--fw-medium); }
.card-tech__body { padding-bottom: var(--space-7); }
.card-tech__body > .card-note:first-child { margin-bottom: var(--space-6); }
.card-tech table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-5); font-size: 15px; }
.card-tech caption { padding-bottom: var(--space-3); text-align: left; font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--rk-text-muted); }
.card-tech th, .card-tech td { padding: var(--space-3) var(--space-4) var(--space-3) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rk-rule); }
.card-tech thead th { padding-top: 0; font-size: var(--fs-caption); letter-spacing: .06em; text-transform: uppercase; font-weight: var(--fw-medium); color: var(--rk-text-muted); border-bottom: 1px solid var(--rk-text); }
.card-tech tbody th { font-weight: var(--fw-medium); }
.card-tech tbody td { text-align: right; font-variant-numeric: tabular-nums; }
.card-tech tfoot th { padding: var(--space-4) 0 0; font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--rk-text-muted); border-bottom: 0; }
.card-table-wrap { max-width: 100%; margin-bottom: var(--space-7); overflow-x: auto; }
.card-table-wrap table { min-width: 540px; }
.card-shot { margin: var(--space-5) 0 0; }
.card-shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--rk-rule); border-radius: 2px 2px 2px 14px; }
.card-shot figcaption { margin-top: var(--space-2); font-size: 12.5px; color: var(--rk-text-muted); }

/* -- Karta wyniku: organizator przeglądu ----------------------------------
   Kto prowadzi Przegląd i co z wynikiem robi relacja handlowa z EAC. Sekcja
   zamykająca, bez numeru w szynie: to domknięcie dokumentu, a nie kolejny
   rozdział badania. */

.card-organizer-section { border-top: 1px solid var(--rk-rule); padding-block: clamp(48px, 7vw, 96px) clamp(44px, 6vw, 88px); }
.card-organizer {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.card-organizer__intro { min-width: 0; }
.card-organizer__eyebrow {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-caption);
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--rk-text-muted);
}
.card-organizer h2 {
  margin: 0 0 var(--space-6);
  max-width: 26ch;
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: var(--fw-medium);
  letter-spacing: -.025em;
  line-height: 1.1;
  text-wrap: pretty;
}
.card-organizer__name { font-family: var(--font-serif); font-weight: var(--fw-regular); }
.card-organizer__intro p { margin: 0 0 var(--space-4); max-width: 56ch; font-size: var(--fs-body-lg); line-height: 1.6; color: var(--rk-text-soft); }
.card-organizer__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin: var(--space-4) 0 0; }
.card-organizer__links a { font-size: var(--fs-body); font-weight: var(--fw-medium); }

.card-organizer__panel {
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-lg);
  background: var(--rk-panel);
}
.card-organizer__panel h3 { margin: 0 0 18px; font-size: 20px; line-height: 1.25; }
.card-organizer__panel p { margin: 0 0 var(--space-3); font-size: var(--fs-small); line-height: 1.65; color: var(--rk-text-soft); }
.card-organizer__rules { margin: var(--space-5) 0 0; padding: 0 0 0 1.1em; list-style: disc; border-top: 1px solid var(--rk-rule); }
.card-organizer__rules li { padding: var(--space-4) 0; border-bottom: 1px solid var(--rk-rule); font-size: var(--fs-small); line-height: 1.55; color: var(--rk-text-soft); }
.card-organizer__rules li:last-child { border-bottom: 0; }
.card-organizer__rules li::marker { color: var(--rk-text); }
.card-organizer__aside-note { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--rk-rule); }
.card-organizer__sign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--rk-text);
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--rk-text);
}
.card-organizer__sign .card-motif { flex: 0 0 auto; color: var(--rk-text-muted); }

/* -- Karta wyniku: stopka -------------------------------------------------- */

.card-outro { padding-block: clamp(36px, 6vw, 64px) clamp(44px, 7vw, 72px); }
.card-foot p { margin: 0 0 var(--space-3); max-width: 78ch; font-size: var(--fs-small); line-height: 1.65; color: var(--rk-text-muted); }
.card-foot p:last-child { margin: var(--space-3) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--rk-rule); font-size: var(--fs-caption); line-height: 1.6; }

/* -- Karta wyniku: kontrolki ----------------------------------------------- */

/* Przycisk karty: tło z najciemniejszego kroku tekstu, a napis w kolorze
   powierzchni pasma, więc działa na jasnym i na ciemnym. */
.card-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) clamp(20px, 3vw, 30px);
  border: 1px solid var(--rk-text);
  border-radius: var(--radius-pill);
  background: var(--rk-text);
  color: var(--rk-bleed-bg, var(--paper));
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.card-btn:hover { background: var(--rk-text-soft); border-color: var(--rk-text-soft); }
/* Wariant obrysowany. Obramowanie `--ink-500` daje 5,46:1 na najciemniejszej
   jasnej powierzchni: kontrolka jest rozpoznawalna także bez wypełnienia. */
.card-btn--ghost { background: transparent; border-color: var(--ink-500); color: var(--rk-text); }
.card-btn--ghost:hover { background: transparent; border-color: var(--rk-text); }
.card-btn--on-dark { background: var(--paper); border-color: var(--paper); color: var(--ink-900); }
.card-btn--on-dark:hover { background: var(--white); border-color: var(--white); }

/* Odnośnik w prozie nie może zostać bez koloru: przeglądarka daje mu wtedy
   domyślny niebieski, który na ciemnym paśmie schodzi do 1,9:1. */
.card-col a:not(.card-btn):not(.card-print__link), .rk-prose a, .rk-note a, .rk-rule a, .rk-tiles a, .rk-check a {
  color: inherit;
  text-decoration: none;
  /* Podkreślenie w kolorze tekstu, nie linią włosową: `--ink-300` daje 1,5:1
     względem kartki, więc jedyny sygnał „to jest odnośnik" był ledwo widoczny. */
  border-bottom: 1px solid currentColor;
  font-weight: var(--fw-semibold);
}
.card-col a:not(.card-btn):not(.card-print__link):hover, .rk-prose a:hover, .rk-note a:hover { color: var(--rk-text-muted); }
.card-nav a { border-bottom: 0; font-weight: inherit; }

/* Odnośnik, nie przycisk: prowadzi na osobny adres z układem A4, więc jest
   nawigacją. Wygląd pigułki zostaje. */
.card-print { flex: 0 0 auto; margin: 0; }
.card-print a, .card-print__badge {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px var(--space-4);
  border: 1px solid var(--ink-500);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-900);
  text-decoration: none;
}
.card-print a:hover { border-color: var(--ink-900); }
.card-print__badge { color: var(--ink-500); }

/* -- Karta wyniku: układy węższe ------------------------------------------- */

@media (max-width: 900px) {
  .card-nav__subject { flex: 1 1 100%; padding-left: 0; border-left: 0; }
  .card-nav__links { flex: 1 1 100%; overflow-x: auto; padding-bottom: 2px; }
  .card-col--split { grid-template-columns: 1fr; gap: var(--space-4); }
  .card-rail { flex-direction: row; align-items: baseline; gap: var(--space-3); }
  .card-organizer { grid-template-columns: minmax(0, 1fr); }
  .card-evidence-finding:has(.card-evidence-figure) { grid-template-columns: minmax(0, 1fr); }
  .card-evidence-finding:has(.card-evidence-figure) > .card-evidence-finding__body { grid-column: 1 / -1; grid-row: auto; }
  .card-evidence-finding > .card-evidence-figure { grid-column: 1 / -1; grid-row: auto; width: min(320px, 100%); }
  .card-retest__comparison, .card-retest__action { flex: 1 1 100%; }
}

@media (max-width: 600px) {
  .card-head__top, .card-archive { align-items: flex-start; flex-direction: column; }
  .card-print { align-self: flex-start; }
  .card-audited-pages strong { flex: 1 1 100%; }
  .card-legal li { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .card-status { min-width: 0; }
  .card-technical-meta__field { grid-template-columns: 1fr; gap: var(--space-1); }
  .dist__track { min-height: 160px; }
  .dist { --dist-unit: 3.4px; }
  .card-btn { width: 100%; justify-content: center; }
}


/* -- Strony krótkie: impressum, wyróżnieni, formularze, strona wycofana ----- */

.rk-narrow { max-width: 640px; margin: 0 auto; }
.rk-wide { max-width: 840px; margin: 0 auto; }
.rk-center { text-align: center; }

.inq-form, .inq-success, .feat-empty, .feat-badge {
  background: var(--rk-panel);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.feat-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.featured-case-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.featured-case { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: var(--space-5); border: 1px solid var(--rk-line); border-radius: var(--radius-md); background: var(--rk-panel); }
.featured-case .rk-kicker { margin-bottom: var(--space-3); }
.featured-case .rk-h3 { margin: 0 0 var(--space-3); }
.featured-case .rk-h3 a { color: inherit; }
.featured-case > p { margin: 0 0 var(--space-4); font-size: var(--fs-small); line-height: 1.6; }
.featured-case .rk-link { margin-top: auto; }
.featured-case__logo { display: block; width: auto; max-width: min(100%, 180px); height: 56px; margin: 0 0 var(--space-4); object-fit: contain; object-position: left center; }
.featured-case__url { display: block; max-width: 100%; margin: calc(-1 * var(--space-2)) 0 var(--space-4); overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; color: var(--rk-text-muted); }
.featured-case__highlight { padding-top: var(--space-3); border-top: 1px solid var(--rk-line); }
.featured-case__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.featured-case__tags li { padding: 3px 8px; border: 1px solid var(--rk-line); border-radius: var(--radius-pill); font-size: 12px; line-height: 1.4; }
.featured-case__disclosure { color: var(--rk-text-muted); }
.feat-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: var(--space-5) var(--space-5);
  background: var(--rk-panel);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius-md);
}
.feat-item strong { font-size: var(--fs-body); }
.feat-item span { font-size: 13px; color: var(--rk-text-muted); }
.feat-empty, .feat-badge p { font-size: 15px; line-height: 1.7; color: var(--rk-text-soft); }
.feat-badge h2 { margin: 0 0 var(--space-3); font-size: 18px; }
.rk-code {
  margin: 0;
  padding: var(--space-4);
  background: var(--ink-800);
  color: var(--paper);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
}
.rk-section--dark .rk-code { background: var(--ink-800); border: 1px solid var(--border-on-dark); }

.inq-form { display: grid; gap: var(--space-5); }
.inq-field { display: grid; gap: 6px; }
.inq-field label { font-size: 13px; font-weight: var(--fw-bold); }
.inq-field abbr { text-decoration: none; color: var(--rk-text-muted); }
.inq-field input, .inq-field textarea {
  font: inherit;
  width: 100%;
  padding: 11px 14px;
  /* `--ink-300` daje 1,51:1 na kartce, a obramowanie jest tu jedynym sygnałem,
     gdzie zaczyna się pole (SC 1.4.11 wymaga 3:1). `--ink-500` to 5,98:1. */
  border: 1px solid var(--ink-500);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.inq-field textarea { resize: vertical; line-height: 1.6; }
.inq-error { margin: 0; font-size: 12.5px; color: #8a1f1f; }
.inq-consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.6;
  font-weight: var(--fw-regular);
  color: var(--rk-text-soft);
}
.inq-consent input { width: auto; margin-top: 3px; }
.inq-submit {
  justify-self: start;
  font: inherit;
  font-weight: var(--fw-bold);
  padding: var(--space-3) 28px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: var(--paper);
  cursor: pointer;
}
.inq-submit:hover { opacity: .88; }
.inq-success { font-size: 15px; line-height: 1.7; }


/* -- Strony dokumentowe: metodologia, EAA, polityka prywatności ------------
   Układ dwukolumnowy ze spisem treści. Ciemne wtrącenia są tu kartami wewnątrz
   kolumny treści, nigdy pełnym tłem: `rk-bleed` w tym gridzie przemalowałby
   także spis treści. */
.method-hero { padding:64px 40px 56px; border-bottom:1px solid var(--ink-300); background:var(--paper); }
.method-hero__eyebrow { margin:0 0 14px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-500); }
.method-hero__title { margin:0 0 22px; max-width:880px; overflow-wrap:break-word; font-size:clamp(30px, 5.2vw, var(--fs-display-lg)); line-height:var(--lh-display-lg); letter-spacing:var(--ls-display-lg); font-weight:500; }
.method-hero__lead { margin:0; max-width:760px; font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); color:var(--ink-700); }
.method-alert { margin:36px 0 0; max-width:920px; border:1px solid var(--ink-900); border-radius:24px; background:var(--ink-900); color:var(--paper); padding:28px 32px; }
.method-alert h2 { margin:0 0 10px; font-size:22px; line-height:1.2; font-weight:600; color:var(--paper); }
.method-alert p { margin:0; font-size:15px; line-height:1.65; color:var(--text-on-dark-muted); }
.method-section { padding:56px 40px; border-bottom:1px solid var(--ink-200); }
.method-grid { display:grid; grid-template-columns:minmax(240px,0.42fr) minmax(0,1fr); gap:44px; align-items:start; }
.method-kicker { margin:0 0 10px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-500); }
.method-heading { margin:0; font-size:var(--fs-display-sm,24px); line-height:1.16; font-weight:500; letter-spacing:-0.02em; }
.method-copy { margin:0 0 18px; font-size:15px; line-height:1.75; color:var(--ink-700); }
.method-list { margin:0; padding:0; display:grid; gap:12px; }
.method-list li { list-style:none; border:1px solid var(--ink-200); border-radius:16px; background:var(--paper-2); padding:16px 18px; font-size:14px; line-height:1.55; color:var(--ink-700); }
.method-list strong { color:var(--ink-900); }
.method-data-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.method-data-card { border:1px solid var(--ink-200); border-radius:16px; background:var(--paper); padding:16px; }
.method-data-card strong { display:block; margin-bottom:6px; font-size:14px; color:var(--ink-900); }
.method-data-card span { display:block; font-size:13px; line-height:1.55; color:var(--ink-700); }
.method-steps { counter-reset:step; display:grid; gap:14px; margin:0; padding:0; }
.method-steps li { counter-increment:step; list-style:none; display:grid; grid-template-columns:42px minmax(0,1fr); gap:16px; align-items:start; border:1px solid var(--ink-200); border-radius:18px; background:var(--paper); padding:18px; }
.method-steps li::before { content:counter(step); width:42px; height:42px; border-radius:50%; background:var(--ink-900); color:var(--paper); display:flex; align-items:center; justify-content:center; font-weight:700; }
.method-steps h3 { margin:0 0 6px; font-size:15px; line-height:1.35; }
.method-steps p { margin:0; font-size:14px; line-height:1.6; color:var(--ink-700); }
.method-note { margin:22px 0 0; padding:18px 20px; border-left:4px solid var(--rank-gold); background:var(--paper-2); font-size:14px; line-height:1.65; color:var(--ink-700); }
.method-sample-card { margin-top:22px; border:1px solid var(--ink-900); border-radius:24px; background:var(--ink-900); color:var(--paper); padding:24px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; }
.method-sample-card h3 { margin:0 0 8px; color:var(--paper); font-size:20px; line-height:1.2; }
.method-sample-card p { margin:0; color:var(--text-on-dark-muted); font-size:14px; line-height:1.65; }
.method-sample-card a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:999px; padding:0 18px; background:var(--paper); color:var(--ink-900); text-decoration:none; font-size:14px; font-weight:800; white-space:nowrap; }
.method-cta { padding:48px 40px 0; display:flex; gap:12px; flex-wrap:wrap; }
.method-cta a { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:12px 18px; font-size:14px; font-weight:600; text-decoration:none; }
.method-cta__primary { background:var(--ink-900); color:var(--paper); border:1px solid var(--ink-900); }
.method-cta__secondary { background:var(--paper); color:var(--ink-900); border:1px solid var(--ink-300); }
.ranking-doc-layout { display:grid; grid-template-columns:minmax(230px,260px) minmax(0,1fr); gap:38px; align-items:stretch; max-width:1180px; margin:0 auto; padding:0 40px; }
.ranking-doc-sidebar { position:relative; align-self:stretch; min-height:100%; padding-top:28px; }
.ranking-doc-toc { position:sticky; top:84px; max-height:calc(100vh - 104px); overflow:auto; overscroll-behavior:contain; border:1px solid var(--ink-200); border-radius:18px; background:var(--paper); padding:16px; box-shadow:0 12px 36px rgb(10 10 10 / 0.045); }
.ranking-doc-toc__title { margin:0 0 12px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-500); font-weight:700; }
.ranking-doc-toc__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.ranking-doc-toc__link { display:block; position:relative; padding:9px 10px 9px 16px; border-radius:10px; color:var(--ink-500); text-decoration:none; font-size:12px; line-height:1.35; border:1px solid transparent; }
.ranking-doc-toc__link::before { content:""; position:absolute; left:6px; top:11px; bottom:11px; width:3px; border-radius:999px; background:transparent; }
.ranking-doc-toc__link:hover { color:var(--ink-900); background:var(--paper-2); }
.ranking-doc-toc__link[aria-current="true"] { color:var(--ink-900); background:var(--paper-2); border-color:var(--ink-200); font-weight:700; }
.ranking-doc-toc__link[aria-current="true"]::before { background:var(--rank-gold); }
.ranking-doc-content { min-width:0; }
.ranking-doc-content .method-section { padding-left:0; padding-right:0; }
.ranking-doc-content [id] { scroll-margin-top:96px; }

.eaa-hero { padding:64px 40px 56px; border-bottom:1px solid var(--ink-300); background:var(--paper); }
.eaa-hero__eyebrow { margin:0 0 14px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-500); }
.eaa-hero__title { margin:0 0 22px; max-width:840px; overflow-wrap:break-word; font-size:clamp(30px, 5.2vw, var(--fs-display-lg)); line-height:var(--lh-display-lg); letter-spacing:var(--ls-display-lg); font-weight:500; }
.eaa-hero__lead { margin:0; max-width:720px; font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); color:var(--ink-700); }
.eaa-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:36px 0 0; max-width:900px; }
.eaa-fact { border:1px solid var(--ink-300); border-radius:20px; background:var(--paper); padding:20px; }
.eaa-fact strong { display:block; margin:0 0 7px; font-size:24px; line-height:1.1; color:var(--ink-900); }
.eaa-fact span { display:block; font-size:13px; line-height:1.5; color:var(--ink-500); }
.eaa-section { padding:56px 40px; border-bottom:1px solid var(--ink-200); }
.eaa-section__grid { display:grid; grid-template-columns:minmax(240px,0.42fr) minmax(0,1fr); gap:44px; align-items:start; }
.eaa-kicker { margin:0 0 10px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-500); }
.eaa-heading { margin:0; font-size:var(--fs-display-sm,24px); line-height:1.16; font-weight:500; letter-spacing:-0.02em; }
.eaa-copy { margin:0 0 18px; font-size:15px; line-height:1.7; color:var(--ink-700); }
.eaa-list { margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.eaa-list li { list-style:none; border:1px solid var(--ink-200); border-radius:16px; background:var(--paper-2); padding:16px 18px; font-size:14px; line-height:1.5; color:var(--ink-700); }
.eaa-penalty { background:var(--ink-900); color:var(--paper); border-radius:28px; padding:32px; }
.eaa-penalty .eaa-copy { color:var(--text-on-dark-muted); }
.eaa-penalty strong { color:var(--paper); }
.eaa-note { margin:20px 0 0; padding:16px 18px; border:1px solid var(--ink-300); border-radius:16px; font-size:13px; line-height:1.6; color:var(--ink-500); background:var(--paper); }
.eaa-cta { margin:0; padding:48px 40px 0; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.eaa-cta a { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:12px 18px; font-size:14px; font-weight:600; text-decoration:none; }
.eaa-cta__primary { background:var(--ink-900); color:var(--paper); border:1px solid var(--ink-900); }
.eaa-cta__secondary { background:var(--paper); color:var(--ink-900); border:1px solid var(--ink-300); }

.priv-wrap { max-width:720px; margin:0 auto; padding:72px 40px 40px; }
    .priv-wrap h1 { font-family:var(--font-serif); font-weight:500; font-size:clamp(30px, 4.5vw, 40px); margin:0 0 14px; }
    .priv-wrap h2 { font-size:19px; margin:36px 0 10px; }
    .priv-wrap p, .priv-wrap li { font-size:14.5px; line-height:1.75; color:var(--ink-700); }
    .priv-wrap ul { padding-left:22px; margin:10px 0; }
    .priv-updated { font-size:13px; color:var(--ink-500); margin:0 0 28px; }

@media (max-width: 900px) {
  .ranking-doc-layout { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: var(--space-6); padding: 0 28px; }
  .eaa-list, .method-data-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .method-hero, .method-section, .method-cta,
  .eaa-hero, .eaa-section, .eaa-cta,
  .priv-wrap { padding-left: var(--rk-gutter-sm); padding-right: var(--rk-gutter-sm); }
  .ranking-doc-layout { display: block; padding: 0; }
  .ranking-doc-sidebar { display: none; }
  .ranking-doc-content .method-section,
  .ranking-doc-content .eaa-section { padding-left: var(--rk-gutter-sm); padding-right: var(--rk-gutter-sm); }
  .method-sample-card { grid-template-columns: 1fr; }
  .method-sample-card a { width: 100%; }
  /* Siatki wielokolumnowe zwijamy do jednej kolumny: przy 375 px ich minimalne
     szerokości wypychały treść poza ekran. */
  .method-grid, .method-data-grid, .eaa-facts, .eaa-section__grid, .eaa-list,
  .card-technical-finding { grid-template-columns: 1fr; }
  .card-gate__panel { padding: 28px 22px; border-radius: 20px; }
  .card-gate__form { padding: var(--space-4); border-radius: 14px; }
  .card-gate__brand { margin-bottom: var(--space-6); }
  .method-steps li { grid-template-columns: 1fr; gap: var(--space-2); }
  /* Tabela techniczna przewija się w swoim kontenerze, a nie całą stroną. */
  .card-tech table, .rk-table { display: block; overflow-x: auto; white-space: nowrap; }
}


/* == 11 Breakpointy ======================================================== */

@media (max-width: 900px) {
  .rk-head--split { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
  .rk-grid--2, .rk-grid--3 { grid-template-columns: 1fr; }
  .featured-case-list { grid-template-columns: 1fr; }
  .ranking-shell-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .rk-statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-medians { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-bars__row { grid-template-columns: minmax(120px, 12rem) minmax(0, 1fr) 3.5rem; }
  .rk-split, .rk-split--rail, .rk-split--doc { grid-template-columns: 1fr; gap: var(--space-6); }
  .rk-rail-head { position: static; }
  .rk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-steps li { min-height: 0; }
  .rk-teaser { grid-template-columns: 1fr; gap: var(--space-6); }
  .rk-phero { padding-block: var(--space-8); }
  .rk-phero__split, .rk-split--scope, .rk-split--persite { grid-template-columns: 1fr; gap: var(--space-6); }
  .rk-facts { grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-7); }
  .rk-scope__row:nth-child(2) { padding-left: 16px; }
  .rk-scope__row:nth-child(3) { padding-left: 32px; }
  .rk-scope__row:nth-child(4) { padding-left: 48px; }
  .rk-scope__row:nth-child(5) { padding-left: 64px; }
  .rk-scope__note { text-align: start; }
  .rk-rule { grid-template-columns: 1fr; gap: var(--space-3); }
  .rk-sector { grid-template-columns: 1fr; gap: var(--space-4); }
  .rk-sector__side { text-align: start; }
  .rk-meters--big { grid-template-columns: 1fr; gap: var(--space-6); }
  .rk-bars__list--2col { grid-auto-flow: row; grid-template-rows: none; }
  .rk-deflist, .rk-imprint { grid-template-columns: 1fr; }
  .rk-deflist dt { padding-bottom: var(--space-2); }
  .rk-deflist dd { padding-top: 0; border-top: 0; }
  .rk-deflist dt:last-of-type { border-bottom: 0; }
  .rk-imprint__row { grid-template-columns: 1fr; gap: var(--space-2); }
  .rk-belief--strong { padding-block: var(--space-9); }
  .rk-buckets--tall .rk-buckets__track { block-size: 200px; }
  .ranking-shell-nav__brand-context--full { display: none; }
  .ranking-shell-nav__brand-context--short { display: inline; }
}

@media (max-width: 600px) {
  :root { --rk-section-y: var(--rk-section-y-sm); --rk-gutter: var(--rk-gutter-sm); }
  .ranking-shell-nav {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--rk-gutter-sm);
  }
  .ranking-shell-nav__brand { width: 100%; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  .ranking-shell-nav__brand-context { padding-left: var(--space-3); }
  .ranking-shell-nav__links { width: 100%; justify-content: flex-start; gap: var(--space-3) var(--space-4); flex-wrap: wrap; }
  .rk-mailto { font-size: clamp(1.15rem, 5.4vw, var(--fs-title)); }
  .ranking-nav-separator { display: none; }
  .ranking-shell-footer { padding: var(--space-7) var(--rk-gutter-sm) 38px; }
  .rk-statrow, .rk-statrow--2, .rk-medians { grid-template-columns: 1fr; gap: var(--space-5); }
  .rk-statrow--flow .rk-stat { padding-right: 0; }
  .rk-statrow--flow .rk-stat + .rk-stat::before { display: none; }
  .rk-bars__row { grid-template-columns: minmax(0, 1fr) 3.5rem; }
  .rk-bars__track { grid-column: 1 / -1; grid-row: 2; }
  .rk-plot { padding: var(--space-5); }
  .rk-plot--flat { padding: 0; }
  .rk-buckets__track { block-size: 130px; }
  .rk-buckets--tall .rk-buckets__track { block-size: 160px; }
  .rk-steps { grid-template-columns: 1fr; }
  .card-issue-metrics { grid-template-columns: 1fr; }
  .rk-scope__row { grid-template-columns: 1fr; gap: var(--space-1); }
  .rk-scope__row:nth-child(n) { padding-left: 0; }
  .rk-bars__list--ruled .rk-bars__track { grid-column: 1 / -1; grid-row: 2; }
}


/* == 12 Ruch i wysoki kontrast ============================================= */

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