/* ==========================================================================
   KWESTIONARIUSZ — komponent darmowego pytania
   --------------------------------------------------------------------------
   Prefiks `kzw-`. Cztery konfiguracje, jeden arkusz: dwa tła × dwa tryby.

   NAJWAŻNIEJSZA RZECZ W TYM PLIKU: pod blokiem tokenów NIE MA ANI JEDNEGO
   LITERALNEGO KOLORU. Wszystkie reguły niżej mówią wyłącznie rolami
   (`--kzw-ink`, `--kzw-rule`, `--kzw-accent`), a wariant granatowy przepina
   same role. To jedyny powód, dla którego komponent przeżywa oba tła bez
   drugiego kompletu reguł — i jedyna rzecz, którą trzeba tu utrzymać.

   Wartości są wpisane WPROST, nie przez `var(--zn-*)`. Tamte tokeny żyją
   w `homepage.css`, którego większość stron z komponentem nie ładuje —
   to ta sama pułapka, przez którą `pages.css` renderował kiedyś ten sam
   eyebrow w dwóch kolorach. Wyjątkiem są role CTA ze wspólnego `main.css`,
   z wartościami zapasowymi dla samodzielnego osadzenia komponentu.

   DLACZEGO POLA NIE SĄ PUDEŁKAMI. Osiem jednakowych prostokątów jeden pod
   drugim to jest dokładnie to, co robi z kwestionariusza wniosek urzędowy.
   Pola jednoliniowe stoją więc na WŁOSKOWATEJ LINII, jak na papierze do pisania,
   a ramkę dostają tylko dwa pola długiego tekstu — bo akapit potrzebuje
   wyznaczonego miejsca, a jedna linia nie. To nie jest niekonsekwencja:
   to dwa różne przyrzeczenia wobec dwóch różnych ilości tekstu.

   RUCH: trzy momenty i ani jednego więcej — odbicie stempla zodiaku,
   wejście w trybie odsłanianym, pogrubienie linii pod polem przy fokusie.
   Wszystko inne stoi.
   ========================================================================== */

