/* Regulamin, polityka prywatności, kontakt, baner cookies i 404 (projekt: docs/projekt/Fotoapka Prawne i 404.dc.html)
   Ładuje się po style.css i fotoapka.css (tokeny --fa-*), patrz qg_theme_assets().

   Ekrany projektu (25.09.2026): L1 regulamin na komputerze, L2 polityka
   prywatności na telefonie, L3 baner cookies, 404 na komputerze i telefonie.
   Wartości (rozmiary, odstępy, promienie, obroty) przepisane z atrybutów
   style prototypu — przy zmianie porównuj zrzutem na 1440 i 390 px.

   Strony dostają <body class="fa-strona"> z szablonu (page.php, 404.php,
   index.php, single.php), więc tło, kroje, fokus i scroll-padding-top pod
   kotwice biorą się z fotoapka.css. Tamten arkusz zeruje marginesy i kropki list w #tresc —
   w treści dokumentów przywracamy je niżej. Szerokość jak nagłówek: 1240 px
   z odstępem 24 px, więc tytuł stoi w jednej linii z logo. */

/* ---------------------------------------------------------------------
   Dokument: tytuł, zakładki, skrót, spis treści (page.php, index.php, single.php)
   --------------------------------------------------------------------- */
.fa-dok { max-width: 1240px; margin: 0 auto; padding: 0 24px 72px; color: var(--fa-atrament); }
.fa-dok__gora { padding: 56px 0 40px; display: flex; flex-direction: column; gap: 14px; }

.fa-dok__zakladki { display: flex; flex-wrap: wrap; gap: 8px; }
.fa-dok__zakladki a {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1.5px solid rgba(26, 20, 16, .2);
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	color: var(--fa-atrament);
	text-decoration: none;
}
.fa-dok__zakladki a:hover { border-color: var(--fa-atrament); color: var(--fa-atrament); }
.fa-dok__zakladki a[aria-current="page"] { background: var(--fa-atrament); border-color: var(--fa-atrament); color: var(--fa-krem); }

/* h1 dostaje ze style.css wagę, interlinię i margines — tu wszystko wprost. */
.fa-dok .fa-dok__tytul {
	margin: 0;
	font-family: var(--fa-font-naglowki);
	font-weight: 800;
	font-size: 72px;
	line-height: 1;
	letter-spacing: normal;
	color: var(--fa-atrament);
	text-shadow: 3px 3px 0 rgba(26, 20, 16, .14);
}
.fa-dok__data { font-size: 16px; color: var(--fa-tekst-2); }

.fa-dok__uklad { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; align-items: start; }

/* Bok przyklejony pod paskiem (68 px) — na niskim oknie przewija się sam,
   zamiast uciąć dół spisu treści. overflow-y: auto przycina też w poziomie,
   więc lewy odstęp 8 px (cofnięty marginesem) mieści obrócony róg karty
   skrótu — bez niego był ucięty prosto (recenzja 25.09.2026). */
