@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ============================================================
   Etykiety QR — arkusz stylów
   Materiał źródłowy: podkład z rolki etykiet, biały papier
   samoprzylepny, druk termiczny, pieczątka kontroli jakości.
   ============================================================ */

:root {
    /* podkład silikonowany, na którym leżą etykiety */
    --podklad:        #dde2e7;
    --podklad-ciemny: #c8d0d8;
    /* papier etykiety */
    --etykieta:       #ffffff;
    /* druk termiczny */
    --tusz:           #111418;
    --tusz-slaby:     #5c6672;
    /* powierzchnia odwrócona: pasek nawigacji, nagłówek tabeli, najechany
       przycisk. Osobny token, bo w trybie ciemnym „ciemne tło, jasny tekst”
       nie może brać ciemności z --tusz — tam --tusz jest KOLOREM TEKSTU
       i jest jasny, więc pasek zrobiłby się świecącą belką. */
    --kontra:         #111418;
    --kontra-tekst:   #ffffff;

    /* pieczątka kontroli */
    --stempel:        #1258a0;
    /* pieczątka odrzucenia */
    --odrzut:         #a4243b;
    --odrzut-tlo:     #f7e8ea;
    --zgoda-tlo:      #e4ecdf;
    --zgoda:          #2f5d2f;

    --naglowek: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
    --tekst:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --kod:      'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --promien: 3px;
    --cien: 0 1px 0 rgba(17, 20, 24, .06), 0 2px 8px rgba(17, 20, 24, .08);
    /* Karta bramy unosi się wyżej niż karty listy. Jako token, bo inaczej
       trzeba by go duplikować razem z całą paletą ciemną. */
    --cien-uniesiony: 0 2px 4px rgba(17, 20, 24, .08), 0 18px 44px rgba(17, 20, 24, .22);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 1rem 5rem;
    background: var(--podklad);
    color: var(--tusz);
    font-family: var(--tekst);
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

/* ---------- pasek nawigacji: taśma z nadrukiem ---------- */

.pasek {
    max-width: 68rem;
    margin: 0 auto 2rem;
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--kontra);
    color: var(--kontra-tekst);
    border-radius: 0 0 var(--promien) var(--promien);
}

.pasek__znak {
    font-family: var(--naglowek);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-right: auto;
}

.pasek a {
    /* --kontra-tekst, nie --etykieta.
    
       Oba są białe w trybie jasnym, więc pomyłki nie widać. W ciemnym
       --etykieta to kolor POWIERZCHNI karty i jest ciemna, a pasek stoi na
       --kontra, które ciemne pozostaje — odnośniki robiły się ciemnoszare
       na ciemnym tle i znikały.
    
       Reguła: --etykieta jako kolor tekstu jest poprawna WYŁĄCZNIE tam, gdzie
       tłem jest --stempel albo --odrzut, bo tamte dwa w trybie ciemnym
       jaśnieją. Na tle --kontra tekst bierze --kontra-tekst. */
    color: var(--kontra-tekst);
    text-decoration: none;
    font-family: var(--naglowek);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .35rem .1rem;
    border-bottom: 2px solid transparent;
}

.pasek a:hover,
.pasek a:focus-visible { border-bottom-color: var(--kontra-tekst); }

/* ---------- kontener treści ---------- */

main {
    max-width: 68rem;
    margin: 0 auto;
}

h1 {
    font-family: var(--naglowek);
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 2.75rem);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 .35rem;
}

h2 {
    font-family: var(--naglowek);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 2.5rem 0 1rem;
}

.podtytul {
    color: var(--tusz-slaby);
    margin: 0 0 2rem;
    max-width: 46ch;
}

/* ---------- komunikaty ---------- */

.komunikat, .blad {
    max-width: 68rem;
    margin: 0 auto 1.5rem;
    padding: .85rem 1.1rem;
    border-left: 4px solid;
    border-radius: 0 var(--promien) var(--promien) 0;
    font-weight: 500;
}

.komunikat { background: var(--zgoda-tlo); border-color: var(--zgoda); color: var(--zgoda); }
.blad      { background: var(--odrzut-tlo); border-color: var(--odrzut); color: var(--odrzut); }

/* ---------- etykiety na podkładzie: lista dokumentów ---------- */

