@charset "utf-8";
/* =====================================================================
   Strop — system projektowy makiety wificaller.pl
   Seria STRONY-WWW-ST-CBF. Makieta HTML+CSS: zero JavaScriptu, zero zdjęć,
   zero znaków firmowych, zero formularzy. Wszystkie barwy przez zmienne.
   Idea: serwis tłumaczy, dlaczego w jednym pokoju telefon dzwoni bez problemu, a w drugim rozmowa się rwie, więc strona jest złożona jak przekrój domu: ciepła płaszczyzna tynku zamiast białego papieru, gzyms barwy wiodącej nad paskiem nagłówka, poziome kreski kondygnacji stojące w prawym marginesie i pełna linia zamykająca każdy nagłówek sekcji niczym strop między pomieszczeniami
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  --papier:          #FBF7F2;
  --papier-karta:    #FFFFFF;
  --tlo-2:           #F3ECE4;
  --wiodaca-jasna:   #F9E7DC;
  --atrament:        #211A15;
  --atrament-cichy:  #57493F;
  --wiodaca:         #9C4A24;
  --wiodaca-ciemna:  #733517;
  --akcent:          #33536E;
  --linia:           #786454;
  --linia-cicha:     #92806F;
  /* barwa pisma NA powierzchni w barwie wiodącej — osobny token, bo motyw
     ciemny ma jasną „wiodącą ciemną" i biały napis na przycisku byłby wtedy
     nieczytelny. Mierzy to bramka B6. */
  --na-wiodacej:     #FFFFFF;
  --na-akcencie:     #FFFFFF;

  --krój-naglowek: "Domine", Georgia, "Times New Roman", "Nimbus Roman", "Liberation Serif", serif;
  --krój-tekst:    "Mulish", "Segoe UI", Roboto, "Noto Sans", "DejaVu Sans", Arial, sans-serif;
  --krój-maszyna:  ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;

  /* ⚠⚠ MIARA W REM, NIE W EM — i to jest POPRAWKA, nie kosmetyka.
     Gdy każdy blok miał max-width we WŁASNYCH em, ta sama liczba dawała inną
     szerokość w pikselach: przy 1920 px proza wychodziła 925 px, a h2 — 2505 px,
     czyli po obcięciu do kontenera PEŁNE 1728 px. Kreska pod nagłówkiem była
     więc dwa razy dłuższa niż tekst pod nią i pokazywała palcem pustkę.
     W rem wszystkie bloki dostają JEDNĄ krawędź. 45rem ≈ 36em prozy, czyli
     długość wiersza (~70 znaków) zostaje bez zmiany. */
  /* ⚠⚠ 36rem, NIE 45rem. Mój własny komentarz z 00:40 („45rem ≈ 36em prozy,
     ~70 znaków") BYŁ FAŁSZYWY: clamp(1.06rem…1.24rem) dotyczy WYŁĄCZNIE
     .wprowadzenie i .tytul + p, a zwykła proza NIE MA własnego font-size —
     dziedziczy rozmiar KORZENIA. Przy 1920 px korzeń to 20,72 px, więc 45rem
     dawało 45em prozy, czyli ~90–106 znaków w wierszu zamiast przepisowych
     60–75. Naprawa wycentrowania po cichu rozciągnęła wiersz o jedną czwartą.
     ⭐ Pomiar B13 tego nie pokazał, bo sonda trafiała w akapit WPROWADZENIA
     (większy font), nie w prozę. Wyszło dopiero z liczenia znaków na zrzucie. */
  /* ⚠ 34rem, nie 36rem: miara w rem jest ŚLEPA NA KRÓJ. Zmierzone na zrzutach:
     przy 36rem kroje szerokie (Lora, Source Serif 4, Karla) dawały 69–76 znaków —
     cel trafiony — ale wąskie (Source Sans 3) 84. Przy 34rem wąskie schodzą
     do ~79, szerokie do ~66; cała seria mieści się w tolerancji. */
  --kolumna:        34rem;   /* wspólna kolumna tekstu — h1, h2 i proza */
  /* ⚠ 58rem, nie 100%. Pełna szerokość kontenera dawała DWIE LEWE KRAWĘDZIE:
     nagłówek „Poradnik" i wstęp stały w wyśrodkowanej kolumnie, a rząd kart
     skakał do krawędzi paska — przy 1920 różnica 491 px. Tytuł nie stał nad
     tym, co nazywa. Teraz obie kolumny są wyśrodkowane i mają wspólną oś. */
  --kolumna-szeroka: 58rem;  /* karty i indeks bloga — wyraźnie szersze od prozy,
                                78rem dawało 1616 px przy kontenerze 1728 px, czyli
                                chybienie o 56 px: za mało na decyzję, za dużo na
                                wyrównanie. Teraz karty mają krawędź paska i stopki. */
  --łam:         36em;    /* zgodność wstecz; nowe reguły używają --kolumna */
  --łam-szeroki: 62em;
  --margines:    clamp(20px, 5vw, 112px);
  --promień:     8px;
}

