/* ==========================================================================
   components.css — site-wide reusable UI, ported 1:1 from the prototype
   Sources: components/{button,table,news,drawing}.css, plus .mguide__* and
   .range-claim pulled out of sections/cartridge.css (PLAN §3: a class used by
   more than one block/template belongs here, not in one block's style.css —
   .mguide__* is shared by the Cartridge Filters card and the News entry page,
   .range-claim is shared by the param-table block and the type page template).
   Only the custom-property names were mechanically renamed to theme.json
   tokens; selectors, values, media queries and rule order are untouched.
   ========================================================================== */

/* ---- from components/button.css -------------------------------------------- */

/* ==========================================================================
   KOMPONENT — przycisk                                            DEC-021
   Trzy poziomy. Jeden przycisk główny na widok.
   Serwis ma jedną funkcję zarobkową (wysłanie zapytania), więc przycisk
   jest głównym elementem systemu, nie ozdobą formularza.
   ========================================================================== */

.btn {
  --_h:  2.5rem;   /* 40 px — domyślny */
  --_px: var(--wp--preset--spacing--space-4);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--space-2);

  min-height: var(--_h);
  padding-inline: var(--_px);
  position: relative;

  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1;
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;

  border: var(--wp--custom--border--hair) solid transparent;
  border-radius: var(--wp--custom--radius);

  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  transition:
    background-color var(--wp--custom--motion--hover) var(--wp--custom--motion--ease),
    border-color     var(--wp--custom--motion--hover) var(--wp--custom--motion--ease),
    color            var(--wp--custom--motion--hover) var(--wp--custom--motion--ease);
}

/* Pole trafienia nigdy poniżej 44 px — także dla przycisku o wysokości 32.
   Niewidzialne, więc nie zmienia układu.                                  */
.btn::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: max(100%, var(--wp--custom--hit--min));
  transform: translateY(-50%);
}

/* Wciśnięcie: 40 ms, czyli poniżej progu, na którym reakcja przestaje być
   odbierana jako równoczesna z ruchem ręki. Najazd 120 ms — asymetria
   jest celowa.                                                             */
.btn:active {
  transform: translateY(1px);
  transition-duration: var(--wp--custom--motion--press);
}

/* --- poziom 1: główny -------------------------------------------------- */

.btn--primary {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--text-on-accent);
}
.btn--primary:hover {
  background: var(--wp--preset--color--accent-hover);
  border-color: var(--wp--preset--color--accent-hover);
  color: var(--wp--preset--color--text-on-accent);
}
.btn--primary:active {
  background: var(--wp--preset--color--accent-press);
  border-color: var(--wp--preset--color--accent-press);
}

/* --- poziom 2: obrys --------------------------------------------------- */

.btn--secondary {
  background: transparent;
  border-color: var(--wp--preset--color--border-strong);
  color: var(--wp--preset--color--text);
}
.btn--secondary:hover {
  background: var(--wp--preset--color--accent-soft);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}
.btn--secondary:active { background: var(--wp--preset--color--accent-soft-press); }

/* --- poziom 3: cichy --------------------------------------------------- */