.arkusz {
    display: grid;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.karta {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 1rem;
    align-items: center;
    background: var(--etykieta);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    padding: 1rem 1.15rem;
    /* nacięcie wykrojnika po lewej */
    border-left: 3px solid var(--podklad-ciemny);
}

.karta:has(input:checked) { border-left-color: var(--stempel); }

.karta__zaznacz {
    width: 1.35rem;
    height: 1.35rem;
    accent-color: var(--stempel);
    cursor: pointer;
}

.karta__qr {
    display: block;
    width: 72px;
    height: 72px;
    /* Biała otoczka to strefa cichości kodu QR — bez niej czytnik ma
       kłopot z odnalezieniem krawędzi. Tu jest dekoracyjna, ale utrzymuje
       ten sam kształt, który idzie na wydruk. */
    padding: 4px;
    background: var(--etykieta);
    border: 1px solid var(--podklad-ciemny);
    border-radius: 2px;
    image-rendering: pixelated;
}

.karta__tresc { min-width: 0; }

.karta__nazwa {
    font-family: var(--naglowek);
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: .02em;
    line-height: 1.2;
    margin: 0 0 .3rem;
    overflow-wrap: anywhere;
}

.karta__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    font-size: .85rem;
    color: var(--tusz-slaby);
    margin: 0;
}

.karta__token {
    font-family: var(--kod);
    font-size: .8rem;
    letter-spacing: .02em;
    color: var(--stempel);
    word-break: break-all;
}

.karta__akcje {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: flex-end;
}

/* ---------- przyciski i odnośniki-akcje ---------- */

/* Uwaga na swoistość: NIE dodawać tu selektora `button.przycisk`.
   Element + klasa (0,1,1) bije samą klasę (0,1,0), więc taki selektor
   unieważniłby wszystkie modyfikatory --glowny, --odrzut i --maly
   na elementach <button>, zostawiając je w wariancie podstawowym. */