.fa-dok__bok {
	position: sticky;
	top: calc(68px + 24px + var(--wp-admin--admin-bar--height, 0px));
	max-height: calc(100vh - 68px - 48px - var(--wp-admin--admin-bar--height, 0px));
	overflow-y: auto;
	padding: 8px 6px 8px 8px;
	margin-left: -8px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fa-dok__skrot { border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 8px; transform: rotate(-2deg); }
.fa-dok__skrot p { font-size: 14px; line-height: 1.5; }
.fa-dok__skrot .fa-dok__skrot-tytul { font-size: 16px; font-weight: 800; line-height: normal; }
.fa-dok__skrot--zolty { background: var(--fa-zolty); color: var(--fa-atrament); }
.fa-dok__skrot--ciemny { background: var(--fa-atrament); color: var(--fa-krem); }
.fa-dok__skrot--ciemny .fa-dok__skrot-tytul { color: var(--fa-zolty); }

.fa-dok__spis { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.fa-dok__spis a { padding: 10px 14px; border-radius: 12px; line-height: normal; color: var(--fa-tekst-2); text-decoration: none; }
.fa-dok__spis a:hover { color: var(--fa-atrament); background: rgba(255, 255, 255, .55); }
.fa-dok__spis a[aria-current] { background: #fff; color: var(--fa-atrament); font-weight: 600; }

/* ---------------------------------------------------------------------
   Treść dokumentu (docs/prawne/*.html po filtrze the_content)
   --------------------------------------------------------------------- */
.fa-dok__tresc { display: flex; flex-direction: column; gap: 36px; max-width: 760px; min-width: 0; }
.fa-dok__tresc--sama,
.fa-dok__sekcja-tresc { gap: 12px; }
.fa-dok__sekcja-tresc { display: flex; flex-direction: column; margin-top: 12px; }

.fa-dok__tresc h2 {
	margin: 0;
	font-family: var(--fa-font-naglowki);
	font-weight: 800;
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: normal;
	color: var(--fa-atrament);
}
.fa-dok__tresc--sama h2:not(:first-child) { margin-top: 24px; }
.fa-dok__tresc h3 {
	margin: 12px 0 0;
	font-family: var(--fa-font-naglowki);
	font-weight: 800;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: normal;
	color: var(--fa-atrament);
}
.fa-dok__tresc :is(p, li) { font-size: 17px; line-height: 1.7; color: var(--fa-tekst-2); text-wrap: pretty; }
/* Plus Jakarta Sans (calt) rysuje łącznik między cyframi szeroko jak
   półpauzę — kod pocztowy „39-100” wyglądał na „39–100” (recenzja 25.09.2026). */
.fa-dok__tresc p { font-feature-settings: "calt" 0; }
/* Kropki i odstępy tylko dla list samych dokumentów: nawigacja konta
   WooCommerce (też przez page.php) dostawała kropki i 25-pikselowe linki
   (recenzja 25.09.2026). */
:is(.fa-dok__tresc > ul, .fa-dok__sekcja-tresc ul) { margin: 0; padding-left: 1.3em; list-style: disc; }
:is(.fa-dok__tresc > ul, .fa-dok__sekcja-tresc ul) > li + li { margin-top: 6px; }
:is(.fa-dok__tresc > ul, .fa-dok__sekcja-tresc ul) > li::marker { color: var(--fa-pomarancz); }
.fa-dok .woocommerce-MyAccount-navigation { margin-bottom: 24px; }
.fa-dok .woocommerce-MyAccount-navigation a { display: flex; align-items: center; min-height: 44px; }
.fa-dok__tresc strong { color: var(--fa-atrament); }
.fa-dok__tresc a { color: var(--fa-atrament); text-decoration-color: var(--fa-pomarancz); text-underline-offset: .15em; }
.fa-dok__tresc a:hover { color: var(--fa-pomarancz-ciemny); }

/* Tabele (pakiety w regulaminie §2, podstawy i ciasteczka w polityce). */
.fa-dok__tresc table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.5;
}
.fa-dok__tresc :is(th, td) { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(26, 20, 16, .1); }
.fa-dok__tresc tr:last-child > :is(th, td) { border-bottom: 0; }
.fa-dok__tresc thead th { background: var(--fa-krem-ciemny); font-weight: 800; color: var(--fa-atrament); }
.fa-dok__tresc tbody th { font-weight: 600; color: var(--fa-atrament); }
.fa-dok__tresc td { color: var(--fa-tekst-2); }
/* Tabela pakietów (jedyna z nagłówkami wierszy): liczby w jednym wierszu,
   łamie się opis w pierwszej kolumnie, a na telefonie także nazwa pakietu. */
.fa-dok__tresc table:has(tbody th) td { white-space: nowrap; }
@media (min-width: 800px) {
	.fa-dok__tresc table:has(tbody th) thead th { white-space: nowrap; }
}
/* Długie nazwy ciasteczek (storeApiCartData, wordpress_logged_in_*) łamią się
   w pierwszej kolumnie, zamiast rozpychać tabelę za ekran (audyt FRONT-4). */
.fa-dok__tresc td:first-child { overflow-wrap: anywhere; }

/* Znacznik wersji roboczej na górze dokumentu (docs/prawne, 25.09.2026) —
   biała karta jak przypis „Treść ma charakter przykładowy…” w projekcie. */
.fa-dok__tresc .fa-robocza { background: #fff; border-radius: 18px; padding: 18px 22px; font-size: 14px; line-height: 1.5; }

/* Sekcje jako <details>: na komputerze zawsze otwarte, nagłówek nie jest
   przyciskiem (skrypt w page.php zdejmuje go z kolejności Tab). */
.fa-dok__sekcja > summary { display: block; list-style: none; }
.fa-dok__sekcja > summary::-webkit-details-marker { display: none; }
@media (min-width: 1000px) {
	.fa-dok__sekcja > summary { pointer-events: none; }
}

/* Lista wpisów (index.php) */
.fa-wpisy { display: flex; flex-direction: column; gap: 32px; }
.fa-wpis { display: flex; flex-direction: column; gap: 6px; }
.fa-dok__tresc .fa-wpis h2 a { color: var(--fa-atrament); text-decoration: none; }
.fa-dok__tresc .fa-wpis h2 a:hover { color: var(--fa-pomarancz); }
.fa-dok__tresc .fa-wpis__meta { font-size: 14px; }
.fa-dok .nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fa-dok .nav-links :is(a, span) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(26, 20, 16, .2); color: var(--fa-atrament); text-decoration: none; font-weight: 600; font-size: 15px; }
.fa-dok .nav-links .current { background: var(--fa-atrament); border-color: var(--fa-atrament); color: var(--fa-krem); }

/* ---------------------------------------------------------------------
   Baner zgody na Google Analytics (qg_theme_analityka w functions.php)

   Pokazuje się tylko przy ustawionym identyfikatorze GA. Na dole ekranu,
   wyśrodkowany (prośba Damiana 23.09.2026), wygląd z ekranu L3. Odmowa jest
   równorzędna ze zgodą: ten sam kształt, rozmiar i krój, obie wypełnione —
   w projekcie „Tylko niezbędne” miało sam obrys obok pomarańczowej zgody,
   a odmowa nie może być mniej widoczna (art. 399 Pke, wytyczne EROD).
   Stare reguły .qg-zgoda ze style.css są tu nadpisane w całości.
   --------------------------------------------------------------------- */
.qg-zgoda {
	position: fixed;
	z-index: 40;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom));
	transform: translateX(-50%) rotate(-1deg);
	width: calc(100% - 32px);
	max-width: 420px;
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--fa-atrament);
	color: var(--fa-krem);
	border: 0;
	border-radius: 28px;
	box-shadow: 0 30px 60px -20px rgba(26, 20, 16, .6);
	font-family: var(--fa-font-tekst);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}
