/*
  Kopia src/controls/styles/fonts.css z aplikacji (pk/design-integracja 77ad70f), różni się tylko
  adresami plików: eleventy.config.js kopiuje je z node_modules do /fonty/.

  Fonty hostowane razem ze stroną (@fontsource-variable), nie z fonts.googleapis.com: font
  z Google wysyłałby adres IP każdego odwiedzającego do Google (RODO), a plik mógłby się zmienić bez
  naszej wiedzy. Wersja fontu idzie z package.json jak każda inna paczka.

  Figtree — interfejs (--so-font-family), Bricolage Grotesque — nagłówki i duże liczby
  (--so-font-brand). Oba w wersji zmiennej: jeden plik na podzbiór znaków obsługuje każdą grubość
  (Figtree 300–900, Bricolage 200–800), więc 650 z typografii nie jest zaokrąglane do 600 czy 700.

  Reguły @font-face są tu, a nie przez @import arkusza paczki, bo arkusz Bricolage ładuje też
  podzbiór wietnamski. Tylko latin i latin-ext: polskie ą ć ę ł ń ś ź ż są w latin-ext
  (U+0100–02BA), ó w latin (U+0000–00FF). Zakresy unicode-range przepisane z unicode.json paczek.

  Bricolage z osią opsz (plik „opsz” ma osie opsz i wght): przeglądarka dobiera krój optyczny
  do rozmiaru, a nagłówki 22–36 px mają wyglądać jak w makietach Design, które ładowały opsz.
  Plik samej osi wght jest zamrożony na rozmiarze tekstowym.
*/
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/fonty/figtree-latin-ext-wght-normal.woff2')
    format('woff2-variations');
  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: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('/fonty/figtree-latin-wght-normal.woff2')
    format('woff2-variations');
  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;
}

@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonty/bricolage-grotesque-latin-ext-opsz-normal.woff2')
    format('woff2-variations');
  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: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonty/bricolage-grotesque-latin-opsz-normal.woff2')
    format('woff2-variations');
  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;
}

/*
  Tokeny kontrolek SO — wartości domyślne, jasny motyw.

  :where() zeruje specyficzność: aplikacja nadpisuje token zwykłym :root i nie musi pilnować
  kolejności arkuszy. Ciemny motyw i wysoki kontrast ustawia aplikacja (klasy .app-dark,
  .app-high-contrast na <html>). Kontrolki biorą kolory, promienie i wymiary tylko stąd.

  Kolory to role Material 3 w OKLCH: jasność (L) jest stała dla roli i trybu, nasycenie to C roli
  razy --so-k palety, odcień to --so-h palety (role tertiary: --so-h3). OKLCH jest percepcyjne —
  ta sama L daje w każdym odcieniu prawie tę samą luminancję — więc kontrast par tekst/tło nie
  zależy od palety. Wartości L i C z propozycji Design (mojeoceny-redesign, docs/tokeny.md).
  Trójkę palety wpisuje aplikacja na <html>; tutaj stoi domyślna, wyliczona z #2f74f0.

  Dawne nazwy (--so-fg, --so-border, --so-highlight, --so-danger…) zostają jako aliasy ról:
  kontrolki i ekrany używają ich w kilkuset miejscach. Tryby nadpisują tylko role, aliasy idą
  za nimi same.

  Tryb na fragmencie strony: klasy .so-theme-light, .so-theme-dark i .so-theme-contrast (razem
  z jedną z dwóch pierwszych), opis przy bloku ról niżej.
*/
:where(:root) {
  /* paleta: odcień przewodni, odcień akcentu, mnożnik nasycenia */
  --so-h: 261;
  --so-h3: 60;
  --so-k: 1;

  /* Figtree w interfejsie, Bricolage Grotesque w nagłówkach i dużych liczbach (fonts.css) */
  --so-font-family: 'Figtree Variable', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --so-font-brand:
    'Bricolage Grotesque Variable', 'Figtree Variable', ui-sans-serif, system-ui, 'Segoe UI',
    sans-serif;
}

