/* Arkusz serwisu BIP. Wyglad celowo powsciagliwy - liczy sie czytelnosc tresci.
   Kontrasty dobrane powyzej progu WCAG 2.1 AA (tekst >= 4.5:1, elementy UI >= 3:1). */

:root {
    --tlo: #ffffff;
    --tlo-panel: #f2f4f6;
    --tekst: #14181c;          /* 16.1:1 na bieli */
    --tekst-slaby: #4a5560;    /* 7.6:1 na bieli */
    --akcent: #00476b;         /* 9.9:1 na bieli */
    --akcent-ciemny: #002d44;  /* obwodka naglowka */
    --akcent-jasny: #e3edf3;   /* tlo biezacej pozycji menu */
    --ramka: #7a848d;
    --blad: #8a1414;
    --ok: #14532d;
    --focus: #b34700;

    /* Jeden rozmiar pol edycyjnych w calym serwisie - publicznym i w panelu.
       Zmiana tutaj przenosi sie na wszystkie formularze naraz. Patrz sekcja Formularze. */
    --pole-wysokosc: 3rem;
    --pole-wypelnienie: 0.65rem 0.75rem;
    --pole-tekst: 1.05rem;
    --pole-szerokosc: 46rem;
    --pole-ramka: #4a5560;     /* 7.6:1 na bieli - kontur pola ma byc wyrazny, nie ledwo widoczny */

    /* Dlugosc wiersza tekstu ciaglego. Ponad 75 znakow oko gubi poczatek nastepnego
       wiersza - dlatego akapity maja wlasna miare, niezalezna od szerokosci strony. */
    --tresc-miara: 72ch;

    /* Mnoznik rozmiaru pisma - ustawiany przez panel ulatwien dostepu. */
    --skala-pisma: 1;

    /* Zaokraglenie narozników - jedno miejsce dla calego serwisu i panelu.
       --zaokraglenie-male  : znaczniki stanu, ikony plikow, kod TOTP
       --zaokraglenie       : pola formularzy, przyciski, odnosnik pomijajacy
       --zaokraglenie-duze  : menu, panele boczne, komunikaty, tabele, metryka
       Ustawienie wszystkich na 0 przywraca poprzedni, kanciasty wyglad. */
    --zaokraglenie-male: 3px;
    --zaokraglenie: 6px;
    --zaokraglenie-duze: 10px;
}

/* Przewijanie do kotwicy - takze do przycisku "Do gory". Blok prefers-reduced-motion
   na koncu arkusza przywraca skok natychmiastowy dla osob, ktore ruchu sobie nie zycza. */
html { scroll-behavior: smooth; }

/* --- Uklady kolorystyczne -------------------------------------------------------------------
   Wybierane w panelu (Dane podmiotu -> Wyglad serwisu), zapisywane jako atrybut data-motyw
   na elemencie html. Kazda paleta zmienia wylacznie barwe akcentu: naglowek, odnosniki
   i przyciski. Tlo pozostaje biale, a tekst ciemny - w BIP czytelnosc tresci jest wazniejsza
   niz wyrazistosc marki.

   Kontrast kazdej barwy akcentu wobec bieli przekracza 4.5:1, bo akcent sluzy jednoczesnie
   za kolor odnosnika na bieli i za tlo pod bialym tekstem. Liczy to test KontrastMotywowTesty
   wprost z tego pliku - nowej palety nie da sie dodac bez sprawdzenia kontrastu. */

[data-motyw="niebieski"] {
    --akcent: #12558f;
    --akcent-ciemny: #0b3a63;
    --akcent-jasny: #e4eef7;
}

[data-motyw="szary"] {
    --akcent: #37414a;
    --akcent-ciemny: #232a30;
    --akcent-jasny: #eceef0;
}

[data-motyw="zielony"] {
    --akcent: #0f6b45;
    --akcent-ciemny: #0a4a2f;
    --akcent-jasny: #e2f0ea;
}

[data-motyw="czerwony"] {
    --akcent: #9d1420;
    --akcent-ciemny: #6d0e17;
    --akcent-jasny: #f7e6e7;
}

[data-motyw="brazowy"] {
    --akcent: #6b4423;
    --akcent-ciemny: #4a2f18;
    --akcent-jasny: #f1e9e1;
}

* { box-sizing: border-box; }

/* Rozmiar pisma rosnie z szerokoscia okna: na monitorze panoramicznym wiersze sa dluzsze,
   wiec litery musza byc wieksze, zeby czytalo sie tak samo wygodnie.

   Punktem wyjscia jest 100%, czyli rozmiar ustawiony przez uzytkownika w przegladarce - nie
   sztywne piksele, bo te zignorowalyby jego wybor. Gora to 118%: powyzej tego tekst zaczyna
   wygladac na powiekszony, a nie na dopasowany.

   Mnoznik --skala-pisma niesie wybor z panelu ulatwien. Gdyby stopnie pisma nadpisywaly
   font-size wprost, wlaczenie wiekszego pisma gasiloby skalowanie oknem. */
html { font-size: calc(clamp(100%, 84% + 0.235vw, 118%) * var(--skala-pisma)); }

body {
    margin: 0;
    background: var(--tlo);
    color: var(--tekst);
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

/* Serwis zajmuje cala szerokosc okna - bez ramy pustego marginesu po bokach. Dlugosci
   wiersza pilnuje --tresc-miara na akapitach, a nie ograniczenie calego ukladu: tabele,
   menu i listy publikacji maja wtedy do dyspozycji wszystko, co daje ekran. */
.ograniczenie {
    margin: 0 auto;
    padding: 0 clamp(1rem, 2.5vw, 3rem);
}

/* --- Ognisko klawiatury: widoczne wszedzie, nigdy nieusuwane ------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;

    /* Drugi pierscien wypelnia odstep miedzy elementem a konturem barwa tla strony.
       Bez niego kontur ognisko-pomaranczowy (#b34700) lezacy na barwnym pasku panelu mial
       wobec niego 1,2-2,6:1, czyli ponizej progu 3:1 z kryterium 1.4.11. Bialy pierscien
       wobec kazdej barwy akcentu ma 10-14,5:1, wiec zlozony wskaznik jest widoczny
       zarowno na bialym tle serwisu, jak i na ciemnym pasku panelu. W schematach kontrastu
       pierscien przyjmuje barwe tla schematu, a kontrast niesie sam kontur. */
    box-shadow: 0 0 0 2px var(--tlo);
}

