/* =========================================================
   BP Sluxer - sekcje rozszerzone karty produktu

   Arkusz osobny od `sluxer.css` i wczytywany tylko wtedy, gdy
   strona ma wypełnione pole `rs_sekcje`. Podstrony produktowe
   bez tych sekcji nie pobierają ani jednego bajtu.

   JEDNOSTKI. Kadence trzyma `html { font-size: 62.5% }`, czyli
   1rem = 10px, a strony Brand Perspective skalują bazę `rem`
   na sześciu progach. Wszystko jest więc w `rem`, poza kreskami
   cieńszymi niż 2 px - te zostają w `px`, bo skalowanie je rozmywa.

   PALETA. Ta sama co w `sluxer.css`, plus jeden kolor więcej:
   złoto `#f0b429` na oznaczenie drogiej energii na wykresie doby.
   Turkus nie mógł oznaczać jednocześnie marki i szczytu cen.

   TŁO CIEMNYCH SEKCJI. Poświata jest `background-image` na samej
   sekcji, a nie osobnym `::before` w kontenerze z `overflow: hidden`.
   Pseudoelement wielkości 70 rem tworzył dużą warstwę kompozycji
   i przy scrollu potrafił nie odmalować górnego pasa sekcji.
   Gradient w tle sekcji nie ma tego problemu i jest o element mniej.
   ========================================================= */

.bpsx-rs {
	--bpsx-rs-akcent: #3ac2be;
	--bpsx-rs-akcent-ciemny: #2aa8a4;
	--bpsx-rs-zloto: #f0b429;
	--bpsx-rs-czern: #06090f;
	--bpsx-rs-tekst: #1e293b;
	--bpsx-rs-tekst-2: #475569;
	--bpsx-rs-ramka: #e2e8f0;
	--bpsx-rs-jasne: #f1f5f9;
	--bpsx-rs-promien: 1.6rem;

	position: relative;
	padding: 11rem 0;
	font-size: 1.7rem;
	line-height: 2.7rem;
	color: var(--bpsx-rs-tekst);
}

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

/* Szerokość i oddech od krawędzi bierzemy z motywu - tą samą
   zmienną, z której korzystają rzędy Kadence i `.bpsx-kontener`.
   Inaczej nagłówki nowych sekcji zaczynałyby się w innym miejscu
   niż nagłówki sekcji już stojących na stronie. */
.bpsx-rs__kontener {
	max-width: var(--global-content-width, 144rem);
	margin: 0 auto;
	padding-left: var(--global-content-edge-padding, 4rem);
	padding-right: var(--global-content-edge-padding, 4rem);
	width: 100%;
}

/* --- warianty tła ---------------------------------------------------- */

.bpsx-rs--jasne {
	background: var(--bpsx-k-ffffff);
}

.bpsx-rs--szare {
	background: var(--bpsx-rs-jasne);
}

.bpsx-rs.bpsx-rs--ciemne {
	background-color: var(--bpsx-rs-czern);
	background-image: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--bpsx-k-3ac2be) 16%, transparent), color-mix(in srgb, var(--bpsx-k-3ac2be) 0%, transparent) 70%);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 70rem;
	color: var(--bpsx-k-ffffff);
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__tytul {
	color: var(--bpsx-k-ffffff);
}

/* --- nagłówki -------------------------------------------------------- */

/* CAŁA TYPOGRAFIA SEKCJI MA PRZEDROSTEK `.bpsx-rs` - i to nie jest ozdoba.
   Motyw ustawia marginesy przez `.entry-content h2`, `.entry-content p`
   i `.entry-content ul`, czyli selektorami o wadze (0,1,1). Nasza reguła
   z jedną klasą ma (0,1,0) i PRZEGRYWA - po cichu, bo w pliku wszystko
   wygląda poprawnie.
   Zmierzone na żywej stronie: `margin: 0` na nagłówku sekcji wychodziło
   jako `margin-top: 66px`, przez co między turkusowym hasłem a nagłówkiem
   robiła się dziura na 72 px zamiast 10 px. Ta sama przyczyna wcześniej
   odsunęła myślniki list o 34 px.
   Przedrostek podnosi wagę do (0,2,0) i reguła wreszcie trafia.

   Odstęp pod nadtytułem jest CELOWO mały. Kreska, hasło i nagłówek mają
   się czytać jako jeden blok, a nie trzy osobne elementy. */
.bpsx-rs .bpsx-rs__nad {
	display: inline-flex;
	align-items: center;
	gap: 1.2rem;
	margin: 0 0 .6rem;
	font-size: 1.3rem;
	line-height: 1.6rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bpsx-rs-akcent);
}

.bpsx-rs .bpsx-rs__nad::before {
	content: "";
	width: 3.2rem;
	height: 2px;
	border-radius: 2px;
	background: var(--bpsx-rs-akcent);
}

.bpsx-rs .bpsx-rs__tytul {
	margin: 0 0 2rem;
	max-width: 86rem;
	line-height: 5.2rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--bpsx-rs-czern);
}

.bpsx-rs .bpsx-rs__lead {
	margin: 0;
	max-width: 68rem;
	font-size: 1.8rem;
	line-height: 3rem;
	color: var(--bpsx-rs-tekst-2);
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__lead {
	color: var(--bpsx-k-ffffff);
}

.bpsx-rs__glowa {
	margin-bottom: 6rem;
}

.bpsx-rs__glowa--srodek {
	text-align: center;
}

.bpsx-rs__glowa--srodek .bpsx-rs__tytul,
.bpsx-rs__glowa--srodek .bpsx-rs__lead {
	margin-left: auto;
	margin-right: auto;
}

/* Nagłówek w kolumnie dwukolumnowego układu nie potrzebuje odstępu
   pod sobą - odstęp robi tam siatka. */
.bpsx-rs__duet-tresc .bpsx-rs__glowa {
	margin-bottom: 0;
}

/* --- układ dwukolumnowy ---------------------------------------------- */

.bpsx-rs__duet {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 7rem;
	align-items: center;
}

.bpsx-rs__duet--odwrotnie .bpsx-rs__duet-tresc {
	order: 2;
}

.bpsx-rs__grafika {
	min-width: 0;
}

/* --- listy z myślnikiem ---------------------------------------------- */

/* DWIE KLASY, NIE JEDNA - i to nie jest ozdoba.
   Motyw ma regułę `.entry-content ul { padding-left: … }` o wadze (0,1,1).
   Zapis `.bpsx-rs__punkty { padding: 0 }` ma (0,1,0) i PRZEGRYWA: myślniki
   odjeżdżały o 34 px w prawo i nie stały w jednej linii z nagłówkiem
   ani z akapitem nad listą. Przedrostek sekcji podnosi wagę do (0,2,0). */
.bpsx-rs .bpsx-rs__punkty {
	margin: 2.4rem 0 0;
	padding: 0;
	list-style: none;
}

/* Punkt listy ma ten sam rozmiar co zdanie wprowadzające nad nią.
   Mniejszy tekst czytał się jak przypis do leadu, a to są równorzędne
   zdania z tego samego źródła. */
.bpsx-rs .bpsx-rs__punkty li {
	position: relative;
	margin: 1.2rem 0 0;
	padding-left: 2.6rem;
	font-size: 1.8rem;
	line-height: 3rem;
	color: var(--bpsx-rs-tekst-2);
}

/* Myślnik siedzi w połowie WYSOKOŚCI WIERSZA, nie na stałej wysokości.
   Przy zmianie rozmiaru pisma trzeba go przeliczyć razem z nią - inaczej
   przy jednej liście stoi w linii tekstu, a przy drugiej nad nią. */
.bpsx-rs .bpsx-rs__punkty li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.4rem;
	width: 1rem;
	height: 2px;
	border-radius: 2px;
	background: var(--bpsx-rs-akcent);
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__punkty li {
	color: var(--bpsx-k-ffffff);
}

/* Lista w kaflu ma węższy oddech - kafel sam w sobie jest już wcięciem. */
.bpsx-rs .bpsx-rs__kafel .bpsx-rs__punkty {
	margin-top: 1.8rem;
}

/* --- kafle ----------------------------------------------------------- */

.bpsx-rs__kafle {
	display: grid;
	gap: 2.4rem;
	margin-top: 6rem;
}

.bpsx-rs__kafle--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bpsx-rs__kafle--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bpsx-rs__kafel {
	padding: 3.6rem 3.2rem;
	background: var(--bpsx-k-ffffff);
	border: 1px solid var(--bpsx-rs-ramka);
	border-radius: var(--bpsx-rs-promien);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.bpsx-rs__kafel:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--bpsx-k-3ac2be) 55%, transparent);
	box-shadow: 0 2.4rem 5rem -2rem color-mix(in srgb, var(--bpsx-k-06090f) 22%, transparent);
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__kafel {
	background: color-mix(in srgb, var(--bpsx-k-ffffff) 4%, transparent);
	border-color: color-mix(in srgb, var(--bpsx-k-ffffff) 12%, transparent);
}