.przycisk {
    display: inline-block;
    font-family: var(--naglowek);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: .6rem 1.1rem;
    min-height: 44px;
    line-height: 1.8;
    border: 2px solid var(--tusz);
    border-radius: var(--promien);
    background: transparent;
    color: var(--tusz);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.przycisk:hover,
.przycisk:focus-visible { background: var(--kontra); color: var(--kontra-tekst); }

.przycisk--glowny {
    background: var(--stempel);
    border-color: var(--stempel);
    color: var(--etykieta);
}

.przycisk--glowny:hover,
.przycisk--glowny:focus-visible { background: var(--kontra); border-color: var(--kontra); color: var(--kontra-tekst); }

.przycisk--odrzut { border-color: var(--odrzut); color: var(--odrzut); }

.przycisk--odrzut:hover,
.przycisk--odrzut:focus-visible { background: var(--odrzut); color: var(--etykieta); }

.przycisk--maly {
    font-size: .9rem;
    padding: .4rem .75rem;
    min-height: 38px;
    line-height: 1.6;
    border-width: 1px;
}

.pasek-akcji {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    padding: 1rem 1.15rem;
    background: var(--etykieta);
    border-radius: var(--promien);
    box-shadow: var(--cien);
}

.pasek-akcji__uwaga {
    color: var(--tusz-slaby);
    font-size: .9rem;
    margin: 0 auto 0 0;
}

/* ---------- formularze ---------- */

.formularz {
    background: var(--etykieta);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    padding: 1.5rem;
    max-width: 40rem;
}

.pole { display: block; margin: 0 0 1.25rem; }

.pole__etykieta {
    display: block;
    font-family: var(--naglowek);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 .35rem;
}

.pole__opis {
    display: block;
    font-size: .85rem;
    color: var(--tusz-slaby);
    margin: 0 0 .5rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
select {
    width: 100%;
    font-family: var(--tekst);
    font-size: 1rem;
    padding: .65rem .75rem;
    min-height: 44px;
    /* Białe, nie w kolorze podkładu. Szare wypełnienie na białej karcie
       formularza czyta się jak pole wyłączone — a to jest pole do wpisania. */
    background: var(--etykieta);
    border: 1px solid var(--podklad-ciemny);
    border-radius: var(--promien);
    color: var(--tusz);
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
.karta__zaznacz:focus-visible {
    outline: 3px solid var(--stempel);
    outline-offset: 2px;
}

/* ---------- wybór szablonu etykiet ---------- */

.szablony { display: grid; gap: .6rem; margin: 0 0 1.5rem; }

.szablon {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    background: var(--podklad);
    border: 1px solid var(--podklad-ciemny);
    border-radius: var(--promien);
    cursor: pointer;
}

.szablon:has(input:checked) {
    background: var(--etykieta);
    border-color: var(--stempel);
    box-shadow: inset 0 0 0 1px var(--stempel);
}

.szablon input { accent-color: var(--stempel); width: 1.2rem; height: 1.2rem; }

/* ---------- tabela kont ---------- */

.tabela {
    width: 100%;
    border-collapse: collapse;
    background: var(--etykieta);
    border-radius: var(--promien);
    overflow: hidden;
    box-shadow: var(--cien);
}

.tabela th {
    font-family: var(--naglowek);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
    padding: .8rem 1rem;
    background: var(--kontra);
    color: var(--kontra-tekst);
}

.tabela td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--podklad);
    vertical-align: middle;
}

.tabela tr:last-child td { border-bottom: 0; }

.rola {
    font-family: var(--kod);
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .2rem .5rem;
    border-radius: 2px;
    background: var(--podklad);
    color: var(--tusz-slaby);
}

.rola--admin { background: var(--stempel); color: var(--etykieta); }

/* ---------- pusty stan ---------- */

.pustka {
    background: var(--etykieta);
    border: 2px dashed var(--podklad-ciemny);
    border-radius: var(--promien);
    padding: 3rem 1.5rem;
    text-align: center;
    box-shadow: none;
}

.pustka p { color: var(--tusz-slaby); margin: 0 0 1.5rem; }

/* ============================================================
   Strony publiczne — to widzi człowiek stojący przy palecie
   z telefonem w ręku. Duże, kontrastowe, jedno przesłanie.
   ============================================================ */

.skan {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1.5rem;
    padding: 2rem 1.25rem;
    text-align: center;
}

.skan__tytul {
    font-family: var(--naglowek);
    font-weight: 700;
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    letter-spacing: .03em;
    text-transform: uppercase;
    margin: 0;
    max-width: 20ch;
}

.skan__tresc {
    color: var(--tusz-slaby);
    max-width: 34ch;
    margin: 0;
    font-size: 1.05rem;
}

.skan__obraz {
    max-width: 100%;
    height: auto;
    background: var(--etykieta);
    padding: .5rem;
    border-radius: var(--promien);
    box-shadow: var(--cien);
}

/* pieczątka — odbicie stempla na certyfikacie */
.stempel {
    font-family: var(--naglowek);
    font-weight: 700;
    font-size: clamp(1.6rem, 8vw, 2.75rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--odrzut);
    border: 5px solid var(--odrzut);
    border-radius: 6px;
    padding: .6rem 1.4rem;
    transform: rotate(-6deg);
    opacity: .88;
    /* nierówność tuszu: stempel nigdy nie odbija się idealnie */
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}

.stempel--nieznany { color: var(--tusz-slaby); border-color: var(--tusz-slaby); }

/* ---------- telefon ---------- */

@media (max-width: 40rem) {
    .pasek {
        flex-wrap: wrap;
        gap: .75rem 1.1rem;
        border-radius: 0;
        margin-left: -1rem;
        margin-right: -1rem;
        padding: .9rem 1rem;
    }

    .pasek__znak { flex-basis: 100%; margin-right: 0; }

    .karta {
        grid-template-columns: auto auto 1fr;
        row-gap: .75rem;
    }

    .karta__akcje {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .pasek-akcji { flex-direction: column; align-items: stretch; }
    .pasek-akcji__uwaga { margin: 0 0 .25rem; }
    .przycisk { width: 100%; }
    .karta__akcje .przycisk { width: auto; }
}

/* ---------- szacunek dla ustawień systemowych ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .pasek, .pasek-akcji, .karta__akcje { display: none; }
    body { background: #fff; }
}

/* ==========================================================================
   Brama — ekrany sprzed zalogowania
   ==========================================================================

   Sama karta na podkładzie, bez tła. Był tu wcześniej arkusz A4 z pustymi
   etykietami; zdjęty na życzenie — rozpraszał, zamiast tłumaczyć.

   Nie ma tu też układu dwudzielnego, mimo że tak robi dziś większość paneli.
   Druga kolumna musiałaby czymś być, a przy dwóch polach i jednym przycisku
   wypełniałaby pół ekranu dekoracją.
   ========================================================================== */

.brama {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    /* align-CONTENT, nie align-ITEMS. To pierwsze ustawia ścieżkę siatki
       wewnątrz kontenera, drugie — element wewnątrz ścieżki. Kontener rośnie
       tu przez min-height, ale ścieżka pozostaje wysokości treści i siedzi
       przy górnej krawędzi; wyśrodkowanie elementu w takiej ścieżce nie
       zmienia niczego. Sprawdzone pomiarem: odstęp 104 px u góry przy 358 px
       u dołu, mimo poprawnie policzonego `align-items`.
       
       `safe` sprawia, że przy karcie wyższej od okna wyśrodkowanie ustępuje
       miejsca — inaczej górna krawędź chowa się poza obszarem przewijania. */
    align-content: safe center;
    /* W pionie ustawiamy ŚCIEŻKĘ (align-content), w poziomie ELEMENT
       w ścieżce (justify-items) — i te dwie własności muszą być właśnie tak
       dobrane. `justify-content: center` zwężało ścieżkę do szerokości treści,
       więc `width: min(30rem, 100%)` liczyło 100% od tej zwężonej ścieżki
       i karta wychodziła 274 px zamiast 480. Wyglądało to na źle dobraną
       szerokość, a było zapętleniem: szerokość zależała od siebie samej. */
    justify-items: center;
    padding: 2rem 1.25rem;
    background: var(--podklad);
}

/* ---------- zadrukowana etykieta z formularzem ---------- */

.brama__tresc {
    position: relative;
    z-index: 1;
    /* 24rem wystarczało, dopóki karta leżała na arkuszu pustych etykiet:
       miała czytać się jako jedna z nich, więc musiała być od niego wyraźnie
       mniejsza. Bez arkusza nie ma do czego jej przymierzyć i zostaje sama
       wąska karta na pustym polu. */
    width: min(30rem, 100%);
}

.wejscie {
    background: var(--etykieta);
    border-radius: var(--promien);
    /* To samo nacięcie wykrojnika, co na kartach dokumentów — ekran
       logowania i lista dokumentów mają być tym samym materiałem. */
    border-left: 3px solid var(--stempel);
    box-shadow: var(--cien-uniesiony);
    padding: 2.5rem 2.25rem 2rem;
}

.wejscie__nadruk {
    margin: 0 0 1.5rem;
    font-family: var(--kod);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tusz-slaby);
}

.wejscie__nadruk::before {
    content: "";
    display: inline-block;
    width: .5em;
    height: .5em;
    margin-right: .6em;
    background: var(--stempel);
    vertical-align: baseline;
}

.wejscie__tytul {
    margin: 0 0 .35rem;
    font-family: var(--naglowek);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.01em;
    color: var(--tusz);
}

.wejscie__opis {
    margin: 0 0 1.75rem;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--tusz-slaby);
}

