/*! Aplikacja turniejowa UKS Źródełko © 2026 Damian Krupa. Wszelkie prawa zastrzeżone.
 *  Licencja wyłącznie na Turniej minisiatkówki UKS Źródełko, Katowice 24–25.10.2026 – zob. LICENCJA.txt.
 *  Składniki stron trzecich (public/vendor, public/fonty, node.exe) – na własnych licencjach. */
/* ===== tokeny wyglądu T-P74 (design/online/tokeny.css) ===== */
/*
 * Tokeny wyglądu wersji online (Turniej/Produkt/T-P74). Projekt, jeszcze nie w kodzie produktu.
 * Zasady, kontrast (sprawdzony liczbowo) i komponenty: design/online/README.md. Makiety: design/online/makiety.html.
 *
 * - Bez zasobów z sieci: fonty Barlow i Saira Condensed są już w public/fonty (SIL OFL 1.1, pliki licencji obok);
 *   strona produktu dołącza /fonty/fonty.css, a tu są tylko rodziny z zapasowymi fontami systemowymi.
 * - Motyw: jasny domyślnie; ciemny z prefers-color-scheme albo jawnie <html data-theme="dark">;
 *   <html data-theme="light"> wymusza jasny (np. telefon sędziego w słońcu). Blok ciemny jest celowo powtórzony
 *   dwa razy (media query i [data-theme="dark"]) — przy zmianie popraw oba.
 * - Kolory drużyn A/B to wartości domyślne. Gdy drużyna ma kolor stroju (lib/kolory.js), strona nadpisuje
 *   --druzyna-a / --druzyna-a-napis / --druzyna-a-tusz na elemencie meczu (tlo / napis / tusz z palety).
 * - Nazwa i logo produktu NIE są tokenami CSS — to jedno ustawienie marki (README, „Nazwa i logo”).
 */

/* @jasny */
:root {
  color-scheme: light;

  /* Powierzchnie i tekst */
  --kolor-tlo: #eef0f5;              /* tło strony */
  --kolor-powierzchnia: #ffffff;     /* karty, panele, ramki */
  --kolor-powierzchnia-2: #f4f5f9;   /* wiersze naprzemienne, pola tylko do odczytu, nagłówki tabel */
  --kolor-tekst: #161a3a;            /* tekst główny, wyniki */
  --kolor-tekst-2: #474c6e;          /* opisy, metadane (AA na tle i powierzchni) */
  --kolor-tekst-3: #6b7091;          /* najmniej ważne podpisy; AA tylko na powierzchni, nie na tle */
  --kolor-linia: #d3d6e6;            /* podziały, obwódki dekoracyjne */
  --kolor-linia-mocna: #7c819f;      /* obwódki pól i przycisków drugorzędnych (≥ 3:1) */
  --kolor-pasek: #161a3a;            /* górny pasek telefonu sędziego, blok „na boisko teraz” */
  --kolor-na-pasku: #ffffff;

  /* Akcent = działanie (przycisk główny, link, fokus). Nigdy jako kolor stanu. */
  --kolor-akcent: #0a7569;
  --kolor-akcent-mocny: #075a51;     /* hover / wciśnięty, tekst linku */
  --kolor-akcent-tlo: #e1f3f0;
  --kolor-na-akcencie: #ffffff;
  --kolor-fokus: #0a7569;
  --kolor-wyroznienie: #fff6cf;      /* „moja drużyna” w tabelach i listach (z obwódką i słowem, nie sam kolor) */

  /* Stany: zawsze ikona + słowo, kolor tylko wzmacnia */
  --stan-zywo: #c8102e;        --stan-zywo-tlo: #fdeaec;        /* „na żywo” — wynik z telefonu, może się zmienić */
  --stan-zatwierdzony: #17703a; --stan-zatwierdzony-tlo: #e3f4e8; /* zatwierdzony przy stoliku, ostateczny */
  --stan-czeka: #3346a8;       --stan-czeka-tlo: #e8ecfb;       /* wysłany / w skrzynce / czeka na stolik */
  --stan-uwaga: #8a5300;       --stan-uwaga-tlo: #fff3d6;       /* ostrzeżenie: stare dane, kopia dawno */
  --stan-blad: #b3261e;        --stan-blad-tlo: #fdeceb;        /* błąd, offline, odrzucone */
  --stan-online: #17703a;                                       /* „online / połączony”; na pasku tylko jako pigułka z --stan-zatwierdzony-tlo */
  --stan-neutralny: #474c6e;   --stan-neutralny-tlo: #eceef4;   /* zaplanowany, następny, zakończony bez stanu */

  /* Drużyny (domyślne, gdy brak koloru stroju): pomarańcz i niebieski — rozróżnialne także przy daltonizmie */
  --druzyna-a: #c2410c; --druzyna-a-napis: #ffffff; --druzyna-a-tusz: #b13a0a;
  --druzyna-b: #1d4ed8; --druzyna-b-napis: #ffffff; --druzyna-b-tusz: #1d4ed8;

  /* Kategorie (T-P87, strona kibica): kropka przy nazwie kategorii, przypisana według kolejności kategorii w turnieju
     (web/src/lib/fan/colors.ts). Nigdy jako kolor stanu i nigdy jedyna informacja — nazwa kategorii stoi obok. */
  --kat-1: #6d3fd6; --kat-2: #0e7490; --kat-3: #4d7c0f; --kat-4: #a3346a; --kat-5: #a16207; --kat-6: #5b6478;

  /* Cienie (w ciemnym motywie słabsze; tam głębię daje jaśniejsza powierzchnia) */
  --cien-1: 0 1px 2px rgba(22, 26, 58, .08), 0 1px 3px rgba(22, 26, 58, .06);
  --cien-2: 0 2px 6px rgba(22, 26, 58, .10), 0 8px 20px rgba(22, 26, 58, .08);
  --cien-3: 0 10px 30px rgba(22, 26, 58, .20);
  --cien-przycisk: inset 0 -3px 0 rgba(0, 0, 0, .18);
}