/* --- Odnosnik pomijajacy nawigacje -------------------------------------------------------- */
/* Odnosnik pomijajacy nawigacje. Barwy MUSZA byc para z palety: tlo bierze barwe tekstu,
   a napis barwe tla strony. Wpisana na sztywno biel dawala w schemacie C1 bialy napis na
   zoltym polu (1,07:1), a w C3 bialy na bialym (1:1) - czyli pierwszy element, na ktory
   trafia osoba korzystajaca z klawiatury, byl w dwoch schematach niewidoczny. */
.pomin {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--tekst);
    color: var(--tlo);
    padding: 0.75rem 1.25rem;
    z-index: 10;
}

.pomin:focus {
    left: 0;
}

/* --- Panel ulatwien dostepu -----------------------------------------------------------------
   Dziala bez JavaScriptu: rozwijanie to natywny znacznik details, a kazdy przycisk wysyla
   formularz. Ustawienia wracaja z serwera jako atrybuty data-kontrast, data-pismo
   i data-odstepy na elemencie html. */
.ulatwienia {
    background: var(--tlo-panel);
    border-bottom: 1px solid var(--ramka);
    font-size: 0.95rem;
}

.ulatwienia > summary {
    max-width: 96rem;
    margin: 0 auto;
    padding: 0.6rem clamp(1rem, 2.5vw, 2.5rem);
    cursor: pointer;
    font-weight: 600;
    width: fit-content;
}

/* Miedzynarodowy symbol dostepnosci przy napisie rozwijajacym panel.
   Barwa niebieska jest umowna, nie obowiazkowa - w trybach kontrastowych symbol przejmuje
   barwy strony, zeby nie zginal na czarnym albo zoltym tle. */
.znak-dostepnosci {
    vertical-align: middle;
    margin-left: 0.5rem;
}