.btn--quiet {
  --_px: var(--wp--preset--spacing--space-1);
  background: transparent;
  border-color: transparent;
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.btn--quiet:hover { color: var(--wp--preset--color--accent-hover); }

/* --- warianty na podłożu akcentu ----------------------------------------
   Potrzebne od 17.08, gdy zamykające CTA przeszło z bladego `accent-soft`
   na PEŁNY akcent. Na petrolu przycisk w petrolu jest niewidoczny, więc
   poziomy się odwracają: rolę wypełnienia przejmuje biel.

   ⚠️ To nie jest czwarty poziom przycisku i nie łamie DEC-021 (a).
   Hierarchia zostaje ta sama — jeden główny, jeden cichy — zmienia się
   tylko podłoże, na którym stoją.                                        */

.btn--inverse {
  background: var(--wp--preset--color--text-on-accent);
  border-color: var(--wp--preset--color--text-on-accent);
  color: var(--wp--preset--color--accent);
}
.btn--inverse:hover {
  background: var(--wp--preset--color--accent-soft);
  border-color: var(--wp--preset--color--accent-soft);
  color: var(--wp--preset--color--accent-hover);
}
.btn--inverse:active {
  background: var(--wp--preset--color--accent-soft-press);
  border-color: var(--wp--preset--color--accent-soft-press);
}

/* Cichy na akcencie — biel zamiast petrolu, podkreślenie zostaje, bo to
   ono odróżnia przycisk cichy od zwykłego tekstu.                        */
.btn--quiet-inverse {
  --_px: var(--wp--preset--spacing--space-1);
  background: transparent;
  border-color: transparent;
  color: var(--wp--preset--color--text-on-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.btn--quiet-inverse:hover { color: var(--wp--preset--color--accent-soft); }

/* --- rozmiary ---------------------------------------------------------- */

.btn--sm { --_h: 2rem;   --_px: var(--wp--preset--spacing--space-3); font-size: var(--wp--preset--font-size--fs-small); }
.btn--lg { --_h: 3rem;   --_px: var(--wp--preset--spacing--space-5); font-size: var(--wp--preset--font-size--fs-body); }

/* --- stan wyłączony ----------------------------------------------------
   Własne tokeny, nigdy opacity — opacity rozjaśnia też tło pod spodem
   i psuje policzony kontrast. Zawsze z widocznym powodem obok.           */

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--wp--preset--color--disabled-bg);
  border-color: var(--wp--preset--color--disabled-bg);
  color: var(--wp--preset--color--disabled-text);
  cursor: not-allowed;
  transform: none;
}

/* --- ikona ------------------------------------------------------------- */

.btn svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  stroke-width: 1.5;
}

/* --- grupa przycisków -------------------------------------------------- */

.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--space-4);
}

/* ---- from components/table.css ---------------------------------------------- */

/* ==========================================================================
   KOMPONENT — tabela parametrów                        design-system §Tabela

   To jedyna indeksowalna treść techniczna w całym serwisie: dane w kreatorze
   siedzą za interakcją, więc wyszukiwarka ich nie zobaczy. Stąd prawdziwa
   tabela HTML z <th scope>, a nie siatka z <div>.

   Zasady przeniesione 1:1 z systemu wizualnego:
     · jednostka w NAGŁÓWKU kolumny, nigdy w komórce,
     · liczby do prawej, cyfry tabelaryczne,
     · brak wartości = półpauza, nie puste pole ani zero,
     · zero linii pionowych — rozdziela je odstęp, nie kreska.
   ========================================================================== */

.ptable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--fs-small);
  line-height: var(--wp--custom--line-height--small);
}

.ptable th,
.ptable td {
  padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-4);
  text-align: left;
  border-bottom: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
  white-space: nowrap;
}

.ptable thead th {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--fs-micro);
  letter-spacing: var(--wp--custom--tracking--micro);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  border-bottom-color: var(--wp--preset--color--border-strong);
}

/* Pierwsza kolumna to nazwa typu — jedyna, która ma prawo się zawinąć,
   i jedyna niosąca tekst, a nie liczbę.                                  */
.ptable tbody th {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  white-space: normal;
  min-width: 14rem;
}

/* Wartości liczbowe w kroju danych. Nie jest to ozdoba: pionowe
   wyrównanie cyfr jest całym powodem, dla którego ta tabela istnieje.   */
.ptable .num {
  font-family: var(--wp--preset--font-family--data);
  font-variant-numeric: tabular-nums;
}

.ptable tbody tr:hover { background: var(--wp--preset--color--surface); }

.ptable tbody tr:last-child th,
.ptable tbody tr:last-child td { border-bottom: 0; }