/* @ciemny (1/2: ustawienie systemu) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --kolor-tlo: #0e1120;
    --kolor-powierzchnia: #181c31;
    --kolor-powierzchnia-2: #20253f;
    --kolor-tekst: #eef0fa;
    --kolor-tekst-2: #b4b9d6;
    --kolor-tekst-3: #9196b8;
    --kolor-linia: #2f3555;
    --kolor-linia-mocna: #737a9e;
    --kolor-pasek: #050712;
    --kolor-na-pasku: #eef0fa;
    --kolor-akcent: #3cc7b4;
    --kolor-akcent-mocny: #6fdccd;
    --kolor-akcent-tlo: #12332f;
    --kolor-na-akcencie: #04201c;
    --kolor-fokus: #6fdccd;
    --kolor-wyroznienie: #3a3210;
    --stan-zywo: #ff6b7f;        --stan-zywo-tlo: #3a1520;
    --stan-zatwierdzony: #5bd48f; --stan-zatwierdzony-tlo: #12301f;
    --stan-czeka: #9db0ff;       --stan-czeka-tlo: #1c2550;
    --stan-uwaga: #ffc14f;       --stan-uwaga-tlo: #362708;
    --stan-blad: #ff8b80;        --stan-blad-tlo: #3a1614;
    --stan-online: #5bd48f;
    --stan-neutralny: #b4b9d6;   --stan-neutralny-tlo: #262b47;
    --druzyna-a: #c2410c; --druzyna-a-napis: #ffffff; --druzyna-a-tusz: #ff8f5c;
    --druzyna-b: #1d4ed8; --druzyna-b-napis: #ffffff; --druzyna-b-tusz: #8fb0ff;
    --kat-1: #b49bff; --kat-2: #5fd0e6; --kat-3: #a6d860; --kat-4: #f08bbd; --kat-5: #f0c05a; --kat-6: #aab3c7;
    --cien-1: 0 1px 2px rgba(0, 0, 0, .35);
    --cien-2: 0 2px 8px rgba(0, 0, 0, .40);
    --cien-3: 0 12px 32px rgba(0, 0, 0, .55);
    --cien-przycisk: inset 0 -3px 0 rgba(0, 0, 0, .28);
  }
}

/* @ciemny (2/2: wybór użytkownika) — te same wartości co wyżej */
:root[data-theme="dark"] {
  color-scheme: dark;
  --kolor-tlo: #0e1120;
  --kolor-powierzchnia: #181c31;
  --kolor-powierzchnia-2: #20253f;
  --kolor-tekst: #eef0fa;
  --kolor-tekst-2: #b4b9d6;
  --kolor-tekst-3: #9196b8;
  --kolor-linia: #2f3555;
  --kolor-linia-mocna: #737a9e;
  --kolor-pasek: #050712;
  --kolor-na-pasku: #eef0fa;
  --kolor-akcent: #3cc7b4;
  --kolor-akcent-mocny: #6fdccd;
  --kolor-akcent-tlo: #12332f;
  --kolor-na-akcencie: #04201c;
  --kolor-fokus: #6fdccd;
  --kolor-wyroznienie: #3a3210;
  --stan-zywo: #ff6b7f;        --stan-zywo-tlo: #3a1520;
  --stan-zatwierdzony: #5bd48f; --stan-zatwierdzony-tlo: #12301f;
  --stan-czeka: #9db0ff;       --stan-czeka-tlo: #1c2550;
  --stan-uwaga: #ffc14f;       --stan-uwaga-tlo: #362708;
  --stan-blad: #ff8b80;        --stan-blad-tlo: #3a1614;
  --stan-online: #5bd48f;
  --stan-neutralny: #b4b9d6;   --stan-neutralny-tlo: #262b47;
  --druzyna-a: #c2410c; --druzyna-a-napis: #ffffff; --druzyna-a-tusz: #ff8f5c;
  --druzyna-b: #1d4ed8; --druzyna-b-napis: #ffffff; --druzyna-b-tusz: #8fb0ff;
  --kat-1: #b49bff; --kat-2: #5fd0e6; --kat-3: #a6d860; --kat-4: #f08bbd; --kat-5: #f0c05a; --kat-6: #aab3c7;
  --cien-1: 0 1px 2px rgba(0, 0, 0, .35);
  --cien-2: 0 2px 8px rgba(0, 0, 0, .40);
  --cien-3: 0 12px 32px rgba(0, 0, 0, .55);
  --cien-przycisk: inset 0 -3px 0 rgba(0, 0, 0, .28);
}

/* Niezależne od motywu */
:root {
  /* Typografia: fonty z public/fonty (OFL) z zapasowymi systemowymi */
  --font-tekst: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-liczby: "Saira Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif; /* wyniki, numery boisk, godziny */
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;         /* kody, identyfikatory */

  --rozm-xs: .8125rem;   /* 13 px — tylko metadane, nigdy jedyna informacja o stanie */
  --rozm-s: .9375rem;    /* 15 px — opisy, tabele na telefonie */
  --rozm-m: 1.0625rem;   /* 17 px — tekst podstawowy na telefonie */
  --rozm-l: 1.25rem;     /* 20 px — nazwy drużyn, przyciski główne */
  --rozm-xl: 1.5rem;     /* 24 px — tytuły ekranów */
  --rozm-2xl: 2rem;      /* 32 px — wynik w kafelku */
  --rozm-wynik: 4.5rem;  /* 72 px — punkty na przycisku sędziego i w meczu na żywo */
  --waga-normalna: 400;
  --waga-srednia: 600;
  --waga-mocna: 700;
  --waga-liczby: 800;
  --interlinia: 1.4;
  --interlinia-ciasna: 1.15;

  /* Odstępy (siatka 4 px) */
  --odst-1: 4px; --odst-2: 8px; --odst-3: 12px; --odst-4: 16px; --odst-5: 20px; --odst-6: 24px; --odst-8: 32px; --odst-10: 40px;
  --margines-telefon: 12px;          /* margines boczny od 360 px */
  --szer-tresci: 1200px;             /* panel organizatora na desktopie */
  --szer-kolumny: 560px;             /* strony kibica i trenera — jedna kolumna */

  /* Promienie */
  --prom-1: 6px; --prom-2: 10px; --prom-3: 14px; --prom-4: 18px; --prom-pelny: 999px;

  /* Cele dotyku */
  --dotyk-min: 48px;                 /* każdy przycisk i link na telefonie */
  --dotyk-duzy: 64px;                /* przycisk główny ekranu (Wyślij wynik, Włącz powiadomienia) */
  --dotyk-punkt: 27svh;              /* przycisk punktu drużyny u sędziego: ≥ 27% wysokości ekranu */
  --dotyk-odstep: 10px;              /* minimalny odstęp między sąsiednimi celami dotyku */

  /* Ruch (wyłączany przez prefers-reduced-motion) */
  --czas-szybki: 120ms;
  --czas-sredni: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --czas-szybki: 0ms; --czas-sredni: 0ms; }
}