.wejscie__tytul + .formularz { margin-top: 1.75rem; }

/* Formularz jest tu już wewnątrz karty — bez tego dostaje własne tło,
   cień i padding, czyli karta w karcie. */
.wejscie .formularz {
    margin: 0;
    max-width: none;
    padding: 0;
    background: none;
    box-shadow: none;
}

/* Wersaliki w kroju wąskim to język tej aplikacji, ale na ekranie z dwoma
   polami nagłówek, obie etykiety i przycisk krzyczą naraz. Etykiety pól
   schodzą tu o pół tonu, żeby zostało słychać nagłówek. */
.wejscie .pole__etykieta {
    font-family: var(--tekst);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--tusz-slaby);
}

.wejscie .przycisk--glowny {
    width: 100%;
    justify-content: center;
    margin-top: .5rem;
}

/* ---------- drobne linie pod formularzem ---------- */

.brama__odnosniki {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    /* Linia cięcia — ta sama, którą oddziela się etykietę od etykiety. */
    border-top: 1px solid var(--podklad);
    font-size: .85rem;
    text-align: center;
    color: var(--tusz-slaby);
}

.brama__odnosniki:empty { display: none; }

.brama__odnosniki p { margin: 0 0 .4rem; }
.brama__odnosniki p:last-child { margin-bottom: 0; }

