/* Baza wiedzy NIS2/UKSC - wspolny arkusz stylow (statyczny, bez frameworkow) */

/* Role kolorow z kanonu (submarka_nis2, sekcja docs/SPOJNOSC-WIZUALNA.md):
   burgund niesie akcje, turkus wynik, zloto termin. Wczesniej caly arkusz
   mial jeden kolor akcentowy `--rust` ustawiony na turkus, wiec przycisk
   „Sprawdz, czy podlegasz" i etykieta „Kwalifikacja" mialy ten sam kolor:
   nic nie mowilo, ktore z nich jest do klikniecia.

   Fiolet (przelamanie) nie ma tu zastosowania: baza wiedzy nie ma elementu
   wypadajacego z ciagu, a slowo w naglowku odpadlo razem z wersja z kreska. */
:root {
  /* Ciche tlo to turkus 5% na bieli, nie krem: bez i krem odpadly na landingu
     28.07.2026, a baza wiedzy trzymala jeszcze `--bez-100` (#fff8e8). */
  --paper-2: #F3F9F8;
  --ink: #17233D;
  --ink-soft: #3A4557;
  --slate: #646B78;
  /* Wlos i wlos mocny z landingu. Tutaj linie byly bezowe (#ebe2d3, #d8c8ad),
     wiec kazda ramka i kazda kreska mialy inny odcien niz na ofercie
     i szkoleniach. */
  --line: #E7E4DE;
  --line-strong: #17233D;
  --akcent: #991919;
  --akcent-ciemny: #6B0F0F;
  --wynik: #087F78;
  --wynik-ciemny: #0F766E;
  --wynik-tlo: #EDF6F5;
  --zloto: #7D5820;
  /* `--rust` zostaje pod stara nazwa, bo siedzi w kilkudziesieciu regulach,
     ale od teraz znaczy „akcja" i ma wartosc burgundu. */
  --rust: var(--akcent);
  --navy: #17233D;
  --gold: var(--zloto);
  --radius: 8px;
  --max: 1180px;
  --prose: 720px;
  --sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Outfit", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; text-wrap: pretty; overflow-x: hidden; }
body.nav-open { overflow: hidden; }
a { color: var(--rust); }
/* Naglowki w Outfit, waga 600, ten sam odstep liter co na landingu
   i szkoleniach. Caly serwis w Outfit od 10.08.2026. */
h1, h2, h3 { font-family: Outfit, var(--sans); font-weight: 600; letter-spacing: -.024em; color: var(--ink); text-wrap: balance; margin-top: 0; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.skip { position: absolute; left: 14px; top: 10px; z-index: 100; transform: translateY(-140%); background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--radius); }
.skip:focus { transform: translateY(0); }

/* header */
/* Pasek u gory pochodzi z `nis2-layout.js`, wiec `.gora / .miara / .znak-blok
   / .nawi` nie potrzebuja tu wlasnych regul. Stare `.topbar / .brand / .nav /
   .menu-toggle` (07-08.2026) zostaly usuniete 10.08.2026, bo nic ich juz
   nie uzywa: chrome wstrzykuje wlasne klasy z kanonu. */

/* buttons */
/* Przyciski ida z `nis2-przyciski.css`: klasa `.dzialanie` z wariantami
   `.dzialanie--maly` i `.dzialanie--pusty`. Stare `.btn / .btn.rust /
   .btn.small` (07-08.2026) zostaly usuniete 10.08.2026, bo zadnego juz
   nie ma w HTML (sprawdzone grepem). */

/* breadcrumb */
.crumb { font-size: 12.5px; color: var(--ink-soft); padding: 18px 0 0; }
.crumb a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--rust); }

/* article layout */
.article { padding: 8px 0 40px; }
.article-head { max-width: var(--prose); margin: 0 auto 8px; }
/* Etykieta w tym samym wygladzie co `.brew` z landingu (10.08.2026):
   13 px, waga 500, odstep liter .15em, wersaliki, turkus ciemny, bez
   ramki i bez tla. W baza-wiedzy nie ma selektora `.szyld .brew`, wiec
   reguly z `nis2-strona-glowna.css` nie dodadza ramki. Wlasny margin,
   bo label stoi nad tytulem artykulu i nad imieniem autora. */