/*
  Role kolorów i wszystko, co z nich wynika: aliasy, pole, tabela, fokus i cienie. Blok ma też
  klasy .so-theme-light i .so-theme-dark. Element z jedną z nich pokazuje swój tryb niezależnie
  od klas na <html>, np. podgląd etykiety oceny w trzech motywach naraz. Ciemne wartości dokłada
  .so-theme-dark w _dark.scss aplikacji, wysoki kontrast .so-theme-contrast w _a11y.scss.

  Aliasy muszą stać w tym samym bloku co role: var() w zmiennej liczy się na elemencie, który ją
  deklaruje, więc alias odziedziczony z <html> wskazywałby rolę z trybu strony. Paleta (--so-h,
  --so-k) zostaje na <html>, więc fragment ma te same barwy w innym trybie. Komponenty Materiala
  we fragmencie biorą kolory z trybu strony, bo most w _material.scss stoi na <html>.
*/
:where(:root, .so-theme-light, .so-theme-dark) {
  /* role kolorów */
  --so-primary: oklch(0.47 calc(0.13 * var(--so-k)) var(--so-h));
  --so-on-primary: oklch(1 0 0);
  --so-primary-container: oklch(0.9 calc(0.07 * var(--so-k)) var(--so-h));
  --so-on-primary-container: oklch(0.31 calc(0.09 * var(--so-k)) var(--so-h));
  --so-secondary: oklch(0.48 calc(0.05 * var(--so-k)) var(--so-h));
  --so-on-secondary: oklch(1 0 0);
  --so-secondary-container: oklch(0.91 calc(0.04 * var(--so-k)) var(--so-h));
  --so-on-secondary-container: oklch(0.3 calc(0.045 * var(--so-k)) var(--so-h));
  --so-tertiary: oklch(0.5 calc(0.12 * var(--so-k)) var(--so-h3));
  --so-on-tertiary: oklch(1 0 0);
  --so-tertiary-container: oklch(0.91 calc(0.06 * var(--so-k)) var(--so-h3));
  --so-on-tertiary-container: oklch(0.33 calc(0.08 * var(--so-k)) var(--so-h3));
  --so-error: oklch(0.51 0.19 27);
  --so-on-error: oklch(1 0 0);
  --so-error-container: oklch(0.93 0.045 27);
  --so-on-error-container: oklch(0.37 0.13 27);

  --so-surface: oklch(0.985 calc(0.007 * var(--so-k)) var(--so-h));
  --so-surface-container-lowest: oklch(1 0 0);
  --so-surface-container-low: oklch(0.968 calc(0.012 * var(--so-k)) var(--so-h));
  --so-surface-container: oklch(0.952 calc(0.017 * var(--so-k)) var(--so-h));
  --so-surface-container-high: oklch(0.934 calc(0.022 * var(--so-k)) var(--so-h));
  --so-surface-container-highest: oklch(0.914 calc(0.027 * var(--so-k)) var(--so-h));
  --so-on-surface: oklch(0.23 calc(0.02 * var(--so-k)) var(--so-h));
  --so-on-surface-variant: oklch(0.42 calc(0.025 * var(--so-k)) var(--so-h));
  --so-outline: oklch(0.56 calc(0.025 * var(--so-k)) var(--so-h));
  --so-outline-variant: oklch(0.85 calc(0.02 * var(--so-k)) var(--so-h));
  --so-inverse-surface: oklch(0.31 calc(0.02 * var(--so-k)) var(--so-h));
  --so-inverse-on-surface: oklch(0.95 calc(0.01 * var(--so-k)) var(--so-h));
  --so-inverse-primary: oklch(0.8 calc(0.1 * var(--so-k)) var(--so-h));
  --so-scrim: oklch(0.15 0.01 var(--so-h) / 0.42);
  --so-shadow: oklch(0.25 0.03 var(--so-h) / 0.16);

  /* Najechanie i wciśnięcie koloru przewodniego. Krok jasności w stronę mocniejszego kontrastu
     z --so-on-primary: w jasnym motywie ciemniej, w ciemnym jaśniej. */
  --so-primary-hover: oklch(0.42 calc(0.13 * var(--so-k)) var(--so-h));
  --so-primary-active: oklch(0.38 calc(0.12 * var(--so-k)) var(--so-h));

  /* Stany i komunikaty. Design ich nie ma, więc są w tej samej konwencji co error: stały odcień
     i nasycenie, stała jasność w danym trybie. Jasność dobrana tak, żeby tekst miał ≥ 4,5:1 na
     każdej powierzchni od surface do surface-container-highest, w każdej palecie; zieleń
     i błękit przy jasności błędu (0,51) miały na highest tylko 4,2–4,4:1, stąd 0,48 i 0,49. */
  --so-success: oklch(0.48 0.13 150);
  --so-warn: oklch(0.5 0.115 60);
  --so-info: oklch(0.49 0.11 240);

  /* Aliasy dawnych nazw. Hierarchia jak w Design: tło aplikacji to surface-container, karta
     (surface) jest od niego jaśniejsza. */
  --so-ground: var(--so-surface-container);
  /* Panele nad treścią (toast, menu, listy rozwijane, popover, kalendarz). W Design leżą na
     surface-container nad jaśniejszym panelem treści (surface), ale dopóki nie ma nowej powłoki,
     treść stoi wprost na tle aplikacji — w tym samym kolorze — i panel zlewał się z tłem. Stąd
     najjaśniejsza powierzchnia; w ciemnym motywie o stopień jaśniejsza od tła (_dark.scss). */
  --so-overlay: var(--so-surface-container-lowest);
  /* Tło po najechaniu i tło wydzielonej sekcji na karcie. O stopień nad --so-overlay, żeby
     najechana pozycja listy była widoczna także w panelu rozwijanym. */
  --so-surface-hover: var(--so-surface-container-high);
  /* Separator. Nie wystarcza jako jedyna granica kontrolki (w jasnym motywie ok. 1,5:1 do karty)
     — do tego --so-field-border. */
  --so-border: var(--so-outline-variant);
  --so-border-width: 1px;
  --so-fg: var(--so-on-surface);
  --so-fg-muted: var(--so-on-surface-variant);
  --so-highlight: var(--so-primary-container);
  --so-highlight-fg: var(--so-on-primary-container);
  --so-primary-contrast: var(--so-on-primary);
  --so-danger: var(--so-error);
  --so-mask: var(--so-scrim);

  /* Pole formularza. Ramka to outline (≥ 3,6:1 do każdej powierzchni, WCAG 1.4.11), najechanie
     i placeholder jak w polu Materiala (on-surface, on-surface-variant). Tło pola to karta:
     pole Materiala w wariancie outline jest przezroczyste i stoi zwykle na karcie, a własne
     kontrolki potrzebują kryjącego tła pod etykietą na ramce. Wyłączone pole: tło o stopień
     ciemniejsze, tekst w kolorze ramki (≥ 3:1, w wysokim kontraście wyraźnie więcej). */
  --so-field-bg: var(--so-surface);
  --so-field-fg: var(--so-on-surface);
  --so-field-border: var(--so-outline);
  --so-field-border-hover: var(--so-on-surface);
  --so-field-border-focus: var(--so-primary);
  --so-field-placeholder: var(--so-on-surface-variant);
  --so-field-disabled-bg: var(--so-surface-container-high);
  --so-field-disabled-fg: var(--so-outline);
  --so-field-radius: var(--so-radius-field);
  /* Tło tabeli i paginatora: na karcie tło karty, w dialogu tło dialogu (_material.scss). Tabela
     na jaśniejszym tle niż dialog wyglądała jak ramka w ramce. */
  --so-table-bg: var(--so-surface);
  /* Nagłówek tabeli o stopień ciemniejszy od wierszy, jak w Design (docs/tokeny.md). Przy tym samym
     tle co wiersze i panel treści tabela zlewała się z panelem, odcinała ją tylko cienka ramka. */
  --so-table-header-bg: var(--so-surface-container-low);

  /* fokus */
  --so-focus-ring-color: var(--so-primary);
  --so-focus-ring-width: 2px;
  --so-focus-ring-offset: 2px;

  /* Elewacje: karty i tabele są płaskie i odcinają się tonem tła, cień ma tylko to, co leży nad
     treścią — 1: pasek przyklejony do krawędzi, 2: menu i lista rozwijana, 3: dialog. */
  --so-elev-1: 0 1px 2px var(--so-shadow);
  --so-elev-2: 0 1px 2px var(--so-shadow), 0 4px 12px 2px var(--so-shadow);
  --so-elev-3: 0 2px 6px var(--so-shadow), 0 12px 32px 4px var(--so-shadow);
  --so-shadow-overlay: var(--so-elev-2);
  --so-shadow-modal: var(--so-elev-3);
}