.bpsx-rs__kafel-ikona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5.2rem;
	height: 5.2rem;
	margin-bottom: 2.4rem;
	border-radius: 1.4rem;
	background: color-mix(in srgb, var(--bpsx-k-3ac2be) 12%, transparent);
	color: var(--bpsx-rs-akcent-ciemny);
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__kafel-ikona {
	color: var(--bpsx-rs-akcent);
}

.bpsx-rs .bpsx-rs__kafel-tytul {
	margin: 0 0 1.2rem;
	line-height: 2.9rem;
	font-weight: 600;
	color: var(--bpsx-rs-czern);
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__kafel-tytul {
	color: var(--bpsx-k-ffffff);
}

.bpsx-rs .bpsx-rs__kafel-opis {
	margin: 0;
	font-size: 1.6rem;
	line-height: 2.6rem;
	color: var(--bpsx-rs-tekst-2);
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__kafel-opis {
	color: var(--bpsx-k-ffffff);
}

/* --- łańcuch kroków --------------------------------------------------- */

.bpsx-rs__lancuch {
	display: grid;
	margin-top: 6rem;
	counter-reset: bpsxkrok;
}

.bpsx-rs__lancuch--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bpsx-rs__lancuch--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bpsx-rs__lancuch--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bpsx-rs__lancuch--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.bpsx-rs__ogniwo {
	position: relative;
	padding: 0 2rem;
	counter-increment: bpsxkrok;
}

.bpsx-rs__ogniwo::before {
	content: counter(bpsxkrok, decimal-leading-zero);
	display: block;
	margin-bottom: 1.6rem;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--bpsx-rs-akcent);
}

/* Kreska łącząca kroki. Zaczyna się za numerem, kończy tuż przed
   następnym ogniwem i gaśnie - żeby czytało się jako kierunek,
   a nie jako ramka tabeli. */
.bpsx-rs__ogniwo::after {
	content: "";
	position: absolute;
	top: .7rem;
	left: 4.6rem;
	right: -.6rem;
	height: 1px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--bpsx-k-3ac2be) 50%, transparent), color-mix(in srgb, var(--bpsx-k-3ac2be) 8%, transparent));
}

.bpsx-rs__ogniwo:last-child::after {
	display: none;
}

.bpsx-rs .bpsx-rs__ogniwo-tytul {
	margin: 0 0 .8rem;
	line-height: 2.3rem;
	font-weight: 600;
	color: var(--bpsx-rs-czern);
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__ogniwo-tytul {
	color: var(--bpsx-k-ffffff);
}

.bpsx-rs .bpsx-rs__ogniwo-opis {
	margin: 0;
	font-size: 1.4rem;
	line-height: 2.2rem;
	color: var(--bpsx-rs-tekst-2);
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__ogniwo-opis {
	color: var(--bpsx-k-ffffff);
}

/* --- pasek sald ------------------------------------------------------- */

.bpsx-rs__saldo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 4.8rem;
	margin-top: 4.4rem;
	padding: 3.2rem 3.6rem;
	background: var(--bpsx-rs-czern);
	border-radius: var(--bpsx-rs-promien);
}

.bpsx-rs__saldo-pozycja {
	min-width: 14rem;
}

.bpsx-rs__saldo-etykieta {
	display: block;
	margin-bottom: .8rem;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bpsx-k-ffffff);
}

.bpsx-rs__saldo-liczba {
	display: block;
	font-size: 3.6rem;
	line-height: 4rem;
	font-weight: 600;
	color: var(--bpsx-k-ffffff);
	font-variant-numeric: tabular-nums;
}

.bpsx-rs__saldo-liczba--wyroznik {
	color: var(--bpsx-rs-akcent);
}

.bpsx-rs .bpsx-rs__saldo-nota {
	flex: 1 1 26rem;
	margin: 0;
	font-size: 1.5rem;
	line-height: 2.4rem;
	color: var(--bpsx-k-ffffff);
}

/* --- przełącznik stopni ----------------------------------------------- */

/* Przełącznik stoi BLISKO zdania, które go zapowiada („Trzy stopnie
   pracy…”), i daleko od tego, co pod nim. Odstęp nad nim odbiera
   sekcji `--chmura` zwykły margines głowy - patrz reguła niżej. */
.bpsx-rs--chmura .bpsx-rs__glowa {
	margin-bottom: 2.4rem;
}

/* PANEL STOI TUŻ POD PRZEŁĄCZNIKIEM, NIE NA ŚRODKU KOLUMNY.
   Siatka dwukolumnowa środkuje w pionie, a rysunek chmury jest wyższy
   od tekstu - przez to opis wybranego stopnia odjeżdżał od przycisku,
   który go włącza, o dodatkowe 60 px ponad sam margines. Przycisk
   i jego opis mają się czytać jako jedna rzecz.
   Rysunek zostaje wyśrodkowany, bo nie należy do żadnej zakładki. */
.bpsx-rs--chmura .bpsx-rs__duet {
	align-items: start;
}

/* RYSUNEK PODNOSZONY PRZESUNIĘCIEM, NIE MARGINESEM.
   Ma stać mniej więcej na środku wysokości CAŁEJ sekcji, a siatka zna
   tylko swój wiersz - ten zaczyna się dopiero pod nagłówkiem
   i przełącznikiem, więc rysunek wychodził o 143 px za nisko.
   `translate` przesuwa obraz, nie zmieniając układu: gdyby zrobić to
   ujemnym marginesem, wiersz zmniejszyłby się o tę samą wartość,
   sekcja by się skróciła i jej środek uciekłby razem z rysunkiem.
   Poniżej 1024 px kolumny układają się jedna pod drugą i przesunięcie
   znika - tam rysunek stoi po prostu pod tekstem.

   PRZESUWAMY PRZEZ `top`, NIE PRZEZ `transform` - i to nie jest kwestia
   gustu. Ten sam element niesie `data-bpsx-rs-wejscie`, a warstwa animacji
   ustawia mu `transform: none` regułą o wadze (0,4,0). Nasze dwie klasy
   mają (0,2,0) i przegrywają PO CICHU: w pliku wszystko wygląda poprawnie,
   a `getComputedStyle` pokazuje `transform: none`. `position: relative`
   z `top` robi to samo i nie wchodzi tamtej regule w drogę. */
.bpsx-rs--chmura .bpsx-rs__grafika {
	align-self: center;
	position: relative;
	top: -14rem;
}

/* PRZEŁĄCZNIK MA WYGLĄDAĆ JAK PRZYCISKI Z RESZTY WITRYNY.
   Pierwsza wersja była pigułką z promieniem 999px i ciemnym napisem
   na wybranej zakładce - obcym kształtem w witrynie, w której każdy
   przycisk ma promień 1rem i biały napis. Liczby są przepisane
   ze standardu przycisku: wyściółka 1,7/3,2 rem, promień 1 rem,
   pismo 600. */