.znak-dostepnosci rect { fill: #0057b8; }
.znak-dostepnosci .znak-postac { fill: #fff; }
.znak-dostepnosci .znak-linia { fill: none; stroke: #fff; }

.kontrast .znak-dostepnosci rect { fill: var(--tekst); }
.kontrast .znak-dostepnosci .znak-postac { fill: var(--tlo); }
.kontrast .znak-dostepnosci .znak-linia { stroke: var(--tlo); }

.ulatwienia-tresc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 2.5rem;
    max-width: 96rem;
    margin: 0 auto;
    padding: 0 clamp(1rem, 2.5vw, 2.5rem) 0.85rem;
}

/* Grupa: etykieta nad rzedem przyciskow, jak we wzorze. */
.ulatwienia-grupa { border: none; margin: 0; padding: 0; }

.ulatwienia-etykieta {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--tekst);
    font-size: 0.9rem;
}

.ulatwienia-przyciski {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

/* Ikony w przyciskach panelu: kreska, nie wypelnienie - dzieki temu jedna deklaracja
   koloru wystarcza w kazdym schemacie kontrastu. */
.ul-ikona {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Przyciski panelu sa male i gesto ustawione, wiec pole klikalne ma co najmniej 44 px -
   tyle wymaga kryterium rozmiaru celu dotykowego. */
.ul-przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 2.75rem to minimalny rozmiar celu dotykowego - przyciski panelu sa male i gesto
       ustawione, wiec pole klikalne musi byc wieksze od samej ikony. */
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.55rem;
    background: var(--tlo);
    color: var(--tekst);
    border: 1px solid var(--tekst);
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* Wybrany wariant oznaczony obwodka, a nie tylko barwa - stan musi byc widoczny takze
   przy wlaczonym kontrascie, gdzie barwy przyciskow sa narzucone. */
.ul-wybrany { outline: 3px solid var(--focus); outline-offset: 1px; }

/* Przelacznik czytania odnosnikow. Pole wyboru zostaje natywne - wlasne widgety
   sa gorsze od tych, ktore czytnik ekranu i tak zna. */
.ul-przelacznik {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0 0.7rem;
    border: 1px solid var(--tekst);
    background: var(--tlo);
    cursor: pointer;
}

.ul-przelacznik input { width: 1.1rem; height: 1.1rem; }

/* Przycisk lektora ma tekst, a nie samo oznaczenie - jego dzialanie nie jest oczywiste. */
.ul-lektor { min-width: auto; gap: 0.35rem; font-weight: 600; }

.ul-c1 { background: #000; color: #ff0; border-color: #000; }
.ul-c2 { background: #ff0; color: #000; border-color: #000; }
.ul-c3 { background: #000; color: #fff; border-color: #000; }
.ul-c4 { background: #fff; color: #000; border-color: #000; }

/* Tekst wylacznie dla czytnika ekranu: przyciski panelu maja krotkie oznaczenia graficzne,
   ktore same z siebie nic nie znacza, wiec pelna nazwa czynnosci jest tutaj. */
.tylko-czytnik {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Schematy kontrastu ---------------------------------------------------------------------
   Nadpisuja wszystkie barwy serwisu. Nazwy C1-C4 sa w BIP-ach utrwalone. Barwy sa skrajne
   z zalozenia - to tryb dla osob, ktorym zwykla paleta nie wystarcza. */
[data-kontrast="c1"] { --tlo: #000; --tlo-panel: #111; --tekst: #ff0; --tekst-slaby: #ff0;
                       --akcent: #ff0; --akcent-ciemny: #ff0; --akcent-jasny: #333;
                       --ramka: #ff0; --pole-ramka: #ff0; --blad: #ff0; --ok: #ff0; --focus: #fff; }

[data-kontrast="c2"] { --tlo: #ff0; --tlo-panel: #ffd; --tekst: #000; --tekst-slaby: #000;
                       --akcent: #000; --akcent-ciemny: #000; --akcent-jasny: #ffe;
                       --ramka: #000; --pole-ramka: #000; --blad: #000; --ok: #000; --focus: #00f; }

[data-kontrast="c3"] { --tlo: #000; --tlo-panel: #111; --tekst: #fff; --tekst-slaby: #fff;
                       --akcent: #fff; --akcent-ciemny: #fff; --akcent-jasny: #333;
                       --ramka: #fff; --pole-ramka: #fff; --blad: #fff; --ok: #fff; --focus: #ff0; }

[data-kontrast="c4"] { --tlo: #fff; --tlo-panel: #f4f4f4; --tekst: #000; --tekst-slaby: #000;
                       --akcent: #000; --akcent-ciemny: #000; --akcent-jasny: #eee;
                       --ramka: #000; --pole-ramka: #000; --blad: #000; --ok: #000; --focus: #00f; }

/* Powierzchnie, ktore w zwyklym trybie sa zawsze biale, musza pojsc za wybranym tlem.
   Selektor po KLASIE, nie po atrybucie: [data-kontrast] lapie takze pusty atrybut, wiec
   reguly dzialalyby rowniez wtedy, gdy uzytkownik zadnego schematu nie wybral. */
.kontrast .naglowek,
.kontrast .szukajka .szukajka-pole input,
.kontrast input:not([type="checkbox"], [type="radio"]),
.kontrast select,
.kontrast textarea,
.kontrast table { background: var(--tlo); color: var(--tekst); }

.kontrast .komunikat-ok,
.kontrast .komunikat-blad { background: var(--tlo-panel); }

/* Znak BIP jest czerwony i pozostaje czerwony - to znak urzedowy, ktorego nie wolno
   przemalowac. Biala podkladka trzyma go czytelnym takze na czarnym tle. */
[data-kontrast="c1"] .znak-bip,
[data-kontrast="c3"] .znak-bip { background: #fff; padding: 0.3rem 0.45rem; border-radius: 4px; }

/* Ikony rodzaju pliku traca w tym trybie swoje barwy - licza sie kontury i napis. */
.kontrast .ikona-pliku { color: var(--tekst); }

/* --- Rozmiar pisma i odstepy ---------------------------------------------------------------
   Wszystkie wymiary w serwisie sa w rem, wiec zmiana font-size na elemencie html skaluje
   cala strone, a nie sam tekst. Wartosci odstepow sa wziete z kryterium odstepow w tekscie. */
html[data-pismo="2"] { --skala-pisma: 1.125; }
html[data-pismo="3"] { --skala-pisma: 1.25; }

[data-odstepy~="litery"] body { letter-spacing: 0.12em; word-spacing: 0.16em; }
[data-odstepy~="linie"] body { line-height: 1.8; }
[data-odstepy~="linie"] p { margin-bottom: 2em; }

/* --- Naglowek ------------------------------------------------------------------------------
   Jeden bialy pasek: znak BIP, nazwa Biuletynu i podmiotu, znak podmiotu, wyszukiwarka.
   Biel jest tu konieczna - znak BIP jest czerwony i na barwnym tle bylby nieczytelny.
   Barwe akcentu niesie nazwa podmiotu i przycisk wyszukiwania, wiec motyw nadal widac. */
.naglowek {
    background: var(--tlo);
    border-bottom: 4px solid var(--akcent);
}

/* Wariant drugi: winieta wypelniona barwa motywu, wlaczana w panelu (Dane podmiotu ->
   Wyglad serwisu). Uklad paska sie nie zmienia - inne jest tylko tlo i barwa napisow.
   Biel napisow wobec kazdej barwy akcentu przekracza 4.5:1, co liczy test wprost z tego
   arkusza. Reguly nie dzialaja w schematach kontrastu (html:not(.kontrast)): tam barwy
   narzuca wybrany schemat, a wpisana na sztywno biel dawalaby w C4 bialy napis na bialym. */
html:not(.kontrast) .naglowek-wypelniony {
    background: var(--akcent);
    border-bottom-color: var(--akcent-ciemny);
}

html:not(.kontrast) .naglowek-wypelniony .logo { border-left-color: rgba(255, 255, 255, 0.5); }

html:not(.kontrast) .naglowek-wypelniony .logo-nazwa,
html:not(.kontrast) .naglowek-wypelniony .logo-podmiot,
html:not(.kontrast) .naglowek-wypelniony .szukajka label { color: #fff; }

/* Znak BIP jest czerwony i pozostaje czerwony - to znak urzedowy. Na barwnym pasku
   dostaje biala podkladke, tak samo jak w panelu redakcyjnym i w schematach kontrastu.
   Znak podmiotu bywa rownie barwny, wiec idzie za nim. */
html:not(.kontrast) .naglowek-wypelniony .znak-bip,
html:not(.kontrast) .naglowek-wypelniony .znak-podmiotu {
    background: #fff;
    border-radius: var(--zaokraglenie-male);
    padding: 0.35rem 0.5rem;
}

/* Przycisk wyszukiwania w barwie akcentu zniknalby na tle w tej samej barwie - zamienia
   sie stronami: biale tlo, napis barwa akcentu. */
html:not(.kontrast) .naglowek-wypelniony .szukajka button {
    background: #fff;
    color: var(--akcent);
    border-color: #fff;
}

.naglowek-tresc {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.naglowek-tozsamosc {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
}

.naglowek-narzedzia {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1 1 20rem;
    min-width: 0;
    justify-content: flex-end;
}

.znak-bip { display: inline-flex; flex: none; }
.znak-bip img { height: 2.4rem; width: auto; display: block; }

/* Pionowa kreska oddzielajaca znak BIP od nazw - jak w papierowej winiecie. */
.logo {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    border-left: 1px solid var(--ramka);
    padding-left: 1.25rem;
}

.logo-nazwa {
    flex: none;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--tekst);
}

.logo-podmiot {
    font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.6rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--akcent);
}

.logo:hover .logo-podmiot { text-decoration: underline; }

/* max-width pilnuje, zeby zbyt szeroki znak podmiotu nie rozepchnal paska na waskim ekranie. */
.znak-podmiotu {
    height: 2.75rem;
    width: auto;
    max-width: min(16rem, 40%);
    object-fit: contain;
    display: block;
    flex: none;
}

/* Formularz wyszukiwania jest elementem flex naglowka. min-width: 0 pozwala mu zwezic sie
   ponizej szerokosci wlasnej zawartosci - bez tego przy 320 px naglowek rozpycha strone
   i pojawia sie poziome przewijanie, ktorego WCAG nie dopuszcza. */
.szukajka {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: 26rem;
}

.szukajka label {
    display: block;
    font-size: 0.85rem;
    color: var(--tekst-slaby);
    margin-bottom: 0.25rem;
}

.szukajka-pole { display: flex; }

/* Pole wyszukiwania ma te sama wysokosc i ten sam rozmiar tekstu co pozostale pola serwisu,
   ale wlasna szerokosc - w pasku naglowka nie ma miejsca na pelna szerokosc formularza. */
.szukajka .szukajka-pole input {
    flex: 1 1 12rem;
    width: auto;
    min-width: 0;
    max-width: none;
}

.szukajka button {
    background: var(--akcent);
    color: var(--tlo);
    border: 2px solid var(--akcent);
    border-left: none;
    min-height: var(--pole-wysokosc);
    padding: 0 1.25rem;
    font-size: var(--pole-tekst);
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 45rem) {
    /* Na waskim ekranie kreska pionowa traci sens - nazwy ida pod znak BIP. */
    .naglowek-tozsamosc { flex-wrap: wrap; }
    .logo { border-left: none; padding-left: 0; }
}

/* --- Uklad dwukolumnowy ------------------------------------------------------------------- */
.uklad {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
    align-items: start;
}

@media (max-width: 60rem) {
    .uklad { grid-template-columns: 1fr; }
}

/* Wariant z przyciskami "Zalatw sprawe" w osobnej kolumnie po prawej stronie tresci -
   wybierany w danych podmiotu. minmax(0, 1fr) na kolumnie srodkowej jest konieczny:
   domyslne 1fr to minmax(auto, 1fr), wiec szeroka tabela rozpychalaby siatke zamiast
   przewijac sie w swojej otoczce. */
.uklad-trzy { grid-template-columns: 18rem minmax(0, 1fr) 18rem; }

.kolumna-prawa { min-width: 0; }

@media (max-width: 75rem) {
    /* Za waski ekran na trzy kolumny - przyciski ida pasem pod tresc, ale menu zostaje
       z boku. Bez grid-column siatka wrzucilaby je pod menu, czyli do kolumny lewej. */
    .uklad-trzy { grid-template-columns: 18rem minmax(0, 1fr); }
    .uklad-trzy .kolumna-prawa { grid-column: 1 / -1; }

    /* W pasie na calej szerokosci przyciski ida obok siebie - rozciagniete na cale
       kilkaset pikselow wygladalyby jak pasy, a nie jak przyciski. */
    .uklad-trzy .kolumna-prawa .odnosniki ul {
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    }
}

@media (max-width: 60rem) {
    .uklad-trzy { grid-template-columns: 1fr; }
}

.menu {
    background: var(--tlo-panel);
    border: 1px solid var(--ramka);
    padding: 1rem;
}

/* Kolumna boczna: menu i przyciski do systemow zewnetrznych jako jeden element siatki. */
.kolumna-boczna { display: grid; gap: 1.5rem; align-content: start; min-width: 0; }

.menu-tytul { font-size: 1rem; margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; }

.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { margin: 0; }
.menu ul ul { margin-left: 0.85rem; border-left: 2px solid var(--ramka); padding-left: 0.65rem; }

.menu a {
    display: block;
    padding: 0.35rem 0.25rem;
    color: var(--akcent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

/* Dzialy najwyzszego poziomu grubiej niz podrzedne - po samej grubosci pisma widac, gdzie
   zaczyna sie kolejna galaz menu. Hierarchii nie niesie wtedy wylacznie wciecie, ktore na
   malym ekranie i przy powiekszonym tekscie robi sie malo czytelne. */
.menu-przedmiotowe > li > a { font-weight: 700; }

.menu a:hover { text-decoration: underline; }

/* Aktualna pozycja oznaczona nie tylko kolorem - takze tlem i pogrubieniem. */
.menu a[aria-current="page"] {
    background: var(--akcent-jasny);
    font-weight: 700;
    text-decoration: underline;
}

/* --- Odnosniki do systemow zewnetrznych --------------------------------------------------- */
.odnosniki {
    background: var(--tlo-panel);
    border: 1px solid var(--ramka);
    padding: 1rem;
}

.odnosniki ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

/* Przycisk jest zwyklym .przycisk - dzieki temu bierze barwy motywu i nadpisania kontrastu
   bez powtarzania ich tutaj. Zmienia sie tylko uklad: napis po lewej, strzalka po prawej. */
.odnosniki .przycisk {
    width: 100%;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    text-align: left;
}

.odnosnik-nazwa { display: block; }
.odnosnik-opis { display: block; font-weight: 400; font-size: 0.9rem; line-height: 1.35; }

.odnosnik-ikona {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Tresc --------------------------------------------------------------------------------- */
.tresc { min-width: 0; }

/* Skala naglowkow z wyrazna roznica miedzy stopniami - po samym rozmiarze widac,
   ktory naglowek jest nadrzedny, bez wczytywania sie w tresc. */
h1 { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); line-height: 1.2; margin: 0 0 1.25rem; }
h2 { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.8rem); margin: 2.25rem 0 0.85rem; }
h3 { font-size: 1.25rem; margin: 1.75rem 0 0.5rem; }
h1, h2, h3 { letter-spacing: -0.01em; }

a { color: var(--akcent); }

.okruszki { font-size: 0.9rem; margin-bottom: 1rem; }
.okruszki ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.okruszki li + li::before { content: "/"; margin-right: 0.35rem; color: var(--tekst-slaby); }

.komunikat { padding: 0.75rem 1rem; border-left: 6px solid; margin: 0 0 1rem; }
.komunikat-ok { border-color: var(--ok); background: #eef6f0; }
.komunikat-blad { border-color: var(--blad); background: #fbeeee; }

/* Tekst ciagly czyta sie dluzej niz etykiety interfejsu, wiec jest wiekszy i luzniejszy.
   Miara wiersza ograniczona niezaleznie od szerokosci strony; tabele, obrazy i naglowki
   celowo jej nie podlegaja - maja do dyspozycji cala kolumne. */
.artykul { font-size: 1.15rem; line-height: 1.7; }

.artykul > p,
.artykul > ul,
.artykul > ol,
.artykul > blockquote,
.artykul > dl { max-width: var(--tresc-miara); }

.tresc > p, .wprowadzenie { max-width: var(--tresc-miara); }

.artykul > *:first-child { margin-top: 0; }
.artykul img { max-width: 100%; height: auto; }
.artykul ul, .artykul ol { padding-left: 1.5rem; }
.artykul blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 4px solid var(--ramka); }

/* --- Tabele -------------------------------------------------------------------------------- */
.tabela-otoczka { overflow-x: auto; }

table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
}

caption { text-align: left; font-weight: 600; padding-bottom: 0.5rem; }

th, td {
    border: 1px solid var(--ramka);
    padding: 0.5rem 0.65rem;
    text-align: left;
    vertical-align: top;
}

thead th { background: var(--tlo-panel); }

/* Rejestr zdarzen niesie ciagi bez spacji - nazwy zdarzen z kropkami, identyfikatory GUID,
   adresy e-mail i IP. Bez zawijania tabela rozpycha sie daleko poza ekran i czyta sie ja
   przewijaniem w bok.

   Szerokosci sa narzucone (table-layout: fixed), bo samo overflow-wrap: anywhere pozwala
   przegladarce sciskac kolumny az do jednego znaku - naglowki lamia sie wtedy pionowo,
   litera pod litera. Naglowki zawijaja sie wylacznie na granicy wyrazu; lamanie w dowolnym
   miejscu dotyczy tylko komorek z danymi. min-width trzyma czytelna szerokosc na malym
   ekranie - tam tabela przewija sie w otoczce, zamiast zwezac kolumny do nieczytelnych. */
.tabela-rejestr { table-layout: fixed; min-width: 52rem; }
.tabela-rejestr th { overflow-wrap: normal; }
.tabela-rejestr td { overflow-wrap: anywhere; }

.tabela-rejestr th:nth-child(1) { width: 12%; }   /* Czas */
.tabela-rejestr th:nth-child(2) { width: 15%; }   /* Zdarzenie */
.tabela-rejestr th:nth-child(3) { width: 10%; }   /* Wynik */
.tabela-rejestr th:nth-child(4) { width: 15%; }   /* Uzytkownik */
.tabela-rejestr th:nth-child(5) { width: 10%; }   /* Adres IP */
.tabela-rejestr th:nth-child(6) { width: 14%; }   /* Obiekt */

/* Znacznik wyniku to jeden wyraz - zlamany w polowie przestaje byc etykieta. */
.tabela-rejestr .znacznik { white-space: nowrap; }

/* --- Metryka informacji publicznej ---------------------------------------------------------- */
.metryka {
    margin-top: 2.5rem;
    border: 1px solid var(--ramka);
    background: var(--tlo-panel);
    padding: 1rem 1.25rem;
}

.metryka h2 { margin-top: 0; font-size: 1.1rem; }

.metryka dl { display: grid; grid-template-columns: minmax(12rem, auto) 1fr; gap: 0.35rem 1rem; margin: 0; }
.metryka dt { font-weight: 600; }
.metryka dd { margin: 0; }

@media (max-width: 40rem) {
    .metryka dl { grid-template-columns: 1fr; }
    .metryka dd { margin-bottom: 0.5rem; }
}

/* --- Listy pozycji --------------------------------------------------------------------------- */
.pozycje { list-style: none; margin: 0; padding: 0; }

.pozycje li {
    border-bottom: 1px solid var(--ramka);
    padding: 0.85rem 0;
}

.pozycja-tytul { font-size: 1.1rem; font-weight: 600; }
.pozycja-meta { color: var(--tekst-slaby); font-size: 0.9rem; }

.znacznik {
    display: inline-block;
    border: 1px solid currentColor;
    padding: 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.znacznik-wycofana { color: var(--blad); }
.znacznik-szkic { color: var(--tekst-slaby); }
.znacznik-akceptacja { color: #7a4100; }
.znacznik-opublikowana { color: var(--ok); }

/* --- Zalaczniki ------------------------------------------------------------------------------ */
.zalaczniki { list-style: none; margin: 1rem 0 0; padding: 0; }

/* Ikona z lewej, opis z prawej. align-items: start trzyma ikone przy nazwie pliku,
   a nie na srodku dlugiego opisu. */
.zalaczniki li {
    display: flex;
    gap: 0.85rem;
    align-items: start;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--ramka);
}

.zalacznik-opis { min-width: 0; }
.zalacznik-opis > a { font-size: 1.05rem; font-weight: 600; word-break: break-word; }
.zalacznik-opis > p { margin: 0.25rem 0 0; }

.zalacznik-meta { color: var(--tekst-slaby); font-size: 0.9rem; }

.zalaczniki .suma { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; word-break: break-all; }

/* Ikona rodzaju pliku. Barwa idzie przez currentColor, wiec jedna deklaracja koloru
   ustawia i obwodke kartki, i pasek z rozszerzeniem. Kazda barwa ma na bieli kontrast
   powyzej 4.5:1, bo na pasku stoi bialy napis - pilnuje tego test KontrastPlikowTesty. */
.ikona-pliku { flex: none; }

.plik-pdf { color: #a4161a; }
.plik-dokument { color: #12558f; }
.plik-arkusz { color: #0f6b45; }
.plik-obraz { color: #6a2c8f; }
.plik-archiwum { color: #6b4423; }
.plik-dane { color: #4a5560; }

/* --- Formularze ------------------------------------------------------------------------------ */
.pole { margin-bottom: 1.15rem; }

.pole label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

/* Pole wymagane oznaczone slowem, nie sama gwiazdka - gwiazdka bez legendy nic nie mowi
   ani osobie widzacej, ani czytnikowi ekranu. */
.wymagane {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--blad);
    white-space: nowrap;
}

.podpowiedz { display: block; font-weight: 400; color: var(--tekst-slaby); font-size: 0.9rem; }

/* Wszystkie pola edycyjne maja ten sam rozmiar. Wybor przez WYKLUCZENIE typow, nie przez
   ich wyliczanie: input bez atrybutu type (a takich jest w widokach sporo - powstaja
   wszedzie tam, gdzie nie uzyto asp-for) nie pasowal do listy input[type="text"], ... i
   zostawal w domyslnym, waskim rozmiarze przegladarki. Przy okazji nowe typy pol
   (tel, url, time) nie wymagaja juz dopisywania selektora. */
input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"],
          [type="reset"], [type="image"], [type="hidden"], [type="range"], [type="color"]),
select,
textarea {
    width: 100%;
    max-width: var(--pole-szerokosc);
    height: var(--pole-wysokosc);
    padding: var(--pole-wypelnienie);
    font-size: var(--pole-tekst);
    font-family: inherit;
    line-height: 1.4;
    border: 2px solid var(--pole-ramka);
    background: #fff;
    color: var(--tekst);
}

/* Wysokosc sztywna, zeby pole daty z wlasna ikona kalendarza nie bylo wyzsze od pozostalych.
   Dwa wyjatki rosna z trescia: obszar tekstowy i pole wyboru pliku z przyciskiem w srodku. */
textarea { height: auto; min-height: 18rem; }
input[type="file"] { height: auto; min-height: var(--pole-wysokosc); }

.blad-pola { color: var(--blad); font-weight: 600; display: block; margin-top: 0.25rem; }

input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--blad); }

.przyciski { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* Komunikat stojacy zaraz pod rzedem przyciskow przylegal do nich krawedzia i wygladal
   jak ich czesc - a mowi o czyms innym niz przycisk, ktory dotyka. */
.przyciski + .komunikat { margin-top: 1.5rem; }

/* Formularz z jednym przyciskiem, stojacy obok innego takiego formularza - obieg redakcyjny
   i zmiana stanu konta. Klasa byla w widokach od poczatku, ale nie miala tu odpowiednika,
   wiec formularze zachowywaly sie jak bloki: przyciski stykaly sie krawedziami i zlewaly
   w jedna ciemna plame, po ktorej nie widac, ze to dwie osobne czynnosci. */
.obok {
    display: inline-block;
    vertical-align: top;
    margin: 0 0.75rem 0.75rem 0;
}

.przycisk {
    /* Ta sama wysokosc co pola edycyjne - przycisk stojacy obok pola ma sie z nim rownac.
       Wysrodkowanie flexem, a nie line-height: dluga etykieta moze sie zlamac na dwie linie
       i przy line-height rozjechalaby sie na wysokosc dwoch pol. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--pole-wysokosc);
    background: var(--akcent);
    color: var(--tlo);
    border: 2px solid var(--akcent);
    padding: 0.4rem 1.25rem;
    font-size: var(--pole-tekst);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.przycisk-drugorzedny { background: var(--tlo); color: var(--akcent); }
.przycisk-ostrzegawczy { background: #fff; color: var(--blad); border-color: var(--blad); }

/* --- Konfiguracja drugiego skladnika ----------------------------------------------------- */
.mfa-konfiguracja {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: start;
    margin: 1.5rem 0;
    padding: 1.25rem;
    border: 1px solid var(--ramka);
    background: var(--tlo-panel);
}

@media (max-width: 45rem) {
    .mfa-konfiguracja { grid-template-columns: 1fr; }
}

.mfa-konfiguracja h2 { margin-top: 0; font-size: 1.05rem; }

/* Biale tlo pod kodem QR niezaleznie od tla panelu - czytniki wymagaja kontrastu modulow. */
.mfa-kod-qr img {
    display: block;
    background: #fff;
    padding: 0.5rem;
    border: 1px solid var(--ramka);
}

.mfa-klucz details { margin-top: 0.75rem; }
.mfa-klucz summary { cursor: pointer; font-weight: 600; }

/* --- Stopka ---------------------------------------------------------------------------------- */
.stopka {
    background: var(--tlo-panel);
    border-top: 4px solid var(--akcent);
    padding: 1.5rem 0 2.5rem;
    font-size: 0.95rem;
}

/* Odnosniki serwisowe wysrodkowane - razem ze znakiem zgodnosci i wierszem wersji tworza
   wysrodkowana stopke pod trzema kolumnami danych podmiotu. */
.stopka-linki {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    margin: 1.5rem 0 0;
    padding: 0;
}

.stopka address { font-style: normal; }

/* Znak zgodnosci z WCAG. Nie obrazek, tylko tekst z ramka: skaluje sie z pismem, bierze
   barwy motywu i schematow kontrastu, a czytnik ekranu odczytuje go jako zwykly odnosnik
   z pelnym opisem, a nie jako grafike wymagajaca tekstu alternatywnego. */
.stopka-zgodnosc { margin: 1.5rem 0 0; text-align: center; }

.znak-wcag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.9rem;
    border: 2px solid var(--akcent);
    color: var(--akcent);
    text-decoration: none;
    text-align: left;
}

.znak-wcag:hover { background: var(--akcent-jasny); text-decoration: underline; }

.znak-wcag-ikona {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.znak-wcag-norma { display: block; font-weight: 700; letter-spacing: 0.02em; }
.znak-wcag-opis { display: block; font-size: 0.85rem; }

.stopka-wersja {
    margin: 1.25rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ramka);
    color: var(--tekst-slaby);
    font-size: 0.9rem;
    text-align: center;
}

/* Znak praw autorskich, rok i nazwa wykonawcy jako calosc - odstep przed nim zastepuje
   kropke rozdzielajaca, a nowrap trzyma calosc w jednym wierszu. */
.stopka-prawa { white-space: nowrap; margin-left: 0.75rem; }

/* Data wydania trzyma sie numeru wersji: przy waskim oknie ma zlamac sie razem z nim,
   a nie zostac sama w wierszu jak osierocona liczba. */
.stopka-data { white-space: nowrap; }

/* Trzy kolumny danych podmiotu: adres, kontakt, informacje dodatkowe. auto-fit z minmax
   zwija je do dwoch, a potem do jednej kolumny bez zadnego zapytania medialnego. */
.stopka-dane {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem 2.5rem;
}

.stopka-kolumna h2 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--ramka);
}

/* Etykieta i wartosc w jednym wierszu, jak w danych teleadresowych na papierze.
   Lista opisowa, a nie tabela - to pary nazwa-wartosc, nie dane tabelaryczne. */
.stopka-kolumna dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.5rem;
    margin: 0;
}

.stopka-kolumna dt { color: var(--tekst-slaby); }
.stopka-kolumna dt::after { content: ":"; }
.stopka-kolumna dd { margin: 0; word-break: break-word; }

@media (max-width: 30rem) {
    /* Na waskim ekranie wartosc idzie pod etykiete - inaczej dlugi adres e-Doreczen
       rozpycha kolumne etykiet i wiersze przestaja byc czytelne. */
    .stopka-kolumna dl { grid-template-columns: 1fr; }
    .stopka-kolumna dd { margin-bottom: 0.35rem; }
}

/* --- Obszar redakcyjny ------------------------------------------------------------------------ */
/* Strony panelu bez menu (logowanie, drugi skladnik, aktywacja, reset hasla, brak dostepu)
   to jedna kolumna wysrodkowana w oknie. Bez tego main wpada do pierwszej kolumny siatki -
   tej przeznaczonej na nawigacje - i formularz sciska sie przy lewej krawedzi ekranu. */
.uklad-samotny {
    display: block;
    max-width: 34rem;
    margin-inline: auto;
    padding-top: 3rem;
}

/* Tresc panelu bierze cala szerokosc kolumny - listy publikacji, tabela uzytkownikow
   i rejestr zdarzen maja wtedy do dyspozycji caly ekran. Czytelnosci pilnuja weziej
   zakresy: --pole-szerokosc ogranicza pola edycyjne, a --tresc-miara akapity. Wczesniejsze
   max-width: 64rem na calej tresci zostawialo na szerokim monitorze pusty pas miedzy menu
   a trescia i marnowalo miejsce w tabelach. */
.redaktor .tresc { max-width: 100%; }

/* Kolumna nawigacji panelu zwiera sie na mniejszym ekranie, zamiast trzymac sztywne 15 rem
   kosztem tresci. Ponizej 60 rem uklad i tak schodzi do jednej kolumny. */
.redaktor .uklad { grid-template-columns: clamp(11rem, 16vw, 15rem) minmax(0, 1fr); }

/* Zwiniecie do jednej kolumny musi byc powtorzone dla panelu: regula .redaktor .uklad ma
   wyzsza szczegolowosc niz .uklad z zapytania medialnego wyzej, wiec sama by ja przebila
   i panel zostawal dwukolumnowy takze na telefonie - dwie kolumny po ok. 180 px. */
@media (max-width: 60rem) {
    .redaktor .uklad { grid-template-columns: 1fr; }
}

/* Panel bierze barwy z ukladu kolorystycznego wybranego dla serwisu (atrybut data-motyw
   na elemencie html), a nie ze stalej szarosci - redaktor pracuje w tych samych barwach,
   ktore widzi czytelnik Biuletynu. Pasek roli jest ciemniejszy od naglowka, wiec oba pasy
   pozostaja rozroznialne. Napisy sa biale: kontrast bieli wobec kazdej barwy akcentu
   przekracza 4.5:1 i sprawdza to test liczacy go wprost z tego arkusza. */
html:not(.kontrast) .redaktor .naglowek { background: var(--akcent); border-bottom-color: var(--akcent-ciemny); }
html:not(.kontrast) .redaktor .logo { border-left-color: rgba(255, 255, 255, 0.5); }
html:not(.kontrast) .redaktor .logo-nazwa,
html:not(.kontrast) .redaktor .logo-podmiot { color: #fff; }

/* Znak BIP jest czerwony, wiec na barwnym pasku panelu dostaje biala podkladke. */
.redaktor .znak-bip {
    background: #fff;
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
}

/* Pasek roli: dane zalogowanego po lewej, wylogowanie dosuniete do prawej krawedzi. */
.pasek-roli {
    background: var(--akcent-ciemny);
    color: #fff;
    font-size: 0.95rem;
    padding: 0.5rem 0;
}

.pasek-roli .ograniczenie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.pasek-roli a { color: #fff; }

.wyloguj { margin: 0 0 0 auto; }

/* Wylogowanie konczy sesje, wiec nie moze wygladac jak systemowy przycisk przegladarki
   doklejony pod tekstem. Biala obwodka na ciemnym pasku daje kontrast znacznie powyzej
   progu 3:1 wymaganego dla elementow interfejsu. */
.przycisk-wyloguj {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.35rem 1.1rem;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.przycisk-wyloguj:hover { background: #fff; color: var(--akcent-ciemny); }

.ikona-wyjscia {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Stopka panelu - oznaczenie wydania i wykonawcy. */
.stopka-panelu {
    margin-top: 2rem;
    padding: 1rem 0;
    border-top: 1px solid var(--ramka);
    background: var(--tlo-panel);
    color: var(--tekst-slaby);
    font-size: 0.9rem;
    text-align: center;
}

/* --- Powrot na poczatek strony ------------------------------------------------------------- */
/* Zwykla kotwica, bez JavaScriptu. Widoczna caly czas: pokazywanie jej dopiero po przewinieciu
   wymagaloby skryptu, a wtedy przy wylaczonym JavaScripcie nie byloby jej wcale. */
.do-gory {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.95rem;
    background: var(--akcent);
    color: var(--tlo);
    border: 2px solid var(--tlo);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
}

.do-gory:hover { background: var(--akcent-ciemny); text-decoration: underline; }

.do-gory-ikona {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Na waskim ekranie przycisk zostaje samym znakiem - inaczej zaslania tresc. */
@media (max-width: 30rem) {
    .do-gory { padding: 0.5rem; font-size: 0; gap: 0; }
    .do-gory-ikona { width: 1.4rem; height: 1.4rem; }
}

/* Podglad danych podmiotu - pary nazwa-wartosc, nie tabela. Ta sama miara co w stopce,
   zeby etykieta i wartosc stały w jednym wierszu az do waskiego ekranu. */
.dane-podmiotu {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) 1fr;
    gap: 0.4rem 1.5rem;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--ramka);
    background: var(--tlo-panel);
}

.dane-podmiotu dt { color: var(--tekst-slaby); }
.dane-podmiotu dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Brak wartosci nazwany wprost - w panelu redaktor ma widziec, czego jeszcze nie uzupelnil.
   Nie sama kursywa: znaczenie nie moze byc niesione wylacznie krojem ani barwa. */
.brak-wartosci { color: var(--tekst-slaby); font-weight: 400; font-style: italic; }

@media (max-width: 40rem) {
    .dane-podmiotu { grid-template-columns: 1fr; gap: 0.15rem; }
    .dane-podmiotu dd { margin-bottom: 0.6rem; }
}

/* --- Wzbogacenia panelu redakcyjnego ---------------------------------------------------- */
/* Elementy powstaja z JavaScriptu; bez niego formularz wyglada jak dotad. */

.przycisk-maly {
    padding: 0.25rem 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.pasek-zaznaczania {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.licznik-zaznaczen {
    margin: 0 0 0.75rem;
    color: var(--tekst-slaby);
    font-size: 0.9rem;
}

.pasek-narzedzi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--ramka);
    background: var(--tlo-panel);
}

/* Pole tresci przy wylaczonym JavaScripcie: zwykly obszar tekstowy z widocznym HTML-em.
   Z wlaczonym skryptem podmienia je edytor TinyMCE i ten arkusz go nie dotyczy. */
textarea[data-edytor] {
    font-family: ui-monospace, Consolas, monospace;
    line-height: 1.5;
}

/* --- Ograniczenie ruchu ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .kolumna-boczna, .kolumna-prawa, .szukajka, .pomin, .stopka-linki, .do-gory { display: none; }
    .uklad-trzy { grid-template-columns: 1fr; }
    .uklad { grid-template-columns: 1fr; }
}


/* --- Zaokraglenia narozników ---------------------------------------------------------------
   Trzy stopnie, sterowane z jednego miejsca: drobne elementy, pola i przyciski, wieksze
   bloki. Zmiana wartosci tutaj przenosi sie na caly serwis i na panel redakcyjny.

   Zaokraglenie jest CELOWO male. Biuletyn ma wygladac na urzedowy dokument, a nie na
   aplikacje - zaokraglone rogi maja zdjac ostrosc, a nie rzucac sie w oczy. Ustawienie
   zera przywraca poprzedni, kanciasty wyglad. */
input:not([type="checkbox"], [type="radio"]),
select,
textarea,
button,
.przycisk,
.przycisk-drugorzedny,
.przycisk-maly,
.przycisk-ostrzegawczy,
.przycisk-wyloguj,
.ul-przycisk,
.do-gory,
.pomin {
    border-radius: var(--zaokraglenie);
}

/* Pole wyszukiwarki styka sie z przyciskiem - zaokraglamy tylko krawedzie zewnetrzne,
   inaczej miedzy nimi powstaje szpara. */
.szukajka .szukajka-pole input {
    border-radius: var(--zaokraglenie) 0 0 var(--zaokraglenie);
}

.szukajka button {
    border-radius: 0 var(--zaokraglenie) var(--zaokraglenie) 0;
}

.menu,
.odnosniki,
.komunikat,
.metryka,
.zalaczniki,
.dane-podmiotu,
.ulatwienia,
.tabela-otoczka,
.mfa-konfiguracja,
.znak-wcag,
.pasek-narzedzi,
.pasek-zaznaczania,
.podpowiedz,
.artykul blockquote,
fieldset {
    border-radius: var(--zaokraglenie-duze);
}

.znacznik,
.znak-bip,
.mfa-klucz,
.ikona-pliku,
.licznik-zaznaczen {
    border-radius: var(--zaokraglenie-male);
}

/* Obraz kodu QR ma wlasne tlo - bez zaokraglenia rogi wystaja poza ramke bloku. */
.mfa-kod-qr img {
    border-radius: var(--zaokraglenie-male);
}

/* --- Edytor tresci ---------------------------------------------------------------------------
   Rozmiar okna edytora ustawia redaktor uchwytem w rogu. Ograniczenie szerokosci jest po to,
   zeby poszerzenie ponad kolumne panelu nie wywolalo poziomego przewijania calej strony. */
.tox-tinymce {
    max-width: 100%;
    border-radius: var(--zaokraglenie);
}