/**
 * Progres — style komunikatów.
 *
 * ŚWIADOMIE MINIMALNE. Monazo SOT ma już komplet stylów dla kroków, stanu
 * „zrobione” i podpisu pod listą — łącznie z regułą `:empty`, która chowa pusty
 * podpis. Duplikowanie tego oznaczałoby dwa źródła prawdy dla wyglądu i pewny
 * rozjazd po pierwszej zmianie w SOT.
 *
 * Zostają dwie rzeczy, których SOT znać nie może, bo nie zna pojęcia konta:
 * odróżnienie komunikatu o BŁĘDZIE od informacji oraz zachęta do zalogowania.
 *
 * KOLORY PRZEZ TOKENY `--mz-*` Z SOT (plik `assets/tokens.css`, od 0.22.0).
 * Każdy z fallbackiem, bo addon musi wyglądać poprawnie także wtedy, gdy SOT
 * jest starszy albo nieaktywny — wtedy komunikat pokazuje się w barwach
 * trybu jasnego zamiast dziedziczyć nieistniejącą zmienną i zniknąć.
 * Fallbacki są zapisane WPROST, nie przez `var(...)`, bo wartość zapasowa
 * nie może zależeć od tego, czego właśnie brakuje.
 */

/* Zapis się nie powiódł — użytkownik musi to zauważyć. */
.mzc-steps[data-mzpf-state="error"] .mzc-progress__hint {
	color: var( --mz-red-ink, #a8442a );
	font-weight: 600;
}

.mzc-steps[data-mzpf-state="error"] .mzc-progress__track {
	box-shadow: 0 0 0 1px var( --mz-red-line, #e2b4a6 );
}

/* Odhaczanie wymaga konta. Ton informacyjny, nie alarmowy — to nie błąd
   użytkownika, tylko warunek działania funkcji. Tło i obwódka idą za tokenami
   bursztynowymi, więc w trybie ciemnym komunikat ściemnia się razem z kartą
   zamiast świecić żółtą plamą. */
.mzc-steps[data-mzpf-state="guest"] .mzc-progress__hint {
	color: var( --mz-ink-soft, #35363b );
	background: var( --mz-amber-wash, #fff8e1 );
	border: 1px solid var( --mz-amber-line, #f0e0a8 );
	border-radius: 8px;
	padding: 8px 12px;
	margin-top: 10px;
}

@media ( prefers-reduced-motion: reduce ) {
	.mzc-steps[data-mzpf-state="error"] .mzc-progress__track {
		box-shadow: none;
	}
}

/* ── 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;
}