/* pki.eu v3 — strony treściowe: aktualności (News/List, News/NewsItem), tematy /t/… (Topic/TopicDetails), kontakt (Common/ContactUs),
   404 (Common/PageNotFound). 869f7deet, brief strony-tresc 21.10.2026. Dołączany TYLKO tam (Html.AppendCssFileParts w widoku, jak
   pkieu-cart.css / pkieu-login.css) — bez edycji wspólnego pkieu-v3.css i jego ?v w Head. Ładuje się po pkieu-v3.css, korzysta z jego
   tokenów (--card-*, --sp-*, --h-lg, --r, --read-w, --gap-sec, --red…) i klas (.btn, .fld, .search, .pki-corners, .news-cards).
   Język sklepu jak koszyk/przechowalnia/logowanie (#423–#425): tytuł w narożnikach marki ⌜⌟, etykiety nad polami, pola o anatomii
   wyszukiwarki, kwadratowe przyciski (główny w czerwieni marki), karty z obwódką --line, liniowe ikony, hover = tło tylko klikalnych.
   Szerokość: tekst i formularze w szerokości czytania (--read-w, 880 px, wyśrodkowane); lista aktualności (.pc-wide) to siatka kart
   na pełną szerokość kontenera. Rytm pionowy strony (pasek menu → tytuł, treść → newsletter) daje layout (pkieu-v3.css, „RYTM
   PIONOWY STRON”) — tu tylko odstępy WEWNĄTRZ strony: nagłówek → treść --sp-5, między sekcjami --gap-sec. */

.pki-content{min-width:0;}
.pki-content:not(.pc-wide){max-width:var(--read-w,880px);margin-left:auto;margin-right:auto;}
.pki-content [hidden]{display:none !important;}  /* .pc-head/.pc-toc mają display — atrybut hidden musi wygrać */

/* ── nagłówek strony: tytuł w narożnikach marki (zawsze widoczne, jak .lg-t logowania), lead, powrót / data ── */
.pc-head{margin:0 0 var(--sp-5);}
.pc-head .page-title{border:0;padding:0;margin:0;}  /* warstwa zgodności (.page-title: linia + 18 px) — tu nagłówek bez linii */
.pc-t{--pc-gx:9px;--pc-gy:6px;display:inline-block;margin:6px 13px 0;font-family:var(--head);font-weight:800;font-size:var(--fs-h1);
  line-height:1.15;letter-spacing:-.01em;color:var(--ink);text-wrap:wrap;max-width:calc(100% - 26px);}  /* bez balance: przy zawiniętym tytule ramka (a z nią ⌟) obejmuje tekst, nie całą szerokość */
.pc-t::before,.pc-t::after{opacity:1;transform:none;transition:none;}
.pc-lead{margin:var(--sp-3) 0 0;max-width:62ch;font-size:var(--fs-base);line-height:1.55;color:var(--body);text-wrap:pretty;}
.pc-back{display:inline-block;margin:0 0 var(--sp-4);font-size:var(--fs-md);color:var(--link);text-decoration:none;}
.pc-back:is(:hover,:focus-visible){color:var(--red);text-decoration:underline;text-underline-offset:3px;}
.pc-date{display:block;margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);}
.pc-rss{display:inline-block;margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--muted);text-decoration:underline;text-underline-offset:3px;}
.pc-rss:is(:hover,:focus-visible){color:var(--red);}

/* ── tekst długi (treść tematów i wpisów z edytora CMS) ── */
.pki-content .pc-prose{font-size:16px;line-height:1.7;color:var(--ink);overflow-wrap:break-word;}
.pki-content .pc-prose :is(p,ul,ol,table,blockquote,figure,pre){margin:0 0 1em;}
.pki-content .pc-prose :is(h1,h2,h3,h4,h5){font-family:var(--head);font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:-.005em;
  margin:1.6em 0 .5em;text-wrap:balance;}
