/* ============================================================
   MOCKUP — propozycja przebudowy
   Kierunek: świat dokumentów urzędowych. Numery spraw, kody CPV
   i NIP-y mają własną typografię (monospace w ramce, jak pieczątka),
   bo w tym świecie liczba jest dowodem, nie ozdobą.
   ============================================================ */

:root {
  /* Atrament, papier, pieczątka — z materiałów tematu, nie z palety ogólnej */
  --atrament: #101f33;
  --atrament-2: #1d3a57;
  --papier: #f2f4f3;
  --papier-2: #ffffff;
  --piecz: #c2410c;         /* ceglany — stempel, wyróżnienie */
  --morze: #0f766e;         /* morski — druga seria */
  --fiolet: #5b21b6;
  --bursztyn: #b45309;
  --lazur: #0e7490;
  --sygnal: #ffb627;        /* liczby na ciemnym tle */

  --tekst: #0f1922;
  --tekst-2: #41505e;
  --tekst-3: #63717e;         /* kontrast 4,8:1 na białym */
  --linia: #dde3e2;
  --linia-2: #c3ccca;

  --r: .75rem;
  --r-l: 1.25rem;
  --cien: 0 1px 2px rgba(16,31,51,.04), 0 8px 24px rgba(16,31,51,.06);
  --cien-l: 0 4px 8px rgba(16,31,51,.05), 0 24px 48px rgba(16,31,51,.12);
  --oprawa: 78rem;

  /* Typografia: bez zewnętrznych plików — serwis jest statyczny i nie
     pobiera niczego z sieci. Charakter budujemy kontrastem rozmiarów
     i konsekwentnym monospace dla wszystkiego, co jest danymi. */
  --tekstowy: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --danymi: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--papier); color: var(--tekst);
  font: 400 1.02rem/1.62 var(--tekstowy);
  -webkit-font-smoothing: antialiased;
}
/* Odnośnik dla klawiatury: schowany poza ekranem, pokazuje się dopiero
   po przejściu do niego tabulatorem. Bez tej reguły wisiał w lewym górnym
   rogu na każdej stronie. */
.pomin-menu {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--atrament); color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 .4rem 0; text-decoration: none;
}
.pomin-menu:focus { left: 0; }

.oprawa { max-width: var(--oprawa); margin: 0 auto; padding: 0 1.4rem; }
a { color: var(--atrament-2); }

/* --- SYGNATURA: dane jako stempel ---------------------------------- */
.stempel {
  font: 600 .78rem/1 var(--danymi); letter-spacing: .04em;
  border: 1.5px solid currentColor; border-radius: .3rem;
  padding: .28rem .5rem; display: inline-block; white-space: nowrap;
  text-transform: uppercase;
}
.stempel.piecz { color: var(--piecz); }
.stempel.morze { color: var(--morze); }
.stempel.jasny { color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.35); }

/* Liczby zawsze monospace z równą szerokością cyfr — w kolumnie muszą
   się zgadzać co do znaku, jak w zestawieniu księgowym. */
/* Cyfry: równa szerokość, ale BEZ przekreślonego zera. Większość krojów
   monospace przekreśla zero, co przy dużym stopniu wygląda na błąd druku.
   „lining-nums” wymusza wersaliki cyfr, „zero 0” gasi przekreślenie tam,
   gdzie krój daje wybór. */
/* Liczby: krój TEKSTOWY z równą szerokością cyfr.
   Monospace odpada — większość krojów przekreśla w nim zero, a
   „font-feature-settings: zero 0” działa tylko w tych nielicznych, które
   dają wybór. Skoro nie da się tego zagwarantować, nie używamy monospace
   do liczb w ogóle. Zostaje przy numerach spraw i kodach CPV w stemplach,
   gdzie zero pojawia się rzadko i w małym stopniu. */
.liczba, .ogl-wartosc .duza, .kafel-duza, .metryka-liczby .w,
.czolo-liczby strong, .zam-kwota, .rok-wykres .v, .rok-wykres .r,
.ranking .ile, .ranking .m, .dane td.l, .liczby strong,
.skrot-ile, .zamowienia .liczba {
  font-family: var(--tekstowy);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.01em;
}

/* --- PASEK ---------------------------------------------------------- */
.pasek {
  position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--linia);
}
.pasek-rzad { display: flex; align-items: center; gap: 1.2rem;
  padding: .7rem 1.4rem; max-width: var(--oprawa); margin: 0 auto; }
.marka { display: flex; align-items: baseline; gap: .5rem;
  text-decoration: none; color: var(--tekst); flex: none; }
.marka .znak { width: 2.1rem; height: 2.1rem; flex: none; align-self: center;
  border-radius: .5rem; }
.marka b { font-size: 1.02rem; letter-spacing: -.01em; }
.marka small { display: block; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tekst-3); font-weight: 500; }

/* Menu pogrupowane po pytaniach, nie po strukturze bazy. Dziewięć pozycji
   w rzędzie to lista, nie nawigacja. */
.menu { display: flex; gap: .15rem; margin-left: auto; }
.menu > li { position: relative; list-style: none; }
.menu > li > a, .menu > li > button {
  font: 500 .93rem/1 var(--tekstowy); color: var(--tekst-2);
  background: none; border: 0; cursor: pointer; padding: .55rem .7rem;
  border-radius: .4rem; text-decoration: none; display: flex; gap: .3rem;
  align-items: center;
}
.menu > li > a:hover, .menu > li > button:hover,
.menu > li:focus-within > button { background: var(--papier); color: var(--atrament); }
.menu .strzalka { font-size: .6rem; opacity: .5; }
.podmenu {
  position: absolute; top: calc(100% + .35rem); left: 0; min-width: 15rem;
  background: var(--papier-2); border: 1px solid var(--linia);
  border-radius: var(--r); box-shadow: var(--cien-l); padding: .4rem;
  list-style: none; margin: 0; opacity: 0; visibility: hidden;
  transform: translateY(-4px); transition: opacity .14s, transform .14s, visibility .14s;
}
.menu > li:hover .podmenu, .menu > li:focus-within .podmenu {
  opacity: 1; visibility: visible; transform: none;
}
.podmenu a { display: block; padding: .5rem .6rem; border-radius: .4rem;
  text-decoration: none; color: var(--tekst); font-size: .92rem; }
.podmenu a:hover { background: var(--papier); }
.podmenu small { display: block; color: var(--tekst-3); font-size: .78rem; }

.szukaj-pasek {
  display: flex; align-items: center; gap: .4rem; background: var(--papier);
  border: 1px solid var(--linia); border-radius: 2rem; padding: .35rem .8rem;
  min-width: 13rem;
}
.szukaj-pasek input {
  border: 0; background: none; font: inherit; font-size: .9rem;
  width: 100%; color: var(--tekst);
}
/* Obrys przenosimy z pola na całą oprawę — pole jest w niej wtopione, więc
   obrys wokół samego pola wyglądałby na przypadkowy. Nie GASIMY go jednak,
   tylko przesuwamy: dla klawiatury to jedyny ślad, gdzie się jest. */
.szukaj-pasek input:focus-visible { outline: none; }
.szukaj-pasek:focus-within {
  border-color: var(--atrament-2); background: #fff;
  outline: 2.5px solid var(--piecz); outline-offset: 2px;
}

@media (max-width: 62rem) {
  .menu, .szukaj-pasek { display: none; }
}

/* --- WSPÓLNE ELEMENTY ---------------------------------------------- */
.nadtyt {
  font: 600 .7rem/1 var(--danymi); letter-spacing: .16em;
  text-transform: uppercase; color: var(--piecz); margin: 0 0 .7rem;
}
h2 { font-size: 1.45rem; letter-spacing: -.02em; margin: 2.6rem 0 1rem; }
.drobne { font-size: .86rem; color: var(--tekst-3); }

.stopka { border-top: 1px solid var(--linia); background: var(--papier-2);
  margin-top: 4rem; padding: 2.4rem 0 1.6rem; font-size: .92rem; }
/* Szablon używa „stopka-kolumny”, mockup „stopka-kol” — obsługujemy obie
   nazwy, bo inaczej kolumny nie powstają i wszystko idzie jedną kolumną. */