:where(:root) {
  /* gęstość — kompaktowa, bo użytkownicy zgłaszali, że widzą za mało naraz. W rem, więc rośnie
     razem ze skalą czcionki; 2rem to też minimalne pole kliknięcia (32 px przy skali 1). */
  --so-field-height: 2rem;
  --so-control-font-size: 0.875rem;
  --so-control-line-height: 1.25rem;
  --so-hit-area: 2rem;
  --so-row-height: 2.5rem;
  /* wysokość etykiety oceny */
  --so-label-height: 1.5rem;
  /* pozycja menu bocznego — wysokość z Design, o 0,25rem wyższa od pola */
  --so-nav-item-h: 2.25rem;

  /* ikona mat-icon w tekście, względem rozmiaru tekstu wokół. Material Symbols rysuje glif średnio
     na 0,77 em swojego pola, więc przy 1,25 em rysunek ma ok. 0,96 em — tyle, co rozmiar tekstu.
     Pomiar i porównanie z poprzednimi ikonami: migracja-z-primeng.md, sekcja „Ikony”. */
  --so-icon-size: 1.25em;

  /* odstęp stosu toastów od górnej krawędzi okna; aplikacja z paskiem górnym podaje jego wysokość,
     żeby toasty nie zasłaniały menu konta */
  --so-toast-offset: 0rem;

  /* Kształty. W px jak w Design: promień nie musi rosnąć ze skalą czcionki. */
  --so-shape-xs: 4px;
  --so-shape-s: 8px;
  --so-shape-m: 12px;
  --so-shape-l: 16px;
  --so-shape-xl: 28px;
  --so-shape-full: 9999px;
  /* Przycisk to pigułka, a wciśnięty — zaokrąglony prostokąt. Pigułka jako połowa wysokości
     przycisku, nie 9999px: przejście z 9999px do 8px zmienia wygląd dopiero w ostatnim ułamku
     procenta czasu, więc zamiast ruchu byłby skok po 240 ms. */
  --so-radius-button: calc(var(--so-field-height) / 2);
  --so-radius-button-pressed: var(--so-shape-s);
  --so-radius-field: var(--so-shape-s);
  --so-radius-chip: var(--so-shape-s);
  --so-radius-table: var(--so-shape-m);
  --so-radius-menu: var(--so-shape-m);
  --so-radius-card: var(--so-shape-l);
  --so-radius-dialog: var(--so-shape-xl);
  --so-radius-full: var(--so-shape-full);
  /* dawne nazwy */
  --so-radius-sm: var(--so-shape-s);
  --so-radius-md: var(--so-shape-m);
  --so-radius-lg: var(--so-shape-l);
  --so-radius-xl: var(--so-shape-xl);

  /* Typografia (skrót font). Nagłówki i liczby Bricolage, reszta Figtree; nic poniżej 0,75rem. */
  --so-type-display: 650 2.25rem/2.75rem var(--so-font-brand);
  --so-type-headline: 650 1.75rem/2.25rem var(--so-font-brand);
  --so-type-title-l: 600 1.375rem/1.75rem var(--so-font-brand);
  --so-type-title-m: 650 1rem/1.5rem var(--so-font-family);
  --so-type-title-s: 650 0.875rem/1.25rem var(--so-font-family);
  --so-type-body-l: 400 1rem/1.5rem var(--so-font-family);
  --so-type-body-m: 400 0.875rem/1.25rem var(--so-font-family);
  --so-type-body-s: 400 0.75rem/1rem var(--so-font-family);
  --so-type-label-l: 600 0.875rem/1.25rem var(--so-font-family);
  --so-type-label-m: 600 0.75rem/1rem var(--so-font-family);

  /* Ruch. prefers-reduced-motion skraca przejścia po stronie aplikacji. */
  --so-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --so-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --so-ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --so-dur-short: 120ms;
  --so-dur-medium: 240ms;
  --so-dur-long: 400ms;
  --so-duration: 0.2s;

  /* Skala koloru przewodniego (aplikacja wpisuje ją z palety) i ciepłe neutralne. Biorą z nich
     jeszcze arkusze layoutu i kilka ekranów; kontrolki używają tylko ról. */
  --so-primary-50: #eef4ff;
  --so-primary-100: #d9e6fe;
  --so-primary-200: #bcd3fd;
  --so-primary-300: #8eb6fb;
  --so-primary-400: #5b92f6;
  --so-primary-500: #2f74f0;
  --so-primary-600: #1f5ad6;
  --so-primary-700: #1c49ad;
  --so-primary-800: #1d3f8a;
  --so-primary-900: #1d386f;
  --so-primary-950: #14234a;

  --so-surface-0: #ffffff;
  --so-surface-50: #faf9f5;
  --so-surface-100: #f2f1ec;
  --so-surface-200: #e8e5dd;
  --so-surface-300: #d9d5cb;
  --so-surface-400: #bdb8ad;
  --so-surface-500: #97928a;
  --so-surface-600: #767a86;
  --so-surface-700: #57534b;
  --so-surface-800: #3c4250;
  --so-surface-900: #26241f;
  --so-surface-950: #20242e;
}

/*
  Znak MojeOceny: kolory jasnego motywu i przypisanie ich do części znaku (_includes/znak.svg).
  Wartości z aplikacji (src/styles/themes/_light.scss, pk/design-integracja bfe9b89). Ciemny motyw
  i wysoki kontrast nadpisują je w ciemny.css, kontrast.css i kontrast-ciemny.css.
  Strony jasnym tonem palety, okładka i grzbiet tonem przewodnim, pióro i trzonek odcieniem akcentu.
*/
:root {
  --so-logo-page: oklch(0.9 calc(0.07 * var(--so-k)) var(--so-h));
  --so-logo-cover: oklch(0.47 calc(0.13 * var(--so-k)) var(--so-h));
  --so-logo-pen: oklch(0.66 calc(0.15 * var(--so-k)) var(--so-h3));
  --so-logo-shaft: oklch(0.44 calc(0.12 * var(--so-k)) var(--so-h3));
}

.logo_book_right_side,
.logo_book_left_side {
  fill: var(--so-logo-page);
}

.logo_book_bottom_side,
.logo_book_center {
  fill: var(--so-logo-cover);
}

.logo_pen_outside {
  fill: var(--so-logo-pen);
}

.logo_pen_inside {
  fill: var(--so-logo-shaft);
}

/*
  Wartości samej strony. Kolory, kształty i fonty biorą z tokenów aplikacji (--so-*), tu są tylko
  rozmiary, których aplikacja nie ma: strona czyta się z dystansu, więc tekst jest większy, a sekcje
  luźniejsze niż gęste ekrany dziennika.
*/
:root {
  color-scheme: light;

  /* Zrzuty są w dwóch wersjach; widać tę w kolorach bieżącego motywu (strona-ciemny.css). */
  --zrzut-jasny: block;
  --zrzut-ciemny: none;

  --strona-szerokosc: 74rem;
  --strona-miara: 38rem;
  --strona-margines: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --strona-sekcja: clamp(3.5rem, 2.25rem + 5vw, 7rem);

  --strona-h1: 650 clamp(2.25rem, 1.45rem + 3.4vw, 3.75rem) / 1.08 var(--so-font-brand);
  --strona-h2: 650 clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem) / 1.12 var(--so-font-brand);
  --strona-h3: 600 1.375rem / 1.75rem var(--so-font-brand);
  --strona-lead: 400 clamp(1.125rem, 1.04rem + 0.35vw, 1.3125rem) / 1.55 var(--so-font-family);
  --strona-tekst: 400 1.0625rem / 1.65 var(--so-font-family);
}


