/* nl-tryb.css — dwie palety, jedna hierarchia.
   Ładować PO nl-typografia.css, bo nadpisuje --nl-zloto-tekst.

   Tryb jasny jest domyślny. Tryb ciemny włącza się w dwóch sytuacjach:
   1. system pacjentki ma prefers-color-scheme: dark i nie ma ręcznego wyboru,
   2. pacjentka wybrała tryb ciemny przełącznikiem (html[data-tryb="ciemny"]).

   Ręczny wybór ma pierwszeństwo nad systemem, w obie strony.
   Żaden kolor nie jest czystą bielą ani czystą czernią. */

:root{
  color-scheme: light;

  /* Powierzchnie */
  --nl-tlo:#FBF9F5;          /* tło bazowe strony */
  --nl-tlo-2:#F2EDE5;         /* sekcja przemienna, ramki wyróżnione */
  --nl-tlo-karta:#FFFFFF;     /* karty i tabele */
  --nl-tlo-pasek:#2B0217;     /* pasek nagłówka */
  --nl-tlo-wyspa:#1C0110;     /* kwadrat sygnetu */

  /* Tekst */
  --nl-naglowek:#3D0320;      /* nagłówki, bordo */
  --nl-tekst:#1C1A19;         /* tekst mocny */
  --nl-tekst-2:#3A322C;       /* tekst treści */
  --nl-tekst-3:#4A423C;       /* tekst drugorzędny */
  --nl-tekst-4:#5A5048;       /* tekst trzeciorzędny */
  --nl-tekst-pom:#6B6259;     /* tekst pomocniczy, daty, podpisy */

  /* Linie */
  --nl-linia:#E2DAD0;
  --nl-linia-lekka:#EDE7DF;
  --nl-linia-zlota:#C9B08E;

  /* Złoto */
  --nl-zloto-tekst:#7A6238;   /* 4,96:1 na #F2EDE5, 5,50:1 na #FBF9F5 — zdaje AA na każdym tle jasnym */
  --nl-zloto-etyk:#7A6238;    /* etykiety na tle #F2EDE5 */
  --nl-zloto-orn:#B08D57;     /* wyłącznie ornament, nigdy tekst */
  --nl-zloto-pasek:#B3965A;   /* złoto wciśniętych przycisków na ciemnym pasku nagłówka i w stopce, które są ciemne także w trybie jasnym:
                                 6,6:1 na #2B0217 (5,7:1 z poświatą), 6,0:1 na #3D0320 (WCAG 1.4.3). Bez tej linii tryb jasny
                                 dziedziczył kolor tekstu strony i wciśnięty „Jasny” miał 1,07:1 (znalezione 2026-09-26). */
  --nl-fokus:#A07C46;         /* pierścień fokusu: 3,30:1 na #F2EDE5, spełnia WCAG 1.4.11 */

  /* Wezwanie do działania */
  --nl-cta-tlo:#5C0632;
  --nl-cta-tlo-hover:#3D0420;
  --nl-cta-tekst:#F6ECEF;
  --nl-luk:#D4B98A;
  --nl-ring-hover:rgba(176,141,87,.42);
  --nl-cta-obram:#5C0632;
  --nl-cta2-tekst:#1C1A19;
  --nl-cta2-obram:#A07C46;

  /* Pasek nagłówka, tekst */
  --nl-pasek-tekst:#F6ECEF;
  --nl-pasek-link:#C79AB2;
  --nl-pasek-link-akt:#E7C4D2;

  /* Linki w treści */
  --nl-link:#7A1A42;
  --nl-link-hover:#3D0320;

  /* Stopka: własna, ciemna sekcja w obu trybach */
  --nl-stopka-tlo:#3D0320;
  --nl-stopka-tekst:#F6ECEF;
  --nl-stopka-link:#C79AB2;
  --nl-stopka-akcent:#E7C4D2;
  --nl-stopka-linia:#5C0632;
  --nl-stopka-obram:#7A2A54;
  --nl-stopka-cta:#8A1250;
  --nl-stopka-cta-hover:#B8195F;
  --nl-stopka-ikona:#CDA0B4;
  --nl-stopka-drobne:#C09AAE;

  /* Ostrzeżenie, ramki „uwaga” */
  --nl-uwaga:#9B3F3F;
  --nl-uwaga-tlo:#F7EFEF;

  /* Druga kość słoniowa: strony zabiegowe i technologiczne odróżniają się
     od wpisów blogowych o pół tonu. Decyzja właściciela z 24.08: zostaje. */
  --nl-tlo-alt:#F5F2EC;
  --nl-tlo-alt-2:#EFE9E1;

  /* Paleta gałęziowa stron problemowych */
  --nl-roz-tlo:#F5EEF0;
  --nl-roz-ciemny:#2E1A24;
  --nl-roz-akcent:#B98BA0;
  /* Gałąź różana — powierzchnie wyróżnione, linie i teksty (dawniej hardkodowane w kanwie).
     Jasna wartość = dawny literał, więc tryb jasny bez zmian; ciemna adaptuje do dark mode. */
  --nl-roz-tlo-2:#E9DDE1;
  --nl-roz-karta:#FAF6F7;
  --nl-roz-linia:#E0CBD3;
  --nl-roz-tekst:#4A4644;
  --nl-roz-pom:#8A7682;
  --nl-roz-pom-tekst:#6D5D67;  /* drobny tekst w odcieniu --nl-roz-pom: 4,66:1 na #E9DDE1, 6,16:1 na bieli (WCAG 1.4.3, decyzja Michała 30.09) */
  --nl-roz-akcent-tekst:#A66B86; /* nagłówek „Natural Look Clinic”: 3,62:1 na #F5EEF0, duży tekst (decyzja Michała 30.09) */

  /* Paleta gałęziowa ginekologii estetycznej */
  --nl-gin-akcent:#9B3357;
  --nl-gin-akcent-2:#7C2646;
  --nl-gin-jasny:#C98BA0;
  --nl-gin-tlo:#EAD7DA;
  --nl-gin-ciemny:#2C2124;
}