/* H1 w treści = sekcja (tytuł strony to osobny H1 nagłówka) — rozmiar H2, żeby nie konkurował z tytułem */
.pki-content .pc-prose h1{font-size:22px;}
.pki-content .pc-prose h2{font-size:20px;}
.pki-content .pc-prose h3{font-size:17px;}
.pki-content .pc-prose :is(h4,h5){font-size:15px;}
.pki-content .pc-prose > :first-child{margin-top:0;}
.pki-content .pc-prose ul{list-style:disc;padding-left:1.4em;}
.pki-content .pc-prose ol{list-style:decimal;padding-left:1.6em;}
.pki-content .pc-prose li{margin:.3em 0;}
.pki-content .pc-prose li > :is(ul,ol){margin:.3em 0 0;}
.pki-content .pc-prose a:not(.btn){color:var(--link);text-decoration:underline;text-underline-offset:3px;}
.pki-content .pc-prose a:not(.btn):is(:hover,:focus-visible){color:var(--red);}
.pki-content .pc-prose :is(strong,b){font-weight:700;}
.pki-content .pc-prose img{max-width:100%;height:auto;}  /* wygrywa z .page td img{max-width:70px} (obrazki w tabelach tematów) */
.pki-content .pc-prose table{display:block;width:auto;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:14px;line-height:1.5;}
.pki-content .pc-prose :is(th,td){border:1px solid var(--line);padding:8px 10px;vertical-align:top;text-align:left;}
.pki-content .pc-prose th{background:var(--wash);font-family:var(--head);font-size:12px;letter-spacing:.04em;text-transform:none;}
.pki-content .pc-prose hr{border:0;border-top:1px solid var(--line);margin:2em 0;}
.pki-content .pc-prose blockquote{border-left:3px solid var(--red);padding:.2em 0 .2em 1em;color:var(--body);}
.pki-content .pc-prose :is(h1,h2,h3,h4)[id]{scroll-margin-top:calc(var(--stk-h, 58px) + var(--sp-4));}  /* kotwice spisu pod przyklejonym paskiem */
/* Style z edytora CMS (TinyMCE/Google Docs: font-family tahoma/Arial, font-size small/11pt, kolory #3a3a3a/#0000ff, tło, pre-wrap,
   justowanie) — treść z bazy bez zmian, tu tylko neutralizacja: krój/rozmiar/kolor/interlinia z motywu, żeby tekst był jednolity
   i czytelny w trybie ciemnym i kontrastowym; wyróżnienie czerwienią zostaje (kolor marki). */
.pki-content .pc-prose :is([style],font){font-family:inherit !important;font-size:inherit !important;line-height:inherit !important;
  color:inherit !important;background-color:transparent !important;white-space:normal !important;}
.pki-content .pc-prose :is([style*="color: #ff0000"],[style*="color:#ff0000"],[style*="color: #f00"],[style*="color: rgb(255, 0, 0)"],font[color="#ff0000"],[color="#ff0000"]){color:var(--red) !important;}
.pki-content .pc-prose [style*="justify"]{text-align:left !important;}
/* nagłówek-akapit z edytora (H1/H2 z jednym <span style="font-weight: normal">) = zwykły akapit */
.pki-content .pc-prose :is(h1,h2,h3):has(> span[style*="font-weight: normal"]:only-child){font-family:inherit;font-size:inherit;font-weight:400;
  line-height:inherit;letter-spacing:0;margin:0 0 1em;text-wrap:wrap;}  /* bez balance nagłówków — akapit na pełną szerokość */
.pki-content .pc-prose :is(p,div,span):empty{display:none;}
.pki-content .pc-prose-sm{font-size:var(--fs-md);line-height:1.6;}
.pki-content .pc-prose-sm :is([style*="margin-left"],[style*="padding-left"]){margin-left:0 !important;padding-left:0 !important;}

/* ── spis treści (Topic: ≥ 4 nagłówki H2) ── */
.pc-toc{margin:0 0 var(--sp-6);padding:var(--sp-4) var(--sp-5);background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);}
.pc-toc h2{margin:0 0 var(--sp-2);font-family:var(--head);font-weight:700;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);}
.pc-toc ol{list-style:decimal;margin:0;padding-left:1.6em;columns:2;column-gap:var(--sp-6);font-size:var(--fs-md);line-height:1.5;}
.pc-toc li{break-inside:avoid;padding:3px 0;}
.pc-toc a{color:var(--ink);text-decoration:none;}
.pc-toc a:is(:hover,:focus-visible){color:var(--red);text-decoration:underline;text-underline-offset:3px;}