/* --- 2. RESET I PODSTAWA --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* ⭐⭐ zasada użytkownika: makieta MA ROSNĄĆ powyżej 1366 px (bramka B13) */
  font-size: clamp(1rem, 0.875rem + 0.35vw, 1.4rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.65;
  /* ⚠ długie adresy http w prozie rozpychały widok na 360 px (bramka B5) */
  overflow-wrap: break-word;
  
}

img, svg { max-width: 100%; height: auto; }
a { color: var(--wiodaca-ciemna); overflow-wrap: anywhere; }

:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; border-radius: var(--promień); }

/* skip-link — niewidoczny, ale z PEŁNYM polem trafienia.
   ⚠ pułapka: wariant „1 px + clip" daje prostokąt 1×1, a bramka B7 mierzy
   getBoundingClientRect, nie widoczność. clip-path chowa treść i obcina
   trafienia, więc element 180×48 nie zasłania nagłówka. */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 180px; height: 48px;
  display: flex; align-items: center;
  padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.omin:focus {
  position: fixed; z-index: 40;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.4rem;
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  font-weight: 600; text-decoration: none;
}

/* --- 3. KONTENER ------------------------------------------------------
   ⚠ Bez sztywnego max-width: przy 1920 kolumna treści ma zaczynać się
   ~96 px od krawędzi, a nie w środku pustego ekranu (bramka B13). */
.kontener { width: 100%; padding-inline: var(--margines); }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek { position: relative; background: var(--papier); border-block-end: 1px solid var(--linia-cicha); }
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(.7rem, 1.4vw, 1.2rem);
  flex-direction: column; align-items: center; justify-content: center; gap: .35rem .8rem; text-align: center;
}
.naglowek__pas .menu__lista { justify-content: center; }
.naglowek::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 5px; background: var(--wiodaca); }

/* sygnatura słowna — typograficzna; nigdy nie udaje logotypu firmy (T8) */
.znak {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.12rem, 1rem + .5vw, 1.5rem);
  letter-spacing: .01em; text-decoration: none;
  color: var(--atrament); padding-inline-start: .6em; border-inline-start: 5px solid var(--wiodaca);
}

.menu__lista {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .2rem clamp(.4rem, 1.4vw, 1.4rem);
  margin: 0; padding: 0; list-style: none;
}
.menu__link {
  display: inline-flex; align-items: center; min-height: 44px;   /* B7 */
  padding-inline: .7em;
  font-weight: 600; font-size: .95rem; letter-spacing: .02em;
  text-decoration: none;
  border-block-end: 3px solid transparent;
  color: var(--atrament-cichy);
}
.menu__link:hover { color: var(--wiodaca-ciemna); border-block-end-color: var(--linia); }
.menu__link[aria-current="page"] { color: var(--wiodaca-ciemna); border-block-end-color: var(--wiodaca); }

