/**
 * Ulubione — lista zapisanych ofert.
 *
 * Kolory przez tokeny `--mz-*` z Monazo SOT, każdy z wartością zapasową
 * zapisaną WPROST (wartość zapasowa nie może zależeć od tego, czego brakuje).
 * Tryb ciemny działa przez tokeny, bez reguł `[data-scheme]` — z JEDNYM
 * wyjątkiem: tło bloku zachęty, dla którego pary tokenów nie ma
 * (szczegóły przy `.mzpf-cta`).
 *
 * ŻADEN TEKST NIE JEST AKAPITEM — motyw maluje `.entry-content p`
 * z `!important` i walka specyficznością jest z nim przegrana. `<span>`
 * z `display: block` wygląda identycznie, a `p` z selektora motywu nie ma
 * w co trafić.
 *
 * ═══ TU NIE MA STYLÓW PRZYCISKU GWIAZDKI — I TO JEST CELOWE ═══
 *
 * Do 0.9.5 arkusz malował `.mzpf-fav` (kontur, wypełnienie ikony, komunikat
 * dla gościa). Od 0.10.0 przycisk pochodzi z pływającego doku Monazo
 * Essentials i ma własny wygląd, dopasowany do szkła doku. Klasy `mzpf-fav`
 * i `mzpf-fav--icon` zostały CZYSTYMI HAKAMI dla JavaScriptu — pierwsza zawęża
 * selektor montowania (`data-mzpf-fav` niesie też „×” w wierszu listy), druga
 * mówi modułowi, że etykieta ma iść do `aria-label`, bo nie ma widocznego
 * tekstu.
 *
 * Gdyby te reguły tu zostały, weszłyby na przycisk w doku i rozjechały pasek:
 * jeden element malowany przez dwa arkusze to dwa źródła prawdy dla wyglądu.
 */

/* ── Filtry ────────────────────────────────────────────────────────────────
   Wygląd i zachowanie 1:1 z modułem „Moich premii” — obie listy mają wyglądać
   jak jedna rodzina. */


/* ── Wąski pojemnik (panel nakładki) ───────────────────────────────────────
   Ten sam próg i ten sam zestaw poprawek co w module premii: sumy zostają
   w dwóch kolumnach, zmienia się wyłącznie oddech kafelków i zachowanie
   etykiety przy ~167 px na kolumnę. */

