/* ==========================================================================
   STRONY SKŁADANE PO STRONIE SERWERA: regulamin, polityka, FAQ i 404.

   ARKUSZ, A NIE `<style>` W DOKUMENCIE. Polityka bezpieczeństwa serwisu ma
   `style-src 'self'` bez `unsafe-inline`, więc styl wpisany do dokumentu był
   przez przeglądarkę BLOKOWANY: strony wychodziły surowe, czcionką z domyślnych
   ustawień przeglądarki. Lokalnie tego nie widać, bo nagłówków polityki nie ma
   przy `vite preview`; na produkcji widać od razu. Plik z tego samego adresu
   przechodzi bez ruszania polityki, a poluzowanie jej dla wygody jednego
   arkusza otworzyłoby ją dla wszystkiego.
   ========================================================================== */

/* PALETA — WŁASNA KOPIA, i to jest świadome.
 *
 * Ten arkusz jedzie do stron składanych przez serwer, które NIE wczytują
 * `src/style.css`: mają być lekkie i czytelne bez JavaScriptu, a tamten
 * arkusz waży 85 KB i opisuje aplikację, nie dokument prawny. Nie da się
 * więc sięgnąć po tamte zmienne i nie ma po co.
 *
 * Wartości stały tu jednak wpisane WPROST, w dwudziestu jeden miejscach:
 * `#8553F9` cztery razy, `#333` cztery razy, `#fff` pięć. Zmiana marki
 * znaczyła przeszukiwanie pliku i nadzieję, że nic się nie przeoczy —
 * a rozjazd z aplikacją nie dawał żadnego objawu poza tym, że regulamin
 * wygląda „jakoś inaczej".
 *
 * Nazwy są TE SAME co w `src/style.css`, żeby dało się je zestawić okiem
 * i testem. Pilnuje tego strażnik w `src/regulyCss.test.js`: rozjazd
 * któregokolwiek koloru marki przewraca bramkę.
 */
:root {
    --bg-color: #8553F9;
    --violet-light: #b39afc;
    --text-white: #FFFFFF;
    --text-gray: #999999;
    --gray-line: #333333;
    --gray-300: #cccccc;
    --tlo-strony: #141414;
    --tlo-karty: #1A1A1A;

    /* SKALA PISMA — z tego samego powodu co paleta, i z tą samą zasadą nazw.
     *
     * Do 2026-08-25 wszystkie dziesięć rozmiarów stało tu w PIKSELACH, choć
     * cała aplikacja przeszła na `rem` właśnie po to, żeby uszanować
     * ustawioną w przeglądarce wielkość pisma. Rozmiar w pikselach tego
     * ustawienia NIE słucha — a to są akurat strony, na których czyta się
     * długi tekst prawny, czyli ostatnie miejsce, gdzie wolno odebrać komuś
     * powiększenie.
     *
     * Nazwy kroków są te same, co w `src/style.css`; strażnik w
     * `src/regulyCss.test.js` pilnuje, żeby wspólne kroki niosły tę samą
     * wartość. Dwa kroki (22 i 24) są tylko tutaj — dokument ma inną
     * hierarchię nagłówków niż aplikacja i nie ma powodu dokładać ich tamtej
     * skali „na zapas". */
    --fs-13: 0.8125rem;     /* 13px */
    --fs-14: 0.875rem;      /* 14px */
    --fs-15: 0.9375rem;     /* 15px */
    --fs-15-5: 0.96875rem;  /* 15.5px */
    --fs-16: 1rem;          /* 16px */
    --fs-17: 1.0625rem;     /* 17px */
    --fs-22: 1.375rem;      /* 22px */
    --fs-24: 1.5rem;        /* 24px */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--tlo-strony);
    color: var(--text-white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

header {
    background: var(--bg-color);
    padding: 16px 6vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
header a.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-white);
    font-weight: 800;
    font-size: var(--fs-24);
    text-decoration: none;
    letter-spacing: -.5px;
}
header a.logo img,
header a.logo .brand-mark { width: 40px; height: 40px; }

/* NAZWA I ZNACZNIK WERSJI JAKO KOLUMNA, tak samo jak w aplikacji.
   Te same nazwy klas co w `src/style.css`, bo markup nagłówka jest tam
   i tutaj identyczny; wartości są przepisane, bo tamtego arkusza te strony
   nie wczytują (patrz komentarz przy palecie na górze pliku). */