/* --- 5. TREŚĆ -------------------------------------------------------- */
.tresc {
  position: relative;
  padding-block: clamp(2rem, 1rem + 3vw, 4.5rem) clamp(3rem, 2rem + 3vw, 6rem);
  overflow: hidden;             /* ornament nie dokłada przewijania (B5) */
}
/* ⚠ ornament rysowany po treści przykrywał karty — treść stoi wyżej */
.tresc > .kontener { position: relative; z-index: 1; }
.tresc::after { content: ""; position: absolute; z-index: 0; pointer-events: none; inset-block: clamp(2rem, 4vw, 5rem) 2rem; inset-inline-end: var(--margines); inset-inline-start: calc(50% + var(--kolumna) / 2 + 1.5rem); width: auto; border-inline-start: 1px solid var(--linia-cicha); background-image: repeating-linear-gradient(0deg, var(--linia-cicha) 0 1px, transparent 1px 44px); opacity: .55; display: none; }
@media (min-width: 1240px) { .tresc::after { display: block; } }

/* ⚠ pułapka specyficzności: reguła bazowa „.tresc .kontener > *" (0-2-0)
   bije każdą klasę komponentu (0-1-0). Szerokości komponentów ustawiamy
   więc TYM SAMYM prefiksem. */
/* ⭐ JEDNA KRAWĘDŹ. Wszystkie bloki tekstu dzielą tę samą kolumnę i są
   WYŚRODKOWANE (decyzja użytkownika 2026-08-29). Wcześniej kolumna była
   dosunięta do lewej „żeby nie stała w środku pustego ekranu" — i przy 1920 px
   zostawiało to 899 px (47% szerokości) martwego pola po PRAWEJ, czego bramka
   B13 nie mierzyła, bo patrzyła wyłącznie na lewy margines.
   Szerokość biorą tylko te bloki, które mają się rozpychać: karty i indeks bloga. */
.tresc .kontener > *                { max-width: var(--kolumna); margin-inline: auto; }
.tresc .kontener > .lista-wpisow    { max-width: var(--kolumna-szeroka); }
.tresc .kontener > .próbki          { max-width: var(--kolumna-szeroka); }

/* --- 6. TYPOGRAFIA --------------------------------------------------- */
.tytul {
  position: relative;
  margin: 0 0 clamp(1rem, .6rem + 1vw, 1.8rem);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.85rem, 1.35rem + 2.1vw, 3.1rem);
  line-height: 1.12; letter-spacing: -.015em;
  color: var(--atrament);
  padding-block-start: clamp(1.4rem, 3vw, 2.6rem);
}
.tytul::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: clamp(48px, 8vw, 96px); height: clamp(14px, 2.2vw, 26px); border-block-start: 3px solid var(--wiodaca); border-inline-start: 3px solid var(--wiodaca); }

.wprowadzenie, .tytul + p {
  font-size: clamp(1.06rem, 1rem + .35vw, 1.24rem);
  line-height: 1.6;
}

.tresc h2 {
  position: relative;
  margin: clamp(2.4rem, 1.6rem + 2vw, 3.8rem) 0 .7rem;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.34rem, 1.1rem + .95vw, 1.95rem);
  line-height: 1.22;
  color: var(--wiodaca-ciemna);
  padding-block-end: .5rem; border-block-end: 1px solid var(--linia-cicha);
}
.tresc h2::after { content: ""; position: absolute; inset-block-end: -1px; inset-inline-start: 0; width: clamp(40px, 6vw, 84px); border-block-end: 3px solid var(--wiodaca); }

.tresc h3 {
  margin: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem) 0 .5rem;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.42rem);
  line-height: 1.3; color: var(--atrament);
}

.tresc p { margin: 0 0 1.05em; }

