/* ============================================================================
   MAKIETY — biblioteka komponentów interaktywnych dla stron treściowych
   ----------------------------------------------------------------------------
   Powód istnienia: strony bazy wiedzy nie mogą być ścianą tekstu (wymóg
   operatora, 2026-10-01). Rdzeniem każdej strony jest rzecz, którą czytelnik
   klika, przesuwa albo wpisuje — a tego modele językowe nie streszczą
   w AI Overview, więc kliknięcie musi trafić do nas.

   Dlaczego biblioteka, a nie kod w każdym pliku: 60 wpisów × ~70 kB inline
   (tak jest zrobiony /warsztat-agent-ai/) to ponad 4 MB duplikatu. Tu jest
   jeden plik, cache'owany, a wpis wnosi tylko markup z atrybutami data-*.

   Kolory WYŁĄCZNIE z tokenów szat (--sa-*), bo aktywna szata obowiązuje na
   każdej podstronie i jest ich dziesięć. Żadnych wartości na sztywno.

   Uwaga na specyficzność: szaty celują selektorami typu
   html[data-shool-skin="brutal"] .coś  (0,2,1), więc pojedyncza klasa
   przegrywa. Dlatego komponenty stylujemy przez .mk-<nazwa> zagnieżdżone
   w kontenerze — daje to (0,2,0)+ i wygrywa z domyślnymi regułami szaty,
   nie wchodząc w wojnę !important.
   ========================================================================== */

/* ---------- 1. Animacje przebiegające przez treść (scroll-driven) ---------- */
/* Sekcje nie leżą jako blok — odsłaniają się w miarę czytania. Bez JS-a
   (gdy nie wykona się skrypt) treść jest normalnie widoczna: .mk-reveal
   dostaje stan ukryty tylko wtedy, gdy JS doda .mk-js na <html>. */

.mk-js .mk-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.2, .7, .3, 1), transform .55s cubic-bezier(.2, .7, .3, 1);
  will-change: opacity, transform;
}
.mk-js .mk-reveal.mk-widoczny { opacity: 1; transform: none; }

/* Kaskada: kolejne dzieci wchodzą z opóźnieniem, żeby lista nie „mrugała" całą naraz */
.mk-js .mk-kaskada > * { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.mk-js .mk-kaskada.mk-widoczny > * { opacity: 1; transform: none; }
.mk-js .mk-kaskada.mk-widoczny > :nth-child(1) { transition-delay: .00s; }
.mk-js .mk-kaskada.mk-widoczny > :nth-child(2) { transition-delay: .07s; }
.mk-js .mk-kaskada.mk-widoczny > :nth-child(3) { transition-delay: .14s; }
.mk-js .mk-kaskada.mk-widoczny > :nth-child(4) { transition-delay: .21s; }
.mk-js .mk-kaskada.mk-widoczny > :nth-child(5) { transition-delay: .28s; }
.mk-js .mk-kaskada.mk-widoczny > :nth-child(6) { transition-delay: .35s; }
.mk-js .mk-kaskada.mk-widoczny > :nth-child(7) { transition-delay: .42s; }
.mk-js .mk-kaskada.mk-widoczny > :nth-child(8) { transition-delay: .49s; }

/* ---------- 1b. Odsłanianie treści artykułu — automatyczne ---------- */
/* Problem, który to rozwiązuje: wzorcowy wpis miał 4 486 znaków ciągłego tekstu między
   dwiema makietami i tylko 3 elementy z animacją wejścia (pomiar na żywej stronie,
   2026-10-01). To jest ta ściana tekstu, której operator zakazał — a wpis był wzorcem
   dla 59 kolejnych.

   Rozwiązanie jest w CSS, nie w JS, i to jest celowe. Gdyby klasę ukrywającą dodawał
   skrypt, treść najpierw by się pokazała, a potem zniknęła pod animację — dokładnie to
   migotanie, które operator zgłosił tego samego dnia. CSS ukrywa od pierwszego malowania,
   JS tylko ODSŁANIA.

   Od piątego dziecka, bo pierwsze cztery (okruszki, h1, podpis autora, lead) muszą być
   widoczne natychmiast — to one decydują, czy czytelnik zostanie. */
.mk-js .article > .container > *:nth-child(n+5) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.2, .7, .3, 1), transform .5s cubic-bezier(.2, .7, .3, 1);
}
.mk-js .article > .container > *:nth-child(n+5).mk-widoczny { opacity: 1; transform: none; }