/* Paleta ciemna. Bazowa #0E1714 zgodnie z decyzją z 3 sierpnia.
   Bordo schodzi do roli akcentu, bo bordowy pasek na zielono-czarnym tle
   daje brudne zestawienie. Hierarchia zostaje: nagłówek ciepły, CTA bordowe,
   złoto ornamentem. */
@media (prefers-color-scheme: dark){
  :root:not([data-tryb="jasny"]){
    color-scheme: dark;

    --nl-tlo:#0E1714;
    --nl-tlo-2:#152220;
    --nl-tlo-karta:#16211D;
    --nl-tlo-pasek:#0A100E;
    --nl-tlo-wyspa:#060B09;

    --nl-naglowek:#EFE3D8;
    --nl-tekst:#EDE7DE;
    --nl-tekst-2:#D6CDC2;
    --nl-tekst-3:#C6BCB0;
    --nl-tekst-4:#B6ABA0;
    --nl-tekst-pom:#A2988C;

    --nl-linia:#2A3A34;
    --nl-linia-lekka:#223029;
    --nl-linia-zlota:#5E5238;

    --nl-zloto-tekst:#C9A567;
    --nl-zloto-etyk:#C9A567;
    --nl-zloto-orn:#8C7444;
    --nl-zloto-pasek:#B3965A;   /* złoto na ciemnym pasku: 6,4:1 na #1B1418 (WCAG 1.4.3) */
    --nl-fokus:#8C7444;

    --nl-cta-tlo:#8A1250;
    --nl-cta-tlo-hover:#A4275F;
    --nl-cta-tekst:#FBEEF3;
    --nl-luk:#C9A567;
    --nl-ring-hover:rgba(201,165,103,.42);
    --nl-cta-obram:#8A1250;
    --nl-cta2-tekst:#EDE7DE;
    --nl-cta2-obram:#C9A567;

    --nl-pasek-tekst:#F3E9EC;
    --nl-pasek-link:#CBB79A;
    --nl-pasek-link-akt:#EFE3D8;

    --nl-link:#E0B679;
    --nl-link-hover:#F0D6A6;

    --nl-stopka-tlo:#0A100E;
    --nl-stopka-tekst:#EFE3D8;
    --nl-stopka-link:#C0B6A8;
    --nl-stopka-akcent:#C9A567;
    --nl-stopka-linia:#223029;
    --nl-stopka-obram:#3A4A42;
    --nl-stopka-cta:#8A1250;
    --nl-stopka-cta-hover:#A4275F;
    --nl-stopka-ikona:#A2988C;
    --nl-stopka-drobne:#A2988C;

    

    --nl-uwaga:#D99A9A;

    --nl-uwaga-tlo:#231A1A;

    

    --nl-tlo-alt:#101A17;

    --nl-tlo-alt-2:#18241F;

    

    --nl-roz-tlo:#1B1418;

    --nl-roz-ciemny:#EDDFE4;

    --nl-roz-akcent:#C79AB2;
    --nl-roz-tlo-2:#241A20;
    --nl-roz-karta:#1F1620;
    --nl-roz-linia:#3A2A33;
    --nl-roz-tekst:#E4DDD3;
    --nl-roz-pom:#A99098;
    --nl-roz-pom-tekst:#A99098;
    --nl-roz-akcent-tekst:#C79AB2;

    

    --nl-gin-akcent:#C4778F;

    --nl-gin-akcent-2:#A85A75;

    --nl-gin-jasny:#8E6673;

    --nl-gin-tlo:#1E1719;

    --nl-gin-ciemny:#EFE3E5;
  }
}

