/* Wygląd Pomocy na stronie (pomoc/index.html i pomoc/01..12.html, generowane przez dokumenty/pomoc/buduj-pomoc.cjs).
   Ładowane po css/02-tokeny.css, css/rama.css i css/podstrona.css (nawigacja, stopka, przyciski, czcionka, odstępy --s1..--s9 i odnośnik „Przejdź do treści” są w ramie).
   Wszystko pod klasą .pomoc (treść strony); wyjątek: okno powiększenia zrzutu (.powieksz), które skrypt dopisuje do <body>.
   Kolory, cienie, czasy i miary tylko z tokenów; ruch tylko transform i opacity; bez wymuszania ważności reguł. */

/* ===== układ strony: nawigacja ramy jest przyklejona u góry, więc treść zaczyna się pod nią ===== */
/* Pomoc ma bardzo długie strony (ponad 40 tys. px): wejście z kotwicą i kliknięcie w spis skaczą od razu, bez płynnego przewijania z ramy (css/rama.css). */
html:has(.pomoc){scroll-behavior:auto}
.pomoc{padding-top:calc(var(--nav-h) + clamp(24px,3.5vw,56px))}
.pomoc :where(h1,h2,h3,h4,h5){line-height:1.2;letter-spacing:-.02em;font-weight:700}
.pomoc h1{font-size:clamp(34px,4.6vw,60px);font-weight:800;line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
.pomoc .lead{max-width:60ch}
.pomoc .eyebrow{display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.pomoc .eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--primary)}

/* ===== wyszukiwarka (pole w treści strony; bez skryptu pole zostaje ukryte) ===== */
.pomoc .szukaj{position:relative;max-width:560px;margin-top:var(--s5)}
.pomoc .szukaj input{width:100%;height:48px;padding:0 var(--s4) 0 44px;border:1px solid var(--border-strong);border-radius:var(--r8);background:var(--surface-2);color:var(--text);font:inherit;font-size:16px;transition:border-color var(--t-1),background var(--t-1)}
.pomoc .szukaj input::placeholder{color:var(--text-3)}
.pomoc .szukaj input:hover{border-color:var(--text-3)}
.pomoc .szukaj input:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-color:var(--primary);background:var(--surface)}
.pomoc .szukaj>svg{position:absolute;left:14px;top:15px;width:18px;height:18px;stroke:var(--text-3);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
.pomoc .wyniki{position:absolute;left:0;right:0;top:calc(100% + var(--s2));z-index:20;display:none;max-height:min(70vh,520px);overflow:auto;padding:6px;border:1px solid var(--border-strong);border-radius:var(--r12);background:var(--surface);box-shadow:var(--cien-2)}
.pomoc .wyniki.otwarte{display:block}
.pomoc .wyniki a{display:block;padding:10px 12px;border-radius:var(--r8)}
.pomoc .wyniki a:hover,.pomoc .wyniki a:focus-visible{background:var(--surface-2)}
.pomoc .wyniki .wt{font-size:15px;font-weight:600}
.pomoc .wyniki .wk{margin-top:2px;font-size:12px;color:var(--text-3)}
.pomoc .wyniki .wf{margin-top:2px;font-size:13px;color:var(--text-2)}
.pomoc .wyniki .wpusty{padding:14px;font-size:14px;color:var(--text-2)}
.pomoc .wyniki mark{padding:0 1px;border-radius:3px;background:var(--primary-soft);color:var(--text)}

/* ===== strona główna Pomocy: kafle kategorii ===== */
.pomoc-hero{position:relative;padding:clamp(16px,3vw,40px) 0 var(--s6)}
.pomoc-hero::before{content:"";position:absolute;inset:calc(var(--nav-h) * -1) 0 0;background:var(--swiatlo-hero);pointer-events:none}
.pomoc-hero .kontener{position:relative}
.pomoc-hero h1{margin:var(--s4) 0}
.pomoc .kafle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);padding:var(--s5) 0 0}
.pomoc .kafel{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:var(--r16);background:var(--surface);transition:border-color var(--t-2),transform var(--t-2) var(--ease-out)}
.pomoc .kafel:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.pomoc .kafel .mini{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--border);background:var(--bg)}
.pomoc .kafel .mini img{width:100%;height:100%;object-fit:cover;object-position:top left}
.pomoc .kafel .numer{position:absolute;left:14px;top:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:15px;font-weight:800}
.pomoc .kafel .mini.brak .numer{position:static;width:64px;height:64px;background:var(--primary-soft);color:var(--primary);font-size:26px}
.pomoc .kafel .tresc{display:flex;flex:1;flex-direction:column;gap:var(--s2);padding:18px 20px 22px}
.pomoc .kafel h2{font-size:20px}
.pomoc .kafel .ile{font-size:13px;color:var(--text-3)}
.pomoc .kafel ul{display:grid;gap:var(--s1);margin-top:6px;font-size:14px;color:var(--text-2)}
.pomoc .kafel li::before{content:"";display:inline-block;width:5px;height:5px;margin:0 9px 2px 0;border-radius:50%;background:var(--primary)}