.bpsx-rs__stopnie {
	display: inline-flex;
	gap: .4rem;
	padding: .6rem;
	margin: 0 0 4rem;
	background: color-mix(in srgb, var(--bpsx-k-ffffff) 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--bpsx-k-ffffff) 12%, transparent);
	border-radius: 1.4rem;
}

.bpsx-rs--jasne .bpsx-rs__stopnie,
.bpsx-rs--szare .bpsx-rs__stopnie {
	background: color-mix(in srgb, var(--bpsx-k-06090f) 5%, transparent);
	border-color: var(--bpsx-rs-ramka);
}

.bpsx-rs__stopien {
	appearance: none;
	border: 0;
	padding: 1.7rem 3.2rem;
	border-radius: 1rem;
	background: transparent;
	color: var(--bpsx-k-ffffff);
	font-family: inherit;
	font-size: 1.6rem;
	line-height: 2.4rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .22s ease, color .22s ease;
}

.bpsx-rs--jasne .bpsx-rs__stopien,
.bpsx-rs--szare .bpsx-rs__stopien {
	color: var(--bpsx-rs-tekst-2);
}

.bpsx-rs__stopien:hover {
	color: var(--bpsx-k-ffffff);
}

.bpsx-rs--jasne .bpsx-rs__stopien:hover,
.bpsx-rs--szare .bpsx-rs__stopien:hover {
	color: var(--bpsx-rs-czern);
}

/* Stan wybrany rozpoznajemy po `aria-selected`, nie po dodatkowej
   klasie. Jedno źródło prawdy dla oka i dla czytnika ekranu -
   nie da się ich rozjechać. */
.bpsx-rs__stopien[aria-selected="true"],
.bpsx-rs--jasne .bpsx-rs__stopien[aria-selected="true"],
.bpsx-rs--szare .bpsx-rs__stopien[aria-selected="true"] {
	background: var(--bpsx-rs-akcent);
	color: var(--bpsx-k-ffffff);
}

.bpsx-rs__stopien:focus-visible {
	outline: 2px solid var(--bpsx-rs-akcent);
	outline-offset: 3px;
}

.bpsx-rs__panel {
	display: none;
}

.bpsx-rs__panel.jest-aktywny {
	display: block;
	animation: bpsxRsWejscie .35s ease both;
}

