/* PLIK SKLADANY. Nie edytowac recznie.
   Zrodla: arkusz kitu portal-prawny-kit oraz skorupa/dodatki.css tego portalu.
   Sklada: generatory/zbuduj_arkusz.py */

/* Kroje pisma na własnym serwerze. Inter jest fontem zmiennym, jeden plik
   obsługuje wagi od 100 do 900, dlatego wystarczą dwa pliki: podstawowy
   i rozszerzony o znaki potrzebne w języku polskim. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin-ext-v1.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin-v1.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --tlo: #F6F8FB; --tlo-2: #FFFFFF; --karta: #FFFFFF; --karta-2: #F1F5F9;
    --tekst: #16233B; --tekst-2: #46566E; --stlum: #5E6C82;
    --akcent: #2456D6; --akcent-moc: #1B44AF; --akcent-tlo: #E8EFFC;
    --bursztyn: #B45309; --bursztyn-tlo: #FFF6E7; --bursztyn-ramka: #F1C48A;
    --zielen: #15803D; --zielen-tlo: #E9F7EE; --zielen-ramka: #A7D8B8;
    --ramka: #E3E8F0; --ramka-2: #D3DCE8;
    --cien: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 30px -12px rgba(15, 23, 42, .16);
    --pasek: rgba(255, 255, 255, .82);
    --hero-tlo: radial-gradient(46rem 24rem at 20% -10%, rgba(36, 86, 214, .38), transparent 60%),
                linear-gradient(160deg, #0B1428 0%, #101E3C 55%, #0B1428 100%);
    --czerwien: #B91C1C;
    --czerwien-tlo: #FDECEC;
    --czerwien-ramka: #F0B4B4;
    /* Ksztalt: promienie zaokraglen w jednym miejscu, zeby zmiana stylu kart
       nie wymagala przechodzenia przez kilkaset regul na trzynastu stronach. */
    --zaokr-drobne: 4px;
    --zaokr-male: 10px;
    --zaokr-karty: 12px;
    --zaokr-duze: 14px;
    --zaokr-sekcji: 16px;
    --zaokr-pigulka: 999px;
    --margines-strony: 22px;
    /* Kolory stale w obu motywach, nazwane po roli. Liczba w regule mowi,
       jak co wyglada; nazwa mowi, czym to jest. */
    --hero-tekst: #E7EDF8;  /* tekst na ciemnym tle naglowka strony */
    --hero-tekst-stlum: #C8D4E6;  /* tekst drugoplanowy na ciemnym tle */
    --hero-ramka: #223250;  /* obramowanie kart lezacych na ciemnym tle */
    --bursztyn-jasny: #F59E0B;  /* tlo przycisku bursztynowego i znacznika bledu */
    --bursztyn-tekst: #201302;  /* tekst na bursztynowym tle */
    --bursztyn-hover: #FBB93C;  /* bursztyn pod kursorem */
    --tab-tekst: #E9EEF7;  /* tekst w naglowku tabeli */
    --akcent-ciemny: #2E63D8;  /* przycisk glowny w motywie ciemnym */
    --naglowek-tab: #16233B;  /* tlo naglowka tabeli */
    /* Skala typograficzna: podstawa 1rem, iloraz 1,125 (sekunda wielka).
       Krok 4 to podstawa, kazdy kolejny to pomnozenie przez 1,125. Rozmiarow pisma
       nie wpisywac liczba, tylko wybrac krok. Opis w narzedzia/_skala_typograficzna.py. */
    --pismo-1: .702rem;
    --pismo-2: .79rem;
    --pismo-3: .889rem;
    --pismo-4: 1rem;
    --pismo-5: 1.125rem;
    --pismo-6: 1.266rem;
    --pismo-7: 1.424rem;
    --pismo-8: 1.602rem;
    --pismo-9: 1.802rem;
    --pismo-10: 2.027rem;
    --pismo-11: 2.281rem;
    --pismo-12: 2.566rem;
    --pismo-13: 2.887rem;
}
/* Na telefonie dwa najnizsze stopnie skali ida o szczebel w gore. Ta sama poprawka co
   w kicie serii: dolna granica rosnie z 11,23 px do 12,64 px, a to, co bylo 12,64 px,
   ma teraz 14,22 px. Podniesienie przez wybor sasiedniego stopnia, a nie przez wpisanie
   liczby, zostawia cala skale na jednym ilorazie. */
@media (max-width: 767px) {
    :root {
        --pismo-1: .79rem;
        --pismo-2: .889rem;
    }
}
:root[data-motyw="ciemny"] {
    --tlo: #0A1120; --tlo-2: #0D1526; --karta: #121D33; --karta-2: #18253E;
    --tekst: #E8EEF8; --tekst-2: #B4C2D8; --stlum: #8CA0BC;
    --akcent: #7CA9F5; --akcent-moc: #A8C6F9; --akcent-tlo: #182A4C;
    --bursztyn: #F5B84B; --bursztyn-tlo: #2A2113; --bursztyn-ramka: #6B5322;
    --zielen: #6EE7A0; --zielen-tlo: #10241A; --zielen-ramka: #2C5C3F;
    --ramka: #223250; --ramka-2: #2C3E60;
    --cien: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -14px rgba(0, 0, 0, .55);
    --pasek: rgba(10, 17, 32, .82);
    --hero-tlo: radial-gradient(46rem 24rem at 20% -10%, rgba(64, 110, 220, .30), transparent 60%),
                linear-gradient(160deg, #070D1A 0%, #0D1930 55%, #070D1A 100%);
    --czerwien: #F79A9A;
    --czerwien-tlo: #2A1414;
    --czerwien-ramka: #6B3030;
    --naglowek-tab: #1A2A4A;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
.do-tresci {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--akcent); color: #fff; padding: .7rem 1.1rem;
    border-radius: 0 0 var(--zaokr-male) 0; font-weight: 700; text-decoration: none;
}
/* do-tresci-ciemny: na jasnym akcencie w motywie ciemnym bialy tekst dawal kontrast 2,4 */
:root[data-motyw="ciemny"] .do-tresci { color: #0A1120; }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .do-tresci { color: #0A1120; } }
.do-tresci:focus { left: 0; }
body {
    font-family: 'Inter', system-ui, sans-serif; line-height: 1.7;
    color: var(--tekst); background: var(--tlo);
    transition: background-color .3s ease, color .3s ease; -webkit-font-smoothing: antialiased;
}
.container { max-width: 940px; margin: 0 auto; padding: 0 var(--margines-strony); }
h1 { font-size: clamp(var(--pismo-8), 3.6vw, var(--pismo-12)); font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.2; }
h2 { font-size: var(--pismo-7); margin: 2.8rem 0 .9rem; letter-spacing: -.01em; color: var(--tekst); scroll-margin-top: 84px; }
h2 .nr { color: var(--bursztyn); margin-right: .45rem; }
h3 { font-size: var(--pismo-4); margin: 1.5rem 0 .5rem; color: var(--tekst); }
p { margin-bottom: .9rem; color: var(--tekst-2); }
a { color: var(--akcent); }
ul, ol { margin: 0 0 1rem 1.2rem; color: var(--tekst-2); }
li { margin-bottom: .45rem; }
strong { color: var(--tekst); font-weight: 600; }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: var(--zaokr-drobne); }
::selection { background: var(--akcent); color: #fff; }

header {
    position: sticky; top: 0; z-index: 100; background: var(--pasek);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ramka); transition: background-color .3s ease;
}
.pasek-tresc { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 12px var(--margines-strony); max-width: 1160px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: var(--pismo-4); color: var(--tekst); text-decoration: none; letter-spacing: -.01em; flex: 0 0 auto; }
.logo-tekst { display: flex; flex-direction: column; line-height: 1.18; white-space: nowrap; }
.logo-tekst em { font-style: normal; font-size: var(--pismo-1); font-weight: 600; color: var(--akcent); }
.menu { display: flex; align-items: center; gap: 1.05rem; }
.menu a.link { color: var(--tekst-2); text-decoration: none; font-weight: 500; font-size: var(--pismo-3); white-space: nowrap; }
.menu a.link:hover { color: var(--akcent); }
/* Punkty lamania ukladu, jeden zestaw dla calego serwisu:
     1150 px - belka gorna zwija sie w przycisk menu,
      900 px - kazdy uklad dwukolumnowy schodzi do jednej kolumny,
      620 px - uklad telefonu: siatki jednokolumnowe, mniejsze odstepy.
   Ponizej 900 px byly wczesniej jeszcze 880 i 860, ktore robily dokladnie to samo,
   wiec ten sam uklad rozpadal sie na trzech roznych szerokosciach. */
@media (max-width: 1150px) { .menu a.link { display: none; } }
/* ===== menu na malych szerokosciach ===== */
.przycisk-menu {
    display: none; width: 44px; height: 44px; border-radius: var(--zaokr-male);
    flex: 0 0 44px;
    border: 1px solid var(--ramka-2); background: var(--karta); color: var(--tekst-2);
    cursor: pointer; align-items: center; justify-content: center;
    transition: color .2s, border-color .2s, background-color .3s;
}
.przycisk-menu:hover { color: var(--bursztyn); border-color: var(--bursztyn-ramka); }
.przycisk-menu svg { width: 22px; height: 22px; }
.przycisk-menu .ikona-zamknij { display: none; }
.przycisk-menu[aria-expanded="true"] .ikona-otworz { display: none; }
.przycisk-menu[aria-expanded="true"] .ikona-zamknij { display: block; }
.menu-mobilne {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
    background: var(--karta); border-bottom: 1px solid var(--ramka-2);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .18);
    display: flex; flex-direction: column; padding: .4rem 0;
}
.menu-mobilne a { padding: .85rem 22px; color: var(--tekst-2); text-decoration: none; font-weight: 600; }
.menu-mobilne a:hover, .menu-mobilne a:focus-visible { background: var(--tlo-2); color: var(--bursztyn); }
.menu-mobilne[hidden] { display: none; }
/* Przycisk menu bez skryptow nie ma czego rozwinac, wiec sie nie pokazuje.
   Czytelnik z wylaczonymi skryptami korzysta z odnosnikow w stopce zamiast
   patrzec na przycisk, ktory nic nie robi. */