.brama__odnosniki a {
    color: var(--stempel);
    font-weight: 600;
    text-decoration-color: var(--podklad-ciemny);
    text-underline-offset: 3px;
}

.brama__odnosniki a:hover,
.brama__odnosniki a:focus-visible { text-decoration-color: currentColor; }

.brama__stopka {
    margin: 1.25rem 0 0;
    font-family: var(--kod);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    color: var(--tusz-slaby);
    opacity: .75;
}

/* ---------- zapamiętanie sesji ---------- */

.zapamietaj {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin: 0 0 1.25rem;
    font-size: .9rem;
    color: var(--tusz-slaby);
    cursor: pointer;
}

.zapamietaj input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--stempel);
    cursor: pointer;
}

/* ---------- ekrany niskie i telefony ---------- */

@media (prefers-reduced-motion: no-preference) {
    .wejscie { animation: wejscie-podniesienie .32s ease-out both; }
}

@keyframes wejscie-podniesienie {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Tryb ciemny
   ==========================================================================

   Cała aplikacja, nie sam ekran logowania — arkusz jest otokenizowany, więc
   wystarczy przedefiniować paletę.

   Metafora się tu przesuwa i to jest świadome. W dzień patrzysz na etykiety
   leżące na podkładzie; w nocy patrzysz na ekran w słabo oświetlonej hali.
   Utrzymywanie białych kart na ciemnym tle dałoby latarkę w twarz —
   dosłowność metafory nie jest warta oślepiania człowieka na nocnej zmianie.

   Zostaje to, co niesie znaczenie: granatowy stempel, czerwień odrzutu,
   nacięcie wykrojnika na krawędzi karty.
   ========================================================================== */

/* ==========================================================================
   Paleta ciemna — dwa wejścia, jeden zestaw wartości
   ==========================================================================

   Pierwsze wejście: ustawienie systemu, gdy człowiek nie wybrał nic ręcznie.
   Warunek `:not([data-motyw="jasny"])` sprawia, że świadomy wybór jasnego
   wygrywa z ustawieniem systemu — bez niego przełącznik nie umiałby wymusić
   jasnego na komputerze ustawionym na ciemny.

   Drugie wejście: wybór zapisany w ciasteczku i wstawiony przez serwer
   w atrybut <html data-motyw>.

   Wartości muszą być w obu miejscach IDENTYCZNE, a CSS nie pozwala objąć
   jedną regułą selektora spoza @media. Dlatego blok jest zduplikowany
   i oznaczony znacznikami @paleta-ciemna, a zgodności obu kopii pilnuje
   test MotywTest::testObieKopiePaletyCiemnejSaIdentyczne.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-motyw="jasny"]) {
        /* @paleta-ciemna:start */
        /* Bez tego przeglądarka rysuje pola wyboru, paski przewijania
           i pola tekstowe w wersji jasnej — na ciemnej karcie zostaje
           świecący biały kwadrat, którego żaden własny styl nie dosięga. */
        color-scheme: dark;

        --podklad:        #12161a;
        --podklad-ciemny: #2c333d;
        --etykieta:       #1c2128;
        --tusz:           #e6ebf1;
        --tusz-slaby:     #98a3b1;

        /* Powierzchnia odwrócona zostaje ciemna — jaśniejsza od strony,
           żeby pasek nawigacji dało się od niej odróżnić, ale nie świecąca. */
        --kontra:         #2a323c;
        --kontra-tekst:   #eef2f7;

        /* Granat z palety dziennej na ciemnym tle schodzi poniżej progu
           czytelności, więc stempel i odrzut idą w górę jasności. Odcień
           zostaje ten sam — to nadal ta sama pieczątka. */
        --stempel:        #6fa9f0;
        --odrzut:         #f08c9a;
        --odrzut-tlo:     #2c1a1e;
        --zgoda:          #8dc78d;
        --zgoda-tlo:      #1a271a;

        /* Cień na ciemnym tle prawie nie istnieje — uniesienie musi wziąć
           na siebie krawędź. */
        --cien: 0 0 0 1px rgba(255, 255, 255, .06), 0 2px 10px rgba(0, 0, 0, .5);
        --cien-uniesiony: 0 0 0 1px rgba(255, 255, 255, .07), 0 18px 44px rgba(0, 0, 0, .6);
        /* @paleta-ciemna:end */
    }
}