@keyframes bpsxRsWejscie {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.bpsx-rs .bpsx-rs__panel-tytul {
	margin: 0 0 1.4rem;
	line-height: 3.4rem;
	font-weight: 600;
	color: var(--bpsx-rs-czern);
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__panel-tytul {
	color: var(--bpsx-k-ffffff);
}

.bpsx-rs .bpsx-rs__panel-opis {
	margin: 0;
	font-size: 1.7rem;
	line-height: 2.9rem;
	color: var(--bpsx-rs-tekst-2);
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__panel-opis {
	color: var(--bpsx-k-ffffff);
}

.bpsx-rs .bpsx-rs__mozliwosci {
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
}

.bpsx-rs .bpsx-rs__mozliwosci li {
	display: flex;
	align-items: flex-start;
	gap: 1.4rem;
	padding: 1.4rem 0;
	border-top: 1px solid var(--bpsx-rs-ramka);
	font-size: 1.6rem;
	line-height: 2.5rem;
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__mozliwosci li {
	border-top-color: color-mix(in srgb, var(--bpsx-k-ffffff) 10%, transparent);
}

.bpsx-rs .bpsx-rs__mozliwosci li:last-child {
	border-bottom: 1px solid var(--bpsx-rs-ramka);
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__mozliwosci li:last-child {
	border-bottom-color: color-mix(in srgb, var(--bpsx-k-ffffff) 10%, transparent);
}

.bpsx-rs .bpsx-rs__mozliwosci li.jest-nie {
	color: color-mix(in srgb, var(--bpsx-k-475569) 65%, transparent);
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__mozliwosci li.jest-nie {
	color: var(--bpsx-k-ffffff);
}

.bpsx-rs__znak {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	margin-top: .1rem;
	border-radius: 50%;
	font-size: 1.3rem;
	line-height: 1;
}

.bpsx-rs__znak--tak {
	background: color-mix(in srgb, var(--bpsx-k-3ac2be) 16%, transparent);
	color: var(--bpsx-rs-akcent-ciemny);
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-rs__znak--tak {
	color: var(--bpsx-rs-akcent);
}

.bpsx-rs__znak--nie {
	background: color-mix(in srgb, var(--bpsx-k-94a3b8) 18%, transparent);
	color: var(--bpsx-k-94a3b8);
}

/* =========================================================
   RYSUNKI
   ========================================================= */

.bpsx-rs__schemat,
.bpsx-rs__lora,
.bpsx-rs__konfig,
.bpsx-rs__wykres,
.bpsx-rs__kwadrans,
.bpsx-rs__chmura {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.bpsx-rs__schemat {
	max-width: 108rem;
	margin: 0 auto;
}

/* --- schemat domu ----------------------------------------------------- */

/* WERSJA JASNA JEST BAZĄ, CIEMNA NADPISUJE. Wariant rysunku wybiera
   się z listy w panelu i może trafić na dowolne tło - żaden z rysunków
   nie ma prawa założyć, że stoi na czerni. Kolejność „baza jasna,
   nadpisanie ciemne" jest w tym arkuszu wszędzie taka sama. */

.bpsx-sch__wezel-tlo { fill: var(--bpsx-k-ffffff); stroke: var(--bpsx-k-e6ecf3); stroke-width: 1; filter: url(#bpsxSchCien); }
.bpsx-sch__wezel-napis { font: 600 1.5rem Poppins, sans-serif; fill: var(--bpsx-k-0f172a); }
.bpsx-sch__linia { fill: none; stroke: var(--bpsx-k-dbe3ec); stroke-width: 1.5; }
.bpsx-sch__ikona { fill: none; stroke: var(--bpsx-k-2aa8a4); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Płytka pod ikoną. Bez niej ikona wisi w powietrzu obok napisu
   i kafel czyta się jak wiersz tabeli, a nie jak urządzenie. */
.bpsx-sch__plytka { fill: color-mix(in srgb, var(--bpsx-k-3ac2be) 10%, transparent); stroke: color-mix(in srgb, var(--bpsx-k-3ac2be) 28%, transparent); stroke-width: 1; }

/* Karta ze zdjęciem urządzenia w środku schematu. Biała także
   na ciemnym tle - zdjęcie produktowe jest wycięte na białym
   i na ciemnej płycie zostawiałoby jasny prostokąt. */
.bpsx-sch__karta { fill: var(--bpsx-k-ffffff); stroke: var(--bpsx-k-e6ecf3); stroke-width: 1; filter: url(#bpsxSchCien); }
.bpsx-sch__karta--pusta { fill: var(--bpsx-k-06090f); stroke: color-mix(in srgb, var(--bpsx-k-3ac2be) 45%, transparent); }
.bpsx-sch__karta-napis { font: 600 1.7rem Poppins, sans-serif; fill: var(--bpsx-k-0f172a); }
.bpsx-sch__karta--pusta ~ .bpsx-sch__karta-napis { fill: var(--bpsx-k-ffffff); }
.bpsx-sch__rdzen-podpis { font: 500 1.2rem Poppins, sans-serif; fill: var(--bpsx-k-3ac2be); letter-spacing: .12em; }

/* Jedyne światło wokół integratora to aureola - statyczna poświata pod
   kartą. Fale rozchodzące się od środka i obracający się pierścień
   zostały zdjęte: razem z impulsami na połączeniach dawały trzy ruchy
   w jednym punkcie. Na jasnym tle aureola jest zgaszona - rozmyty turkus
   na bieli daje brudną plamę zamiast poświaty. */
.bpsx-sch__aureola { opacity: 0; }
.bpsx-sch__krag { fill: none; stroke: var(--bpsx-k-e2e8f0); stroke-width: 1.5; stroke-dasharray: 2 10; stroke-linecap: round; }

.bpsx-rs.bpsx-rs--ciemne .bpsx-sch__wezel-tlo { fill: color-mix(in srgb, var(--bpsx-k-ffffff) 5.5%, transparent); stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 12%, transparent); filter: none; }
.bpsx-rs.bpsx-rs--ciemne .bpsx-sch__wezel-napis { fill: var(--bpsx-k-ffffff); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-sch__linia { stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 14%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-sch__ikona { stroke: var(--bpsx-k-5fe3df); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-sch__plytka { fill: color-mix(in srgb, var(--bpsx-k-3ac2be) 16%, transparent); stroke: color-mix(in srgb, var(--bpsx-k-3ac2be) 38%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-sch__krag { stroke: color-mix(in srgb, var(--bpsx-k-3ac2be) 22%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-sch__aureola { opacity: .55; }
.bpsx-rs.bpsx-rs--ciemne .bpsx-sch__karta { fill: color-mix(in srgb, var(--bpsx-k-ffffff) 7%, transparent); stroke: color-mix(in srgb, var(--bpsx-k-3ac2be) 45%, transparent); stroke-width: 1.5; }
.bpsx-rs.bpsx-rs--ciemne .bpsx-sch__karta-napis { fill: var(--bpsx-k-ffffff); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-sch__iskra { stroke: var(--bpsx-k-5fe3df); filter: url(#bpsxSchIskra); }

/* Iskra to krótka kreska biegnąca po tej samej ścieżce co połączenie.
   Pięć ścieżek dostaje różne opóźnienia, więc impulsy nie startują
   równo i schemat wygląda jak żywa instalacja, a nie jak metronom. */
.bpsx-sch__iskra {
	fill: none;
	stroke: var(--bpsx-k-3ac2be);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-dasharray: 14 150;
	animation: bpsxSchPlynie 3.2s linear infinite;
}

@keyframes bpsxSchPlynie {
	from { stroke-dashoffset: 164; }
	to   { stroke-dashoffset: 0; }
}

.bpsx-sch__puls {
	fill: none;
	stroke: var(--bpsx-k-3ac2be);
	stroke-width: 1.5;
	opacity: 0;
	animation: bpsxPuls 3.4s ease-out infinite;
}

@keyframes bpsxPuls {
	0%   { opacity: .55; transform: scale(1); }
	100% { opacity: 0;   transform: scale(1.35); }
}

/* --- fale LoRa przez ścianę ------------------------------------------- */

.bpsx-lora__mur-tlo { fill: color-mix(in srgb, var(--bpsx-k-0f2036) 5%, transparent); }
.bpsx-lora__mur-kreska { stroke: color-mix(in srgb, var(--bpsx-k-0f2036) 10%, transparent); stroke-width: 1.5; }
.bpsx-lora__urzadzenie { fill: var(--bpsx-k-ffffff); stroke: var(--bpsx-k-e6ecf3); stroke-width: 1; filter: url(#bpsxSchCien); }
.bpsx-lora__kreski rect { fill: color-mix(in srgb, var(--bpsx-k-3ac2be) 55%, transparent); }
.bpsx-lora__kreska--pusta { fill: color-mix(in srgb, var(--bpsx-k-0f2036) 10%, transparent) !important; }
.bpsx-lora__szyna line { stroke: var(--bpsx-k-cbd5e1); stroke-width: 2; }
.bpsx-lora__szyna rect { fill: var(--bpsx-k-e2e8f0); }
.bpsx-lora__antena { fill: var(--bpsx-k-3ac2be); stroke: var(--bpsx-k-3ac2be); stroke-width: 2; stroke-linecap: round; }
.bpsx-lora__nazwa { font: 600 1.5rem Poppins, sans-serif; fill: var(--bpsx-k-0f172a); }
.bpsx-lora__podpis { font: 400 1.25rem Poppins, sans-serif; fill: var(--bpsx-k-94a3b8); }
.bpsx-lora__plakietka { fill: color-mix(in srgb, var(--bpsx-k-3ac2be) 10%, transparent); stroke: color-mix(in srgb, var(--bpsx-k-3ac2be) 30%, transparent); stroke-width: 1; }
.bpsx-lora__plakietka-napis { font: 600 1.3rem Poppins, sans-serif; fill: var(--bpsx-k-1a8e8a); }

/* Fala biegnie od anteny w lewo i gaśnie za ścianą. Trzy łuki
   z opóźnieniem 0,45 s czytają się jako jeden sygnał w drodze,
   a nie jako trzy osobne obiekty. */
.bpsx-lora__fala {
	fill: none;
	stroke: var(--bpsx-k-3ac2be);
	stroke-width: 2.4;
	stroke-linecap: round;
	opacity: 0;
	animation: bpsxLoraFala 2.4s ease-out infinite;
}

@keyframes bpsxLoraFala {
	0%   { opacity: 0; transform: translateX(14px); }
	25%  { opacity: .9; }
	100% { opacity: 0; transform: translateX(-70px); }
}

.bpsx-rs.bpsx-rs--ciemne .bpsx-lora__mur-tlo { fill: color-mix(in srgb, var(--bpsx-k-ffffff) 4.5%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-lora__mur-kreska { stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 12%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-lora__urzadzenie { fill: color-mix(in srgb, var(--bpsx-k-ffffff) 5.5%, transparent); stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 12%, transparent); filter: none; }
.bpsx-rs.bpsx-rs--ciemne .bpsx-lora__kreska--pusta { fill: color-mix(in srgb, var(--bpsx-k-ffffff) 12%, transparent) !important; }
.bpsx-rs.bpsx-rs--ciemne .bpsx-lora__szyna line { stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 22%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-lora__szyna rect { fill: color-mix(in srgb, var(--bpsx-k-ffffff) 18%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-lora__nazwa { fill: var(--bpsx-k-ffffff); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-lora__podpis { fill: color-mix(in srgb, var(--bpsx-k-ffffff) 55%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-lora__plakietka { fill: color-mix(in srgb, var(--bpsx-k-3ac2be) 14%, transparent); stroke: color-mix(in srgb, var(--bpsx-k-3ac2be) 42%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-lora__plakietka-napis { fill: var(--bpsx-k-5fe3df); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-lora__fala { stroke: var(--bpsx-k-5fe3df); }

/* --- dwa pola i reszta sama ------------------------------------------- */

.bpsx-konf__pole { fill: var(--bpsx-k-ffffff); stroke: var(--bpsx-k-e6ecf3); stroke-width: 1; filter: url(#bpsxSchCien); }
.bpsx-konf__ikona { fill: none; stroke: var(--bpsx-k-2aa8a4); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* NAZWA POLA JEST WAŻNIEJSZA NIŻ TO, KTO JE WYPEŁNIA. Pierwsza wersja
   miała odwrotnie - drobna szara etykieta i duża wartość pod nią - przez
   co rysunek czytał się jako „podaje instalator / wybiera z listy",
   a ma się czytać jako „lokalizacja i taryfa, i tyle". */
/* BEZ WERSALIKÓW I BEZ ROZSTRZELENIA. Etykieta pisana wielkimi literami
   z `letter-spacing` to typowy chwyt „technicznego" interfejsu i tu się
   nie sprawdził - nazwa pola ma się czytać jak nazwa pola, a nie jak
   nagłówek tabeli. Wielka tylko pierwsza litera, reszta zwykle. */
.bpsx-konf__etykieta { font: 700 1.5rem Poppins, sans-serif; fill: var(--bpsx-k-0f172a); }
.bpsx-konf__wartosc { font: 500 1.25rem Poppins, sans-serif; fill: var(--bpsx-k-64748b); }
.bpsx-konf__splyw path { fill: none; stroke: var(--bpsx-k-dbe3ec); stroke-width: 1.5; }
.bpsx-konf__grot { fill: none; stroke: var(--bpsx-k-3ac2be); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bpsx-konf__panel { fill: color-mix(in srgb, var(--bpsx-k-3ac2be) 5%, transparent); stroke: color-mix(in srgb, var(--bpsx-k-3ac2be) 22%, transparent); stroke-width: 1; }
.bpsx-konf__panel-napis { font: 700 1.4rem Poppins, sans-serif; fill: var(--bpsx-k-1a8e8a); }
.bpsx-konf__ptaszek-tlo { fill: color-mix(in srgb, var(--bpsx-k-3ac2be) 16%, transparent); }
.bpsx-konf__ptaszek { fill: none; stroke: var(--bpsx-k-1a8e8a); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bpsx-konf__wiersz-napis { font: 500 1.4rem Poppins, sans-serif; fill: var(--bpsx-k-0f172a); }
.bpsx-konf__wiersz-kreska { stroke: color-mix(in srgb, var(--bpsx-k-3ac2be) 18%, transparent); stroke-width: 1; }

.bpsx-rs.bpsx-rs--ciemne .bpsx-konf__pole { fill: color-mix(in srgb, var(--bpsx-k-ffffff) 5.5%, transparent); stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 12%, transparent); filter: none; }
.bpsx-rs.bpsx-rs--ciemne .bpsx-konf__ikona { stroke: var(--bpsx-k-5fe3df); }
/* Na ciemnym tle wszystkie napisy tego rysunku są białe. Szarość
   wygląda tu na element wyłączony, a nie na hierarchię - różnicę
   między etykietą a wartością niesie rozmiar i grubość pisma. */
.bpsx-rs.bpsx-rs--ciemne .bpsx-konf__etykieta { fill: var(--bpsx-k-ffffff); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-konf__wartosc { fill: var(--bpsx-k-ffffff); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-konf__splyw path { stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 16%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-konf__panel { fill: color-mix(in srgb, var(--bpsx-k-3ac2be) 7%, transparent); stroke: color-mix(in srgb, var(--bpsx-k-3ac2be) 28%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-konf__panel-napis { fill: var(--bpsx-k-5fe3df); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-konf__ptaszek-tlo { fill: color-mix(in srgb, var(--bpsx-k-3ac2be) 22%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-konf__ptaszek { stroke: var(--bpsx-k-5fe3df); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-konf__wiersz-napis { fill: var(--bpsx-k-ffffff); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-konf__wiersz-kreska { stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 10%, transparent); }

/* --- wykres doby ------------------------------------------------------ */

.bpsx-wyk__siatka { stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 9%, transparent); stroke-width: 1; }
.bpsx-wyk__os-napis { font: 500 1.2rem Poppins, sans-serif; fill: var(--bpsx-k-ffffff); }
.bpsx-wyk__slupek { fill: color-mix(in srgb, var(--bpsx-k-ffffff) 14%, transparent); }
.bpsx-wyk__slupek--drogo { fill: color-mix(in srgb, var(--bpsx-k-f0b429) 55%, transparent); }
.bpsx-wyk__slupek--tanio { fill: color-mix(in srgb, var(--bpsx-k-3ac2be) 38%, transparent); }
.bpsx-wyk__pv-obszar { fill: url(#bpsxGradPV); }
.bpsx-wyk__pv-linia { fill: none; stroke: var(--bpsx-k-3ac2be); stroke-width: 2.6; stroke-linecap: round; }
.bpsx-wyk__zuzycie { fill: none; stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 62%, transparent); stroke-width: 2; stroke-dasharray: 6 5; }
.bpsx-wyk__legenda { font: 500 1.3rem Poppins, sans-serif; fill: var(--bpsx-k-ffffff); }
.bpsx-wyk__znacznik-tlo { fill: color-mix(in srgb, var(--bpsx-k-06090f) 92%, transparent); stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 18%, transparent); stroke-width: 1; }
.bpsx-wyk__znacznik-napis { font: 600 1.3rem Poppins, sans-serif; fill: var(--bpsx-k-ffffff); }
.bpsx-wyk__znacznik--kup .bpsx-wyk__znacznik-tlo { stroke: color-mix(in srgb, var(--bpsx-k-3ac2be) 65%, transparent); }
.bpsx-wyk__znacznik--sprzedaj .bpsx-wyk__znacznik-tlo { stroke: color-mix(in srgb, var(--bpsx-k-f0b429) 75%, transparent); }
.bpsx-wyk__kropka { fill: var(--bpsx-k-06090f); stroke-width: 3; }
.bpsx-wyk__kropka--akcent { stroke: var(--bpsx-k-3ac2be); }
.bpsx-wyk__kropka--zloto { stroke: var(--bpsx-k-f0b429); }

.bpsx-rs--jasne .bpsx-wyk__siatka,
.bpsx-rs--szare .bpsx-wyk__siatka { stroke: var(--bpsx-k-e2e8f0); }
.bpsx-rs--jasne .bpsx-wyk__os-napis,
.bpsx-rs--szare .bpsx-wyk__os-napis { fill: var(--bpsx-k-64748b); }
.bpsx-rs--jasne .bpsx-wyk__slupek,
.bpsx-rs--szare .bpsx-wyk__slupek { fill: color-mix(in srgb, var(--bpsx-k-06090f) 10%, transparent); }
.bpsx-rs--jasne .bpsx-wyk__zuzycie,
.bpsx-rs--szare .bpsx-wyk__zuzycie { stroke: var(--bpsx-k-64748b); }
.bpsx-rs--jasne .bpsx-wyk__legenda,
.bpsx-rs--szare .bpsx-wyk__legenda { fill: var(--bpsx-k-475569); }
.bpsx-rs--jasne .bpsx-wyk__kropka,
.bpsx-rs--szare .bpsx-wyk__kropka { fill: var(--bpsx-k-ffffff); }

/* --- okno rozliczeniowe ------------------------------------------------ */

.bpsx-kw__ramka { fill: var(--bpsx-k-ffffff); stroke: var(--bpsx-k-e8eef4); stroke-width: 1; }
.bpsx-kw__siatka { stroke: var(--bpsx-k-f1f5f9); stroke-width: 1; }
.bpsx-kw__zero { stroke: var(--bpsx-k-94a3b8); stroke-width: 1.5; }
.bpsx-kw__tick { stroke: var(--bpsx-k-cbd5e1); stroke-width: 1; }
.bpsx-kw__tick--duzy { stroke: var(--bpsx-k-94a3b8); stroke-width: 1.5; }
.bpsx-kw__napis { font: 500 1.2rem Poppins, sans-serif; fill: var(--bpsx-k-64748b); }
.bpsx-kw__pobor { fill: url(#bpsxKwPobor); }
.bpsx-kw__pobor-linia { fill: none; stroke: var(--bpsx-k-e09a12); stroke-width: 2.4; stroke-linejoin: round; }
.bpsx-kw__korekta { fill: url(#bpsxKwKorekta); }
.bpsx-kw__korekta-linia { fill: none; stroke: var(--bpsx-k-2aa8a4); stroke-width: 2.4; stroke-linejoin: round; }
.bpsx-kw__probka--pobor { fill: color-mix(in srgb, var(--bpsx-k-f0b429) 85%, transparent); }
.bpsx-kw__probka--korekta { fill: color-mix(in srgb, var(--bpsx-k-3ac2be) 85%, transparent); }

/* Głowica jest DOMYŚLNIE NIEWIDOCZNA i zapala ją dopiero klasa
   `jest-widoczna` nadawana skryptem - patrz komentarz w grafikach.
   To jedyny element rysunku, który wolno tak schować: nie niesie
   treści, tylko ruch. */
.bpsx-kw__glowica { opacity: 0; }
.bpsx-kw__glowica-linia { stroke: var(--bpsx-k-2aa8a4); stroke-width: 1.5; }
.bpsx-kw__glowica-kropka { fill: var(--bpsx-k-2aa8a4); }

.bpsx-rs.bpsx-rs--ciemne .bpsx-kw__ramka { fill: color-mix(in srgb, var(--bpsx-k-ffffff) 3.5%, transparent); stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 10%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-kw__siatka { stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 7%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-kw__zero { stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 30%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-kw__tick { stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 22%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-kw__tick--duzy { stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 45%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-kw__napis { fill: color-mix(in srgb, var(--bpsx-k-ffffff) 72%, transparent); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-kw__pobor-linia { stroke: var(--bpsx-k-f0b429); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-kw__korekta-linia { stroke: var(--bpsx-k-3ac2be); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-kw__glowica-linia { stroke: var(--bpsx-k-5fe3df); }
.bpsx-rs.bpsx-rs--ciemne .bpsx-kw__glowica-kropka { fill: var(--bpsx-k-5fe3df); }

/* --- chmura ------------------------------------------------------------ */

.bpsx-chm__dom { fill: color-mix(in srgb, var(--bpsx-k-ffffff) 4%, transparent); stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 22%, transparent); stroke-width: 1.6; }
.bpsx-chm__dom-napis { font: 600 1.5rem Poppins, sans-serif; fill: var(--bpsx-k-ffffff); }
.bpsx-chm__podpis { font: 500 1.2rem Poppins, sans-serif; fill: var(--bpsx-k-ffffff); }
.bpsx-chm__obiekt {
	fill: none;
	stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 30%, transparent);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .3s ease;
}
.bpsx-chm__rura { fill: none; stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 16%, transparent); stroke-width: 2; stroke-dasharray: 4 6; }
.bpsx-chm__ruch {
	fill: none;
	stroke: var(--bpsx-k-3ac2be);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 10 42;
	opacity: 0;
}
.bpsx-chm__aureola { fill: none; stroke: var(--bpsx-k-3ac2be); stroke-width: 1.4; opacity: 0; transition: opacity .35s ease; }
.bpsx-chm__krzyzyk { stroke: var(--bpsx-k-94a3b8); stroke-width: 2.4; stroke-linecap: round; opacity: 0; transition: opacity .3s ease; }
/* Napis nad rurą danych jest PODPISEM RYSUNKU, nie nagłówkiem.
   Pogrubiony konkurował z nagłówkiem sekcji i ciągnął oko na siebie,
   choć niesie tylko trzy słowa opisu stanu. */
.bpsx-chm__etykieta {
	font: 400 1.2rem Poppins, sans-serif;
	fill: var(--bpsx-k-ffffff);
	letter-spacing: .06em;
	opacity: 0;
	transition: opacity .3s ease;
}

.bpsx-rs--jasne .bpsx-chm__dom,
.bpsx-rs--szare .bpsx-chm__dom { fill: color-mix(in srgb, var(--bpsx-k-06090f) 3%, transparent); stroke: var(--bpsx-k-cbd5e1); }
.bpsx-rs--jasne .bpsx-chm__dom-napis,
.bpsx-rs--szare .bpsx-chm__dom-napis { fill: var(--bpsx-k-06090f); }
.bpsx-rs--jasne .bpsx-chm__podpis,
.bpsx-rs--szare .bpsx-chm__podpis { fill: var(--bpsx-k-64748b); }
.bpsx-rs--jasne .bpsx-chm__obiekt,
.bpsx-rs--szare .bpsx-chm__obiekt { stroke: var(--bpsx-k-94a3b8); }
.bpsx-rs--jasne .bpsx-chm__rura,
.bpsx-rs--szare .bpsx-chm__rura { stroke: var(--bpsx-k-cbd5e1); }
.bpsx-rs--jasne .bpsx-chm__etykieta,
.bpsx-rs--szare .bpsx-chm__etykieta { fill: var(--bpsx-k-475569); }

/* stopień 1 - dane lecą w obie strony */
.bpsx-rs__chmura.jest-1 .bpsx-chm__ruch--w-gore,
.bpsx-rs__chmura.jest-1 .bpsx-chm__ruch--w-dol {
	opacity: 1;
	animation: bpsxChmPlynie 2.6s linear infinite;
}
.bpsx-rs__chmura.jest-1 .bpsx-chm__ruch--w-dol { animation-direction: reverse; }
.bpsx-rs__chmura.jest-1 .bpsx-chm__obiekt--chmura,
.bpsx-rs__chmura.jest-1 .bpsx-chm__obiekt--telefon { stroke: var(--bpsx-k-3ac2be); }
.bpsx-rs__chmura.jest-1 .bpsx-chm__etykieta--pelna { opacity: 1; }

/* stopień 2 - do domu wchodzą tylko ceny i pogoda */
.bpsx-rs__chmura.jest-2 .bpsx-chm__ruch--w-dol {
	opacity: 1;
	animation: bpsxChmPlynie 2.6s linear infinite reverse;
}
.bpsx-rs__chmura.jest-2 .bpsx-chm__obiekt--chmura { stroke: color-mix(in srgb, var(--bpsx-k-3ac2be) 60%, transparent); }
.bpsx-rs__chmura.jest-2 .bpsx-chm__obiekt--telefon { stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 14%, transparent); }
.bpsx-rs--jasne .bpsx-rs__chmura.jest-2 .bpsx-chm__obiekt--telefon,
.bpsx-rs--szare .bpsx-rs__chmura.jest-2 .bpsx-chm__obiekt--telefon { stroke: var(--bpsx-k-e2e8f0); }
.bpsx-rs__chmura.jest-2 .bpsx-chm__etykieta--dane { opacity: 1; }

/* stopień 3 - wyspa bez internetu */
.bpsx-rs__chmura.jest-3 .bpsx-chm__obiekt--chmura,
.bpsx-rs__chmura.jest-3 .bpsx-chm__obiekt--telefon { stroke: color-mix(in srgb, var(--bpsx-k-ffffff) 12%, transparent); }
.bpsx-rs--jasne .bpsx-rs__chmura.jest-3 .bpsx-chm__obiekt--chmura,
.bpsx-rs--jasne .bpsx-rs__chmura.jest-3 .bpsx-chm__obiekt--telefon,
.bpsx-rs--szare .bpsx-rs__chmura.jest-3 .bpsx-chm__obiekt--chmura,
.bpsx-rs--szare .bpsx-rs__chmura.jest-3 .bpsx-chm__obiekt--telefon { stroke: var(--bpsx-k-e2e8f0); }
.bpsx-rs__chmura.jest-3 .bpsx-chm__krzyzyk { opacity: 1; }
.bpsx-rs__chmura.jest-3 .bpsx-chm__aureola { opacity: .55; animation: bpsxPuls 3.2s ease-out infinite; }
.bpsx-rs__chmura.jest-3 .bpsx-chm__etykieta--wyspa { opacity: 1; }

@keyframes bpsxChmPlynie {
	from { stroke-dashoffset: 52; }
	to   { stroke-dashoffset: 0; }
}

/* =========================================================
   WEJŚCIE PRZY SCROLLU

   Reguły przygaszające siedzą pod `.bpsx-rs` i zdejmuje je klasa
   `jest-widoczna`, którą nadaje skrypt. Gdyby arkusz przygaszał
   bezwarunkowo, każdy błąd skryptu - blokada, zła sklejka, stary
   cache - dałby sekcję z niewidoczną treścią zamiast sekcji bez
   animacji. Ta sama zasada co w `animacje.css` (pułapka z 19.08).

   Dlatego klasę `bpsx-rs-anim` na `<html>` nadaje skrypt: bez
   skryptu żadna z tych reguł nie obowiązuje i wszystko jest widać.
   ========================================================= */

.bpsx-rs-anim .bpsx-rs [data-bpsx-rs-wejscie] {
	opacity: 0;
	transform: translateY(24px);
}

.bpsx-rs-anim .bpsx-rs.jest-widoczna [data-bpsx-rs-wejscie] {
	opacity: 1;
	transform: none;
	transition: opacity .55s ease, transform .55s ease;
}

.bpsx-rs-anim .bpsx-rs.jest-widoczna [data-bpsx-rs-wejscie="1"] { transition-delay: .08s; }
.bpsx-rs-anim .bpsx-rs.jest-widoczna [data-bpsx-rs-wejscie="2"] { transition-delay: .16s; }
.bpsx-rs-anim .bpsx-rs.jest-widoczna [data-bpsx-rs-wejscie="3"] { transition-delay: .24s; }
.bpsx-rs-anim .bpsx-rs.jest-widoczna [data-bpsx-rs-wejscie="4"] { transition-delay: .32s; }

/* Krzywa produkcji dorysowuje się kreską. Kreski przerywanej
   (`zużycie obiektu`) NIE animujemy tak samo - `stroke-dasharray`
   użyte do rysowania skasowałoby jej wzór i linia wyszłaby ciągła,
   niezgodnie z legendą. */
.bpsx-rs-anim .bpsx-wyk__pv-linia {
	stroke-dasharray: 2400;
	stroke-dashoffset: 2400;
}

.bpsx-rs-anim .bpsx-rs.jest-widoczna .bpsx-wyk__pv-linia {
	animation: bpsxRsRysuj 1.6s .3s ease-out forwards;
}

@keyframes bpsxRsRysuj {
	to { stroke-dashoffset: 0; }
}

.bpsx-rs-anim .bpsx-wyk__slupek {
	transform: scaleY(0);
	transform-origin: 0 390px;
}

.bpsx-rs-anim .bpsx-rs.jest-widoczna .bpsx-wyk__slupek {
	animation: bpsxRsSlupek .6s ease-out forwards;
}

@keyframes bpsxRsSlupek {
	to { transform: scaleY(1); }
}

.bpsx-rs-anim .bpsx-wyk__znacznik { opacity: 0; }
.bpsx-rs-anim .bpsx-rs.jest-widoczna .bpsx-wyk__znacznik { animation: bpsxRsWejscie .5s 1.4s ease forwards; }

/* Bryły okna rozliczeniowego odsłaniają się od lewej - jak upływ
   czasu w kwadransie. `clip-path`, nie `stroke-dasharray`: tamto
   dorysowywałoby kontur, ale wypełnienie i tak pojawiłoby się
   od razu w całości. */
.bpsx-rs-anim .bpsx-kw__pobor,
.bpsx-rs-anim .bpsx-kw__pobor-linia,
.bpsx-rs-anim .bpsx-kw__korekta,
.bpsx-rs-anim .bpsx-kw__korekta-linia {
	clip-path: inset(0 100% 0 0);
}

.bpsx-rs-anim .bpsx-rs.jest-widoczna .bpsx-kw__pobor,
.bpsx-rs-anim .bpsx-rs.jest-widoczna .bpsx-kw__pobor-linia {
	animation: bpsxRsOdsloniecie 1.1s .2s ease-out forwards;
}

.bpsx-rs-anim .bpsx-rs.jest-widoczna .bpsx-kw__korekta,
.bpsx-rs-anim .bpsx-rs.jest-widoczna .bpsx-kw__korekta-linia {
	animation: bpsxRsOdsloniecie 1.1s 1.1s ease-out forwards;
}

/* Głowica przejeżdża przez okno w 6,5 s - dokładnie 560 px, czyli
   piętnaście minut z rysunku. Startuje dopiero razem z sekcją,
   więc nie kręci się w tle przez całą wizytę.

   BEZ OPÓŹNIENIA STARTU. Miała czekać 1,2 s, aż wypełnią się bryły -
   ale opóźniona animacja nie znaczy „element czeka niewidoczny", tylko
   „element stoi na pierwszej klatce". Głowica wisiała więc nieruchomo
   przy lewej krawędzi i wyglądała na zawieszoną. Teraz rusza od razu
   i prowadzi wypełnienie, zamiast biec za nim. */
.bpsx-rs-anim .bpsx-rs.jest-widoczna .bpsx-kw__glowica {
	opacity: 1;
	animation: bpsxKwPrzejazd 6.5s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes bpsxKwPrzejazd {
	from { transform: translateX(0); }
	to   { transform: translateX(560px); }
}

/* Wiersze „reszta ustawia się sama" zapalają się po kolei. Kolejność
   jest treścią sekcji, nie ozdobą - dlatego wchodzą dopiero wtedy,
   gdy sekcja jest na ekranie i ktoś to widzi. */
.bpsx-rs-anim .bpsx-konf__wiersz { opacity: 0; }

.bpsx-rs-anim .bpsx-rs.jest-widoczna .bpsx-konf__wiersz {
	animation: bpsxRsWejscie .45s ease forwards;
}

@keyframes bpsxRsOdsloniecie {
	to { clip-path: inset(0 0 0 0); }
}

/* =========================================================
   RWD
   ========================================================= */

@media (max-width: 1200px) {
	.bpsx-rs__lancuch--4,
	.bpsx-rs__lancuch--5,
	.bpsx-rs__lancuch--6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 3.6rem;
	}

	.bpsx-rs__lancuch--6 .bpsx-rs__ogniwo:nth-child(3)::after { display: none; }
}

@media (max-width: 1024px) {
	.bpsx-rs { padding: 8rem 0; }
	.bpsx-rs__tytul {line-height: 4.4rem; }

	.bpsx-rs__duet {
		grid-template-columns: minmax(0, 1fr);
		gap: 4.8rem;
	}

	/* Na wąskim ekranie rysunek zawsze idzie POD tekstem, niezależnie
	   od tego, po której stronie stoi na dużym. Kolejność czytania
	   ma być jedna: najpierw co to jest, potem jak wygląda. */
	.bpsx-rs__duet--odwrotnie .bpsx-rs__duet-tresc { order: 0; }

	/* Kolumny stoją jedna pod drugą, więc podnoszenie rysunku chmury
	   nie ma już czego wyrównywać - wjechałby na tekst nad sobą. */
	.bpsx-rs--chmura .bpsx-rs__grafika { top: 0; }

	.bpsx-rs__kafle--2,
	.bpsx-rs__kafle--3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
	.bpsx-rs { padding: 6.4rem 0; }
	.bpsx-rs__tytul {line-height: 3.8rem; }
	.bpsx-rs__glowa { margin-bottom: 4rem; }
	.bpsx-rs__kafle { margin-top: 4rem; }
	.bpsx-rs__kafel { padding: 2.8rem 2.4rem; }

	.bpsx-rs__lancuch--3,
	.bpsx-rs__lancuch--4,
	.bpsx-rs__lancuch--5,
	.bpsx-rs__lancuch--6 {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2.8rem;
	}

	.bpsx-rs__ogniwo { padding: 0; }
	.bpsx-rs__ogniwo::after { display: none; }

	.bpsx-rs__stopnie {
		display: flex;
		flex-direction: column;
		width: 100%;
		border-radius: 1.6rem;
	}

	.bpsx-rs__stopien { border-radius: 1.2rem; }

	.bpsx-rs__saldo {
		gap: 2.8rem;
		padding: 2.8rem 2.4rem;
	}

	.bpsx-rs__saldo-pozycja { min-width: 12rem; }
	.bpsx-rs__saldo-liczba { font-size: 3rem; line-height: 3.4rem; }
}

/* PONIŻEJ 1440 px PODSTAWA `rem` TO 9 px, NIE 10.
   Cała ta strona skaluje bazę `rem` na progach i poniżej 90em daje
   9 px. Zapis `1.6rem` znaczy tam 14,4 px, czyli poniżej progu 16 px,
   który obowiązuje dla tekstu treściowego. Dla odstępów i wymiarów
   to jest sens całego mechanizmu; dla tekstu, który ktoś ma czytać -
   nie jest. Ten blok przywraca tekstowi rozmiar projektowy.
   Nagłówki, podpisy i etykiety zostają - one mają się skalować. */
@media (max-width: 89.99em) {
	.bpsx-rs .bpsx-rs__kafel-opis,
	.bpsx-rs .bpsx-rs__mozliwosci li,
	.bpsx-rs .bpsx-rs__ogniwo-opis {
		font-size: 1.78rem;
		line-height: 2.9rem;
	}
}

/* Rysunki w kolumnie dwukolumnowego układu nie mają rosnąć bez końca -
   przy 1920 px kolumna ma prawie 900 px i schemat rozdzielnicy zaczyna
   wyglądać jak plakat. Na wąskim ekranie limit znika, bo tam rysunek
   i tak stoi sam pod tekstem. */
@media (min-width: 1025px) {
	.bpsx-rs__lora,
	.bpsx-rs__konfig,
	.bpsx-rs__kwadrans {
		max-width: 64rem;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Osoby, które prosiły system o mniej ruchu, dostają statyczne
   sekcje - ale kompletne. Nic nie może zostać niewidoczne. */
@media (prefers-reduced-motion: reduce) {
	.bpsx-rs *,
	.bpsx-rs *::before,
	.bpsx-rs *::after {
		animation: none !important;
		transition: none !important;
	}

	.bpsx-rs-anim .bpsx-rs [data-bpsx-rs-wejscie] { opacity: 1; transform: none; }
	.bpsx-rs-anim .bpsx-wyk__pv-linia { stroke-dasharray: none; stroke-dashoffset: 0; }
	.bpsx-rs-anim .bpsx-wyk__slupek { transform: none; }
	.bpsx-rs-anim .bpsx-wyk__znacznik { opacity: 1; }
	.bpsx-rs-anim .bpsx-kw__pobor,
	.bpsx-rs-anim .bpsx-kw__pobor-linia,
	.bpsx-rs-anim .bpsx-kw__korekta,
	.bpsx-rs-anim .bpsx-kw__korekta-linia { clip-path: none; }

	/* Elementy, które w wersji ruchomej startują niewidoczne, muszą tu
	   dostać widoczność z powrotem - inaczej „mniej ruchu" znaczyłoby
	   „mniej treści". Głowica jest wyjątkiem: to czysty ruch, więc
	   zostaje zgaszona. */
	.bpsx-lora__fala { opacity: .5; transform: none; }
	.bpsx-rs-anim .bpsx-konf__wiersz { opacity: 1; }
	.bpsx-rs-anim .bpsx-rs.jest-widoczna .bpsx-kw__glowica { opacity: 0; }
}

/* ------------------------------------------------------------------ *
 *  OKNO KWADRANSA - kropka na przebiegu i licznik salda
 *  Dołożone 14.09.2026.
 * ------------------------------------------------------------------ */

/*
 * Kropka zastąpiła pionową kreskę. Jedzie po tych samych ścieżkach,
 * które rysują przebiegi - `offset-path: url(#id)` - więc nie ma jak
 * się od nich oderwać przy zmianie kształtu wykresu.
 *
 * OKNO TRWA 6,5 SEKUNDY i ta liczba stoi w trzech miejscach:
 * tutaj dwa razy (obie fazy po 3,25 s) i w `ems.js` jako stała OKNO.
 * Rozjazd sprawi, że licznik dojdzie do zera w innym momencie niż
 * kropka dojedzie do końca osi.
 *
 * Kropki są niewidoczne, dopóki skrypt nie potwierdzi wsparcia dla
 * `offset-path` - inaczej obie usiadłyby w rogu rysunku.
 */
.bpsx-kw__jezdziec {
	opacity: 0;
}

.bpsx-ems-ruch .bpsx-kw__jezdziec--pobor {
	offset-path: url( #bpsxKwSciezkaPobor );
	fill: var(--bpsx-k-f0b429);
	animation: bpsx-kw-jedzie-1 6.5s linear infinite, bpsx-kw-widac-1 6.5s steps(1) infinite;
}

.bpsx-ems-ruch .bpsx-kw__jezdziec--korekta {
	offset-path: url( #bpsxKwSciezkaKorekta );
	fill: var(--bpsx-k-3ac2be);
	animation: bpsx-kw-jedzie-2 6.5s linear infinite, bpsx-kw-widac-2 6.5s steps(1) infinite;
}

/*
 * PAŁECZKA MIĘDZY KROPKAMI. Pierwsza jedzie i świeci przez pierwszą
 * połowę okna, druga przez drugą - i każda jest niewidoczna wtedy,
 * gdy nie jest jej kolej.
 *
 * Pierwsze podejście robiło to jednym zestawem klatek i opóźnieniem
 * `animation-delay` na drugiej kropce. NIE DZIAŁAŁO: przed startem
 * animacja nie obowiązuje, więc druga kropka stała widoczna na
 * początku swojej ścieżki przez pierwszą połowę okna. Na rysunku
 * widać było dwie kropki naraz, co przeczyło całej sekcji.
 * Dlatego każda kropka ma własne klatki i żadna nie ma opóźnienia.
 */
@keyframes bpsx-kw-jedzie-1 {
	0%        { offset-distance: 0%; }
	50%, 100% { offset-distance: 100%; }
}

@keyframes bpsx-kw-widac-1 {
	0%        { opacity: 1; }
	50%, 100% { opacity: 0; }
}

@keyframes bpsx-kw-jedzie-2 {
	0%, 50% { offset-distance: 0%; }
	100%    { offset-distance: 100%; }
}

@keyframes bpsx-kw-widac-2 {
	0%        { opacity: 0; }
	50%, 100% { opacity: 1; }
}

/* Licznik salda okna. */
.bpsx-kw__licznik rect {
	fill: color-mix(in srgb, var(--bpsx-k-06090f) 72%, transparent);
	stroke: color-mix(in srgb, var(--bpsx-k-f0b429) 35%, transparent);
	stroke-width: 1;
}

.bpsx-kw__licznik-etykieta {
	fill: var(--bpsx-k-93a7b8);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bpsx-kw__licznik-jednostka {
	fill: var(--bpsx-k-93a7b8);
	font-size: 1.2rem;
	font-weight: 600;
}

.bpsx-kw__licznik-wartosc {
	fill: var(--bpsx-k-f0b429);
	font-size: 2.6rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: fill .3s ease;
}

/*
 * Moment zera. Cała robota tej sekcji sprowadza się do tej jednej
 * chwili, więc dostaje własny efekt: licznik przechodzi na turkus
 * i pulsuje razem z ramką.
 */
.bpsx-rs__kwadrans.jest-zero .bpsx-kw__licznik-wartosc {
	fill: var(--bpsx-k-7ae7e3);
	animation: bpsx-kw-zero .6s ease-out;
}

.bpsx-rs__kwadrans.jest-zero .bpsx-kw__licznik rect {
	stroke: color-mix(in srgb, var(--bpsx-k-7ae7e3) 90%, transparent);
	animation: bpsx-kw-zero-ramka .6s ease-out;
}

@keyframes bpsx-kw-zero {
	0%   { transform: scale( 1 ); }
	35%  { transform: scale( 1.14 ); }
	100% { transform: scale( 1 ); }
}

@keyframes bpsx-kw-zero-ramka {
	0%   { stroke-width: 1; opacity: 1; }
	40%  { stroke-width: 3; opacity: 1; }
	100% { stroke-width: 1; opacity: 1; }
}

.bpsx-kw__licznik-wartosc {
	transform-box: fill-box;
	transform-origin: right center;
}

@media ( prefers-reduced-motion: reduce ) {

	.bpsx-ems-ruch .bpsx-kw__jezdziec { animation: none; opacity: 0; }
	.bpsx-ems-ruch .bpsx-kw__jezdziec--pobor { opacity: .7; }

	.bpsx-rs__kwadrans.jest-zero .bpsx-kw__licznik-wartosc,
	.bpsx-rs__kwadrans.jest-zero .bpsx-kw__licznik rect { animation: none; }
}