.qg-zgoda[hidden] { display: none; }
.qg-zgoda__glowa { display: flex; gap: 14px; align-items: center; }
.qg-zgoda__ciastko { display: block; flex: none; }
.qg-zgoda .qg-zgoda__tytul { margin: 0; font-family: var(--fa-font-naglowki); font-weight: 800; font-size: 26px; line-height: 1; }
.qg-zgoda .qg-zgoda__tekst { margin: 0; color: var(--fa-na-ciemnym); }
.qg-zgoda .qg-zgoda__przyciski { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qg-zgoda__przycisk {
	min-height: 44px;
	padding: 12px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font: 600 14px/1.2 var(--fa-font-tekst);
	cursor: pointer;
}
.qg-zgoda__przycisk--nie { background: var(--fa-krem); border-color: var(--fa-krem); color: var(--fa-atrament); }
.qg-zgoda__przycisk--nie:hover { background: #fff; border-color: #fff; }
/* Zgoda na ciemniejszym pomarańczu: biały 14 px na #e8492a ma 3,9:1, poniżej
   AA 4,5:1 dla zwykłego tekstu; na #c93a1e 5,1:1 (recenzja 25.09.2026).
   Najechanie zostawia sam obrys, żeby nie wracać do jaśniejszego tła. */
.qg-zgoda__przycisk--tak { background: var(--fa-pomarancz-ciemny); border-color: var(--fa-pomarancz-ciemny); color: #fff; }
.qg-zgoda__przycisk--tak:hover { background: transparent; color: var(--fa-krem); }
/* Pole dotyku 44 px zamiast 20 px wiersza; ujemny margines oddaje miejsce. */
.qg-zgoda .qg-zgoda__szczegoly { align-self: center; padding: 12px 4px; margin: -12px 0; font-size: 13px; color: var(--fa-na-ciemnym-2); text-decoration: underline; }
.qg-zgoda .qg-zgoda__szczegoly:hover { color: var(--fa-krem); }
.qg-zgoda :focus-visible { outline: 3px solid var(--fa-zolty); outline-offset: 3px; }

/* Telefon: przy 26 px i ciastku 52 px „Ciasteczko do tortu?” łamało się
   w dwie linie, a przy 360 px także „Tylko niezbędne” (zrzuty 360 i 390 px). */
@media (max-width: 459px) {
	.qg-zgoda { padding: 22px 20px; gap: 14px; }
	.qg-zgoda__glowa { gap: 12px; }
	.qg-zgoda__ciastko { width: 44px; height: 44px; }
	.qg-zgoda .qg-zgoda__tytul { font-size: 23px; }
	.qg-zgoda__przycisk { padding: 12px 8px; }
}

/* ---------------------------------------------------------------------
   404 (404.php)
   Konfetti liczone od lewego brzegu treści jak w projekcie (tam 48 px od
   krawędzi ramki, tu 24 px od krawędzi kontenera) i od dołu paska.
   --------------------------------------------------------------------- */
/* Kolumny do góry, a tekst z odstępem 71 px — tyle dawało wyśrodkowanie
   przy 1440 px. Przy align-items: center otwarty formularz „Mam kod galerii”
   wydłużał kolumnę, „404” jechało w górę pod różowe konfetti (recenzja
   25.09.2026); teraz formularz rośnie w dół, a reszta stoi. */
.fa-404 {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 48px 24px 72px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
	color: var(--fa-atrament);
}
.fa-404__konfetti { position: absolute; }
/* Żółte stoi w przerwie między kolumnami (616 px przy 1240 px) — liczone od
   środka, bo na sztywno przy węższym oknie wchodziło za zdjęcie. */
.fa-404__konfetti--1 { top: 84px; left: calc(50% - 4px); width: 16px; height: 36px; background: var(--fa-zolty); border-radius: 3px; transform: rotate(30deg); }
.fa-404__konfetti--2 { top: -21px; left: 32px; width: 18px; height: 18px; background: var(--fa-kawalerski); border-radius: 50%; }
.fa-404__konfetti--3 { top: 44px; left: 96px; width: 14px; height: 30px; background: var(--fa-zareczyny); border-radius: 3px; transform: rotate(-40deg); }

.fa-404__tekst { position: relative; margin-top: 71px; display: flex; flex-direction: column; gap: 24px; }
.fa-404 .fa-404__kod {
	margin: 0;
	font-family: var(--fa-font-naglowki);
	font-weight: 800;
	font-size: 200px;
	line-height: .8;
	color: var(--fa-pomarancz);
	-webkit-text-stroke: 3px var(--fa-atrament);
	paint-order: stroke fill;
	text-shadow: 4px 4px 0 var(--fa-atrament), 8px 8px 0 var(--fa-atrament), 12px 12px 0 var(--fa-atrament);
}
.fa-404 .fa-404__tytul {
	margin: 0;
	font-family: var(--fa-font-naglowki);
	font-weight: 800;
	font-size: 56px;
	line-height: 1;
	letter-spacing: normal;
	color: var(--fa-atrament);
	text-shadow: 3px 3px 0 rgba(26, 20, 16, .14);
}
.fa-404 .fa-404__opis { font-size: 19px; line-height: 1.5; color: var(--fa-tekst-2); max-width: 520px; }

.fa-404__przyciski { position: relative; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
/* 19 px pogrubione to w WCAG duży tekst (od 18,66 px), dla którego wystarcza
   3:1 — biały na pomarańczu ma 3,9:1. Przy 17 px z projektu brakowało do
   4,5:1 (recenzja 25.09.2026). */
.fa-404__glowna {
	background: var(--fa-pomarancz);
	color: #fff;
	border-radius: 999px;
	padding: 17px 28px;
	font-weight: 800;
	font-size: 19px;
	line-height: normal;
	text-decoration: none;
}
.fa-404__glowna:hover { background: var(--fa-pomarancz-ciemny); color: #fff; }
.fa-404__kod-galerii > summary {
	list-style: none;
	border: 1.5px solid var(--fa-atrament);
	border-radius: 999px;
	padding: 17px 26px;
	font-weight: 600;
	font-size: 17px;
	line-height: normal;
	text-align: center;
	cursor: pointer;
}
.fa-404__kod-galerii > summary::-webkit-details-marker { display: none; }
.fa-404__kod-galerii > summary:hover,
.fa-404__kod-galerii[open] > summary { background: var(--fa-atrament); color: var(--fa-krem); }

/* Formularz pod przyciskiem, tej samej szerokości co on: width 0 +
   min-width 100% nie pozwala długiej etykiecie rozepchnąć przycisku do
   nowego wiersza. */
.fa-404__formularz { width: 0; min-width: 100%; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.fa-404__formularz label { font-size: 14px; line-height: 1.4; color: var(--fa-tekst-2); }
.fa-404__pole { display: flex; flex-direction: column; gap: 8px; }
.fa-404__pole input {
	min-height: 48px;
	padding: 10px 16px;
	border: 1.5px solid #8c7f73;
	border-radius: 14px;
	background: #fff;
	color: var(--fa-atrament);
	font: 600 17px/1.2 var(--fa-font-tekst);
	letter-spacing: .06em;
	text-transform: uppercase;
}
.fa-404__pole button {
	min-height: 48px;
	border: 0;
	border-radius: 999px;
	background: var(--fa-atrament);
	color: var(--fa-krem);
	font: 800 16px/1.2 var(--fa-font-tekst);
	cursor: pointer;
}
.fa-404__pole button:hover { background: #000; }
/* Błąd kolorem tekstu (#c93a1e na kremie ma 6,2:1), bez bocznego paska,
   którego projekt nie ma (uwaga detektora, 25.09.2026). */
.fa-404 .fa-404__blad { font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--fa-pomarancz-ciemny); }
.fa-404 :focus-visible { outline: 3px solid var(--fa-atrament); outline-offset: 3px; }

.fa-404__grafika { position: relative; height: 600px; }
.fa-404__plama { position: absolute; top: 30px; right: 0; width: 84%; height: 520px; border-radius: 32px; background: var(--fa-zareczyny); transform: rotate(4deg); }
.fa-404__foto {
	position: absolute;
	top: 10px;
	right: 24px;
	width: 84%;
	height: 520px;
	max-width: none;
	object-fit: cover;
	border-radius: 28px;
	transform: rotate(-2deg);
	display: block;
}
.fa-404 .fa-404__zart {
	position: absolute;
	bottom: 20px;
	left: 0;
	max-width: 230px;
	background: var(--fa-zolty);
	color: var(--fa-atrament);
	padding: 14px 18px;
	border-radius: 16px;
	font-weight: 800;
	font-size: 19px;
	line-height: 1.15;
	transform: rotate(-6deg);
	box-shadow: 0 14px 30px -14px rgba(26, 20, 16, .5);
}

/* Wskaźnik dotykowy: zakładki i spis treści mają ok. 39 px wysokości jak
   w projekcie — palcem 44 px. */
@media (pointer: coarse) {
	.fa-dok__zakladki a,
	.fa-dok__spis a { min-height: 44px; display: flex; align-items: center; }
}

/* =====================================================================
   Telefon i wąskie ekrany (ekrany L2 i „404 telefon”, 390 px)
   ===================================================================== */

/* Dwie kolumny dokumentu mieszczą się do ok. 1000 px — niżej dokument traci
   spis z boku, więc od tego progu sekcje są listą rozwijaną (skrypt
   w page.php, ten sam próg). Do 25.09.2026 zwijały się dopiero od 799 px
   i tablet dostawał 10 000 px bez nawigacji. 404 zostaje w dwóch kolumnach
   do 800 px, tu tylko mniejszy tytuł — przy 56 px łamał się na cztery linie. */
@media (max-width: 999px) {
	.fa-dok__uklad { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.fa-dok__bok { position: static; max-height: none; overflow: visible; padding: 0; margin-left: 0; }
	.fa-dok__spis { display: none; }
	.fa-dok__tresc { max-width: none; }
	/* Obrócona karta na całą szerokość tabletu wyglądała na krzywo wklejoną. */
	.fa-dok__skrot { max-width: 420px; }

	/* Sekcje jako lista rozwijana z plusem i minusem. Nagłówek przez
	   summary > h2, bo niżej .fa-dok__tresc h2 z telefonu ma tę samą wagę. */
	.fa-dok__uklad .fa-dok__tresc { gap: 0; }
	.fa-dok__tresc > .fa-robocza { margin-bottom: 12px; }
	.fa-dok__sekcja { border-bottom: 1px solid rgba(26, 20, 16, .15); }
	.fa-dok__sekcja > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 16px 4px; cursor: pointer; }
	.fa-dok__sekcja > summary::after { content: "+"; content: "+" / ""; flex: none; font-weight: 600; font-size: 15px; }
	.fa-dok__sekcja[open] > summary { padding-bottom: 8px; }
	.fa-dok__sekcja[open] > summary::after { content: "–"; content: "–" / ""; }
	.fa-dok__sekcja > summary > h2 { font-family: var(--fa-font-tekst); font-weight: 600; font-size: 15px; line-height: 1.4; }
	.fa-dok__sekcja-tresc { margin: 0; padding: 0 4px 16px; gap: 8px; }

	.fa-404 { gap: 40px; }
	.fa-404 .fa-404__tytul { font-size: 44px; }
}

@media (max-width: 799px) {
	.fa-dok { padding-bottom: 40px; }
	.fa-dok__gora { padding: 16px 0 18px; gap: 18px; }
	/* Projekt telefonu nie ma zakładek — do regulaminu i polityki prowadzi
	   stopka, do ciasteczek sekcja 7 polityki. */
	.fa-dok__zakladki { display: none; }
	.fa-dok .fa-dok__tytul { font-size: 42px; }
	.fa-dok__data { font-size: 15px; }

	.fa-dok__tresc h2 { font-size: 26px; }
	.fa-dok__skrot { transform: none; border-radius: 20px; padding: 18px; gap: 10px; }
	.fa-dok__skrot .fa-dok__skrot-tytul { font-size: 15px; }

	.fa-dok__tresc h3 { font-size: 17px; margin-top: 8px; }
	.fa-dok__tresc :is(p, li) { font-size: 15px; line-height: 1.6; }
	.fa-dok__sekcja-tresc :is(p, li) { font-size: 14px; }
	.fa-dok__tresc table { font-size: 13px; border-radius: 14px; }
	.fa-dok__tresc :is(th, td) { padding: 8px; }
	/* Tabela pakietów: słowa w całości (overflow-wrap: anywhere ścinał
	   kolumny do sylaby, „Kameraln|ie”), więc mniejszy krój i ciaśniej —
	   przy 13 px brakowało 2 px do 312 px treści na 360 px (recenzja 25.09.2026). */
	.fa-dok__tresc table:has(tbody th) { font-size: 12px; }
	.fa-dok__tresc table:has(tbody th) :is(th, td) { padding: 8px 5px; }
	.fa-dok__tresc table:has(tbody th) :is(th, td):first-child { padding-left: 10px; }
	/* Tabele bez nagłówków wierszy (podstawy prawne, ciasteczka) jako karty:
	   wiersz to biała karta, pierwsza komórka jej tytułem, pozostałe
	   z nazwą kolumny z data-label (page.php). Cztery kolumny w 360 px
	   łamały słowa w środku, „pows|taje” (recenzja 25.09.2026). */
	.fa-dok__tresc .fa-karty,
	.fa-dok__tresc .fa-karty :is(tbody, tr, td) { display: block; }
	.fa-dok__tresc .fa-karty { background: none; border-radius: 0; overflow: visible; }
	.fa-dok__tresc .fa-karty thead { display: none; }
	.fa-dok__tresc .fa-karty tr { padding: 12px 14px; background: #fff; border-radius: 14px; }
	.fa-dok__tresc .fa-karty tr + tr { margin-top: 8px; }
	.fa-dok__tresc .fa-karty td { padding: 2px 0; border: 0; }
	.fa-dok__tresc .fa-karty td::before { content: attr(data-label) ": "; font-weight: 600; color: var(--fa-atrament); }
	.fa-dok__tresc .fa-karty td:first-child { padding-bottom: 6px; font-weight: 600; color: var(--fa-atrament); }
	.fa-dok__tresc .fa-karty td:first-child::before { content: none; }
	.fa-dok__tresc .fa-robocza { font-size: 14px; padding: 14px 18px; }

	/* 404: zdjęcie na górze z numerem na rogu, przyciski na dole ekranu. */
	.fa-404 {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
		min-height: calc(100svh - 73px);
		padding: 8px 24px 28px;
	}
	.fa-404__konfetti,
	.fa-404__plama,
	.fa-404 .fa-404__zart { display: none; }
	.fa-404__tekst { display: contents; }
	.fa-404__grafika { order: -1; height: 300px; flex: none; }
	.fa-404__foto { position: static; width: 100%; height: 100%; border-radius: 24px; }
	.fa-404 .fa-404__kod {
		position: absolute;
		top: -2px;
		right: 18px;
		z-index: 1;
		font-size: 72px;
		line-height: 1;
		-webkit-text-stroke-width: 2px;
		text-shadow: 3px 3px 0 var(--fa-atrament), 6px 6px 0 var(--fa-atrament);
		transform: rotate(6deg);
	}
	.fa-404 .fa-404__tytul { font-size: 38px; }
	.fa-404 .fa-404__opis { font-size: 16px; line-height: 1.45; }
	.fa-404__przyciski { margin-top: auto; flex-direction: column; align-items: stretch; gap: 10px; }
	.fa-404__glowna { padding: 16px; text-align: center; box-shadow: 0 4px 0 var(--fa-atrament); }
	.fa-404__kod-galerii > summary { padding: 15px; font-size: 15px; }
}