/* ===== marka produktu: akcent kobaltowy w zakresie .brand, warianty logo (web/site/brand/README.md) ===== */
/*
 * Marka produktu (paczka znaku v1.0 od Damiana, 31.10.2026; pliki i zasady: web/site/brand/README.md). Jeden plik dla
 * strony produktu (web/site/build.mjs dokleja go po tokenach) i panelu (wejście panel.ts).
 *
 * Zakres `.brand` (klasa na <body>): strona produktu zawsze, panel tylko na ekranach konta i sklepu (Panel.svelte).
 * Ekrany turniejowe (stolik, sędzia, kibic, ekran hali, panel turnieju) zostają przy tokenach T-P74 — nie nadpisujemy
 * :root ani design/online/tokeny.css.
 *
 * Akcent = kobalt marki zamiast morskiego. Kontrast WCAG (liczony):
 *  jasny  — #2447D8: biały tekst na przycisku 7,08:1; na tle #eef0f5 6,21:1. Mocny #1b37b0 (link, hover): na bieli 9,46:1,
 *           na tle 8,30:1, biały tekst na hoverze 9,46:1.
 *  ciemny — kobalt na granacie ma 2,4:1 (za mało), więc jaśniejszy wariant: #7d98ff z tekstem #0b1030 6,90:1, na
 *           powierzchni #181c31 6,25:1, na tle #0e1120 6,97:1; mocny #a8b9ff (link, hover) na powierzchni 8,84:1,
 *           na #20253f 7,90:1, tekst #0b1030 na nim 9,77:1.
 * Turkus #00BFA6 tylko jako grafika (2,33:1 na bieli — nigdy mały tekst na jasnym tle). Stan „czeka” (#3346a8 / #9db0ff)
 * jest też niebieski: stany mają zawsze słowo i znak, akcent to przyciski i linki — rozróżnia je kształt, nie sam kolor.
 * Blok ciemny dwa razy (prefers-color-scheme i [data-theme="dark"]), jak w tokenach — przy zmianie popraw oba.
 */
:root {
  --brand-cobalt: #2447d8;
  --brand-turquoise: #00bfa6;
  --brand-navy: #151936;
}

.brand {
  --kolor-akcent: #2447d8;
  --kolor-akcent-mocny: #1b37b0;
  --kolor-akcent-tlo: #e6ebfc;
  --kolor-na-akcencie: #ffffff;
  --kolor-fokus: #2447d8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand {
    --kolor-akcent: #7d98ff;
    --kolor-akcent-mocny: #a8b9ff;
    --kolor-akcent-tlo: #1a2352;
    --kolor-na-akcencie: #0b1030;
    --kolor-fokus: #a8b9ff;
  }
}
:root[data-theme="dark"] .brand {
  --kolor-akcent: #7d98ff;
  --kolor-akcent-mocny: #a8b9ff;
  --kolor-akcent-tlo: #1a2352;
  --kolor-na-akcencie: #0b1030;
  --kolor-fokus: #a8b9ff;
}

/* Logo w dwóch wariantach obok siebie: na jasnej powierzchni kolorowe, na ciemnej `dark` (biały napis). Przełącza
   motyw systemu i wybór użytkownika (<html data-theme>); strona produktu bez JS korzysta tylko z pierwszego. */
.logo-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-on-light { display: none; }
  :root:not([data-theme="light"]) .logo-on-dark { display: block; }
}
:root[data-theme="dark"] .logo-on-light { display: none; }
:root[data-theme="dark"] .logo-on-dark { display: block; }

/* ===== fonty z /fonty/ (public/fonty, SIL OFL 1.1) ===== */
/*
 * Fonty interfejsu online: podzbiór public/fonty (SIL OFL 1.1, bez sieci) — Barlow 400/600/700 (tekst) i Saira Condensed
 * 800 (liczby, --waga-liczby), latin i latin-ext (polskie znaki). Adresy /fonty/… zostają po budowaniu bez zmian:
 * pliki serwuje server.js z public/fonty (nie kopiujemy ich do public/app). Przeglądarka pobiera tylko użyte kroje.
 */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonty/barlow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonty/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonty/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonty/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonty/barlow-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonty/barlow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonty/saira-condensed-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonty/saira-condensed-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== baza stron online ===== */