/* ── karty i formularze (kontakt, komentarz, hasło tematu) — anatomia jak logowanie ── */
.pc-card{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);padding:var(--sp-5);min-width:0;}
.pc-card-h{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-4);font-family:var(--head);font-weight:800;font-size:var(--fs-xl);
  line-height:1.2;letter-spacing:-.01em;color:var(--ink);}
.pc-card-h .ico{flex:none;width:var(--ico-24);height:var(--ico-24);stroke:var(--red);fill:none;}
.pc-split{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--gap-block);align-items:start;}
.pc-form{display:flex;flex-direction:column;gap:var(--sp-4);}
.pc-field{display:flex;flex-direction:column;gap:6px;}
.pc-field label{font-size:var(--fs-sm);font-weight:500;color:var(--ink);}
/* pola: specyficzność ponad warstwę zgodności (.page input[type=…], .page textarea) */
.pki-content .pc-field .fld,.pki-content .pc-inline .fld{width:100%;height:var(--h-lg);border:1px solid var(--line2);border-radius:var(--r);
  background:var(--surface);padding:0 14px;font:inherit;font-size:var(--fs-base);color:var(--ink);outline:0;}
.pki-content .pc-field textarea.fld{height:auto;min-height:168px;padding:12px 14px;line-height:1.5;resize:vertical;}
.pki-content :is(.pc-field,.pc-inline) .fld:focus{border-color:var(--red);box-shadow:0 0 0 1px var(--red);}
.pki-content .pc-field .fld.input-validation-error{border-color:var(--red);}
.pc-field .field-validation-error{font-size:var(--fs-sm);font-weight:500;color:var(--red);}
.pc-field .field-validation-valid{display:none;}
.pc-summary:not(:has(.validation-summary-errors)){display:none;}
.pc-summary .validation-summary-errors{padding:var(--sp-3) var(--sp-4);border:1px solid var(--red);border-left-width:4px;border-radius:var(--r);
  background:var(--wash);color:var(--ink);font-size:var(--fs-md);line-height:1.45;}
.pc-summary .validation-summary-errors ul{list-style:none;margin:0;padding:0;}
.pc-ok{padding:var(--sp-3) var(--sp-4);border:1px solid var(--green);border-left-width:4px;border-radius:var(--r);background:var(--surface);
  color:var(--ink);font-size:var(--fs-md);line-height:1.5;}
.pc-actions .btn{height:var(--h-lg);min-width:220px;}
.pc-form .captcha-box{margin:0;}
.pc-links{list-style:none;margin:var(--sp-4) 0 0;padding:var(--sp-3) 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--sp-2);
  font-size:var(--fs-md);}
.pc-links a{color:var(--link);text-decoration:underline;text-underline-offset:3px;}
.pc-links a:is(:hover,:focus-visible){color:var(--red);}
.pc-data .pc-prose a[href^="mailto:"]{font-weight:700;}

/* ── aktualności: lista (karty jak „Z życia księgarni”) i wpis ── */
.news-list-page .news-cards{row-gap:var(--gap-block);}
.news-list-page .news-cards h2{font-size:var(--fs-base);line-height:1.35;margin-top:4px;}
.news-list-page .news-cards h2 a{color:inherit;text-decoration:none;}
.news-list-page .news-cards h2 a::before{content:"";position:absolute;inset:0;}  /* cała karta klikalna — jak h3 na stronie głównej */
.news-list-page .news-cards article:hover h2{color:var(--red);}
.news-list-page .news-cards article:has(a:focus-visible){outline:2px solid var(--red);outline-offset:2px;}
.news-list-page .news-cards h2 a:focus-visible{outline:0;}
.news-list-page .pager{margin-top:var(--gap-sec);}
.news-item-page .new-comment,.news-item-page .pc-comments{margin-top:var(--gap-sec);}
.pc-comments{display:flex;flex-direction:column;gap:var(--sp-3);}
.pc-comments > .pc-card-h{margin-bottom:var(--sp-2);}
.pc-c-meta{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2);font-size:var(--fs-sm);color:var(--muted);}
.pc-c-meta .username{font-weight:700;color:var(--ink);}
.pc-c-meta .avatar-img{width:40px;height:40px;border-radius:50%;}
.pc-comments .comment-text{margin:var(--sp-2) 0 0;line-height:1.6;}
.pc-empty{padding:var(--sp-6) var(--sp-5);border:1px dashed var(--line2);border-radius:var(--r);color:var(--body);text-align:center;}
.pc-empty a{color:var(--link);text-decoration:underline;text-underline-offset:3px;}