/* ===== strona kategorii: spis po lewej, artykuły po prawej ===== */
.pomoc .uklad{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--s7);align-items:start}
.pomoc .boczne{position:sticky;top:calc(var(--nav-h-mala) + var(--s5));max-height:calc(100dvh - var(--nav-h-mala) - var(--s6));overflow:auto;padding-right:var(--s2);scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.pomoc .boczne .etykieta{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.pomoc .boczne ol{display:grid;gap:2px;margin-bottom:var(--s5)}
.pomoc .boczne a{display:block;padding:7px 12px;border-left:2px solid transparent;border-radius:var(--r8);font-size:14px;line-height:1.35;color:var(--text-2);transition:background var(--t-1),color var(--t-1)}
.pomoc .boczne a:hover{background:var(--surface);color:var(--text)}
.pomoc .boczne a.akt{border-left-color:var(--primary);background:var(--surface);color:var(--text)}
.pomoc .boczne a b{margin-right:6px;font-weight:700;color:var(--primary)}
.pomoc .inne-kat a b{color:var(--text-3)}
.pomoc .boczne-mob{display:none}
.pomoc .tresc-kat{min-width:0;container-type:inline-size}
.pomoc .krumb{margin-bottom:var(--s3);font-size:14px;color:var(--text-3)}
/* pole dotyku linku "Pomoc" w ścieżce: wysokość --tap, a ujemny margines oddaje tę wysokość układowi, więc tekst stoi tam, gdzie stał */
.pomoc .krumb a{display:inline-flex;align-items:center;min-height:var(--tap);margin-block:calc((1lh - var(--tap)) / 2);color:var(--text-2)}
.pomoc .krumb a:hover{color:var(--text)}
.pomoc .kat-glowa{margin-bottom:var(--s2);padding-bottom:var(--s6);border-bottom:1px solid var(--border)}
.pomoc .kat-glowa h1{margin:10px 0 var(--s4)}
.pomoc .kat-glowa p{max-width:68ch;margin-bottom:10px;color:var(--text-2)}

/* ===== artykuły ===== */
/* Kotwica (#a-N-M) staje pod nawigacją: odstęp góry ustawia scroll-padding-top z podstrona.css, a ujemny margines zdejmuje z niego odstęp wewnętrzny artykułu, żeby tytuł nie wisiał nisko. */
.pomoc article{padding:40px 0;border-bottom:1px solid var(--border);scroll-margin-top:calc(var(--s6) * -1)}
.pomoc article:last-of-type{border-bottom:0}
.pomoc article>h2{margin-bottom:18px;font-size:clamp(24px,3vw,32px)}
.pomoc article>h2 .num{margin-right:var(--s2);color:var(--primary)}
.pomoc article h3{margin:28px 0 10px;font-size:19px}
.pomoc article h4{margin:20px 0 var(--s2);font-size:16px;color:var(--text-2)}
.pomoc article p,.pomoc article li{max-width:76ch}
.pomoc article p{margin:10px 0}
.pomoc article ul,.pomoc article ol{display:grid;gap:var(--s2);margin:10px 0 14px;padding-left:26px}
.pomoc article ul{list-style:disc}
.pomoc article ol{list-style:decimal}
.pomoc article ul ul,.pomoc article ol ul{margin:var(--s2) 0 4px}
.pomoc article li::marker{color:var(--primary);font-weight:600}
.pomoc article a{color:var(--primary);text-underline-offset:3px}
.pomoc article a:hover{text-decoration:underline}
.pomoc .meta{margin:0 0 var(--s2);padding:6px 18px;border:1px solid var(--border);border-radius:var(--r12);background:var(--surface)}
.pomoc .meta p{margin:10px 0;color:var(--text-2)}
.pomoc .et{margin-right:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary)}
.pomoc code{padding:1px 6px;border:1px solid var(--border-strong);border-radius:var(--r6);background:var(--surface-2);font-family:"Cascadia Mono",Consolas,"SFMono-Regular",monospace;font-size:.88em;overflow-wrap:anywhere}
.pomoc strong{font-weight:700}
.pomoc .zobacz{margin-top:22px;padding-top:14px;border-top:1px dashed var(--border-strong);font-size:15px;color:var(--text-2)}
.pomoc figure.zrzut{max-width:100%;margin:18px 0 var(--s2)}
.pomoc figure.zrzut img{width:100%;border:1px solid var(--border-strong);border-radius:var(--r12);background:var(--surface);box-shadow:var(--cien-2);cursor:zoom-in;transition:border-color var(--t-2)}
.pomoc figure.zrzut img:hover{border-color:var(--primary)}
.pomoc figure.zrzut figcaption{max-width:76ch;margin-top:10px;font-size:13px;color:var(--text-3)}
.pomoc figure.zrzut figcaption::after{content:". Kliknij zdjęcie, żeby powiększyć."}
.pomoc li figure.zrzut{margin:12px 0 var(--s2)}
.pomoc article>ol>li>figure.zrzut,.pomoc article>ul>li>figure.zrzut{width:calc(100cqw - 26px);max-width:none}

/* tabele przewijają się w swoim pudełku, nie cała strona */
.pomoc .tab-wrap{margin:14px 0;overflow-x:auto;border:1px solid var(--border);border-radius:var(--r12)}
.pomoc table{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
.pomoc th,.pomoc td{padding:10px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.pomoc th{background:var(--surface);font-size:12px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--text-2)}
.pomoc tr:last-child td{border-bottom:0}

/* przejście do sąsiednich kategorii */
.pomoc .dolem{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4);padding-top:var(--s6);border-top:1px solid var(--border)}
.pomoc .dolem a{display:block;min-width:200px;padding:14px 18px;border:1px solid var(--border-strong);border-radius:var(--r12);color:var(--text-2);transition:background var(--t-1),color var(--t-1)}
.pomoc .dolem a:hover{background:var(--surface);color:var(--text)}
.pomoc .dolem .dolem-dalej{text-align:right}
.pomoc .dolem small{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}

/* ===== powiększenie zrzutu (okno dopisywane do <body> przez js/pomoc.js) ===== */
html.powiekszone{overflow:hidden}
.powieksz{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:var(--s5);background:var(--zaslona);cursor:zoom-out}
.powieksz.otwarte{display:flex}
.powieksz img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r8);box-shadow:var(--cien-3)}
.powieksz button{position:absolute;top:14px;right:14px;width:var(--tap);height:var(--tap);border:1px solid var(--border-strong);border-radius:50%;background:var(--surface);color:var(--text);font-size:22px;cursor:pointer}
.powieksz p{position:absolute;left:0;right:0;bottom:14px;padding:0 70px;text-align:center;font-size:14px;color:var(--text-2)}

/* ===== szerokości pośrednie i telefon ===== */
@media(max-width:1000px){
  .pomoc .kafle{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .pomoc .uklad{grid-template-columns:minmax(0,1fr);gap:0}
  .pomoc .boczne{display:none}
  .pomoc .boczne-mob{display:block;margin:0 0 18px;border:1px solid var(--border-strong);border-radius:var(--r12);background:var(--surface)}
  .pomoc .boczne-mob summary{padding:14px 16px;font-size:15px;font-weight:600;cursor:pointer}
  .pomoc .boczne-mob ol{display:grid;gap:2px;padding:0 var(--s2) var(--s3)}
  .pomoc .boczne-mob a{display:block;padding:9px 10px;border-radius:var(--r8);font-size:15px;color:var(--text-2)}
  .pomoc .boczne-mob a b{margin-right:6px;color:var(--primary)}
  .pomoc article{padding:28px 0;scroll-margin-top:calc(var(--s5) * -1)}
  .pomoc .dolem a{flex:1 1 100%}
  .pomoc .dolem .dolem-dalej{text-align:left}
}
@media(max-width:700px){
  .pomoc{padding-top:calc(var(--nav-h-mala) + var(--s5))}
}
@media(max-width:620px){
  .pomoc .kafle{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
}