@container mzpf-favs ( max-width: 420px ) {
	.mzpf-favs .mzpf-sums__item {
		padding: 14px 12px;
	}

	/* ZAWIJANIE, NIE WIELOKROPEK. W wąskiej kolumnie skracanie zamieniało
	   „DO ZDOBYCIA” w „DO ZDOBY…”, co wygląda na usterkę. Druga linia jest
	   brzydsza od jednej, ale zawsze czytelna — a przy realnych etykietach
	   i tak się nie pojawia. */
	.mzpf-favs .mzpf-sums__label {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.mzpf-favs .mzpf-filters__btn {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		text-align: center;
	}
}

.mzpf-favs .mzpf-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.mzpf-favs .mzpf-filters__btn {
	appearance: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border: 1px solid var( --mz-line-2, #dbdbdb );
	border-radius: 10px;
	background: transparent;
	color: var( --mz-muted, #6e6e6e ) !important;
	font: inherit;
	font-size: 13.5px;
	transition: border-color .18s, color .18s;
}

.mzpf-favs .mzpf-filters__btn:hover {
	color: var( --mz-ink, #111111 ) !important;
}

/* Wybrany filtr: kontur w akcencie, bez wypełnienia. */
.mzpf-favs .mzpf-filters__btn[aria-pressed="true"] {
	border-color: var( --mz-green, #4cbb17 );
	color: var( --mz-green, #4cbb17 ) !important;
	font-weight: 600;
}

.mzpf-favs .mzpf-filters__btn:focus-visible {
	outline: 2px solid var( --mz-green, #4cbb17 );
	outline-offset: 2px;
}

.mzpf-favs .mzpf-filters__count {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	opacity: .7;
}

.mzpf-favs .mzpf-filters__count:empty {
	display: none;
}

/* ── Lista zapisanych ───────────────────────────────────────────────────── */


/* ── Kontener zapytań ─────────────────────────────────────────────────────
   Moduł bywa osadzony w wąskim panelu nakładki (336 px) przy DESKTOPOWYM
   viewporcie, więc `@media` nigdy się tam nie odpali — mierzy okno, nie
   pojemnik. Wszystkie reguły zależne od szerokości MODUŁU muszą więc być
   `@container`.

   Kontener jest NAZWANY celowo: bezimienne zapytanie wiąże się z najbliższym
   przodkiem-kontenerem, więc gdyby host kiedyś zrobił kontenerem swój panel,
   reguły zaczęłyby pytać o jego szerokość — cicho i w złą stronę.

   `container-type: inline-size` implikuje `contain: layout style inline-size`,
   czyli robi z korzenia blok zawierający dla potomków pozycjonowanych
   absolutnie. Sprawdzone: jedyny taki element to plakietka wiersza, a wiersz
   ma własne `position: relative`, więc nic nie ucieka. `position: fixed`
   w module nie występuje.

   Progi: 420 px dla układu dwukolumnowego (panel na telefonie bywa szerszy
   niż 336 px, a i tak potrzebuje jednej kolumny), 559 px dla reguł, które
   dotąd wisiały na `@media` — te przenosimy 1:1, bo od początku opisywały
   szerokość MODUŁU, a nie urządzenie. */
.mzpf-favs {
	container: mzpf-favs / inline-size;
}

.mzpf-favs {
	margin: 1.6em 0;
	color: var( --mz-ink, #111111 );
	line-height: 1.55;
}

.mzpf-favs__heading {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.mzpf-favs__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Wiersze, nie karty — lista bywa osadzona w popupie o szerokości ~500 px. */
.mzpf-favrow {
	position: relative;
	display: flex;
	/* Wyrównanie DO ŚRODKA, tak samo jak w module „Moich premii”: logo stoi
	   w pionowej osi treści niezależnie od tego, ile linii ma tytuł. */
	align-items: center;
	gap: 12px;
	/* Zapas z prawej robi miejsce plakietce („Archiwum”) w górnym rogu
	   i przyciskowi „×” w dolnym — oba unoszą się nad wierszem. */
	padding: 10px 44px 10px 12px;
	border: 1px solid var( --mz-line, #ececee );
	border-radius: 10px;
	background: var( --mz-paper, #fff );
	min-width: 0;
}

.mzpf-favrow__logo {
	flex: none;
	width: 44px;
	height: 44px;
	/* Kafelek to SAMA GRAFIKA: bez tła, bez obramowania, bez wyściółki.
	   Zaokrąglenie siedzi na `img`, nie na kontenerze — inaczej biały
	   prostokąt tła wystawał zza logo i wyglądał jak ramka.
	   UWAGA: logo z przezroczystym tłem będzie się teraz zlewać
	   z ciemnym motywem. Znaki banków są zwykle wgrywane z własnym
	   tłem, ale to warto sprawdzić po wgraniu. */
	overflow: hidden;
	display: grid;
	place-items: center;
}

.mzpf-favrow__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 10px;
	display: block;
}

.mzpf-favrow__logo[data-empty="true"] {
	background: var( --mz-inset, #f4f4f3 );
	border-radius: 10px;
	/* Tu ramka zostaje: bez niej nie byłoby widać, że grafiki brakuje. */
	border: 1px dashed var( --mz-line-2, #dbdbdb );
}

.mzpf-favrow__body {
	flex: 1;
	min-width: 0;
}

.mzpf-favrow__title {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var( --mz-ink, #111111 );
	text-decoration: none;
}

a.mzpf-favrow__title:hover {
	color: var( --mz-green, #4cbb17 );
}

.mzpf-favrow__amount {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var( --mz-green, #4cbb17 );
}

/* Zakończona edycja: wygaszamy treść, nie zmieniamy tła — lista ma mieć
   jednolitą powierzchnię. */
.mzpf-favrow[data-ended="true"] .mzpf-favrow__title,
.mzpf-favrow[data-ended="true"] .mzpf-favrow__amount {
	color: var( --mz-faint, #9a9a9a );
}

/* Logo banku razem z resztą. Tekst gaśnie zmianą koloru na `--mz-faint`,
   ale grafika koloru nie dziedziczy — zostawała w pełnej barwie marki
   i przyciągała wzrok do wiersza, który właśnie mówi „to już nieaktualne”.

   Dwa zabiegi, bo każdy odpowiada za co innego:
     `grayscale(1)` zdejmuje barwę marki — to jest samo „wyszarzenie”,
     `opacity(.6)`  zrównuje kontrast z wygaszonym tekstem; sama skala szarości
                    zostawia znak równie ciemny jak przedtem.

   W jednej deklaracji `filter`, nie osobną własnością `opacity`: wynik jest
   ten sam, a `filter` i tak tworzy kontekst nakładania, więc drugi byłby
   nadmiarowy. Obejmuje też kafelek zastępczy przy braku grafiki
   (`[data-empty="true"]`), żeby wiersz bez logo wygaszał się tak samo.

   Bez przejścia: `data-ended` nie zmienia się w locie — wiersz z tym stanem
   powstaje od razu przy przebudowie listy. */
.mzpf-favrow[data-ended="true"] .mzpf-favrow__logo {
	filter: grayscale( 1 ) opacity( .6 );
}

/* Plakietka w prawym GÓRNYM rogu — stała pozycja niezależna od długości
   tytułu, ta sama co w „Moich premiach”. */
.mzpf-favrow__badge {
	/* W LINII Z TYTUŁEM, nie absolutnie w rogu. Pozycjonowanie absolutne
	   wymuszało stałą rezerwację `padding-right` w nagłówku — także w wierszach
	   bez plakietki — a w wąskim panelu plakietka siadała na łamiącym się
	   tytule. Jako `inline-block` z `nowrap` płynie jak kolejne słowo.

	   `vertical-align: middle` zamiast linii bazowej: plakietka ma własną
	   ramkę i padding, więc na linii bazowej wystawałaby pod tekst. */
	display: inline-block;
	vertical-align: middle;
	margin-left: 6px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --mz-muted, #6e6e6e );
	background: var( --mz-paper, #fff );
	border: 1px solid var( --mz-line-2, #dbdbdb );
	border-radius: 8px;
	padding: 2px 7px;
	white-space: nowrap;
	/* Tytuł bywa odnośnikiem — plakietka nie ma dziedziczyć podkreślenia. */
	text-decoration: none;
}

/* Usunięcie z listy — prawy DOLNY róg. Górny należy do plakietki „Archiwum”,
   dokładnie jak w module „Moich premii”. */
.mzpf-favrow__drop {
	position: absolute;
	bottom: 8px;
	right: 8px;
	appearance: none;
	cursor: pointer;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	font: inherit;
	font-size: 20px;
	line-height: 1;
	color: var( --mz-faint, #9a9a9a ) !important;
	transition: color .18s, background .18s;
}

.mzpf-favrow__drop:hover {
	color: var( --mz-red-ink, #a8442a ) !important;
	background: var( --mz-inset, #f4f4f3 );
}

.mzpf-favrow__drop:focus-visible {
	outline: 2px solid var( --mz-green, #4cbb17 );
	outline-offset: 2px;
}

/* ── „Pokaż więcej” ─────────────────────────────────────────────────────── */

.mzpf-favs .mzpf-more {
	appearance: none;
	cursor: pointer;
	width: 100%;
	padding: 10px;
	border: 1px dashed var( --mz-line-2, #dbdbdb );
	border-radius: 10px;
	background: none;
	color: var( --mz-muted, #6e6e6e );
	font: inherit;
	font-size: 13.5px;
	transition: border-color .18s, color .18s;
}

.mzpf-favs .mzpf-more:hover {
	border-color: var( --mz-green, #4cbb17 );
	color: var( --mz-green, #4cbb17 );
}

/* ── Stany ──────────────────────────────────────────────────────────────── */

/* Bez ramki. Przerywany kontur czytał się jak miejsce, w które coś nie weszło,
   a to jest zwykła pustka — ikona i tekst wystarczą, żeby ją nazwać.
   `border-radius` zostaje: przyda się, gdyby stan kiedyś dostał tło. */
.mzpf-favs .mzpf-state {
	/* `border: 0` JAWNIE, nie przez pominięcie. Samo niezadeklarowanie
	   zostawiało pole otwarte dla reguły z innego arkusza — i przerywana ramka
	   wracała z modułu premii. Deklaracja wprost zamyka temat niezależnie od
	   tego, co jeszcze jest na stronie. */
	border: 0;
	margin-top: 10px;
	padding: 24px 18px;
	text-align: center;
	border-radius: 10px;
}

.mzpf-favs .mzpf-state__title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var( --mz-ink, #111111 );
}

.mzpf-favs .mzpf-state__desc {
	display: block;
	margin-top: 5px;
	font-size: 13.5px;
	color: var( --mz-muted, #6e6e6e );
}

/* Stan gościa BEZ bursztynowego tła. Kolor ostrzegawczy mówił „coś poszło
   nie tak", a to jest zwykła pustka: nie masz jeszcze nic zapisanego. Ramka
   przerywana, jak przy pozostałych stanach pustych. */

.mzpf-favs .mzpf-state[data-mzpf-state-box="error"] {
	border-style: solid;
	border-color: var( --mz-red-line, #e2b4a6 );
}

.mzpf-favs .mzpf-state[data-mzpf-state-box="error"] .mzpf-state__title {
	color: var( --mz-red-ink, #a8442a );
}

/* ── Podsumowania nad listą ────────────────────────────────────────────────
   Ta sama forma co na „Moich premiach” — obie strony mają wyglądać jak jedna
   rodzina, a nie dwa osobne widoki. Klasy `.mzpf-sums*` pochodzą z tamtego
   modułu; tu dokładamy tylko to, czego tam nie ma, i własny selektor koloru. */

.mzpf-favs .mzpf-sums {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 1px;
	background: var( --mz-line, #ececee );
	border: 1px solid var( --mz-line, #ececee );
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 12px;
}

.mzpf-favs .mzpf-sums__item {
	background: var( --mz-paper, #fff );
	padding: 20px 12px;
	min-width: 0;
}

.mzpf-favs .mzpf-sums__label {
	display: block;
	margin: 0;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --mz-muted, #6e6e6e );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mzpf-favs .mzpf-sums__value {
	display: block;
	margin: 3px 0 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .02rem;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Kolor: element `span` (nie `p`) PLUS prefiks i atrybut — trzy zabezpieczenia,
   bo motyw maluje treść wpisu selektorem o wyższej specyficzności. */
.mzpf-favs span.mzpf-sums__value[data-mzpf-favs-sum] {
	color: var( --mz-green, #4cbb17 ) !important;
}

.mzpf-favs .mzpf-sums__desc {
	display: block;
	margin: 3px 0 0;
	font-size: 11.5px;
	line-height: 1.3;
	color: var( --mz-faint, #9a9a9a );
}

/* ── Stopka wiersza: postęp i kwoty ───────────────────────────────────────── */

.mzpf-favrow__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	flex-wrap: wrap;
}

.mzpf-favrow__stat,
.mzpf-favrow__steps {
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mzpf-favrow__stat {
	color: var( --mz-muted, #6e6e6e );
}

.mzpf-favrow__stat strong {
	color: var( --mz-green, #4cbb17 );
	font-weight: 700;
}

.mzpf-favrow__steps {
	color: var( --mz-faint, #9a9a9a );
}

.mzpf-favrow__dot {
	flex: none;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var( --mz-green, #4cbb17 );
}

.mzpf-favrow[data-ended="true"] .mzpf-favrow__stat,
.mzpf-favrow[data-ended="true"] .mzpf-favrow__stat strong,
.mzpf-favrow[data-ended="true"] .mzpf-favrow__steps {
	color: var( --mz-faint, #9a9a9a );
}

/* ── Potwierdzenie usunięcia ──────────────────────────────────────────────
   Ten sam wzorzec co „Cofnij wszystkie” na „Moich premiach”: pytanie plus
   dwie odpowiedzi, klikalne wyłącznie „Tak” i „Nie”. */

/* Pytanie siedzi w KOLUMNIE TREŚCI, pod tytułem — nie unosi się nad wierszem
   i nie jest jego dzieckiem. Dzięki temu układ „logo | tekst” zostaje
   nietknięty przy każdej szerokości. */
.mzpf-favrow__confirm {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
	font-size: 12.5px;
}

.mzpf-favrow__ask {
	color: var( --mz-red-ink, #a8442a );
	white-space: nowrap;
}

.mzpf-favrow__yes,
.mzpf-favrow__no {
	appearance: none;
	cursor: pointer;
	border: 1px solid var( --mz-line-2, #dbdbdb );
	background: none;
	padding: 3px 10px;
	border-radius: 8px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	transition: border-color .16s;
}

.mzpf-favrow__yes {
	color: var( --mz-red-ink, #a8442a ) !important;
	border-color: var( --mz-red-line, #e2b4a6 );
}

.mzpf-favrow__no {
	color: var( --mz-muted, #6e6e6e ) !important;
}

.mzpf-favrow__yes:hover,
.mzpf-favrow__no:hover {
	border-color: currentColor;
}

.mzpf-favrow__yes:focus-visible,
.mzpf-favrow__no:focus-visible {
	outline: 2px solid var( --mz-green, #4cbb17 );
	outline-offset: 2px;
}

/* ── Wygaszanie wiersza ───────────────────────────────────────────────────
   Czas musi zgadzać się z `LEAVE_MS` w skrypcie. */

.mzpf-favrow {
	transition: opacity .26s ease, height .26s ease,
		margin .26s ease, padding .26s ease, border-color .18s;
	overflow: hidden;
}

.mzpf-favrow[data-leaving] {
	opacity: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-width: 0;
	pointer-events: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.mzpf-favrow {
		transition: none;
	}
}

/* Na wąskim ekranie pytanie nie mieści się obok „×” — dostaje własny wiersz
   pod treścią, a przyciski zostają razem przy prawej krawędzi. */
/* ── Potwierdzenie na wąskim ekranie ──
   `position: static` robiło z pytania ZWYKŁE DZIECKO wiersza, a wiersz jest
   siatką flex bez zawijania — pytanie ściskało kolumnę z tytułem do kilkunastu
   pikseli i tytuł łamał się po jednym słowie w linii.

   Wiersz musi więc zawijać, a pytanie zajmować całą szerokość w nowej linii.
   To ten sam zabieg co w stopce „Moich premii”. */
@container mzpf-favs ( max-width: 559px ) {
	.mzpf-favrow__ask {
		flex: 1 1 100%;
		white-space: normal;
	}

	.mzpf-favrow__yes,
	.mzpf-favrow__no {
		min-width: 64px;
		padding: 7px 12px;
		text-align: center;
	}
}

/* ── Zachęta do założenia konta ───────────────────────────────────────────
   Blok z przyciskiem „Kontynuuj z Google". Sam przycisk stylowany jest przez
   Monazo Auth (`.monazo-auth .monazo-auth__google`) — tutaj wyłącznie oprawa,
   żeby nie było dwóch źródeł prawdy dla jego wyglądu.

   Kontener przycisku przychodzi z Auth jako `.monazo-auth--bare`, czyli bez
   `max-width: 420px` i bez wyśrodkowania — dopasowuje się do naszej szerokości.

   Ukryty `hidden` w HTML, odsłaniany po potwierdzeniu, że to gość. */

.mzpf-cta[hidden] {
	display: none;
}

.mzpf-cta {
	position: relative;
	display: block;
	margin: 16px 0 0;
	padding: 16px;
	border: 1px solid var( --mz-line, #ececee );
	border-radius: 12px;
	/*
	 * #fff w trybie jasnym, #1c1c1c w ciemnym.
	 *
	 * PARY TOKENÓW NA TO NIE MA: `--mz-paper` to (#fff, #232323), `--mz-inset`
	 * to (#f4f4f3, #1c1c1c), a potrzebujemy jasnej strony pierwszego i ciemnej
	 * drugiego. Wcześniejsza próba na samym `--mz-paper` dała w ciemnym #232323
	 * zamiast #1c1c1c — czyli o jeden odcień za jasno.
	 *
	 * Stąd JEDYNY w tym arkuszu wyjątek od zasady „zero reguł [data-scheme]”.
	 * Zasada trzymała się dopóty, dopóki tokeny pokrywały każdą potrzebę; tutaj
	 * nie pokrywają i udawanie inaczej znaczyłoby złą barwę.
	 *
	 * Siatka bezpieczeństwa na `prefers-color-scheme` jest przepisana wprost
	 * z `tokens.css` SOT-a i dotyczy chwili PRZED wykonaniem skryptu motywu:
	 * bez niej użytkownik z ciemnym systemem zobaczyłby biały błysk.
	 */
	background: #fff;
}

html[data-scheme="dark"] .mzpf-cta {
	background: #1c1c1c;
}

@media ( prefers-color-scheme: dark ) {
	html:not( [data-scheme="light"] ) .mzpf-cta {
		background: #1c1c1c;
	}
}

.mzpf-cta__eyebrow {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --mz-faint, #9a9a9a );
}

.mzpf-cta__lead {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var( --mz-muted, #6a6a70 );
}

.mzpf-cta__title {
	display: block;
	margin-top: 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var( --mz-ink, #111111 );
}

.mzpf-cta__slot {
	margin-top: 10px;
}

.mzpf-cta__note {
	display: block;
	margin-top: 10px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var( --mz-faint, #9a9a9a );
}

/* Blok przy krokach jest rozwijany animacją wysokości — bez tego zawartość
   wystawałaby poza malejącą ramkę zamiast się z nią zwijać. */
.mzpf-cta--steps {
	overflow: hidden;
}

/* Microcopy prawna przychodzi z Auth wyśrodkowana — tam siedzi pod formularzem
   logowania, gdzie środek jest naturalny. W naszym bloku stoi w kolumnie tekstu
   wyrównanej do lewej i wyśrodkowana łamała rytm.

   Zawężone do WNĘTRZA naszego bloku (`.mzpf-cta`), żeby nie ruszyć przycisku
   nigdzie indziej w serwisie — to jest element Auth i jego wygląd należy do
   tamtej wtyczki wszędzie poza tym jednym kontenerem. */
.mzpf-cta .monazo-auth__legal {
	text-align: left;
}


/* Ikona nad komunikatem pustego stanu — glif `odrzucenie` z systemu Monazo.
   Barwa z `currentColor`, więc tryb ciemny działa bez osobnej reguły. */
.mzpf-favs .mzpf-state__icon {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto 10px;
	color: var( --mz-faint, #9a9a9a );
}

/* Odstęp od tego, co nad zachętą — przy pustym filtrze zlewała się
   z komunikatem „Nic w tym filtrze" w jeden blok bez granicy. */
.mzpf-favs .mzpf-cta {
	margin: 20px 0 0;
}

/* ── Stopka wiersza w wąskim pojemniku ────────────────────────────────────
   Skracania opisu tu NIE MA — i to jest decyzja, nie przeoczenie.

   Do 0.15.1 chowaliśmy poniżej 420 px czasownik „Odebrano” i jednostkę
   „kroków”, żeby kwota z licznikiem zmieściły się w jednej linii. Stopka tego
   wiersza ma jednak `flex-wrap` w bazie, a przycisk usuwania jest pozycjonowany
   absolutnie — więc tekst i tak łamie się sam, bez odbierania słów.

   To samo zdanie stoi w „Moich premiach”, gdzie skracanie też wypadło. Dwie
   listy renderujące ten sam komunikat inaczej byłyby gorsze niż jedna linia
   więcej. */

/* ── Szkielet na czas wczytywania ─────────────────────────────────────────
   Wiersz-widmo REZERWUJE WYSOKOŚĆ, zanim dojdą dane. Bez niego nakładka
   otwierała się niska, pokazywała „Wczytuję…”, a potem wyskakiwała do pełnego
   rozmiaru — a skok jest gorszy od samego czekania, bo scena musi wtedy
   przeliczyć wysokość i jej przejście `height .42s` startuje w środku
   patrzenia.

   Wymiary dziedziczy z prawdziwego wiersza (`.mzpf-favrow`), więc nie ma tu
   ani jednej wartości, która mogłaby się z nim rozjechać przy zmianie
   paddingu. Zmieniamy wyłącznie to, czego widmo nie ma: treść. */

.mzpf-favs .mzpf-favrow--ghost {
	/* Bez przejścia wysokości — widmo znika podmianą, nie animacją.
	   Z animacją zwijania nakładałaby się ona na wjazd prawdziwych wierszy. */
	transition: none;
	pointer-events: none;
}

.mzpf-favs .mzpf-ghost__box,
.mzpf-favs .mzpf-ghost__line {
	display: block;
	background: var( --mz-line, #ececee );
	border-radius: 6px;
}

.mzpf-favs .mzpf-ghost__box {
	border-radius: 10px;
}

/* Wysokości odpowiadają wierszom prawdziwej treści: tytuł (dwie linie),
   pasek postępu, stopka z kwotą. */
.mzpf-favs .mzpf-ghost__line--title {
	height: 15px;
	margin-bottom: 8px;
	width: 82%;
}

.mzpf-favs .mzpf-ghost__line--bar {
	height: 4px;
	margin-bottom: 10px;
	width: 100%;
	border-radius: 99px;
}

.mzpf-favs .mzpf-ghost__line--foot {
	height: 12px;
	width: 58%;
}

/* Delikatne tętno — sygnał „to się wczytuje”, a nie „to jest puste”.
   Wyłączone przy ograniczeniu ruchu: to dekoracja, nie informacja. */
@media ( prefers-reduced-motion: no-preference ) {
	.mzpf-favs .mzpf-ghost__box,
	.mzpf-favs .mzpf-ghost__line {
		animation: mzpf-ghost-pulse 1.4s ease-in-out infinite;
	}
}

@keyframes mzpf-ghost-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .55; }
}

/* ── Wjazd potwierdzenia ──────────────────────────────────────────────────
   Pytanie „Cofnąć wszystkie?" i przyciski Tak/Nie wskakiwały dotąd w jednej
   klatce — stąd wrażenie szarpnięcia.

   Animujemy WYŁĄCZNIE przezroczystość i drobne przesunięcie, NIGDY wysokość.
   Wysokość wiersza i tak zmienia się w tym momencie, a jej animowanie
   powodowałoby w nakładce dokładnie ten sam konflikt co przy zwijaniu wiersza:
   scena przelicza rozmiar przy każdej klatce, więc jej własne przejście
   `height .42s` startuje od nowa i nigdy nie dobiega końca. Tak zmiana
   wysokości jest jedna, a treść wjeżdża w nią miękko. */

@keyframes mzpf-confirm-in {
	from { opacity: 0; transform: translateY( -3px ); }
	to   { opacity: 1; transform: none; }
}

@media ( prefers-reduced-motion: no-preference ) {
	.mzpf-favrow__confirm {
		animation: mzpf-confirm-in .18s ease-out both;
	}

	/* Przyciski wchodzą tuż po pytaniu — najpierw wiadomo, o co pytamy,
	   potem czym odpowiedzieć. Opóźnienie jest na granicy dostrzegalności
	   i ma jedynie uporządkować kolejność czytania. */
	.mzpf-favrow__yes,
	.mzpf-favrow__no {
		animation: mzpf-confirm-in .18s ease-out .04s both;
	}
}

/* ── Stopka wiersza w wąskim pojemniku ────────────────────────────────────
   Kwota bierze całą pierwszą linię, licznik kroków schodzi do drugiej,
   a KROPKA GAŚNIE.

   Bez tego stopka zawijała się „sama”: przy ~330 px kwota zajmuje ~200 px,
   kropka z odstępami ~20 px, licznik ~75 px — więc licznik spadał niżej,
   a kropka zostawała na końcu pierwszej linii jako separator, który nic już
   nie separuje. Wyglądało to na usterkę i nią było.

   Próg 420 px, a nie 559 jak w „Moich premiach”: tam w stopce stoi jeszcze
   przycisk akcji, tutaj nie ma go wcale, więc tekst mieści się dłużej.
   Najszersze realne brzmienie („Odebrano 14 400 zł z 14 400 zł · 12/12
   kroków”) to ~290 px plus ~112 px na logo, odstępy i wyściółkę. Powyżej
   progu mieści się zawsze, poniżej nigdy — a stan pośredni to właśnie ten,
   który produkował wiszącą kropkę. */

@container mzpf-favs ( max-width: 420px ) {
	.mzpf-favrow__stat {
		flex: 1 1 100%;
	}

	/* Separator ma sens WYŁĄCZNIE wtedy, gdy obie liczby stoją obok siebie. */
	.mzpf-favrow__dot {
		display: none;
	}
}