.stopka-kolumny, .stopka-kol {
  display: grid; gap: 1.6rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: 1.6rem;
}
.stopka h2, .stopka h3 {
  font: 600 .72rem/1 var(--danymi); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tekst-3); margin: 0 0 .6rem;
}
.stopka ul { list-style: none; padding: 0; margin: 0; }
.stopka li { margin-bottom: .35rem; }
.stopka a { color: var(--tekst-2); text-decoration: none; }
.stopka a:hover { color: var(--atrament); text-decoration: underline; }
.stopka p { margin: .35rem 0; max-width: var(--tekstowa); }
.stopka .drobne { color: var(--tekst-3); }
/* Rodzina serwisów: odnośniki oddzielone kropką, nie sklejone. */
.rodzina { border-top: 1px solid var(--linia); padding-top: 1.2rem;
  margin-top: 1.2rem; }
.rodzina .lista { display: flex; flex-wrap: wrap; gap: .35rem .8rem;
  font-size: .9rem; margin: .6rem 0; align-items: baseline; }
.rodzina .lista a { color: var(--tekst-2); }
.stopka-kol { display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem,1fr)); }
.stopka h3 { font: 600 .72rem/1 var(--danymi); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tekst-3); margin: 0 0 .6rem; }
.stopka ul { list-style: none; padding: 0; margin: 0; }
.stopka li { margin-bottom: .35rem; }
.stopka a { color: var(--tekst-2); text-decoration: none; }
.stopka a:hover { color: var(--atrament); text-decoration: underline; }

:focus-visible { outline: 2.5px solid var(--piecz); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================
   Zmienne pod dotychczasowe nazwy. Stary arkusz i szablony używają
   --marka, --tlo-karty i tak dalej; mockup wprowadził nazwy wzięte
   z materiałów tematu (--atrament, --papier, --piecz). Zamiast
   przepisywać kilkaset odwołań, mapujemy jedno na drugie.
   ============================================================ */
:root {
  --marka: var(--atrament-2);
  --marka-ciemna: var(--atrament);
  --marka-jasna: #e8eef2;
  --marka-noc: var(--atrament);
  --akcent: var(--piecz);
  --akcent-jasny: #fdf0e7;
  --zielen: var(--morze);
  --zielen-jasna: #e6f4f1;
  --tlo: var(--papier);
  --tlo-karty: var(--papier-2);
  --tekst-drugi: var(--tekst-2);
  --tekst-trzeci: var(--tekst-3);
  --linia-mocna: var(--linia-2);
  --linia-kontrolki: #8d99a4;
  --uwaga-tlo: #fdf8ec;
  --uwaga-linia: #d9bd7a;
  --zaokr: var(--r);
  --zaokr-duzy: var(--r-l);
  --cien: 0 1px 2px rgba(16,31,51,.04), 0 8px 24px rgba(16,31,51,.06);
  --cien-mocny: 0 4px 8px rgba(16,31,51,.05), 0 24px 48px rgba(16,31,51,.12);
  --tekstowa: 44rem;

  --seria-1: var(--atrament-2);
  --seria-2: var(--piecz);
  --seria-3: var(--morze);
  --seria-4: var(--fiolet);
  --seria-5: var(--bursztyn);
  --seria-6: var(--lazur);
  --seria-7: #6f7780;
  --zywy-1: #ff6b6b; --zywy-2: var(--sygnal); --zywy-3: #1dd1a1;
  --zywy-4: var(--fiolet); --zywy-5: #00d2d3;
}

/* Cyfry na ciemnym tle: krój tekstowy z równą szerokością cyfr zamiast
   monospace. Powód praktyczny — większość krojów monospace przekreśla
   zero, co przy dużym stopniu wygląda na błąd druku. */
.metryka-liczby .w, .czolo-liczby strong, .kafel.ciemny .kafel-duza {
  font-family: var(--tekstowy);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "zero" 0;
  font-weight: 700;
}

/* ============ STRONA GŁÓWNA ============ */

/* Czoło: nie „wielka liczba z gradientem”, tylko WYCINEK OGŁOSZENIA.
   Najbardziej charakterystyczna rzecz w tym świecie to sam dokument —
   więc otwieramy stroną tym, co czytelnik zobaczyłby w oryginale,
   i pokazujemy, co z tego wyciągamy. */
.czolo { padding: 3.2rem 0 1rem; }
.czolo-uklad { display: grid; gap: 3rem; grid-template-columns: 1.05fr .95fr;
  align-items: center; }
@media (max-width: 62rem) { .czolo-uklad { grid-template-columns: 1fr; gap: 2rem; } }

.czolo h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.08;
  letter-spacing: -.035em; margin: 0 0 1.1rem; font-weight: 700;
}
.czolo h1 em {
  font-style: normal; color: var(--piecz);
  /* Podkreślenie jak zaznaczenie w dokumencie — nie gradient, nie cień. */
  box-shadow: inset 0 -.42em 0 rgba(194,65,12,.13);
}
.czolo-lead { font-size: 1.12rem; color: var(--tekst-2); margin: 0 0 1.6rem;
  max-width: 34rem; }
.czolo-akcje { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.guzik {
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
  font: 600 .96rem/1 var(--tekstowy); padding: .78rem 1.3rem;
  border-radius: 2rem; transition: transform .14s, box-shadow .14s;
}
.guzik.glowny { background: var(--atrament); color: #fff; box-shadow: var(--cien); }
.guzik.glowny:hover { transform: translateY(-2px); box-shadow: var(--cien-l); }
.guzik.drugi { background: var(--papier-2); color: var(--atrament);
  border: 1.5px solid var(--linia-2); }
.guzik.drugi:hover { border-color: var(--atrament); }
.czolo-zrodla { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .84rem;
  color: var(--tekst-3); }
.czolo-zrodla b { color: var(--tekst-2); font-weight: 600; }

/* Wycinek ogłoszenia — sygnatura strony */
.ogloszenie {
  background: var(--papier-2); border: 1px solid var(--linia);
  border-radius: var(--r-l); box-shadow: var(--cien-l); overflow: hidden;
  position: relative;
}
.ogloszenie::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 5px;
  background: linear-gradient(90deg, var(--atrament) 0 34%, var(--piecz) 34% 62%,
              var(--morze) 62% 82%, var(--sygnal) 82% 100%);
}
.ogl-glowa {
  padding: 1.5rem 1.5rem 1rem; border-bottom: 1px dashed var(--linia-2);
  display: flex; justify-content: space-between; gap: 1rem; align-items: start;
}
.ogl-glowa h3 { margin: .5rem 0 0; font-size: 1.06rem; line-height: 1.4;
  max-width: 24rem; }
.ogl-tresc { padding: 1.2rem 1.5rem 1.5rem; }
.ogl-wiersz {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--linia); align-items: baseline;
}
.ogl-wiersz:last-child { border: 0; }
.ogl-etykieta { font: 600 .68rem/1.3 var(--danymi); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tekst-3); }
.ogl-wartosc { font-size: .96rem; }
.ogl-wartosc .duza { font: 700 1.5rem/1 var(--danymi);
  font-variant-numeric: tabular-nums; color: var(--piecz); letter-spacing: -.03em; }
.ogl-wartosc a { color: var(--atrament-2); text-decoration-thickness: 1px;
  text-underline-offset: 2px; }

/* Pasek rozpiętości ofert — motyw przewodni serwisu w miniaturze */
.rozpietosc { margin-top: .5rem; }
.rozpietosc-tor { height: .55rem; border-radius: 1rem; background: var(--linia);
  position: relative; overflow: hidden; }
.rozpietosc-tor i { position: absolute; inset: 0 auto 0 0; border-radius: 1rem;
  background: linear-gradient(90deg, var(--morze), var(--sygnal)); }
.rozpietosc-opis { display: flex; justify-content: space-between;
  font: 500 .74rem/1 var(--danymi); color: var(--tekst-3); margin-top: .35rem; }