header a.logo .brand-tekst {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
header a.logo .brand-beta {
    padding: 1px 7px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 100px;
    font-size: var(--fs-10);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: lowercase;
    opacity: .75;
    white-space: nowrap;
    line-height: 1.4;
}
header a.app {
    color: var(--text-white);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--fs-14);
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 100px;
    padding: 8px 18px;
    white-space: nowrap;
}

main { max-width: 820px; margin: 0 auto; padding: 56px 5vw 96px; }
h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -1px; line-height: 1.15; margin-bottom: 8px; }
.updated { color: var(--text-gray); font-size: var(--fs-14); margin-bottom: 40px; }
h2 { font-size: var(--fs-22); margin: 36px 0 12px; letter-spacing: -.5px; }
h3 { font-size: var(--fs-17); margin: 24px 0 8px; }
p, li { color: var(--gray-300); font-size: var(--fs-15-5); }
p { margin-bottom: 12px; }
ul, ol { padding-left: 24px; margin-bottom: 12px; }
a { color: var(--violet-light); }

/* AKORDEON TAKI SAM JAK W MODALU FAQ APLIKACJI (`.faq-item` w src/style.css).
   Strona `/faq` pokazywała domyślny trójkącik przeglądarki i inne tło, więc
   ta sama treść wyglądała w dwóch miejscach jak dwa różne produkty. Wartości
   są przepisane z tamtego arkusza, bo te strony go nie wczytują. */
details {
    background: rgba(255, 255, 255, .03);
    border: none;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 12px;
    transition: background .2s;
}
details[open] { background: rgba(255, 255, 255, .08); }
summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-white);
    font-size: var(--fs-15);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
    content: '+';
    font-size: var(--fs-20);
    font-weight: 400;
    color: var(--text-gray);
    transition: transform .3s;
}
details[open] summary::after { content: '−'; transform: rotate(180deg); }
/* Pytanie w FAQ jest nagłówkiem h2 (patrz trasa /faq), więc trzeba mu odebrać
   marginesy i rozmiar zwykłego h2, inaczej rozpycha wiersz akordeonu. Wygląd
   zostaje taki, jak był; zmienia się ranga w dokumencie, nie widok. */
summary h2 { display: inline; font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0; }
/* Trójkącik rozwijania rysuje `<summary>`; gdy w środku jest element blokowy,
   część przeglądarek przenosi go do nowej linii. `display: inline` wyżej temu
   zapobiega, ale tylko wtedy, gdy sam znacznik zachowa domyślny marker. */
details div { padding-top: 10px; }

footer {
    border-top: 1px solid var(--gray-line);
    padding: 24px 6vw;
    color: var(--text-gray);
    font-size: var(--fs-13);
    text-align: center;
}
footer a { color: var(--gray-300); text-decoration: none; margin: 0 8px; }

/* --------------------------------------------------------------------------
   STRONA 404

   Człowiek trafia tu ze starego linku albo z literówki i nie jest niczemu
   winien. Zamiast ściany z komunikatem dostaje jedno zdanie i drogę powrotną:
   dwa przyciski, w które da się trafić palcem.
   -------------------------------------------------------------------------- */

.blad {
    min-height: 52vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
}
.blad-kod {
    font-size: clamp(64px, 14vw, 128px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -4px;
    /* Sama liczba, wygaszona: ma być tłem dla zdania, a nie krzykiem. */
    color: rgba(255, 255, 255, .12);
}
.blad h1 { margin: 0; }
.blad p { max-width: 46ch; margin: 8px 0 0; }
.blad-adres {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-14);
    color: var(--violet-light);
    background: var(--tlo-karty);
    border: 1px solid var(--gray-line);
    border-radius: 8px;
    padding: 4px 10px;
    display: inline-block;
    margin-top: 4px;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.blad-wyjscia {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
}
.blad-wyjscia a {
    text-decoration: none;
    font-weight: 700;
    font-size: var(--fs-15);
    border-radius: 100px;
    padding: 12px 24px;
    border: 1px solid var(--gray-line);
    color: var(--text-white);
}
.blad-wyjscia a.glowne {
    background: var(--bg-color);
    border-color: var(--bg-color);
}