.kzw {
	/* --- PAPIER (domyślny) ------------------------------------------- */
	--kzw-ground:     #fbf6ec;   /* karta na pergaminie */
	--kzw-ink:        #2a1f14;
	--kzw-ink-soft:   #826845;
	--kzw-accent:     #7a4220;   /* miedź-tekst: 6,8:1 na tym podłożu.
	                                Kanoniczna miedź #a85e2c daje 4,2:1
	                                i jako tekst nie zdaje progu. */
	--kzw-rule:       rgba(168, 94, 44, .28);
	--kzw-rule-live:  #a85e2c;
	--kzw-field:      rgba(255, 253, 248, .6);
	--kzw-blad:       #9d2f24;   /* ceglany, nie czerwony — zostaje w rodzinie */
	--kzw-focus:      #7a4220;

	/* Jasnożółte CTA wspólne dla obu teł i pozostałych stron serwisu. */
	--kzw-cta:        var(--zoriana-cta, #e8c978);
	--kzw-cta-ink:    var(--zoriana-cta-ink, #1a1406);
	--kzw-cta-hover:  var(--zoriana-cta-hover, #fff1c8);

	--kzw-miara:      36rem;
	--kzw-odstep:     clamp(1.4rem, 4vw, 2rem);

	max-width: var(--kzw-miara);
	margin-inline: auto;
	color: var(--kzw-ink);
	font-family: 'Poppins', system-ui, sans-serif;
}

.kzw[data-wariant="navy"] {
	--kzw-ground:     #1a1a32;   /* aksamit — czyta się jak płyta na granacie
	                                #14142a i jak granat na czymkolwiek innym */
	--kzw-ink:        rgba(245, 237, 224, .92);
	--kzw-ink-soft:   rgba(245, 237, 224, .62);
	--kzw-accent:     #c9a84c;
	--kzw-rule:       rgba(201, 168, 76, .28);
	--kzw-rule-live:  #c9a84c;
	--kzw-field:      rgba(0, 0, 0, .22);
	--kzw-blad:       #e8836f;
	--kzw-focus:      #c9a84c;

	/* Natywne widżety — kalendarz daty i lista selecta — mają się złożyć
	   ciemno. Bez tego przeglądarka rysuje białą kartkę kalendarza
	   i czarny tekst daty na granacie. */
	color-scheme: dark;
}

/* Atrybut `hidden` musi wygrywać z `display` bloku. Bez tej reguły element
   zostaje widoczny i — co gorsza — fokusowalny, czyli klawiatura wchodzi
   w niewidzialny formularz. Zmierzone w tym motywie przy sekcji domykającej.

   `.kzw__form` BYŁO TU POMINIĘTE i to jest dokładnie ten błąd, przed którym
   ostrzega akapit wyżej: `display: grid` na formularzu bił domyślne ukrycie
   przeglądarki, więc po udanej wysyłce `form.hidden = true` nie robiło NIC —
   potwierdzenie „Mam twoje pytanie" lądowało pod nadal widocznym, nadal
   wypełnionym kwestionariuszem. KAŻDY blok, który skrypt chowa, musi stać
   na tej liście. */
.kzw[hidden],
.kzw__form[hidden],
.kzw__zodiak[hidden],
.kzw__sukces[hidden],
.kzw__blad[hidden],
.kzw__hint--pusty[hidden] {
	display: none;
}

/* ==========================================================================
   PŁYTA
   ========================================================================== */

.kzw__plyta {
	position: relative;
	background: var(--kzw-ground);
	border: 1px solid var(--kzw-rule);
	padding: var(--kzw-odstep);
	display: grid;
	gap: var(--space-md);
}

/* Włoskowata linia u góry płyty. W trybie odsłanianym dociąga się od lewej
   do prawej i to ona jest pierwszą rzeczą, która wchodzi na scenę. */
.kzw__plyta::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 2px;
	background: var(--kzw-rule-live);
	transform-origin: left center;
}

/* ==========================================================================
   GŁOWA
   ========================================================================== */

.kzw__glowa {
	display: grid;
	gap: var(--space-xs);
}

.kzw__eyebrow {
	margin: 0;
	font-size: var(--text-small);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kzw-accent);
}

/* Styl nagłówka, ale znacznik to akapit — komponent stoi na stronach,
   które mają już własnego właściciela frazy. Waga 500, nie 700:
   Poppins w dużym stopniu i grubości 700 wygląda tanio. */
.kzw__naglowek {
	margin: 0;
	font-size: var(--text-h2);
	font-weight: 500;
	line-height: 1.18;
	color: var(--kzw-ink);
}

/* SLOWO AKCENTOWANE W NAGLOWKU (T-172, poz. 3).
   Wersaliki robi `text-transform`, nie plik tresci — regula R1. `--kzw-accent`
   to ten sam token, ktorym pisza etykiety i fokus, wiec wyroznienie zostaje
   w rodzinie kolorow komponentu takze w wariancie granatowym, gdzie akcent
   przepina sie na zloto. Odstep literowy dolozony, bo wersaliki bez niego
   sklejaja sie przy tej wadze kroju. */
.kzw__akcent {
	color: var(--kzw-accent);
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: .06em;
}

.kzw__naglowek:focus-visible {
	outline: 2px solid var(--kzw-focus);
	outline-offset: 4px;
}

.kzw__lede {
	margin: 0;
	font-size: var(--text-body);
	color: var(--kzw-ink-soft);
	max-width: 42ch;
}

.kzw__opcjonalne-info {
	margin: 0;
	font-size: var(--text-small);
	font-style: italic;
	color: var(--kzw-ink-soft);
}

/* ==========================================================================
   FORMULARZ
   ========================================================================== */

.kzw__form {
	display: grid;
	gap: var(--space-lg);
	margin: 0;
}

/* Fieldset bez ramki i bez marginesu — istnieje dla semantyki i dla czytnika
   ekranu, nie po to, żeby dorysować kolejne pudełko. */
.kzw__czesc {
	border: 0;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-md);
}