/* --- przewijanie w bok ---------------------------------------------------
   Przewija się TABELA, nigdy strona (WCAG 1.4.10). Do tego dwie rzeczy,
   których sam `overflow-x` nie załatwia:

   · fokus klawiaturą musi być widoczny, gdy pojemnik jest przewijalny,
     stąd `tabindex="0"` w HTML i `role="region"` z etykietą,
   · trzeba POWIEDZIEĆ, że tabela się przewija — krawędź ucięta w połowie
     liczby jest jedynym sygnałem, a na telefonie bywa niewidoczna.       */

.ptable-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
}

/* Wariant wąski: tabela o samych liczbach, bez nazw typów. Rozciągnięta
   na całą szerokość kontenera stawiała „150" i „85/95" siedemset pikseli
   od siebie i wiersz przestawał się czytać jako wiersz (zmierzone na
   stronie typu, 1440 px).

   Ograniczenie siedzi na POJEMNIKU, nie na tabeli: gdyby stało na tabeli,
   linia górna pojemnika i przypisy pod spodem sięgałyby dalej niż same
   dane. Przypisy dostają je przez selektor rodzeństwa, więc cały blok
   kończy się na jednej krawędzi.                                        */
.ptable-wrap--compact,
.ptable-wrap--compact ~ .ptable-hint,
.ptable-wrap--compact ~ .ptable-note { max-width: 46rem; }

.ptable-wrap:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
  outline-offset: var(--wp--custom--focus--offset);
}

.ptable-hint {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--space-2);
  margin-top: var(--wp--preset--spacing--space-3);
  font-size: var(--wp--preset--font-size--fs-micro);
  line-height: var(--wp--custom--line-height--micro);
  color: var(--wp--preset--color--text-muted);
}

.ptable-hint svg {
  width: var(--wp--custom--icon--sm);
  height: var(--wp--custom--icon--sm);
  flex: none;
}

/* Podpowiedź o przewijaniu znika, gdy tabela i tak się mieści.          */
@media (min-width: 60rem) {
  .ptable-hint { display: none; }
}

/* --- podgląd tabeli na Home ---------------------------------------------
                                                          DEC-044, decyzja 17.08

   Trzy pierwsze wiersze tabeli parametrów, urwane gradientem, z odnośnikiem
   do pełnej. Stoi w sekcji mostka na Home, w miejscu, gdzie wcześniej było
   zdjęcie wkładów w płycie sitowej.

   ⚠️ To jest ŚWIADOME ODSTĘPSTWO OD DEC-024 („zero liczb technicznych na
   Home"), zatwierdzone przez Tymka 17.08. Uzasadnienie DEC-024 miało dwa
   człony i po roku pracy tylko jeden się broni:

     · człon pierwszy — „zakres bez kontekstu grupy nie ma adresata, nikt
       nie sprawdza 60–570 mm, dopóki nie wie, o którą grupę pyta" — jest
       nadal słuszny i ten podgląd go NIE narusza, bo kontekst stoi
       w pierwszej kolumnie każdego wiersza;
     · człon drugi — „nagromadzenie liczb w monospace to sygnatura strony
       składanej automatem" — okazał się odwrócony. Sygnaturą jest SCHEMAT
       SEKCJI (etykieta w wersalikach, nagłówek, akapit, przycisk, i tak
       cztery razy), a nie dane. Brak konkretu był tu chorobą, nie lekiem:
       sekcja mówiła „sprawdź tabelę wymiarów" i nie pokazywała ani jednej
       liczby, więc jej ilustracją było zdjęcie nieodpowiadające na pytanie,
       które sama stawia.

   ⛔ Zakres odstępstwa jest wąski: TRZY wiersze w jednym miejscu na Home.
   DEC-024 zostaje w mocy wszędzie indziej — hero, kroki, aktualności i CTA
   nadal nie mają ani jednej liczby.

   Wartości 1:1 z `materialy/DOBÓR FILTRA_NEW.xlsx` przez tabelę na
   `cartridge-filters.html`. Nic nie zaokrąglono i nic nie „poprawiono
   z głowy" — łącznie z parą OD 251 / ID 241 i zapisem „85/95", które są
   na liście pytań do Rafała Depy.                                        */

