/*
 * Trening próbny — formularz. Scoped .mkkk-trial.
 *
 * Czyta tokeny motywu przez var(--token, fallback), tak jak reszta assetów
 * MKKK. Motyw nie wymaga edycji, a na obcym motywie formularz zostaje czytelny.
 *
 * Ciemna karta #111827 z marketing/formApix.txt jest CELOWO pominięta: motyw ma
 * zasadę „ciemny prostokąt czyta się jak pas", więc wypełnienia idą w --belt,
 * a granat zostaje tuszem. Formularz jest jasny.
 */

.mkkk-trial {
	--tr-ink: var(--text, #1b2432);
	--tr-muted: var(--muted, #5b6675);
	--tr-line: var(--line, rgba(21, 35, 65, .12));
	--tr-line-2: var(--line-2, rgba(21, 35, 65, .22));
	--tr-bg: var(--white, #fff);
	--tr-paper: var(--paper, #f6f4ef);
	--tr-accent: var(--accent, #C5372B);
	--tr-accent-700: var(--accent-700, #a52a20);
	--tr-belt: var(--belt, #0e0e0f);
	--tr-r: var(--r-sm, 0);
	--tr-r-pill: var(--r-pill, 0);

	max-width: 720px;
	margin-inline: auto;
	color: var(--tr-ink);
	background: var(--tr-bg);
	border: 1px solid var(--tr-line);
	border-radius: var(--tr-r);
	padding: clamp(1.25rem, 4vw, 2rem);
}

.mkkk-trial__form { display: block; }

/*
 * `hidden` MUSI wygrywać wewnątrz całego formularza.
 *
 * Reguła UA `[hidden] { display: none }` przegrywa z KAŻDĄ autorską
 * deklaracją `display` na klasie, bo origin autora jest silniejszy. W tym repo
 * leży żywy dowód: `.day-filter` w grafiku ma `hidden` w znaczniku i
 * `display: flex` w arkuszu, więc bez JS pokazuje się i nic nie robi.
 * Formularz stoi na przełączaniu `hidden` (spinner, potwierdzenie, filtr wieku,
 * blok prośby o kontakt), a kontrolka, która widać, ale nic nie robi, kłamie.
 * Ta jedna reguła zamyka temat raz dla wszystkiego, co tu przybędzie.
 */
.mkkk-trial [hidden] { display: none; }

.mkkk-trial__group {
	border: 0;
	border-top: 1px solid var(--tr-line);
	padding: 1.1rem 0 0;
	margin: 0 0 1.4rem;
}

.mkkk-trial__group:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.mkkk-trial__group > legend {
	font-family: var(--f-display, inherit);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tr-muted);
	padding: 0;
	margin-bottom: .3rem;
}

.mkkk-trial__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .8rem 1rem;
}

/* LOKALIZACJA I "GRUPA I TERMIN" JEDNO POD DRUGIM (decyzja właściciela,
   2026-08-15) — tak samo jak wiek i poziom niżej.

   Celujemy w JEDEN wiersz, nie w klasę: `.mkkk-trial__row` opakowuje także parę
   E-mail + Telefon, która ma zostać w dwóch kolumnach. Selektor mówi wprost, po
   czym poznajemy właściwy wiersz — po tym, że stoi w nim wybór lokalizacji.

   `:has()` zamiast dokładania modyfikatora w szablonie ma jedną własność, która
   przeważyła: gdyby przeglądarka go nie znała, wiersz zostaje dwukolumnowy,
   czyli w stanie sprzed tej zmiany. Degradacja prowadzi do układu, który
   działał, a nie do rozsypanego formularza. */
.mkkk-trial__row:has( [data-field="selected_location"] ) {
	grid-template-columns: 1fr;
}

@media (max-width: 560px) {
	.mkkk-trial__row { grid-template-columns: 1fr; }
}

.mkkk-trial__field {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin-top: .8rem;
}

.mkkk-trial__label,
.mkkk-trial__field > label {
	font-family: var(--f-ui, inherit);
	font-weight: 600;
	font-size: 14px;
	color: var(--tr-ink);
}

.mkkk-trial__req { color: var(--tr-accent); }

.mkkk-trial input[type="text"],
.mkkk-trial input[type="email"],
.mkkk-trial input[type="tel"],
.mkkk-trial input[type="date"],
.mkkk-trial input[type="time"],
.mkkk-trial input[type="number"],
.mkkk-trial select,
.mkkk-trial textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--tr-line-2);
	border-radius: var(--tr-r);
	font: inherit;
	/*
	 * 16px NIE JEST decyzją typograficzną i nie wolno tego zmniejszyć „dla
	 * proporcji". Safari na iOS powiększa widok przy fokusie na kontrolce
	 * mniejszej niż 16px i po opuszczeniu pola widoku NIE COFA. Przy 15px
	 * formularz był jedynym miejscem na stronie, które to wyzwalało: motyw ma
	 * body 16px, a jego własne pola nie ustawiają font-size wcale.
	 *
	 * Jedna wartość dla wszystkich szerokości i to też jest decyzja. Stała tu
	 * media query wracająca do 15px „tam, gdzie problemu nie ma", z progiem
	 * 480px — a każdy telefon w poziomie ma więcej (iPhone SE 667 px, iPhone 15
	 * 852 px), więc problem wracał dokładnie na urządzeniu, dla którego reguła
	 * powstała. Różnicy 16px vs 15px nikt nie zobaczy, kosztu tamtej pomyłki
	 * rodzic z telefonem o 22:00 nie da się nie zauważyć.
	 */
	font-size: 16px;
	background: var(--tr-bg);
	color: var(--tr-ink);
}

.mkkk-trial textarea { resize: vertical; min-height: 6.5rem; }

/* Fokus 1:1 z motywem (style.css:160). */
.mkkk-trial input:focus-visible,
.mkkk-trial select:focus-visible,
.mkkk-trial textarea:focus-visible,
.mkkk-trial button:focus-visible {
	outline: 2px solid var(--tr-accent);
	outline-offset: 2px;
}

.mkkk-trial select:disabled { opacity: .55; cursor: not-allowed; }

.mkkk-trial__hint {
	color: var(--tr-muted);
	font-size: 14px;
	margin: 1rem 0 0;
}

/* WIERSZA FILTRÓW (`.mkkk-trial__filter-row`) JUŻ NIE MA, i nie jest to
   przeoczenie przy sprzątaniu.

   Trzymał wiek i poziom obok siebie w dwóch kolumnach. 2026-08-15 właściciel
   zniósł najpierw kolumny (jedna kontrolka wypadała o linijkę obok drugiej:
   pod wiekiem stoi jeszcze rezerwa na komunikat błędu, `min-height: 1em`,
   której poziom nie ma, więc każde wyrównanie — dołem czy górą — pękało),
   a potem przeniósł samo pytanie o wiek do sekcji „Kto przychodzi", bo wiek
   jest faktem o uczestniku, a nie odpowiedzią na „kiedy i gdzie".

   Po obu zmianach wiersz był opakowaniem nad JEDNYM polem, czyli nie miał już
   czego układać — a martwy `<div>` z regułą siatki jest gorszy niż jego brak:
   następny czytelnik szuka w nim układu, którego tam nie ma. Pionowe światło
   między kontrolkami daje dziś zwykły `margin-top` pola. */

/* Pole na dwucyfrową liczbę nie może być szerokie jak pole na e-mail:
   szerokość jest podpowiedzią, ile od kogoś chcemy.

   WĄSKI JEST SAM INPUT, NIE CAŁE POLE (poprawka 2026-08-15). Do tej pory
   `max-width` siedziało na `.mkkk-trial__field--age`, czyli na całym bloku —
   razem z etykietą. Etykieta „Ile lat ma uczestnik" z czerwoną gwiazdką
   wymagalności nie mieściła się w 8.5rem, więc gwiazdka spadała do drugiej
   linii, pod tekst. Wyglądało to jak osobny, niepodpisany znak.

   Dopóki obok stał „Poziom grupy", nie było na to miejsca inaczej. Dziś pole
   wieku stoi samo, w swojej sekcji, więc etykieta ma całą szerokość formularza
   i gwiazdka wraca tam, gdzie jej miejsce: zaraz za tekstem. Zwężamy wyłącznie
   kontrolkę, bo to ona miała nieść tę podpowiedź. */
.mkkk-trial__field--age input { max-width: 8.5rem; }

/* A hint inside a field is smaller and tighter than the default
   `.mkkk-trial__hint`: it is a caption for the control right above it, not a
   paragraph standing between two questions.

   SCOPED TO THE AGE FIELD ON PURPOSE, and it must not be collapsed into a bare
   `.mkkk-trial__hint`. The form also renders a hint that IS a paragraph between
   questions ("Żaden termin nie pasuje?…", under the terms block); it wants the
   default size and spacing, and a global rule would quietly shrink it into a
   caption for a control it does not describe.

   A second selector, `.mkkk-trial__filter .mkkk-trial__hint`, stood here until
   2026-08-16 for the hints of the level control. That control left the form and
   took its block with it, so nothing matched the selector any more. */
.mkkk-trial__field--age .mkkk-trial__hint { margin: .35rem 0 0; font-size: 13px; }

/* Linijka o nieczytelnym wieku: ten sam ton co błędy pól, bo to jest sygnał
   „popraw", a nie podpowiedź. Ciemniejszy akcent, nie drugi, obcy czerwony. */
.mkkk-trial__hint--uwaga { color: var(--tr-accent-700); font-weight: 600; }

/* Region ogłoszeń dla czytnika ekranu. min-height, żeby wpisanie pierwszego
   komunikatu nie przesuwało kaskady w dół. */
.mkkk-trial__filter-status {
	color: var(--tr-muted);
	font-size: 13px;
	margin: .7rem 0 0;
	min-height: 1em;
}

/* Błędy w ciemniejszym tonie AKCENTU. Drugi, obcy czerwony obok --accent
   wyglądałby na pomyłkę, nie na decyzję. */
.mkkk-trial__error {
	color: var(--tr-accent-700);
	font-weight: 600;
	font-size: 13px;
	min-height: 1em;
}

.mkkk-trial__field.is-invalid input,
.mkkk-trial__field.is-invalid select,
.mkkk-trial__field.is-invalid textarea { border-color: var(--tr-accent); }

.mkkk-trial__check.is-invalid span { color: var(--tr-accent-700); }

/* Linijka zawężenia po wejściu z karty dyscypliny (/oferta/ -> ?dyscyplina=).
   Lżejsza niż .mkkk-trial__note: to nie jest komunikat o braku czegokolwiek,
   tylko informacja o stanie listy plus wyjście z niego. Stoi POZA blokiem
   filtrów, więc widać ją także bez JavaScriptu. */
.mkkk-trial__scope {
	margin: 0 0 1rem;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--tr-muted, #5b6675);
}

.mkkk-trial__scope a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mkkk-trial__scope a:hover {
	text-decoration-thickness: 2px;
}

/* Informacja „nie mamy terminów, zostaw kontakt". Ten sam język co panel
   potwierdzenia: papier + czarna krawędź, bez czerwieni (to nie błąd). */
.mkkk-trial__note {
	background: var(--tr-paper);
	border: 1px solid var(--tr-line);
	border-inline-start: 3px solid var(--tr-belt);
	border-radius: var(--tr-r);
	padding: 1.1rem 1.3rem;
	margin: 0 0 1.4rem;
	font-size: 15px;
	line-height: 1.5;
}

.mkkk-trial__note p { margin: 0 0 .5rem; }
.mkkk-trial__note p:last-child { margin-bottom: 0; }

/* The legal-guardian note is a MODIFIER: the paper fill, the border, the radius
   and the padding all come from `.mkkk-trial__note` right above. Two things
   change, and the box itself is deliberately not restated — one frame drawn in
   two places drifts apart the first time someone touches one of them.

   THE LEFT STRIP GOES ACCENT INSTEAD OF BELT. The form carries two notes now
   and the black strip is already spoken for: the "no terms, leave your contact"
   block borrows it from the confirmation panel, where it reads as neutral news.
   This one is not news. It changes what the visitor is about to type into the
   next two controls, so it takes the token that already marks "this concerns a
   required field" (`.mkkk-trial__req`). It still cannot pass for an error:
   errors in this form speak through --tr-accent-700 text set in bold, never
   through a frame. Nothing stands in for the strip either — no icon, no glyph:
   the artefact ships through `the_content` under a CSP that passes no external
   asset, and a glyph from a system font lands differently on every OS.

   SPACE ON BOTH EDGES, not only below. The base note opens a block, so a bottom
   margin is all it ever needs and its shorthand leaves the top at 0. This one
   stands BETWEEN two controls: the age field above triggers it, the e-mail and
   phone row below is what it talks about. Flush against either one it reads as
   a caption for that control, which is the exact misreading the reordering was
   made to remove. The value is the base note's own 1.4rem put on both edges, so
   the gap holds whatever ends up standing next to it instead of being measured
   against a neighbour's margin.

   Both selectors carry a single class, so this rule wins the two overlapping
   declarations by standing later in the file. That is why it belongs here, next
   to the note it modifies: moved above the base it would lose without a sound,
   and !important would be repairing the order with a hammer. */
.mkkk-trial__note--opiekun {
	border-inline-start-color: var(--tr-accent);
	margin-block: 1.4rem;
}

.mkkk-trial__consents { margin: 0 0 1.3rem; }

.mkkk-trial__check {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.45;
	margin-top: .7rem;
	color: var(--tr-ink);
}

.mkkk-trial__check input { margin-top: .25rem; flex: 0 0 auto; }

.mkkk-trial__check a { color: var(--tr-accent); }

/* Honeypot: poza ekranem, celowo NIE display:none. */
.mkkk-trial__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mkkk-trial__actions {
	display: flex;
	align-items: center;
	gap: .8rem;
}

/* Przycisk 1:1 z .mkkk-btn motywu (style.css:613). */
.mkkk-trial__submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	background: var(--tr-accent);
	color: #fff;
	font-family: var(--f-ui, inherit);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
	border: 1.5px solid transparent;
	border-radius: var(--tr-r-pill);
	cursor: pointer;
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.mkkk-trial__submit:hover:not([aria-disabled="true"]) {
	background: var(--tr-accent-700);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(197, 55, 43, .28);
}

/*
 * Stan wysyłki jest oznaczany `aria-disabled`, a NIE atrybutem `disabled`:
 * element z `disabled` przestaje być fokusowalny i przeglądarka zrzuca fokus
 * na <body> dokładnie w chwili kliknięcia (uzasadnienie przy busy()
 * w assets/js/trial-form.js). Wygląd musi więc iść za tym samym atrybutem.
 */
.mkkk-trial__submit[aria-disabled="true"] { opacity: .6; cursor: progress; transform: none; }

.mkkk-trial__spinner {
	width: 1.1rem;
	height: 1.1rem;
	border: 2px solid var(--tr-line-2);
	border-top-color: var(--tr-accent);
	border-radius: 50%;
	animation: mkkk-trial-spin .7s linear infinite;
}

@keyframes mkkk-trial-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.mkkk-trial__spinner { animation: none; }
	.mkkk-trial__submit { transition: none; }
	.mkkk-trial__submit:hover:not([aria-disabled="true"]) { transform: none; }
}

.mkkk-trial__status { margin: .9rem 0 0; font-size: 14px; }
.mkkk-trial__status.is-error { color: var(--tr-accent-700); font-weight: 600; }

/* TRZY elementy dostają tabindex="-1" z tego samego powodu (skrypt przenosi tam
   fokus: po błędzie bez rozbicia na pola, po sukcesie i przy wejściu w stan
   zerowy filtra), więc obrys fokusu musi być widoczny tak samo jak na
   kontrolkach — inaczej fokus jest przeniesiony, ale niewidoczny. Notka
   ratowała się dotąd regułą globalną motywu, czyli była jedynym z tej trójki,
   któremu zmiana w motywie zgasiłaby obrys po cichu. */
.mkkk-trial__status:focus-visible,
.mkkk-trial__note:focus-visible,
.mkkk-trial__done:focus-visible {
	outline: 2px solid var(--tr-accent);
	outline-offset: 2px;
}

/* Droga wyjścia przy nieudanej wysyłce. Ten sam ton co reszta podpowiedzi:
   to nie jest drugi komunikat błędu, tylko co dalej. */
.mkkk-trial__status-out { margin: .35rem 0 0; font-size: 14px; color: var(--tr-muted); }

/* Potwierdzenie w stylu .mkkk-info-card motywu (style.css:619). */
.mkkk-trial__done {
	background: var(--tr-paper);
	border: 1px solid var(--tr-line);
	border-inline-start: 3px solid var(--tr-belt);
	border-radius: var(--tr-r);
	padding: 1.5rem 1.75rem;
}

.mkkk-trial__done-h { margin: 0 0 .5rem; }
.mkkk-trial__done-when { font-weight: 600; margin: 0 0 .5rem; }

/* „Co zabrać" pod terminem. Lista, nie akapit: to są dwie osobne czynności do
   zapamiętania, a rodzic czyta to raz i zamyka kartę. */
.mkkk-trial__done-notes {
	margin: 0;
	padding-inline-start: 1.25rem;
}
.mkkk-trial__done-notes li + li { margin-block-start: .25rem; }

.mkkk-trial--fallback {
	background: var(--tr-paper);
	border: 1px solid var(--tr-line);
	border-inline-start: 3px solid var(--tr-belt);
	border-radius: var(--tr-r);
	padding: 1.5rem 1.75rem;
}

.mkkk-trial__contact { color: var(--tr-accent); font-weight: 600; }

/* Nagłówek i wstęp z atrybutów bloku. */
.mkkk-trial__heading { margin: 0 0 .5rem; }
.mkkk-trial__intro { margin: 0 0 1.25rem; color: var(--muted, #5b6675); }

/*
 * Motyw MKKK jest jasny na sztywno i nie reaguje na tryb ciemny systemu.
 * Bez jawnych kolorów etykiety brałyby jasny odcień z prefers-color-scheme
 * i ginęły na białym tle.
 */
.mkkk-trial input::placeholder,
.mkkk-trial textarea::placeholder { color: #9a9a9a; }