/* family-topbar.css — pasek gorny w kolorze rodziny surowca.
 *
 * ZASADA: wejscie w linie produktowa lub w podstrone produktu zmienia tlo
 * paska z ruchomymi napisami na kolor tej rodziny. Pasek staje sie dzieki temu
 * stalym sygnalem "gdzie jestem", widocznym na kazdym ekranie strony.
 *
 * DLACZEGO CZYSTO CSS: strony NIOSA JUZ klase rodziny na <body>
 * (category-page--turicoll, pdp--turiker, ...), wiec nie trzeba dotykac ani
 * jednego pliku HTML. Wystarczy przypisac kolor do istniejacej klasy.
 *
 * KOLORY: przepisane 1:1 z --category-navy juz zdefiniowanych w
 * concept8.css:2837-2840 (.pdp--*) oraz product-category-refresh.css:27-42
 * (agro/bio). Zadnych nowych wartosci - to te same glebokie odcienie rodzin,
 * ktorych strona uzywa w hero i naglowkach.
 *
 * KONTRAST: bialy tekst na kazdym z tych tel ma stosunek >= 9.8:1 (WCAG AAA
 * wymaga 7:1). Zmierzone: turicoll 15.90, turiker 15.93, turipro 12.20,
 * turigel 9.84, agro 15.58, bio 15.02. Dla porownania obecny granat: 15.39.
 *
 * ZAKRES: 54 dokumenty (4 linie x 3 jezyki, 36 podstron produktow, agro+bio).
 * Strony bez klasy rodziny (glowna, wiedza, kontakt, zastosowania) zostaja
 * na granatowym --navy - bez zmian.
 */