/* NAZWA CZĘŚCI CZYTA SIĘ JAK NAGŁÓWEK, NIE JAK WYPEŁNIONE POLE (2026-09-19,
   polecenie właścicielki: „wygląda jak wypełniony input — zrób standardowy
   nagłówek, możesz go wycentrować").

   Do dziś legenda była 14-punktowymi wersalikami w `--kzw-accent` z kreską
   `::after`: 1 px, `--kzw-rule`, na całą szerokość fieldsetu. Dokładnie taka
   sama linia — ten sam token, ta sama grubość, ta sama szerokość (487,6 px
   na płycie) i ten sam lewy brzeg — podkreśla w tym komponencie KAŻDE pole
   jednoliniowe (`.kzw__input`, `.kzw__select` biorą `border-bottom: 1px solid
   var(--kzw-rule)`; doktryna z nagłówka pliku: „pola stoją na WŁOSKOWATEJ
   LINII, jak na papierze do pisania"). Nazwa części siedziała więc na linii
   pola, 8,8 px nad nią, czyli tam, gdzie w polu obok siedzi wpisany tekst.
   To nie było wrażenie, tylko ta sama geometria. Kreska schodzi, zostaje
   nagłówek sekcji. Po jej zdjęciu części rozdziela już tylko odstęp
   `.kzw__form { gap: var(--space-lg) }` — zmierzone 48 px przy 1440 px.

   `float: left` + `width: 100%` NIE SĄ OZDOBĄ i nie wolno ich zdjąć przy
   okazji porządków. `float` zdejmuje z `legend` jej specjalne pudełko, więc
   legenda staje się zwykłym elementem siatki `.kzw__czesc` i bierze jej `gap`.
   Zmierzone na /tarot-tak-czy-nie przy 1440 px: bez floatu odstęp pod legendą
   spada 32 px -> 8 px, pudełko kurczy się 487,6 -> 348,4 px (czyli do samego
   tekstu, więc `text-align` przestaje cokolwiek znaczyć), a formularz jest
   niższy o 48 px. Ten sam zabieg i ten sam powód stoją przy
   `.kzw__data-legenda` niżej w tym pliku.

   `font-weight` jest wymagany, bo dziedziczona waga NIE jest jedna: 300 na
   /tarot-tak-czy-nie i 400 na /kontakt — bez deklaracji ten sam komponent
   miałby na dwóch stronach dwie grubości. `padding: 0` zostaje jako zbroja:
   arkusz przeglądarki daje `legend` własny `padding-inline`, a zeruje go dziś
   wyłącznie `*` z `main.css`, czyli reguła o specyficzności zero.
   Reszty nie deklarujemy — zmierzone sondą (goły `legend` w tym fieldsecie):
   `letter-spacing`, `text-transform`, `font-family`, tło, obramowanie i cień
   wychodzą na zero bez jednego słowa. */
.kzw__legenda {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 var(--space-xs);
	font-size: var(--text-h3);
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	color: var(--kzw-ink);
}

.kzw__pole {
	display: grid;
	gap: .35rem;
}

.kzw__label {
	font-size: var(--text-small);
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--kzw-ink);
}

/* Opcjonalność mówimy SŁOWEM, nie gwiazdką. Gwiazdka przy polach wymaganych
   zmusza do szukania legendy; słowo „opcjonalne" przy trzech polach mówi
   wszystko od razu i nie straszy. */
.kzw__opc {
	font-weight: 400;
	font-style: italic;
	letter-spacing: 0;
	color: var(--kzw-ink-soft);
}

.kzw__hint {
	margin: 0;
	font-size: var(--text-small);
	line-height: 1.5;
	color: var(--kzw-ink-soft);
}

/* --------------------------------------------------------------------------
   POLA JEDNOLINIOWE — linia, nie pudełko
   -------------------------------------------------------------------------- */

