/* ===========================================================================
   SEMANAT — KNOWLEDGE VISUAL SYSTEM  (rework 02)
   ---------------------------------------------------------------------------
   Komponenty przewodników materiałowych: PP dziś, PE / PA / GF / talk / CaCO3 /
   EVA / TPE później. Nic tu nie wie nic o konkretnym materiale.

   Rework 01 naprawił konstrukcję: jeden grid, trzy typy tabel, rytm sekcji.
   Rework 02 naprawia WYGLĄD. Diagnoza właściciela po obejrzeniu zrzutów:
   „za blado, za miękko, za dokumentowo”. Cztery decyzje:

   1. KOLOR MA ZNACZENIE. Granat = wiedza techniczna, dane, dowód. Zieleń =
      działanie handlowe. Bursztyn = ograniczenie, którego nie wolno przeoczyć.
      Szarość = stan nieznany. Nie kolorujemy sekcji dla ozdoby.

   2. PASMA ROZDZIAŁÓW SĄ WIDOCZNE. Trzy poziomy tła — biel, pasmo techniczne,
      pasmo handlowe — na całej szerokości powłoki, z kreską akcentu u góry.
      Miniatura całej strony ma pokazywać rytm, a nie jedną białą taśmę.

   3. PANELE DANYCH ZAMIAST GOŁYCH TABEL. Tabela, wykres i rysunek są panelem:
      granatowa kreska u góry, nagłówek, powierzchnia. Nagłówek macierzy
      technicznej jest pełnym granatem z białym tekstem, a nie bladą kreską.

   4. ETYKIETA MA PRAWO DO SWOJEJ SZEROKOŚCI. Poprzedni układ kart pozwalał
      kolumnie wartości zjeść kolumnę etykiety do zera — „Typowy kierunek”
      renderował się pionowo, litera po literze. Kolumna etykiety ma dolne
      ograniczenie w pikselach, a nie udział procentowy. --knowledge-label-min.

   Tokeny motywu (--sem-*) bez zmian: żadnej nowej palety, żadnej biblioteki,
   żadnego zewnętrznego zasobu.
   =========================================================================== */

/* ------------------------------------------------------------------ tokeny -- */
.sem-k {
  /* szerokości — relacja jest ważniejsza niż same liczby */
  --knowledge-reading-width: 760px;
  --knowledge-wide-width: 1120px;
  --knowledge-shell-width: 1200px;

  /* rytm */
  --knowledge-gap-section: 88px;
  --knowledge-gap-block: 26px;
  --knowledge-band-bleed-y: 44px;
  --knowledge-band-bleed-x: 10px;

  /* tabele i panele */
  --knowledge-cell-padding-y: 13px;
  --knowledge-cell-padding-x: 20px;
  /* Najmniejsza dopuszczalna szerokość kolumny etykiety. Poniżej ~120 px polskie
     etykiety zaczynają łamać się w środku wyrazu; to jest ten próg, nie estetyka. */
  --knowledge-label-min: 132px;

  /* --- role kolorów ---------------------------------------------------------
     GRANAT / BŁĘKIT  wiedza techniczna, dane, normy, dowód, wykresy
     ZIELEŃ           działanie, handel, trasa kupna i sprzedaży
     BURSZTYN         ograniczenie, ostrzeżenie, „nie wyciągaj takiego wniosku”
     SZAROŚĆ          treść zwykła i stan nieznany                              */
  --k-tech-900: var(--sem-navy-900);
  --k-tech-800: var(--sem-navy-800);
  --k-tech-700: var(--sem-blue-700);
  --k-tech-600: var(--sem-blue-600);
  --k-tech-100: var(--sem-blue-100);
  --k-tech-050: var(--sem-blue-050);
  --k-tech-band: #E7F0F9;

  --k-act-700: var(--sem-green-700);
  --k-act-600: var(--sem-green-600);
  --k-act-100: var(--sem-green-100);
  --k-act-050: var(--sem-green-050);
  --k-act-band: #E9F4EE;

  --k-warn-700: #7F440F;
  --k-warn-600: #A8621B;
  --k-warn-100: #F6E6D2;
  --k-warn-050: #FDF6EC;

  /* powierzchnie — pięć rodzin, nie pięćdziesiąt odcieni */
  --knowledge-surface-data: #FFFFFF;
  --knowledge-surface-evidence: var(--k-tech-050);
  --knowledge-surface-warn: var(--k-warn-050);
  --knowledge-surface-action: var(--k-act-050);
  --knowledge-surface-muted: #F4F7F9;
  --knowledge-line: var(--sem-border);
  --knowledge-line-soft: #E6ECF1;

  /* Tekst główny przewodnika jest ciemniejszy od domyślnego tekstu serwisu.
     Strona techniczna czytana przez pół godziny nie może być jasnoszara. */
  --k-ink: var(--sem-ink);
  --k-body: #2A333A;
  --k-soft: #3A444C;
  --k-muted: #5B6873;
  --k-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --k-radius: 12px;
}

/* ------------------------------------------------------- powłoka przewodnika -- */
/* Kontener artykułu Elementora ma domyślnie 860 px i stoi przy lewej krawędzi
   powłoki 1200 px — stąd pusty pas po prawej. Dla przewodnika bierzemy całą
   powłokę; podziałem na kolumny zajmuje się grid sekcji, nie kontener. */
body.semanat-v2 .sem-article.sem-guide,
body.semanat-v2 .sem-article.sem-guide > .e-con-inner {
  max-width: 100%;
  width: 100%;
  /* 10 px to ta sama rynna, którą ma hero — dzięki temu H1 i pierwszy akapit startują z tej samej krawędzi. */
  padding-left: 10px;
  padding-right: 10px;
}

/* --------------------------------------------------------------- grid sekcji -- */
body.semanat-v2 .sem-k {
  display: grid;
  grid-template-columns:
    [full-start wide-start read-start] minmax(0, var(--knowledge-reading-width)) [read-end]
    minmax(0, calc(var(--knowledge-wide-width) - var(--knowledge-reading-width))) [wide-end]
    minmax(0, 1fr) [full-end];
  row-gap: var(--knowledge-gap-block);
  align-content: start;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--k-body);
  margin: 0 0 var(--knowledge-gap-section);
  position: relative;
}
body.semanat-v2 .sem-k > * { grid-column: read-start / read-end; min-width: 0; }
body.semanat-v2 .sem-k > .k-wide { grid-column: wide-start / wide-end; }
body.semanat-v2 .sem-k > .k-full { grid-column: full-start / full-end; }
/* Nagłówek rozdziału bierze szeroką kolumnę: kreska biegnie wtedy przez całą
   szerokość komponentów, a nie kończy się w połowie strony. To jest landmark. */
body.semanat-v2 .sem-k > .sem-k-h { grid-column: wide-start / wide-end; }

/* ------------------------------------------------- pasma rozdziałów (3 poziomy) */
/* Poziom A — biel: sekcja bez klasy. Poziom B — pasmo techniczne. Poziom C — pasmo
   handlowe. Pseudo-element pozycjonowany bezwzględnie, nie jako element gridu:
   `grid-row: 1 / -1` odnosi się do linii JAWNYCH, a wiersze sekcji są niejawne. */