/* --- SIATKA KAFLI (bento) --- */
.bento {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;
  margin: 1rem 0 0;
}
.kafel {
  background: var(--papier-2); border: 1px solid var(--linia);
  border-radius: var(--r-l); padding: 1.4rem; text-decoration: none;
  color: var(--tekst); display: flex; flex-direction: column;
  transition: transform .16s, box-shadow .16s, border-color .16s;
  position: relative; overflow: hidden;
}
.kafel:hover { transform: translateY(-3px); box-shadow: var(--cien-l);
  border-color: var(--linia-2); }
.kafel .kafel-nad { font: 600 .66rem/1 var(--danymi); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tekst-3); margin-bottom: .7rem; }
.kafel .kafel-duza {
  font: 700 clamp(2rem, 3.6vw, 2.9rem)/1 var(--danymi);
  font-variant-numeric: tabular-nums; letter-spacing: -.045em;
  margin-bottom: .3rem; color: var(--atrament);
}
.kafel h3 { margin: 0 0 .4rem; font-size: 1.02rem; line-height: 1.35; }
.kafel p { margin: 0; font-size: .89rem; color: var(--tekst-2); line-height: 1.5; }
.kafel .kafel-dokad { margin-top: auto; padding-top: .9rem;
  font: 600 .84rem/1 var(--tekstowy); color: var(--piecz); }

.k-szer4 { grid-column: span 4; }
.k-szer3 { grid-column: span 3; }
.k-szer2 { grid-column: span 2; }
@media (max-width: 62rem) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .k-szer4, .k-szer3 { grid-column: span 2; }
  .k-szer2 { grid-column: span 1; }
}
@media (max-width: 34rem) {
  .bento { grid-template-columns: 1fr; }
  .k-szer4, .k-szer3, .k-szer2 { grid-column: span 1; }
}

/* Kafel ciemny — jeden na siatkę, żeby przyciągał wzrok do rzeczy,
   której nie ma nigdzie indziej */
.kafel.ciemny { background: var(--atrament); border-color: var(--atrament);
  color: #fff; }
.kafel.ciemny .kafel-nad { color: var(--sygnal); }
.kafel.ciemny .kafel-duza { color: var(--sygnal); }
.kafel.ciemny p { color: rgba(255,255,255,.82); }
.kafel.ciemny .kafel-dokad { color: var(--sygnal); }
.kafel.ciemny::after {
  content: ""; position: absolute; right: -3rem; bottom: -4rem;
  width: 12rem; height: 12rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,182,39,.16), transparent 70%);
}

/* Miniwykres w kaflu */
.mini { display: flex; align-items: flex-end; gap: 3px; height: 2.6rem;
  margin-top: .8rem; }
.mini i { flex: 1; background: var(--linia-2); border-radius: 2px 2px 0 0;
  transition: background .16s; }
.kafel:hover .mini i { background: var(--piecz); }
.kafel.ciemny .mini i { background: rgba(255,182,39,.35); }
.kafel.ciemny:hover .mini i { background: var(--sygnal); }