.ptable-preview {
  position: relative;
  border-top: var(--wp--custom--border--hair) solid var(--wp--preset--color--border-strong);

  /* Zmierzone przy pierwszym renderze: tabela ma `white-space: nowrap`
     i rozpychała się do 610 px w pojemniku 528 px, czyli o 82 px za dużo.
     Skutek był gorszy niż sam nadmiar — wystający kawałek OSTATNIEGO
     wiersza wychodził spod gradientu i wisiał w powietrzu jako nieurwany
     fragment „15 · 241". Nadmiar zdjęty niżej (węższa pierwsza kolumna
     i ciaśniejszy padding), a `hidden` zostaje jako zabezpieczenie dla
     szerokości pośrednich między 60rem a 75rem.                          */
  overflow: hidden;
}

/* Odzyskane 96 px: 48 z pierwszej kolumny, 48 z paddingu trzech kolumn.
   Stopień pisma NIE jest ruszany — to są dane do odczytania, a zmniejszanie
   ich po to, żeby się zmieściły, jest zawsze złą stroną tego kompromisu.  */
.ptable-preview .ptable th,
.ptable-preview .ptable td { padding-inline: var(--wp--preset--spacing--space-2); }

/* Urwanie treści. Gradient idzie do `--color-page`, więc podgląd działa
   wyłącznie na tle strony — na szarym pasie zostawiłby widoczną krawędź.
   `pointer-events: none`, bo pod spodem leżą wiersze tabeli.             */
.ptable-preview::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5rem;
  background: linear-gradient(to bottom,
              transparent,
              color-mix(in srgb, var(--wp--preset--color--page) 92%, transparent) 55%,
              var(--wp--preset--color--page));
  pointer-events: none;
}

/* Podgląd nie jest listą do przeglądania, tylko próbką — więc nie przewija
   się w bok i nie reaguje na najazd. Klikalny jest odnośnik pod spodem. */
.ptable-preview .ptable tbody tr:hover { background: none; }

.ptable-preview .ptable tbody th { min-width: 8rem; }

/* --- wąski ekran: podgląd traci kolumnę ID --------------------------------
   ⚠️ ZŁAPANE POMIAREM, nie przewidziane. Przy oknie 500 px tabela
   z `white-space: nowrap` miała 530 px i WYPYCHAŁA CAŁĄ STRONĘ w bok —
   czyli łamała zasadę z 03-layout.css („przewija się treść, nigdy strona")
   i WCAG 1.4.10.

   Kolumna ID schodzi, zamiast włączać przewijanie w bok, bo to jest PRÓBKA,
   a nie tabela do przeglądania: pełna wersja jest jedno kliknięcie dalej
   i tam przewijanie jest zaimplementowane razem z podpowiedzią o nim.
   Dwie kolumny wystarczą, żeby sekcja przestała być samym akapitem.

   `display: none` usuwa kolumnę także z drzewa dostępności, więc podpis
   tabeli celowo NIE wylicza kolumn — inaczej zapowiadałby czytnikowi dane,
   których na tej szerokości nie ma.                                       */
@media (max-width: 59.999rem) {
  .ptable-preview .ptable thead th:last-child,
  .ptable-preview .ptable tbody td:last-child { display: none; }
}

@media (max-width: 39.999rem) {
  .ptable-preview .ptable tbody th { min-width: 6rem; }
}

/* Odnośnik do pełnej tabeli stoi POD urwaniem, na czystym tle — inaczej
   wpadałby w gradient i wyglądałby na wyszarzony, czyli wyłączony.      */
.ptable-preview-more { margin-top: var(--wp--preset--spacing--space-5); }

/* --- przypis pod tabelą ---------------------------------------------------
   Miejsce na to, co jest prawdą o CAŁEJ tabeli, a nie o jednym wierszu:
   powierzchnia filtracyjna i zdanie o wymiarach spoza zakresu.          */