.category-page--turicoll, .pdp--turicoll { --topbar-fam: #11195d; }
.category-page--turiker,  .pdp--turiker  { --topbar-fam: #3b1232; }
.category-page--turipro,  .pdp--turipro  { --topbar-fam: #073d31; }
.category-page--turigel,  .pdp--turigel  { --topbar-fam: #663807; }
.category-page--agro                     { --topbar-fam: #0b291c; }
.category-page--bio                      { --topbar-fam: #292d1c; }

/* Samo tlo paska. */
.category-page--turicoll .topbar, .pdp--turicoll .topbar,
.category-page--turiker  .topbar, .pdp--turiker  .topbar,
.category-page--turipro  .topbar, .pdp--turipro  .topbar,
.category-page--turigel  .topbar, .pdp--turigel  .topbar,
.category-page--agro     .topbar,
.category-page--bio      .topbar {
  background: var(--topbar-fam);
}

/* Prawy blok (mail + przelacznik jezyka) ma WLASNE tlo w home-motion.css:16,
   zeby ruchome napisy chowaly sie pod nim. Bez tego nadpisania zostalby
   granatowy prostokat na kolorowym pasku - widoczny szew. */
.category-page--turicoll .topbar .r, .pdp--turicoll .topbar .r,
.category-page--turiker  .topbar .r, .pdp--turiker  .topbar .r,
.category-page--turipro  .topbar .r, .pdp--turipro  .topbar .r,
.category-page--turigel  .topbar .r, .pdp--turigel  .topbar .r,
.category-page--agro     .topbar .r,
.category-page--bio      .topbar .r {
  background: var(--topbar-fam);
}

/* Aktywny jezyk to biala pigulka z tekstem w kolorze tla paska
   (styles.css:38 zaszywa tam --navy). Bez tego napis PL zostalby granatowy
   na wszystkich rodzinach. */
.category-page--turicoll .topbar .lang a.on, .pdp--turicoll .topbar .lang a.on,
.category-page--turiker  .topbar .lang a.on, .pdp--turiker  .topbar .lang a.on,
.category-page--turipro  .topbar .lang a.on, .pdp--turipro  .topbar .lang a.on,
.category-page--turigel  .topbar .lang a.on, .pdp--turigel  .topbar .lang a.on,
.category-page--agro     .topbar .lang a.on,
.category-page--bio      .topbar .lang a.on {
  color: var(--topbar-fam);
}

/* --- Konto klienta w gornym pasku i okno ustawien (2026-09-07) ------------
 *
 * DLACZEGO TEN ARKUSZ: patrz komentarz przy ikonie LinkedIn wyzej. Strony
 * GLOWNE nie wczytuja styles.css, wiec regula stamtad nie dotarlaby do nich
 * nigdy — ikona bylaby w kodzie, a czlowiek by jej nie widzial.
 *
 * DLACZEGO OKRAG OBRYSOWANY, A NIE BIALY KAFELEK JAK LINKEDIN: to inna
 * funkcja i nie moze sie z nia zlewac. LinkedIn prowadzi na zewnatrz, na
 * profil firmy; ta ikona prowadzi do WLASNYCH danych czlowieka. Dwa biale
 * kafelki obok siebie czytaja sie jako jedna para tego samego rodzaju.
 * Okrag obrysowany bialym, z pustym wnetrzem, jest od kafelka wyraznie
 * inny w ksztalcie (kolo vs prostokat) i w traktowaniu (kreska vs plama),
 * a przy tym trzyma DOKLADNIE ten sam kontrast: biel na tle paska.
 *
 * KONTRAST NA SZESCIU TLACH: pasek przyjmuje granat i piec barw rodzin
 * (wyzej w tym pliku). Biel ma na kazdym z nich stosunek >= 9.8:1 — te
 * same liczby, ktore zmierzono dla bialego tekstu paska. Ikona nie uzywa
 * ZADNEGO wlasnego koloru poza biela i przezroczystoscia, wiec nie ma tu
 * tla, na ktorym mogloby jej zabraknac kontrastu.
 *
 * flex: 0 0 auto — pasek jest elastyczny i na waskich ekranach sciska swoje
 * dzieci; bez tego ikona jest pierwsza rzecza, ktora sie zwija do zera. */
.topbar .topbar-konto{
  display:inline-flex; align-items:center; justify-content:center;
  position:relative;
  /* PELNY KAFELEK W FIRMOWYM BLEKICIE (poprawka 07.09.2026 — poprzednia
     wersja, przezroczyste kolko z cienkim obrysem, ginela obok pelnego
     bialego kafelka LinkedIna i wlasciciel slusznie uznal ja za slaba).
     Blekit --cyan jest barwa serwisu, wiec ikona jest OD RAZU odrozialna
     od LinkedIna, a jednoczesnie widoczna na wszystkich szesciu ciemnych
     kolorach paska (granat i piec barw rodzin surowcow). */
  width:26px; height:26px; border-radius:8px; flex:0 0 auto;
  background:#00aed9; color:#fff;
  border:0;
  transition:transform .14s, box-shadow .14s, background .14s, color .14s,
             border-color .14s;
}
.topbar .topbar-konto svg{width:15px; height:15px; display:block}
.topbar .topbar-konto:hover,
.topbar .topbar-konto:focus-visible{
  background:#fff; color:#17156d; border-color:#fff;
  transform:translateY(-1px);
  box-shadow:0 2px 9px rgba(0,0,0,.38);
}

/* Stan "ktos jest zalogowany". Sama zmiana wypelnienia bylaby czytelna tylko
   dla kogos, kto pamieta, jak ikona wyglada w drugim stanie — a nikt tego nie
   pamieta. Dlatego dochodzi kropka: osobny znak, ktorego w stanie gosc po
   prostu nie ma. Obwodka kropki w kolorze paska (--topbar-fam, a poza
   rodzinami granat) sprawia, ze kropka wyglada na wyciecie w ikonie, a nie
   na przypadkowy piksel. */
.topbar .topbar-konto.is-zalogowany{
  background:rgba(255,255,255,.18); border-color:#fff; cursor:pointer;
}
.topbar .topbar-konto.is-zalogowany::after{
  content:""; position:absolute; right:-2px; bottom:-2px;
  width:9px; height:9px; border-radius:50%;
  background:#3ddc97;
  border:2px solid var(--topbar-fam, #17156d);
}

@media(max-width:760px){
  .topbar .topbar-konto{width:24px; height:24px}
  .topbar .topbar-konto svg{width:14px; height:14px}
}

/* --- Okno ustawien konta --------------------------------------------------
 *
 * DLACZEGO WLASNE OKNO, A NIE <dialog>: reszta serwisu buduje warstwy tak
 * samo (tlo + panel, bez natywnego dialogu) i tylko tak mamy pewnosc, ze
 * wyglada to jednakowo w kazdej przegladarce, ktorej uzywaja klienci.
 *
 * DLACZEGO WLASNE PRZYCISKI, A NIE .btn: klasa .btn mieszka w styles.css,
 * ktorego strony GLOWNE nie wczytuja. Przycisk musi wygladac tak samo na
 * kazdej stronie, wiec ma tu komplet wlasnych regul. */
html.konto-okno-otwarte{overflow:hidden}

/* z-index 9000, a nie "jakies duze": gorny pasek ma w zywej stronie
   WYLICZONE z-index: 201 (styles.css:33 mowi 41, ale pozniejszy arkusz to
   nadpisuje), a najwyzsza wartosc w arkuszach serwisu to 220. Przy 200 tlo
   okna konczylo sie POD paskiem: klikniecie w tle na wysokosci paska nie
   zamykalo okna, a na niskim ekranie pasek wchodzilby na panel. Zmierzone
   w przegladarce (elementFromPoint na wysokosci paska zwracalo .topbar). */
.konto-tlo{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(10,12,30,.55);
  animation:konto-tlo-in .16s ease-out;
}
@keyframes konto-tlo-in{from{opacity:0}to{opacity:1}}

.konto-okno{
  width:100%; max-width:460px; max-height:calc(100vh - 40px);
  overflow:auto; background:#fff; border-radius:16px;
  box-shadow:0 24px 60px rgba(10,12,30,.45);
  font-family:inherit; color:#1e2030;
  animation:konto-okno-in .18s ease-out;
}
@keyframes konto-okno-in{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

@media(prefers-reduced-motion:reduce){
  .konto-tlo, .konto-okno{animation:none}
  .topbar .topbar-konto{transition:none}
}

.konto-okno__gora{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px 14px; border-bottom:1px solid #e7e8ef;
}
.konto-okno__tytul{
  margin:0; font-size:19px; line-height:1.25; color:#17156d; font-weight:700;
}
.konto-okno__x{
  flex:0 0 auto; width:32px; height:32px; border:0; border-radius:8px;
  background:transparent; color:#565b6b; font-size:22px; line-height:1;
  cursor:pointer;
}
.konto-okno__x:hover, .konto-okno__x:focus-visible{background:#f1f2f7; color:#1e2030}

.konto-okno__tresc{padding:18px 20px 20px}

.konto-dane{margin:0 0 18px; display:grid; grid-template-columns:1fr; gap:2px}
.konto-dane dt{
  font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:#8b90a0;
}
.konto-dane dd{margin:0 0 12px; font-size:15px; font-weight:600; word-break:break-word}

.konto-akcje{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 0}
.konto-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border:1px solid transparent; border-radius:9px;
  font:inherit; font-size:14px; font-weight:700; text-decoration:none;
  cursor:pointer;
}
.konto-btn--glowny{background:#17156d; color:#fff}
.konto-btn--glowny:hover, .konto-btn--glowny:focus-visible{background:#111046}
.konto-btn--cicho{background:#fff; color:#17156d; border-color:#cfd2e2}
.konto-btn--cicho:hover, .konto-btn--cicho:focus-visible{background:#f1f2f7}
.konto-btn--grozny{background:#7c1b48; color:#fff}
.konto-btn--grozny:hover, .konto-btn--grozny:focus-visible{background:#5f1236}
.konto-btn[disabled]{opacity:.6; cursor:default}

/* Wejscie do usuwania konta jest CELOWO nierzucajace sie w oczy: czynnosc
   nieodwracalna nie moze konkurowac wygladem z wylogowaniem, ktore czlowiek
   klika codziennie. */
.konto-usun-start{
  display:inline-block; margin-top:18px; padding:0; border:0; background:none;
  font:inherit; font-size:13px; color:#7c1b48; text-decoration:underline;
  cursor:pointer;
}
.konto-usun-start:hover, .konto-usun-start:focus-visible{color:#5f1236}

.konto-usun__tytul{margin:0 0 8px; font-size:16px; color:#7c1b48}
.konto-usun__opis{margin:0 0 16px; font-size:14px; line-height:1.55; color:#3a3d4d}
.konto-usun__etykieta{display:block; font-size:13px; font-weight:700; margin-bottom:6px}
.konto-usun__haslo{
  width:100%; box-sizing:border-box; padding:10px 12px;
  border:1px solid #cfd2e2; border-radius:9px; font:inherit; font-size:15px;
}
.konto-usun__haslo:focus{outline:2px solid #17156d; outline-offset:1px}
.konto-usun__blad{margin:10px 0 0; font-size:13px; color:#a01236; font-weight:600}

/* --- Informacja przy formularzu ------------------------------------------
 * Czlowiek ma prawo wiedziec, ze pola wypelnil za niego system — inaczej
 * wysyla dane, ktorych nie przeczytal. Nota mowi tez wprost, ze ZGODY
 * zostaly na niego: zgoda zaznaczona przez system nie jest oswiadczeniem
 * woli, wiec nie zaznaczamy jej nigdy. */
.konto-podpowiedz{
  display:flex; align-items:flex-start; gap:8px;
  margin:0 0 14px; padding:9px 12px;
  border-left:3px solid #3ddc97; border-radius:0 8px 8px 0;
  background:#f2fbf7; color:#3a3d4d;
  font-size:13px; line-height:1.5;
}
.konto-podpowiedz__znak{flex:0 0 auto; color:#12805a; font-weight:700}

/* Pole wypelnione z konta — delikatny slad, ktory znika po pierwszej
   poprawce (klasa zostaje, ale ramka jest na tyle cicha, ze nie krzyczy). */
.konto-wypelnione{background:#fbfefc}

/* --- LinkedIn w gornym pasku (2026-09-07, poprawione tego samego dnia) -----
 *
 * DLACZEGO TEN ARKUSZ, A NIE styles.css: strony GLOWNE (PL, EN, DE) w ogole
 * nie wczytuja styles.css — maja wlasny concept6-b2b.css. Regula stamtad nie
 * docieral do nich nigdy, wiec ikona renderowala sie z ZEROWA szerokoscia:
 * byla w kodzie, a czlowiek jej nie widzial. Zmierzone w przegladarce na
 * zywej stronie (bounding box 0 x 16 px na glownej, 22 x 22 na podstronie).
 * Ten plik wczytuja WSZYSTKIE 96 stron serwisu i dotyczy dokladnie gornego
 * paska, wiec jest jedynym wlasciwym miejscem.
 *
 * DLACZEGO BIALY KAFELEK, A NIE FIRMOWY BLEKIT LINKEDINA: pasek przyjmuje
 * SZESC roznych ciemnych kolorow — granat i piec barw rodzin surowcow
 * (wyzej w tym pliku). Blekit #0A66C2 gubi sie na granacie i na ciemnej
 * zieleni, a na brazie zaczyna z nim walczyc. Bialy kafelek trzyma ten sam
 * wysoki kontrast na kazdym z szesciu tel, a znak zostaje rozpoznawalny,
 * bo litery maja firmowy blekit. Najazd odwraca uklad na wersje firmowa.
 *
 * flex: 0 0 auto — pasek jest elastyczny i na waskich ekranach sciska swoje
 * dzieci; bez tego ikona jest pierwsza rzecza, ktora sie zwija do zera. */
.topbar .topbar-li{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:6px; flex:0 0 auto;
  background:#fff; color:#0A66C2;
  transition:transform .14s, box-shadow .14s, background .14s, color .14s;
}
.topbar .topbar-li svg{width:16px; height:16px; display:block}
.topbar .topbar-li:hover,
.topbar .topbar-li:focus-visible{
  background:#0A66C2; color:#fff;
  transform:translateY(-1px);
  box-shadow:0 2px 9px rgba(0,0,0,.38);
}

/* ── Zablokowana specyfikacja ──────────────────────────────────────────────
   Przycisk „Pobierz specyfikacje" dla niezalogowanego zamienia sie w „Zaloguj
   sie, aby pobrac" z klodka — patrz assets/konto-ui.js.

   ARKUSZ JEST TUTAJ, A NIE W styles.css, Z KONKRETNEGO POWODU: strona glowna
   nie laduje styles.css. Ikona LinkedIn wpieta tam kiedys mial szerokosc zero
   wlasnie na stronie glownej i nikt tego nie zauwazyl przez tydzien.

   Kolorow przycisku NIE ruszamy: te odnosniki maja kilkanascie roznych klas
   (btn-primary, btn-outline, btn-link, docdl…), wiec kazda ingerencja w tlo
   albo obramowanie zepsulaby cos w innym miejscu serwisu. Zmienia sie tylko
   napis i dochodzi klodka — to wystarcza, zeby bylo widac, ze trzeba sie
   zalogowac. */
.spec-klodka{
  width:1em; height:1em; flex:0 0 auto;
  margin-right:.42em; vertical-align:-.14em;
  display:inline-block;
}
/* Odstep dziala i w przyciskach ustawionych flexem, i w zwyklych odnosnikach
   w tekscie — stad i `gap`, i `margin` na samej ikonie. */
a.spec-zablokowana{ gap:.42em; }