@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) {
/* Ciemny motyw: role kolorów z aplikacji (src/styles/themes/_dark.scss, pk/design-integracja 77ad70f).
   Same deklaracje; selektory dokłada src/css.njk. */
  --so-primary: oklch(0.82 calc(0.1 * var(--so-k)) var(--so-h));
  --so-on-primary: oklch(0.27 calc(0.07 * var(--so-k)) var(--so-h));
  --so-primary-container: oklch(0.38 calc(0.085 * var(--so-k)) var(--so-h));
  --so-on-primary-container: oklch(0.93 calc(0.05 * var(--so-k)) var(--so-h));
  --so-secondary: oklch(0.82 calc(0.045 * var(--so-k)) var(--so-h));
  --so-on-secondary: oklch(0.28 calc(0.04 * var(--so-k)) var(--so-h));
  --so-secondary-container: oklch(0.36 calc(0.045 * var(--so-k)) var(--so-h));
  --so-on-secondary-container: oklch(0.92 calc(0.03 * var(--so-k)) var(--so-h));
  --so-tertiary: oklch(0.83 calc(0.09 * var(--so-k)) var(--so-h3));
  --so-on-tertiary: oklch(0.29 calc(0.07 * var(--so-k)) var(--so-h3));
  --so-tertiary-container: oklch(0.39 calc(0.08 * var(--so-k)) var(--so-h3));
  --so-on-tertiary-container: oklch(0.93 calc(0.05 * var(--so-k)) var(--so-h3));
  --so-error: oklch(0.8 0.11 25);
  --so-on-error: oklch(0.33 0.11 27);
  --so-error-container: oklch(0.4 0.12 27);
  --so-on-error-container: oklch(0.93 0.04 27);
  --so-surface: oklch(0.185 calc(0.012 * var(--so-k)) var(--so-h));
  --so-surface-container-lowest: oklch(0.155 calc(0.01 * var(--so-k)) var(--so-h));
  --so-surface-container-low: oklch(0.215 calc(0.014 * var(--so-k)) var(--so-h));
  --so-surface-container: oklch(0.235 calc(0.016 * var(--so-k)) var(--so-h));
  --so-surface-container-high: oklch(0.27 calc(0.018 * var(--so-k)) var(--so-h));
  --so-surface-container-highest: oklch(0.305 calc(0.02 * var(--so-k)) var(--so-h));
  --so-on-surface: oklch(0.93 calc(0.012 * var(--so-k)) var(--so-h));
  --so-on-surface-variant: oklch(0.8 calc(0.02 * var(--so-k)) var(--so-h));
  --so-outline: oklch(0.64 calc(0.02 * var(--so-k)) var(--so-h));
  --so-outline-variant: oklch(0.38 calc(0.02 * var(--so-k)) var(--so-h));
  --so-inverse-surface: oklch(0.93 calc(0.012 * var(--so-k)) var(--so-h));
  --so-inverse-on-surface: oklch(0.27 calc(0.015 * var(--so-k)) var(--so-h));
  --so-inverse-primary: oklch(0.47 calc(0.12 * var(--so-k)) var(--so-h));
  --so-scrim: oklch(0.05 0 0 / 0.6);
  --so-shadow: oklch(0 0 0 / 0.5);
  --so-overlay: var(--so-surface-container-high);
  --so-surface-hover: var(--so-surface-container-highest);
  --so-primary-hover: oklch(0.86 calc(0.09 * var(--so-k)) var(--so-h));
  --so-primary-active: oklch(0.9 calc(0.07 * var(--so-k)) var(--so-h));
  --so-success: oklch(0.8 0.15 150);
  --so-warn: oklch(0.8 0.13 75);
  --so-info: oklch(0.8 0.1 240);

  /* Znak MojeOceny (_dark.scss, pk/design-integracja bfe9b89): strony zostają jasne, okładka
     i pióro jaśniejsze, żeby nie ginęły na ciemnym tle. */
  --so-logo-page: oklch(0.86 calc(0.07 * var(--so-k)) var(--so-h));
  --so-logo-cover: oklch(0.66 calc(0.13 * var(--so-k)) var(--so-h));
  --so-logo-pen: oklch(0.78 calc(0.13 * var(--so-k)) var(--so-h3));
  --so-logo-shaft: oklch(0.52 calc(0.12 * var(--so-k)) var(--so-h3));

/* Ciemny motyw: wartości samej strony. Same deklaracje; selektory dokłada src/css.njk. */
  color-scheme: dark;
  --zrzut-jasny: none;
  --zrzut-ciemny: block;

  }
}