.ptable-note {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-2);
  margin-top: var(--wp--preset--spacing--space-5);
  padding-top: var(--wp--preset--spacing--space-5);
  border-top: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
  font-size: var(--wp--preset--font-size--fs-small);
  line-height: var(--wp--custom--line-height--body);
  color: var(--wp--preset--color--text-muted);
}

.ptable-note strong {
  font-family: var(--wp--preset--font-family--data);
  font-weight: 500;
  color: var(--wp--preset--color--text);
}

/* ---- .range-claim, moved here from sections/cartridge.css: it extends the
   param table (component above) and the type-page template also renders it,
   so it cannot live in a single block's style.css. Comment below is the
   original explanation, unchanged. ---- */

/* --- powierzchnia filtracyjna -------------------------------------------
   Jedna liczba, więc świadomie NIE jest osobną sekcją — stoi jako przypis
   pod tabelą (.ptable-note). Mapa przewidywała tu własny pas (C6), ale pas
   pod jedną wartość to wypełniacz, a wartość i tak dotyczy całej tabeli.  */

/* --- zdanie zamykające tabelę --------------------------------------------
   Awansowane z czwartego wiersza przypisu (15.08). Tabela odpowiada na
   pytanie „czy mój wymiar się mieści", a to zdanie mówi, że odpowiedź
   „nie" też nie kończy rozmowy — jedyna treść na tej stronie, która
   odróżnia nas od dostawcy katalogowego.

   Stopień lead, kolor tekstu podstawowego, bez ramki i bez tła: ma być
   mocniejsze od przypisu, a nie zamienić się w kolejny kafelek.
   Odnośnik cichy, bo przycisk główny na tym widoku jest jeden (DEC-021 a). */
.range-claim {
  max-width: var(--wp--custom--layout--measure);
  margin-top: var(--wp--preset--spacing--space-6);
  font-size: var(--wp--preset--font-size--fs-lead);
  line-height: var(--wp--custom--line-height--lead);
  color: var(--wp--preset--color--text);
}

/* ---- from components/news.css ------------------------------------------------ */

/* ==========================================================================
   KOMPONENT — lista aktualności

   ⚠️ Treść wpisów jest PRZYKŁADOWA, napisana przez DGS. Zakładkę potwierdził
   klient („Zakładki Aktualnosci i About również na tak.", 16.07), treści nie
   dostarczył. Oznaczenia na stronie nie ma (decyzja Tymka, 14.08) — zostaje
   wyłącznie w dokumentacji: prototypy/INDEKS.md, img-ai/README.md i lista
   kontrolna przed wdrożeniem w tym README.

   Cały kafelek jest jednym odnośnikiem, nie tytułem z osobnym „read more".
   Powód praktyczny: pole trafienia rośnie z kilkudziesięciu pikseli do całej
   karty, a użytkownik na tablecie w hali nie musi celować w tekst.
   ========================================================================== */

.news {
  display: grid;
  gap: var(--wp--preset--spacing--space-6);
  list-style: none;
  padding: 0;
}

@media (min-width: 40rem) { .news { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .news { grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--space-7); } }

.news__link {
  display: grid;
  gap: var(--wp--preset--spacing--space-3);
  color: inherit;
  text-decoration: none;
}

/* Podkreślenie tylko na tytule, nie na całej karcie — inaczej najazd
   zamienia kafelek w plamę linii.                                       */
.news__link:hover .news__title,
.news__link:focus-visible .news__title {
  text-decoration: underline;
}

.news__figure {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--wp--preset--color--surface);
}

.news__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  transition: transform var(--wp--custom--motion--expand) ease;
}

.news__link:hover .news__img { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  .news__img { transition-duration: 1ms; }
  .news__link:hover .news__img { transform: none; }
}

/* Ta sama poprawka co w .eyebrow — to jest ten sam rodzaj etykiety
   i różnica stopnia czytałaby się jak niedopatrzenie.                   */
.news__meta {
  font-family: var(--wp--preset--font-family--data);
  font-size: var(--wp--preset--font-size--fs-small);
  font-weight: 500;
  letter-spacing: var(--wp--custom--tracking--micro);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
}