body.semanat-v2 .sem-k.is-band::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  inset: calc(-1 * var(--knowledge-band-bleed-y)) calc(-1 * var(--knowledge-band-bleed-x));
  border-radius: 0;
  z-index: 0;
}
body.semanat-v2 .sem-k.is-band-tech::before {
  background: var(--k-tech-band);
  border-top: 3px solid var(--k-tech-800);
  border-bottom: 1px solid #CFE0F0;
}
body.semanat-v2 .sem-k.is-band-action::before {
  background: var(--k-act-band);
  border-top: 3px solid var(--k-act-600);
  border-bottom: 1px solid #C7E0D2;
}
body.semanat-v2 .sem-k.is-band > * { position: relative; z-index: 1; }
/* Dwa pasma tego samego rodzaju obok siebie mają zlać się w jeden rozdział, a nie
   mrugnąć kreską w środku: odstęp sekcji równa się sumie dwóch wypływów. */
body.semanat-v2 .sem-k.is-band + .sem-k.is-band::before { border-top: 0; }

/* ----------------------------------------------------------------- typografia -- */
body.semanat-v2 .sem-k h2 {
  font-size: 31px; line-height: 1.18; letter-spacing: -0.017em;
  color: var(--k-ink); margin: 0; font-weight: 700;
}
body.semanat-v2 .sem-k h3 { font-size: 19.5px; line-height: 1.3; color: var(--k-ink); margin: 0 0 8px; font-weight: 650; }
body.semanat-v2 .sem-k h4 { font-size: 15px; line-height: 1.35; color: var(--k-ink); margin: 0 0 6px; font-weight: 600; }
body.semanat-v2 .sem-k p { margin: 0 0 13px; }
body.semanat-v2 .sem-k p:last-child { margin-bottom: 0; }
body.semanat-v2 .sem-k ul, body.semanat-v2 .sem-k ol { margin: 0 0 13px 20px; padding: 0; }
body.semanat-v2 .sem-k li { margin: 0 0 7px; }
body.semanat-v2 .sem-k strong { color: var(--k-ink); font-weight: 650; }
body.semanat-v2 .sem-k code {
  font-family: var(--k-mono); font-size: 0.9em; background: var(--k-tech-050);
  padding: 2px 6px; border-radius: 5px; color: var(--k-tech-800); border: 1px solid var(--k-tech-100);
}
body.semanat-v2 .sem-k > p, body.semanat-v2 .sem-k > ul, body.semanat-v2 .sem-k > ol { max-width: 68ch; }

/* nagłówek rozdziału: kwadrat z numerem, tytuł, kreska do prawej krawędzi komponentów */
body.semanat-v2 .sem-k-h { display: flex; align-items: center; gap: 16px; margin: 0; }
body.semanat-v2 .sem-k-h .n {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--k-tech-800); color: #fff;
  font-family: var(--k-mono); font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
}
body.semanat-v2 .sem-k-h > span + span { flex: 0 1 auto; }
body.semanat-v2 .sem-k-h::after {
  content: ""; flex: 1 1 auto; min-width: 24px; height: 2px; background: var(--k-tech-100); align-self: center;
}
body.semanat-v2 .sem-k.is-band-action .sem-k-h .n { background: var(--k-act-600); }
body.semanat-v2 .sem-k.is-band-action .sem-k-h::after { background: #C7E0D2; }
body.semanat-v2 .sem-k-lead { font-size: 18px; line-height: 1.55; color: var(--k-soft); max-width: 66ch; }

/* podpis pod rysunkiem / tabelą */
body.semanat-v2 .sem-k-cap { font-size: 13.5px; line-height: 1.55; color: var(--k-muted); margin: 10px 0 0; max-width: 84ch; }
body.semanat-v2 .sem-k-cap b { color: var(--k-ink); font-weight: 650; }

/* --------------------------------------------------------------- stany danych -- */
body.semanat-v2 .sem-k-state {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px 3px 7px; border-radius: 4px; border: 1px solid transparent;
  background: var(--knowledge-surface-muted); color: var(--k-soft); vertical-align: middle;
}
body.semanat-v2 .sem-k-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
body.semanat-v2 .sem-k-state.is-measured  { color: #0D5330; background: #E3F1E9; border-color: #C3E0D0; }
body.semanat-v2 .sem-k-state.is-declared  { color: var(--k-tech-800); background: var(--k-tech-050); border-color: var(--k-tech-100); }
body.semanat-v2 .sem-k-state.is-typical   { color: #5E4800; background: #F8F2E0; border-color: #E8DDBC; }
body.semanat-v2 .sem-k-state.is-estimated { color: var(--k-warn-700); background: var(--k-warn-050); border-color: var(--k-warn-100); }
body.semanat-v2 .sem-k-state.is-unknown   { color: #45505A; background: #EDF0F2; border-color: #DBE1E6; }
body.semanat-v2 .sem-k-state.is-unknown::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
body.semanat-v2 .sem-k-state.is-notcomp   { color: #6D3030; background: #F8ECEC; border-color: #E9D3D3; }
body.semanat-v2 .sem-k-state.is-notcomp::before { border-radius: 1px; transform: rotate(45deg); }

body.semanat-v2 .sem-k-conf { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--k-soft); }
body.semanat-v2 .sem-k-conf .sem-k-conf-bars { display: inline-flex; gap: 2px; }
body.semanat-v2 .sem-k-conf i { display: block; width: 4px; height: 14px; border-radius: 1px; background: #D5DCE2; }
body.semanat-v2 .sem-k-conf i.on { background: var(--k-tech-600); }
body.semanat-v2 .sem-k-conf.is-confirmed i.on { background: var(--k-act-600); }

/* --------------------------------------------------------------- nawigacja TOC -- */
body.semanat-v2 .sem-k-nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 2px solid var(--k-tech-800);
  margin: 0 0 var(--knowledge-gap-section);
  padding: 8px 0;
}
/* Spis treści na desktopie: `details` jest paskiem, nie blokiem. Wcześniej etykieta i lista stały jedna pod
   drugą, a lista — jako blok o szerokości min-content — miała 2337 px i była po prostu OBCINANA przez kontener:
   pozycje od ósmej w górę były nieosiągalne mimo `overflow-x: auto`. Pozycje zawijają się teraz do drugiego
   wiersza, więc widać cały spis, a wysokość paska zostaje taka sama. */
body.semanat-v2 .sem-k-nav .in { display: block; }
body.semanat-v2 .sem-k-nav details { min-width: 0; }
body.semanat-v2 .sem-k-nav .lbl {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--k-tech-800); display: block; margin-bottom: 5px; white-space: nowrap;
}
body.semanat-v2 .sem-k-nav ol {
  display: flex; flex-wrap: wrap; gap: 1px 2px; margin: 0; padding: 0; list-style: none;
  counter-reset: k; flex: 1 1 auto; min-width: 0;
}
body.semanat-v2 .sem-k-nav li { margin: 0; counter-increment: k; flex: 0 0 auto; }
body.semanat-v2 .sem-k-nav a {
  display: inline-block; font-size: 12px; line-height: 1.2; padding: 7px 9px; border-radius: 6px;
  color: var(--k-tech-800); text-decoration: none; white-space: nowrap; font-weight: 550;
}
body.semanat-v2 .sem-k-nav a::before {
  content: counter(k, decimal-leading-zero); font-family: var(--k-mono); font-size: 11px;
  color: var(--k-tech-600); margin-right: 7px; font-weight: 700;
}
body.semanat-v2 .sem-k-nav a:hover, body.semanat-v2 .sem-k-nav a:focus-visible { background: var(--k-tech-050); }
body.semanat-v2 .sem-k-nav summary { display: none; }

/* ==================================================== RODZINA 1 — DANE TECHNICZNE */
/* Wykres, rysunek, tabela, karta osi, lista kontrolna. Wspólny znak rozpoznawczy:
   granatowa kreska u góry panelu albo granatowy nagłówek. */
body.semanat-v2 .sem-k-fig,
body.semanat-v2 .sem-k-range,
body.semanat-v2 .sem-k-builder,
body.semanat-v2 .sem-k-identity,
body.semanat-v2 .sem-k-tablewrap {
  background: var(--knowledge-surface-data);
  border: 1px solid var(--knowledge-line);
  border-top: 3px solid var(--k-tech-800);
  border-radius: var(--k-radius);
  overflow: hidden;
}

/* ---------------------------------------------------------------- karta osi -- */
body.semanat-v2 .sem-k-identity > header { padding: 18px 22px 16px; background: var(--k-tech-050); border-bottom: 1px solid var(--k-tech-100); }
body.semanat-v2 .sem-k-identity > header h3 { margin: 0 0 3px; color: var(--k-tech-800); }
body.semanat-v2 .sem-k-identity > header p { margin: 0; font-size: 13.5px; color: var(--k-soft); max-width: 78ch; }
body.semanat-v2 .sem-k-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 0; margin: 0; }
body.semanat-v2 .sem-k-axes > div { padding: 16px 22px 18px; border-top: 1px solid var(--knowledge-line-soft); border-right: 1px solid var(--knowledge-line-soft); min-width: 0; }
body.semanat-v2 .sem-k-axes > div:last-child { border-right: 0; }
body.semanat-v2 .sem-k-axes dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-tech-600); margin: 0 0 6px; }
body.semanat-v2 .sem-k-axes dd { margin: 0; font-size: 15.5px; color: var(--k-ink); font-weight: 650; line-height: 1.35; }
body.semanat-v2 .sem-k-axes dd small { display: block; font-weight: 400; font-size: 12.5px; color: var(--k-muted); margin-top: 6px; line-height: 1.5; }