/* Ten sam zestaw wartości, wymuszony przełącznikiem. Duplikat jest tu celowy:
   reguła w @media nie zadziała u pacjentki, której system stoi na jasnym. */
:root[data-tryb="ciemny"]{
  color-scheme: dark;

  --nl-tlo:#0E1714;
  --nl-tlo-2:#152220;
  --nl-tlo-karta:#16211D;
  --nl-tlo-pasek:#0A100E;
  --nl-tlo-wyspa:#060B09;

  --nl-naglowek:#EFE3D8;
  --nl-tekst:#EDE7DE;
  --nl-tekst-2:#D6CDC2;
  --nl-tekst-3:#C6BCB0;
  --nl-tekst-4:#B6ABA0;
  --nl-tekst-pom:#A2988C;

  --nl-linia:#2A3A34;
  --nl-linia-lekka:#223029;
  --nl-linia-zlota:#5E5238;

  --nl-zloto-tekst:#C9A567;
  --nl-zloto-etyk:#C9A567;
  --nl-zloto-orn:#8C7444;
    --nl-zloto-pasek:#B3965A;   /* złoto na ciemnym pasku: 6,4:1 na #1B1418 (WCAG 1.4.3) */
  --nl-fokus:#8C7444;

  --nl-cta-tlo:#8A1250;
  --nl-cta-tlo-hover:#A4275F;
  --nl-cta-tekst:#FBEEF3;
  --nl-luk:#C9A567;
  --nl-ring-hover:rgba(201,165,103,.42);
  --nl-cta-obram:#8A1250;
  --nl-cta2-tekst:#EDE7DE;
  --nl-cta2-obram:#C9A567;

  --nl-pasek-tekst:#F3E9EC;
  --nl-pasek-link:#CBB79A;
  --nl-pasek-link-akt:#EFE3D8;

  --nl-link:#E0B679;
  --nl-link-hover:#F0D6A6;

  --nl-stopka-tlo:#0A100E;
  --nl-stopka-tekst:#EFE3D8;
  --nl-stopka-link:#C0B6A8;
  --nl-stopka-akcent:#C9A567;
  --nl-stopka-linia:#223029;
  --nl-stopka-obram:#3A4A42;
  --nl-stopka-cta:#8A1250;
  --nl-stopka-cta-hover:#A4275F;
  --nl-stopka-ikona:#A2988C;
  --nl-stopka-drobne:#A2988C;

  

  --nl-uwaga:#D99A9A;

  --nl-uwaga-tlo:#231A1A;

  

  --nl-tlo-alt:#101A17;

  --nl-tlo-alt-2:#18241F;

  

  --nl-roz-tlo:#1B1418;

  --nl-roz-ciemny:#EDDFE4;

  --nl-roz-akcent:#C79AB2;
  --nl-roz-tlo-2:#241A20;
  --nl-roz-karta:#1F1620;
  --nl-roz-linia:#3A2A33;
  --nl-roz-tekst:#E4DDD3;
  --nl-roz-pom:#A99098;
  --nl-roz-pom-tekst:#A99098;
  --nl-roz-akcent-tekst:#C79AB2;

  

  --nl-gin-akcent:#C4778F;

  --nl-gin-akcent-2:#A85A75;

  --nl-gin-jasny:#8E6673;

  --nl-gin-tlo:#1E1719;

  --nl-gin-ciemny:#EFE3E5;
}

/* Zdjęcia w trybie ciemnym: bez rozjaśniania tła kadru.
   Sam kadr dostaje ciemniejsze obramowanie, żeby nie świecił krawędzią. */