.news__title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--fs-lead);
  line-height: var(--wp--custom--line-height--3);
  text-wrap: balance;
}

.news__text {
  /* Stopień podstawowy — ten sam powód co w `.step__text` (audyt UI 24.08).
     W aktualnościach było najostrzej: 14 px = 674 znaki, 17 px = 18.       */
  font-size: var(--wp--preset--font-size--fs-body);
  line-height: var(--wp--custom--line-height--body);
  color: var(--wp--preset--color--text-muted);
}

/* ---- from components/drawing.css ---------------------------------------------- */

/* ==========================================================================
   KOMPONENT — język rysunku technicznego                          DEC-020 (g)

   ⚠️ Ten plik powstał 17.08 z wyniesienia `.dwg-label` z `sections/cartridge.css`,
   gdzie siedział od 14.08. Powód nie jest porządkowy, tylko diagnostyczny.

   --- Co się stało z tożsamością wizualną tego serwisu

   Zmierzone 17.08 na siedmiu podstronach: **język rysunku był użyty w jednym
   miejscu** (rysunek „jak zmierzyć" na karcie produktu). Wszędzie indziej
   strony składają się z fotografii i tekstu, bez żadnej warstwy pomiędzy.

   Przyczyna jest w łańcuchu decyzji, nie w niedbalstwie:

     · DEC-020 (g) zaprojektowało język linii: kontur 1,5 / detal 0,75 /
       linia wymiarowa 0,75 / oś `12 3 2 3` / wymiar aktywny w akcencie,
     · DEC-019 zabroniło własnych piktogramów dziedzinowych, uzasadniając to
       wprost: „ich rolę przejmuje silnik rysunku (DEC-016)",
     · DEC-016 w części wykonawczej **wycofano 13.08** — silnika nie budujemy,
     · rolę po nim nie przejął nikt. Zdjęcia AI (DEC-022) zastąpiły TREŚĆ
       (jak wygląda wyrób), ale nie zastąpiły TOŻSAMOŚCI (czym ten serwis
       różni się od każdego innego).

   Stąd ten plik: rysunek przestaje być ozdobą jednej sekcji i staje się
   warstwą całego serwisu. `sections/` opisuje MIEJSCA, a język rysunku
   jest rzeczą wielokrotnego użytku, więc mieszka w `components/`.

   --- Czym ten rysunek NIE jest

   ⛔ Nie jest silnikiem parametrycznym z DEC-016. To rysunki statyczne,
   rysowane ręcznie, w liczbie pojedynczej na sekcję. Silnik miał brać
   OD / ID / wysokość z pól CPT i przerysowywać siedem grup; tego nie
   budujemy i ten plik tego nie przywraca.

   ⛔ Nie jest też zamiennikiem ikon. Ikony (Iconoir, DEC-019) nazywają
   RZECZY interfejsu: telefon, poczta, załącznik. Rysunek pokazuje GEOMETRIĘ
   wyrobu, czyli to, czego zdjęcie nie potrafi — różnica open/open vs
   open/closed siedzi na dole wkładu i w kadrze 600×400 jest niewidoczna
   (DEC-023). Te dwie warstwy się nie dublują.
   ========================================================================== */

/* Etykieta wymiarowa. Krój danych, ten sam sygnał co w tabeli parametrów:
   „to jest do odczytania, nie do czytania". Stopień podany w pikselach,
   nie w tokenie, bo wewnątrz SVG stopień skaluje się z viewBox — token
   dałby tu wartość zależną od rozmiaru rysunku, nie od skali pisma.      */
.dwg-label {
  font-family: var(--wp--preset--font-family--data);
  font-size: 12px;
  fill: var(--wp--preset--color--text-muted);
}

/* Wymiar aktywny — jedyne miejsce, w którym akcent wchodzi do rysunku
   (DEC-020 g). Używany tam, gdzie rysunek MÓWI coś, a nie tylko pokazuje:
   nakładka wymiarowa na zdjęciu rodziny wymiarów.                        */