@media (max-width: 1150px) { .skrypty .przycisk-menu { display: inline-flex; } }
@media (min-width: 1151px) { .menu-mobilne { display: none; } }

/* Przelacznik motywu dziala wylacznie skryptem, wiec bez skryptow ma sie nie pokazywac.
   Zmierzone 23 sierpnia 2026 r. w portalu o czynnikach biologicznych: przy wylaczonych
   skryptach przycisk byl widoczny i po kliknieciu nie robil nic. Ta sama zasada, ktora
   arkusz stosuje juz do przycisku menu podrecznego: klase „skrypty" nadaje skorupa
   przed pierwszym malowaniem, wiec przelaczenie nie miga. */
.przelacznik {
    width: 44px; height: 44px; border-radius: var(--zaokr-male); border: 1px solid var(--ramka-2);
    background: var(--karta); color: var(--tekst-2); cursor: pointer; flex: 0 0 auto;
    display: none; align-items: center; justify-content: center;
    transition: color .2s, border-color .2s, background-color .3s;
}
.skrypty .przelacznik { display: inline-flex; }
.przelacznik:hover { color: var(--bursztyn); border-color: var(--bursztyn-ramka); }
.przelacznik svg { width: 19px; height: 19px; }
:root[data-motyw="jasny"] .ikona-slonce { display: none; }
:root[data-motyw="ciemny"] .ikona-ksiezyc { display: none; }

.naglowek-strony { background: var(--hero-tlo); padding: 56px 0 50px; color: var(--hero-tekst); }
.naglowek-strony p { color: var(--hero-tekst-stlum); margin: .9rem 0 0; max-width: 70ch; }
.okruszki { font-size: var(--pismo-3); color: #A9B8D0; margin-bottom: 1rem; }
.okruszki a { color: var(--hero-tekst-stlum); text-decoration: none; }
.okruszki a:hover { color: #fff; }
.znaczek-hero {
    display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1rem;
    border: 1px solid rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .12);
    color: #FBCB70; font-size: var(--pismo-2); font-weight: 700; letter-spacing: .1em;
    padding: 6px 14px; border-radius: var(--zaokr-pigulka); text-transform: uppercase;
}

main { padding: 44px 0 70px; }
/* Tekst ciagly idzie na cala szerokosc kolumny, wyrownany do lewej, nie justowany.
   Waskie akapity zostawialy pusta plame po prawej stronie, a justowanie na szerokiej
   kolumnie rozstrzeliwalo odstepy miedzy slowami, bo przegladarka slabo dzieli polskie
   wyrazy i zamiast dywizow rozciagala spacje. text-wrap: pretty domyka wdowy.
   To samo brzmienie co w arkuszu kitu portal-prawny-kit po poprawce z 3.09.2026. */
main .container > p,
main .container > ul,
main .container > ol { max-width: none; text-align: left; hyphens: auto; }
main .container > p { text-wrap: pretty; }
.spis { background: var(--karta-2); border: 1px solid var(--ramka); border-radius: var(--zaokr-duze); padding: 20px 24px; margin-bottom: 2.2rem; }
.spis b { display: block; font-size: var(--pismo-2); text-transform: uppercase; letter-spacing: .08em; color: var(--stlum); margin-bottom: .7rem; }
.spis ol { margin: 0 0 0 1.1rem; columns: 2; column-gap: 2rem; }
.spis li { margin-bottom: .3rem; font-size: var(--pismo-3); }
.spis a { text-decoration: none; }
.spis a:hover { text-decoration: underline; }
@media (max-width: 620px) { .spis ol { columns: 1; } }

.ramka-info { background: var(--bursztyn-tlo); border: 1px solid var(--bursztyn-ramka); border-left: 4px solid var(--bursztyn); border-radius: var(--zaokr-karty); padding: 16px 20px; margin: 1.2rem 0; }
.ramka-info p { margin-bottom: 0; font-size: var(--pismo-3); }
.ramka-info b { color: var(--tekst); }
.ramka-ok { background: var(--zielen-tlo); border: 1px solid var(--zielen-ramka); border-left: 4px solid var(--zielen); border-radius: var(--zaokr-karty); padding: 16px 20px; margin: 1.2rem 0; }
.ramka-ok p { margin-bottom: 0; font-size: var(--pismo-3); }

/* Kontener przewija tabele w poziomie, wiec musi dac sie na nim zatrzymac
   tabulatorem i przewijac strzalkami. Bez tego uzytkownik klawiatury nie
   dosiegnie kolumn, ktore nie mieszcza sie na ekranie. */
.tabela-oprawa:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
.tabela-oprawa { overflow-x: auto; border: 1px solid var(--ramka); border-radius: var(--zaokr-duze); margin: 1rem 0 1.4rem; }
table { width: 100%; border-collapse: collapse; min-width: 580px; background: var(--karta); }
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--ramka); font-size: var(--pismo-3); vertical-align: top; }
th { background: var(--naglowek-tab); color: var(--tab-tekst); font-weight: 600; font-size: var(--pismo-2); text-transform: uppercase; letter-spacing: .04em; }
td { color: var(--tekst-2); }
tbody tr:last-child td { border-bottom: none; }
td strong { color: var(--tekst); }

.kroki { list-style: none; margin: 1.2rem 0 0; padding: 0; position: relative; counter-reset: krok; }
.kroki::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--akcent), var(--bursztyn)); opacity: .3; }
.kroki > li { counter-increment: krok; position: relative; padding: 0 0 22px 60px; margin: 0; }
.kroki > li:last-child { padding-bottom: 0; }
.kroki > li::before {
    content: counter(krok); position: absolute; left: 0; top: 0;
    width: 40px; height: 40px; border-radius: 11px; background: var(--karta); border: 2px solid var(--akcent);
    color: var(--akcent); font-weight: 800; font-size: var(--pismo-4); display: flex; align-items: center; justify-content: center;
    box-shadow: var(--cien);
}
.kroki > li:nth-child(n+7)::before { border-color: var(--bursztyn); color: var(--bursztyn); }
.kroki h3 { font-size: var(--pismo-4); margin: .35rem 0 .3rem; }
.kroki p { font-size: var(--pismo-3); margin-bottom: .4rem; }
.kroki ul { margin: .3rem 0 .5rem 1.1rem; }
.kroki li { font-size: var(--pismo-3); }
.podstawa {
    margin: .4rem 0 0; padding: .14rem 0 .14rem .6rem; border-left: 2px solid var(--ramka-2);
    font-size: var(--pismo-2); line-height: 1.5; color: var(--stlum);
}
.podstawa b { font-weight: 600; }

.sekcje-karty { list-style: none; margin: 1rem 0 0; display: grid; gap: .6rem; }
.sekcje-karty > li {
    background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--zaokr-karty);
    padding: .9rem 1.1rem; font-size: var(--pismo-3); color: var(--tekst-2);
}
.sekcje-karty b { display: block; color: var(--tekst); margin-bottom: .35rem; }
.sekcje-karty ul { margin: .35rem 0 0 1.1rem; }
.sekcje-karty li { font-size: var(--pismo-3); margin-bottom: .25rem; }