:root[data-tryb="ciemny"] .nl-hero-kadr{ background:#0A100E; }
@media (prefers-color-scheme: dark){
  :root:not([data-tryb="jasny"]) .nl-hero-kadr{ background:#0A100E; }
}

/* Zmiana palety na jedną klatkę bez przejść. Właściwości własne nie są animowalne,
   więc element z przejściem na background-color albo color wyznaczałby punkt docelowy
   ze starej wartości tokena i zostawał o jedną paletę w tyle. Hover zachowuje przejścia,
   bo klasa żyje tylko przez dwie klatki po przełączeniu. */
:root.nl-bez-przejsc *,
:root.nl-bez-przejsc *::before,
:root.nl-bez-przejsc *::after{
  transition:none !important;
  animation-duration:1ms !important;
  animation-delay:0s !important;
}

/* Skala tekstu. Zoom, nie transform: przelicza układ, więc nic się nie nakłada.
   Ustawiana skryptem nl-skala.js; bez skryptu strona zostaje przy 100 procentach. */
body{ zoom:var(--nl-skala, 1); }

/* Przełącznik trybu i skali: ten sam wygląd, bo to ta sama rola. */
.nl-skala{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid var(--nl-cta2-obram); background:transparent;
  border-radius:100px; overflow:hidden;
}
.nl-skala button{
  appearance:none; -webkit-appearance:none;
  min-height:44px; min-width:44px; padding:0 12px;
  border:0; background:transparent; cursor:pointer;
  font-family:var(--nl-font-tresc); font-size:15px; letter-spacing:0.02em;
  color:var(--nl-tekst-3);
  transition:color 180ms cubic-bezier(0.23,1,0.32,1), background-color 180ms cubic-bezier(0.23,1,0.32,1);
}
.nl-skala button[aria-pressed="true"]{ background:transparent; color:var(--nl-zloto-pasek); }
.nl-skala button:active{ transform:scale(0.97); }
@media (hover:hover){
  .nl-skala button:hover{ color:var(--nl-tekst); }
  .nl-skala button[aria-pressed="true"]:hover{ color:var(--nl-zloto-pasek); }
}
.nl-skala button:focus-visible{ outline:2px solid var(--nl-fokus); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .nl-skala button{ transition:none; }
  .nl-skala button:active{ transform:none; }
}

/* Pasek dostępności w stopce: przełączniki na ciemnym tle stopki, nie na tle strony,
   więc obramowanie i tekst biorą tokeny stopki. */
.nl-dostepnosc .nl-tryb,
.nl-dostepnosc .nl-skala{ border-color:var(--nl-stopka-obram); }
.nl-dostepnosc .nl-tryb button,
.nl-dostepnosc .nl-skala button{ color:var(--nl-stopka-link); }
.nl-dostepnosc .nl-tryb button[aria-pressed="true"],
.nl-dostepnosc .nl-skala button[aria-pressed="true"]{ background:transparent; color:var(--nl-zloto-pasek); }
@media (hover:hover){
  .nl-dostepnosc .nl-tryb button:hover,
  .nl-dostepnosc .nl-skala button:hover{ color:var(--nl-stopka-tekst); }
  .nl-dostepnosc .nl-tryb button[aria-pressed="true"]:hover,
  .nl-dostepnosc .nl-skala button[aria-pressed="true"]:hover{ color:var(--nl-zloto-pasek); }
}

/* Wejście do sterowania gestami. Dłoń jest rysunkiem liniowym, nie piktogramem
   w kółku, i nigdy nie stoi bez podpisu: gest jest funkcją nieznaną. */
.nl-gest-wejscie{
  border-radius:100px;
  transition:border-color 200ms cubic-bezier(0.23,1,0.32,1), color 200ms cubic-bezier(0.23,1,0.32,1);
}
.nl-gest-wejscie svg{
  transition:transform 240ms cubic-bezier(0.23,1,0.32,1), color 200ms cubic-bezier(0.23,1,0.32,1);
}
.nl-gest-wejscie:active{ transform:scale(0.97); }
@media (hover:hover){
  .nl-gest-wejscie:hover{ border-color:var(--nl-zloto-orn); }
  .nl-gest-wejscie:hover svg{ transform:translateY(-2px) rotate(-4deg); color:var(--nl-stopka-akcent); }
}
.nl-gest-wejscie:focus-visible{ outline:2px solid var(--nl-fokus); outline-offset:3px; }

/* Wejście do wyszukiwarki. Bliźniacze wobec pigułki gestów, bo stoi obok niej
   w tym samym rzędzie narzędzi. Kształt trzymamy tutaj, nie w skrypcie: odczyt
   promienia z sąsiada w chwili wstawiania bywał wyścigiem z arkuszem i pigułka
   wychodziła kanciasta.
   Ruch dobrany do przedmiotu: dłoń unosi się i przechyla, lupa powiększa —
   dlatego skala, a nie przesunięcie. */
.nl-szukaj-wejscie{
  border-radius:100px;
  transition:border-color 200ms cubic-bezier(0.23,1,0.32,1), color 200ms cubic-bezier(0.23,1,0.32,1);
}
.nl-szukaj-wejscie svg{
  transition:transform 240ms cubic-bezier(0.23,1,0.32,1), color 200ms cubic-bezier(0.23,1,0.32,1);
  transform-origin:55% 45%;
}
.nl-szukaj-wejscie:active{ transform:scale(0.97); }
@media (hover:hover){
  .nl-szukaj-wejscie:hover{ border-color:var(--nl-zloto-orn); }
  .nl-szukaj-wejscie:hover svg{ transform:scale(1.18) rotate(-8deg); color:var(--nl-stopka-akcent); }
}
.nl-szukaj-wejscie:focus-visible{ outline:2px solid var(--nl-fokus); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .nl-szukaj-wejscie, .nl-szukaj-wejscie svg{ transition:none; }
  .nl-szukaj-wejscie:active{ transform:none; }
  .nl-szukaj-wejscie:hover svg{ transform:none; }
}

/* Wejście do wersji językowej. Trzeci bliźniak w tym samym rzędzie narzędzi,
   obok gestów i wyszukiwarki. Szerokość „tyle, ile trzeba”: wyszukiwarka rośnie
   do 240 px i skopiowanie jej stylu rozciągało przełącznik na cały wiersz. */
.nl-jezyk-wejscie{
  display:inline-flex; align-items:center; gap:12px; flex:0 1 auto;
  min-height:44px; padding:0 16px 0 14px;
  border:1px solid var(--nl-stopka-obram); border-radius:100px;
  color:var(--nl-stopka-tekst); text-decoration:none;
  transition:border-color 200ms cubic-bezier(0.23,1,0.32,1), color 200ms cubic-bezier(0.23,1,0.32,1);
}
.nl-jezyk-wejscie .nl-jezyk-flaga{
  width:26px; height:17px; flex-shrink:0; display:block;
  border-radius:2px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 0 0 1px rgba(0,0,0,.2);
  transition:transform 240ms cubic-bezier(0.23,1,0.32,1);
}
.nl-jezyk-wejscie .nl-jezyk-flaga svg{ display:block; width:100%; height:100%; }
.nl-jezyk-kolumna{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.nl-jezyk-nad{
  font-size:9px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--nl-stopka-drobne);
}
.nl-jezyk-slowo{ font-size:14.5px; }
.nl-jezyk-wejscie:active{ transform:scale(0.97); }
@media (hover:hover){
  .nl-jezyk-wejscie:hover{ border-color:var(--nl-zloto-orn); }
  .nl-jezyk-wejscie:hover .nl-jezyk-flaga{ transform:translateY(-2px) scale(1.05); }
}
.nl-jezyk-wejscie:focus-visible{ outline:2px solid var(--nl-fokus); outline-offset:3px; }

/* ————— przełącznik języka w wierszu narzędzi —————
   Trzeci element tej samej rodziny co Motyw i Rozmiar tekstu: podpis wersalikami
   plus dzielona pastylka. Segmenty nie są przyciskami, tylko odnośnikiem do drugiej
   wersji i znacznikiem języka bieżącego, dlatego reguły powtarzamy dla dowolnego
   znacznika zamiast celować w <button>. Stan wybrany rysujemy tak samo jak w tamtych
   przełącznikach: złote litery i włosowa obwódka wsunięta do środka segmentu. */
.nl-jezyk-grupa{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; flex:0 1 auto; }
.nl-jezyk-etykieta{
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--nl-stopka-drobne);
}
.nl-tryb--jezyk > *{
  display:inline-flex; align-items:center; gap:7px; position:relative;
  min-height:44px; padding:0 13px;
  font-family:var(--nl-font-tresc); font-size:14px; letter-spacing:0.04em;
  color:var(--nl-stopka-link); text-decoration:none;
  transition:color 180ms cubic-bezier(0.23,1,0.32,1);
}
/* Wybrany język pisany złotem paska, jak wciśnięte przyciski Motyw i Rozmiar tekstu obok (WCAG 1.4.3, 29.09.2026):
   złoto ornamentu dawało w ciemnym motywie 4,30:1 na #0A100E; złoto paska: 6,79:1 (ciemny), 6,03:1 na #3D0320 (jasny). */
.nl-tryb--jezyk > [aria-current="true"]{ color:var(--nl-zloto-pasek); cursor:default; }
.nl-tryb--jezyk > [aria-current="true"]::after{
  content:""; position:absolute; inset:4px; pointer-events:none;
  border:1px solid var(--nl-zloto-orn); border-radius:100px;
  background:rgba(201,168,106,.10);
}
.nl-tryb--jezyk .nl-jezyk-flaga{
  width:18px; height:12px; flex:none; display:block;
  border-radius:2px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 0 0 1px rgba(0,0,0,.2);
}
.nl-tryb--jezyk .nl-jezyk-flaga svg{ display:block; width:100%; height:100%; }
@media (hover:hover){
  .nl-tryb--jezyk > a:hover{ color:var(--nl-stopka-tekst); }
}
.nl-tryb--jezyk > a:focus-visible{ outline:2px solid var(--nl-fokus); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .nl-tryb--jezyk > *{ transition:none; }
}

/* Wyszukiwarka nie rozpycha się już w wierszu narzędzi: ma naturalną szerokość
   swojej treści, tak jak bliźniacza pigułka gestów. Rozciąganie jej próbowaliśmy
   dwa razy — na 380 px zostawiała pod ustawieniami 375 px pustki, na całą
   szerokość robiła pasek głośniejszy niż wszystko dookoła. Dziurę zamykamy
   inaczej: pigułka schodzi do wiersza z linkami prawnymi, gdzie prawa strona
   stała pusta (444 px), bo kafel z sygnetem jest pozycjonowany absolutnie. */
.nl-szukaj-wejscie{ flex:0 0 auto; }

/* Wyszukiwarka w wierszu stopki: prawy slot istniejącego space-between.
   Margines dolny podnosi ją z linii dolnej krawędzi bloku (ma 34 px wypełnienia)
   na wysokość wiersza z copyrightem.

   Szerokość nie jest dobrana na oko. Lewa krawędź siada na trzeciej kolumnie
   siatki linków stopki, czyli na linii, która w tej stopce powtarza się dwa razy
   (oba rzędy odnośników). Wyprowadzenie: oba pasy mają ten sam pojemnik
   max-width:1240px, ale różne wypełnienia. Siatka ma 4 kolumny i odstęp 34 px
   w polu C−48, więc jej trzecia kolumna zaczyna się 92 + (C−150)/2 od lewej
   krawędzi pojemnika. Wiersz prawny kończy się na C−216. Różnica to C/2 − 233,
   a że jego własne pole ma szerokość W = C − 240, wychodzi W/2 − 113. Stąd
   calc(50% - 113px): przy pełnym pasie 1000 px daje 387 px i odstęp 38 px od
   bloku z linkami prawnymi, czyli tyle, co odstęp między kolumnami stopki.

   flex-shrink zostaje włączony: na węższych ekranach blok z linkami jest szerszy
   i pigułka kurczy się do wolnego miejsca zamiast spadać pod spód. Gdy i to nie
   wystarczy, margin-left:auto trzyma ją przy prawej krawędzi także po złamaniu
   wiersza, więc nie zostaje ogona po prawej. */
.nl-szukaj-stopka{
  align-self:flex-end; margin-bottom:34px;
  flex:1 1 auto; max-width:calc(50% - 113px); min-width:190px; margin-left:auto;
}

/* Odstęp wiersza narzędzi siedzi w stylu liniowym strony (gap:28px 36px), a styl
   liniowy wygrywa z arkuszem — ta sama pułapka, co przy promieniu pigułki.
   Nadpisujemy go świadomie tutaj, żeby kształt wiersza dał się składać w jednym
   miejscu dla wszystkich 194 stron zamiast w każdej z osobna. */
.nl-dostepnosc{ column-gap:28px !important; row-gap:28px !important; }

/* Cztery przełączniki mieszczą się w jednym wierszu dopiero na pełnym pasie
   1000 px: 216+278+199+209 i trzy odstępy po 28 daje 986. Poniżej pas jest
   węższy (szerokość okna minus 240), więc poniżej 1226 px okna czwarty spadałby
   sam pod spód i zostawiał 575 px ogona. Rozkładamy je wtedy po dwa na wiersz.
   Nie rozciągamy przy tym dzieci na pół pasa: „Sterowanie gestami” jest samą
   pigułką, nie opakowaniem z etykietą, więc rozciągnięte robiło się paskiem
   szerokim na 413 px — tym samym błędem, co wcześniej z wyszukiwarką. Siatka
   ustawia kolumny, a pigułki zachowują swoją szerokość. */
@media (max-width:1225px){
  .nl-dostepnosc{
    display:grid !important;
    grid-template-columns:repeat(2, max-content);
    justify-content:start; justify-items:start; align-items:center;
  }
}
/* Poniżej tego progu połowa pasa nie mieści już „Rozmiaru tekstu” (278 px),
   więc schodzimy na jeden przełącznik w wierszu. */
@media (max-width:859px){
  .nl-dostepnosc{ grid-template-columns:max-content; }
}


@media (prefers-reduced-motion:reduce){
  .nl-jezyk-wejscie, .nl-jezyk-wejscie .nl-jezyk-flaga{ transition:none; }
  .nl-jezyk-wejscie:active{ transform:none; }
  .nl-jezyk-wejscie:hover .nl-jezyk-flaga{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .nl-gest-wejscie, .nl-gest-wejscie svg{ transition:none; }
  .nl-gest-wejscie:active{ transform:none; }
  .nl-gest-wejscie:hover svg{ transform:none; }
}

/* Przełącznik trybu */
.nl-tryb{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid var(--nl-cta2-obram); background:transparent;
  padding:0; margin:0;
  border-radius:100px; overflow:hidden;
}
.nl-tryb button{
  appearance:none; -webkit-appearance:none;
  min-height:44px; min-width:44px; padding:0 14px;
  border:0; background:transparent; cursor:pointer;
  font-family:var(--nl-font-tresc); font-size:14px; letter-spacing:0.04em;
  color:var(--nl-pasek-link);
  transition:color 180ms cubic-bezier(0.23,1,0.32,1), background-color 180ms cubic-bezier(0.23,1,0.32,1);
}
.nl-tryb button[aria-pressed="true"]{ background:transparent; color:var(--nl-zloto-pasek); }
.nl-tryb button:active{ transform:scale(0.97); }
@media (hover:hover){
  .nl-tryb button:hover{ color:var(--nl-pasek-link-akt); }
  .nl-tryb button[aria-pressed="true"]:hover{ color:var(--nl-zloto-pasek); }
}
.nl-tryb button:focus-visible{ outline:2px solid var(--nl-fokus); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .nl-tryb button{ transition:none; }
  .nl-tryb button:active{ transform:none; }
}

/* Stan wybrany w przełącznikach motywu i rozmiaru tekstu ---------------------
   Pełne złote wypełnienie było najgłośniejszym elementem w pasku narzędzi, choć
   oznacza tylko ustawienie, a nie akcję. Zastępujemy je złotymi literami i włosową
   obwódką wewnątrz segmentu, z ledwie wyczuwalną poświatą — żeby wybór dawał się
   odczytać jednym spojrzeniem, a nie krzyczał.
   Obwódkę rysuje pseudoelement wsunięty do środka, więc układ segmentów zostaje
   nietknięty; stan i tak niesie aria-pressed, więc czytniki ekranu nic nie tracą. */
.nl-tryb button, .nl-skala button{ position:relative; }
.nl-tryb button[aria-pressed="true"]::after,
.nl-skala button[aria-pressed="true"]::after{
  content:""; position:absolute; inset:4px; pointer-events:none;
  border:1px solid var(--nl-zloto-orn); border-radius:100px;
  background:rgba(201,168,106,.10);
}

/* --- Przełącznik trybu w wariancie ikonowym ---------------------------------
   Słońce i księżyc w pasku nad logo, w tym samym języku co ikony kontaktowe po
   prawej: bez tabletki, kreska 1.4, rozmiar 22 px, to samo złoto. Dlatego
   zdejmujemy obwódkę i wewnętrzną nitkę odziedziczone po .nl-tryb — one należą
   do tabletki w panelu dostępności, nie tutaj.
   Stan wybrany niesie sam kolor: złoto dla aktywnego, przygaszony dla drugiego.
   Klasę dublujemy (.nl-tryb.nl-tryb--ikony), bo przy pojedynczej reguły miałyby
   tę samą szczegółowość co bazowe i o wyniku decydowałaby kolejność w pliku —
   a to psuje się po każdej zmianie kolejności.
   Pole dotyku zostaje 44×44 mimo ikony 22 px: to pełnoprawny przycisk, nie
   ozdoba, więc nie schodzimy poniżej progu z WCAG 2.5.5. */
/* Uklad trzech cial: slonce i ksiezyc w rzedzie, ziemia pod nimi na srodku.
   Siatka dwukolumnowa, trzeci przycisk rozpiety na obie kolumny — dzieki temu
   wysrodkowanie wynika z ukladu, a nie z recznie dobranego marginesu, ktory
   rozjechalby sie przy kazdej zmianie rozmiaru przycisku. */
.nl-tryb.nl-tryb--ikony{
  display:grid; grid-template-columns:44px 44px;
  justify-items:center; align-items:center;
  border:0; background:transparent; overflow:visible; border-radius:0;
}
.nl-tryb.nl-tryb--ikony button:nth-child(3){ grid-column:1 / -1; }
.nl-tryb.nl-tryb--ikony button{ padding:0; width:44px; color:var(--nl-roz-pom); }
.nl-tryb.nl-tryb--ikony button[aria-pressed="true"]{ color:var(--nl-zloto-etyk); }
.nl-tryb.nl-tryb--ikony button[aria-pressed="true"]::after{ content:none; }
.nl-tryb.nl-tryb--ikony svg{ width:22px; height:22px; display:block; margin:0 auto; }
@media (hover:hover){
  .nl-tryb.nl-tryb--ikony button:hover,
  .nl-tryb.nl-tryb--ikony button[aria-pressed="true"]:hover{ color:var(--nl-zloto-pasek); }
}

/* --- Stan „idzie za systemem" w przełączniku dwuprzyciskowym ----------------
   Aktywny przycisk jest tam przełącznikiem: kliknięty ponownie zdejmuje
   przypięcie i oddaje wybór systemowi. Bez sygnału wizualnego oba stany
   wyglądałyby identycznie i kliknięcie sprawiałoby wrażenie, że nic nie zrobiło.
   Nitka ciągła = przypięte ręcznie, kreskowana = zgodne z systemem. Korzystamy
   z istniejącej nitki zamiast dokładać nową geometrię. */
.nl-tryb[data-tryb-auto="1"] button[aria-pressed="true"]::after{
  border-style:dashed; background:transparent;
}
/* Dopisek czytany wyłącznie przez czytniki ekranu — kreskowania nie da się
   usłyszeć, więc ta sama informacja musi być w nazwie dostępnej przycisku.
   clip-path zamiast starego clip: rect(), które jest wycofane. */
.nl-tryb-dopisek,
.nl-poza-ekranem{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Słońce odsunięte w lewo. Trójkąt równoramienny czytał się jak diagram;
   asymetria robi z niego układ ciał. Przesuwamy transformacją, nie marginesem —
   pole dotyku jedzie razem z ikoną i nie powstaje martwa szczelina.
   Reguła :active musi powtórzyć przesunięcie, bo inaczej bazowe
   `transform:scale(.97)` skasowałoby je i słońce odskakiwałoby w prawo
   przy każdym wciśnięciu. */
.nl-tryb.nl-tryb--ikony button:nth-child(1){ transform:translateX(-8px); }
.nl-tryb.nl-tryb--ikony button:nth-child(1):active{ transform:translateX(-8px) scale(0.97); }

/* Na telefonach układ trzech ciał znika z paska. Zmierzone: przy 393 px pasek
   jest czysty, przy 360 px kolumna kontaktowa dostaje 148 zamiast 177 px i łamie
   się adres oraz numer telefonu — „32 250 / 48 28" to zły sposób na pokazanie
   numeru. Granicę stawiamy na 600 px, czyli z zapasem ponad najszersze telefony
   w pionie (430 px), zamiast tuż przy progu łamania.
   Ukrywamy samą grupę, nie gospodarza: gospodarz zostaje jako element o zerowej
   szerokości, dzięki czemu `space-between` nadal dosuwa kolumnę kontaktową do
   prawej krawędzi. Bez niego zostałby jeden element i wylądowałby po lewej.
   Funkcja nie ginie — wejście domyślne jest w trybie automatycznym, a przełącznik
   stoi w stopce i w ustawieniach przeglądarki. */
@media (max-width:599px){
  .nl-tryb.nl-tryb--ikony{ display:none; }
}

/* --- Magenta jako kolor tekstu w trybie ciemnym ------------------------------
   `--nl-cta-tlo` to kolor TŁA przycisku (#5C0632 jasny / #8A1250 ciemny).
   W wielu miejscach użyto go jako koloru tekstu. Na jasnym tle działa — 13,75:1.
   Na ciemnym daje 1,80–1,97:1, czyli poniżej progu nawet dla dużego tekstu:
   nieczytelne stają się m.in. ceny („od 300 zł"), adres i nagłówki sekcji.
   Sam token musi zostać bez zmian, bo pełni swoją właściwą rolę jako tło
   przycisków — podmieniamy wyłącznie zastosowanie tekstowe i wyłącznie w ciemnym.
   Selektor po atrybucie style, bo kolor jest wpisany w znacznik na 64 stronach;
   jedna reguła zastępuje przerabianie każdej z nich z osobna.
   Dwa warianty, bo tryb automatyczny nie ustawia data-tryb wcale.
   Dwa tokeny, nie jeden: --nl-cta-tlo i --nl-stopka-cta dają w trybie ciemnym
   ten sam odcień #8A1250. Pierwszy trafił się w nagłówkach i adresie, drugi
   w cenach („od 300 zł") — pominięcie go zostawiłoby nieczytelne właśnie ceny. */
:root[data-tryb="ciemny"] [style*="color:var(--nl-cta-tlo)"],
:root[data-tryb="ciemny"] [style*="color:var(--nl-stopka-cta)"]{
  color:var(--nl-roz-akcent) !important;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tryb="jasny"]) [style*="color:var(--nl-cta-tlo)"],
  :root:not([data-tryb="jasny"]) [style*="color:var(--nl-stopka-cta)"]{
    color:var(--nl-roz-akcent) !important;
  }
}

/* ————— dostępność: pominięcie nawigacji i pauza filmu ————— */
.nl-pomin{
  position:absolute; left:-9999px; top:8px; z-index:10000; padding:10px 16px;
  background:var(--nl-tlo-pasek,#2B0217); color:var(--nl-pasek-tekst,#F6ECEF);
  font:600 15px/1.2 system-ui,-apple-system,sans-serif; text-decoration:none;
}
.nl-pomin:focus,.nl-pomin:focus-visible{ left:12px; outline:3px solid var(--nl-zloto-pasek,#B3965A); outline-offset:2px; }
.nl-wideo-pauza{
  position:absolute; right:12px; bottom:12px; z-index:2; min-height:44px; padding:8px 14px;
  border:1px solid var(--nl-linia-zlota,#C9B08E); background:rgba(27,20,24,.82); color:#F6ECEF;
  font:600 14px/1.2 system-ui,-apple-system,sans-serif; cursor:pointer;
}
.nl-wideo-pauza:focus-visible{ outline:3px solid var(--nl-zloto-pasek,#B3965A); outline-offset:2px; }