/* ── temat chroniony hasłem ── */
.pc-password{margin:0 auto var(--gap-sec);display:flex;flex-direction:column;gap:var(--sp-3);}
.pc-password .enter-password-title{font-weight:500;color:var(--ink);}
.pc-inline{display:flex;gap:var(--sp-2);align-items:center;}
.pc-inline .btn{height:var(--h-lg);flex:none;}
.pc-password .password-error{color:var(--red);font-size:var(--fs-sm);font-weight:500;}

/* ── 404 ── */
/* Układ 23.10 (Szymon, zrzut 230): pełna szerokość kontenera (.pc-wide, jak /contactus), dwie kolumny 1 : 3 — po lewej duże „404”
   w narożnikach marki (zawsze widoczne, grubość i odstęp jak znak na banerze .hmark), po prawej tytuł (zwykły H1, bez narożników),
   lead, wyszukiwarka, kafle, kategorie. Telefon: „404” mniejsze nad treścią, narożniki zostają. Cyfry przycięte do wersalików
   (text-box), żeby ⌜⌟ obejmowały atrament, nie pustą interlinię; padding = odstęp + grubość narożnika, więc ⌜ stoi na lewej
   krawędzi kontenera (pod narożnikiem logo) i na wysokości górnej krawędzi tytułu.
   Druga runda (Szymon, zrzut 231: „żeby to 404 bardziej wypełniało pole”): cyfry na całą szerokość kolumny — rozmiar z szerokości
   kolumny (cqi; 1.99 = szerokość „404” w em dla Montserrat 800 z letter-spacing -.02em, bez prawego narożnika, który wystaje
   poza pudełko), a ramka ⌜⌟ rozciągnięta na wysokość prawej treści (align-self:stretch) — ⌟ zamyka się na wysokości kategorii.
   Trzecia runda (zrzut 232: „zrób takiego arta jak przy newsletterze”): pod cyframi ilustracja c-404.svg (styl C) wypełnia ramkę
   do ⌟ (flex: 1, przyklejona do dołu); ramka = kolumna flex (pkieu-corners.js pomija flex — tekst „404” i tak wypełnia szerokość).
   Motyw ciemny / kontrast jak ilustracja newslettera (filtry niżej). Telefon: ilustracja ukryta, treść ważniejsza od obrazka. */
.pc-404{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:var(--gap-sec);align-items:start;}
.pc-404-main{min-width:0;}
.pc-code{--c-gx:20px;--c-gy:16px;--c-w:6px;container-type:inline-size;align-self:stretch;display:flex;margin:0;padding:calc(var(--c-gy) + var(--c-w)) 0 calc(var(--c-gy) + var(--c-w)) calc(var(--c-gx) + var(--c-w));
  font-family:var(--head);font-weight:800;font-size:112px;line-height:1;letter-spacing:-.02em;color:var(--line2);}
.pc-code .pki-corners{--pc-gx:var(--c-gx);--pc-gy:var(--c-gy);--pc-w:var(--c-w);display:flex;flex-direction:column;gap:var(--sp-5);flex:1;min-width:0;
  margin-right:calc(var(--c-gx) + var(--c-w));font-size:calc((100cqi - var(--c-gx) - var(--c-w)) / 1.99);}