:root[data-motyw="ciemny"] {
/* Ciemny motyw: role kolorów z aplikacji (src/styles/themes/_dark.scss, pk/design-integracja 77ad70f).
   Same deklaracje; selektory dokłada src/css.njk. */
  --so-primary: oklch(0.82 calc(0.1 * var(--so-k)) var(--so-h));
  --so-on-primary: oklch(0.27 calc(0.07 * var(--so-k)) var(--so-h));
  --so-primary-container: oklch(0.38 calc(0.085 * var(--so-k)) var(--so-h));
  --so-on-primary-container: oklch(0.93 calc(0.05 * var(--so-k)) var(--so-h));
  --so-secondary: oklch(0.82 calc(0.045 * var(--so-k)) var(--so-h));
  --so-on-secondary: oklch(0.28 calc(0.04 * var(--so-k)) var(--so-h));
  --so-secondary-container: oklch(0.36 calc(0.045 * var(--so-k)) var(--so-h));
  --so-on-secondary-container: oklch(0.92 calc(0.03 * var(--so-k)) var(--so-h));
  --so-tertiary: oklch(0.83 calc(0.09 * var(--so-k)) var(--so-h3));
  --so-on-tertiary: oklch(0.29 calc(0.07 * var(--so-k)) var(--so-h3));
  --so-tertiary-container: oklch(0.39 calc(0.08 * var(--so-k)) var(--so-h3));
  --so-on-tertiary-container: oklch(0.93 calc(0.05 * var(--so-k)) var(--so-h3));
  --so-error: oklch(0.8 0.11 25);
  --so-on-error: oklch(0.33 0.11 27);
  --so-error-container: oklch(0.4 0.12 27);
  --so-on-error-container: oklch(0.93 0.04 27);
  --so-surface: oklch(0.185 calc(0.012 * var(--so-k)) var(--so-h));
  --so-surface-container-lowest: oklch(0.155 calc(0.01 * var(--so-k)) var(--so-h));
  --so-surface-container-low: oklch(0.215 calc(0.014 * var(--so-k)) var(--so-h));
  --so-surface-container: oklch(0.235 calc(0.016 * var(--so-k)) var(--so-h));
  --so-surface-container-high: oklch(0.27 calc(0.018 * var(--so-k)) var(--so-h));
  --so-surface-container-highest: oklch(0.305 calc(0.02 * var(--so-k)) var(--so-h));
  --so-on-surface: oklch(0.93 calc(0.012 * var(--so-k)) var(--so-h));
  --so-on-surface-variant: oklch(0.8 calc(0.02 * var(--so-k)) var(--so-h));
  --so-outline: oklch(0.64 calc(0.02 * var(--so-k)) var(--so-h));
  --so-outline-variant: oklch(0.38 calc(0.02 * var(--so-k)) var(--so-h));
  --so-inverse-surface: oklch(0.93 calc(0.012 * var(--so-k)) var(--so-h));
  --so-inverse-on-surface: oklch(0.27 calc(0.015 * var(--so-k)) var(--so-h));
  --so-inverse-primary: oklch(0.47 calc(0.12 * var(--so-k)) var(--so-h));
  --so-scrim: oklch(0.05 0 0 / 0.6);
  --so-shadow: oklch(0 0 0 / 0.5);
  --so-overlay: var(--so-surface-container-high);
  --so-surface-hover: var(--so-surface-container-highest);
  --so-primary-hover: oklch(0.86 calc(0.09 * var(--so-k)) var(--so-h));
  --so-primary-active: oklch(0.9 calc(0.07 * var(--so-k)) var(--so-h));
  --so-success: oklch(0.8 0.15 150);
  --so-warn: oklch(0.8 0.13 75);
  --so-info: oklch(0.8 0.1 240);

  /* Znak MojeOceny (_dark.scss, pk/design-integracja bfe9b89): strony zostają jasne, okładka
     i pióro jaśniejsze, żeby nie ginęły na ciemnym tle. */
  --so-logo-page: oklch(0.86 calc(0.07 * var(--so-k)) var(--so-h));
  --so-logo-cover: oklch(0.66 calc(0.13 * var(--so-k)) var(--so-h));
  --so-logo-pen: oklch(0.78 calc(0.13 * var(--so-k)) var(--so-h3));
  --so-logo-shaft: oklch(0.52 calc(0.12 * var(--so-k)) var(--so-h3));

/* Ciemny motyw: wartości samej strony. Same deklaracje; selektory dokłada src/css.njk. */
  color-scheme: dark;
  --zrzut-jasny: none;
  --zrzut-ciemny: block;

}

