/* Katalog SEO — jeden arkusz, zero JS, zero zewnętrznych hostów.
   Tokeny przepisane 1:1 z landingu (`wyp-landing/src/styles/global.css`,
   blok `@theme`), żeby katalog i strona główna wyglądały jak jeden serwis.
   Zmieniając paletę na landingu, zmień ją TU RÓWNIEŻ — nie ma wspólnego
   źródła, bo landing buduje Tailwind, a katalog renderuje Jinja. */
:root {
  /* Atrament / tekst */
  --ink: #16202a;
  --body: #3a454f;
  --body-2: #556169;
  --muted: #8a949d;

  /* Sekcje ciemne (nawigacja, stopka) */
  --slate: #28333d;
  --slate-deep: #1f2932;
  --on-dark: #eef1f3;
  --on-dark-muted: #c3cdd5;
  --on-dark-faint: #8fa0ad;

  /* Marka */
  --primary: #1f6fb2;
  --primary-hover: #17578c;
  --primary-tint: #eef5fb;
  --accent: #e0611c;

  /* Status / dane */
  --good: #2f8f4e;
  --good-tint: #e8f3ec;
  --good-border: #a9d6ba;

  /* Powierzchnie i linie */
  --surface: #f5f7f9;
  --line: #e3e8ec;
  --line-2: #d7dde2;
  --panel: #ffffff;
}

/* Landing deklaruje IBM Plex Sans, ale nigdzie go nie wczytuje — ani przez
   <link>, ani @font-face — więc realnie renderuje się `system-ui`. Trzymamy
   identyczny stos: gdy font kiedyś dojdzie na landingu, katalog podchwyci go
   bez zmiany tutaj. Fontu NIE wczytujemy: szablony SEO nie sięgają na obce
   hosty (Googlebot ma dostać stronę bez zależności zewnętrznych). */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #ffffff;
  color: var(--body);
  font: 16px/1.6 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { max-width: 820px; margin: 0 auto; padding: 0 20px 64px; }
h1 { font-size: 2.2rem; line-height: 1.2; letter-spacing: -.02em; margin: 10px 0 6px; color: var(--ink); }
h2 { font-size: 1.35rem; letter-spacing: -.01em; margin: 34px 0 12px; color: var(--ink); }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }
/* Okruszki i listy pozostają rozpoznawalne jako linki dzięki kolorowi;
   podkreślenie pojawia się dopiero pod kursorem, tak jak na landingu. */

/* Nawigacja — ciemny pasek jak w `Nav.astro` landingu. */
.pasek {
  background: var(--slate);
  color: var(--on-dark);
}
/* Szerokość jak `Nav.astro` landingu (max-w-[1280px], px-5 / md:px-10).
   Sama treść zostaje wąska (820 px) — to szerokość wygodna do czytania —
   ale pasek i stopka muszą się zgadzać, inaczej logo przeskakuje w bok
   przy przejściu ze strony głównej do katalogu. */
.pasek-wnetrze {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  max-width: 1280px; margin: 0 auto; padding: 14px 20px;
}
@media (min-width: 768px) {
  .pasek-wnetrze, .stopka-wnetrze { padding-left: 40px; padding-right: 40px; }
}
.marka { font-weight: 600; text-decoration: none; color: var(--on-dark); }
/* Na ciemnym pasku `--primary` niemal znika (kontrast ok. 2:1), a kropka
   jest częścią nazwy marki. Akcent pomarańczowy odpowiada ikonie logo
   na landingu i jest czytelny. */
.kropka { color: var(--accent); }
.pasek-linki { display: flex; align-items: center; gap: 18px; font-size: .9rem; }
.pasek-linki a { color: var(--on-dark-muted); text-decoration: none; }
.pasek-linki a:hover { color: #ffffff; }
.pasek-cta {
  background: var(--primary); color: #ffffff !important;
  padding: 8px 16px; border-radius: 8px; font-weight: 600;
}
.pasek-cta:hover { background: var(--primary-hover); }

.okruszki {
  max-width: 820px; margin: 0 auto; padding: 14px 20px 12px;
  font-size: .85rem; color: var(--body-2);
}
.okruszki a { color: var(--body-2); }

.status {
  display: inline-block; font-size: .8rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
}
.status--aktywny { background: var(--good-tint); color: var(--good); border: 1px solid var(--good-border); }
.status--zamkniety { background: var(--surface); color: var(--body-2); border: 1px solid var(--line-2); }

.zamawiajacy { color: var(--body-2); margin-bottom: 8px; }
.wstep { color: var(--body-2); margin: 8px 0 16px; }

dl {
  display: grid; grid-template-columns: minmax(150px, 34%) 1fr;
  gap: 8px 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 16px;
}
dt { color: var(--body-2); font-size: .9rem; }
dd { font-weight: 500; color: var(--ink); }

.dokumenty ul, .powiazane ul, .co-sprawdzic ul, .wyniki { list-style: none; }
.dokumenty li, .powiazane li, .wyniki li {
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
/* Etykieta rodzaju i nazwa pliku jako dwie kolumny. Przy `inline-block`
   długa nazwa zawijała się POD etykietę zamiast trzymać wcięcie — widoczne
   przy załącznikach z długą ścieżką. */
.dokumenty li {
  display: flex; gap: 14px; align-items: baseline;
}
.co-sprawdzic li { padding: 6px 0 6px 18px; position: relative; }
.co-sprawdzic li::before {
  content: "—"; position: absolute; left: 0; color: var(--accent);
}
.rodzaj {
  flex: 0 0 92px; font-size: .75rem;
  font-weight: 600; text-transform: uppercase; color: var(--body-2);
}
.meta { color: var(--body-2); font-size: .85rem; }
.podtytul { color: var(--body-2); font-size: .85rem; margin-top: 6px; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
th { color: var(--body-2); font-weight: 600; }
/* Wąskie ekrany: tabela przewija się sama, strona NIE. */
.przedmiar { overflow-x: auto; }

.cta {
  background: var(--primary-tint); border: 1px solid var(--line);
  border-radius: 10px; padding: 20px; margin-top: 32px;
}
.cta h2 { margin-top: 0; }
.przycisk {
  display: inline-block; margin-top: 12px; padding: 10px 18px;
  background: var(--primary); color: #fff; border-radius: 8px;
  text-decoration: none; font-weight: 600;
}
.przycisk:hover { background: var(--primary-hover); color: #fff; }
.zrodlo { margin-top: 20px; font-size: .9rem; color: var(--body-2); }

.paginacja {
  display: flex; gap: 16px; align-items: center; justify-content: center;
  margin-top: 28px; font-size: .9rem; color: var(--body-2);
}

/* Stopka — ciemna, jak `Footer.astro` landingu. */
.stopka {
  background: var(--slate-deep);
  color: var(--on-dark-muted);
  font-size: .85rem;
}
.stopka-wnetrze {
  max-width: 1280px; margin: 0 auto; padding: 32px 20px 40px;
}
.stopka a { color: var(--on-dark-muted); }
.stopka a:hover { color: #ffffff; }
.stopka .drobne { color: var(--on-dark-faint); margin-top: 10px; }

.blad { padding: 48px 0; }

/* Trybu ciemnego NIE ma: landing jest zawsze jasny, więc katalog też —
   inaczej użytkownik z ciemnym systemem widziałby dwa różne serwisy. */

@media (max-width: 560px) {
  dl { grid-template-columns: 1fr; gap: 2px 0; }
  dt { margin-top: 10px; }
  .pasek-wnetrze { flex-wrap: wrap; }
}