.kzw__input,
.kzw__select,
.kzw__pisanie {
	width: 100%;
	font-family: inherit;
	/* Minimum 1rem = 16 px. Poniżej tej wartości iOS przy fokusie
	   przybliża całą stronę, a `--text-body` schodzi na wąskim ekranie
	   do 15 px. `max()` trzyma skalę motywu tam, gdzie jest większa. */
	font-size: max(1rem, var(--text-body));
	color: var(--kzw-ink);
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: .65rem 0;
	min-height: 3rem;
	border-bottom: 1px solid var(--kzw-rule);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.kzw__input:focus,
.kzw__select:focus,
.kzw__pisanie:focus {
	outline: none;
	border-bottom-color: var(--kzw-rule-live);
	box-shadow: 0 1px 0 0 var(--kzw-rule-live);
}

.kzw__input:focus-visible,
.kzw__select:focus-visible,
.kzw__pisanie:focus-visible {
	outline: 2px solid var(--kzw-focus);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   POLA DŁUGIEGO TEKSTU — tu ramka jest na miejscu
   -------------------------------------------------------------------------- */

.kzw__pisanie {
	border: 1px solid var(--kzw-rule);
	background: var(--kzw-field);
	padding: .8rem .9rem;
	resize: vertical;
	line-height: 1.6;
}

.kzw__pisanie:focus {
	border-color: var(--kzw-rule-live);
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   DATY — reguly natywnego pola ZNIESIONE (T-172)
   --------------------------------------------------------------------------
   Staly tu trzy reguly ubierajace `input[type="date"]`: ogranicznik szerokosci
   i dwa filtry, ktore przemalowywaly natywna ikone kalendarza (czarna) na
   miedz na papierze i na jasna na granacie. Pole daty nie jest juz natywne --
   sa trzy selecty (dzien, miesiac, rok), a ich wyglad niesie
   `.kzw__data-trojka` na koncu tego arkusza.

   Regul nie zostawiamy: selektor bez wezla to martwy kod, a te konkretne
   filtry mialy w sobie pomiar (`hue-rotate` dobrany do dwoch podlozy),
   wiec nastepny czytajacy wzialby je za komponent do uzycia. Jesli natywna
   data kiedys wroci, wroci razem z nowym pomiarem. */

/* ==========================================================================
   STEMPEL ZODIAKU — element sygnaturowy
   --------------------------------------------------------------------------
   Znak nie „dopisuje się" do formularza. ODBIJA SIĘ na nim jak pieczęć:
   ostry kwadrat obrysowany włoskowatą miedzią, w środku glif w dużym stopniu.
   Nazwa znaku obok JEST selectem, ale nie wygląda jak select — czyta się jak
   słowo, które można poprawić. Bo taki jest kontrakt: na granicy znaków
   (19–23 dzień miesiąca) znak zależy od godziny urodzenia i mówi to wprost
   nasza własna strona /znaki-zodiaku-daty/. Automat podpowiada, ona decyduje.
   ========================================================================== */

.kzw__zodiak {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-sm);
	align-items: start;
}

.kzw__stempel {
	display: grid;
	place-items: center;
	width: 3.75rem;
	height: 3.75rem;
	border: 1px solid var(--kzw-rule-live);
	color: var(--kzw-accent);
	font-size: 2rem;
	line-height: 1;
	/* Znak zodiaku ma byc SYMBOLEM, nie emoji. U+2648..U+2653 maja domyslna
	   prezentacje tekstowa tylko na czesci systemow — reszta rysuje kolorowy
	   kafelek z zestawu emoji, ktory rozbija cala palete. Skrypt dokleja
	   do glifu U+FE0E; ta deklaracja jest drugim, nowszym zabezpieczeniem. */
	font-variant-emoji: text;
	/* Odbicie: jedno zdarzenie, 180 ms, bez powtórzeń. */
	animation: kzw-stempel .18s ease-out both;
}

@keyframes kzw-stempel {
	from { opacity: 0; transform: scale(.94); }
	to   { opacity: 1; transform: scale(1); }
}

/* Select udający tekst: bez ramki, bez tła, z kropkowanym podkreśleniem
   i własnym szewronem. `appearance:none` zdejmuje natywną obudowę,
   `padding-right` robi miejsce na szewron z tła. */
.kzw__select {
	appearance: none;
	-webkit-appearance: none;
	min-height: 2.5rem;
	padding: .35rem 1.4rem .35rem 0;
	color: var(--kzw-accent);
	font-weight: 600;
	border-bottom: 1px dotted var(--kzw-rule-live);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
	                  linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right .55rem center, right .3rem center;
	background-size: .3rem .3rem, .3rem .3rem;
	background-repeat: no-repeat;
}

/* Lista rozwijana jest rysowana przez system, nie przez nas — na granacie
   ratuje ją `color-scheme: dark` wyżej. Tu wymuszamy czytelność samych
   opcji tam, gdzie przeglądarka dziedziczy kolor z pola. */
.kzw__select option {
	color: #2a1f14;
	background: #fbf6ec;
}

.kzw[data-wariant="navy"] .kzw__select option {
	color: #f5ede0;
	background: #1a1a32;
}

/* ==========================================================================
   ZGODA
   --------------------------------------------------------------------------
   Nie „strefa prawna" na dole, tylko zdanie ze znakiem obok, tuż nad
   wezwaniem do działania. Kwadrat jest mały, tekst normalnej wielkości —
   dzięki temu całość czyta się jak zdanie, nie jak wiersz regulaminu.
   ========================================================================== */

.kzw__zgoda {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .7rem;
	align-items: start;
	padding-top: var(--space-md);
	border-top: 1px solid var(--kzw-rule);
}

.kzw__ptaszek {
	appearance: none;
	-webkit-appearance: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: .15rem 0 0;
	border: 1px solid var(--kzw-rule-live);
	background: transparent;
	cursor: pointer;
	display: grid;
	place-items: center;
	flex: none;
}

.kzw__ptaszek::after {
	content: "";
	width: .58rem;
	height: .3rem;
	border-left: 2px solid var(--kzw-ground);
	border-bottom: 2px solid var(--kzw-ground);
	transform: rotate(-45deg) translate(.04rem, -.06rem);
	opacity: 0;
}

.kzw__ptaszek:checked {
	background: var(--kzw-rule-live);
}

.kzw__ptaszek:checked::after {
	opacity: 1;
}

.kzw__ptaszek:focus-visible {
	outline: 2px solid var(--kzw-focus);
	outline-offset: 3px;
}

.kzw__zgoda-tekst {
	font-size: var(--text-body);
	line-height: 1.5;
	color: var(--kzw-ink);
	cursor: pointer;
}

.kzw__blad--zgoda {
	grid-column: 1 / -1;
}

.kzw__link {
	color: var(--kzw-accent);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.kzw__link:hover,
.kzw__link:focus {
	color: var(--kzw-rule-live);
}

.kzw__link:focus-visible {
	outline: 2px solid var(--kzw-focus);
	outline-offset: 2px;
}

/* ==========================================================================
   STOPKA FORMULARZA
   ========================================================================== */

.kzw__zakres {
	margin: 0;
	font-size: var(--text-small);
	line-height: 1.55;
	color: var(--kzw-ink-soft);
}

.kzw__cta {
	width: 100%;
	min-height: 3.25rem;
	padding: .95rem 2rem;
	border: 0;
	border-radius: 0;
	background: var(--kzw-cta);
	color: var(--kzw-cta-ink);
	font-family: inherit;
	font-size: max(1rem, var(--text-body));
	font-weight: 600;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background-color .18s ease;
}

.kzw__cta:hover:not(:disabled) {
	background: var(--kzw-cta-hover);
}

.kzw__cta:focus-visible {
	outline: 2px solid var(--kzw-focus);
	outline-offset: 3px;
}

/* Stan wyjściowy w HTML-u. Odblokowuje go dopiero skrypt — bez JavaScriptu
   kwestionariusz nie ma jak wysłać zgłoszenia i przycisk nie ma prawa
   obiecywać, że wyśle. */
.kzw__cta:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.kzw__reassurance {
	margin: 0;
	font-size: var(--text-small);
	line-height: 1.55;
	text-align: center;
	color: var(--kzw-ink-soft);
}

/* Zdanie o danych bez checkboxa (klucz `dane`, dziś tylko typ `kontakt`).
   Stoi pod statusem, poza formularzem; po wysyłce znika razem z nim. */
.kzw__dane {
	margin: 0;
	padding-top: var(--space-md);
	border-top: 1px solid var(--kzw-rule);
	font-size: var(--text-small);
	line-height: 1.55;
	color: var(--kzw-ink-soft);
}

.kzw__form[hidden] ~ .kzw__dane {
	display: none;
}

/* ==========================================================================
   BŁĘDY, STATUS, EKRANY ZASTĘPCZE
   ========================================================================== */

.kzw__blad {
	margin: 0;
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--kzw-blad);
}

.kzw__input[aria-invalid="true"],
.kzw__select[aria-invalid="true"] {
	border-bottom-color: var(--kzw-blad);
	box-shadow: 0 1px 0 0 var(--kzw-blad);
}

.kzw__pisanie[aria-invalid="true"] {
	border-color: var(--kzw-blad);
	box-shadow: none;
}

.kzw__ptaszek[aria-invalid="true"] {
	border-color: var(--kzw-blad);
}

.kzw__status {
	margin: 0;
	font-size: var(--text-body);
	line-height: 1.55;
	color: var(--kzw-ink);
}

/* Pusty region ogłoszeń nie ma zajmować miejsca — ale MUSI zostać w DOM,
   bo `aria-live` na węźle podmienianym w całości nie ogłasza niczego. */
.kzw__status:empty {
	display: none;
}

.kzw__status[data-stan="blad"] {
	padding: .8rem .9rem;
	border-left: 3px solid var(--kzw-blad);
	color: var(--kzw-blad);
}

.kzw__status[data-stan="wysylanie"] {
	color: var(--kzw-ink-soft);
}

.kzw__sukces {
	display: grid;
	gap: var(--space-xs);
	padding: var(--space-md) 0;
	border-top: 1px solid var(--kzw-rule-live);
}

.kzw__sukces-tytul {
	margin: 0;
	font-size: var(--text-h3);
	font-weight: 500;
	color: var(--kzw-accent);
}

.kzw__sukces-tresc {
	margin: 0;
	font-size: var(--text-body);
	line-height: 1.6;
	color: var(--kzw-ink);
}

.kzw__awaria {
	margin: 0;
	padding: .9rem 1.1rem;
	border: 1px solid var(--kzw-rule);
	font-size: var(--text-small);
	line-height: 1.55;
	color: var(--kzw-ink-soft);
}

.kzw__czas {
	display: grid;
	gap: .3rem;
	padding-top: var(--space-md);
	border-top: 1px solid var(--kzw-rule);
}

.kzw__czas-label {
	margin: 0;
	font-size: var(--text-small);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kzw-accent);
}

.kzw__czas-tresc {
	margin: 0;
	font-size: var(--text-small);
	line-height: 1.6;
	color: var(--kzw-ink-soft);
}

/* ==========================================================================
   PUŁAPKA NA BOTY
   --------------------------------------------------------------------------
   Nie `display:none` — część botów pomija pola ukryte tak oczywiście.
   Wyprowadzenie poza ekran zostawia pole w drzewie, ale człowiek go nie widzi;
   `aria-hidden` i `tabindex="-1"` w markupie trzymają je poza czytnikiem
   i poza tabulacją.
   ========================================================================== */

.kzw__pulapka {
	position: absolute !important;
	left: -99999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   TRYB ODSŁANIANY
   --------------------------------------------------------------------------
   Komponent wchodzi jako CIĄG DALSZY STRONY, nie jako warstwa, która nadleciała.
   Zero nakładki, zero przyciemnienia tła, zero skalowania od środka, zero
   przenoszenia fokusu i zero automatycznego przewijania — wszystko to razem
   czyta się jak popup, a popup po werdykcie karty przerywa czytanie.

   Pierwsza pojawia się górna linia płyty: dociąga się od lewej do prawej.
   Dopiero po niej wchodzi treść.
   ========================================================================== */

/* WEJŚCIE JEST ANIMACJĄ, NIE PRZEJŚCIEM — i to jest decyzja o poprawności,
   nie o wygodzie zapisu. Przejście wymaga, żeby przeglądarka zobaczyła stan
   początkowy w osobnej klatce; gdy klatka nie przychodzi (karta w tle, brak
   malowania, zduszony `requestAnimationFrame`), element zostaje na zawsze
   przezroczysty. Animacja rusza sama, a wyłączona po prostu nie rysuje ruchu
   i zostawia element WIDOCZNY. Stan spoczynkowy płyty jest pełną widocznością:
   niewidoczność trwa dokładnie tyle, ile trwa animacja, i ani chwili dłużej. */

@keyframes kzw-wejscie {
	from { opacity: 0; transform: translateY(.5rem); }
	to   { opacity: 1; transform: none; }
}

@keyframes kzw-linia {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.kzw[data-tryb="odslaniany"].is-odslonieta .kzw__plyta {
	animation: kzw-wejscie .28s ease .12s both;
}

.kzw[data-tryb="odslaniany"].is-odslonieta .kzw__plyta::before {
	animation: kzw-linia .34s ease both;
}

/* Powrót do strony ze stanem już odsłoniętym: bez odtwarzania wejścia.
   Ta sama decyzja co przy sekcji domykającej narzędzia Tak/Nie. */
.kzw[data-tryb="odslaniany"].is-natychmiast .kzw__plyta,
.kzw[data-tryb="odslaniany"].is-natychmiast .kzw__plyta::before {
	animation: none;
}

/* ==========================================================================
   OGRANICZENIE RUCHU I TRYB WYMUSZONYCH KOLORÓW
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.kzw *,
	.kzw *::before,
	.kzw *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media (forced-colors: active) {
	.kzw__plyta,
	.kzw__stempel,
	.kzw__ptaszek,
	.kzw__awaria {
		border-color: CanvasText;
	}

	.kzw__input,
	.kzw__select,
	.kzw__pisanie {
		border-bottom-color: CanvasText;
	}

	.kzw__cta {
		border: 1px solid ButtonText;
	}

	.kzw__ptaszek:checked::after {
		border-color: Canvas;
	}
}

/* ==========================================================================
   SZEROKI EKRAN
   --------------------------------------------------------------------------
   JEDNA KOLUMNA TAKŻE NA DESKTOPIE. Dwie kolumny przy polach dat dają układ
   czytający się jak kartoteka — a to jest dokładnie ten efekt, którego cały
   ten komponent unika. Szeroki ekran dostaje więcej powietrza, nie więcej kolumn.
   ========================================================================== */

@media (min-width: 48rem) {
	.kzw__plyta {
		padding: clamp(2rem, 3vw, 2.75rem);
	}
}

/* ==========================================================================
   DATA W TRZECH SELECTACH — dzień, miesiąc, rok (T-172)
   --------------------------------------------------------------------------
   Grupa jest ZAGNIEŻDŻONYM `fieldset`-em i to nie jest ozdoba semantyczna:
   czastki noszą nazwy „Dzień", „Miesiąc", „Rok", a na stronie stoją DWIE
   takie grupy (twoja data i data drugiej osoby). Bez `legend` czytnik ekranu
   wylicza sześć pól o trzech powtarzających się nazwach i żadna nie mówi,
   do której daty należy.

   `min-inline-size: 0` JEST OBOWIĄZKOWE: `fieldset` ma domyślnie
   `min-inline-size: min-content`, więc bez tego najdłuższa nazwa miesiąca
   rozpycha grupę poza płytę na wąskim telefonie.
   ========================================================================== */

.kzw__data {
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
	/* Siatkę i odstęp .35rem niesie `.kzw__pole` — ta sama klasa stoi
	   na tym węźle, żeby pole daty miało dokładnie ten rytm co inne pola. */
}

/* `float` zdejmuje z `legend` jej specjalne pudełko (przeglądarka przestaje
   rysować ją „w krawędzi" fieldsetu) i robi z niej zwykły blok — ten sam
   zabieg co przy `.kzw__legenda` wyżej, z tego samego powodu. */
.kzw__data-legenda {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
}

.kzw__data-trojka {
	display: grid;
	/* MOBILE: dzień i miesiąc w wierszu, rok pod nimi. To jest pomiar, nie
	   gust: wewnątrz pasma na /tarot-tak-czy-nie płyta ma na ekranie 320 px
	   około 233 px szerokości użytecznej (2 x --ttn-luz + 2 x --kzw-odstep
	   + obramowanie), a najdłuższa polska nazwa miesiąca w dopełniaczu
	   („października") potrzebuje ~100 px plus szewron. Trzy kolumny w tym
	   miejscu ucinają nazwę miesiąca. */
	grid-template-columns: 4.25rem minmax(0, 1fr);
	gap: var(--space-xs) .75rem;
	align-items: end;
}

.kzw__data-czesc {
	display: grid;
	min-width: 0;
}

/* Rok schodzi do drugiego wiersza i NIE rozciąga się na całą szerokość —
   cztery cyfry w polu szerokim na 16 rem czytają się jak pomyłka. */
.kzw__data-czesc--rok {
	grid-column: 1 / -1;
	max-width: 8rem;
}

@media (min-width: 30rem) {
	.kzw__data-trojka {
		grid-template-columns: 4.25rem minmax(0, 1fr) 6.5rem;
	}

	.kzw__data-czesc--rok {
		grid-column: auto;
		max-width: none;
	}
}

/* KOLEJNOŚĆ TABULACJI = KOLEJNOŚĆ W DOM = KOLEJNOŚĆ WIZUALNA w OBU układach.
   Robi to auto-placement siatki; nie ma tu ani jednego `order`
   ani `grid-row` i nie wolno ich dołożyć. */

/* Przycisk „Wyczyść tę datę". Pole jest OPCJONALNE, a niepełny wybór blokuje
   wysyłkę — bez tego przycisku wyjściem z niepełnej daty są trzy powroty
   do myślnika na telefonie. Skrypt pokazuje go, gdy w grupie cokolwiek jest
   wybrane, i chowa, gdy grupa jest pusta. */
.kzw__data-czysc {
	justify-self: start;
	margin-top: .35rem;
	padding: .35rem 0;
	min-height: 2.25rem;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--text-small);
	color: var(--kzw-accent);
	text-decoration: underline;
	text-underline-offset: .18em;
	cursor: pointer;
}

.kzw__data-czysc:hover {
	color: var(--kzw-rule-live);
}

.kzw__data-czysc:focus-visible {
	outline: 2px solid var(--kzw-focus);
	outline-offset: 3px;
}

/* Nazwa dostępna bez śladu na ekranie — dla trzech etykiet czastek daty.
   WŁASNA klasa, nie `screen-reader-text` ze Storefronta: ten arkusz nie
   zakłada obecności żadnego innego (ta sama decyzja co przy wartościach
   kolorów wpisanych wprost zamiast `var(--zn-*)`).

   Bez `display: none` i bez `visibility: hidden` — jedno i drugie zdjęłoby
   etykietę z drzewa dostępności, czyli skasowało jej jedyny powód istnienia. */
.kzw__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   SUWAK OPINII pod przyciskiem (template-parts/kwestionariusz/opinie.php)
   ==========================================================================
   Jasna odmiana suwaka z bloków rozkładów, na kartkę komponentu (tylko wariant
   papieru). Jedna opinia na szerokość, przewijanie palcem; strzałkę i samo
   przewijanie dokłada skrypt. Krój cytatu host może przepiąć przez
   `--kzw-opinie-kroj` (strona z szeryfowym krojem nagłówków). */
.kzw-opinie {
	min-width: 0;
	margin-top: var(--space-md);
	padding-top: 1.125rem;
	border-top: 1px solid var(--kzw-rule);
}

.kzw-opinie__tor {
	display: flex;
	gap: .875rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.kzw-opinie__tor::-webkit-scrollbar {
	display: none;
}

.kzw-opinie__tor:focus-visible {
	outline: 2px solid var(--kzw-focus);
	outline-offset: 2px;
}

.kzw-opinie__slajd {
	flex: 0 0 100%;
	margin: 0;
	padding: .875rem 1rem .75rem;
	border: 1px solid rgba(201, 168, 76, .35);
	border-left: 2px solid #c9a84c;
	border-radius: 6px;
	background: #f4efe6;
	scroll-snap-align: start;
	font-family: var(--kzw-opinie-kroj, inherit);
	font-size: var(--kzw-opinie-stopien, 1rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.45;
	color: var(--kzw-ink);
}

.kzw-opinie__gwiazdki {
	display: block;
	margin-bottom: .3125rem;
	font: normal 400 .8125rem/1 'Poppins', system-ui, sans-serif;
	letter-spacing: .14em;
	color: #f5b400;
}

.kzw-opinie__zrodlo {
	display: flex;
	align-items: center;
	gap: .4375rem;
	margin-top: .5rem;
	font: normal 500 .78125rem/1.3 'Poppins', system-ui, sans-serif;
	color: #5a5248;
}

.kzw-opinie__zrodlo svg {
	flex: none;
	width: .875rem;
	height: .875rem;
}

.kzw-opinie__nawigacja {
	display: flex;
	justify-content: flex-end;
	margin-top: .625rem;
}

/* Selektor (0,2,0): na stronach ze stylami przycisków z customizera sama klasa przegrywa. */
.kzw-opinie .kzw-opinie__dalej {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid #c9a84c;
	border-radius: 50%;
	background: rgba(201, 168, 76, .12);
	color: var(--kzw-accent);
	cursor: pointer;
	transition: background-color .4s, color .4s, transform .4s;
}

.kzw-opinie .kzw-opinie__dalej[hidden] {
	display: none;
}

.kzw-opinie__dalej svg {
	width: 1.125rem;
	height: 1.125rem;
}

.kzw-opinie .kzw-opinie__dalej:hover,
.kzw-opinie .kzw-opinie__dalej:focus-visible {
	background: #c9a84c;
	color: #1a1406;
	transform: translateX(2px);
}

.kzw-opinie .kzw-opinie__dalej:focus-visible {
	outline: 2px solid var(--kzw-focus);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.kzw-opinie .kzw-opinie__dalej {
		transition: none;
	}
}