/* Kto wyłączył animacje w systemie, dostaje treść bez ruchu. Nie negocjujemy. */
@media (prefers-reduced-motion: reduce) {
  .mk-js .mk-reveal,
  .mk-js .mk-kaskada > *,
  .mk-js .article > .container > *:nth-child(n+5) { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mk-pasek-wypelnienie, .mk-licznik { transition: none !important; }
}

/* ---------- 2. Wspólna skorupa komponentu ---------- */

.mk-blok {
  margin: 2.6rem 0;
  border: 1px solid rgba(var(--sa-acc-rgb, 110 231 183), .22);
  border-radius: 14px;
  background: var(--sa-surface, #0f172a);
  overflow: hidden;
}
.mk-blok .mk-pasek {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem;
  background: var(--sa-surface2, #111c33);
  border-bottom: 1px solid rgba(var(--sa-acc-rgb, 110 231 183), .18);
  font: 600 .78rem/1.2 var(--mono, ui-monospace, monospace);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--sa-acc, #6ee7b7);
}
.mk-blok .mk-pasek::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sa-acc, #6ee7b7); flex: none;
  box-shadow: 0 0 0 3px rgba(var(--sa-acc-rgb, 110 231 183), .16);
}
.mk-blok .mk-tresc { padding: 1.15rem 1.15rem 1.3rem; }
.mk-blok .mk-stopka {
  padding: .8rem 1.15rem; border-top: 1px dashed rgba(var(--sa-acc-rgb, 110 231 183), .22);
  font-size: .86rem; color: var(--sa-muted, #94a3b8);
}
.mk-blok .mk-etykieta {
  display: block; margin-bottom: .35rem;
  font: 600 .82rem/1.3 var(--sans, system-ui, sans-serif);
  color: var(--sa-txt, #e2e8f0);
}
.mk-blok .mk-podpis { margin-top: .5rem; font-size: .8rem; color: var(--sa-muted, #94a3b8); }

/* ---------- 3. Kalkulator (suwaki → wynik) ---------- */
/* Najskuteczniejsza makieta sprzedażowa: pokazuje liczbę godzin i pieniędzy,
   które czytelnik traci, a potem proponuje policzyć to dla jego firmy. */

.mk-kalk .mk-suwaki { display: grid; gap: 1.1rem; }
.mk-kalk .mk-suwak input[type="range"] {
  width: 100%; margin: .2rem 0 0; accent-color: var(--sa-acc, #6ee7b7);
  height: 1.5rem; cursor: grab;
}
.mk-kalk .mk-suwak input[type="range"]:active { cursor: grabbing; }
.mk-kalk .mk-wartosc {
  float: right; font: 700 .92rem/1.2 var(--mono, monospace);
  color: var(--sa-acc, #6ee7b7);
}
.mk-kalk .mk-wyniki {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .8rem; margin-top: 1.4rem;
}
.mk-kalk .mk-wynik {
  padding: .95rem 1rem; border-radius: 11px; text-align: center;
  background: var(--sa-bg2, #0b1220);
  border: 1px solid rgba(var(--sa-acc-rgb, 110 231 183), .2);
}
.mk-kalk .mk-wynik b {
  display: block; font: 800 1.85rem/1.1 var(--mono, monospace);
  color: var(--sa-acc, #6ee7b7);
  font-variant-numeric: tabular-nums;   /* liczby nie skaczą przy przeliczaniu */
}
.mk-kalk .mk-wynik span { display: block; margin-top: .3rem; font-size: .78rem; color: var(--sa-muted, #94a3b8); }
.mk-kalk .mk-wynik.mk-alarm { border-color: rgba(248, 113, 113, .5); }
.mk-kalk .mk-wynik.mk-alarm b { color: #f87171; }

/* ---------- 4. Symulator / konsola (scenariusz krok po kroku) ---------- */
/* Do pokazywania mechanizmów: jak działa prompt injection, jak agent
   przetwarza fakturę, co robi automatyzacja. Widać przebieg, nie opis. */

.mk-sym .mk-konsola {
  background: #05080f; border-radius: 10px; padding: 1rem 1.1rem;
  font: .88rem/1.65 var(--mono, ui-monospace, monospace);
  min-height: 190px; max-height: 420px; overflow-y: auto;
  color: #cfe3ff;
}
.mk-sym .mk-linia { display: block; white-space: pre-wrap; word-break: break-word; }
.mk-sym .mk-linia.mk-in  { color: #7dd3fc; }
.mk-sym .mk-linia.mk-out { color: var(--sa-acc, #6ee7b7); }
.mk-sym .mk-linia.mk-zle { color: #f87171; font-weight: 700; }
.mk-sym .mk-linia.mk-sys { color: var(--sa-muted, #94a3b8); font-style: italic; }
.mk-sym .mk-kursor::after {
  content: '▋'; margin-left: 1px; color: var(--sa-acc, #6ee7b7);
  animation: mk-blink 1s steps(1) infinite;
}
@keyframes mk-blink { 50% { opacity: 0; } }

.mk-przyciski { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.mk-btn {
  padding: .55rem .95rem; border-radius: 9px; cursor: pointer;
  font: 600 .84rem/1.2 var(--sans, system-ui, sans-serif);
  background: transparent; color: var(--sa-txt, #e2e8f0);
  border: 1px solid rgba(var(--sa-acc-rgb, 110 231 183), .35);
  transition: background .18s, transform .12s, border-color .18s;
  /* 42 px to minimum, w które da się trafić palcem bez celowania.
     Przy krótkich etykietach ("Tak", "Nie") samo padding schodziło do ~32 px. */
  min-height: 42px;
}
.mk-btn:hover { background: rgba(var(--sa-acc-rgb, 110 231 183), .12); }
.mk-btn:active { transform: translateY(1px); }
.mk-btn.mk-akt { background: var(--sa-acc, #6ee7b7); color: #04121c; border-color: var(--sa-acc, #6ee7b7); }
.mk-btn[disabled] { opacity: .45; cursor: not-allowed; }
.mk-btn.mk-btn-zle { border-color: rgba(248, 113, 113, .55); color: #fca5a5; }
.mk-btn.mk-btn-zle:hover { background: rgba(248, 113, 113, .12); }

/* ---------- 5. Drzewo decyzyjne ---------- */
/* „Czy mój proces nadaje się do automatyzacji?" — pytanie, odpowiedzi, werdykt. */

.mk-drzewo .mk-pytanie { font: 600 1.06rem/1.45 var(--sans, system-ui, sans-serif); margin-bottom: .9rem; }
.mk-drzewo .mk-odp { display: grid; gap: .5rem; }
.mk-drzewo .mk-odp button { text-align: left; width: 100%; }
.mk-drzewo .mk-werdykt {
  padding: 1rem 1.1rem; border-radius: 11px; margin-top: .3rem;
  background: rgba(var(--sa-acc-rgb, 110 231 183), .1);
  border-left: 3px solid var(--sa-acc, #6ee7b7);
}
.mk-drzewo .mk-werdykt h4 { margin: 0 0 .45rem; font-size: 1.04rem; }
.mk-drzewo .mk-sciezka { margin-top: .9rem; font-size: .78rem; color: var(--sa-muted, #94a3b8); }

/* Następny krok STOI TAM, GDZIE POWSTAŁ WNIOSEK.
   Werdykt drzewa kończył się opisem i przyciskiem „zacznij od nowa" — ślepa uliczka.
   Blok domknięcia na dole strony jest wtedy dawno przewinięty, więc czytelnik, który
   właśnie dostał odpowiedź „to się nadaje", nie miał gdzie kliknąć. */
.mk-drzewo .mk-werdykt-cta { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed rgba(var(--sa-acc-rgb, 110 231 183), .3); }
.mk-drzewo .mk-werdykt-cta .mk-wniosek { margin: 0 0 .8rem; font-size: .95rem; color: var(--sa-txt, #e2e8f0); }
.mk-drzewo .mk-werdykt-cta .mk-glowny {
  display: inline-block; padding: .7rem 1.2rem; border-radius: 9px; text-decoration: none;
  font-weight: 700; font-size: .9rem;
  background: var(--sa-acc, #6ee7b7); color: #04121c; border: 1px solid var(--sa-acc, #6ee7b7);
  transition: transform .14s, box-shadow .2s;
}
.mk-drzewo .mk-werdykt-cta .mk-glowny:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--sa-acc-rgb, 110 231 183), .3); }

/* Pasek postępu — ile pytań zostało */
.mk-pasek-postep { height: 4px; border-radius: 4px; background: rgba(148, 163, 184, .2); overflow: hidden; margin-bottom: 1rem; }
.mk-pasek-wypelnienie { height: 100%; width: 0; background: var(--sa-acc, #6ee7b7); transition: width .4s cubic-bezier(.2,.7,.3,1); }

/* ---------- 6. Porównywarka ---------- */

.mk-porown table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.mk-porown th, .mk-porown td { padding: .62rem .7rem; text-align: left; border-bottom: 1px solid rgba(148, 163, 184, .16); }
.mk-porown thead th {
  font: 700 .76rem/1.2 var(--mono, monospace); text-transform: uppercase; letter-spacing: .05em;
  color: var(--sa-acc, #6ee7b7); cursor: pointer; user-select: none;
}
.mk-porown thead th:hover { color: var(--sa-txt, #e2e8f0); }
.mk-porown thead th[aria-sort]::after { content: ' ↕'; opacity: .5; }
.mk-porown thead th[aria-sort="ascending"]::after  { content: ' ↑'; opacity: 1; }
.mk-porown thead th[aria-sort="descending"]::after { content: ' ↓'; opacity: 1; }
/* Wiersz jest wybieralny — klik przekazuje pozycję do CTA, żeby domknięcie mówiło
   o tym, co czytelnik wskazał. Stąd cursor i wyraźny stan wybrania. */
.mk-porown tbody tr { transition: background .15s, box-shadow .15s; cursor: pointer; }
.mk-porown tbody tr:hover { background: rgba(var(--sa-acc-rgb, 110 231 183), .07); }
.mk-porown tbody tr:focus-visible { outline: 2px solid var(--sa-acc, #6ee7b7); outline-offset: -2px; }
.mk-porown tbody tr.mk-wybrany {
  background: rgba(var(--sa-acc-rgb, 110 231 183), .14);
  box-shadow: inset 3px 0 0 var(--sa-acc, #6ee7b7);
}
.mk-porown tbody tr.mk-wybrany td:first-child::before { content: '✓ '; color: var(--sa-acc, #6ee7b7); font-weight: 700; }
.mk-porown tbody tr.mk-schowany { display: none; }
.mk-porown .mk-tak { color: var(--sa-acc, #6ee7b7); font-weight: 700; }
.mk-porown .mk-nie { color: #f87171; }
.mk-porown .mk-polowicznie { color: #fbbf24; }
.mk-porown .mk-filtry { margin-bottom: .9rem; }

/* ---------- 7. Oś czasu ---------- */
/* Kalendarz AI Act, etapy wdrożenia, terminy naborów — klikalne, nie wypunktowane. */

.mk-os .mk-tor { position: relative; padding-left: 1.6rem; }
.mk-os .mk-tor::before {
  content: ''; position: absolute; left: 5px; top: .4rem; bottom: .4rem; width: 2px;
  background: linear-gradient(to bottom, var(--sa-acc, #6ee7b7), rgba(148, 163, 184, .25));
}
.mk-os .mk-punkt { position: relative; padding: .55rem 0 .95rem; cursor: pointer; }
.mk-os .mk-punkt::before {
  content: ''; position: absolute; left: -1.6rem; top: .95rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sa-bg, #060b16); border: 2px solid var(--sa-acc, #6ee7b7);
  transition: transform .2s, background .2s;
}
.mk-os .mk-punkt:hover::before { transform: scale(1.3); }
.mk-os .mk-punkt.mk-otwarty::before { background: var(--sa-acc, #6ee7b7); transform: scale(1.3); }
.mk-os .mk-punkt.mk-minelo::before { border-color: var(--sa-muted, #94a3b8); }
.mk-os .mk-data { font: 700 .82rem/1.2 var(--mono, monospace); color: var(--sa-acc, #6ee7b7); }
.mk-os .mk-punkt.mk-minelo .mk-data { color: var(--sa-muted, #94a3b8); }
.mk-os .mk-naglowek-p { font-weight: 600; margin: .2rem 0 0; }
.mk-os .mk-szczegol {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .35s ease, opacity .3s, margin .3s;
}
.mk-os .mk-punkt.mk-otwarty .mk-szczegol { max-height: 420px; opacity: 1; margin-top: .5rem; }

/* ---------- 8. Quiz diagnostyczny ---------- */

.mk-quiz .mk-wynik-quiz { display: none; }
.mk-quiz.mk-skonczony .mk-krok-quiz { display: none; }
.mk-quiz.mk-skonczony .mk-wynik-quiz { display: block; }
.mk-quiz .mk-punkty {
  font: 800 2.4rem/1 var(--mono, monospace); color: var(--sa-acc, #6ee7b7);
  font-variant-numeric: tabular-nums;
}

/* ---------- 9. Domknięcie na kontakt z wynikiem interakcji ---------- */
/* NAZWA KLASY: .mk-domkniecie, NIE .mk-cta. `.mk-cta` jest zajęte przez starą warstwę
   kursów i stylowane jako przycisk zakupu w 8 szatach selektorem
   html[data-shool-skin="X"] .mk-cta (0,2,1) — razem z .mk-mod-unlock i .tcrs-buy.
   Pojedyncza klasa (0,1,0) z tym przegrywa, więc blok wyglądał jak przycisk.
   Przed dodaniem nowej klasy do biblioteki sprawdź kolizje:
   grep -ohE '\.mk-[a-z0-9-]+' skins/*.css | sort -u  */
/* Sedno: CTA nie krzyczy „ZAMÓW", tylko kontynuuje to, co czytelnik właśnie
   zobaczył. Wynik makiety wędruje do formularza jako gotowy kontekst. */

.mk-domkniecie {
  margin: 2.8rem 0 1rem; padding: 1.5rem 1.4rem; border-radius: 15px;
  background: linear-gradient(135deg, rgba(var(--sa-acc-rgb, 110 231 183), .13), rgba(var(--sa-acc-rgb, 110 231 183), .04));
  border: 1px solid rgba(var(--sa-acc-rgb, 110 231 183), .3);
}
.mk-domkniecie h3 { margin: 0 0 .5rem; font-size: 1.22rem; }
.mk-domkniecie p { margin: 0 0 1rem; color: var(--sa-muted, #94a3b8); }
.mk-domkniecie .mk-wniosek {
  margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 10px;
  background: var(--sa-bg2, #0b1220); border-left: 3px solid var(--sa-acc, #6ee7b7);
  font-size: .92rem; color: var(--sa-txt, #e2e8f0);
}
.mk-domkniecie .mk-akcje { display: flex; flex-wrap: wrap; gap: .65rem; }
.mk-domkniecie .mk-glowny {
  padding: .8rem 1.4rem; border-radius: 10px; text-decoration: none;
  font-weight: 700; background: var(--sa-acc, #6ee7b7); color: #04121c;
  border: 1px solid var(--sa-acc, #6ee7b7);
  transition: transform .14s, box-shadow .2s;
}
.mk-domkniecie .mk-glowny:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(var(--sa-acc-rgb, 110 231 183), .28); }
.mk-domkniecie .mk-drugi {
  padding: .8rem 1.4rem; border-radius: 10px; text-decoration: none; font-weight: 600;
  color: var(--sa-txt, #e2e8f0); border: 1px solid rgba(var(--sa-acc-rgb, 110 231 183), .35);
}
.mk-domkniecie .mk-drugi:hover { background: rgba(var(--sa-acc-rgb, 110 231 183), .1); }

/* ---------- 10. Licznik narastający ---------- */
.mk-licznik { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--sa-acc, #6ee7b7); }

/* ---------- 11. Mobile ---------- */
/* Suwaki i tabele to dwa miejsca, gdzie makiety się najczęściej rozjeżdżają
   na telefonie — tabela dostaje własny scroll, żeby nie rozpychać strony. */
@media (max-width: 640px) {
  .mk-blok { margin: 2rem -.75rem; border-radius: 12px; }   /* pełna szerokość ekranu */
  .mk-blok .mk-tresc { padding: 1rem .9rem 1.1rem; }
  .mk-kalk .mk-wyniki { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .mk-kalk .mk-wynik b { font-size: 1.5rem; }
  .mk-porown { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mk-porown table { min-width: 520px; }
  .mk-sym .mk-konsola { font-size: .8rem; padding: .8rem .85rem; min-height: 160px; }
  .mk-domkniecie { padding: 1.2rem 1.1rem; }
  .mk-domkniecie .mk-akcje { flex-direction: column; }
  .mk-domkniecie .mk-glowny, .mk-domkniecie .mk-drugi { text-align: center; }
  .mk-btn { padding: .6rem .8rem; }        /* cel dotykowy nie mniejszy niż 40 px */
}

/* Sąsiadujące akapity w blokach makiet — ten sam globalny reset marginesów co w artykule. */
.mk-blok .mk-tresc p + p,
.mk-blok .mk-szczegol p + p { margin-top: .8rem; }

/* ---------- 12. Checklista (dodana 2026-10-02) ---------- */
/* Wszystkie pozycje widoczne naraz, nie ekran po ekranie. Produktem jest LISTA BRAKÓW,
   nie punktacja — dlatego panel „czego brakuje" jest wyróżniony mocniej niż licznik. */

.mk-licznik-check { font: 700 1.05rem/1.3 var(--sans, system-ui, sans-serif); margin-bottom: 1.1rem; color: var(--sa-txt, #e2e8f0); }
.mk-licznik-check b { color: var(--sa-acc, #6ee7b7); font-variant-numeric: tabular-nums; }

.mk-obszar { margin-bottom: 1.5rem; }
.mk-obszar-nazwa {
  margin: 0 0 .5rem; font: 700 .78rem/1.2 var(--mono, monospace);
  text-transform: uppercase; letter-spacing: .06em; color: var(--sa-acc, #6ee7b7);
}
.mk-obszar .mk-pasek-postep { margin-bottom: .7rem; }

.mk-check {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .65rem .7rem; margin-bottom: .3rem; cursor: pointer;
  border-radius: 8px; transition: background .15s;
  min-height: 42px;                      /* cel dotykowy */
}
.mk-check:hover { background: rgba(var(--sa-acc-rgb, 110 231 183), .07); }
.mk-check input { margin-top: .25rem; flex: none; width: 17px; height: 17px; accent-color: var(--sa-acc, #6ee7b7); }
.mk-check-tresc { font-size: .92rem; line-height: 1.55; color: var(--sa-txt, #e2e8f0); }
.mk-check-tresc b { font-weight: 600; }
.mk-check-szczegol { display: block; margin-top: .25rem; font-size: .8rem; }
.mk-check-szczegol .mk-daje { display: block; color: var(--sa-acc, #6ee7b7); }
.mk-check-szczegol .mk-grozi { display: block; color: #fca5a5; }
/* Szczegóły odsłaniają się po zaznaczeniu — inaczej lista 20 pozycji jest ścianą tekstu. */
.mk-check input:not(:checked) ~ .mk-check-tresc .mk-check-szczegol { display: none; }

.mk-braki {
  margin-top: 1.3rem; padding: 1rem 1.1rem; border-radius: 11px;
  background: var(--sa-bg2, #0b1220); border-left: 3px solid #f87171;
}
.mk-braki h4 { margin: 0 0 .6rem; font-size: 1rem; color: #fca5a5; }
.mk-braki-lista { margin: 0; padding-left: 1.2rem; }
.mk-braki-lista li { margin: .35rem 0; font-size: .88rem; line-height: 1.5; color: var(--sa-muted, #94a3b8); }
.mk-braki-lista li b { color: var(--sa-txt, #e2e8f0); font-weight: 600; }
.mk-braki .mk-wszystko-ok { margin: 0; color: var(--sa-acc, #6ee7b7); font-size: .9rem; }
.mk-kombinacja {
  padding: .7rem .9rem; margin-bottom: .8rem; border-radius: 9px;
  background: rgba(248, 113, 113, .14); border: 1px solid rgba(248, 113, 113, .45);
  font-size: .88rem; line-height: 1.5; color: #fecaca; font-weight: 600;
}

/* ---------- 13. Generator (dodany 2026-10-02) ---------- */
/* Czytelnik wychodzi z własnym dokumentem — to jedyna przewaga nad darmowym wzorem z sieci. */

.mk-gen-pola { display: grid; gap: .9rem; margin-bottom: 1.1rem; }
.mk-gen-pole input[type="text"],
.mk-gen-pole textarea,
.mk-gen-pole select,
.mk-kalk .mk-pole-liczba {
  width: 100%; padding: .6rem .75rem; min-height: 42px;
  font: 400 .92rem/1.5 var(--sans, system-ui, sans-serif);
  color: var(--sa-txt, #e2e8f0);
  background: var(--sa-bg2, #0b1220);
  border: 1px solid rgba(var(--sa-acc-rgb, 110 231 183), .3);
  border-radius: 8px;
}
.mk-gen-pole textarea { resize: vertical; line-height: 1.6; }
.mk-gen-pole input:focus, .mk-gen-pole textarea:focus, .mk-gen-pole select:focus,
.mk-kalk .mk-pole-liczba:focus {
  outline: none; border-color: var(--sa-acc, #6ee7b7);
  box-shadow: 0 0 0 3px rgba(var(--sa-acc-rgb, 110 231 183), .14);
}
.mk-kalk .mk-pole-liczba { font: 700 1.05rem/1.3 var(--mono, monospace); max-width: 220px; }
.mk-kalk .mk-jednostka { font-weight: 400; color: var(--sa-muted, #94a3b8); }

.mk-gen-postep { font-size: .82rem; color: var(--sa-muted, #94a3b8); margin-bottom: .7rem; }
.mk-gen-podglad {
  background: #05080f; border-radius: 10px; padding: 1rem 1.1rem; margin: 0;
  font: .84rem/1.7 var(--mono, ui-monospace, monospace);
  color: #cfe3ff; max-height: 360px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
}

@media (max-width: 640px) {
  .mk-check { padding: .6rem .4rem; }
  .mk-gen-podglad { font-size: .78rem; padding: .8rem .85rem; }
  .mk-kalk .mk-pole-liczba { max-width: 100%; }
}