/*
 * Podstawa wszystkich stron interfejsu online (tokeny: tokeny.css, T-P74). Komponenty mają style w swoich plikach
 * .svelte (zakres komponentu). Zasady z design/online/README.md: od 360 px bez przewijania w bok, cele dotyku ≥ 48 px,
 * ruch tylko transform/opacity i wyłączany przez prefers-reduced-motion.
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  background: var(--kolor-tlo);
  color: var(--kolor-tekst);
  font: var(--waga-normalna) var(--rozm-m) / var(--interlinia) var(--font-tekst);
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: anywhere;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--kolor-akcent-mocny); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--kolor-fokus); outline-offset: 2px; }
/* liczby (wyniki, numery boisk, godziny): stała szerokość cyfr, żeby nic nie skakało przy 9 → 10 */
.liczby { font-family: var(--font-liczby); font-weight: var(--waga-liczby); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tylko-czytnik {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ===== strona produktu ===== */
/*
 * Strona produktu (docs/turniej-sklep-spec.md §2.4). Tokeny T-P74 bez zmian, tu tylko rozszerzenia --site-*.
 *
 * Kierunek: „hala z góry”. Granat produktu (--kolor-pasek) to parkiet, białe linie to boisko (siatka, linie 3 m),
 * połowy boiska w kolorach drużyn A/B z tokenów. Saira Condensed jak na tablicy wyników (nagłówki, ceny, numery),
 * Barlow do czytania. Akcent = kobalt marki (web/src/lib/brand/brand.css, zakres .brand na <body>) tylko na działaniach
 * (przyciski, linki, fokus); turkus marki tylko jako grafika (poświata hali, linie, paski). Stan = słowo + znak + kolor —
 * tablica w pierwszym ekranie pokazuje trzy stany wyniku. Jedyny ruch: kropka „na żywo” (bez przy reduced-motion).
 * Bez JS: menu telefonu i FAQ w <details>. Od 360 px bez przewijania w bok; motyw ciemny z prefers-color-scheme.
 * Logo z paczki marki (web/site/brand/README.md): poziome ≥ 160 px, wariant dark w ciemnym motywie (klasy logo-on-*).
 */
:root {
  --site-szer: 1240px;
  --site-tekst: 70ch;
  --site-gutter: clamp(16px, 4vw, 44px);
  --site-h1: clamp(2.3rem, 1.2rem + 3.2vw, 3.8rem);
  --site-h2: clamp(1.6rem, 1.15rem + 1.6vw, 2.5rem);
  --site-sekcja: clamp(48px, 7vw, 104px);
  --site-linia: rgba(255, 255, 255, .78);
  --site-parkiet-a: rgba(194, 65, 12, .11);
  --site-parkiet-b: rgba(29, 78, 216, .2);
  --site-ramka: #0b0e1f;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { display: flex; flex-direction: column; }
.s-main { flex: 1 0 auto; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
.s-wrap { width: 100%; max-width: var(--site-szer); margin: 0 auto; padding: 0 var(--site-gutter); }

.s-skip { position: absolute; left: 8px; top: -60px; z-index: 10; padding: 10px 14px; border-radius: var(--prom-2); background: var(--kolor-powierzchnia); color: var(--kolor-akcent-mocny); font-weight: var(--waga-mocna); }
.s-skip:focus { top: 8px; }
.s-preview { margin: 0; padding: 6px var(--site-gutter); background: var(--stan-uwaga-tlo); color: var(--kolor-tekst); font-size: var(--rozm-s); text-align: center; border-bottom: 1px solid var(--kolor-linia); }
.s-preview span { color: var(--stan-uwaga); font-weight: 900; }

/* ---------------------------------------------------------------- przyciski */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--dotyk-min); padding: 0 18px; border-radius: var(--prom-2); font-weight: var(--waga-mocna); text-decoration: none; text-align: center; line-height: 1.15; border: 2px solid transparent; }
.s-btn-big { min-height: 58px; padding: 0 26px; font-size: 1.08rem; }
.s-btn-main { background: var(--kolor-akcent); color: var(--kolor-na-akcencie); box-shadow: var(--cien-przycisk); }
.s-btn-main:hover { background: var(--kolor-akcent-mocny); }
.s-btn-line { border-color: var(--kolor-linia-mocna); color: var(--kolor-tekst); background: var(--kolor-powierzchnia); }
.s-btn-line:hover { border-color: var(--kolor-akcent); }
.s-btn-light { border-color: var(--site-linia); color: var(--kolor-na-pasku); background: transparent; }
.s-btn-light:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.s-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479.98px) { .s-actions .s-btn { flex: 1 1 100%; } }

/* ---------------------------------------------------------------- nagłówek */
.s-top, .s-top * { overflow-wrap: normal; }
.s-brand, .s-login, .s-menu > summary { white-space: nowrap; }
@media (max-width: 559.98px) { .s-top .s-lang { display: none; } }
.s-top { background: var(--kolor-powierzchnia); border-bottom: 1px solid var(--kolor-linia); position: relative; z-index: 3; }
.s-top-in { min-height: 66px; display: flex; align-items: center; gap: 10px 18px; }
/* logo: SVG ma pole ochronne w viewBox (848 × 216), więc bez dodatkowego odstępu; display przełączają klasy logo-on-* */
.s-brand { flex: none; display: inline-flex; align-items: center; min-height: var(--dotyk-min); margin-left: -3px; border-radius: var(--prom-2); }
.s-logo { width: 200px; height: auto; }
.s-nav { margin-left: auto; }
.s-nav-list { display: none; list-style: none; gap: 2px; }
.s-nav a { display: flex; align-items: center; min-height: var(--dotyk-min); padding: 0 12px; border-radius: var(--prom-2); color: var(--kolor-tekst); text-decoration: none; font-weight: var(--waga-srednia); }
.s-nav a:hover { background: var(--kolor-powierzchnia-2); }
.s-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--kolor-akcent); border-radius: var(--prom-2) var(--prom-2) 0 0; }
.s-menu > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: var(--dotyk-min); padding: 0 14px; border: 1px solid var(--kolor-linia-mocna); border-radius: var(--prom-2); cursor: pointer; font-weight: var(--waga-mocna); }
.s-menu > summary::-webkit-details-marker { display: none; }
.s-menu > summary::before { content: "☰"; font-size: 1.1rem; }
@media (max-width: 419.98px) {
  .s-menu > summary { justify-content: center; min-width: var(--dotyk-min); padding: 0 12px; }
  .s-menu-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.s-menu[open] > summary::before { content: "×"; font-size: 1.4rem; line-height: 1; }
.s-menu ul { list-style: none; position: absolute; left: 0; right: 0; top: 100%; padding: 8px var(--site-gutter) 16px; background: var(--kolor-powierzchnia); border-bottom: 1px solid var(--kolor-linia); box-shadow: var(--cien-2); display: grid; gap: 2px; }
.s-menu ul a { font-size: 1.12rem; }
@media (min-width: 1024px) { .s-nav-list { display: flex; } .s-menu { display: none; } }
@media (max-width: 479.98px) { .s-login { padding: 0 12px; } .s-logo { width: 160px; } .s-top-in { gap: 8px; } }

.s-lang ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.s-lang a { display: inline-flex; align-items: center; min-height: var(--dotyk-min); padding: 0 10px; border-radius: var(--prom-2); color: var(--kolor-tekst); text-decoration: none; font-weight: var(--waga-srednia); }
.s-lang a[aria-current="true"] { background: var(--kolor-powierzchnia-2); font-weight: var(--waga-mocna); box-shadow: inset 0 -3px 0 var(--kolor-akcent); }
.s-lang.compact a { font: var(--waga-liczby) 1rem/1 var(--font-liczby); letter-spacing: .04em; }

/* ---------------------------------------------------------------- ramki urządzeń */
.d-laptop, .d-phone, .d-tv { position: relative; }
.d-screen { overflow: hidden; background: var(--kolor-powierzchnia); }
.d-screen img { width: 100%; }
.d-laptop .d-screen { border: clamp(6px, .9vw, 12px) solid var(--site-ramka); border-bottom-width: clamp(10px, 1.4vw, 18px); border-radius: 14px 14px 4px 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.d-laptop::after { content: ""; display: block; height: clamp(8px, 1.1vw, 14px); margin: 0 -7%; border-radius: 0 0 16px 16px; background: linear-gradient(#3a3f63, #22263f); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.d-phone .d-screen { border: clamp(5px, .7vw, 9px) solid var(--site-ramka); border-radius: clamp(22px, 3vw, 38px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 24px 48px rgba(0, 0, 0, .45); }
.d-tv .d-screen { border: clamp(6px, .8vw, 12px) solid var(--site-ramka); border-radius: 8px; box-shadow: 0 30px 60px rgba(22, 26, 58, .35); }
.d-tv::after { content: ""; display: block; width: 26%; height: 14px; margin: 0 auto; border-radius: 0 0 10px 10px; background: var(--site-ramka); }

/* ---------------------------------------------------------------- strona główna: hala */
.h-hero { position: relative; overflow: hidden; color: var(--kolor-na-pasku); padding-bottom: clamp(28px, 4vw, 48px);
  background: radial-gradient(55% 70% at 88% 8%, rgba(36, 71, 216, .42), transparent 70%), radial-gradient(45% 60% at 0% 100%, rgba(0, 191, 166, .16), transparent 70%), var(--kolor-pasek); }
.h-court { position: absolute; z-index: 0; left: -8%; top: 50%; width: 136%; height: auto; transform: translateY(-50%); overflow: visible; }
.h-court .h-floor { fill: rgba(255, 255, 255, .035); }
.h-court .h-line { fill: none; stroke: var(--site-linia); stroke-width: .7; opacity: .4; }
.h-court .h-net { stroke: #fff; stroke-width: 1.6; stroke-dasharray: .2 3; stroke-linecap: round; opacity: .7; }
.h-court-a { fill: var(--site-parkiet-a); }
.h-court-b { fill: var(--site-parkiet-b); }
.h-hero-devices > figure { position: relative; z-index: 1; }
.h-hero-in { position: relative; display: grid; gap: clamp(28px, 4vw, 48px); padding-top: clamp(36px, 6vw, 84px); padding-bottom: clamp(28px, 4vw, 48px); align-items: center; }
@media (min-width: 1000px) { .h-hero-in { grid-template-columns: minmax(0, 9fr) minmax(0, 14fr); } }
/* dyscyplina: symbol marki (≥ 32 px, alt="" — obok nazwa) i nazwa; na ciemnym tle wariant white (kobaltowa część
   kolorowego symbolu ma na granacie 2,4:1) — w hali zawsze, w cenniku przez klasy logo-on-* */
.s-discipline { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 4px 14px 4px 4px; border-radius: var(--prom-pelny); font: var(--waga-liczby) 1.02rem/1 var(--font-liczby); letter-spacing: .08em; text-transform: uppercase; background: var(--kolor-powierzchnia); border: 1px solid var(--kolor-linia); color: var(--kolor-tekst); }
.s-discipline img { flex: none; width: 32px; height: 32px; }
.h-hero .s-discipline { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); color: #fff; }
.h-hero h1 { font: var(--waga-liczby) var(--site-h1)/.98 var(--font-liczby); letter-spacing: -.005em; text-wrap: balance; overflow-wrap: break-word; }
.h-hero-sub { margin: 22px 0 28px; font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); max-width: 52ch; color: rgba(255, 255, 255, .9); }
.h-hero-note { margin-top: 16px; font-size: var(--rozm-s); color: rgba(255, 255, 255, .82); }
.h-hero-try { margin-top: 4px; }
.h-hero :focus-visible, .h-cta :focus-visible { outline-color: #fff; }
.h-hero-devices { position: relative; padding: 0 clamp(48px, 9vw, 120px) clamp(16px, 2vw, 28px) 0; min-width: 0; }
@media (max-width: 999.98px) { .h-hero-devices { margin: 12px 4% 0; } .h-court { left: -6%; width: 112%; } }
.h-hero-devices .d-phone { position: absolute; right: 0; bottom: 0; width: clamp(104px, 27%, 210px); }

/* tablica wyników: trzy boiska w trzech stanach */
.h-board { position: relative; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; border-radius: var(--prom-3); overflow: hidden; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .16); }
@media (min-width: 1000px) { .h-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.h-board-court { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 2px 16px; padding: 14px 18px; background: #0d1028; }
.h-board-nr { font: var(--waga-liczby) 1.05rem/1 var(--font-liczby); color: rgba(255, 255, 255, .78); }
.h-board-score { grid-row: span 2; font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.1rem); line-height: 1; letter-spacing: .01em; }
.h-board-score .a { color: #ff9e70; }
.h-board-score .b { color: #9db6ff; }
.h-board-score .sep { color: rgba(255, 255, 255, .5); padding: 0 .08em; }
.h-state { white-space: nowrap; overflow-wrap: normal; display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 10px 3px 8px; border-radius: var(--prom-pelny); font-weight: var(--waga-mocna); font-size: var(--rozm-s); }
.h-board-court.live .h-state { background: #3a1520; color: #ff8a9a; }
.h-board-court.waits .h-state { background: #1c2550; color: #b3c2ff; }
.h-board-court.ok .h-state { background: #12301f; color: #6fe0a0; }
.h-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: h-pulse 1.6s ease-out infinite; }
@keyframes h-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 138, 154, .7); } 100% { box-shadow: 0 0 0 9px rgba(255, 138, 154, 0); } }
@media (prefers-reduced-motion: reduce) { .h-dot { animation: none; } }
.h-half { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.h-board-note { position: relative; margin-top: 12px; max-width: 76ch; font-size: var(--rozm-s); color: rgba(255, 255, 255, .8); }

.s-h2 { font: var(--waga-liczby) var(--site-h2)/1.02 var(--font-liczby); letter-spacing: -.003em; margin-bottom: 28px; text-wrap: balance; }
h3 { font-size: 1.2rem; line-height: 1.25; margin: 0 0 6px; }

/* trzy kroki — sekwencja, więc numery; linia jak linia boczna boiska */
.h-steps-sec { padding: var(--site-sekcja) 0; }
.h-steps { list-style: none; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); counter-reset: none; }
@media (min-width: 820px) { .h-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }
.h-steps li { position: relative; padding: 0 0 0 76px; min-height: 64px; }
@media (min-width: 820px) {
  .h-steps li { padding: 84px 32px 0 0; }
  .h-steps li::before { content: ""; position: absolute; left: 64px; right: 0; top: 31px; border-top: 3px solid var(--kolor-linia); }
  .h-steps li:last-child::before { display: none; }
}
.h-step-nr { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 3px solid var(--kolor-akcent); font-size: 2rem; line-height: 1; }
.h-steps h3 { font: var(--waga-liczby) 1.55rem/1.05 var(--font-liczby); }
.h-steps p { color: var(--kolor-tekst-2); max-width: 36ch; }

/* funkcje ze zrzutami */
.h-show { padding: var(--site-sekcja) 0; background: var(--kolor-powierzchnia); border-top: 1px solid var(--kolor-linia); border-bottom: 1px solid var(--kolor-linia); }
.h-show-row { display: grid; gap: 28px; align-items: center; margin-bottom: clamp(48px, 7vw, 96px); }
.h-show-row .d-phone { width: min(300px, 78%); margin: 0 auto; }
@media (min-width: 820px) {
  .h-show-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .h-show-row.wide { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}
.h-show-text h3 { font: var(--waga-liczby) clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem)/1.02 var(--font-liczby); margin-bottom: 12px; }
.h-show-text p { color: var(--kolor-tekst-2); font-size: 1.1rem; max-width: 44ch; }
.h-also { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border-top: 3px solid var(--kolor-tekst); }
@media (min-width: 680px) { .h-also { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1100px) { .h-also { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.h-also > div { padding: 18px 0 20px; border-bottom: 1px solid var(--kolor-linia); }
.h-also dt { font-weight: var(--waga-mocna); font-size: 1.1rem; margin-bottom: 4px; }
.h-also dd { color: var(--kolor-tekst-2); }
.s-pill { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 1px 9px; border-radius: var(--prom-pelny); background: var(--stan-neutralny-tlo); color: var(--stan-neutralny); font: var(--waga-mocna) var(--rozm-xs)/1.5 var(--font-tekst); }
.s-more { margin-top: 24px; font-weight: var(--waga-mocna); }
.s-more a, .h-offline a { display: inline-flex; align-items: center; min-height: var(--dotyk-min); }

.h-net-sec { padding: var(--site-sekcja) 0; }
.h-split { display: grid; gap: 40px; }
@media (min-width: 900px) { .h-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
.h-offline { padding: 24px 26px; border-radius: var(--prom-3); background: var(--kolor-powierzchnia); border: 1px solid var(--kolor-linia); border-left: 6px solid var(--stan-zatwierdzony); }
.h-offline p { max-width: 52ch; }
.s-checks { list-style: none; display: grid; gap: 12px; }
.s-checks li { position: relative; padding-left: 32px; }
.s-checks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--stan-zatwierdzony-tlo); color: var(--stan-zatwierdzony); font-weight: 900; font-size: .85rem; }

.h-cta { position: relative; overflow: hidden; background: var(--kolor-pasek); color: var(--kolor-na-pasku); padding: var(--site-sekcja) 0; }
.h-cta::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 5px dotted rgba(255, 255, 255, .35); }
.h-cta-in { position: relative; display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .h-cta-in { grid-template-columns: minmax(0, 1fr) auto; } .h-cta::before { left: 62%; } }
.h-cta .s-h2 { margin-bottom: 10px; }
.h-cta p { color: rgba(255, 255, 255, .9); max-width: 52ch; }
.h-cta-in > div:first-child { background: var(--kolor-pasek); padding-right: 16px; }

/* ---------------------------------------------------------------- strony z treścią */
.s-page { display: grid; gap: 40px; padding-top: clamp(32px, 5vw, 64px); padding-bottom: var(--site-sekcja); }
@media (min-width: 1100px) { .s-page.with-aside { grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; } .s-aside { position: sticky; top: 24px; } }
.s-pricing { padding-top: clamp(32px, 5vw, 64px); padding-bottom: var(--site-sekcja); }
.s-aside { display: grid; gap: 16px; align-content: start; }
.s-aside-card { display: grid; gap: 12px; padding: 24px; border-radius: var(--prom-3); background: var(--kolor-pasek); color: var(--kolor-na-pasku); }
.s-aside-card p:not(.s-aside-title) { color: rgba(255, 255, 255, .88); }
.s-aside-card :focus-visible { outline-color: #fff; }
.s-aside-title { font: var(--waga-liczby) 1.45rem/1.05 var(--font-liczby); }
.s-aside-link { display: inline-flex; align-items: center; min-height: var(--dotyk-min); color: #fff; font-weight: var(--waga-mocna); }
.s-aside-contact { padding: 20px 24px; border-radius: var(--prom-3); border: 1px solid var(--kolor-linia); background: var(--kolor-powierzchnia); }
.s-aside-contact a { display: inline-flex; align-items: center; min-height: var(--dotyk-min); overflow-wrap: anywhere; }
.s-page-head { max-width: var(--site-tekst); margin-bottom: 28px; padding-bottom: 20px; background: linear-gradient(90deg, var(--kolor-akcent), var(--brand-turquoise)) left bottom / 100% 3px no-repeat; }
.s-page-head h1 { font: var(--waga-liczby) clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem)/1 var(--font-liczby); text-wrap: balance; }
.s-lead { margin-top: 14px; font-size: 1.18rem; color: var(--kolor-tekst-2); }
.s-meta { margin-top: 8px; font-size: var(--rozm-s); color: var(--kolor-tekst-2); }
.s-md { max-width: var(--site-tekst); font-size: 1.04rem; }
.s-md > * + * { margin-top: 14px; }
.s-md h2 { margin-top: 44px; font: var(--waga-liczby) 1.75rem/1.05 var(--font-liczby); }
.s-md h3 { margin-top: 28px; }
.s-md h2 + *, .s-md h3 + * { margin-top: 10px; }
.s-md ul, .s-md ol { padding-left: 1.4em; display: grid; gap: 6px; }
.s-md li::marker { color: var(--kolor-tekst-2); font-weight: var(--waga-mocna); }
.s-md blockquote { margin: 0; padding: 12px 16px; border-left: 4px solid var(--kolor-linia-mocna); background: var(--kolor-powierzchnia-2); color: var(--kolor-tekst-2); border-radius: 0 var(--prom-2) var(--prom-2) 0; }
.s-md code { font: .92em var(--font-mono); padding: 1px 5px; border-radius: 4px; background: var(--kolor-powierzchnia-2); }
.s-md hr { border: 0; border-top: 1px solid var(--kolor-linia); margin: 28px 0; }
.s-md a { overflow-wrap: anywhere; }
.s-md > p:last-child > a:only-child { display: inline-flex; align-items: center; min-height: var(--dotyk-min); font-weight: var(--waga-mocna); }

.table-wrap { max-width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--kolor-powierzchnia); border: 1px solid var(--kolor-linia); }
th, td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--kolor-linia); }
thead th { background: var(--kolor-powierzchnia-2); font-size: var(--rozm-s); color: var(--kolor-tekst-2); font-weight: var(--waga-mocna); }
tbody tr:last-child > * { border-bottom: 0; }

.s-banner { max-width: var(--site-tekst); margin: 0 0 24px; padding: 14px 16px; border-radius: var(--prom-2); border: 1px solid var(--kolor-linia); }
.s-banner.warn { background: var(--stan-uwaga-tlo); border-color: var(--stan-uwaga); }
.s-banner.info { background: var(--stan-czeka-tlo); border-color: var(--stan-czeka); font-size: var(--rozm-s); }
.s-banner-title { font-weight: var(--waga-mocna); color: var(--stan-uwaga); margin-bottom: 2px; }
.s-banner-title span, .s-banner.info span, .p-stamp-title span { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 4px; border-radius: 50%; border: 2px solid currentColor; font-weight: 900; line-height: 1; }
.s-banner.info span { color: var(--stan-czeka); }

/* FAQ */
.s-faq { max-width: var(--site-tekst); display: grid; gap: 0; margin-top: 8px; border-top: 1px solid var(--kolor-linia); }
.s-faq details { border-bottom: 1px solid var(--kolor-linia); }
.s-faq summary { list-style: none; display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 12px 4px; cursor: pointer; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: "+"; margin-left: auto; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--kolor-linia-mocna); font-weight: 700; font-size: 1.2rem; color: var(--kolor-akcent-mocny); }
.s-faq details[open] summary::after { content: "−"; background: var(--kolor-akcent-tlo); border-color: var(--kolor-akcent); }
.s-faq summary:hover h2 { color: var(--kolor-akcent-mocny); }
.s-faq summary h2 { font: var(--waga-mocna) 1.12rem/1.3 var(--font-tekst); }
.s-faq .s-md { padding: 0 52px 20px 4px; color: var(--kolor-tekst-2); }
.s-faq details:target summary h2 { text-decoration: underline; text-decoration-color: var(--kolor-akcent); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* ---------------------------------------------------------------- cennik */
.s-pricing section { margin-top: clamp(40px, 5vw, 64px); }
.s-pricing section > h2 { font: var(--waga-liczby) clamp(1.7rem, 1.3rem + 1vw, 2.2rem)/1.05 var(--font-liczby); margin-bottom: 8px; }
.s-pricing section > p { max-width: var(--site-tekst); color: var(--kolor-tekst-2); margin-bottom: 18px; }
/* „ceny przykładowe”: pieczątka — widoczna od razu, nie do pomylenia z ceną */
.p-stamp { max-width: 560px; margin: 4px 0 8px; padding: 14px 18px; border: 3px dashed var(--stan-uwaga); border-radius: var(--prom-2); background: var(--stan-uwaga-tlo); transform: rotate(-1.2deg); }
.p-stamp-title { font: var(--waga-liczby) 1.35rem/1.1 var(--font-liczby); color: var(--stan-uwaga); margin-bottom: 4px; }
.s-sample-mark { color: var(--stan-uwaga); font-weight: 900; margin-left: 2px; }

.p-tiers { list-style: none; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .p-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .p-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-tier { position: relative; display: grid; align-content: start; gap: 8px; padding: 20px 20px 22px; border-radius: var(--prom-3); background: var(--kolor-powierzchnia); border: 1px solid var(--kolor-linia); box-shadow: var(--cien-1); }
.p-tier-name { margin: 0; }
.p-letter { display: inline-grid; place-items: center; min-width: 58px; height: 58px; padding: 0 10px; border-radius: 12px; background: var(--kolor-pasek); color: var(--kolor-na-pasku); font-size: 2rem; line-height: 1; }
.p-price { font-size: clamp(2.3rem, 1.9rem + 1vw, 2.9rem); line-height: 1; margin-top: 8px; white-space: nowrap; }
.p-matches b { display: block; font-size: 1.08rem; }
.p-matches span { color: var(--kolor-tekst-2); font-size: var(--rozm-s); }
.p-example { color: var(--kolor-tekst-2); font-size: var(--rozm-s); }
/* pasek rozmiaru: ile meczów mieści próg (skala logarytmiczna 50 → 400) */
.p-bar { display: block; height: 10px; border-radius: 5px; background: var(--kolor-powierzchnia-2); overflow: hidden; }
.p-bar span { display: block; height: 100%; width: 25%; border-radius: 5px; background: linear-gradient(90deg, var(--kolor-akcent), var(--brand-turquoise)); }
.p-size-2 .p-bar span { width: 50%; }
.p-size-3 .p-bar span { width: 75%; }
.p-size-4 .p-bar span { width: 100%; }

.s-list-plain { list-style: none; display: grid; gap: 10px; max-width: var(--site-tekst); }
.s-list-plain li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 14px 18px; background: var(--kolor-powierzchnia); border: 1px solid var(--kolor-linia); border-radius: var(--prom-2); }
.s-price { font: var(--waga-liczby) 1.35rem/1.1 var(--font-liczby); white-space: nowrap; }
.s-cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .s-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s-card { padding: 24px; border-radius: var(--prom-3); background: var(--kolor-powierzchnia); border: 1px solid var(--kolor-linia); }
.s-cards.two .s-card:last-child { background: var(--kolor-pasek); color: var(--kolor-na-pasku); border-color: transparent; }
.s-cards.two .s-card:last-child small { color: rgba(255, 255, 255, .8); }
.s-cards.two .s-card:last-child .s-checks li::before { background: rgba(255, 255, 255, .14); color: #6fe0a0; }
.s-card h3 { font: var(--waga-liczby) 1.5rem/1.05 var(--font-liczby); }
.s-big-price { margin: 8px 0 16px; font: var(--waga-liczby) clamp(2.4rem, 2rem + 1vw, 3rem)/1 var(--font-liczby); }
.s-big-price small { font: var(--waga-normalna) var(--rozm-s) var(--font-tekst); color: var(--kolor-tekst-2); }
.s-callout { max-width: var(--site-tekst); padding: 24px 26px; border-radius: var(--prom-3); background: var(--kolor-powierzchnia); border: 1px solid var(--kolor-linia); border-left: 6px solid var(--kolor-tekst); }
.s-callout a { display: inline-flex; align-items: center; min-height: var(--dotyk-min); font-weight: var(--waga-mocna); }
/* „Wypróbuj na pokazie” w cenniku (T-P86 E3): ten sam callout, akcent marki zamiast neutralnej krawędzi */
.s-callout.s-try { border-left-color: var(--kolor-akcent); background: var(--kolor-akcent-tlo); }
.s-pricing .s-try > p { color: var(--kolor-tekst); }

/* ---------------------------------------------------------------- stopka */
.s-foot { background: var(--kolor-powierzchnia); border-top: 1px solid var(--kolor-linia); font-size: var(--rozm-s); }
.s-foot-in { display: grid; gap: 24px; padding-top: 40px; padding-bottom: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .s-foot-in { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } }
.s-foot h2 { font: var(--waga-liczby) 1.05rem/1.2 var(--font-liczby); letter-spacing: .02em; margin-bottom: 6px; }
.s-foot ul { list-style: none; display: grid; }
.s-foot ul a, .s-foot-col > p > a { display: inline-flex; align-items: center; min-height: var(--dotyk-min); }
.s-foot a[aria-current="page"] { font-weight: var(--waga-mocna); }
.s-foot-brand { margin-left: -3px; }
.s-foot-logo { width: 184px; height: auto; }
.s-foot-tagline { font: var(--waga-liczby) 1.1rem/1.2 var(--font-liczby); letter-spacing: .01em; }
.s-foot-note { color: var(--kolor-tekst-2); }
.s-foot-bottom { padding-top: 12px; padding-bottom: 24px; border-top: 1px solid var(--kolor-linia); color: var(--kolor-tekst-2); }


/* Pomoc (T-P27): spis tematów i nawigacja między artykułami */
.s-help-back { display: inline-flex; align-items: center; min-height: var(--dotyk-min); }
.s-help-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; max-width: var(--site-tekst); counter-reset: temat; }
.s-help-list li { counter-increment: temat; }
.s-help-list a { position: relative; display: grid; gap: 4px; min-height: var(--dotyk-min); padding: 14px 16px 14px 56px; border: 1px solid var(--kolor-linia); border-radius: var(--prom-2); background: var(--kolor-powierzchnia); color: var(--kolor-tekst); text-decoration: none; }
.s-help-list a::before { content: counter(temat); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--kolor-akcent); font-weight: var(--waga-mocna); line-height: 1; }
.s-help-list a:hover { border-color: var(--kolor-akcent); }
.s-help-list strong { font-weight: var(--waga-mocna); }
.s-help-list span { color: var(--kolor-tekst-2); font-size: var(--rozm-s); }
.s-help-pager { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 40px; max-width: var(--site-tekst); }
@media (min-width: 720px) { .s-help-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s-help-pager a { display: grid; gap: 2px; min-height: var(--dotyk-min); padding: 12px 16px; border: 1px solid var(--kolor-linia); border-radius: var(--prom-2); color: var(--kolor-tekst); text-decoration: none; font-weight: var(--waga-mocna); }
.s-help-pager a:hover { border-color: var(--kolor-akcent); }
.s-help-pager small { color: var(--kolor-tekst-2); font-weight: var(--waga-srednia); }
.s-help-next { grid-column: -2; text-align: right; }

@media print {
  .s-top, .s-foot, .s-skip, .s-preview, .h-court, .s-aside, .s-help-pager { display: none; }
  .h-hero, .h-cta { background: none; color: #000; }
}