.dwg-label--active { fill: var(--wp--preset--color--accent); }

/* --- zastrzeżenie pod rysunkiem ----------------------------------------
   „Schematic, not to scale" i ewentualne doprecyzowanie.               DEC-042

   ⚠️ To NIE jest oznaczenie makiety w rozumieniu DEC-027 i dlatego zostaje
   na stronie także na produkcji. Oznaczenie makiety mówi „ta strona jest
   niegotowa"; to zdanie mówi „ten rysunek objaśnia, a nie wymiaruje" —
   i jest standardową adnotacją rysunkową, nie przyznaniem się do braków.

   Powód, dla którego w ogóle jest: rysunek w języku linii inżynierskich
   czyta się jak SPECYFIKACJA, mocniej niż zdjęcie. Poprzeczka dla rysunku
   jest więc WYŻEJ niż dla grafiki AI z DEC-022, a nie niżej. Odbiorcą jest
   utrzymanie ruchu, które zna wyrób lepiej od nas (DEC-025), więc wymiar
   odczytany z proporcji naszego schematu byłby błędem, którego nie da się
   obronić. Zastrzeżenie zamyka tę drogę jednym zdaniem.

   ⛔ Czego to zdanie NIE mówi: kto rysunek narysował. Autorstwo nie jest tu
   ryzykiem — ryzykiem jest niesprawdzone twierdzenie. Rysunek narysowany
   ręcznie przez kogoś, kto nie zna wyrobu, jest równie błędny. Odwrotnie
   też: po potwierdzeniu geometrii przez klienta nie ma znaczenia, czym
   powstał. Dlatego zastrzeżenie mówi o STATUSIE rysunku, a informacja
   o tym, jak powstała makieta, idzie do klienta osobno (DEC-022 d).       */

.dwg-note {
  font-size: var(--wp--preset--font-size--fs-micro);
  line-height: var(--wp--custom--line-height--micro);
  color: var(--wp--preset--color--text-muted);
}

/* Rysunek w kolumnie treści (filary na About). Skalowany szerokością
   pojemnika, ale z górnym ograniczeniem — przy 360 px kolumny rysunek
   rozjeżdżał się do wysokości akapitu, który miał ilustrować.            */
.dwg {
  display: block;
  width: 100%;
  max-width: 13rem;
  height: auto;
}

/* Nakładka wymiarowa na zdjęciu. Leży w tym samym pudełku co obraz,
   w układzie współrzędnych jego naturalnych pikseli, więc linie trzymają
   się wyrobu przy każdej szerokości ekranu.

   `pointer-events: none`, bo nakładka nie jest celem — pod nią może kiedyś
   stanąć odnośnik, a niewidzialna warstwa przechwytująca kliknięcia to
   błąd, którego nikt nie znajduje wzrokiem.                              */
.dwg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ⚠️ Etykieta w nakładce potrzebuje INNEGO stopnia niż etykieta w rysunku
   i to nie jest kaprys typograficzny, tylko matematyka `viewBox`.

   Wewnątrz SVG `12px` znaczy 12 JEDNOSTEK UKŁADU, nie 12 pikseli ekranu.
   Rysunek w filarze ma viewBox szerokości 194 i renderuje się na 208 px,
   czyli skala ≈ 1,07 i dwanaście jednostek wychodzi na trzynaście pikseli.
   Nakładka ma viewBox szerokości 1600 i renderuje się na 1152 px, czyli
   skala 0,72 — te same dwanaście jednostek daje 8,6 px. Dlatego pierwsza
   wersja miała litery „H" praktycznie niewidoczne.                        */
.dwg-overlay .dwg-label { font-size: 20px; }