.panel-pobierania {
    background: linear-gradient(150deg, var(--akcent-tlo), var(--karta) 68%);
    border: 1px solid var(--ramka-2); border-radius: var(--zaokr-sekcji);
    padding: 26px 28px; margin: 1.2rem 0 1.4rem; box-shadow: var(--cien);
}
.panel-pobierania h3 { margin: 0 0 .5rem; font-size: var(--pismo-5); }
.btn-pobierz { margin-top: .6rem; font-size: var(--pismo-4); padding: 13px 26px; }
.info-pliku { font-size: var(--pismo-3); color: var(--stlum); margin: .7rem 0 0; }
.lista-wzorow { list-style: none; margin: 1.4rem 0 1.2rem; display: grid; gap: .45rem; }
.lista-wzorow li {
    background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--zaokr-male);
    padding: .68rem .9rem; font-size: var(--pismo-3); color: var(--tekst-2);
}
.lista-wzorow b { color: var(--tekst); font-weight: 600; }

.bledy { list-style: none; margin: 1rem 0 0; display: grid; gap: .5rem; }
.bledy li { padding: .7rem 1rem .7rem 2.5rem; position: relative; background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--zaokr-male); font-size: var(--pismo-3); color: var(--tekst-2); }
.bledy li::before { content: "!"; position: absolute; left: .9rem; top: .82rem; width: 18px; height: 18px; border-radius: 5px; background: var(--bursztyn-jasny); color: var(--bursztyn-tekst); font-weight: 800; font-size: var(--pismo-1); display: flex; align-items: center; justify-content: center; }