/* ======================================================================= TABELE */
/* Tabela jest panelem danych, nie arkuszem. Bez kratki wokół komórek, separatory
   poziome, wygodny padding, podpis w roli nagłówka panelu. Różnicę między typami
   robi nagłówek, pierwsza kolumna i grupowanie powierzchni. */
body.semanat-v2 .sem-k-tablewrap > .sem-k-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.semanat-v2 .sem-k-table { width: 100%; border-collapse: collapse; font-size: 14.5px; color: var(--k-body); margin: 0; }
body.semanat-v2 .sem-k-table caption {
  caption-side: top; text-align: left;
  padding: 17px var(--knowledge-cell-padding-x) 14px;
  font-size: 17px; font-weight: 650; color: var(--k-ink); line-height: 1.35;
}
body.semanat-v2 .sem-k-table caption span {
  display: block; font-size: 13.5px; font-weight: 400; color: var(--k-muted); margin-top: 5px; max-width: 84ch; line-height: 1.5;
}
/* Motyw nadrzędny dokłada komórkom `border-right: .8px solid #ddd` — to jest właśnie ta kratka, przez którą
   tabela wygląda jak arkusz. Zerujemy ją tu raz, a potrzebne linie dokładają typy tabel niżej. */
body.semanat-v2 .sem-k-table th,
body.semanat-v2 .sem-k-table td {
  padding: var(--knowledge-cell-padding-y) var(--knowledge-cell-padding-x);
  text-align: left; vertical-align: top; border: 0;
}
body.semanat-v2 .sem-k-table thead th {
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--k-tech-800); white-space: nowrap; padding-top: 12px; padding-bottom: 12px;
  border-bottom: 2px solid var(--k-tech-800); background: var(--k-tech-050);
}
body.semanat-v2 .sem-k-table thead th small {
  display: block; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--k-muted); font-size: 11.5px; margin-top: 3px;
}
body.semanat-v2 .sem-k-table tbody tr + tr > * { border-top: 1px solid var(--knowledge-line-soft); }
body.semanat-v2 .sem-k-table th[scope="row"] { font-weight: 650; color: var(--k-ink); font-size: 15px; }

body.semanat-v2 .sem-k-val {
  display: block; font-family: var(--k-mono); font-variant-numeric: tabular-nums;
  color: var(--k-ink); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em;
}
/* Jednostka jest częścią wyniku, ale nie jest liczbą — mniejsza i spokojniejsza,
   żeby w karcie partii dało się przeczytać samą wartość jednym rzutem oka. */
body.semanat-v2 .sem-k-val i { font-style: normal; font-size: 0.74em; font-weight: 600; color: var(--k-muted); margin-left: 4px; letter-spacing: 0; }
body.semanat-v2 .sem-k-cond { display: block; font-size: 12px; color: var(--k-muted); margin-top: 4px; line-height: 1.45; }

/* --- A. TABELA PORÓWNAWCZA — szybkie skanowanie wariantów obok siebie -------- */
body.semanat-v2 .sem-k-table--compare thead th {
  background: var(--k-tech-100); color: var(--k-tech-800); border-bottom: 3px solid var(--k-tech-800);
}
body.semanat-v2 .sem-k-table--compare thead th:first-child { background: var(--k-tech-050); }
body.semanat-v2 .sem-k-table--compare th[scope="row"] { background: var(--knowledge-surface-muted); font-size: 14px; font-weight: 700; }
body.semanat-v2 .sem-k-table--compare tbody td + td,
body.semanat-v2 .sem-k-table--compare thead th + th { border-left: 1px solid var(--knowledge-line-soft); }

/* --- B. MACIERZ DOWODOWA — gęsta, techniczna, czytana wierszami -------------- */
/* Pełny granat w nagłówku. To jest komponent, o którym właściciel napisał
   „za blade”: kreska pod nagłówkiem nie wystarcza przy ośmiu wierszach. */