/* Poniżej 60rem zdjęcie ma ok. 437 px szerokości, więc te same 20 jednostek
   zjeżdżają do 5,5 px. Pięciopikselowa litera nie jest już informacją,
   tylko brudem na zdjęciu, więc schodzi. Linie wymiarowe ZOSTAJĄ: mają
   `non-scaling-stroke`, czyli grubość niezależną od skali, i dwa nawiasy
   wymiarowe na wkładach różnej wysokości czytają się bez podpisu.
   Treść niesie przy tym `alt` obrazu, więc nic nie ginie bezpowrotnie.    */
@media (max-width: 59.999rem) {
  .dwg-overlay .dwg-label { display: none; }
}

/* ---- .mguide__*, moved here from sections/cartridge.css: the same component
   is used by the Cartridge Filters card AND the News single-entry template
   (see article.css), so it cannot load only when one block renders. Comment
   below is the section's original explanation, unchanged. ---- */

/* --- jak zmierzyć wkład (`mguide`) ----------------------------------------
   Nazwa skrócona celowo: `.measure` jest już zajęte przez warstwę układu
   (szerokość wygodna do czytania, 66ch). Dwie klasy o tej samej nazwie
   w dwóch warstwach to dokładnie ten rodzaj kolizji kaskady, który potem
   objawia się „siatką, która raz działa, a raz nie".

   Najtańsza przewaga na tej stronie: nie wymaga ŻADNYCH danych od klienta,
   a rozwiązuje realny problem odbiorcy, który trzyma zużyty wkład i nie wie,
   co ma zmierzyć.

   Rysunek, nie zdjęcie. Zdjęcie pokazuje jeden egzemplarz, rysunek pokazuje
   regułę — i jest to jedyne miejsce w serwisie, w którym język linii
   z DEC-020 (g) w ogóle się pojawia.                                       */

.mguide {
  display: grid;
  gap: var(--wp--preset--spacing--space-7);
  align-items: start;
}

@media (min-width: 60rem) {
  .mguide {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--wp--preset--spacing--space-9);
  }
}

.mguide__figure {
  margin: 0;
  padding: var(--wp--preset--spacing--space-6);
  background: var(--wp--preset--color--surface);
}

.mguide__figure svg {
  width: 100%;
  height: auto;
}

/* Trzy wymiary jako lista definicji: symbol jest terminem, zdanie
   wyjaśnieniem. To ta sama para, którą widać na rysunku obok, więc
   symbol musi być w tym samym kroju co etykiety na rysunku.              */

.mguide__list {
  display: grid;
  gap: 0;
}

.mguide__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--wp--preset--spacing--space-4);
  align-items: baseline;
  padding-block: var(--wp--preset--spacing--space-4);
  border-bottom: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
}

.mguide__row:first-child { border-top: var(--wp--custom--border--hair) solid var(--wp--preset--color--border); }

.mguide__symbol {
  font-family: var(--wp--preset--font-family--data);
  font-weight: 500;
  color: var(--wp--preset--color--accent);
}

.mguide__text { color: var(--wp--preset--color--text-muted); }
.mguide__text strong { color: var(--wp--preset--color--text); font-weight: 600; }

/* 🗄️ `.dwg-label` przeniesione 17.08 do `components/drawing.css`.
   Powód: rysunek techniczny przestał być ozdobą tej jednej sekcji i stał
   się warstwą całego serwisu (DEC-040). Klasy nie duplikujemy tutaj —
   `sections/` opisuje miejsca, a język rysunku jest rzeczą wielokrotnego
   użytku. Rysunek „jak zmierzyć" nadal jej używa, tylko z innego pliku. */

/* ---- .channel__icon, moved here from sections/contact.css: the `channels`
   block's card icon and the `map` block's placeholder pin icon both render
   this exact class on the Contact page (contact.html:115/127/140 and :331),
   so it cannot live in a single block's style.css (architecture plan §3,
   class-level rule — same precedent as `.range-claim` above). Comment below
   is the original explanation, unchanged. ---- */

.channel__icon {
  width: var(--wp--custom--icon--lg);
  height: var(--wp--custom--icon--lg);
  color: var(--wp--preset--color--accent);
  stroke-width: 1.5;
}