.tresc p a, .tresc li a {
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline; text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.tresc p a:hover, .tresc li a:hover { color: var(--akcent); text-decoration-thickness: 2px; }

/* --- 7. LISTY -------------------------------------------------------- */
.wyliczenie { margin: 0 0 1.3em; padding: 0; list-style: none; }
.wyliczenie li { position: relative; padding-inline-start: 1.6em; margin-block-end: .55em; }
.wyliczenie li::before {
  content: ""; position: absolute;
  inset-block-start: .62em; inset-inline-start: .1em;
  width: .7em; height: 0; border-block-start: 2px solid var(--wiodaca);
}

.kroki { margin: 0 0 1.5em; padding: 0; list-style: none; counter-reset: krok; }
.kroki li {
  counter-increment: krok; position: relative;
  padding: .55em 0 .55em 3em;
  border-block-end: 1px dashed var(--linia-cicha);
}
.kroki li:last-child { border-block-end: 0; }
.kroki li::before {
  content: counter(krok); position: absolute;
  inset-inline-start: 0; inset-block-start: .45em;
  width: 2.05em; height: 2.05em;
  display: grid; place-items: center;
  background: var(--wiodaca-jasna); color: var(--wiodaca-ciemna);
  border: 1px solid var(--wiodaca); border-radius: 50%;
  font-family: var(--krój-naglowek); font-weight: 700; font-size: .85em;
}

/* --- 8. BLOK WIERSZOWY (schemat ze źródła) ---------------------------
   ⚠ pułapka T12: sensem tego bloku są WIERSZE. Wcięcia wiszącego nie ma
   celowo — text-indent działa tylko na pierwszy wiersz bloku, a wiersze
   po <br> pierwszymi nie są, więc wyrzucał pierwszą linię poza szyk. */
.wzor {
  margin: 1.4em 0 1.8em;
  padding: clamp(1rem, .6rem + 1.4vw, 1.8rem) clamp(1rem, .6rem + 1.6vw, 2rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-inline-start: 5px solid var(--wiodaca);
  border-radius: var(--promień);
  font-family: var(--krój-maszyna);
  font-size: clamp(.82rem, .78rem + .22vw, .96rem);
  line-height: 1.85; letter-spacing: .01em;
  color: var(--atrament);
  position: relative;
}

/* --- 9. ODSYŁACZE KIERUNKOWE ----------------------------------------- */
.odsylacz {
  margin: 1.15em 0 1.7em;
  padding: .75em 1.1em .75em 1.15em;
  background: var(--wiodaca-jasna);
  border-inline-start: 4px solid var(--wiodaca);
  border-radius: var(--promień);
  font-size: .97rem; color: var(--atrament);
}
.odsylacz a { font-weight: 600; }

/* akapit, którego CAŁĄ treścią jest odsyłacz — w źródle osobny wiersz.
   ⚠ bramka B7 traktuje go jak samodzielny cel UI, więc musi mieć 44 px. */
.tresc .przejscie { margin-block: 1.1em 1.7em; }
.tresc .przejscie a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .3rem 0;
  font-weight: 700; color: var(--wiodaca-ciemna);
  text-decoration-line: underline; text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
.tresc .przejscie a:hover { color: var(--akcent); }

/* pozycja listy, której CAŁĄ treścią jest odsyłacz — np. wykaz źródeł.
   ⚠ Bramka B7 traktuje taki odsyłacz jak samodzielny cel interfejsu (rodzic nie ma
   własnego tekstu poza nim), więc musi mieć 44 px. Krótki tytuł mieści się w jednym
   wierszu i bez tej reguły ma 21 px. Reguła jest zawężona do treści: menu w pasku
   i w stopce mają własną wysokość i nie są nią objęte. */
.tresc li > a:only-child {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-block: .2rem;
}

/* --- 10. PRZYCISK ---------------------------------------------------- */
.tresc .cta { margin-block: clamp(1.8rem, 1.2rem + 1.4vw, 2.8rem) 0; }
/* ⚠⚠ SELEKTOR MUSI DOROWNAC `.tresc .przejscie a` (0-2-1), INACZEJ PRZYCISK
   TRACI MARGINES WEWNETRZNY. Generator daje temu akapitowi obie klasy naraz:
   <p class="cta przejscie"><a class="przycisk">. Sama klasa `.przycisk` ma
   0-1-0 i przegrywa mimo pozycji nizej, wiec przycisk dostawal `padding: .3rem 0`
   i `min-height: 44px` zamiast `.7rem 1.6rem` i 52 px — NAPIS DOTYKAL RAMKI
   (zmierzone na 3 domenach: 0–4 px odstepu zamiast ~30 px). Wada byla we
   WSZYSTKICH 143 makietach od poczatku serii i zadna bramka jej nie widziala. */
.przycisk, .tresc a.przycisk {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .7rem 1.6rem;
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  border: 1px solid var(--wiodaca-ciemna); border-radius: var(--promień);
  font-weight: 700; font-size: 1.02rem; letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--wiodaca-jasna);
}
.przycisk:hover { background: var(--akcent); border-color: var(--akcent); color: var(--na-akcencie); box-shadow: 3px 3px 0 var(--tlo-2); }
/* ⚠ pułapka „.proza a bije .przycisk" — tekst przycisku znikał */
.tresc p a.przycisk { color: var(--na-wiodacej); text-decoration: none; }

/* --- 11. LISTA WPISÓW ------------------------------------------------ */
.lista-wpisow {
  margin: clamp(1.8rem, 1.2rem + 1.6vw, 3rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.8rem);
}
@media (min-width: 900px)  { .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zapowiedz { display: flex; flex-direction: column; padding: clamp(1.1rem, .8rem + 1vw, 1.7rem); background: var(--tlo-2); border: 1px solid var(--linia-cicha); border-radius: var(--promień); }
/* ⚠ tytuł karty JEST nagłówkiem h2, więc łapią go wszystkie reguły „.tresc h2"
   (0-1-1) — obwódka, gzyms i kreska sekcji pojawiały się w środku karty.
   Klasa sama (0-1-0) tego nie cofnie; potrzebny ten sam prefiks. */
.tresc .zapowiedz__tytul {
  margin: 0 0 .5rem; padding: 0; border: 0; max-width: none; background: none;
  font-family: var(--krój-naglowek);
  font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); line-height: 1.28;
}
.tresc .zapowiedz__tytul::after, .tresc .zapowiedz__tytul::before { content: none; }
/* ⚠ specyficzność: „.tresc li a" (0-1-2) bije „.zapowiedz__tytul a" (0-1-1),
   więc tytuł karty dostawał podkreślenie prozy. Prefiks wyrównuje wagę. */
.tresc .zapowiedz__tytul a {
  display: block; min-height: 44px;
  color: var(--wiodaca-ciemna); text-decoration: none;
}
.tresc .zapowiedz__tytul a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.tresc .zapowiedz__tekst { margin: 0 0 1rem; color: var(--atrament-cichy); font-size: .98rem; }
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: .1rem; text-decoration: none;
  color: var(--wiodaca-ciemna); font-weight: 700;
  border-block-end: 2px solid var(--wiodaca);
}
.tresc .zapowiedz__wiecej a:hover { color: var(--akcent); border-block-end-color: var(--akcent); }