body.semanat-v2 .sem-k-table--evidence thead th {
  background: var(--k-tech-800); color: #fff; border-bottom: 0; letter-spacing: 0.1em;
  padding-top: 14px; padding-bottom: 14px;
}
body.semanat-v2 .sem-k-table--evidence thead th small { color: #B9D2EA; }
body.semanat-v2 .sem-k-table--evidence th[scope="row"] { color: var(--k-tech-800); font-weight: 700; }
body.semanat-v2 .sem-k-table--evidence tbody tr:nth-child(odd) > * { background: #F5F9FC; }
body.semanat-v2 .sem-k-table--evidence tbody td:last-child { color: var(--k-muted); }

/* --- C. TABELA DECYZYJNA — dwa panele, nie arkusz ---------------------------- */
/* „Co MFR pomaga ocenić” kontra „czego nie mówi” to dwie przeciwstawne koncepcje.
   Dostają dwie powierzchnie i biały rowek między sobą — czytelnik ma widzieć
   podział, zanim przeczyta pierwszy wiersz. */
body.semanat-v2 .sem-k-table--decision { table-layout: fixed; }
body.semanat-v2 .sem-k-table--decision thead th {
  font-size: 14px; font-weight: 700; letter-spacing: 0.01em; text-transform: none; white-space: normal;
  padding: 16px var(--knowledge-cell-padding-x); border-bottom: 3px solid currentColor;
}
body.semanat-v2 .sem-k-table--decision thead th:first-child { background: var(--k-act-100); color: var(--k-act-700); }
body.semanat-v2 .sem-k-table--decision thead th:last-child  { background: var(--k-warn-100); color: var(--k-warn-700); }
body.semanat-v2 .sem-k-table--decision tbody > tr > * { font-size: 15px; font-weight: 500; color: var(--k-body); }
body.semanat-v2 .sem-k-table--decision tbody > tr > :first-child { background: var(--k-act-050); }
body.semanat-v2 .sem-k-table--decision tbody > tr > :last-child { background: var(--k-warn-050); }
body.semanat-v2 .sem-k-table--decision tbody tr + tr > * { border-top: 1px solid rgba(255, 255, 255, 0.9); }
body.semanat-v2 .sem-k-table--decision tbody td + td,
body.semanat-v2 .sem-k-table--decision tbody th + td,
body.semanat-v2 .sem-k-table--decision thead th + th { border-left: 4px solid #fff; }

/* --- gęsta macierz: sześć kolumn i więcej ------------------------------------ */
body.semanat-v2 .sem-k-tablewrap.is-dense { --knowledge-cell-padding-x: 13px; }
body.semanat-v2 .sem-k-tablewrap.is-dense .sem-k-table { font-size: 14px; }
body.semanat-v2 .sem-k-tablewrap.is-dense .sem-k-table caption { padding-left: 20px; padding-right: 20px; }
body.semanat-v2 .sem-k-tablewrap.is-dense .sem-k-trend { gap: 6px; font-size: 14px; }
body.semanat-v2 .sem-k-tablewrap.is-dense .sem-k-trend b { width: 19px; height: 19px; border-radius: 5px; }

/* --- D. TABELA DANYCH — domyślna, neutralna --------------------------------- */
body.semanat-v2 .sem-k-table--data tbody tr:nth-child(even) > * { background: #F8FAFB; }

/* ----------------------------------------------------------------- trendy ---- */
/* Kierunek zmiany to kluczowy fakt karty, więc wygląda jak fakt, a nie jak przypis. */
body.semanat-v2 .sem-k-trend { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--k-ink); font-weight: 500; }
body.semanat-v2 .sem-k-trend b {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; font-weight: 700; font-family: var(--k-mono);
}
body.semanat-v2 .sem-k-trend.is-up b { background: var(--k-act-100); color: var(--k-act-700); }
body.semanat-v2 .sem-k-trend.is-down b { background: var(--k-warn-100); color: var(--k-warn-700); }
body.semanat-v2 .sem-k-trend.is-flat b { background: #EBEFF2; color: #4E5A64; }
body.semanat-v2 .sem-k-trend.is-var b { background: var(--k-tech-100); color: var(--k-tech-800); }
/* W komórce tabeli i w wierszu karty trend musi być blokiem: `inline-flex` zwija się do szerokości
   najdłuższego słowa, więc „zwykle maleje” łamało się na dwa wiersze po 49 px mimo wolnego miejsca obok. */
body.semanat-v2 .sem-k-table td .sem-k-trend,
body.semanat-v2 .sem-k-table th .sem-k-trend,
body.semanat-v2 .sem-k-card dd .sem-k-trend { display: flex; }
body.semanat-v2 .sem-k-table td .sem-k-trend,
body.semanat-v2 .sem-k-table th .sem-k-trend,
body.semanat-v2 .sem-k-card dd .sem-k-trend { align-items: flex-start; }
body.semanat-v2 .sem-k-table td .sem-k-trend b,
body.semanat-v2 .sem-k-table th .sem-k-trend b,
body.semanat-v2 .sem-k-card dd .sem-k-trend b { margin-top: 1px; }
body.semanat-v2 .sem-k-trend > span { min-width: 0; }

/* Kod typu jest jednym znakiem informacji, a nie wyrazem: „PP-H” w wąskiej kolumnie łamało się po myślniku
   na „PP-” i „H”. Plakietka trzyma go w całości i jest tym samym elementem co plakietka na wykresie. */
body.semanat-v2 .sem-k-tag {
  display: inline-block; white-space: nowrap; font-family: var(--k-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  color: #fff; background: var(--k-tech-800); border-radius: 4px; padding: 3px 7px;
}

/* ============================================ RODZINY 2–5 — panele znaczeniowe */
/* 2. DOWÓD / WYJAŚNIENIE (błękit) · 3. OGRANICZENIE (bursztyn) ·
   4. DZIAŁANIE HANDLOWE (zieleń) · 5. STAN NIEZNANY (szarość). */
body.semanat-v2 .sem-k-note,
body.semanat-v2 .sem-k-warn {
  border-radius: var(--k-radius); padding: 18px 24px; border: 0;
  border-left: 5px solid var(--k-tech-600); background: var(--knowledge-surface-evidence);
}
body.semanat-v2 .sem-k-warn { background: var(--knowledge-surface-warn); border-left-color: var(--k-warn-600); }
body.semanat-v2 .sem-k-note > strong:first-child,
body.semanat-v2 .sem-k-warn > strong:first-child {
  display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px;
  color: var(--k-tech-800); font-weight: 700;
}
body.semanat-v2 .sem-k-warn > strong:first-child { color: var(--k-warn-700); }
body.semanat-v2 .sem-k-note p:last-child, body.semanat-v2 .sem-k-warn p:last-child,
body.semanat-v2 .sem-k-note ul:last-child, body.semanat-v2 .sem-k-warn ul:last-child { margin-bottom: 0; }
body.semanat-v2 .sem-k-note ul, body.semanat-v2 .sem-k-warn ul { margin-left: 18px; }

/* ----------------------------------------------------------- wykres zakresowy -- */
/* Panel danych: nagłówek techniczny na tle, tory z naprzemiennym tłem, mocna oś. */
body.semanat-v2 .sem-k-range { padding: 0; }
body.semanat-v2 .sem-k-range figcaption {
  margin: 0; padding: 18px 24px 16px; background: var(--k-tech-050); border-bottom: 1px solid var(--k-tech-100);
}
body.semanat-v2 .sem-k-range figcaption h3 { margin: 0 0 6px; font-size: 19px; color: var(--k-tech-800); }
body.semanat-v2 .sem-k-range figcaption p { margin: 0; font-size: 13.5px; color: var(--k-muted); max-width: 88ch; line-height: 1.5; }
body.semanat-v2 .sem-k-range .sem-k-rows { display: grid; gap: 0; margin: 0; padding: 6px 0 0; }
body.semanat-v2 .sem-k-row {
  display: grid; grid-template-columns: minmax(var(--knowledge-label-min), 300px) minmax(0, 1fr); gap: 0 24px; align-items: center;
  padding: 11px 24px; border-top: 1px solid var(--knowledge-line-soft);
}
body.semanat-v2 .sem-k-row:first-child { border-top: 0; }
body.semanat-v2 .sem-k-range .sem-k-rows > .sem-k-row:nth-child(even) { background: #F7FAFD; }
body.semanat-v2 .sem-k-row > .lab { font-size: 15.5px; color: var(--k-ink); font-weight: 700; line-height: 1.25; min-width: 0; }
body.semanat-v2 .sem-k-row > .lab .prod { display: block; font-weight: 500; font-size: 11.5px; color: var(--k-muted); letter-spacing: 0.02em; margin-bottom: 2px; }
body.semanat-v2 .sem-k-row > .lab small { display: block; font-weight: 400; font-size: 12.5px; color: var(--k-muted); margin-top: 5px; line-height: 1.4; }
body.semanat-v2 .sem-k-row > .lab .badge {
  display: inline-block; font-family: var(--k-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  color: #fff; background: var(--k-tech-800); border-radius: 4px; padding: 2px 6px; margin-right: 8px; vertical-align: 1px;
}
body.semanat-v2 .sem-k-track { position: relative; height: 34px; }
body.semanat-v2 .sem-k-track::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: #DCE4EB; }
body.semanat-v2 .sem-k-span { position: absolute; top: 12px; height: 9px; border-radius: 999px; background: var(--sem-blue-500); }
body.semanat-v2 .sem-k-dot {
  position: absolute; top: 10px; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%;
  background: #fff; border: 4px solid var(--k-tech-800); box-shadow: 0 0 0 3px #fff;
}
body.semanat-v2 .sem-k-dot.is-alt { border-color: var(--k-act-600); }
/* Wartość jako plakietka nad znacznikiem. Wcześniej był to goły tekst monospace —
   przecinek dziesiętny w „0,25” gubił się przy 12 px i liczba czytała się jak „0 25”. */
body.semanat-v2 .sem-k-dot::after {
  content: attr(data-v); position: absolute; left: 50%; transform: translateX(-50%); top: -22px;
  font-size: 11px; font-family: var(--sem-font); font-variant-numeric: tabular-nums; font-weight: 700;
  color: #fff; background: var(--k-tech-800); padding: 2px 7px; border-radius: 4px; white-space: nowrap; letter-spacing: 0.01em;
}
body.semanat-v2 .sem-k-dot.is-alt::after { background: var(--k-act-600); }
/* Oś dzieli grid z wierszami, więc podziałka stoi nad torem, a nie nad etykietą. */
body.semanat-v2 .sem-k-axis {
  display: grid; grid-template-columns: minmax(var(--knowledge-label-min), 300px) minmax(0, 1fr); gap: 0 24px;
  padding: 0 24px 4px; margin-top: 4px;
}
body.semanat-v2 .sem-k-axis > .t { position: relative; height: 26px; border-top: 2px solid var(--k-tech-800); }
body.semanat-v2 .sem-k-axis span { position: absolute; top: 6px; transform: translateX(-50%); font-size: 11.5px; font-family: var(--k-mono); font-weight: 600; color: var(--k-soft); }
body.semanat-v2 .sem-k-axis span:first-child { transform: none; }
body.semanat-v2 .sem-k-axis span:last-child { transform: translateX(-100%); }
body.semanat-v2 .sem-k-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 12px 24px 16px; font-size: 12.5px; color: var(--k-muted); border-top: 1px solid var(--knowledge-line-soft); }
body.semanat-v2 .sem-k-legend span { display: inline-flex; align-items: center; gap: 7px; }
body.semanat-v2 .sem-k-legend i { width: 11px; height: 11px; border-radius: 50%; border: 3px solid var(--k-tech-800); background: #fff; display: inline-block; }
body.semanat-v2 .sem-k-legend i.alt { border-color: var(--k-act-600); }
body.semanat-v2 .sem-k-legend i.bar { width: 18px; height: 7px; border-radius: 999px; border: 0; background: var(--sem-blue-500); }
body.semanat-v2 .sem-k-range > .sem-k-cap { padding: 0 24px 18px; margin: 0; }

/* ------------------------------------------------------------- figury SVG ----- */
body.semanat-v2 .sem-k-fig { padding: 22px 24px 18px; }
body.semanat-v2 .sem-k-fig > svg { display: block; width: 100%; height: auto; max-width: 100%; margin: 0 auto; }
body.semanat-v2 .sem-k-fig > .k-narrow { display: none; }
body.semanat-v2 .sem-k-fig svg text { font-family: var(--sem-font); }
body.semanat-v2 .sem-k-fig .k-ttl { font-weight: 700; fill: var(--k-tech-800); }
body.semanat-v2 .sem-k-fig .k-lab { fill: var(--k-ink); }
body.semanat-v2 .sem-k-fig .k-lab-strong { fill: var(--k-tech-800); }
body.semanat-v2 .sem-k-fig .k-sub { fill: var(--k-muted); }
body.semanat-v2 .sem-k-fig .k-box { fill: #fff; stroke: #CBD5DE; stroke-width: 1.2; }
body.semanat-v2 .sem-k-fig .k-box-tint { fill: var(--k-tech-050); stroke: #B9D2E8; stroke-width: 1.2; }
body.semanat-v2 .sem-k-fig .k-box-warn { fill: var(--k-warn-050); stroke: #E2C9A6; stroke-width: 1.2; }
body.semanat-v2 .sem-k-fig .k-box-solid { fill: var(--k-tech-800); stroke: none; }
body.semanat-v2 .sem-k-fig .k-on-solid { fill: #FFFFFF; }
body.semanat-v2 .sem-k-fig .k-line { stroke: #97A4AF; stroke-width: 1.5; fill: none; }
body.semanat-v2 .sem-k-fig .k-line-strong { stroke: var(--k-tech-800); stroke-width: 2.2; fill: none; }
/* role semantyczne rysunków — ten sam słownik co panele HTML */
body.semanat-v2 .sem-k-fig .k-chip { fill: var(--k-tech-050); stroke: #B3CDE6; stroke-width: 1.2; }
body.semanat-v2 .sem-k-fig .k-chip-txt { fill: var(--k-tech-800); font-weight: 600; }
body.semanat-v2 .sem-k-fig .k-stripe { fill: #F5F9FC; }
body.semanat-v2 .sem-k-fig .k-rule { stroke: #DCE4EB; stroke-width: 1.4; fill: none; }
body.semanat-v2 .sem-k-fig .k-box-step { fill: #F4F9FD; stroke: #BFD5E9; stroke-width: 1.4; }
body.semanat-v2 .sem-k-fig .k-box-decision { fill: var(--k-warn-050); stroke: #DDBF95; stroke-width: 1.6; }
body.semanat-v2 .sem-k-fig .k-box-trial { fill: var(--k-tech-100); stroke: var(--k-tech-600); stroke-width: 1.8; }
body.semanat-v2 .sem-k-fig .k-box-out { fill: var(--k-act-100); stroke: #A9CDB8; stroke-width: 1.6; }
body.semanat-v2 .sem-k-fig .k-box-gap { fill: #EFF2F4; stroke: #D2DAE0; stroke-width: 1.4; }
/* schematy morfologii i rozkładów — rodzina „to nie są dane pomiarowe” */
body.semanat-v2 .sem-k-fig .k-matrix { fill: #F2F6FA; stroke: #C3D5E6; stroke-width: 1.4; }
body.semanat-v2 .sem-k-fig .k-incl { fill: #B9CFE3; stroke: #7FA3C4; stroke-width: 1.2; }
body.semanat-v2 .sem-k-fig .k-incl.is-bonded { fill: var(--k-act-100); stroke: var(--k-act-600); stroke-width: 1.8; }
body.semanat-v2 .sem-k-fig .k-schem { fill: var(--k-warn-100); stroke: #DDBF95; stroke-width: 1.2; }
body.semanat-v2 .sem-k-fig .k-schem-txt { fill: var(--k-warn-700); }
body.semanat-v2 .sem-k-fig .k-curve { fill: none; stroke: var(--k-tech-800); stroke-width: 2.4; stroke-linejoin: round; }
body.semanat-v2 .sem-k-fig .k-curve.is-b { stroke: var(--k-act-600); stroke-dasharray: 8 5; }

/* ----------------------------------------------------------- karty porównania -- */
body.semanat-v2 .sem-k-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; }
body.semanat-v2 .sem-k-card {
  border: 1px solid var(--knowledge-line); border-radius: var(--k-radius); background: #fff; min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
body.semanat-v2 .sem-k-card > h3 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0;
  padding: 15px 20px 14px; background: var(--k-tech-800); color: #fff; border-bottom: 0;
  font-size: 17.5px; font-weight: 650; line-height: 1.25;
}
body.semanat-v2 .sem-k-card > h3 code {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; background: rgba(255, 255, 255, 0.15);
  color: var(--sem-cyan-300); padding: 3px 8px; border-radius: 4px; border: 0;
}
body.semanat-v2 .sem-k.is-band-action .sem-k-card > h3 { background: var(--k-act-600); }
body.semanat-v2 .sem-k.is-band-action .sem-k-card > h3 code { color: #CDEBD9; }
body.semanat-v2 .sem-k-card > p { margin: 0; padding: 16px 20px 0; font-size: 14.5px; color: var(--k-soft); }
body.semanat-v2 .sem-k-card dl { margin: 14px 0 0; padding: 0 20px 16px; display: grid; gap: 0; }
/* TWARDY DEFEKT REWORKU 01: kolumna wartości była `minmax(0, auto)`, więc brała
   całą swoją szerokość maksymalną, a kolumna etykiety — `minmax(0, 1fr)` —
   dostawała resztę, czyli czasem kilka pikseli. „Typowy kierunek” renderował się
   wtedy pionowo, litera po literze. Etykieta ma teraz dolne ograniczenie w px,
   a wartość jest kolumną elastyczną. Zamiana ról, nie kosmetyka. */
body.semanat-v2 .sem-k-card dl > div {
  display: grid; grid-template-columns: minmax(var(--knowledge-label-min), 0.42fr) minmax(0, 1fr);
  gap: 6px 16px; align-items: start;
  border-top: 1px solid var(--knowledge-line-soft); padding: 11px 0;
}
body.semanat-v2 .sem-k-card dl > div:first-child { border-top: 0; }
body.semanat-v2 .sem-k-card dt {
  font-size: 11px; font-weight: 700; letter-spacing: 0.045em; text-transform: uppercase;
  color: var(--k-tech-600); line-height: 1.4; min-width: 0;
}
body.semanat-v2 .sem-k.is-band-action .sem-k-card dt { color: var(--k-act-700); }
body.semanat-v2 .sem-k-card dd { margin: 0; font-size: 14.5px; color: var(--k-ink); text-align: left; min-width: 0; line-height: 1.45; }

/* -------------------------------------------------------------- karta dowodów -- */
body.semanat-v2 .sem-k-evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; }
body.semanat-v2 .sem-k-evidence > section {
  padding: 16px 20px 18px; border-radius: var(--k-radius); background: var(--knowledge-surface-muted);
  border-top: 3px solid #B8C2CB;
}
body.semanat-v2 .sem-k-evidence > section:nth-child(1) { background: #EBF5EF; border-top-color: var(--k-act-600); }
body.semanat-v2 .sem-k-evidence > section:nth-child(2) { background: var(--k-tech-050); border-top-color: var(--k-tech-600); }
body.semanat-v2 .sem-k-evidence h3 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 11px; font-size: 15px; color: var(--k-ink); }
body.semanat-v2 .sem-k-evidence ul { margin: 0; list-style: none; padding: 0; }
body.semanat-v2 .sem-k-evidence li { font-size: 13.5px; margin: 0 0 8px; padding-left: 15px; position: relative; line-height: 1.5; color: var(--k-body); }
body.semanat-v2 .sem-k-evidence li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.5; }

/* ---------------------------------------------------------------- karta partii -- */
/* Komponent handlowy: wartości jak wskaźniki, nie jak wiersze arkusza. */
body.semanat-v2 .sem-k-lot { border: 1px solid var(--knowledge-line); border-radius: var(--k-radius); background: #fff; overflow: hidden; }
body.semanat-v2 .sem-k-lot > header {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 17px 22px;
  background: var(--k-tech-900);
}
body.semanat-v2 .sem-k-lot > header h3 { margin: 0; color: #fff; font-size: 17.5px; }
body.semanat-v2 .sem-k-lot > header .sem-k-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sem-cyan-300); background: rgba(255, 255, 255, 0.12); border-radius: 4px; padding: 4px 9px;
}
body.semanat-v2 .sem-k-lot dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 0; margin: 0; }
body.semanat-v2 .sem-k-lot dl > div {
  padding: 15px 22px 17px; border-top: 1px solid var(--knowledge-line-soft); border-right: 1px solid var(--knowledge-line-soft);
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
}
body.semanat-v2 .sem-k-lot dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--k-tech-600); }
body.semanat-v2 .sem-k-lot dd { margin: 0; font-size: 14.5px; color: var(--k-ink); line-height: 1.45; }
body.semanat-v2 .sem-k-lot .sem-k-val { font-size: 21px; line-height: 1.15; }
body.semanat-v2 .sem-k-lot .sem-k-val i { font-size: 0.55em; }

/* ---------------------------------------------------------------- rozwijane ---- */
body.semanat-v2 .sem-k-cite { font-size: 12px; color: var(--k-muted); }
body.semanat-v2 .sem-k-cite a { color: var(--k-tech-700); }
body.semanat-v2 details.sem-k-more { border: 1px solid var(--k-tech-100); border-radius: var(--k-radius); background: var(--k-tech-050); }
body.semanat-v2 details.sem-k-more[open] { background: #fff; }
body.semanat-v2 details.sem-k-more > summary {
  cursor: pointer; list-style: none; padding: 15px 20px; font-size: 14.5px; font-weight: 650; color: var(--k-tech-800);
  display: flex; align-items: center; gap: 12px;
}
body.semanat-v2 details.sem-k-more > summary::-webkit-details-marker { display: none; }
body.semanat-v2 details.sem-k-more > summary::before {
  content: "+"; font-family: var(--k-mono); font-size: 15px; line-height: 1; width: 22px; height: 22px;
  background: var(--k-tech-800); color: #fff; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-weight: 700;
}
body.semanat-v2 details.sem-k-more[open] > summary::before { content: "\2212"; }
body.semanat-v2 details.sem-k-more > summary:hover, body.semanat-v2 details.sem-k-more > summary:focus-visible { color: var(--k-tech-900); }
body.semanat-v2 details.sem-k-more > .sem-k-more-body { padding: 4px 20px 20px; }
body.semanat-v2 details.sem-k-more > .sem-k-more-body > *:first-child { margin-top: 0; }

/* --------------------------------------------------------------------- CTA ---- */
/* Dwa moduły handlowe: niebieski dla kupującego, zielony dla dostawcy. To jest
   miejsce, w którym strona przestaje tłumaczyć, a zaczyna proponować transakcję. */
body.semanat-v2 .sem-k-ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 22px; align-items: stretch; }
body.semanat-v2 .sem-k-cta {
  border-radius: var(--k-radius); padding: 0; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--knowledge-line); overflow: hidden;
}
body.semanat-v2 .sem-k-cta > h3 {
  margin: 0; padding: 19px 26px; font-size: 20px; line-height: 1.25; color: #fff; font-weight: 650;
  background: var(--k-tech-800);
}
body.semanat-v2 .sem-k-cta.is-seller > h3 { background: var(--k-act-600); }
body.semanat-v2 .sem-k-cta > .b { padding: 20px 26px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; }
body.semanat-v2 .sem-k-cta p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--k-body); }
body.semanat-v2 .sem-k-cta ul { margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--k-soft); }
body.semanat-v2 .sem-k-cta li { margin: 0 0 8px; padding-left: 22px; position: relative; line-height: 1.45; }
body.semanat-v2 .sem-k-cta li::before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 8px; height: 8px; border-radius: 2px;
  background: var(--k-tech-600);
}
body.semanat-v2 .sem-k-cta.is-seller li::before { background: var(--k-act-600); }
/* Przycisk bazy wiedzy jest wezwaniem HANDLOWYM (prowadzi do kreatora), więc kolor, typografia
   i geometria przychodzą z kanonicznego systemu w style.css — tak samo jak na stronie głównej.
   Wcześniej miał własny granat `--k-tech-800`, wagę 700 i brak wersalików: ta sama akcja wyglądała
   inaczej w bazie wiedzy niż wszędzie indziej. Tu zostaje tylko ustawienie w kolumnie. */
body.semanat-v2 .sem-k-cta .sem-k-go { align-self: flex-start; margin-top: auto; }
body.semanat-v2 .sem-k-cta .sem-k-go:hover, body.semanat-v2 .sem-k-cta .sem-k-go:focus-visible { transform: translateY(-1px); }
body.semanat-v2 .sem-k-cta .sem-k-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* --------------------------------------------------------------- lista kontrolna */
body.semanat-v2 .sem-k-builder { padding: 24px 26px; }
body.semanat-v2 .sem-k-builder > h3 { font-size: 19px; }
body.semanat-v2 .sem-k-builder > p { max-width: 74ch; }
body.semanat-v2 .sem-k-builder fieldset { border: 0; margin: 18px 0 0; padding: 0; }
body.semanat-v2 .sem-k-builder legend { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-tech-600); padding: 0; margin-bottom: 10px; }
body.semanat-v2 .sem-k-opts { display: flex; flex-wrap: wrap; gap: 9px; }
body.semanat-v2 .sem-k-opts label {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--k-body);
  border: 1px solid var(--knowledge-line); border-radius: 8px; padding: 9px 14px; min-height: 42px; box-sizing: border-box; background: #fff;
  transition: border-color var(--sem-transition), background var(--sem-transition);
}
body.semanat-v2 .sem-k-opts label:hover { border-color: var(--k-tech-600); background: var(--k-tech-050); }
body.semanat-v2 .sem-k-opts input { accent-color: var(--k-act-600); width: 16px; height: 16px; margin: 0; }
body.semanat-v2 .sem-k-out { border-top: 2px solid var(--k-tech-800); padding-top: 18px; margin-top: 22px; }
body.semanat-v2 .sem-k-out h4 { margin: 0 0 10px; font-size: 15px; }
body.semanat-v2 .sem-k-out ul { margin: 0 0 0 18px; }
body.semanat-v2 .sem-k-out li { font-size: 14px; margin-bottom: 7px; }
body.semanat-v2 .sem-k-out .sem-k-ok { color: var(--k-act-700); }

/* ------------------------------------------------------------------- źródła ---- */
body.semanat-v2 .sem-k-sources h3 { font-size: 12.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--k-tech-800); margin: 0 0 12px; font-weight: 700; }
body.semanat-v2 .sem-k-sources ul { margin: 0; padding: 0 0 0 18px; }
body.semanat-v2 .sem-k-sources li { font-size: 13.5px; line-height: 1.55; margin-bottom: 10px; break-inside: avoid; }
body.semanat-v2 .sem-k-sources .cols ul { columns: 2; column-gap: 34px; }

/* ============================================================== RESPONSYWNOŚĆ == */
@media (max-width: 1280px) {
  body.semanat-v2 .sem-k { --knowledge-wide-width: 100%; }
}

@media (max-width: 1024px) {
  body.semanat-v2 .sem-k {
    grid-template-columns: [full-start wide-start read-start] minmax(0, 1fr) [read-end wide-end full-end];
    --knowledge-gap-section: 68px;
    --knowledge-band-bleed-y: 34px;
  }
  /* Poniżej 1024 px szeroki rysunek (viewBox 1000) skalowałby się do 0,72 i etykiety spadłyby do 7 px.
     Przechodzimy na układ pionowy, ograniczony w szerokości, żeby z kolei nie urósł w drugą stronę. */
  body.semanat-v2 .sem-k-fig > .k-wide { display: none; }
  body.semanat-v2 .sem-k-fig > .k-narrow { display: block; max-width: 520px; }

  /* Tabela od pięciu kolumn nie mieści się na tablecie bez zmniejszania tekstu — przechodzi w karty
     o jeden próg wcześniej niż tabele wąskie. Deklaracje są powtórzone z progu telefonu celowo:
     media query nie da się sparametryzować, a bliźniacza kopia, która się rozjedzie, byłaby gorsza. */
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg > .sem-k-scroll { overflow: visible; }
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg .sem-k-table,
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg .sem-k-table tbody,
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg .sem-k-table tr,
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg .sem-k-table td,
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg .sem-k-table th { display: block; width: auto; }
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg .sem-k-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg .sem-k-table caption { display: block; width: auto; padding: 0 0 14px; }
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg .sem-k-table tbody tr {
    background: #fff !important; border: 1px solid var(--knowledge-line); border-top: 3px solid var(--k-tech-800);
    border-radius: var(--k-radius); margin: 0 0 14px; padding: 2px 0 8px; overflow: hidden;
  }
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg .sem-k-table tbody tr > * { border-top: 0 !important; border-left: 0 !important; background: transparent !important; }
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg .sem-k-table th[scope="row"] { padding: 14px 18px 8px; font-size: 16.5px; color: var(--k-ink); width: auto; white-space: normal; }
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg .sem-k-table td { border-top: 1px solid var(--knowledge-line-soft) !important; padding: 11px 18px; font-size: 14.5px; }
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg .sem-k-table td::before {
    content: attr(data-l); display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--k-tech-600); margin-bottom: 5px;
  }
  body.semanat-v2 .sem-k-tablewrap.is-cards-lg .sem-k-table td:empty { display: none; }
  body.semanat-v2 .sem-k h2 { font-size: 27px; }
  body.semanat-v2 .sem-k-axes > div { border-right: 0; }
  body.semanat-v2 .sem-k-sources .cols ul { columns: 1; }
}

@media (max-width: 767px) {
  body.semanat-v2 .sem-k {
    font-size: 16px; --knowledge-gap-section: 52px; --knowledge-gap-block: 20px;
    --knowledge-cell-padding-x: 16px; --knowledge-band-bleed-y: 26px; --knowledge-band-bleed-x: 10px;
    --knowledge-label-min: 0px;
  }
  body.semanat-v2 .sem-k h2 { font-size: 22px; }
  body.semanat-v2 .sem-k h3 { font-size: 17.5px; }
  body.semanat-v2 .sem-k-lead { font-size: 16.5px; }
  body.semanat-v2 .sem-k-h { gap: 12px; }
  body.semanat-v2 .sem-k-h .n { width: 32px; height: 32px; border-radius: 8px; font-size: 12.5px; }
  body.semanat-v2 .sem-k-range figcaption { padding: 15px 16px 13px; }
  body.semanat-v2 .sem-k-fig, body.semanat-v2 .sem-k-builder { padding: 16px 16px 14px; }
  body.semanat-v2 .sem-k-cta > h3 { padding: 16px 18px; font-size: 18px; }
  body.semanat-v2 .sem-k-cta > .b { padding: 16px 18px 20px; }
  body.semanat-v2 .sem-k-lot dl > div, body.semanat-v2 .sem-k-axes > div { border-right: 0; padding-left: 16px; padding-right: 16px; }
  body.semanat-v2 .sem-k-card > h3 { padding: 13px 16px 12px; }
  body.semanat-v2 .sem-k-card > p { padding: 14px 16px 0; }
  body.semanat-v2 .sem-k-card dl { padding: 0 16px 14px; }
  /* Na telefonie karta przechodzi w układ pionowy: etykieta nad wartością. To jest
     ten wyjątek, w którym kolumna etykiety znika — bo znika sama kolumna. */
  body.semanat-v2 .sem-k-card dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  body.semanat-v2 .sem-k-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 16px; }
  body.semanat-v2 .sem-k-axis { grid-template-columns: minmax(0, 1fr); padding: 0 16px 4px; }
  body.semanat-v2 .sem-k-range .sem-k-rows { padding-top: 0; }
  body.semanat-v2 .sem-k-legend { padding: 12px 16px 16px; }
  body.semanat-v2 .sem-k-range > .sem-k-cap { padding: 0 16px 16px; }
  body.semanat-v2 .sem-k-fig > .k-narrow { max-width: 100%; }

  /* TOC zwija się w rozwijany spis */
  body.semanat-v2 .sem-k-nav { padding: 0; }
  body.semanat-v2 .sem-k-nav details { display: block; }
  body.semanat-v2 .sem-k-nav summary {
    display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
    padding: 13px 2px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--k-tech-800);
  }
  body.semanat-v2 .sem-k-nav summary::-webkit-details-marker { display: none; }
  body.semanat-v2 .sem-k-nav summary::after { content: "\25BE"; margin-left: auto; font-size: 12px; }
  body.semanat-v2 .sem-k-nav details[open] summary::after { content: "\25B4"; }
  body.semanat-v2 .sem-k-nav .lbl { display: none; }
  body.semanat-v2 .sem-k-nav ol { flex-direction: column; flex-wrap: nowrap; padding: 2px 0 12px; gap: 2px; }
  body.semanat-v2 .sem-k-nav li { flex: 1 1 auto; }
  body.semanat-v2 .sem-k-nav a { display: block; padding: 10px 12px; }

  /* Tabela szersza niż telefon zamienia się w karty — nigdy w mikrotekst. */
  body.semanat-v2 .sem-k-tablewrap.is-cards { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  body.semanat-v2 .sem-k-tablewrap.is-cards > .sem-k-scroll { overflow: visible; }
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table,
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table tbody,
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table tr,
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table td,
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table th { display: block; width: auto; }
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* `caption` w tabeli przełączonej na `display:block` zachowuje się jak wąska kolumna — podpis łamał się
     na cztery wiersze. W trybie kart podpis jest zwykłym blokiem. */
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table caption { display: block; width: auto; padding: 0 0 14px; }
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table tbody tr {
    background: #fff !important; border: 1px solid var(--knowledge-line); border-top: 3px solid var(--k-tech-800);
    border-radius: var(--k-radius); margin: 0 0 14px; padding: 2px 0 8px; overflow: hidden;
  }
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table tbody tr > * { border-top: 0 !important; border-left: 0 !important; background: transparent !important; }
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table th[scope="row"] {
    padding: 14px 18px 8px; font-size: 16.5px; color: var(--k-ink); width: auto; white-space: normal;
  }
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table td { border-top: 1px solid var(--knowledge-line-soft) !important; padding: 11px 18px; font-size: 14.5px; }
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table td::before {
    content: attr(data-l); display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--k-tech-600); margin-bottom: 5px;
  }
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table td:empty { display: none; }
  /* Tabela decyzyjna na telefonie: dwa panele jeden pod drugim, każdy z własnym tłem. */
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table--decision tbody th[scope="row"] { background: var(--k-act-050) !important; border-left: 4px solid var(--k-act-600) !important; }
  body.semanat-v2 .sem-k-tablewrap.is-cards .sem-k-table--decision tbody td { background: var(--k-warn-050) !important; border-left: 4px solid var(--k-warn-600) !important; }

  body.semanat-v2 .sem-k-tablewrap:not(.is-cards)::after {
    content: "Przesuń tabelę w bok, aby zobaczyć wszystkie kolumny"; display: block;
    font-size: 12px; color: var(--k-muted); padding: 10px 2px 0;
  }
}

@media (max-width: 420px) {
  body.semanat-v2 .sem-k-cards, body.semanat-v2 .sem-k-evidence { grid-template-columns: 1fr; }
}

/* druk i ograniczony ruch */
@media (prefers-reduced-motion: reduce) {
  body.semanat-v2 .sem-k * { transition: none !important; animation: none !important; }
}
@media print {
  body.semanat-v2 details.sem-k-more > .sem-k-more-body { display: block !important; }
  body.semanat-v2 .sem-k-tablewrap > .sem-k-scroll { overflow: visible; }
  body.semanat-v2 .sem-k-nav { position: static; }
}