.pc-num{display:block;text-box:trim-both cap alphabetic;}
.pc-art{display:block;flex:1 1 0;min-height:160px;width:100%;height:auto;object-fit:contain;object-position:50% 100%;}
:root[data-theme="dark"] .pc-art{filter:var(--cover-filter);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-contrast="more"]) .pc-art{filter:var(--cover-filter);}}
:root[data-contrast="more"] .pc-art{filter:drop-shadow(0 0 1px var(--hc-fg));}
.pc-code .pki-corners::before,.pc-code .pki-corners::after{opacity:1;transform:none;transition:none;}
.pc-404-t{font-size:var(--fs-h1);font-weight:800;line-height:1.15;letter-spacing:-.01em;}
.pki-content .pc-search{max-width:none;margin:0 0 var(--sp-6);}
.pc-next{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--gap-block);}  /* 3 kafle, 2 gdy brak kategorii Szybka wysyłka */
.pc-tile{display:flex;flex-direction:column;gap:4px;padding:var(--sp-4) var(--sp-5);background:var(--card-bg);border:var(--card-border);
  border-radius:var(--card-radius);color:var(--ink);text-decoration:none;transition:background .16s;}
.pc-tile:is(:hover,:focus-visible){background:var(--wash);}
.pc-tile b{font-family:var(--head);font-weight:700;font-size:var(--fs-lg);line-height:1.25;}
.pc-tile b::after{content:" →";color:var(--red);}
.pc-tile span{font-size:var(--fs-md);line-height:1.45;color:var(--body);}
.pc-cats{margin-top:var(--gap-sec);}
.pc-cats h2{margin:0 0 var(--sp-3);font-family:var(--head);font-weight:700;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);}
.pc-cats ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2);}
.pc-cats a{display:inline-flex;align-items:center;height:var(--h-md);padding:0 var(--sp-4);border:1px solid var(--line2);border-radius:var(--r-pill);
  background:var(--surface);font-size:var(--fs-md);font-weight:500;color:var(--ink);text-decoration:none;transition:background .16s;}
.pc-cats a:is(:hover,:focus-visible){background:var(--wash);}
.pc-cats a.is-sale{color:var(--red);}

@media (max-width:860px){
  .pc-t{font-size:var(--fs-h1m);}
  .pc-split{grid-template-columns:minmax(0,1fr);}
  .pc-card{padding:var(--sp-4);}
  .pc-toc ol{columns:1;}
  .pc-actions .btn{width:100%;min-width:0;}
  .pc-next{grid-auto-flow:row;}
  .pc-404{grid-template-columns:minmax(0,1fr);}
  .pc-404-t{font-size:var(--fs-h1m);}
  .pc-code{--c-gx:14px;--c-gy:10px;--c-w:4px;margin:0 0 var(--sp-5);font-size:64px;}
  .pc-code .pki-corners{flex:none;margin-right:0;font-size:inherit;}  /* telefon bez zmian: 64 px nad treścią */
  .pc-art{display:none;}
  .pki-content .pc-prose{font-size:15.5px;}
}
@media (max-width:420px){
  .pc-inline{flex-wrap:wrap;}
  .pc-inline .btn{width:100%;}
}

/* ── wysoki kontrast: obwódki 2 px (jak .mhero/.news-cards), odnośniki w kolorze akcentu (--hc-accent) z podkreśleniem ── */
:root[data-contrast="more"] :is(.pc-card,.pc-toc,.pc-tile,.pc-empty,.pc-cats a){border:2px solid var(--hc-fg);}
:root[data-contrast="more"] :is(.pki-content .pc-prose a:not(.btn),.pc-back,.pc-rss,.pc-links a,.pc-toc a,.pc-empty a){color:var(--hc-accent);text-decoration:underline;}


/* gość bez prawa komentowania (NewsSettings) — zamiast formularza link do logowania, w rytmie sekcji jak formularz */
.news-item-page .pc-login-note{margin:var(--gap-sec) 0 0;padding:var(--sp-4) var(--sp-5);font-size:var(--fs-md);}
.pc-login-note a{font-weight:700;color:var(--link);text-decoration:underline;text-underline-offset:3px;}
.pc-login-note a:is(:hover,:focus-visible){color:var(--red);}
:root[data-contrast="more"] .pc-login-note a{color:var(--hc-accent);}