@media (prefers-contrast: more) {
  :root {
/* Wysoki kontrast, jasny: role z aplikacji (src/styles/themes/_a11y.scss, pk/design-integracja 77ad70f).
   Same deklaracje; selektory dokłada src/css.njk. */
  --so-primary: oklch(0.38 calc(0.12 * var(--so-k)) var(--so-h));
  --so-primary-container: oklch(0.86 calc(0.06 * var(--so-k)) var(--so-h));
  --so-on-primary-container: oklch(0.18 calc(0.06 * var(--so-k)) var(--so-h));
  --so-secondary: oklch(0.38 calc(0.05 * var(--so-k)) var(--so-h));
  --so-secondary-container: oklch(0.88 calc(0.03 * var(--so-k)) var(--so-h));
  --so-on-secondary-container: oklch(0.18 calc(0.03 * var(--so-k)) var(--so-h));
  --so-tertiary: oklch(0.4 calc(0.1 * var(--so-k)) var(--so-h3));
  --so-tertiary-container: oklch(0.88 calc(0.05 * var(--so-k)) var(--so-h3));
  --so-on-tertiary-container: oklch(0.2 calc(0.05 * var(--so-k)) var(--so-h3));
  --so-error: oklch(0.42 0.17 27);
  --so-error-container: oklch(0.9 0.05 27);
  --so-on-error-container: oklch(0.25 0.1 27);
  --so-surface: oklch(0.995 calc(0.004 * var(--so-k)) var(--so-h));
  --so-surface-container-lowest: oklch(1 0 0);
  --so-surface-container-low: oklch(0.985 calc(0.006 * var(--so-k)) var(--so-h));
  --so-surface-container: oklch(0.97 calc(0.01 * var(--so-k)) var(--so-h));
  --so-surface-container-high: oklch(0.955 calc(0.012 * var(--so-k)) var(--so-h));
  --so-surface-container-highest: oklch(0.94 calc(0.015 * var(--so-k)) var(--so-h));
  --so-on-surface: oklch(0.15 calc(0.015 * var(--so-k)) var(--so-h));
  --so-on-surface-variant: oklch(0.27 calc(0.02 * var(--so-k)) var(--so-h));
  --so-outline: oklch(0.32 calc(0.02 * var(--so-k)) var(--so-h));
  --so-outline-variant: oklch(0.45 calc(0.02 * var(--so-k)) var(--so-h));
  --so-inverse-surface: oklch(0.22 calc(0.015 * var(--so-k)) var(--so-h));
  --so-inverse-on-surface: oklch(0.99 calc(0.005 * var(--so-k)) var(--so-h));
  --so-primary-hover: oklch(0.33 calc(0.11 * var(--so-k)) var(--so-h));
  --so-primary-active: oklch(0.29 calc(0.1 * var(--so-k)) var(--so-h));
  --so-success: oklch(0.42 0.11 150);
  --so-warn: oklch(0.42 0.095 60);
  --so-info: oklch(0.42 0.09 240);
  --so-border-width: 2px;
  --so-focus-ring-width: 3px;

  /* Znak MojeOceny (_a11y.scss, pk/design-integracja bfe9b89): okładka mocno ściemniona. */
  --so-logo-page: oklch(0.92 calc(0.05 * var(--so-k)) var(--so-h));
  --so-logo-cover: oklch(0.32 calc(0.1 * var(--so-k)) var(--so-h));
  --so-logo-pen: oklch(0.52 calc(0.14 * var(--so-k)) var(--so-h3));
  --so-logo-shaft: oklch(0.3 calc(0.09 * var(--so-k)) var(--so-h3));

  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-motyw="jasny"]) {
/* Wysoki kontrast, ciemny: role z aplikacji (src/styles/themes/_a11y.scss, pk/design-integracja 77ad70f).
   Same deklaracje; selektory dokłada src/css.njk. */
  --so-primary: oklch(0.88 calc(0.08 * var(--so-k)) var(--so-h));
  --so-on-primary: oklch(0.15 calc(0.05 * var(--so-k)) var(--so-h));
  --so-primary-container: oklch(0.4 calc(0.1 * var(--so-k)) var(--so-h));
  --so-on-primary-container: oklch(0.98 calc(0.02 * var(--so-k)) var(--so-h));
  --so-secondary: oklch(0.88 calc(0.04 * var(--so-k)) var(--so-h));
  --so-on-secondary: oklch(0.15 calc(0.03 * var(--so-k)) var(--so-h));
  --so-secondary-container: oklch(0.38 calc(0.05 * var(--so-k)) var(--so-h));
  --so-on-secondary-container: oklch(0.98 calc(0.02 * var(--so-k)) var(--so-h));
  --so-tertiary: oklch(0.88 calc(0.07 * var(--so-k)) var(--so-h3));
  --so-on-tertiary: oklch(0.15 calc(0.05 * var(--so-k)) var(--so-h3));
  --so-tertiary-container: oklch(0.4 calc(0.08 * var(--so-k)) var(--so-h3));
  --so-on-tertiary-container: oklch(0.98 calc(0.02 * var(--so-k)) var(--so-h3));
  --so-error: oklch(0.85 0.09 25);
  --so-on-error: oklch(0.2 0.08 27);
  --so-error-container: oklch(0.42 0.13 27);
  --so-on-error-container: oklch(0.98 0.02 27);
  --so-surface: oklch(0.1 calc(0.008 * var(--so-k)) var(--so-h));
  --so-surface-container-lowest: oklch(0.07 calc(0.006 * var(--so-k)) var(--so-h));
  --so-surface-container-low: oklch(0.13 calc(0.01 * var(--so-k)) var(--so-h));
  --so-surface-container: oklch(0.15 calc(0.012 * var(--so-k)) var(--so-h));
  --so-surface-container-high: oklch(0.18 calc(0.014 * var(--so-k)) var(--so-h));
  --so-surface-container-highest: oklch(0.21 calc(0.016 * var(--so-k)) var(--so-h));
  --so-on-surface: oklch(0.98 calc(0.005 * var(--so-k)) var(--so-h));
  --so-on-surface-variant: oklch(0.9 calc(0.01 * var(--so-k)) var(--so-h));
  --so-outline: oklch(0.86 calc(0.01 * var(--so-k)) var(--so-h));
  --so-outline-variant: oklch(0.7 calc(0.01 * var(--so-k)) var(--so-h));
  --so-inverse-surface: oklch(0.95 calc(0.008 * var(--so-k)) var(--so-h));
  --so-inverse-on-surface: oklch(0.15 calc(0.01 * var(--so-k)) var(--so-h));
  --so-inverse-primary: oklch(0.4 calc(0.12 * var(--so-k)) var(--so-h));
  --so-scrim: oklch(0 0 0 / 0.7);
  --so-shadow: oklch(0 0 0 / 0.7);
  --so-primary-hover: oklch(0.92 calc(0.06 * var(--so-k)) var(--so-h));
  --so-primary-active: oklch(0.95 calc(0.04 * var(--so-k)) var(--so-h));
  --so-success: oklch(0.85 0.13 150);
  --so-warn: oklch(0.85 0.11 75);
  --so-info: oklch(0.85 0.08 240);

  /* Znak MojeOceny (_a11y.scss, pk/design-integracja bfe9b89): okładka rozjaśniona. */
  --so-logo-page: oklch(0.92 calc(0.04 * var(--so-k)) var(--so-h));
  --so-logo-cover: oklch(0.78 calc(0.08 * var(--so-k)) var(--so-h));
  --so-logo-pen: oklch(0.86 calc(0.09 * var(--so-k)) var(--so-h3));
  --so-logo-shaft: oklch(0.55 calc(0.08 * var(--so-k)) var(--so-h3));

    }
  }

  :root[data-motyw="ciemny"] {
/* Wysoki kontrast, ciemny: role z aplikacji (src/styles/themes/_a11y.scss, pk/design-integracja 77ad70f).
   Same deklaracje; selektory dokłada src/css.njk. */
  --so-primary: oklch(0.88 calc(0.08 * var(--so-k)) var(--so-h));
  --so-on-primary: oklch(0.15 calc(0.05 * var(--so-k)) var(--so-h));
  --so-primary-container: oklch(0.4 calc(0.1 * var(--so-k)) var(--so-h));
  --so-on-primary-container: oklch(0.98 calc(0.02 * var(--so-k)) var(--so-h));
  --so-secondary: oklch(0.88 calc(0.04 * var(--so-k)) var(--so-h));
  --so-on-secondary: oklch(0.15 calc(0.03 * var(--so-k)) var(--so-h));
  --so-secondary-container: oklch(0.38 calc(0.05 * var(--so-k)) var(--so-h));
  --so-on-secondary-container: oklch(0.98 calc(0.02 * var(--so-k)) var(--so-h));
  --so-tertiary: oklch(0.88 calc(0.07 * var(--so-k)) var(--so-h3));
  --so-on-tertiary: oklch(0.15 calc(0.05 * var(--so-k)) var(--so-h3));
  --so-tertiary-container: oklch(0.4 calc(0.08 * var(--so-k)) var(--so-h3));
  --so-on-tertiary-container: oklch(0.98 calc(0.02 * var(--so-k)) var(--so-h3));
  --so-error: oklch(0.85 0.09 25);
  --so-on-error: oklch(0.2 0.08 27);
  --so-error-container: oklch(0.42 0.13 27);
  --so-on-error-container: oklch(0.98 0.02 27);
  --so-surface: oklch(0.1 calc(0.008 * var(--so-k)) var(--so-h));
  --so-surface-container-lowest: oklch(0.07 calc(0.006 * var(--so-k)) var(--so-h));
  --so-surface-container-low: oklch(0.13 calc(0.01 * var(--so-k)) var(--so-h));
  --so-surface-container: oklch(0.15 calc(0.012 * var(--so-k)) var(--so-h));
  --so-surface-container-high: oklch(0.18 calc(0.014 * var(--so-k)) var(--so-h));
  --so-surface-container-highest: oklch(0.21 calc(0.016 * var(--so-k)) var(--so-h));
  --so-on-surface: oklch(0.98 calc(0.005 * var(--so-k)) var(--so-h));
  --so-on-surface-variant: oklch(0.9 calc(0.01 * var(--so-k)) var(--so-h));
  --so-outline: oklch(0.86 calc(0.01 * var(--so-k)) var(--so-h));
  --so-outline-variant: oklch(0.7 calc(0.01 * var(--so-k)) var(--so-h));
  --so-inverse-surface: oklch(0.95 calc(0.008 * var(--so-k)) var(--so-h));
  --so-inverse-on-surface: oklch(0.15 calc(0.01 * var(--so-k)) var(--so-h));
  --so-inverse-primary: oklch(0.4 calc(0.12 * var(--so-k)) var(--so-h));
  --so-scrim: oklch(0 0 0 / 0.7);
  --so-shadow: oklch(0 0 0 / 0.7);
  --so-primary-hover: oklch(0.92 calc(0.06 * var(--so-k)) var(--so-h));
  --so-primary-active: oklch(0.95 calc(0.04 * var(--so-k)) var(--so-h));
  --so-success: oklch(0.85 0.13 150);
  --so-warn: oklch(0.85 0.11 75);
  --so-info: oklch(0.85 0.08 240);

  /* Znak MojeOceny (_a11y.scss, pk/design-integracja bfe9b89): okładka rozjaśniona. */
  --so-logo-page: oklch(0.92 calc(0.04 * var(--so-k)) var(--so-h));
  --so-logo-cover: oklch(0.78 calc(0.08 * var(--so-k)) var(--so-h));
  --so-logo-pen: oklch(0.86 calc(0.09 * var(--so-k)) var(--so-h3));
  --so-logo-shaft: oklch(0.55 calc(0.08 * var(--so-k)) var(--so-h3));

  }
}