/* --- DROGI PRZEZ SERWIS --- */
.drogi { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 56rem) { .drogi { grid-template-columns: 1fr; } }
.droga {
  border-radius: var(--r-l); padding: 1.5rem; text-decoration: none;
  color: #fff; display: flex; flex-direction: column; gap: .5rem;
  transition: transform .16s, box-shadow .16s; box-shadow: var(--cien);
  min-height: 11rem;
}
.droga:hover { transform: translateY(-4px); box-shadow: var(--cien-l); }
.droga .pytanie { font-size: 1.16rem; font-weight: 650; line-height: 1.3; }
.droga p { margin: 0; font-size: .9rem; color: rgba(255,255,255,.85); }
.droga .dokad { margin-top: auto; font: 600 .85rem/1 var(--tekstowy); }
.d1 { background: linear-gradient(155deg, #1d3a57, #101f33); }
.d2 { background: linear-gradient(155deg, #0f766e, #134e4a); }
.d3 { background: linear-gradient(155deg, #c2410c, #7c2d12); }

/* --- PASEK PROPORCJI (dwa rynki) --- */
.dwa-rynki-pasek { margin: 1rem 0 .8rem; }
.drp-tor { display: flex; height: 3.2rem; border-radius: var(--r);
  overflow: hidden; box-shadow: var(--cien); }
.drp-tor > div { display: flex; align-items: center; padding: 0 1rem;
  color: #fff; font: 600 .9rem/1 var(--tekstowy); }
.drp-ue { background: var(--atrament); }
.drp-kraj { background: var(--morze); }
.drp-opis { display: flex; justify-content: space-between; margin-top: .5rem;
  font-size: .86rem; color: var(--tekst-2); flex-wrap: wrap; gap: .5rem; }

/* ============ KARTA PODMIOTU ============ */

.okruszki { padding: 1rem 0 0; font-size: .84rem; color: var(--tekst-3); }
.okruszki ol { list-style: none; display: flex; gap: .4rem; padding: 0; margin: 0;
  flex-wrap: wrap; }
.okruszki li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.okruszki a { color: var(--tekst-2); text-decoration: none; }
.okruszki a:hover { text-decoration: underline; }

/* Nagłówek: tożsamość podmiotu jak metryczka w rejestrze */
.metryka {
  background: var(--atrament); color: #fff; border-radius: var(--r-l);
  padding: 1.8rem 2rem; margin: .8rem 0 1.6rem; position: relative;
  overflow: hidden;
}
.metryka::after {
  content: ""; position: absolute; right: -5rem; top: -6rem;
  width: 20rem; height: 20rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,182,39,.12), transparent 68%);
}
.metryka-gora { display: flex; gap: 1rem; align-items: start; flex-wrap: wrap;
  position: relative; }
.metryka h1 { margin: .5rem 0 .3rem; font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  letter-spacing: -.03em; line-height: 1.15; flex: 1 1 20rem; }
.metryka .rola { font: 600 .68rem/1 var(--danymi); letter-spacing: .16em;
  text-transform: uppercase; color: var(--sygnal); }
.metryka .adres { color: rgba(255,255,255,.75); font-size: .92rem; margin: 0; }
.metryka-stemple { display: flex; gap: .5rem; flex-wrap: wrap; margin: .9rem 0 0;
  position: relative; }

/* Liczby w metryce — duże, monospace, z podpisami pod spodem */
.metryka-liczby {
  display: grid; gap: 1.2rem 2rem; margin: 1.5rem 0 0; position: relative;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.16);
}
.metryka-liczby div span { display: block; }
.metryka-liczby .w {
  font: 700 1.9rem/1 var(--danymi); font-variant-numeric: tabular-nums;
  letter-spacing: -.04em; color: var(--sygnal);
}
.metryka-liczby .o { font-size: .82rem; color: rgba(255,255,255,.75);
  margin-top: .25rem; }

/* Układ dwukolumnowy: treść i przyklejona nawigacja boczna */
.karta-uklad { display: grid; grid-template-columns: 1fr 15rem; gap: 2.4rem;
  align-items: start; }
@media (max-width: 68rem) { .karta-uklad { grid-template-columns: 1fr; } }

.bok { position: sticky; top: 5rem; }
@media (max-width: 68rem) { .bok { position: static; } }
.bok h3 { font: 600 .68rem/1 var(--danymi); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tekst-3); margin: 0 0 .7rem; }
.bok-spis { list-style: none; padding: 0; margin: 0 0 1.6rem;
  border-left: 2px solid var(--linia); }
.bok-spis a {
  display: block; padding: .42rem .9rem; text-decoration: none;
  color: var(--tekst-2); font-size: .92rem; margin-left: -2px;
  border-left: 2px solid transparent;
}
.bok-spis a:hover { color: var(--atrament); border-left-color: var(--linia-2); }
.bok-spis a.tu { color: var(--piecz); border-left-color: var(--piecz);
  font-weight: 600; }
.bok-karta { background: var(--papier-2); border: 1px solid var(--linia);
  border-radius: var(--r); padding: 1rem; font-size: .88rem; }
.bok-karta p { margin: .4rem 0; color: var(--tekst-2); }

/* Podsumowanie w zdaniach */
.skrot { display: grid; gap: .7rem; margin: 0 0 2rem; }
.skrot p {
  margin: 0; padding-left: 1.1rem; border-left: 3px solid var(--linia-2);
  font-size: 1.02rem; line-height: 1.55;
}
.skrot p:first-child { border-left-color: var(--piecz); font-size: 1.1rem; }
.skrot strong { font-weight: 700; }

/* Sekcje z numerem — tu numeracja NIESIE informację: to kolejne warstwy
   danych o podmiocie, od najogólniejszej do najbardziej szczegółowej */
.sekcja { margin: 2.6rem 0; scroll-margin-top: 5rem; }
.sekcja > h2 {
  display: flex; align-items: baseline; gap: .7rem; margin: 0 0 .3rem;
  font-size: 1.32rem; letter-spacing: -.02em;
}
.sekcja > h2 .nr {
  font: 700 .8rem/1 var(--danymi); color: var(--piecz);
  border: 1.5px solid var(--piecz); border-radius: .3rem; padding: .25rem .4rem;
  flex: none;
}
.sekcja > .wprowadzenie { color: var(--tekst-2); font-size: .95rem;
  margin: 0 0 1.1rem; max-width: 44rem; }

/* Karty zamówień */
.zamowienia { list-style: none; padding: 0; margin: 0; display: grid;
  gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
.zam {
  background: var(--papier-2); border: 1px solid var(--linia);
  border-radius: var(--r); padding: 1.1rem 1.2rem; display: flex;
  flex-direction: column; gap: .7rem;
  transition: transform .16s, box-shadow .16s;
}
.zam:hover { transform: translateY(-3px); box-shadow: var(--cien-l); }
.zam-gora { display: flex; justify-content: space-between; gap: .6rem;
  align-items: start; }
.zam h4 { margin: 0; font-size: .98rem; line-height: 1.4; font-weight: 600; }
.zam h4 a { color: var(--tekst); text-decoration: none; }
.zam h4 a:hover { color: var(--atrament-2); text-decoration: underline; }
.zam-dol { display: flex; justify-content: space-between; align-items: baseline;
  gap: .6rem; padding-top: .7rem; border-top: 1px solid var(--linia);
  font-size: .85rem; color: var(--tekst-3); flex-wrap: wrap; }
.zam-kwota { font: 700 1.05rem/1 var(--danymi);
  font-variant-numeric: tabular-nums; color: var(--piecz); }

/* Ranking z paskiem */
.ranking { list-style: none; padding: 0; margin: 0; }
.ranking li {
  display: grid; grid-template-columns: 1.8rem 1fr 9rem 4.5rem;
  gap: .8rem; align-items: center; padding: .6rem .2rem;
  border-bottom: 1px solid var(--linia);
}
@media (max-width: 40rem) {
  .ranking li { grid-template-columns: 1.8rem 1fr auto; }
  .ranking .tor { grid-column: 2 / -1; }
}
.ranking .m { font: 700 .82rem/1 var(--danymi); color: var(--tekst-3);
  text-align: right; }
.ranking li:nth-child(1) .m { color: var(--piecz); }
.ranking li:nth-child(2) .m { color: var(--morze); }
.ranking li:nth-child(3) .m { color: var(--fiolet); }
.ranking .nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .nazwa a { color: var(--tekst); text-decoration: none; }
.ranking .nazwa a:hover { text-decoration: underline; }
.ranking .tor { height: .65rem; background: var(--linia); border-radius: 1rem;
  overflow: hidden; }
.ranking .tor i { display: block; height: 100%; border-radius: 1rem;
  background: var(--atrament); }
.ranking li:nth-child(1) .tor i { background: var(--piecz); }
.ranking li:nth-child(2) .tor i { background: var(--morze); }
.ranking li:nth-child(3) .tor i { background: var(--fiolet); }
.ranking .ile { font: 600 .92rem/1 var(--danymi);
  font-variant-numeric: tabular-nums; text-align: right; }

/* Blok z zastrzeżeniem */
.zastrzezenie {
  background: var(--papier-2); border: 1px solid var(--linia);
  border-left: 4px solid var(--bursztyn); border-radius: 0 var(--r) var(--r) 0;
  padding: 1rem 1.2rem; margin: 1.2rem 0; max-width: 46rem;
}
.zastrzezenie .et { font: 600 .68rem/1 var(--danymi); letter-spacing: .12em;
  text-transform: uppercase; color: var(--bursztyn); display: block;
  margin-bottom: .45rem; }
.zastrzezenie p { margin: .4rem 0 0; font-size: .94rem; color: var(--tekst-2); }

/* Wykres roczny */
.rok-wykres { display: flex; align-items: flex-end; gap: .5rem; height: 9rem;
  margin: 1rem 0 .4rem; }
.rok-wykres > div { flex: 1; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: .4rem; height: 100%; }
.rok-wykres .slup { width: 100%; border-radius: .3rem .3rem 0 0;
  background: var(--atrament); transition: background .16s; position: relative; }
.rok-wykres > div:hover .slup { background: var(--piecz); }
.rok-wykres .v { font: 600 .78rem/1 var(--danymi); color: var(--tekst-2); }
.rok-wykres .r { font: 500 .78rem/1 var(--danymi); color: var(--tekst-3); }


/* ===== elementy zachowane z poprzedniego arkusza ===== */
/* --- spis treści na długich stronach --- */
.spis { background: var(--tlo-karty); border: 1px solid var(--linia);
  border-radius: var(--zaokr); padding: .8rem 1rem; margin: 1.4rem 0; }
.spis strong { display: block; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tekst-trzeci); margin-bottom: .45rem; }
.spis ul { list-style: none; padding: 0; margin: 0; display: flex;
  flex-wrap: wrap; gap: .3rem .9rem; font-size: .95rem; }

/* --- tabele --- */
.dane { width: 100%; border-collapse: collapse; margin: .8rem 0 1.2rem;
  background: var(--tlo-karty); font-size: .94rem;
  border: 1px solid var(--linia); border-radius: var(--zaokr); overflow: hidden; }
.dane th, .dane td { text-align: left; padding: .55rem .7rem;
  border-bottom: 1px solid var(--linia); }
.dane thead th { font-weight: 600; font-size: .8rem; color: var(--tekst-trzeci);
  text-transform: uppercase; letter-spacing: .04em; background: var(--tlo);
  border-bottom: 1px solid var(--linia-mocna); }
.dane td.l, .dane th.l { text-align: right; font-variant-numeric: tabular-nums; }
.dane tbody tr:last-child td { border-bottom: none; }
.dane tbody tr:hover { background: var(--marka-jasna); }

@media (max-width: 44rem) {
  .dane { display: block; overflow-x: auto; white-space: nowrap; }
}

/* --- wykresy SVG ---
   Rysowane wprost w treści: bez bibliotek, bez żądań, widoczne zanim
   cokolwiek się wczyta. Szerokość ograniczona — wykres rozciągnięty na całą
   stronę przytłacza tekst zamiast go wspierać. */
/* Wykresy tworzą własny kontekst nakładania, żeby nie wypływały ponad
   przyklejony pasek. */
.wykres { margin: .9rem 0 1.2rem; max-width: 34rem; position: relative;
  z-index: 0; }
/* Wysokość podana WPROST, a nie z proporcji viewBox. SVG z „width: 100%”
   i viewBox 100×140 rozciąga się do wysokości półtora raza większej niż
   szerokość — przy 34 rem dawało to wykres na pół ekranu. */
.wykres svg { width: 100%; display: block; height: 11rem; }
.wykres figcaption { margin-top: .3rem; }

/* Słupki w kolorach z palety — wykres w jednym odcieniu czyta się jak
   tabela. Kolor nie niesie tu informacji, ma przyciągać wzrok. */
.wykres .slupek { fill: var(--seria-1); }
.wykres .slupek.s0 { fill: var(--seria-1); }
.wykres .slupek.s1 { fill: var(--seria-2); }
.wykres .slupek.s2 { fill: var(--seria-3); }
.wykres .slupek.s3 { fill: var(--seria-4); }
.wykres .slupek.s4 { fill: var(--seria-5); }
.wykres .slupek.s5 { fill: var(--seria-6); }
.wykres .slupek.s6 { fill: var(--seria-7); }
/* Rozmiary tekstu w jednostkach viewBox, bo SVG jest skalowany
   niejednorodnie i tekst rozciągnąłby się razem z rysunkiem. */
/* Rozmiar w jednostkach viewBox. Wykres słupkowy ma viewBox szerokości
   około trzystu, więc pięć jednostek to znak wysokości jednej setnej
   szerokości — nieczytelnie mały. Dziewięć odpowiada mniej więcej
   dwunastu pikselom przy typowej szerokości wykresu. */
.wykres .wart { font-size: 9px; fill: var(--tekst-drugi); text-anchor: middle;
  font-weight: 600; }
.wykres .podpis { font-size: 9px; fill: var(--tekst-trzeci); text-anchor: middle; }

.wykres.pasek svg { height: 1.1rem; }
.wykres .seg { fill: var(--seria-1); }
.wykres .s0 { fill: var(--seria-1); } .wykres .s1 { fill: var(--seria-2); }
.wykres .s2 { fill: var(--seria-3); } .wykres .s3 { fill: var(--seria-4); }
.wykres .s4 { fill: var(--seria-5); } .wykres .s5 { fill: var(--seria-6); }
.wykres .s6 { fill: var(--seria-7); }
.legenda { list-style: none; padding: 0; margin: .5rem 0 0; display: flex;
  flex-wrap: wrap; gap: .3rem 1rem; font-size: .86rem; }
.legenda .kropka { display: inline-block; width: .7rem; height: .7rem;
  border-radius: .2rem; background: var(--marka); margin-right: .35rem;
  vertical-align: -1px; }
.legenda .s0 { background: var(--seria-1); }
.legenda .s1 { background: var(--seria-2); } .legenda .s2 { background: var(--seria-3); }
.legenda .s3 { background: var(--seria-4); } .legenda .s4 { background: var(--seria-5); }
.legenda .s5 { background: var(--seria-6); } .legenda .s6 { background: var(--seria-7); }

.wykres.wskaznik { max-width: 26rem; }
.wykres.wskaznik svg { height: .7rem; }
.wykres .tlo { fill: var(--linia); }
.wykres .wypelnienie { fill: var(--marka); }
.wykres.wskaznik.wysoki .wypelnienie { fill: var(--akcent); }
.wykres.wskaznik.sredni .wypelnienie { fill: #a8842e; }

.wykres.kartogram { max-width: 24rem; margin-inline: auto; }
.wykres.kartogram svg { height: auto; aspect-ratio: 1; }
.wykres .kafel { fill: var(--marka); }
.wykres .nazwa { font-size: 4.6px; fill: #fff; text-anchor: middle;
  text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.wykres.kartogram a { cursor: pointer; }
.wykres.kartogram a:hover .kafel { stroke: var(--tekst); stroke-width: .8; }

/* Wykresy obok siebie tam, gdzie się mieszczą. */
.para-wykresow { display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.para-wykresow .wykres { max-width: none; }

/* --- wyszukiwarka --- */
.etykieta { display: block; font-size: .9rem; color: var(--tekst-drugi);
  margin-bottom: .3rem; }
.szukajka { width: 100%; max-width: var(--tekstowa); padding: .65rem .85rem;
  font-size: 1.05rem; border: 1px solid var(--linia-kontrolki);
  border-radius: var(--zaokr); background: var(--tlo-karty); color: var(--tekst); }
.szukajka:disabled { opacity: .6; }
#wyniki:empty { display: none; }

/* --- interaktywne tabele ---
   Sterowanie dokładane skryptem; bez niego tabela zostaje zwykłą tabelą,
   posortowaną tak, jak wygenerował ją serwer, i w całości widoczną. */
.tabela-oprawa { margin: .9rem 0 1.4rem; }
.tabela-sterowanie {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
  margin-bottom: .5rem;
}
.tabela-filtr {
  flex: 1 1 14rem; max-width: 20rem; padding: .45rem .7rem; font-size: .95rem;
  border: 1px solid var(--linia-kontrolki); border-radius: .4rem;
  background: var(--tlo-karty); color: var(--tekst);
}
.tabela-licznik { margin-left: auto; }
.tabela-oprawa .dane { margin: 0; }

.dane th.sortowalna { cursor: pointer; user-select: none; }
.dane th.sortowalna:hover { color: var(--marka); background: var(--marka-jasna); }
.dane th.sortowalna::after {
  content: "↕"; opacity: .3; margin-left: .3rem; font-size: .85em;
}
.dane th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: var(--marka); }
.dane th[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--marka); }

.tabela-strony {
  display: flex; gap: .8rem; align-items: center; margin-top: .6rem;
  font-size: .92rem; color: var(--tekst-trzeci);
}
.tabela-strony button {
  font: inherit; padding: .35rem .8rem; border-radius: .4rem;
  border: 1px solid var(--linia-mocna); background: var(--tlo-karty);
  color: var(--marka); cursor: pointer;
}
.tabela-strony button:hover:not(:disabled) {
  border-color: var(--marka); background: var(--marka-jasna);
}
.tabela-strony button:disabled { opacity: .4; cursor: default; }

/* --- miniatury w kaflach --- */
.wykres.iskra { max-width: none; margin: .6rem 0 0; }
.wykres.iskra svg { height: 2.6rem; }
.wykres.iskra .linia {
  stroke: var(--marka); stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.wykres.iskra figcaption { display: none; }

.wykres.pierscien { max-width: 7rem; margin: .5rem 0 0; }
.wykres.pierscien svg { height: 5rem; }
.wykres .tor { stroke: var(--linia); stroke-width: 4; }
.wykres.pierscien .wypelnienie {
  stroke: var(--marka); stroke-width: 4; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: center;
}
.wykres .srodek {
  font-size: 9px; font-weight: 700; fill: var(--marka); text-anchor: middle;
}
.wykres.pierscien figcaption { display: none; }

/* --- mapa województw --- */
.wykres.mapa { max-width: 32rem; margin-inline: auto; }
.wykres.mapa svg { height: auto; }
.wykres .obszar {
  fill: var(--marka); stroke: var(--tlo); stroke-width: 3;
  stroke-linejoin: round; transition: opacity .12s;
}
.wykres.mapa a { cursor: pointer; }
.wykres.mapa a:hover .obszar { stroke: var(--akcent); stroke-width: 6; }
.wykres.mapa a:focus-visible .obszar { stroke: var(--akcent); stroke-width: 6; }
/* Lista pod mapą: jedyna droga dla czytnika ekranu i dla kogoś, kto chce
   porównać liczby zamiast szacować je z odcienia. */
.mapa-lista {
  list-style: none; padding: 0; margin: .8rem 0 0;
  display: grid; gap: .15rem .9rem; font-size: .88rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.mapa-lista li { display: flex; justify-content: space-between; gap: .5rem;
  border-bottom: 1px solid var(--linia); padding: .15rem 0; }
.mapa-lista strong { font-variant-numeric: tabular-nums; color: var(--tekst-drugi); }

/* Podpis obrócony, gdy nie mieści się pod słupkiem — poziomy nachodziłby
   na sąsiedni. */
.wykres .podpis.obrocony { text-anchor: end; }

/* Wartości wpisane w mapę. Przy ciemnym wypełnieniu podpis musi być jasny,
   inaczej znika — stąd druga klasa. */
.wykres .opis-mapy {
  font-size: 30px; font-weight: 700; text-anchor: middle;
  fill: var(--tekst); paint-order: stroke; stroke: var(--tlo-karty);
  stroke-width: 5px; stroke-linejoin: round; pointer-events: none;
}
.wykres .opis-mapy.jasny { fill: #fff; stroke: rgba(0, 0, 0, .35); }

/* --- wykres pudełkowy: gdzie leży połowa wartości --- */
.wykres.skrzynka { max-width: 30rem; }
.wykres.skrzynka svg { height: 5.5rem; }
.wykres .wasy { stroke: var(--linia-mocna); stroke-width: 1.2; }
.wykres .koniec { stroke: var(--linia-mocna); stroke-width: 1.2; }
.wykres .pudlo { fill: var(--marka); opacity: .22; stroke: var(--marka);
  stroke-width: 1; }
.wykres .srodek-linia { stroke: var(--akcent); stroke-width: 2.4;
  stroke-linecap: round; }
.wykres .podpis-skrzynki { font-size: 4.5px; fill: var(--tekst-trzeci); }
.wykres .podpis-skrzynki.mocny { font-size: 6px; fill: var(--akcent);
  font-weight: 700; }

/* --- porównanie: poziome słupki z jednym wyróżnionym --- */
.wykres.porownanie { max-width: 34rem; }
.wykres.porownanie svg { height: auto; }
.wykres .slupek-poziomy { fill: var(--linia-mocna); }
.wykres .slupek-poziomy.wyrozniony { fill: var(--akcent); }
.wykres .etykieta-poz { font-size: 6px; fill: var(--tekst-drugi); }
.wykres .wartosc-poz { font-size: 6px; fill: var(--tekst-trzeci);
  font-weight: 600; }

/* --- bloki treści ---
   Cztery rodzaje, każdy o innym znaczeniu. Kolor jest podpowiedzią, ale nie
   jedynym sygnałem: każdy blok ma też etykietę słowną, bo sam kolor nie
   wystarczy osobom, które go nie rozróżniają, ani w druku. */
.blok {
  border-radius: var(--zaokr); padding: 1rem 1.2rem; margin: 1.4rem 0;
  max-width: var(--tekstowa); border-left: 4px solid;
  background: var(--tlo-karty); box-shadow: var(--cien);
}
.blok > .etykieta-bloku {
  display: block; font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 700; margin-bottom: .45rem;
}
.blok p { margin: .45rem 0; }
.blok p:last-child { margin-bottom: 0; }
.blok strong { color: var(--tekst); }

.blok.wniosek { border-left-color: var(--zielen); background: var(--zielen-jasna); }
.blok.wniosek .etykieta-bloku { color: var(--zielen); }
.blok.uwaga { border-left-color: var(--uwaga-linia); background: var(--uwaga-tlo); }
.blok.uwaga .etykieta-bloku { color: #8a6d1f; }
.blok.ciekawostka { border-left-color: var(--akcent); background: var(--akcent-jasny); }
.blok.ciekawostka .etykieta-bloku { color: var(--akcent); }
.blok.kontekst { border-left-color: var(--marka); background: var(--marka-jasna); }
.blok.kontekst .etykieta-bloku { color: var(--marka); }

@media (prefers-color-scheme: dark) {
  .blok.uwaga .etykieta-bloku { color: #d9bd7a; }
}

/* --- wykres liniowy --- */
.wykres.linia svg { height: 9rem; }
.wykres .tor-linii {
  stroke: var(--marka); stroke-width: 2.4; stroke-linecap: round;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.wykres .punkt { fill: var(--tlo-karty); stroke: var(--marka); stroke-width: 2; }

/* --- pierścień z legendą --- */
.wykres.pierscien-udzial { max-width: 32rem; }
.pierscien-uklad {
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
}
.pierscien-uklad svg { height: 8rem; width: 8rem; flex: none; }
/* Gruby pierścień: przy promieniu 13 i obrysie 16 zostaje wąskie oczko
   w środku. Bliżej klasycznego wykresu kołowego niż cienka obwódka, ale
   nadal z miejscem, w którym oko się zatrzymuje. */
/* Pierścień: „fill: none” wprost w arkuszu, bo sam atrybut w kodzie bywa
   przykryty przez regułę dla innych okręgów. Bez tego środek wypełnia się
   kolorem ostatniego łuku. */
.wykres .luk {
  stroke-width: 13; fill: none;
  transform: rotate(-90deg); transform-origin: center;
}
.wykres .luk.s0 { stroke: var(--seria-1); } .wykres .luk.s1 { stroke: var(--seria-2); }
.wykres .luk.s2 { stroke: var(--seria-3); } .wykres .luk.s3 { stroke: var(--seria-4); }
.wykres .luk.s4 { stroke: var(--seria-5); } .wykres .luk.s5 { stroke: var(--seria-6); }
/* Ostatni segment to zawsze „pozostałe” — szary, żeby nie mylił się
   z żadną nazwaną kategorią. */
.wykres .luk.s6 { stroke: var(--seria-7); }
.legenda.pionowa { flex-direction: column; gap: .3rem; align-items: flex-start; }

/* --- ranking z paskiem w tle --- */
.wykres.ranking-lista { max-width: 38rem; }
.wykres.ranking-lista ol { list-style: none; padding: 0; margin: 0; }
/* Siatka z osobną kolumną na pasek. Wersja z tłem rozciągniętym pod całym
   wierszem nachodziła na nazwę i wartość. */
/* Kolumny o stałych szerokościach po bokach: numer i wartość mają swoje
   miejsce niezależnie od długości nazwy, więc liczby układają się w jedną
   pionową linię. Kolumna wartości musi pomieścić najdłuższą liczbę —
   „569 519” to siedem znaków plus odstęp. */
.wykres.ranking-lista li {
  display: grid;
  grid-template-columns: 1.6rem minmax(6rem, 1fr) 9rem 5.5rem;
  align-items: center; gap: .7rem; padding: .45rem .5rem;
  border-bottom: 1px solid var(--linia);
}
.wykres.ranking-lista .pasek-rankingu {
  background: var(--linia); border-radius: .25rem; height: .8rem;
  overflow: hidden;
}
.wykres.ranking-lista .wypelnienie-paska {
  display: block; height: 100%; border-radius: .25rem;
  background: var(--seria-1); transition: width .2s;
}
.wykres.ranking-lista .wypelnienie-paska.s0 { background: var(--seria-1); }
.wykres.ranking-lista .wypelnienie-paska.s1 { background: var(--seria-2); }
.wykres.ranking-lista .wypelnienie-paska.s2 { background: var(--seria-3); }
.wykres.ranking-lista .wypelnienie-paska.s3 { background: var(--seria-4); }
.wykres.ranking-lista .wypelnienie-paska.s4 { background: var(--seria-5); }
.wykres.ranking-lista .wypelnienie-paska.s5 { background: var(--seria-6); }
.wykres.ranking-lista .wypelnienie-paska.s6 { background: var(--seria-7); }
.wykres.ranking-lista li:hover { background: var(--marka-jasna); }

@media (max-width: 40rem) {
  /* Na wąskim ekranie pasek schodzi pod nazwę zamiast ściskać obie kolumny. */
  .wykres.ranking-lista li {
    grid-template-columns: 1.6rem 1fr 5.5rem;
    row-gap: .3rem;
  }
  .wykres.ranking-lista .pasek-rankingu { grid-column: 2 / -1; }
}

/* Zdanie zastępujące wykres kołowy przy jednej dominującej kategorii. */
.dominacja {
  background: var(--marka-jasna); border-left: 4px solid var(--marka);
  border-radius: 0 var(--zaokr) var(--zaokr) 0; padding: .7rem 1rem;
  margin: 1rem 0; max-width: var(--tekstowa);
}
.wykres.ranking-lista .miejsce {
  font-size: .8rem; color: var(--tekst-trzeci); font-weight: 700;
  min-width: 1.4rem; font-variant-numeric: tabular-nums;
}
.wykres.ranking-lista .tresc { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.wykres.ranking-lista .wartosc {
  font-weight: 700; color: var(--marka); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.wykres.ranking-lista li:first-child .wartosc { color: var(--akcent); }

/* --- interakcja z wykresami ---
   Podświetlenie i podpowiedź przy najechaniu. Wszystko na CSS i atrybucie
   „title”, bez skryptu: wykres ma działać także wtedy, gdy skrypty nie
   zadziałają, a to jest dodatek, nie warunek zrozumienia. */
.wykres .slupek, .wykres .luk, .wykres .obszar, .wykres .seg {
  transition: opacity .12s, filter .12s;
}
.wykres:hover .slupek:not(:hover),
.wykres:hover .seg:not(:hover) { opacity: .55; }
.wykres .slupek:hover, .wykres .seg:hover { filter: brightness(1.12); }
.wykres .luk:hover { filter: brightness(1.15); }

/* Kafle liczb i kafle nawigacyjne: delikatne uniesienie przy najechaniu. */
.liczby li { transition: transform .12s, box-shadow .12s; }
.liczby li:hover { transform: translateY(-3px); box-shadow: var(--cien-mocny); }

@media (prefers-reduced-motion: reduce) {
  .wykres *, .liczby li { transition: none !important; }
  .liczby li:hover { transform: none; }
}

/* --- porównanie dwóch rynków --- */
.dwa-rynki {
  display: grid; gap: 1.2rem; margin: 1.6rem 0;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.rynek {
  background: var(--tlo-karty); border: 1px solid var(--linia);
  border-radius: var(--zaokr); padding: 1.1rem 1.2rem; box-shadow: var(--cien);
  border-top: 4px solid var(--marka);
}
.rynek.krajowy { border-top-color: var(--seria-3); }
.rynek h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.rynek.unijny h2 { color: var(--marka); }
.rynek.krajowy h2 { color: var(--seria-3); }
.zrodlo-opis { font-size: .84rem; color: var(--tekst-trzeci);
  margin: 0 0 .9rem; }
.liczby-rynku { list-style: none; padding: 0; margin: 0 0 .9rem;
  display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); }
.liczby-rynku strong { display: block; font-size: 1.25rem;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rynek.unijny .liczby-rynku strong { color: var(--marka); }
.rynek.krajowy .liczby-rynku strong { color: var(--seria-3); }
.liczby-rynku span { font-size: .8rem; color: var(--tekst-trzeci); }
.co-jest { font-size: .9rem; margin: 0; color: var(--tekst-drugi); }

/* --- pojedyncze postępowanie --- */
.strony-umowy {
  display: grid; gap: 1rem; margin: 1.4rem 0;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.strony-umowy section {
  background: var(--tlo-karty); border: 1px solid var(--linia);
  border-radius: var(--zaokr); padding: .9rem 1.1rem; box-shadow: var(--cien);
  border-left: 4px solid var(--marka); margin: 0;
}
.strony-umowy section:last-child { border-left-color: var(--seria-2); }
.strony-umowy h2 { margin: 0 0 .35rem; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--tekst-trzeci); }
.nazwa-strony { margin: 0 0 .3rem; font-size: 1.08rem; font-weight: 600;
  line-height: 1.35; }
.opis-zamowienia {
  max-width: var(--tekstowa); background: var(--tlo-karty);
  border: 1px solid var(--linia); border-radius: var(--zaokr);
  padding: .9rem 1.1rem; white-space: pre-wrap; font-size: .95rem;
  line-height: 1.55;
}

/* --- wyszukiwarka postępowań (PHP) --- */
.szukajka-form { margin: 1.4rem 0 2rem; }
.pole-z-guzikiem { display: flex; gap: .5rem; max-width: var(--tekstowa); }
.pole-z-guzikiem .szukajka { flex: 1; }
.pole-z-guzikiem button {
  font: inherit; font-weight: 600; padding: .6rem 1.3rem;
  border: none; border-radius: var(--zaokr); background: var(--marka);
  color: #fff; cursor: pointer;
}
.pole-z-guzikiem button:hover { background: var(--marka-ciemna); }
.filtry {
  display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: .9rem;
  font-size: .9rem; color: var(--tekst-drugi);
}
.filtry label { display: flex; flex-direction: column; gap: .2rem; }
.filtry select {
  font: inherit; padding: .35rem .5rem; border-radius: .4rem;
  border: 1px solid var(--linia-kontrolki); background: var(--tlo-karty);
  color: var(--tekst);
}
.aktywne-filtry { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: .6rem 0 1rem; }
.filtr {
  background: var(--marka-jasna); color: var(--marka); border-radius: 1rem;
  padding: .2rem .4rem .2rem .8rem; font-size: .88rem;
}
.filtr a { text-decoration: none; font-weight: 700; padding: 0 .35rem;
  color: var(--tekst-trzeci); }
.filtr a:hover { color: var(--akcent); }
.wyczysc { font-size: .86rem; }


/* Bieżący dział w menu: kolor i kreska pod spodem. Sam kolor nie wystarcza. */
.menu > li > a.tu, .menu > li > button.tu {
  color: var(--atrament); font-weight: 650;
  box-shadow: inset 0 -2px 0 var(--piecz);
}

/* Widoczność zależna od skryptów. Znacznik „js” ustawia się przed pierwszym
   rysowaniem strony, więc nic nie przeskakuje po wczytaniu. */
html:not(.js) .tylko-z-js { display: none !important; }
html.js .tylko-bez-js { display: none !important; }

/* Obrys focusa zostaje — dla klawiatury to jedyny ślad, gdzie się jest.
   Reguła jest tu powtórzona po zmianach w arkuszu, żeby żadna późniejsza
   deklaracja jej nie przykryła. */
:focus-visible { outline: 2.5px solid var(--piecz); outline-offset: 2px; }

/* Sekcje strony głównej — czoło ma własną oprawę, reszta wspólną. */
.oprawa-w { margin: 3.4rem 0 0; }
.oprawa-w > h2 { margin-bottom: 1.1rem; }

/* --- strona wejściowa do postępowań --- */
.szukajka-czolo {
  background: linear-gradient(160deg, var(--marka-noc) 0%, var(--atrament-2) 130%);
  color: #fff; border-radius: var(--r-l); padding: 2.4rem 2rem;
  margin: .4rem 0 2rem;
}
.szukajka-czolo h1 { color: #fff; margin: 0 0 .6rem;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -.03em; }
.szukajka-czolo .nadtyt { color: var(--sygnal); }
.szukajka-czolo .czolo-lead { color: rgba(255,255,255,.85); margin-bottom: 1.4rem; }
.wielkie-szukanie { display: flex; gap: .6rem; max-width: 40rem; flex-wrap: wrap; }
.wielkie-szukanie .szukajka {
  flex: 1 1 18rem; font-size: 1.05rem; padding: .8rem 1.1rem;
  border-radius: 2rem; border: 0; background: #fff;
}
.wielkie-szukanie .guzik { background: var(--piecz); color: #fff; border: 0; }
.wielkie-szukanie .guzik:hover { background: #9a3412; }
.szukajka-czolo .czolo-zrodla a { color: var(--sygnal); }
.szukajka-czolo .czolo-zrodla { color: rgba(255,255,255,.7); }

/* Kafle skrótów: branża i liczba postępowań */
.skroty { display: grid; gap: .6rem; margin: 1rem 0;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.skroty a {
  display: flex; justify-content: space-between; align-items: center;
  gap: .6rem; background: var(--papier-2); border: 1px solid var(--linia);
  border-radius: var(--r); padding: .75rem 1rem; text-decoration: none;
  color: var(--tekst); transition: border-color .14s, transform .14s;
}
.skroty a:hover { border-color: var(--piecz); transform: translateY(-2px); }
.skrot-nazwa { font-size: .93rem; }
.skrot-ile { font-weight: 700; color: var(--tekst-3); font-size: .88rem; }
.skroty a:hover .skrot-ile { color: var(--piecz); }

/* --- przełącznik zbiorów w wyszukiwarkach ---
   Serwis ma trzy osobne zbiory do przeszukania i bez tego paska czytelnik
   nie wie, że szuka tylko w jednym z nich. */
.zbiory { display: flex; gap: .3rem; margin: 0 0 1.2rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--linia); }
.zbiory a {
  padding: .55rem 1rem; text-decoration: none; color: var(--tekst-2);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  font-size: .95rem; font-weight: 500;
}
.zbiory a:hover { color: var(--atrament); }
.zbiory a.tu { color: var(--piecz); border-bottom-color: var(--piecz);
  font-weight: 650; }

/* ============================================================
   Liczby — reguła na końcu arkusza, żeby żadna wcześniejsza jej nie
   przykryła. Krój TEKSTOWY z równą szerokością cyfr; monospace odpada,
   bo przekreśla zero, a „font-feature-settings: zero 0” działa tylko
   w tych nielicznych krojach, które dają wybór.
   ============================================================ */
.liczba, .ogl-wartosc .duza, .kafel-duza, .metryka-liczby .w,
.czolo-liczby strong, .zam-kwota, .rok-wykres .v, .rok-wykres .r,
.ranking .ile, .ranking .m, .dane td.l, .liczby strong, .skrot-ile,
.metryka-liczby span.w, .czolo-zrodla b, .wykres text {
  font-family: var(--tekstowy) !important;
  font-variant-numeric: tabular-nums lining-nums;
}
/* Monospace zostaje TYLKO w stemplach: numery spraw i kody CPV, gdzie
   zero pojawia się rzadko i w małym stopniu. */
.stempel { font-family: var(--danymi); }

/* Wyróżnienie w nagłówku: zaznaczenie jak w dokumencie, nie gradient. */
.czolo h1 em {
  font-style: normal; color: var(--piecz);
  box-shadow: inset 0 -.42em 0 rgba(194, 65, 12, .13);
}

/* --- miniatury w kaflach ---
   Zwykłe elementy, nie SVG: przy sześciu prostokątach SVG nic nie wnosi,
   a element blokowy skaluje się razem z kaflem. */
.mini { display: flex; align-items: flex-end; gap: 3px; height: 2.6rem;
  margin: .8rem 0 0; }
.mini i { flex: 1; background: var(--linia-2); border-radius: 2px 2px 0 0;
  transition: background .16s; }
.kafel:hover .mini i { background: var(--piecz); }
.kafel.ciemny .mini i { background: rgba(255, 182, 39, .35); }
.kafel.ciemny:hover .mini i { background: var(--sygnal); }

/* --- pasek dwóch obiegów ---
   Dwie liczby obok siebie mówią mniej niż ich stosunek pokazany szerokością.
   Pasek pokazuje od razu, że rynek krajowy jest liczniejszy. */
.obiegi { margin: 1.2rem 0 0; }
.obiegi-tor { display: flex; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--cien); min-height: 4.4rem; }
.obiegi-tor > div {
  display: flex; flex-direction: column; justify-content: center;
  padding: .8rem 1.2rem; color: #fff; min-width: 0;
}
.obieg-ue { background: linear-gradient(160deg, var(--atrament-2), var(--atrament)); }
.obieg-kraj { background: linear-gradient(160deg, #0f8579, var(--morze)); flex: 1; }
.obieg-ile { font-size: 1.35rem; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; }
.obieg-co { font-size: .82rem; opacity: .82; }
.obiegi-opis { display: grid; gap: .4rem 2rem; margin: .8rem 0 .5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.obiegi-opis p { margin: 0; font-size: .92rem; color: var(--tekst-2); }

/* Podpis pod miniaturą: bez niego sześć słupków nie mówi, jakiego okresu
   dotyczy. Skrajne lata wystarczą. */
.mini-blok { display: block; margin: .8rem 0 0; }
.mini-blok .mini { margin: 0; }
.mini-podpis {
  display: flex; justify-content: space-between; margin-top: .25rem;
  font-size: .72rem; color: var(--tekst-3);
  font-variant-numeric: tabular-nums;
}
.kafel.ciemny .mini-podpis { color: rgba(255, 255, 255, .55); }

/* Ostatni słupek miniatury: to on odpowiada wielkiej liczbie w kaflu. */
.mini i.teraz { background: var(--piecz); }
.kafel.ciemny .mini i.teraz { background: var(--sygnal); }
.kafel:hover .mini i:not(.teraz) { background: var(--linia-2); }
.mini-podpis .teraz { color: var(--piecz); font-weight: 650; }
.kafel.ciemny .mini-podpis .teraz { color: var(--sygnal); }

/* --- miniatury porównawcze ---
   Każdy słupek ma podpis i wartość, bo miniatura nie ma osi i mieć jej nie
   może przy tej wielkości. Wyróżniony jest ten, o którym mówi nagłówek. */
/* Wysokość obejmuje wartość NAD słupkiem i podpis POD nim. Przy 4,6 rem
   podpisy wychodziły poza kafel i były ucięte w połowie wysokości liter. */
.mini { display: flex; align-items: flex-end; gap: .5rem; min-height: 6.2rem;
  margin: .9rem 0 .2rem; }
.mini-poz { flex: 1; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: .25rem;
  min-width: 0; height: 100%; }
/* Wysokość słupka ustawia generator w pikselach — „max-height” ścinało tu
   wszystkie do jednej wartości i wykres pokazywał równe klocki. */
.mini-wart { font-size: .74rem; font-weight: 700; color: var(--tekst-3);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-slup { width: 100%; background: var(--linia-2); border-radius: 3px 3px 0 0;
  transition: background .16s; }
.mini-etyk { font-size: .68rem; color: var(--tekst-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mini-poz.teraz .mini-slup { background: var(--piecz); }
.mini-poz.teraz .mini-wart { color: var(--piecz); }
.kafel.ciemny .mini-slup { background: rgba(255, 255, 255, .22); }
.kafel.ciemny .mini-poz.teraz .mini-slup { background: var(--sygnal); }
.kafel.ciemny .mini-wart, .kafel.ciemny .mini-etyk {
  color: rgba(255, 255, 255, .7); }
.kafel.ciemny .mini-poz.teraz .mini-wart { color: var(--sygnal); }

/* Tytuł zamówienia na karcie to NIE nagłówek sekcji: nie tworzy struktury
   dokumentu, tylko nazywa pozycję listy. Nagłówek h4 wewnątrz listy pod h2
   dawał przeskok poziomów i psuł spis treści czytnikom ekranu. */
.zam .tytul-zam, .ogl-tytul {
  margin: 0; font-size: .98rem; line-height: 1.4; font-weight: 600;
}
.ogl-glowa .ogl-tytul { margin: .5rem 0 0; font-size: 1.06rem;
  max-width: 24rem; }
.zam .tytul-zam a { color: var(--tekst); text-decoration: none; }
.zam .tytul-zam a:hover { color: var(--atrament-2); text-decoration: underline; }

/* Nazwa podmiotu wpleciona w zdanie: bez własnego wyglądu, sam znacznik
   pozwalający odróżnić cudzą nazwę od naszego tekstu (używają tego testy). */
.nazwa-podmiotu { font-weight: inherit; }

/* --- karty grup i tematów ---
   Przy pięciuset pozycjach tabela z sześcioma kolumnami jest ścianą liczb.
   Karta pokazuje najpierw nazwę i wartość środkową, a pasek daje oku punkt
   zaczepienia. */
.grupy {
  list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.grupy a {
  display: flex; flex-direction: column; gap: .5rem; height: 100%;
  background: var(--papier-2); border: 1px solid var(--linia);
  border-radius: var(--r); padding: .95rem 1.1rem; text-decoration: none;
  color: var(--tekst); box-shadow: var(--cien);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.grupy a:hover {
  transform: translateY(-3px); box-shadow: var(--cien-mocny);
  border-color: var(--piecz);
}
.grupa-nazwa { font-weight: 600; line-height: 1.35; font-size: .97rem; }
.grupa-widelki { display: flex; align-items: baseline; gap: .6rem;
  flex-wrap: wrap; }
.grupa-srodek {
  font-size: 1.3rem; font-weight: 700; color: var(--piecz);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.grupa-zakres { font-size: .82rem; color: var(--tekst-3);
  font-variant-numeric: tabular-nums; }
.grupa-pasek {
  height: .4rem; background: var(--linia); border-radius: 1rem;
  overflow: hidden; margin-top: auto;
}
.grupa-pasek i {
  display: block; height: 100%; border-radius: 1rem;
  background: linear-gradient(90deg, var(--morze), var(--piecz));
}
.grupa-dol {
  display: flex; justify-content: space-between; gap: .6rem;
  font-size: .82rem; color: var(--tekst-3); flex-wrap: wrap;
}
.grupa-rozpietosc { font-variant-numeric: tabular-nums; }

/* Branże: nazwa i kod CPV w jednym wierszu, kod jako stempel. */
.grupy.branze a { gap: .6rem; }
.grupa-gora { display: flex; justify-content: space-between; gap: .6rem;
  align-items: flex-start; }
.grupa-gora .stempel { flex: none; font-size: .68rem; padding: .2rem .4rem; }
.grupy.branze .grupa-srodek { font-size: 1.5rem; color: var(--atrament-2); }
.grupy.branze a:hover { border-color: var(--morze); }
.grupy.branze .grupa-pasek i {
  background: linear-gradient(90deg, var(--atrament-2), var(--morze));
}