/* --- 12. STOPKA ------------------------------------------------------ */
.stopka {
  background: var(--tlo-2);
  border-block-start: 1px solid var(--linia);
  padding-block: clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
}
.stopka .kontener {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem clamp(1rem, 3vw, 3rem);
}
.stopka__znak {
  margin: 0; font-family: var(--krój-naglowek); font-weight: 700;
  font-size: 1.05rem; color: var(--atrament); letter-spacing: .01em;
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: .2rem clamp(.6rem, 2vw, 1.8rem);
  margin: 0; padding: 0; list-style: none;
}
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 44px;   /* B7 */
  padding-inline: .2em; text-decoration: none;
  color: var(--atrament-cichy); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid transparent;
}
.stopka__menu a:hover { color: var(--wiodaca-ciemna); border-block-end-color: var(--wiodaca); }

/* --- 13. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.próbki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 1.4rem 0 2rem; padding: 0; list-style: none;
}
.próbka {
  border: 1px solid var(--linia-cicha); border-radius: var(--promień);
  background: var(--papier-karta); padding: 0; overflow: hidden;
}
.próbka__pole { display: block; height: 74px; }
.próbka__opis {
  display: block; padding: .7rem .9rem;
  font-family: var(--krój-maszyna); font-size: .82rem;
  color: var(--atrament); line-height: 1.5;
}

/* --- 14. RUCH I DRUK ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  html { font-size: 11pt; }
  body { background: #FFFFFF; color: #000000; }
  .naglowek, .stopka { border-color: #000000; }
  .tresc::after, .tresc::before, .naglowek::after, .naglowek::before { display: none !important; }
  .tresc .kontener > * { max-width: none; }
  a { color: #000000; }
}