.cta { background: var(--hero-tlo); border: 1px solid var(--hero-ramka); border-radius: var(--zaokr-sekcji); padding: 28px 30px; margin-top: 2.4rem; color: #DCE5F2; }
.cta h3 { color: #fff; font-size: var(--pismo-6); margin: 0 0 .5rem; }
.cta p { color: var(--hero-tekst-stlum); font-size: var(--pismo-4); }
.cta-btny { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 11px 22px; border-radius: var(--zaokr-male); font-weight: 600; font-size: var(--pismo-3);
    text-decoration: none; border: none; cursor: pointer; transition: transform .2s, background-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-bursztyn { background: var(--bursztyn-jasny); color: var(--bursztyn-tekst); }
.btn-bursztyn:hover { background: var(--bursztyn-hover); }
.btn-kontur { border: 1.5px solid rgba(255,255,255,.5); color: #F3F6FC; background: rgba(255,255,255,.05); }
.btn-kontur:hover { background: rgba(255,255,255,.14); }
.btn-powrot {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: 2rem;
    padding: 12px 24px; border-radius: var(--zaokr-male); background: var(--akcent); color: #fff;
    text-decoration: none; font-weight: 600; font-size: var(--pismo-4);
}
:root[data-motyw="ciemny"] .btn-powrot { background: var(--akcent-ciemny); }
.btn-powrot:hover { background: var(--akcent-moc); }

footer { background: var(--tlo-2); border-top: 1px solid var(--ramka); padding: 30px 0; transition: background-color .3s ease; }
footer p { text-align: center; color: var(--stlum); font-size: var(--pismo-3); margin: 0; }
footer a { color: var(--tekst-2); text-decoration: none; }
footer a:hover { color: var(--akcent); }
.stan-prawny { display: block; margin-top: .5rem; font-weight: 600; color: var(--tekst-2); }
.zrodla { font-size: var(--pismo-3); color: var(--stlum); margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--ramka); }
@media print {
    header,
    footer,
    .do-tresci,
    .przelacznik,
    .btn { display: none !important; }
    body { background: #fff; color: #000; }
    a[href^="http"]:not([href*="newproject360.pl"])::after { content: " (" attr(href) ")"; font-size: .78em; word-break: break-all; }
    section { padding: 12px 0; page-break-inside: avoid; }
    table { page-break-inside: avoid; }
}
.lista-faq { display: grid; gap: .7rem; margin: 1.2rem 0 1.6rem; }
.pytanie { border: 1px solid var(--ramka); border-radius: var(--zaokr-karty); background: var(--karta); overflow: hidden; }
.pytanie > summary {
    cursor: pointer; list-style: none; padding: 14px 46px 14px 18px; position: relative;
    font-weight: 650; font-size: var(--pismo-4); color: var(--tekst);
}
.pytanie > summary::-webkit-details-marker { display: none; }
.pytanie > summary::after {
    content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    font-weight: 700; font-size: var(--pismo-5); color: var(--akcent);
}
.pytanie[open] > summary::after { content: "-"; }
.pytanie > summary:hover { color: var(--akcent); }
.pytanie > summary:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }
.pytanie[open] { border-color: var(--akcent); }
.odpowiedz { padding: 0 18px 16px; }
.odpowiedz p { margin-bottom: .7rem; font-size: var(--pismo-3); }
.odpowiedz p:last-child { margin-bottom: 0; }
.zrodlo-faq { font-size: var(--pismo-2) !important; color: var(--stlum); padding-top: .5rem; border-top: 1px dashed var(--ramka-2); }
.podpis-tabeli {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Przypis prawny w liscie krokow: bez tego wygrywa regula .kroki p
   i ten sam przypis ma na podstronach inny rozmiar niz na stronie glownej. */
.kroki p.podstawa { font-size: var(--pismo-2); }
    
/* Klasy pomocnicze w miejsce stylow w atrybutach. Styl w atrybucie wygrywal
   z kazda regula, wiec kazda z tych regul konczy sie !important, zeby wygrywala
   tak samo; bez tego reguly o wyzszej szczegolowosci przykrylyby klase. */
.u-dol-0 { margin-bottom: 0 !important; }

/* Reguly ze strony ukladu, ktorych nie ma w podstronie tresciowej: stopka z data aktualizacji, karty, akapit z data. */
.karta { background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--zaokr-sekcji); padding: 26px; box-shadow: var(--cien); margin-bottom: 1.4rem; }

.karta p:last-child, .karta ul:last-child { margin-bottom: 0; }

.wizytowka { display: flex; gap: 1.8rem; align-items: flex-start; flex-wrap: wrap; margin: 1.2rem 0 2rem; }

.miejsce-na-zdjecie { flex: 0 0 200px; margin: 0; text-align: center; }

.ramka-zdjecia {
    width: 200px; height: 240px; border-radius: var(--zaokr-duze);
    border: 2px dashed var(--ramka-2); background: var(--tlo-2);
    display: flex; align-items: center; justify-content: center; color: var(--stlum);
}

.ramka-zdjecia svg { width: 68px; height: 68px; }

.miejsce-na-zdjecie figcaption { margin-top: .5rem; font-size: var(--pismo-3); color: var(--stlum); }

.wizytowka-tresc { flex: 1 1 320px; min-width: 0; }

.wstep-o-mnie { font-size: var(--pismo-5); line-height: 1.75; }

.dane-kontaktowe { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .45rem; }

.dane-kontaktowe li { display: flex; gap: .8rem; align-items: baseline; font-size: var(--pismo-3); }

.dane-kontaktowe li span { flex: 0 0 84px; color: var(--stlum); font-size: var(--pismo-2); text-transform: uppercase; letter-spacing: .04em; }

:root[data-motyw="ciemny"] .btn-powrot:hover { background: #3B72E8; }

.aktualizacja { font-size: var(--pismo-3); color: var(--stlum); }

.stan-strony { display: block; margin-top: .5rem; font-weight: 600; color: var(--tekst-2); }

.stan-strony time { font-variant-numeric: tabular-nums; }

.znacznik { display: inline-block; font-size: var(--pismo-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--zaokr-pigulka); padding: 3px 11px; margin-bottom: .7rem; background: var(--karta-2); color: var(--stlum); }

.lista-prawna { margin: .6rem 0 0; padding-left: 1.1rem; }

.lista-prawna li { font-size: var(--pismo-3); line-height: 1.55; color: var(--tekst-2); margin-bottom: .35rem; }

.siatka { display: grid; gap: 22px; margin: 1.2rem 0; }

.kol-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* Reguly ze strony ukladu, ktorych nie ma w podstronie tresciowej: stopka z data aktualizacji, karty, akapit z data. */
.karta { background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--zaokr-sekcji); padding: 26px; box-shadow: var(--cien); margin-bottom: 1.4rem; }

.dane-admin { display: grid; gap: .35rem; }

.dane-admin div { display: flex; gap: .7rem; flex-wrap: wrap; padding: .42rem 0; border-bottom: 1px dashed var(--ramka-2); }

/* dlugi adres bez spacji rozpychal wiersz na ekranie 320 px */
.dane-admin div, .dane-admin span, .dane-admin a { min-width: 0; overflow-wrap: anywhere; }

.dane-admin div:last-child { border-bottom: none; }

.dane-admin b { min-width: min(120px, 40%); font-size: var(--pismo-2); text-transform: uppercase; letter-spacing: .07em; color: var(--stlum); font-weight: 600; padding-top: .18rem; }

.dane-admin a:hover { color: var(--akcent); }

/* Reguły własne portalu o limitach temperatury w środowisku pracy, dopisywane do arkusza
   z kitu przez generatory/zbuduj_arkusz.py. Wszystko, co dotyczy wyłącznie tego portalu,
   ma stać tutaj, żeby arkusz kitu został wspólny dla wszystkich portali.

   Nie edytować skorupa/style-portalu.css: ten plik jest składany i nadpisywany. */

/* ------------------------------------------------------------------------- */
/* Poprawki wobec kitu, przeniesione z czterech poprzednich portali            */
/* ------------------------------------------------------------------------- */

/* Przycisk konturowy poza ciemnym tłem.

   Wersja z arkusza kitu zakłada ciemne tło: jasny tekst na pięciu procentach bieli
   i obramowanie z półprzezroczystej bieli. Na białej karcie taki przycisk jest praktycznie
   niewidoczny, zmierzony kontrast 1,08. Domyślnie przycisk dostaje więc kolory treści,
   a wariant na ciemnym tle wraca tylko tam, gdzie tło faktycznie jest ciemne. */
.btn-kontur {
    border: 1.5px solid var(--akcent);
    color: var(--akcent);
    background: transparent;
}

.btn-kontur:hover {
    background: var(--akcent-tlo);
}

.cta .btn-kontur,
.naglowek-strony .btn-kontur {
    border-color: rgba(255, 255, 255, .5);
    color: #F3F6FC;
    background: rgba(255, 255, 255, .05);
}

.cta .btn-kontur:hover,
.naglowek-strony .btn-kontur:hover {
    background: rgba(255, 255, 255, .14);
}

/* Nagłówek wiersza nie jest nagłówkiem kolumny.

   Arkusz kitu nadaje każdemu elementowi th ciemne tło i wersaliki, bo w portalu
   powypadkowym th występował wyłącznie w nagłówku tabeli. Tutaj pierwsza kolumna
   większości tabel jest nagłówkiem wiersza, żeby czytnik ekranu wiedział, czego dotyczy
   komórka. Bez tej reguły takie komórki dostawały ciemne tło, a zagnieżdżony w nich tekst
   pomocniczy schodził do kontrastu 2,95. */
tbody th[scope="row"] {
    background: transparent;
    color: var(--tekst);
    font-weight: 600;
    font-size: var(--pismo-3);
    text-transform: none;
    letter-spacing: normal;
}

/* Adres portalu podany w treści jako jeden wyraz jest dłuższy niż okno 320 px
   i wypychał stronę w regulaminie oraz w polityce prywatności. Reguła łamie takie
   ciągi dopiero wtedy, gdy nie mieszczą się w wierszu, więc nie rusza zwykłego tekstu. */
main .container p,
main .container li,
main .container td,
main .container th,
main .container dd {
    overflow-wrap: break-word;
}

.ramka-info p + p,
.ramka-ok p + p {
    margin-top: .6rem;
}

/* Zmierzone w poprzednich portalach: odnośnik w okruszkach ma wysokość wiersza, czyli
   17 px, więc leży poniżej progu 24 px. Wypełnienie pionowe podnosi cel bez zmiany układu. */
.okruszki a {
    display: inline-block;
    padding-block: 4px;
}

/* To samo z odnośnikiem będącym całym nagłówkiem kafelka: 20 px wysokości wiersza. */
.karta h3 a,
.karta h4 a {
    display: inline-block;
    padding-block: 2px;
}

/* ------------------------------------------------------------------------- */
/* Ramka zakazu                                                              */
/* ------------------------------------------------------------------------- */

/* Kit definiuje zmienne --czerwien, ale sam z nich nie korzysta. W tym portalu jest na nie
   miejsce: część przepisów to zakazy bezwzględne (praca powyżej limitu, prace wzbronione
   młodocianym i kobietom w ciąży), a stawianie ich w tej samej ramce co informację dodatkową
   zaciera różnicę. Ramka zakazu ma osobny kolor ORAZ osobny nagłówek w treści, bo sam kolor
   nie dojdzie do czytnika ekranu ani do wydruku. */
.ramka-zakaz {
    background: var(--czerwien-tlo);
    border: 1px solid var(--czerwien-ramka);
    border-left: 4px solid var(--czerwien);
    border-radius: var(--zaokr-karty);
    padding: 16px 20px;
    margin: 1.2rem 0;
}

.ramka-zakaz p {
    margin-bottom: 0;
    font-size: var(--pismo-3);
}

.ramka-zakaz p + p {
    margin-top: .6rem;
}

.ramka-zakaz b {
    color: var(--tekst);
}

/* ------------------------------------------------------------------------- */
/* Plakietki progów temperatury                                               */
/* ------------------------------------------------------------------------- */

/* Próg rozstrzyga o obowiązku, więc pojawia się w treści bardzo często. Plakietka trzyma
   go w jednym kawałku i odróżnia cztery poziomy. Kolor jest dodatkiem: każda plakietka
   niesie wartość progu także w tekście. */
.pigulki {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .8rem 0 1.2rem;
    padding: 0;
    list-style: none;
}

.plakietka {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: 5px 12px;
    border-radius: var(--zaokr-pigulka);
    font-size: var(--pismo-2);
    font-weight: 600;
    line-height: 1.4;
    max-width: 100%;
    border: 1px solid var(--ramka-2);
    background: var(--karta-2);
    color: var(--tekst);
}

.plakietka code {
    font-size: var(--pismo-2);
    font-weight: 700;
    background: none;
    padding: 0;
    color: inherit;
    white-space: nowrap;
}

.plakietka-zimno {
    background: var(--akcent-tlo);
    border-color: var(--ramka-2);
}

.plakietka-norma {
    background: var(--zielen-tlo);
    border-color: var(--zielen-ramka);
}

.plakietka-uwaga {
    background: var(--bursztyn-tlo);
    border-color: var(--bursztyn-ramka);
}

.plakietka-zakaz {
    background: var(--czerwien-tlo);
    border-color: var(--czerwien-ramka);
}

/* ------------------------------------------------------------------------- */
/* Skala progów temperatury                                                   */
/* ------------------------------------------------------------------------- */

/* Ośmiu granicom łatwiej się przyjrzeć na jednej osi niż w tabeli. Skala jest listą
   opisową, a nie grafiką: przy wyłączonych stylach zostaje czytelna lista „wartość,
   znaczenie, podstawa”, a kolorowy pasek jest wyłącznie ozdobą po lewej stronie. */
.skala {
    display: grid;
    gap: .5rem;
    margin: 1.1rem 0 1.5rem;
    padding: 0;
    list-style: none;
}

.skala > li {
    display: grid;
    grid-template-columns: minmax(min(6.5rem, 100%), auto) 1fr;
    gap: .2rem 1.1rem;
    align-items: baseline;
    background: var(--karta);
    border: 1px solid var(--ramka);
    border-left: 5px solid var(--ramka-2);
    border-radius: var(--zaokr-karty);
    padding: .8rem 1.1rem;
}

.skala > li.st-zimno { border-left-color: var(--akcent); }
.skala > li.st-norma { border-left-color: var(--zielen); }
.skala > li.st-uwaga { border-left-color: var(--bursztyn); }
.skala > li.st-zakaz { border-left-color: var(--czerwien); }

.skala .stopnie {
    font-weight: 800;
    font-size: var(--pismo-4);
    color: var(--tekst);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.skala .znaczenie {
    font-size: var(--pismo-3);
    color: var(--tekst-2);
}

.skala .znaczenie b {
    color: var(--tekst);
}

.skala .podstawa {
    grid-column: 1 / -1;
    margin-top: .45rem;
}

@media (max-width: 640px) {
    .skala > li {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------------- */
/* Sprawdzarka obowiązków                                                     */
/* ------------------------------------------------------------------------- */

/* Sprawdzarka jest nakładką na tabelę, a nie warunkiem jej przeczytania. Pełne zestawienie
   wszystkich przypadków stoi w kodzie strony jako zwykła tabela, więc przy wyłączonych
   skryptach czytelnik dostaje komplet, tylko bez filtrowania. Panel sterowania jest wtedy
   ukrywany, bo przyciski, które nic nie robią, są gorsze niż ich brak. Klasę „skrypty”
   na elemencie html nadaje skorupa z kitu, jeszcze przed narysowaniem strony. */
.pytajka {
    display: none;
    background: var(--karta);
    border: 1px solid var(--ramka);
    border-radius: var(--zaokr-sekcji);
    padding: 1.2rem 1.3rem;
    margin: 1.2rem 0 1.4rem;
    box-shadow: var(--cien);
}

.skrypty .pytajka {
    display: block;
}

.pytajka fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
}

.pytajka legend {
    padding: 0;
    font-size: var(--pismo-2);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--stlum);
    margin-bottom: .5rem;
}

.pytajka-wiersz {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pole-temp {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.pole-temp input {
    width: 7.5rem;
    padding: 10px 12px;
    font: inherit;
    font-size: var(--pismo-4);
    font-weight: 700;
    color: var(--tekst);
    background: var(--tlo-2);
    border: 1.5px solid var(--ramka-2);
    border-radius: var(--zaokr-male);
}

.pole-temp input:focus {
    outline: 2px solid var(--akcent);
    outline-offset: 1px;
    border-color: var(--akcent);
}

.pole-temp label {
    font-size: var(--pismo-3);
    font-weight: 600;
    color: var(--tekst);
    padding-block: 2px;
}

/* Wybór jest przyciskiem przełącznym. Pole wyboru leży pod etykietą, więc obsługa
   klawiaturą i czytnikiem ekranu idzie normalną drogą, a widoczny jest przycisk. */
.wybor {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 7px 14px;
    min-height: 24px;
    border: 1.5px solid var(--ramka-2);
    border-radius: var(--zaokr-pigulka);
    background: var(--tlo-2);
    color: var(--tekst-2);
    font-size: var(--pismo-3);
    font-weight: 600;
    cursor: pointer;
}

.skrypty .wybor input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    cursor: pointer;
}

.wybor:hover {
    border-color: var(--akcent);
}

.wybor:has(input:focus-visible) {
    outline: 2px solid var(--akcent);
    outline-offset: 2px;
}

.wybor:has(input:checked) {
    background: var(--akcent-tlo);
    border-color: var(--akcent);
    color: var(--tekst);
}

.wynik {
    border-top: 1px solid var(--ramka);
    padding-top: 1rem;
    margin-top: .3rem;
}

.wynik-naglowek {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .7rem;
}

.wynik-stan {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: var(--zaokr-pigulka);
    font-size: var(--pismo-2);
    font-weight: 700;
    border: 1px solid var(--ramka-2);
    background: var(--karta-2);
    color: var(--tekst);
}

.wynik-stan.st-zimno { background: var(--akcent-tlo); border-color: var(--ramka-2); }
.wynik-stan.st-norma { background: var(--zielen-tlo); border-color: var(--zielen-ramka); }
.wynik-stan.st-uwaga { background: var(--bursztyn-tlo); border-color: var(--bursztyn-ramka); }
.wynik-stan.st-zakaz { background: var(--czerwien-tlo); border-color: var(--czerwien-ramka); }

.wynik-lista {
    margin: 0 0 0 1.1rem;
    padding: 0;
}

.wynik-lista li {
    margin-bottom: .55rem;
    font-size: var(--pismo-3);
}

.wynik-lista li b {
    color: var(--tekst);
}

.wynik-lista .zrodlo {
    display: block;
    margin-top: .2rem;
    font-size: var(--pismo-2);
    color: var(--stlum);
}

/* ------------------------------------------------------------------------- */
/* Kalendarz i harmonogram                                                    */
/* ------------------------------------------------------------------------- */

/* Terminy i zdarzenia w jednym miejscu. Świadomie nie jest to tabela: każda pozycja
   to termin plus czynność plus podstawa, czyli lista opisowa, a nie siatka danych
   do porównywania w kolumnach. */
.kalendarz {
    display: grid;
    gap: .6rem;
    margin: 1.1rem 0 1.4rem;
    padding: 0;
    list-style: none;
}

.kalendarz > li {
    display: grid;
    grid-template-columns: minmax(min(9.5rem, 100%), auto) 1fr;
    gap: .2rem 1.1rem;
    align-items: start;
    background: var(--karta);
    border: 1px solid var(--ramka);
    border-radius: var(--zaokr-karty);
    padding: .9rem 1.1rem;
}

.kalendarz .termin {
    font-weight: 700;
    color: var(--akcent);
    font-size: var(--pismo-4);
}

.kalendarz .czynnosc {
    font-size: var(--pismo-3);
    color: var(--tekst-2);
}

.kalendarz .czynnosc b {
    color: var(--tekst);
}

.kalendarz .podstawa {
    grid-column: 1 / -1;
    margin-top: .45rem;
}

@media (max-width: 640px) {
    .kalendarz > li {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------------- */
/* Tabele wartości dopuszczalnych                                             */
/* ------------------------------------------------------------------------- */

.liczba {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
    color: var(--tekst);
}

.legenda {
    font-size: var(--pismo-2);
    color: var(--stlum);
    margin: -.8rem 0 1.4rem;
}

/* Rozstrzygnięcia w tabelach różnią się jednym słowem, więc słowo to musi być widoczne
   od razu. Kolor jest dodatkiem do tekstu, nie zamiast.

   Zmierzone w portalu o czynnikach biologicznych: zmienna --bursztyn-tekst jest przeznaczona
   na tekst LEŻĄCY NA bursztynowym tle i w motywie ciemnym ma wartość bardzo ciemnobrązową.
   Użyta na tle karty dawała kontrast 1,08. Zmienna --bursztyn zmienia się razem z motywem
   i na tle karty daje wartości powyżej progu. */
.wymagane {
    font-weight: 700;
    color: var(--czerwien);
}

.zalecane {
    font-weight: 600;
    color: var(--bursztyn);
}

.niewymagane {
    color: var(--stlum);
}

/* Wiersz wyróżniony w tabeli: pozycja, którą trzeba przeczytać uważniej niż resztę.
   Wyróżnienie jest dodatkiem do treści komórki, a nie jedynym nośnikiem informacji. */
.wiersz-przejsciowy {
    background: var(--bursztyn-tlo);
}

.wiersz-przejsciowy th[scope="row"] {
    background: transparent;
}

/* ------------------------------------------------------------------------- */
/* Historia zmian                                                             */
/* ------------------------------------------------------------------------- */

.data-zmiany {
    white-space: nowrap;
    font-weight: 600;
    vertical-align: top;
}

.od-kiedy {
    display: block;
    font-weight: 400;
    font-size: var(--pismo-2);
    color: var(--stlum);
    margin-top: .2rem;
}

.opis-zmiany {
    display: block;
    margin-top: .4rem;
    font-weight: 400;
}

.znacznik-prawo,
.znacznik-weryfikacja,
.znacznik-dane,
.znacznik-serwis {
    display: inline-block;
    margin-top: .35rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--pismo-1);
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.znacznik-prawo {
    background: var(--bursztyn-tlo);
    color: var(--tekst);
    border: 1px solid var(--bursztyn-ramka);
}

.znacznik-weryfikacja,
.znacznik-dane {
    background: var(--tlo-2);
    color: var(--tekst-2);
    border: 1px solid var(--ramka-2);
}

.znacznik-serwis {
    background: var(--tlo-2);
    color: var(--tekst-2);
    border: 1px dashed var(--ramka-2);
}

/* ------------------------------------------------------------------------- */
/* Motyw graficzny nagłówka: fale gorącego powietrza                          */
/* ------------------------------------------------------------------------- */

/* Dwa pasy przesuwają się w poprzek ciemnego tła nagłówka, w przeciwnych kierunkach
   i z różną prędkością.

   Wniosek przeniesiony z trzech poprzednich portali: ozdoba przecinająca tekst zbija
   kontrast do wartości nie do przyjęcia, a ściemnianie jej do poziomu bezpiecznego kończy
   się zgaszeniem efektu. Dlatego pasy zajmują wyłącznie wewnętrzny margines nagłówka,
   36 px u góry i 30 px u dołu, przy marginesie 56 px i 50 px, i nigdy nie stykają się
   z tekstem.

   Poza tym: leżą pod treścią, nie łapią kliknięć, nie rozpychają strony i znikają
   całkowicie przy prefers-reduced-motion. */
.naglowek-strony {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.naglowek-strony > .container {
    position: relative;
    z-index: 2;
}

.naglowek-strony::before,
.naglowek-strony::after {
    content: "";
    position: absolute;
    left: -40%;
    right: -40%;
    z-index: 1;
    pointer-events: none;
    background-repeat: repeat-x;
}

/* Pas górny: fale gorącego powietrza w kolorze bursztynowym, przesuwane w prawo. */
.naglowek-strony::before {
    top: 0;
    height: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36' viewBox='0 0 120 36'%3E%3Cg fill='none' stroke='%23F5B84B' stroke-opacity='.46' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M4 26c8-9 16 9 24 0s16 9 24 0 16 9 24 0 16 9 24 0'/%3E%3Cpath d='M10 13c7-7 14 7 21 0s14 7 21 0' stroke='%237CA9F5' stroke-opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px 36px;
    animation: fale-blisko 26s linear infinite;
}

/* Pas dolny: te same fale, mniejsze, rozmyte, w przeciwną stronę. */
.naglowek-strony::after {
    bottom: 0;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='30' viewBox='0 0 88 30'%3E%3Cg fill='none' stroke='%23A8C6F9' stroke-opacity='.34' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M4 18c6-6 12 6 18 0s12 6 18 0 12 6 18 0 12 6 18 0'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 88px 30px;
    filter: blur(.4px);
    animation: fale-daleko 42s linear infinite;
}

@keyframes fale-blisko {
    from { background-position: 0 0; }
    to   { background-position: 120px 0; }
}

@keyframes fale-daleko {
    from { background-position: 0 0; }
    to   { background-position: -88px 0; }
}

/* Ruch jest ozdobą, więc przy zgłoszonej wrażliwości znika bez śladu. */
@media (prefers-reduced-motion: reduce) {
    .naglowek-strony::before,
    .naglowek-strony::after {
        animation: none;
    }
}

/* ------------------------------------------------------------------ odnosniki do prawa */
/* Nazwa aktu w zdaniu prowadzi do jego wiersza w rejestrze aktów prawnych. Odnośników
   tego rodzaju jest na stronie kilkanaście, więc nie mogą wyglądać jak przyciski nawigacji:
   tekst zostaje w kolorze treści, a rolę odnośnika niesie kropkowane podkreślenie. Kropki
   są znakiem niezależnym od koloru, więc działają też przy zaburzeniach widzenia barw. */
.odnosnik-aktu {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--akcent);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

.odnosnik-aktu:hover,
.odnosnik-aktu:focus-visible {
    color: var(--akcent);
    text-decoration-style: solid;
}

/* Wiersz rejestru wskazany odnośnikiem musi dać się odnaleźć wzrokiem po przewinięciu. */
tbody tr:target {
    background: var(--akcent-tlo);
}

tbody tr:target th[scope="row"] {
    box-shadow: inset 3px 0 0 var(--akcent);
}

/* Pasek serwisu jest przyklejony do góry okna i zasłoniłby wskazany wiersz. */
tbody tr[id] {
    scroll-margin-top: 96px;
}


/* ===================================================================== */
/* MONITOR NORM - komponenty portalu newsletterowego.                    */
/* Warstwa dopisana PRZED formatka-np.css, korzysta z jej zmiennych.     */
/* Nowe komponenty: karta zapisu, siatka zrodel, kroki, plakietki cial   */
/* normalizacyjnych, lista wydan, przelacznik jezyka, komunikaty formu-  */
/* larza. Nic tu nie nadpisuje warstwy marki - to robi formatka na koncu.*/
/* ===================================================================== */

/* Przelacznik jezyka w pasku: pigulka z dwoma stanami */
.przel-jezyk {
    display: inline-flex; align-items: center; gap: 2px;
    margin-left: 4px; padding: 3px; flex: 0 0 auto;
    border: 1px solid var(--ramka-2); border-radius: var(--zaokr-pigulka);
    background: var(--karta);
}
.przel-jezyk a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; min-height: 26px; padding: 2px 8px;
    font-size: var(--pismo-2); font-weight: 600; line-height: 1;
    text-decoration: none; color: var(--tekst-2);
    border-radius: var(--zaokr-pigulka);
}
.przel-jezyk a[aria-current="true"] { background: var(--akcent); color: #fff; }
:root[data-motyw="ciemny"] .przel-jezyk a[aria-current="true"] { color: #231a15; }
.przel-jezyk a:not([aria-current="true"]):hover { color: var(--akcent); background: var(--akcent-tlo); }

/* Znaczek nad naglowkiem strony glownej */
.znaczek-hero {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 13px; margin-bottom: 16px;
    font-size: var(--pismo-2); font-weight: 600; letter-spacing: .02em;
    border-radius: var(--zaokr-pigulka);
}
.znaczek-hero .kropka {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--zielen); flex: 0 0 auto;
}

/* Karta zapisu na newsletter */
.zapis {
    margin: 26px 0 8px; padding: clamp(20px, 3.5vw, 32px);
    background: var(--karta); border: 1px solid var(--ramka);
    border-radius: var(--zaokr-sekcji); box-shadow: var(--cien);
}
.zapis h2 { margin-top: 0; }
.zapis .podtytul { color: var(--tekst-2); margin-top: -4px; }
.pola-zapis {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
    margin-top: 18px;
}
.pola-zapis .pole { flex: 1 1 260px; min-width: 0; }
.pola-zapis label {
    display: block; font-size: var(--pismo-2); font-weight: 600;
    color: var(--tekst-2); margin-bottom: 5px;
}
.pola-zapis input[type="email"] {
    width: 100%; box-sizing: border-box;
    padding: 12px 14px; font: inherit; font-size: var(--pismo-4);
    color: var(--tekst); background: var(--tlo-2);
    border: 1.5px solid var(--ramka-2); border-radius: var(--zaokr-male);
}
.pola-zapis input[type="email"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--akcent) 45%, transparent);
    outline-offset: 1px; border-color: var(--akcent);
}
.pola-zapis .btn-zapis {
    flex: 0 0 auto; align-self: stretch;
    padding: 12px 22px; min-height: 46px; margin-top: 26px;
    font-size: var(--pismo-4); cursor: pointer;
}
/* pole-pulapka (honeypot) - poza ekranem, nie dla oka i czytnika */
.pole-pulapka {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    overflow: hidden;
}
.zgoda {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 14px; font-size: var(--pismo-3); color: var(--tekst-2);
}
.zgoda input[type="checkbox"] {
    flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px;
    accent-color: var(--akcent);
}
.zgoda a { color: var(--akcent); }

/* Komunikat formularza (sukces / blad) - wstrzykiwany skryptem albo z PHP */
.komunikat {
    margin-top: 16px; padding: 12px 15px;
    border-radius: var(--zaokr-male); font-size: var(--pismo-3);
    border: 1px solid transparent;
}
.komunikat.ok { background: var(--zielen-tlo); border-color: var(--zielen-ramka); color: var(--zielen); }
.komunikat.blad { background: var(--czerwien-tlo); border-color: var(--czerwien-ramka); color: var(--czerwien); }
.komunikat[hidden] { display: none; }

/* Siatka zrodel / cial normalizacyjnych */
.siatka-zrodla {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 16px; margin: 20px 0;
}
.karta-zrodlo {
    display: flex; flex-direction: column; gap: 8px;
    padding: 18px 18px 16px; background: var(--karta);
    border: 1px solid var(--ramka); border-radius: var(--zaokr-karty);
    box-shadow: var(--cien);
}
.karta-zrodlo h3 { margin: 0; font-size: var(--pismo-6); }
.karta-zrodlo p { margin: 0; color: var(--tekst-2); font-size: var(--pismo-3); }
.karta-zrodlo .odn { margin-top: auto; font-size: var(--pismo-2); }

/* Plakietka ciala normalizacyjnego */
.plakietka {
    display: inline-flex; align-items: center; align-self: flex-start;
    padding: 3px 11px; font-size: var(--pismo-1); font-weight: 700;
    letter-spacing: .06em; border-radius: var(--zaokr-pigulka);
    background: var(--akcent-tlo); color: var(--akcent);
    border: 1px solid color-mix(in srgb, var(--akcent) 35%, transparent);
}

/* Kroki - jak to dziala (formatka stylizuje .kroki p.podstawa) */
.kroki { list-style: none; margin: 20px 0; padding: 0; counter-reset: krok; }
.kroki > li {
    position: relative; padding: 4px 0 20px 52px; counter-increment: krok;
}
.kroki > li::before {
    content: counter(krok); position: absolute; left: 0; top: 0;
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: var(--pismo-5); font-weight: 500;
    color: var(--akcent); background: var(--akcent-tlo);
    border: 1px solid color-mix(in srgb, var(--akcent) 30%, transparent);
    border-radius: 50%;
}
.kroki > li::after {
    content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px;
    width: 2px; background: var(--ramka-2);
}
.kroki > li:last-child::after { display: none; }
.kroki > li h3 { margin: 4px 0 4px; font-size: var(--pismo-5); }
.kroki > li p { margin: 0; color: var(--tekst-2); }

/* Lista wydan / archiwum */
.lista-wydan { list-style: none; margin: 18px 0; padding: 0; }
.lista-wydan > li {
    padding: 14px 0; border-bottom: 1px solid var(--ramka);
}
.lista-wydan > li:first-child { border-top: 1px solid var(--ramka); }
.lista-wydan time { display: block; font-size: var(--pismo-2); color: var(--stlum); }
.lista-wydan a { font-weight: 600; }

/* Ramka informacyjna zwiezla (gdy nie ma pelnego .ramka-info z bazy) */
.nota {
    margin: 18px 0; padding: 14px 16px;
    background: var(--karta-2); border: 1px solid var(--ramka);
    border-left: 4px solid var(--akcent); border-radius: var(--zaokr-male);
    color: var(--tekst-2); font-size: var(--pismo-3);
}
.nota strong { color: var(--tekst); }

/* --- archiwum wydan ---------------------------------------------------- */
/* Wydania wyslane do odbiorcow. Kazde wydanie to karta z naglowkiem okresu,
   metryczka i lista pozycji; pozycja niesie plakietke zrodla, tytul-odnosnik
   i opcjonalne streszczenie. Uklad ma sie czytac tak samo na telefonie, wiec
   plakietka i tytul lamia sie w pion, a nie w waska kolumne. */
.wydanie {
    border-top: 1px solid var(--ramka);
    padding: 1.6rem 0 .4rem;
}
.wydanie:first-child { border-top: 0; }
.wydanie h2 { margin: 0 0 .3rem; }
.wydanie > .drobne { margin: 0 0 1rem; color: var(--stlum); }
.pozycje-wydania { list-style: none; margin: 0; padding: 0; }
.pozycje-wydania > li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
    padding: .7rem 0; border-bottom: 1px solid var(--ramka);
}
.pozycje-wydania > li:last-child { border-bottom: 0; }
.pozycje-wydania .plakietka { flex: 0 0 auto; }
.pozycje-wydania a { font-weight: 600; }
.pozycje-wydania .drobne {
    flex: 1 1 100%; color: var(--stlum); font-size: var(--pismo-2);
}


/* FRAUNCES self-host (naglowki formatki), zmienny woff2 300-500 */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 500;font-display:swap;src:url('fonts/fraunces-latin-ext-v1.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 500;font-display:swap;src:url('fonts/fraunces-latin-v1.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ===================================================================== */
/* FORMATKA NP - re-skin portalu na styl launchera (academy.claude.com).  */
/* Warstwa nadpisujaca, dopisana na koncu arkusza, wiec wygrywa kaskade.  */
/* Zmienia wylacznie warstwe marki: neutralne kolory cieply grafit,       */
/* glinkowy akcent, serif Fraunces w naglowkach, tlo w kropki, jasny      */
/* naglowek strony zamiast granatowego hero. Kolory znaczeniowe           */
/* (zakaz-czerwien, norma-zielen, uwaga-bursztyn, zimno-blekit) zostaja,  */
/* bo niosa tresc, nie sam wyglad.                                        */
/* ===================================================================== */

:root {
    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --dot: rgba(0, 0, 0, .045);
    --tlo: #f4f3ed; --tlo-2: #faf9f3; --karta: #ffffff; --karta-2: #faf9f3;
    --tekst: #262625; --tekst-2: #63615a; --stlum: #7a786f;
    --akcent: #b0512f; --akcent-moc: #8f3f22; --akcent-tlo: #f3e5dd;
    --akcent-ciemny: #b0512f;
    --ramka: #e5e3dc; --ramka-2: #d9d6cc;
    --cien: 0 1px 2px #0000000a, 0 12px 26px -16px #0000002e;
    --pasek: rgba(250, 249, 243, .82);
    --hero-tlo: transparent;
    --hero-tekst: #262625; --hero-tekst-stlum: #63615a; --hero-ramka: #e5e3dc;
    --naglowek-tab: #efede4; --tab-tekst: #262625;
    --bursztyn: #9a5a12; --bursztyn-tlo: #f9efdd; --bursztyn-ramka: #e6c592;
    --zielen: #2f7d4f; --zielen-tlo: #e9f3ec; --zielen-ramka: #aad3ba;
    --czerwien: #b0392c; --czerwien-tlo: #f7e7e3; --czerwien-ramka: #e3b0a6;
    --zaokr-male: 6px; --zaokr-karty: 8px; --zaokr-duze: 8px; --zaokr-sekcji: 10px;
}

:root[data-motyw="ciemny"] {
    --dot: rgba(255, 255, 255, .05);
    --tlo: #262625; --tlo-2: #2d2d2b; --karta: #2d2d2b; --karta-2: #34332e;
    --tekst: #f2f0e9; --tekst-2: #c3c0b6; --stlum: #9c9a90;
    --akcent: #e08a68; --akcent-moc: #eba588; --akcent-tlo: #3a2a22;
    --akcent-ciemny: #e08a68;
    --ramka: rgba(255, 255, 255, .12); --ramka-2: rgba(255, 255, 255, .16);
    --cien: 0 1px 2px #0000000d, 0 10px 24px -14px #00000073;
    --pasek: rgba(38, 38, 37, .82);
    --hero-tekst: #f2f0e9; --hero-tekst-stlum: #c3c0b6; --hero-ramka: rgba(255, 255, 255, .12);
    --naglowek-tab: #34332e; --tab-tekst: #f2f0e9;
    --bursztyn: #e6b46a; --bursztyn-tlo: #2e2413; --bursztyn-ramka: #5f4a22;
    --zielen: #7bb890; --zielen-tlo: #17251c; --zielen-ramka: #33513c;
    --czerwien: #e79b8f; --czerwien-tlo: #2f1c18; --czerwien-ramka: #5f342c;
}

/* Tlo w kropki jak w launcherze */
body {
    background-color: var(--tlo);
    background-image: radial-gradient(var(--dot) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* Naglowki serif, cienkie, w kolorze tekstu */
h1 { font-family: var(--serif); font-weight: 300; letter-spacing: -.02em; color: var(--tekst); }
h2 { font-family: var(--serif); font-weight: 400; }
h2 .nr { color: var(--akcent); }

/* Naglowek strony: jasny, bez ciemnego gradientu i bez animowanych fal */
.naglowek-strony { background: transparent; color: var(--tekst); border-bottom: 1px solid var(--ramka); }
.naglowek-strony h1 { color: var(--tekst); }
.naglowek-strony p { color: var(--tekst-2); }
.naglowek-strony::before, .naglowek-strony::after { display: none !important; }

/* Znaczek w naglowku: glinkowa pigulka zamiast bursztynu na ciemnym */
.znaczek-hero {
    border: 1px solid color-mix(in srgb, var(--akcent) 45%, transparent);
    background: var(--akcent-tlo); color: var(--akcent);
}

/* Okruszki na jasnym tle */
.okruszki, .okruszki a { color: var(--tekst-2); }
.okruszki a:hover { color: var(--akcent); }

/* CTA: jasna karta zamiast ciemnego gradientu */
.cta { background: var(--karta-2); border: 1px solid var(--ramka); color: var(--tekst-2); }
.cta h3 { color: var(--tekst); font-family: var(--serif); font-weight: 400; }
.cta p { color: var(--tekst-2); }
.cta .btn-kontur, .naglowek-strony .btn-kontur {
    border: 1.5px solid var(--akcent); color: var(--akcent); background: transparent;
}
.cta .btn-kontur:hover, .naglowek-strony .btn-kontur:hover { background: var(--akcent-tlo); }

/* Przycisk pobierania na glinke zamiast bursztynu, dla spojnosci marki */
.btn-bursztyn { background: var(--akcent); color: #fff; }
.btn-bursztyn:hover { background: var(--akcent-moc); }
:root[data-motyw="ciemny"] .btn-bursztyn { color: #231a15; }

/* Zimno zostaje blekitne mimo glinkowego akcentu marki (kolor niesie tresc) */
.plakietka-zimno, .wynik-stan.st-zimno { background: #e9eef7; border-color: #c9d6ea; color: #1f3357; }
.skala > li.st-zimno { border-left-color: #4f6fae; }
:root[data-motyw="ciemny"] .plakietka-zimno,
:root[data-motyw="ciemny"] .wynik-stan.st-zimno { background: #182338; border-color: #33445f; color: #c7d6ef; }
:root[data-motyw="ciemny"] .skala > li.st-zimno { border-left-color: #7ea0d8; }


/* ===================================================================== */
/* POPRAWKI PO POMIARZE. Warstwa ostatnia, doklejana PO formatce, bo tylko */
/* wtedy wygrywa kaskade. Kazda regula ma zmierzona przyczyne, nie gust.   */
/* Pomiar: 240 przebiegow (20 stron x 6 szerokosci x 2 motywy),            */
/* 10 732 pary tekstu i tla, 3644 cele dotykowe.                          */
/* ===================================================================== */

/* --- kontrast -------------------------------------------------------- */
/* Zmierzone 3,98 przy progu 4,5: kolor stlumiony na tle strony. Dotyczylo */
/* stopki i naglowka spisu tresci, razem 168 par. Po zmianie 4,95 na tle   */
/* strony, 5,22 na karcie i 4,69 na najjasniejszym tle naglowka tabeli.    */
:root { --stlum: #6b6960; }
/* W motywie ciemnym zmierzono 4,48 na karcie. Po zmianie 5,65.            */
:root[data-motyw="ciemny"] { --stlum: #a8a69c; }

/* Kolor akcentu na wlasnym jasnym tle dawal 4,2 przy 132 parach:          */
/* plakietki cial normalizacyjnych i znaczek nad naglowkiem. Mocniejszy    */
/* odcien akcentu daje 5,88 w jasnym i 6,69 w ciemnym, a barwa zostaje ta  */
/* sama, wiec plakietka nadal czyta sie jako element marki.                */
.plakietka,
.znaczek-hero { color: var(--akcent-moc); }

/* --- pasek przy waskim oknie ----------------------------------------- */
/* Przy oknie 320 px pasek wychodzil na 347 px, bo doszedl w nim trzeci    */
/* element sterujacy: przelacznik jezyka obok przycisku menu i motywu.     */
/* Ponizej 420 px przelacznik chudnie, a nazwisko w logo schodzi z paska   */
/* (zostaje w stopce kazdej strony, wiec nic nie znika z serwisu).         */
@media (max-width: 420px) {
    .przel-jezyk { padding: 2px; margin-left: 2px; }
    .przel-jezyk a { min-width: 27px; padding: 2px 4px; font-size: var(--pismo-1); }
    .logo-tekst em { display: none; }
    /* Po odchudzeniu przelacznika zostawalo 14 px nadmiaru, wiec wezsze jest
       takze logo i odstepy w pasku. Zmierzone po zmianie: 320 px dokladnie. */
    .logo-tekst { font-size: var(--pismo-3); letter-spacing: 0; }
    .pasek-tresc { gap: 6px; }
    .menu { gap: 4px; }
}

/* --- cele dotykowe ---------------------------------------------------- */
/* Pole zgody bylo kwadratem 18 px. Cel ma miec 24 px, wiec powiekszone,   */
/* razem z etykieta, ktora i tak przelacza pole klikieciem.                */
.zgoda input[type="checkbox"] { width: 24px; height: 24px; margin-top: 0; }
.zgoda { align-items: center; }

/* Odnosniki "Wiecej o ..." w kartach zrodel stoja samodzielnie, wiec nie  */
/* korzystaja z wyjatku dla odnosnika w zdaniu: dostaja pelne 24 px.       */
.karta-zrodlo .odn a {
    display: inline-flex; align-items: center; min-height: 24px;
}

/* Przelacznik jezyka: 26 px wysokosci to za malo o dwa piksele.           */
.przel-jezyk a { min-height: 24px; }

/* Logo w pasku po ukryciu nazwiska mialo 19 px wysokosci.                 */
.logo { display: inline-flex; align-items: center; min-height: 24px; }

/* --- etykieta zgody --------------------------------------------------- */
/* Etykieta byla flexem obejmujacym goly tekst i odnosnik, wiec przegladarka
   ustawila je jako TRZY KOLUMNY obok siebie zamiast jednego zawijanego zdania.
   Przy oknie 320 px dawalo to 328 px zamiast 219. Tekst jest teraz w jednym
   elemencie, wiec flex ma dwoje dzieci: pole wyboru i zdanie.
   Ta sama klasa bledu, co blokowy <strong> w srodku zdania. */
.zgoda > span { flex: 1 1 auto; min-width: 0; }

/* --- odnosniki nawigacyjne ------------------------------------------- */
/* Wiersz odnosnikow do zrodel (rozdzielony kropkami) i pozycja listy, ktorej
   jedyna trescia jest odnosnik, to nawigacja, a nie odnosnik w zdaniu. Wyjatek
   z WCAG 2.5.8 ich nie obejmuje, wiec dostaja pelne 24 px wysokosci celu.
   Zmierzone przed zmiana: 19 px. */
/* W wykazie norm nazwa dokumentu jest odnosnikiem do jego karty zrodlowej
   i stanowi cala tresc komorki naglowkowej. To cel nawigacyjny, nie odnosnik
   w zdaniu, wiec obowiazuje go pelne 24 px. Zmierzone przed zmiana: 17 px. */
.odnosniki a,
main li > a:only-child,
main p > a:only-child,
main th > a:only-child,
main td > a:only-child {
    display: inline-flex; align-items: center; min-height: 24px;
}

/* --- brak aktualnej Polskiej Normy w tabeli PKN --------------------- */
/* Komorka bez odnosnika: to nie usterka, tylko fakt (norma bez aktualnej PN).
   Wyrozniona stlumionym kolorem, zeby nie wygladala jak pusta luka. */
.drobne-brak { color: var(--stlum); font-style: italic; }

/* --- flaga "w rewizji" w tabelach norm (audyt nr 2) ------------------ */
/* Dwuczesciowy status: norma jest aktualna, ale ISO ma juz projekt nastepcy.
   Kolor bursztynowy (uwaga), para semantyczna serii, nie sam wyglad. */
.rewizja {
    display: inline-block; padding: 1px 8px; border-radius: var(--zaokr-pigulka);
    font-size: .78em; font-weight: 600; white-space: nowrap;
    background: var(--bursztyn-tlo); color: var(--bursztyn);
    border: 1px solid var(--bursztyn-ramka);
}

/* --- cele dotykowe w stopce (audyt nr 8) ------------------------------- */
/* Zmierzone 29 sierpnia: wszystkie odnosniki stopki mialy 17 px wysokosci,
   czyli ponizej progu 24 px z WCAG 2.5.8 (poziom AA). Audyt nr 7A wskazywal
   tu 44 px, ale to prog 2.5.5 z poziomu AAA; obowiazuje nas 24 px i tego
   pilnujemy.

   Stopka jest zestawem odnosnikow nawigacyjnych rozdzielonych kropkami, a nie
   odnosnikiem w zdaniu, wiec wyjatek "inline" z 2.5.8 jej nie obejmuje.
   Powiekszamy obszar aktywny odstepem wewnetrznym, bo to nie rusza ukladu
   ani odstepow miedzy wierszami: 17 px tekstu plus 2 x 4 px daje 25 px. */
footer a {
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* --- szerokie tabele na telefonie (audyt nr 8) ------------------------- */
/* Tabele norm sa szersze niz ekran telefonu i przewijaja sie w poziomie we
   wlasnej oprawie. Dzialalo to, ale bez dwoch rzeczy: nie bylo widac, ze jest
   co przewijac, a po przewinieciu w prawo znikala nazwa normy, wiec wiersz
   tracil punkt odniesienia.

   1. Pierwsza kolumna (nazwa dokumentu) zostaje przyklejona do lewej krawedzi
      przy przewijaniu. Tlo musi byc nieprzezroczyste, inaczej tekst z kolumn
      przesuwajacych sie pod spodem przebijalby przez nia.
   2. Cien po prawej stronie oprawy pojawia sie tylko wtedy, gdy tresc wystaje
      poza widok, bo tlo przewija sie razem z zawartoscia. To sygnal, ze jest
      co przesunac, a nie stala ozdoba.

   Oba zabiegi dzialaja tylko na waskich ekranach: na biurku tabela miesci sie
   w calosci i przyklejona kolumna niczego by nie wnosila. */
@media (max-width: 720px) {
    .tabela-oprawa {
        background:
            linear-gradient(to right, var(--karta) 30%, transparent),
            linear-gradient(to left, var(--karta) 30%, transparent) 100% 0,
            radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), transparent),
            radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), transparent) 100% 0;
        background-repeat: no-repeat;
        background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }
    .tabela-oprawa th[scope="row"] {
        position: sticky; left: 0; z-index: 1;
        background: var(--karta);
        border-right: 1px solid var(--ramka);
    }
    /* Wiersz naglowka tabeli ma wlasne tlo, wiec przyklejona komorka naglowkowa
       musi je powtorzyc, zeby nie zlewala sie z trescia pod spodem. */
    .tabela-oprawa thead th { background: var(--tlo-2, var(--karta)); }
}