/*
  Wygląd strony. Układ powtarza powłokę aplikacji: tło w surface-container, treść w panelu surface
  zaokrąglonym na 28 px, nagłówek i stopka wprost na tle.
*/

/* ---- podstawy ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--so-surface-container);
  color: var(--so-on-surface);
  font: var(--strona-tekst);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

h1 {
  font: var(--strona-h1);
  letter-spacing: -0.02em;
}

h2 {
  font: var(--strona-h2);
  letter-spacing: -0.015em;
}

h3 {
  font: var(--strona-h3);
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--so-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: var(--so-focus-ring-width) solid var(--so-focus-ring-color);
  outline-offset: var(--so-focus-ring-offset);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ukryte {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kontener {
  width: 100%;
  max-width: var(--strona-szerokosc);
  margin-inline: auto;
  padding-inline: var(--strona-margines);
}

/* ---- przejście do treści ----------------------------------------------- */

.pomin {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  padding: 0.75rem 1.25rem;
  border-radius: var(--so-shape-full);
  background: var(--so-inverse-surface);
  color: var(--so-inverse-on-surface);
  font: var(--so-type-label-l);
  text-decoration: none;
  transform: translateY(-200%);
}

.pomin:focus-visible {
  transform: none;
}

/* ---- baner wersji testowej --------------------------------------------- */

.baner-testowy {
  margin: 0.5rem 0.5rem 0;
  padding: 0.625rem 1rem;
  border-radius: var(--so-shape-m);
  background: var(--so-tertiary-container);
  color: var(--so-on-tertiary-container);
  font: var(--so-type-body-m);
  text-align: center;
}

/* ---- nagłówek ---------------------------------------------------------- */

.naglowek {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
}

.marka {
  display: inline-flex;
  gap: 0.625rem;
  align-items: center;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border-radius: var(--so-shape-m);
  color: var(--so-on-surface);
  text-decoration: none;
}

/* Wysokość znaku jak w menu aplikacji (Design: 2,25 rem); szerokość z proporcji, ok. 3 rem. */
.marka__znak {
  display: inline-flex;
  flex: none;
  height: 2.25rem;
}

.marka__znak svg {
  width: auto;
  height: 100%;
}

.marka__nazwa {
  font: 700 1.25rem / 1 var(--so-font-brand);
}

.naglowek__prawa {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.menu {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: var(--so-shape-full);
  color: var(--so-on-surface);
  font: var(--so-type-label-l);
  font-size: 1rem;
  text-decoration: none;
}

.menu a:hover {
  background: var(--so-surface-container-high);
}

.menu a[aria-current='page'] {
  background: var(--so-secondary-container);
  color: var(--so-on-secondary-container);
}

.przelacznik-motywu {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--so-shape-full);
  background: transparent;
  color: var(--so-on-surface-variant);
  cursor: pointer;
}

.przelacznik-motywu[hidden] {
  display: none;
}

.przelacznik-motywu:hover {
  background: var(--so-surface-container-high);
  color: var(--so-on-surface);
}

.przelacznik-motywu svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Księżyc w jasnym motywie (kliknięcie włączy ciemny), słońce w ciemnym. */
.przelacznik-motywu .ikona-slonce,
.przelacznik-motywu[aria-pressed='true'] .ikona-ksiezyc {
  display: none;
}

.przelacznik-motywu[aria-pressed='true'] .ikona-slonce {
  display: block;
}

/* ---- panel treści ------------------------------------------------------ */

.panel {
  margin-inline: 0.5rem;
  border-radius: var(--so-shape-xl);
  background: var(--so-surface);
  overflow: clip;
}

/* Fokus trafia tu tylko z „Przejdź do treści”; obwódka wokół całego panelu nic nie mówi. */
.panel:focus {
  outline: none;
}

.sekcja {
  padding-block: var(--strona-sekcja);
}

.sekcja + .sekcja {
  border-top: 1px solid var(--so-outline-variant);
}

.sekcja__naglowek {
  display: grid;
  gap: 1rem;
  max-width: var(--strona-miara);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.nadtytul {
  justify-self: start;
  padding: 0.25rem 0.75rem;
  border-radius: var(--so-shape-full);
  background: var(--so-tertiary-container);
  color: var(--so-on-tertiary-container);
  font: var(--so-type-label-l);
}

.lead {
  color: var(--so-on-surface-variant);
  font: var(--strona-lead);
}

/* ---- przyciski --------------------------------------------------------- */

.akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.przycisk {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.5rem;
  border-radius: var(--so-shape-full);
  font: var(--so-type-label-l);
  font-size: 1rem;
  text-decoration: none;
  transition:
    border-radius var(--so-dur-medium) var(--so-ease-spring),
    background-color var(--so-dur-short) var(--so-ease-standard);
}

.przycisk:active {
  border-radius: var(--so-shape-s);
}

.przycisk--pelny {
  background: var(--so-primary);
  color: var(--so-on-primary);
}

.przycisk--pelny:hover {
  background: var(--so-primary-hover);
}

.przycisk--tonalny {
  background: var(--so-secondary-container);
  color: var(--so-on-secondary-container);
}

.przycisk--tonalny:hover {
  background: var(--so-surface-container-highest);
}

/* ---- zrzuty ------------------------------------------------------------ */

.zrzut {
  margin: 0;
}

.zrzut__ramka {
  padding: clamp(0.375rem, 0.2rem + 0.8vw, 0.75rem);
  border: 1px solid var(--so-outline-variant);
  border-radius: var(--so-shape-xl);
  background: var(--so-surface-container);
}

.zrzut__ramka img {
  width: 100%;
  border-radius: var(--so-shape-l);
  box-shadow: var(--so-elev-1);
}

.zrzut__obraz--jasny {
  display: var(--zrzut-jasny);
}

.zrzut__obraz--ciemny {
  display: var(--zrzut-ciemny);
}

.zrzut figcaption {
  margin-top: 0.75rem;
  padding-inline: 0.5rem;
  color: var(--so-on-surface-variant);
  font: var(--so-type-body-m);
}

/* Wąski zrzut z telefonu w obudowie. */
.zrzut--telefon .zrzut__ramka {
  width: min(100%, 19rem);
  margin-inline: auto;
  padding: 0.5rem;
  border: 0;
  border-radius: 2.5rem;
  background: var(--so-inverse-surface);
  box-shadow: var(--so-elev-3);
}

.zrzut--telefon .zrzut__ramka img {
  border-radius: 2rem;
  box-shadow: none;
}

/* ---- start ------------------------------------------------------------- */

.hero {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem);
}