.brew { display: inline-block; font-size: 13px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--wynik-ciemny); margin: 16px 0 12px; padding: 0; border: 0; background: none; }
.article h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; margin: 0 0 14px; }
.article-meta { font-size: 13px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }
.prose { max-width: var(--prose); margin: 0 auto; }
.prose > .lead { font-size: 19px; color: var(--ink-soft); margin: 18px 0 26px; }
.prose h2 { font-size: 25px; line-height: 1.25; margin: 40px 0 12px; scroll-margin-top: 92px; }
.prose h3 { font-size: 19px; margin: 26px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose strong { color: var(--ink); }
/* „Krotko" to rozstrzygniecie tematu, czyli wynik: turkus. */
.answer { border-left: 3px solid var(--wynik); background: var(--wynik-tlo); padding: 16px 18px; border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 26px; font-size: 16px; }
.answer strong { color: var(--ink); }
.callout { border: 1px solid var(--line-strong); border-left: 3px solid var(--zloto); background: var(--paper-2); padding: 14px 18px; border-radius: var(--radius); margin: 22px 0; font-size: 15px; }

/* table */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--radius); margin: 22px 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--paper-2); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 700; }

/* toc */
.toc { max-width: var(--prose); margin: 0 auto 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.toc strong { display: block; font-size: 13px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--wynik-ciemny); margin-bottom: 10px; }
.toc ol { margin: 0; padding-left: 18px; font-size: 14.5px; }
.toc li { margin-bottom: 5px; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--rust); text-decoration: underline; }

/* author + faq + cta */
.author { max-width: var(--prose); margin: 34px auto 0; display: flex; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; }
.author .ava { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--navy), var(--wynik)); display: grid; place-items: center; color: #fff; font-weight: 800; }
.author .ava img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.author-role { font-size: 13px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--wynik-ciemny); }
.author h3 { font-size: 23px; margin: 2px 0 4px; }
.author p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.faq { max-width: var(--prose); margin: 34px auto 0; }
.faq h2 { font-size: 22px; margin: 0 0 10px; }
details { border-bottom: 1px solid var(--line); padding: 16px 0; }
summary { cursor: pointer; font-weight: 700; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
/* Znacznik rozwiniecia byl znakiem pisma („+" i polpauza). Teraz to ikona
   Tabler, ta sama kreska co reszta serwisu, obracana przy otwarciu. */
.summary__znak { flex: none; width: 24px; height: 24px; color: var(--rust); transition: transform .16s ease; }
details[open] .summary__znak { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .summary__znak { transition: none; } }
details p { margin: 10px 0 0; color: var(--ink-soft); font-size: 15px; }
/* Naglowek z kreska do prawej krawedzi zaklada wyrownanie do lewej. Przy
   srodkowaniu tytul stal po lewej, a tekst pod nim po srodku, wiec blok
   wygladal jak dwa rozne komponenty sklejone razem. */
.cta-box { max-width: var(--prose); margin: 34px auto 0; padding: 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line-strong); text-align: left; }
.cta-box h2 { font-size: 22px; margin: 0 0 8px; }
.cta-box p { color: var(--ink-soft); margin: 0 0 18px; max-width: 52ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.disclaimer { max-width: var(--prose); margin: 28px auto 0; font-size: 12.5px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 16px; }
.related { max-width: var(--prose); margin: 34px auto 0; }
.related strong { display: block; font-size: 13px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--wynik-ciemny); margin-bottom: 10px; }
.related a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px; margin-bottom: 8px; }
.related a:hover { border-color: var(--rust); }

/* hub */
/* Tlo sekcji biale. Gradient schodzil do kremu (`--bez-050`), czyli koloru,
   ktory wypadl z palety razem z bezem; obok bieli landingu czytal sie jak
   zolty nalot. */