:root[data-motyw="ciemny"] {
    /* @paleta-ciemna:start */
    /* Bez tego przeglądarka rysuje pola wyboru, paski przewijania
       i pola tekstowe w wersji jasnej — na ciemnej karcie zostaje
       świecący biały kwadrat, którego żaden własny styl nie dosięga. */
    color-scheme: dark;

    --podklad:    #12161a;
    --podklad-ciemny: #2c333d;
    --etykieta:       #1c2128;
    --tusz:       #e6ebf1;
    --tusz-slaby:     #98a3b1;

    /* Powierzchnia odwrócona zostaje ciemna — jaśniejsza od strony,
       żeby pasek nawigacji dało się od niej odróżnić, ale nie świecąca. */
    --kontra:     #2a323c;
    --kontra-tekst:   #eef2f7;

    /* Granat z palety dziennej na ciemnym tle schodzi poniżej progu
       czytelności, więc stempel i odrzut idą w górę jasności. Odcień
       zostaje ten sam — to nadal ta sama pieczątka. */
    --stempel:    #6fa9f0;
    --odrzut:     #f08c9a;
    --odrzut-tlo:     #2c1a1e;
    --zgoda:      #8dc78d;
    --zgoda-tlo:      #1a271a;

    /* Cień na ciemnym tle prawie nie istnieje — uniesienie musi wziąć
       na siebie krawędź. */
    --cien: 0 0 0 1px rgba(255, 255, 255, .06), 0 2px 10px rgba(0, 0, 0, .5);
    --cien-uniesiony: 0 0 0 1px rgba(255, 255, 255, .07), 0 18px 44px rgba(0, 0, 0, .6);
    /* @paleta-ciemna:end */
}

/* Wydruk zawsze na papierze, niezależnie od ustawień ekranu. Bez tego
   przeglądarka w trybie ciemnym drukowałaby ciemne tła. */
@media print {
    :root {
        --podklad: #ffffff;
        --podklad-ciemny: #cccccc;
        --etykieta: #ffffff;
        --tusz: #000000;
        --tusz-slaby: #444444;
        --kontra: #000000;
        --kontra-tekst: #ffffff;
    }
}

/* ==========================================================================
   Przełącznik motywu
   ==========================================================================

   Formularz, nie przycisk skryptowy — patrz komentarz klasy
   App\Controllers\Motyw. Wygląda inaczej w pasku nawigacji, a inaczej na
   ekranach sprzed zalogowania, więc bazowa klasa jest neutralna, a wygląd
   nadaje kontekst.
   ========================================================================== */

.motyw { margin: 0; }

.motyw__przycisk {
    font-family: var(--naglowek);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

/* ---------- w pasku nawigacji ---------- */

.pasek .motyw__przycisk {
    font-size: 1.05rem;
    color: var(--kontra-tekst);
    padding: .35rem .1rem;
    border-bottom: 2px solid transparent;
}

.pasek .motyw__przycisk:hover,
.pasek .motyw__przycisk:focus-visible { border-bottom-color: var(--kontra-tekst); }

/* Stan bieżący odróżniamy od słowa „Motyw”, żeby dało się go odczytać
   jednym spojrzeniem, bez czytania całej etykiety. */
.pasek .motyw__stan { color: var(--stempel); }

/* ---------- pod kartą logowania ---------- */

.brama .motyw {
    margin-top: 1.5rem;
    text-align: center;
}

.brama .motyw__przycisk {
    font-family: var(--kod);
    font-size: .7rem;
    letter-spacing: .1em;
    color: var(--tusz-slaby);
    text-transform: uppercase;
    padding: .4rem;
}

.brama .motyw__przycisk:hover,
.brama .motyw__przycisk:focus-visible { color: var(--tusz); }

/* Wydruk nie ma czego przełączać. */
@media print {
    .motyw { display: none; }
}