.hero__tekst {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

.hero__tekst .lead {
  max-width: 34rem;
}

.hero__zrzut {
  position: relative;
  padding-block: 1rem;
}

/* Tło pod telefonem: koło w kolorze przewodnim, czysto ozdobne. */
.hero__zrzut::before {
  position: absolute;
  inset: 0 50% auto auto;
  width: min(100%, 26rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--so-primary-container);
  content: '';
  transform: translate(50%, 8%);
}

.hero__zrzut .zrzut {
  position: relative;
}

@media (min-width: 56rem) {
  .hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}

/* ---- role -------------------------------------------------------------- */

.role {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rola {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: var(--so-shape-l);
  background: var(--so-surface-container-low);
}

.rola p {
  color: var(--so-on-surface-variant);
}

/* ---- opisy ze zrzutem; ol.kroki to te same opisy z numerami ------------- */

.opisy {
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kroki {
  counter-reset: krok;
}

.opis-ze-zrzutem {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: center;
}

.opis-ze-zrzutem__tekst {
  display: grid;
  gap: 1rem;
  max-width: var(--strona-miara);
}

.opis-ze-zrzutem__tekst p {
  color: var(--so-on-surface-variant);
}

.kroki .opis-ze-zrzutem__tekst::before {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--so-shape-full);
  background: var(--so-primary-container);
  color: var(--so-on-primary-container);
  content: counter(krok);
  counter-increment: krok;
  font: 700 1.25rem / 1 var(--so-font-brand);
}

@media (min-width: 60rem) {
  .opis-ze-zrzutem {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  }

  .opis-ze-zrzutem--odwrotnie .opis-ze-zrzutem__tekst {
    order: 2;
  }

  .opis-ze-zrzutem--odwrotnie {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  }
}

.dodatki {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.dodatki li {
  padding: 0.5rem 1rem;
  border: 1px solid var(--so-outline-variant);
  border-radius: var(--so-shape-full);
  color: var(--so-on-surface-variant);
  font: var(--so-type-body-m);
  font-size: 0.9375rem;
}

.link-dalej {
  margin-top: 1.5rem;
}

/* ---- wygoda ------------------------------------------------------------ */

.wygoda {
  display: grid;
  gap: 2.5rem 4rem;
  align-items: center;
}

.wygoda__tekst {
  display: grid;
  gap: 1.5rem;
}

.lista {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem;
}

/* Znacznik punktu: kropka w kolorze przewodnim, bez znaczenia dla czytnika. */
.lista li::before {
  width: 0.625rem;
  height: 0.625rem;
  margin: 0.55em 0 0 0.375rem;
  border-radius: 50%;
  background: var(--so-primary);
  content: '';
}

@media (min-width: 56rem) {
  .wygoda {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }
}

/* ---- dane i kontakt ---------------------------------------------------- */

.fakty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fakty li {
  padding: 1.5rem;
  border-radius: var(--so-shape-l);
  background: var(--so-surface-container-low);
}

.wezwanie {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  border-radius: var(--so-shape-xl);
  background: var(--so-primary-container);
  color: var(--so-on-primary-container);
}

.wezwanie p {
  max-width: var(--strona-miara);
  font: var(--strona-lead);
}

.wezwanie a.przycisk--pelny {
  font-size: 1.0625rem;
}

/* ---- funkcje ----------------------------------------------------------- */

.funkcje-roli + .funkcje-roli {
  margin-top: var(--strona-sekcja);
}

.funkcje-roli > h2 {
  margin-bottom: 1rem;
}

.funkcje-roli > .lead {
  max-width: var(--strona-miara);
  margin-bottom: 2rem;
}

.funkcje-roli__uklad {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.funkcje-roli__uklad .zrzut {
  max-width: 19rem;
}

@media (min-width: 64rem) {
  .funkcje-roli__uklad {
    grid-template-columns: minmax(0, 1fr) 17rem;
  }
}

/* Najwyżej dwie kolumny: przy trzech czwarta grupa dyrekcji zostawała sama w rzędzie. */
.grupy-funkcji {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  gap: 1rem;
}

.grupa-funkcji {
  padding: 1.5rem;
  border-radius: var(--so-shape-l);
  background: var(--so-surface-container-low);
}

.grupa-funkcji h3 {
  margin-bottom: 1rem;
}

.grupa-funkcji dl {
  display: grid;
  gap: 0.875rem;
  margin: 0;
}

.grupa-funkcji dt {
  font-weight: 650;
}

.grupa-funkcji dd {
  margin: 0.125rem 0 0;
  color: var(--so-on-surface-variant);
  font-size: 1rem;
}

/* ---- tekst ciągły (kontakt, polityka) ---------------------------------- */

.tresc {
  max-width: 44rem;
}

.tresc > * + * {
  margin-top: 1.25rem;
}

.tresc h1 + * {
  margin-top: 1.5rem;
}

.tresc h2 {
  margin-top: 3rem;
  font: 650 1.625rem / 1.2 var(--so-font-brand);
}

.tresc h3 {
  margin-top: 2rem;
}

.tresc ul,
.tresc ol {
  padding-left: 1.5rem;
}

.tresc li + li {
  margin-top: 0.5rem;
}

.szkic {
  padding: 1rem 1.25rem;
  border-radius: var(--so-shape-m);
  background: var(--so-error-container);
  color: var(--so-on-error-container);
}

.adres-email {
  font: 650 clamp(1.375rem, 1.1rem + 1.2vw, 2rem) / 1.2 var(--so-font-brand);
  overflow-wrap: anywhere;
}

/* ---- stopka ------------------------------------------------------------ */

.stopka {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 2rem 2.5rem;
  color: var(--so-on-surface-variant);
  font: var(--so-type-body-m);
  font-size: 0.9375rem;
}

.stopka__linki {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stopka a {
  color: var(--so-on-surface);
}

/* ---- ruch -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}