.hub-hero { position: relative; overflow: hidden; padding: 46px 0 30px; background: #fff; border-bottom: 1px solid var(--line); }
/* Grafika hero dokladnie tym samym zabiegiem co na landingu: teczka
   z dokumentami (rodzina v3) jako tlo calej prawej strony pasa, cover,
   przygaszona, maska rozpuszcza lewa krawedz. Obraz jest wiekszy niz pas
   w obu osiach, wiec zadna krawedz prostokata nie wchodzi do kadru. */
.hub-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/img/baza-wiedzy-hero.webp") right center / cover no-repeat;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to right, transparent 38%, #000 74%);
          mask-image: linear-gradient(to right, transparent 38%, #000 74%);
}
.hub-hero .wrap { position: relative; z-index: 1; }
@media (max-width: 980px) { .hub-hero::after { display: none; } }
.hub-hero h1 { font-size: clamp(28px, 4vw, 40px); max-width: 18ch; margin: 10px 0 12px; }
.hub-hero p { font-size: 18px; color: var(--ink-soft); max-width: 60ch; margin: 0; }
.cluster { padding: 40px 0 8px; }
.cluster h2 { font-size: 22px; margin: 0 0 4px; }
.cluster .desc { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 18px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; text-decoration: none; color: var(--ink); transition: transform .14s ease, border-color .14s ease; }
.card:hover { transform: translateY(-2px); border-color: var(--rust); }
.card .k { font-size: 13px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--wynik-ciemny); margin-bottom: 8px; }
.card h3 { font-size: 17px; margin: 0 0 6px; line-height: 1.3; }
.card p { font-size: 13.5px; color: var(--ink-soft); margin: 0; }
.card.soon { background: var(--paper-2); border-style: dashed; cursor: default; opacity: .8; }
.card.soon:hover { transform: none; border-color: var(--line-strong); }
.card .badge { margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 700; color: var(--gold); }

/* footer */
/* Stopka to jedyna ciemna strefa na stronie. Opis stal w bieli 86% na
   najjasniejszym koncu gradientu, co dawalo kontrast 4.03, ponizej progu.
   Pelna biel i ciemniejszy start gradientu podnosza go do 5,5. */
/* tlo i uklad stopki: wspolny arkusz nis2-stopka.css (konwencja .footer/.stopka) */
.footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.footer a { display: inline-flex; align-items: center; min-height: 24px; color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } .prose { font-size: 16px; } }


/* ==========================================================================
   CZYTELNIA - lista artykulow w duchu kwalifikatora.

   Zamiast siatki siedemnastu kafli, z ktorych czternascie bylo puste
   („Wkrotce"), lista pokazuje wylacznie to, co naprawde istnieje.
   Jedna rzecz na wiersz, duza typografia, hover przesuwa tresc w prawo -
 ten sam jezyk co ekrany pytan w kwalifikatorze.
   ========================================================================== */

.hub-hero h1 {
 font-size: clamp(34px, 5vw, 56px);
 line-height: 1.04;
 max-width: 18ch;
 margin-bottom: 18px;
}
.hub-lead {
 font-size: 19px;
 line-height: 1.55;
 color: var(--ink-soft);
 max-width: 46ch;
}

.czytelnia {
 list-style: none;
 margin: 64px 0 0;
 padding: 0;
 border-top: 1px solid var(--line);
}
.czytelnia li { border-bottom: 1px solid var(--line); }
.czytelnia a {
 display: flex;
 align-items: flex-start;
 gap: 28px;
 padding: 34px 4px;
 text-decoration: none;
 color: inherit;
 transition: padding-left 180ms ease, color 180ms ease;
}
.czytelnia a:hover { padding-left: 14px; color: var(--rust); }
.czytelnia a:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }

.czytelnia-nr {
 flex: 0 0 auto;
 font-size: 14px;
 font-weight: 600;
 letter-spacing: 0.1em;
 color: var(--wynik-ciemny);
 padding-top: 6px;
 min-width: 34px;
}
.czytelnia-tresc { flex: 1; min-width: 0; }
/* Tytul pozycji jest naglowkiem w roli spanu, wiec kroj trzeba mu podac
   wprost: bez tego lista artykulow byla jedynym miejscem w serwisie,
   gdzie tytul stal w kroju tekstowym przed ujednoliceniem na Outfit. */
.czytelnia-tytul {
 display: block;
 font-family: Outfit, var(--sans);
 font-size: clamp(22px, 2.6vw, 30px);
 font-weight: 600;
 line-height: 1.16;
 letter-spacing: -.024em;
 margin-bottom: 8px;
}
.czytelnia-opis {
 display: block;
 color: var(--ink-soft);
 font-size: 16px;
 line-height: 1.55;
 max-width: 58ch;
}
.czytelnia-meta {
 display: block;
 margin-top: 12px;
 font-size: 13px;
 color: var(--slate, #6b7684);
}
.czytelnia-strzalka {
 flex: 0 0 auto;
 align-self: center;
 width: 24px;
 height: 24px;
 color: var(--line-strong);
 transition: transform 180ms ease, color 180ms ease;
}
@media (prefers-reduced-motion: reduce) { .czytelnia-strzalka { transition: none; } }

/* Separator w okruszkach: ikona zamiast strzalki z pisma, bo kroj wstawial
   ja nizej niz linia tekstu. */
.crumb__strzalka { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; color: var(--line-strong); }
.czytelnia a:hover .czytelnia-strzalka { transform: translateX(6px); color: var(--rust); }

/* Zapowiedzi jako zwykly tekst, nie jako kafle udajace gotowa tresc. */
.w-drodze {
 margin: 72px 0 0;
 padding: 34px 0 0;
 border-top: 1px solid var(--line);
}
.w-drodze h2 { font-size: 13px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--wynik-ciemny); margin-bottom: 14px; }
.w-drodze > p { color: var(--ink-soft); font-size: 16px; margin: 0 0 16px; }
.w-drodze ul {
 margin: 0;
 padding: 0;
 list-style: none;
 columns: 2;
 column-gap: 48px;
}
.w-drodze li {
 padding: 7px 0 7px 22px;
 position: relative;
 color: var(--ink-soft);
 font-size: 15px;
 break-inside: avoid;
}
.w-drodze li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 17px;
 width: 10px;
 height: 1px;
 background: var(--line-strong);
}
.w-drodze-nota { margin-top: 22px; font-size: 15px; color: var(--slate, #6b7684); }
/* Odnosnik w zdaniu zostaje w linii tekstu, wiec cel rosnie przez odstep,
   nie przez zmiane display: inline-flex lamalby wiersz w polowie zdania. */
.w-drodze-nota a { display: inline-block; padding-block: 3px; }

/* Domkniecie: jedna akcja, nic obok niej. */
.domkniecie {
 margin: 80px 0 0;
 padding: 48px 0 0;
 border-top: 1px solid var(--line);
}
.domkniecie h2 {
 font-size: clamp(24px, 3.2vw, 34px);
 font-weight: 600;
 line-height: 1.16;
 margin-bottom: 12px;
}
.domkniecie p { color: var(--ink-soft); font-size: 17px; margin: 0 0 26px; max-width: 44ch; }

@media (max-width: 620px) {
  .czytelnia { margin-top: 40px; }
  .czytelnia a { gap: 16px; padding: 26px 2px; }
  .czytelnia-strzalka { display: none; }
  .w-drodze ul { columns: 1; }
  .domkniecie .btn { width: 100%; }
}


/* ==========================================================================
   ARTYKUL - warstwa czytania.

   Tekst prawniczo-techniczny czyta sie dlugo, wiec typografia ma pracowac
 na komfort, nie na gestosc. Szerokosc kolumny blizej 66 znakow, wiekszy
 stopien pisma, wiecej powietrza wokol naglowkow.
   ========================================================================== */

.article { padding: 24px 0 64px; }

.article-head {
 margin-bottom: 40px;
 padding-bottom: 32px;
 border-bottom: 1px solid var(--line);
}
.article h1 {
 font-size: clamp(32px, 4.6vw, 50px);
 line-height: 1.06;
 margin: 10px 0 18px;
 max-width: 20ch;
}
.article-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 18px;
 font-size: 14px;
 color: var(--slate, #6b7684);
}

/* Stopien i interlinia z landingu: 16 px na 26,4. Kolumna artykulu stala
   na 18 px i 1.72, wiec ten sam akapit mial inna miare po dwoch stronach
   klikniecia. Komfort dlugiego czytania niesie tu szerokosc kolumny
   (720 px, okolo 66 znakow), nie wiekszy krok pisma. */
.prose { font-size: 16px; line-height: 1.65; }
.prose p { margin: 0 0 20px; }
/* Odstep liter zostaje taki jak w reszcie serwisu (-.024em z landingu);
   wczesniej naglowki w kolumnie tekstu zerowaly go i mialy szersza siatke
   liter niz te same tytuly na ofercie. */
.prose h2 {
 font-size: clamp(23px, 2.6vw, 30px);
 line-height: 1.2;
 letter-spacing: -.03em;
 margin: 56px 0 16px;
}
.prose h3 { font-size: 23px; margin: 36px 0 10px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }
.prose li { margin-bottom: 10px; }
.prose strong { font-weight: 600; }

/* „W skrocie" - to ma byc pierwsza rzecz, ktora ktos przeczyta, a nie
 szara ramka do pominiecia. */
.toc {
 margin: 0 auto 44px;
 padding: 0 0 0 20px;
 border: 0;
 border-left: 2px solid var(--wynik);
 border-radius: 0;
 background: transparent;
}
.toc strong { margin-bottom: 12px; }
.toc ol { margin: 0; padding-left: 18px; }
.toc li { margin-bottom: 6px; font-size: 15px; }
/* Odnosniki w kolumnie tekstu maja 18-22 px wysokosci wiersza, czyli mniej
   niz prog 24 px z WCAG 2.5.8. Odstep wewnetrzny powieksza pole klikniecia
   i nie rusza ukladu: element zostaje inline, wiec dlugi odnosnik nadal
   lamie sie miedzy slowami. */
.toc a { color: var(--ink-soft); text-decoration: none; padding-block: 3px; }
.toc a:hover { color: var(--rust); text-decoration: underline; }
.prose a { padding-block: 3px; }

/* Wyroznienia: ciensza kreska zamiast pelnej ramki z tlem. Boks w boksie
 rozbija rytm czytania. */
.callout {
 border: 0;
 border-left: 2px solid var(--zloto);
 background: transparent;
 padding: 4px 0 4px 20px;
 margin: 28px 0;
 border-radius: 0;
 font-size: 17px;
 color: var(--ink-soft);
}

@media (max-width: 620px) {
  .article { padding: 12px 0 48px; }
  .article-head { margin-bottom: 28px; padding-bottom: 22px; }
  .prose h2 { margin-top: 40px; }
}

.cta-drugorzedne {
 margin: 16px 0 0;
 font-size: 15px;
 color: var(--slate, #6b7684);
}
.cta-drugorzedne a { color: var(--slate, #6b7684); text-decoration: underline; text-underline-offset: 3px; padding-block: 3px; }
.cta-drugorzedne a:hover { color: var(--rust); }

/* Cele dotyku: minimum 44 px wysokosci wszedzie, gdzie sie klika.
   Powiekszamy obszar klikalny, nie sam element - uklad zostaje bez zmian. */
@media (max-width: 840px) {
  .btn.small { min-height: 44px; }
  .nav a,
  .crumb a,
  .toc a,
  .prose a,
  .footer a,
  .cta-drugorzedne a,
  .w-drodze-nota a {
 display: inline-flex;
 align-items: center;
 min-height: 44px;
  }
  /* Linki w spisie tresci i w akapitach zostaja inline - powiekszanie ich
 do 44 px rozbiloby liste i lamalo wiersze tekstu. Zamiast tego dajemy
 odstep miedzy celami: WCAG dopuszcza mniejszy cel, gdy sasiedzi sa
 dostatecznie daleko. */
  .prose a { display: inline; min-height: 0; }
  .toc a { display: inline; min-height: 0; }
  .toc li { margin-bottom: 0; padding-block: 10px; }
  .footer a { padding-block: 2px; }
}

/* ==========================================================================
   REDESIGN 10.08.2026 - redakcyjny szkielet artykułu.

   Cztery rzeczy, ktore ten arkusz wprowadza w stosunku do poprzedniej
   wersji (493 linii, szablon jednego autorstwa):
   1. Drop cap na pierwszym akapicie artykulu.
   2. Pull quote zamiast calloutowego `Krotko` - burgundowa kreska z lewej,
      duzy cytat, bez ramki.
   3. Sticky TOC w sidebarze na desktopie, chowana w `<details>` na mobilu.
   4. Crosslinks jako karty (zamiast plaskiej listy) - tytul, czas, strzalka.
   Artykulom dedykowane wizualizacje (drzewko, tabela, os czasu, flow)
   sa wstawiane jako `<figure class="diagram">` z inline SVG.
   ========================================================================== */

/* --- layout: 2 kolumny na desktopie --------------------------------------- */

.article-grid {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}
@media (min-width: 920px) {
  .article-grid { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .toc-side { position: sticky; top: 92px; align-self: start; }
}

/* --- spis tresci: desktop sidebar / mobile harmonijka -------------------- */

.toc { font-size: 14px; }
.toc strong {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--wynik-ciemny); margin-bottom: 12px;
}
.toc ol, .toc ul { margin: 0; padding-left: 0; list-style: none; }
.toc li { margin-bottom: 8px; }
.toc a {
  color: var(--ink-soft); text-decoration: none;
  display: inline-block; padding: 4px 0;
  border-left: 2px solid transparent; padding-left: 12px; margin-left: -14px;
  transition: color .14s ease, border-color .14s ease;
}
.toc a:hover { color: var(--akcent); border-left-color: var(--akcent); }
.toc a:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; border-radius: 2px; }

/* Na telefonie spis tresci w zwijanym panelu, bo na 626 px nie miesci sie
   obok tekstu i zabiera caly ekran. */
@media (max-width: 919px) {
  .toc { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); }
}
@media (min-width: 920px) {
  .toc { padding: 0; border: 0; background: transparent; }
}

/* --- drop cap na pierwszym akapicie --------------------------------------- */

.prose > p:first-of-type { font-size: 17px; line-height: 1.65; }
.dropcap {
  float: left; font-family: Outfit, ui-sans-serif, sans-serif;
  font-weight: 600; font-size: 64px; line-height: 0.85;
  padding: 6px 10px 0 0; color: var(--akcent);
}

/* --- pull quote: cytat glowny z artykulu ---------------------------------- */

.pullquote {
  margin: 28px 0 32px; padding: 6px 0 6px 24px;
  border-left: 3px solid var(--akcent);
  font-size: 19px; line-height: 1.55; color: var(--atrament);
  font-weight: 500;
}
.pullquote p { margin: 0; }
.pullquote strong { font-weight: 600; color: var(--akcent-ciemny); }

/* --- diagram (inline SVG wewnatrz artykulu) ------------------------------ */

.diagram {
  margin: 36px 0; padding: 28px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2);
}
.diagram svg { display: block; width: 100%; height: auto; max-width: 720px; margin: 0 auto; }
.diagram figcaption {
  margin-top: 14px; font-size: 13px; color: var(--slate, #6b7684);
  text-align: center;
}
.diagram text { font-family: Outfit, ui-sans-serif, sans-serif; }

/* --- crosslinks: karty powiazanych artykulow ------------------------------ */

.crosslinks {
  margin: 48px 0 24px; padding-top: 32px;
  border-top: 1px solid var(--line);
}
.crosslinks h2 {
  font-size: 13px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--wynik-ciemny);
  margin: 0 0 18px;
}
.crosslinks__grid {
  display: grid; gap: 14px;
}
@media (min-width: 720px) {
  .crosslinks__grid { grid-template-columns: 1fr 1fr; }
}
.crosslink {
  display: grid; gap: 6px; padding: 18px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  transition: border-color .14s ease, transform .14s ease;
}
.crosslink:hover { border-color: var(--akcent); transform: translateX(4px); }
.crosslink:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
.crosslink-meta {
  font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--wynik-ciemny);
}
.crosslink-title {
  font-family: Outfit, ui-sans-serif, sans-serif;
  font-size: 17px; font-weight: 600; line-height: 1.3;
  color: var(--ink);
}
.crosslink-desc {
  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
}
.crosslink-time {
  font-size: 12px; color: var(--slate, #6b7684); margin-top: 2px;
}

/* --- prosba o usuniecie: FAQ nie istnieje w nowym szablonie --------------- */
/* Sekcja `<section class="faq">` zostala usunieta 10.08.2026 - pytania
   ida do dedykowanej strony `/baza-wiedzy/pytania` albo zostaja przy
   artykule tylko wtedy, gdy tresc wymaga rozwinięcia. Styl `.faq`
   usuniety razem z plikami. */

/* --- mobilny uklad diagramu ---------------------------------------------- */
@media (max-width: 619px) {
  .diagram { padding: 18px 14px; }
  .pullquote { font-size: 17px; padding-left: 18px; }
  .dropcap { font-size: 52px; padding-right: 8px; }
}

/* --- byline z avatarem inline ------------------------------------------- */

.byline { display: inline-flex; align-items: center; gap: 8px; }
.byline__ava { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

/* --- editorial pathway (typograficzny, bez SVG) --------------------------- */

.as-pathway {
  margin: 40px 0;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.as-eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate, #6b7684);
  margin: 0 0 24px;
}
.as-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 36px; }
.as-step { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; }
.as-num {
  font-family: Outfit, ui-sans-serif, sans-serif;
  font-size: 44px; font-weight: 300; line-height: 1; color: var(--akcent);
  letter-spacing: -.04em;
}
.as-q { font-family: Outfit, ui-sans-serif, sans-serif; font-size: 22px; font-weight: 500; margin: 6px 0 4px; color: var(--atrament); line-height: 1.3; }
.as-hint { font-size: 13px; color: var(--slate, #6b7684); margin: 0 0 14px; font-style: italic; }
.as-outcomes { display: grid; gap: 8px; }
.as-outcomes p { margin: 0; display: flex; gap: 10px; align-items: baseline; line-height: 1.55; }
.as-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 3px; flex-shrink: 0;
  min-width: 38px; text-align: center;
}
.as-tag--yes { color: #fff; background: var(--wynik, #087F78); }
.as-tag--no { color: #fff; background: var(--akcent, #991919); }
.as-note { font-size: 13px; color: var(--slate, #6b7684); margin: 28px 0 0; padding-left: 66px; border-left: 2px solid var(--line); }
@media (max-width: 619px) {
  .as-step { grid-template-columns: 36px 1fr; gap: 14px; }
  .as-num { font-size: 32px; }
  .as-q { font-size: 18px; }
  .as-note { padding-left: 50px; }
}

/* --- editorial compare (Podmiot kluczowy vs ważny) ----------------- */

.as-compare { margin: 40px 0; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.as-compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: 24px; }
.as-cmp-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 6px;
  color: var(--atrament, #17233D);
}
.as-cmp-eyebrow--alt { color: var(--wynik-ciemny, #0F766E); }
.as-cmp-tag { font-size: 13px; color: var(--slate, #6b7684); margin: 0 0 24px; font-style: italic; }
.as-cmp-rows { margin: 0; display: grid; gap: 24px; }
.as-cmp-row { display: block; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.as-cmp-row dt {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate, #6b7684);
  margin: 0 0 6px;
}
.as-cmp-row dd { margin: 0; font-size: 17px; line-height: 1.4; color: var(--atrament); font-weight: 500; }
.as-cmp-big {
  font-family: Outfit, ui-sans-serif, sans-serif;
  font-size: 42px; font-weight: 300; line-height: 1;
  color: var(--akcent, #991919); margin-right: 4px; letter-spacing: -.03em;
}
.as-compare-col--imp .as-cmp-big { color: var(--wynik-ciemny, #0F766E); }
.as-cmp-sub { font-size: 13px !important; color: var(--slate, #6b7684) !important; margin-top: 2px !important; font-weight: 400 !important; font-style: italic; }
@media (max-width: 619px) {
  .as-compare-cols { grid-template-columns: 1fr; gap: 32px; }
  .as-cmp-big { font-size: 36px; }
}

/* --- editorial timeline (vertical, big date numbers) ---------------- */

.as-timeline { margin: 40px 0; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.as-tl-list { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 28px; }
.as-tl-item { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.as-tl-item:last-child { border-bottom: 0; }
.as-tl-num {
  font-family: Outfit, ui-sans-serif, sans-serif;
  font-size: 40px; font-weight: 300; line-height: 1;
  color: var(--slate, #6b7684); margin: 0 0 6px;
  letter-spacing: -.02em;
}
.as-tl-item--active .as-tl-num { color: var(--akcent, #991919); }
.as-tl-unit { font-size: 22px; font-weight: 400; color: var(--slate, #6b7684); margin: 0 4px; }
.as-tl-item--active .as-tl-unit { color: var(--akcent, #991919); }
.as-tl-h { font-family: Outfit, ui-sans-serif, sans-serif; font-size: 19px; font-weight: 600; margin: 0 0 6px; color: var(--atrament); }
.as-tl-d { font-size: 14px; line-height: 1.55; color: var(--ink-soft, #3A4557); margin: 0; }
.as-tl-meta { font-size: 12px; color: var(--slate, #6b7684); font-style: italic; margin-left: 4px; }
.as-tl-eyebrow-2 {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wynik-ciemny, #0F766E);
  margin: 32px 0 14px;
}
.as-tl-continuous { margin: 0; display: grid; gap: 14px; }
.as-tl-cont-item { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.as-tl-cont-item dt {
  font-family: Outfit, ui-sans-serif, sans-serif;
  font-size: 14px; font-weight: 600; color: var(--atrament);
  margin: 0 0 4px;
}
.as-tl-cont-item dd { margin: 0; font-size: 13px; color: var(--ink-soft, #3A4557); line-height: 1.55; }
.as-tl-cont-item dd a { color: var(--akcent, #991919); text-decoration: none; }
.as-tl-cont-item dd a:hover { text-decoration: underline; }

/* --- editorial flow (Zgłoszenie incydentu, numbered stations) ----- */

.as-flow { margin: 40px 0; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.as-flow-steps { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 0; }
.as-flow-step {
  display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: start;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.as-flow-step:last-child { border-bottom: 0; }
.as-flow-step--end .as-flow-time--end { font-size: 48px; }
.as-flow-time {
  font-family: Outfit, ui-sans-serif, sans-serif;
  font-size: 36px; font-weight: 300; line-height: 1;
  color: var(--akcent, #991919); margin: 0;
  letter-spacing: -.03em;
}
.as-flow-step--end .as-flow-time { color: var(--wynik-ciemny, #0F766E); }
.as-flow-unit { font-size: 18px; font-weight: 400; margin-left: 4px; color: var(--slate, #6b7684); }
.as-flow-h { font-family: Outfit, ui-sans-serif, sans-serif; font-size: 19px; font-weight: 600; margin: 0 0 6px; color: var(--atrament); }
.as-flow-d { font-size: 14px; line-height: 1.55; color: var(--ink-soft, #3A4557); margin: 0; }
@media (max-width: 619px) {
  .as-flow-step { grid-template-columns: 1fr; gap: 12px; }
  .as-flow-time { font-size: 30px; }
}