/* ewardega UI v3 "Meridian": harmonogram (/harmonogram/). Ładuje się po ui.css.
   Wzorzec: docs/redesign/makiety/v3/final/harmonogram.html (style.css, sekcja 16) + system.md §3, §4.
   Elewacja 2.2.0 (elewacja.md §3.4, §4.4): wejście krótkie (maska wierszy H1, liczba terminów .ui-enter),
   sygnatura "Tarcza" od 1100 px jako lepka ciemna kolumna obok listy (wiersz zapala swój łuk), poniżej mini tarcza
   w hero (r2), r3: wejście tarczy raz (droga od "dziś", łuki chronologicznie, środek na końcu), miesiące po pierścieniu,
   światło na krawędzi karty, kwadratowy detal absolwentek w Campach,
   kroki pomocy bez numerów i bez linii. Zero pętli ciągłych na tej stronie (punkty i statusy stoją).
   Mapa: D hero kompaktowe · L arkusz z filtrem, grupami miesięcy i tarczą · L/papier Pozostałe · L Campy · L Pomoc · D finał.
   Kontrakt JS (ui-harmonogram.js): form#ui-hf, [data-harm-n], [data-harm-month], [data-harm-id], [data-harm-empty],
   [data-harm-cnt], [data-harm-reset]. */

/* 1. Hero (ciemne, kompaktowe) ------------------------------------------------ */
.ui-hh {
	position: relative; isolation: isolate; overflow: clip;
	color: var(--ui-snow); background: var(--ui-noir);
	padding: calc(var(--ui-hd) + var(--ui-hero-pt)) 0 calc(clamp(48px, 6vw, 80px) + 28px);
}
.ui-hh::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--ui-grain) repeat 0 0 / 96px; opacity: .05; mix-blend-mode: screen; }
.ui-hh::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	width: min(900px, 120vw); aspect-ratio: 1; right: -18%; top: -28%;
	background: radial-gradient(closest-side, rgba(201, 164, 106, .13), rgba(201, 164, 106, .04) 55%, transparent);
}
.ui-hh__in { display: grid; gap: 28px; margin-top: 20px; }
.ui-hh__copy { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.ui-hh__copy .ui-d1 { text-wrap: balance; }
.ui-hh__lead { max-width: 34em; font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); font-weight: 300; line-height: 1.5; color: var(--ui-snow-2); text-wrap: pretty; }

/* Liczniki: wielka cienka liczba wolnych terminów (.ui-num, złoto na ciemnym) z podpisem obok, miasta i zadatek
   mniejsze za kreską. Kolejność w DOM dt, dd; wizualnie wartość przed podpisem. */
.ui-hh__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 0; margin: 0; padding-top: 18px; border-top: 1px solid var(--ui-hair); }
.ui-hh__stats > div { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 8px; padding: 0 20px 0 0; }
.ui-hh__stats > div + div { padding-left: 20px; border-left: 1px solid var(--ui-hair); }
.ui-hh__stats dd { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); font-weight: 300; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.ui-hh__stats dt { font-size: var(--ui-fs-s); line-height: 1.3; color: var(--ui-snow-2); }
.ui-hh__stats .ui-hh__big { align-items: center; gap: 14px; }
.ui-hh__big .ui-num { font-size: var(--ui-fs-num); line-height: .8; padding-bottom: .04em; }
/* Światło na liczbie wolnych terminów (hero i środek mini tarczy): złoto jaśnieje ku górze jak na krawędzi karty tarczy, statyczne */
.ui-hh .ui-num {
	background: linear-gradient(172deg, #f3e2c2 0%, var(--ui-gold-hi) 34%, var(--ui-gold) 62%, #9a7a48 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (forced-colors: active) { .ui-hh .ui-num { background: none; color: CanvasText; } }
/* Kadr hero (v6 2026-10-13; ewardega_ui_harmonogram_hero_img): trzy wycinki jednego zdjęcia z campu (DSC01427, Ewa
   przed pełną salą przy ściance), każdy pod swój układ; nigdzie twarz nie leży pod tekstem.
   Telefon: pas 3:1 z Ewą na tle ścianki (twarz na ok. 37% wysokości, nad wygaszeniem od 58%), w przepływie, bez nakładek.
   600 do 1099 px: same głowy słuchaczy i krzesła jako ciche tło (.3) z dziurą pod tarczą.
   Od 1100 px: okno między tytułem a liczbą terminów, przypięte do prawej krawędzi treści (150 px przed nią);
   brzegi wygaszone, więc liczba "7" i podpisy stoją na czerni; Ewa wypada na ok. 53% szerokości okna, w pełnym kryciu. */
.ui-hh__bg { position: relative; margin: 0 0 12px; aspect-ratio: 3 / 1; pointer-events: none; }
.ui-hh__bg img, .ui-hh__bg picture { display: block; width: 100%; height: 100%; }
.ui-hh__bg img { object-fit: cover; object-position: 50% 40%; opacity: .92;
	-webkit-mask: linear-gradient(180deg, #000 58%, transparent); mask: linear-gradient(180deg, #000 58%, transparent); }
@media (min-width: 600px) and (max-width: 1099px) {
	/* Tytuł zajmuje tu całą lewą kolumnę, więc kadr jest tylko tłem: głowy słuchaczy tyłem (bez twarzy), cichy (.3), z dziurą pod tarczą */
	.ui-hh__bg { position: absolute; z-index: -1; margin: 0; aspect-ratio: auto; inset: var(--ui-hd) 0 0 auto; width: 78%; }
	.ui-hh__bg img { object-position: 40% 45%; opacity: .3;
		-webkit-mask: linear-gradient(90deg, transparent 0, #000 40%), radial-gradient(circle at calc(100% - var(--ui-g) - 112px) 60%, transparent 0 120px, rgba(0, 0, 0, .35) 170px, #000 260px), linear-gradient(180deg, transparent 0, #000 28%, #000 74%, transparent);
		-webkit-mask-composite: source-in, source-in;
		mask: linear-gradient(90deg, transparent 0, #000 40%) intersect, radial-gradient(circle at calc(100% - var(--ui-g) - 112px) 60%, transparent 0 120px, rgba(0, 0, 0, .35) 170px, #000 260px) intersect, linear-gradient(180deg, transparent 0, #000 28%, #000 74%, transparent); }
}
@media (min-width: 600px) { .ui-hh { min-height: 420px; } }
@media (min-width: 1100px) {
	/* Kadr zaczyna się pod nagłówkiem (głowy nie wchodzą pod menu); skala z wysokości (kadr 2,4:1 szerszy od okna),
	   v6: pokazuje prawe ok. 86% pliku, Ewa przy ściance stoi w środku okna, lampa przy lewym słupie zostaje poza oknem */
	.ui-hh__bg { position: absolute; z-index: -1; margin: 0; aspect-ratio: auto; top: var(--ui-hd); bottom: 0; left: auto;
		right: calc(max(var(--ui-g), (100% - var(--ui-max)) / 2) + 150px); width: clamp(560px, 50vw, 760px); }
	.ui-hh__bg img { object-position: 100% 50%; opacity: .62;
		-webkit-mask: linear-gradient(90deg, transparent 0, #000 38%, #000 82%, transparent), linear-gradient(180deg, transparent 0, #000 12%, #000 76%, transparent 92%); -webkit-mask-composite: source-in;
		mask: linear-gradient(90deg, transparent 0, #000 38%, #000 82%, transparent) intersect, linear-gradient(180deg, transparent 0, #000 12%, #000 76%, transparent 92%); }
	/* 1100 do 1299 px kadr zaczyna się blisko tytułu: lead w dwóch krótszych wierszach kończy się przed jasną ścianą (AA) */
	@media (max-width: 1299px) { .ui-hh__lead { max-width: 22em; } }
	/* Dolny rząd liczników (miasta, zadatek) na lokalnej czerni: pod nim bywa koszulka Ewy (1100 do 1300 px).
	   Cień przy każdej pozycji, nie pod całym blokiem, żeby nie przygaszać twarzy Ewy obok kolumny "7". AA sprawdzone próbkami. */
	.ui-hh__in--n .ui-hh__stats > div:not(.ui-hh__big) { position: relative; }
	.ui-hh__in--n .ui-hh__stats > div:not(.ui-hh__big)::before {
		content: ""; position: absolute; inset: -22px -36px; z-index: -1; pointer-events: none;
		background: radial-gradient(closest-side, rgba(11, 9, 7, .9) 45%, rgba(11, 9, 7, .62) 75%, transparent);
	}
}
.ui-hh__big dt { max-width: 6.5em; font-size: var(--ui-fs-s); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35; color: var(--ui-snow); }
/* Wejście hero kończy się do 1,1 s (0,35 s + 0,7 s): liczniki i mini tarcza razem */
.ui-hh__stats.ui-enter, .ui-hh__ring.ui-enter { --enter-d: 350ms; --enter-y: 14px; }
/* Telefon: jeden rząd ("7 wolnych terminów | 4 miasta"), zadatek jest w leadzie i przy cenie; hero krótkie */
@media (max-width: 599px) {
	.ui-hh { padding-bottom: calc(22px + 28px); }
	.ui-hh__in { gap: 16px; margin-top: 4px; }
	.ui-hh__copy { gap: 12px; }
	/* H1 w jednej linii (jak duży tytuł w aplikacji): arkusz z filtrem i pierwszy termin wchodzą w pierwszy ekran */
	.ui-hh .ui-d1 { font-size: min(var(--ui-h1-hero), 9.3vw); }
	.ui-hh__lead-dep { display: none; }
	.ui-hh__stats { flex-wrap: nowrap; padding-top: 14px; }
	.ui-hh__stats > div { padding-right: 16px; }
	.ui-hh__stats > div + div { padding-left: 16px; }
	.ui-hh__stats .ui-hh__dep { display: none; }
	.ui-hh .ui-legend--hh { display: none; }
}

/* Pasek miesięcy (telefon i tablet; od 1100 px rolę przejmuje tarcza obok listy): karta = link do grupy listy,
   skrót miesiąca 13 px wersalikami, dni terminów cyframi 20 px (pełne przekreślone, "ostatnie miejsca" złote). */
.ui-months {
	display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
	margin-inline: calc(-1 * var(--ui-g)); padding: 2px var(--ui-g); scroll-padding-inline: var(--ui-g);
}
.ui-months::-webkit-scrollbar { display: none; }
.ui-month {
	flex: 1 0 auto; display: grid; align-content: start; gap: 6px; min-height: 44px; padding: 10px 14px 12px; scroll-snap-align: start;
	border-radius: var(--ui-r); background: rgba(246, 242, 236, .04); border: 1px solid var(--ui-hair); color: var(--ui-snow);
	transition: background-color var(--ui-t1), border-color var(--ui-t1);
}
.ui-month:hover { border-color: var(--ui-hair-2); background: rgba(246, 242, 236, .08); }
.ui-month:active { scale: .98; }
.ui-month:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-month b { font-weight: 600; }
.ui-month b .tnum { color: var(--ui-snow-3); font-weight: 500; }
.ui-month__s { display: none; }
.ui-month small { font-size: var(--ui-fs-xs); color: var(--ui-snow-2); }
.ui-month__days { display: flex; flex-wrap: nowrap; gap: 4px 12px; }
.ui-month__days i { font-style: normal; font-size: 1.25rem; font-weight: 300; line-height: 1.15; letter-spacing: -.01em; color: var(--ui-snow); font-variant-numeric: tabular-nums; }
.ui-month__days i.is-last { color: var(--ui-gold-hi); font-weight: 400; }
.ui-month__days i.is-full { color: var(--ui-snow-3); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--ui-snow-3); }
@media (max-width: 599px) {
	.ui-month { padding: 9px 12px 10px; gap: 2px; }
	.ui-month b { font-size: var(--ui-fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ui-snow-2); }
	.ui-month__n, .ui-month b .tnum, .ui-month small { display: none; }
	.ui-month__s { display: inline; }
}
.ui-hh__cal { display: grid; gap: 24px; min-width: 0; }
@media (max-width: 599px) { .ui-hh__cal { gap: 0; } }
/* Tablet i mały laptop: miesiące równymi kolumnami na całą szerokość, legenda pod nimi */
@media (min-width: 600px) and (max-width: 1099px) {
	.ui-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; padding: 0; overflow: visible; }
	.ui-month { min-width: 0; padding: 14px 16px 16px; gap: 8px; }
}
.ui-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
/* Legenda tarcz: tekst cichy, kropka w kolorze łuku (wolne zieleń statusu, ostatnie jasne złoto, pełne pusty krąg) */
.ui-legend--dial .ui-st--free::before, .ui-hh__viz .ui-legend--hh .ui-st--free::before { background: var(--ui-free-d); }
.ui-legend--dial .ui-st--last::before, .ui-hh__viz .ui-legend--hh .ui-st--last::before { background: var(--ui-gold-hi); animation: none; }
.ui-legend--dial .ui-st--full::before, .ui-hh__viz .ui-legend--hh .ui-st--full::before { background: transparent; border: 1px solid var(--ui-snow-3); }
/* Od 1100 px: hero jak nagłówek aplikacji. Tytuł i lead z lewej, liczba wolnych terminów z prawej (podpis pod nią,
   miasta i zadatek w rzędzie niżej); pasek miesięcy znika, bo tarcza obok listy pokazuje ten sam kalendarz. */
@media (min-width: 1100px) {
	.ui-hh { padding-bottom: calc(24px + 28px); }
	.ui-hh__in--n { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(48px, 6vw, 120px); align-items: end; margin-top: 12px; }
	.ui-hh__in--n .ui-hh__copy { gap: 16px; }
	.ui-hh__in--n .ui-hh__stats {
		display: grid; grid-template-columns: auto auto; justify-content: end; gap: 18px 0; padding: 0; border: 0;
	}
	.ui-hh__in--n .ui-hh__big { grid-column: 1 / -1; flex-direction: column-reverse; align-items: flex-end; gap: 10px; padding: 0 0 18px; border-bottom: 1px solid var(--ui-hair); }
	.ui-hh__in--n .ui-hh__big dt { max-width: none; }
	.ui-hh__in--n .ui-hh__big + div { padding-left: 0; border-left: 0; }
	.ui-hh__in--n .ui-hh__stats > div:last-child { padding-right: 0; }
	.ui-hh__in--n .ui-hh__cal { display: none; }
	/* Mini tarcza i jej opakowania znikają, liczniki (dl) stają w prawej kolumnie hero jak wcześniej */
	.ui-hh__viz, .ui-hh__side { display: contents; }
	.ui-hh__ring, .ui-hh__side > .ui-legend--hh { display: none; }
}

/* Mini tarcza w hero (poniżej 1100 px, elewacja.md §3.4 po r2): ten sam kalendarz co obok listy, w środku liczba
   wolnych terminów (.ui-num, złoto na ciemnym), z lewej miasta, zadatek i legenda kolorów łuków. Bez numerów dni,
   bez lepkości i bez reakcji na najechanie; rysuje się raz z wejściem hero (do 1,1 s). Dotknięcie łuku: wiersz listy. */
@media (max-width: 1099px) {
	.ui-hh__viz {
		--ring: clamp(184px, 52vw, 272px);
		display: grid; grid-template-columns: minmax(0, 1fr) var(--ring); align-items: center; column-gap: 16px;
		padding-top: 14px; border-top: 1px solid var(--ui-hair);
	}
	.ui-hh__side { display: grid; gap: 14px; align-content: center; min-width: 0; }
	.ui-hh__viz .ui-hh__stats { display: grid; gap: 10px; padding: 0; border: 0; }
	.ui-hh__viz .ui-hh__stats > div, .ui-hh__viz .ui-hh__stats > div + div { padding: 0; border: 0; gap: 8px; }
	.ui-hh__viz .ui-hh__stats .ui-hh__dep { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 4px; }
	.ui-hh__viz .ui-hh__stats dd { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
	/* Liczba wolnych terminów stoi w środku tarczy (aria-hidden); w dl zostaje dla czytników */
	.ui-hh__viz .ui-hh__big { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.ui-hh__viz .ui-legend--hh { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--ui-hair); }
	.ui-hh__viz .ui-legend--hh .ui-st { white-space: normal; color: var(--ui-snow-2); font-weight: 500; }
	.ui-hh__ring { order: 2; display: block; position: relative; width: var(--ring); aspect-ratio: 1; color: inherit; -webkit-tap-highlight-color: transparent; }
	.ui-hh__ring::before {
		content: ""; position: absolute; inset: -12%; z-index: -1; pointer-events: none; border-radius: 50%;
		background: radial-gradient(closest-side, rgba(201, 164, 106, .16), rgba(201, 164, 106, .05) 55%, transparent);
	}
	.ui-hh__ring .ui-dial--mini { display: block; position: absolute; inset: 9%; color: var(--ui-gold); container-type: inline-size; }
	.ui-dial--mini .il__track { stroke-width: 2.4; }
	.ui-dial--mini .ui-dial__ticks { stroke-width: 1.6; opacity: .3; }
	.ui-dial--mini .ui-dial__t { stroke-width: 10; }
	.ui-dial--mini .ui-dial__t--full { stroke-width: 3.5; }
	.ui-dial--mini .ui-dial__hit { stroke-width: 30; }
	.ui-dial--mini .ui-dial__p .il__core { stroke-width: 2.5; }
	.ui-dial--mini .ui-dial__m { letter-spacing: .1em; }
	.ui-dial--mini .ui-dial__m--now { letter-spacing: .02em; }
	/* Środek mini tarczy to link do listy (opakowanie w hero jest divem: bez zagnieżdżonych linków) */
	.ui-dial__c--n { width: 62%; gap: 6px; padding: 0; text-decoration: none; -webkit-tap-highlight-color: transparent; }
	.ui-dial__c--n .ui-num { font-size: clamp(3rem, 30cqi, 5rem); line-height: .8; }
	/* Podpis małymi literami, bez rozstrzelenia: mieści się w środku toru także przy tarczy 160 px */
	.ui-dial__c--n > span { font-size: var(--ui-fs-xs); font-weight: 500; letter-spacing: .01em; line-height: 1.25; color: var(--ui-snow-2); max-width: 7.5em; text-wrap: balance; }
}
/* Bardzo wąski telefon (320 px): mniejsza tarcza obok liczników, pierwszy termin nadal w pierwszym ekranie */
@media (max-width: 359px) {
	.ui-hh__viz { column-gap: 10px; } /* tarcza 150 px z reguły telefonu niżej */
	.ui-hh__viz .ui-hh__stats dd { font-size: 1.25rem; }
}
/* Tablet i mały laptop (600 do 1099 px, np. 1024x768): hero ściśnięte, żeby pierwszy termin był w pierwszym ekranie.
   Tarcza 200 px, legenda w jednym rzędzie, mniejsze odstępy nad i pod kreską. */
@media (min-width: 600px) and (max-width: 1099px) {
	.ui-hh { padding-bottom: calc(20px + 28px); }
	/* Tarcza obok tytułu (prawa kolumna przez dwa rzędy), pod tytułem jeden rząd: liczniki i legenda */
	/* Prawa kolumna z zapasem na nazwy miesięcy poza torem (GRU przy prawej krawędzi) */
	.ui-hh__in--n { --ring: 200px; grid-template-columns: minmax(0, 1fr) calc(var(--ring) + 24px); column-gap: 24px; row-gap: 16px; align-items: center; margin-top: 4px; }
	.ui-hh__in--n .ui-hh__copy { gap: 12px; }
	.ui-hh__in--n .ui-hh__viz { --ring: 200px; display: contents; }
	.ui-hh__in--n .ui-hh__ring { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: start; }
	.ui-hh__in--n .ui-hh__side { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; padding-top: 14px; border-top: 1px solid var(--ui-hair); }
	.ui-hh__in--n .ui-hh__viz .ui-hh__stats { grid-auto-flow: column; justify-content: start; column-gap: 28px; }
	.ui-hh__in--n .ui-hh__viz .ui-hh__stats .ui-hh__dep { flex-direction: row-reverse; align-items: baseline; gap: 8px; }
	.ui-hh__in--n .ui-hh__viz .ui-legend--hh { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 0; border-top: 0; }
	.ui-hh__in--n .ui-hh__viz .ui-legend--hh .ui-st { white-space: nowrap; }
}
/* Telefon (odbiór 2026-10-12, r2): tarcza z liczbą i liczniki obok na czystej czerni, bez legendy (status każdego terminu
   stoi słowami w wierszu listy); tarcza mniejsza, bo nad tytułem stoi pas zdjęcia, a pierwszy termin ma wejść w ekran */
@media (max-width: 599px) {
	.ui-hh .ui-hh__viz .ui-legend--hh { display: none; }
	.ui-hh__viz { --ring: clamp(150px, 44vw, 184px); }
	.ui-hh__viz .ui-hh__stats { flex-wrap: wrap; }
}

/* Tarcza kalendarza (sygnatura): od 1100 px w lepkiej ciemnej kolumnie obok listy (.ui-hdial); niżej jej nie ma.
   Podziałka dni, łuki terminów (kolor = status), punkt "dziś", najbliższy termin w środku. Rysuje się raz po wejściu,
   punkty stoją (bez pulsu). Najechanie albo fokus wiersza listy: łuk grubieje i świeci 320 ms, środek pokazuje termin. */
.ui-hdial, .ui-dial { display: none; }
.ui-hl__col { min-width: 0; }
@media (min-width: 1100px) {
	.ui-hl__list.has-dial { display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 29vw, 420px); /* 2.2.1: tarcza do 420 px */ column-gap: clamp(32px, 3.5vw, 56px); align-items: start; }
	.ui-hdial {
		display: grid; gap: 12px; position: sticky; top: calc(var(--ui-hd) + 16px); margin-top: 12px;
		padding: clamp(18px, 1.6vw, 22px); border-radius: var(--ui-r-l); overflow: clip; isolation: isolate;
		color: var(--ui-snow); background: var(--ui-noir); box-shadow: 0 24px 48px -32px rgba(22, 18, 14, .6);
	}
	/* Ciemna płyta (system §2.10): ziarno filmowe (lokalnie zamiast .ui-grain, bo ::after trzyma krawędź), ciepła poświata
	   u góry i światło na krawędzi karty (hairline 1 px, jaśniejszy lewy górny róg). Wszystko statyczne. */
	.ui-hdial { background: radial-gradient(130% 55% at 25% 0%, rgba(220, 189, 138, .1), transparent 62%), var(--ui-noir); }
	.ui-hdial::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--ui-grain) repeat 0 0 / 96px; opacity: .06; mix-blend-mode: screen; }
	.ui-hdial::after {
		content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px;
		background: linear-gradient(155deg, rgba(240, 216, 168, .6), rgba(201, 164, 106, .16) 26%, rgba(201, 164, 106, .05) 55%, rgba(201, 164, 106, .2));
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
		mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	}
	.ui-hdial__t { margin: 0; font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ui-snow-2); }
	.ui-dial {
		display: block; position: relative; justify-self: center; width: calc(100% - 36px); margin: 6px 0 2px;
		aspect-ratio: 1; color: var(--ui-gold); container-type: inline-size;
	}
	.ui-dial::before {
		content: ""; position: absolute; inset: -16%; z-index: -1; pointer-events: none; border-radius: 50%;
		background: radial-gradient(closest-side, rgba(201, 164, 106, .15), rgba(201, 164, 106, .05) 52%, transparent);
	}
	/* Legenda w jednym rzędzie (krótkie etykiety, pełne teksty statusów są w wierszach) */
	.ui-legend--dial { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--ui-hair); }
	.ui-legend--dial .ui-st { color: var(--ui-snow-2); font-weight: 500; }
	/* Koniec listy (odbiór 2026-10-12): gdy lepka karta zaczyna odjeżdżać w górę, gaśnie, zanim wejdzie pod półprzezroczysty
	   nagłówek (ciemna płyta prześwitywała przez jasne szkło). Oś widoku z wcięciem równym przyklejeniu: dopóki karta stoi,
	   jest w zakresie "contain" (pełna); pierwsze piksele odjazdu to "exit". Bez obsługi scroll-driven: jak dotąd. */
	@supports (animation-timeline: view()) {
		.ui-hdial {
			animation: ui-hdial-out linear both;
			animation-timeline: view(block calc(var(--ui-hd) + 15px) 0px);
			animation-range: exit 0% exit 7%; /* ok. 40 px odjazdu: karta gaśnie, zanim dojdzie do dolnej krawędzi nagłówka */
		}
		@keyframes ui-hdial-out { to { opacity: 0; visibility: hidden; } }
	}
}
.ui-dial > svg { display: block; width: 100%; height: 100%; }
/* Tor: odcinek na miesiąc, przerwa na granicy, co drugi miesiąc jaśniejszy */
.ui-dial .il__track { opacity: .3; stroke-width: 1.25; }
.ui-dial .il__track.is-alt { opacity: .62; }
.ui-dial .ui-dial__ticks { stroke-width: .9; opacity: .42; }
.ui-dial .ui-dial__t { stroke-width: 6.5; opacity: 1; } /* 2.2.1: grubsze łuki, tarcza czyta się z daleka */
/* Kolor łuku = kolor statusu z ui-st na ciemnym (legenda pod tarczą i w hero pokazuje te same kropki) */
.ui-dial .ui-dial__t--free { color: var(--ui-free-d); }
.ui-dial .ui-dial__t--last { color: var(--ui-gold-hi); }
.ui-dial .ui-dial__t--full { stroke-width: 1.5; color: var(--ui-snow-3); opacity: .55; }
.ui-dial .ui-dial__t--next { opacity: 1; filter: drop-shadow(0 0 5px rgba(240, 216, 168, .45)); }
/* Łuk terminu = link do wiersza listy (mysz); szeroki niewidoczny obrys ułatwia trafienie */
.ui-dial__a { cursor: pointer; outline: none; }
.ui-dial__hit { fill: none; stroke: transparent; stroke-width: 14; stroke-linecap: round; pointer-events: stroke; }
/* Gorący łuk (najechanie łuku albo wiersza listy): grubieje i świeci, pozostałe łuki cichną */
.ui-dial__a:hover .ui-dial__t, .ui-dial__a.is-hot .ui-dial__t { stroke-width: 9; opacity: 1; color: var(--ui-gold-hi); filter: drop-shadow(0 0 5px rgba(240, 216, 168, .55)); }
.ui-dial__a:hover .ui-dial__t--full, .ui-dial__a.is-hot .ui-dial__t--full { stroke-width: 3.5; color: var(--ui-snow-2); filter: none; }
.ui-dial.has-hot .ui-dial__a:not(.is-hot) .ui-dial__t { opacity: .38; }
.ui-dial__d i.is-hot { color: var(--ui-snow); }
.ui-dial__c.is-peek .ui-label { color: var(--ui-snow-2); }
.ui-dial .ui-dial__p { color: var(--ui-gold-hi); }
.ui-dial .ui-dial__p .il__core { fill: var(--ui-noir); stroke: currentColor; stroke-width: 1.5; }
.ui-dial .ui-dial__p .il__halo { fill: none; stroke: currentColor; stroke-width: 1; opacity: .5; }
.ui-dial .ui-dial__now { color: var(--ui-snow-2); }
.ui-dial .ui-dial__now .il__halo { fill: none; stroke: currentColor; stroke-width: 1; opacity: .35; }
/* Złota droga od "dziś" do najbliższego wolnego terminu (po torze) */
.ui-dial .ui-dial__route { stroke-width: 2; color: var(--ui-gold-hi); filter: drop-shadow(0 0 3px rgba(240, 216, 168, .45)); }
/* Nazwa miesiąca po pierścieniu (textPath, tylko tarcza obok listy): 18,5 jednostki = min. 13 px przy tarczy 288 px */
.ui-dial__mt { font-size: 18.5px; font-weight: 600; letter-spacing: .14em; fill: var(--ui-snow-2); }
.ui-dial__lbls { position: absolute; inset: 0; pointer-events: none; }
.ui-dial__m { position: absolute; transform: translate(calc(-50% + var(--sx, 0) * 50%), calc(-50% + var(--sy, 0) * 50%)); font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ui-snow-2); white-space: nowrap; }
.ui-dial__m--now { color: var(--ui-snow-3); letter-spacing: .04em; text-transform: none; font-weight: 500; }
/* Numer pierwszego dnia przy łuku (wewnątrz toru): pełny przekreślony, najbliższy i "ostatnie miejsca" złote */
.ui-dial__d {
	position: absolute; display: flex; gap: 6px; transform: translate(calc(-50% - var(--sx, 0) * 50%), calc(-50% - var(--sy, 0) * 50%));
	font-size: var(--ui-fs-xs); font-weight: 600; line-height: 1; white-space: nowrap; color: var(--ui-snow-2);
}
.ui-dial__d.is-col { flex-direction: column; align-items: center; gap: 4px; }
.ui-dial__d i { font-style: normal; }
.ui-dial__d .is-last, .ui-dial__d .is-next { color: var(--ui-gold-hi); }
.ui-dial__d .is-full { color: var(--ui-snow-3); text-decoration: line-through; }
.ui-dial__c {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52%; aspect-ratio: 1; border-radius: 50%;
	display: grid; align-content: center; justify-items: center; gap: clamp(4px, 1.4cqi, 6px); padding: 3cqi; text-align: center; color: var(--ui-snow);
	transition: background-color var(--ui-t2);
}
.ui-dial__c:hover { background: rgba(246, 242, 236, .04); }
.ui-dial__c b { font-size: clamp(2rem, 12cqi, 3rem); font-weight: 200; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.ui-dial__mo { font-size: clamp(var(--ui-fs-xs), 3.5cqi, var(--ui-fs-s)); color: var(--ui-snow-2); margin-top: -2px; }
.ui-dial__w { display: grid; justify-items: center; max-width: 100%; font-size: var(--ui-fs-xs); font-weight: 600; line-height: 1.35; margin-top: 4px; }
.ui-dial__w .ui-sep { display: none; }
/* Mała tarcza (1100 do ok. 1250 px): w środku tylko data, miesiąc i status; kurs i miasto są w wierszu obok */
@container (max-width: 300px) { .ui-dial__w { display: none; } }
/* Mała tarcza: środek węższy, żeby status nie dochodził do numerów dni przy torze */
@container (max-width: 320px) { .ui-dial__c:not(.ui-dial__c--n) { width: 46%; } .ui-dial__c .ui-st { font-size: 13px; letter-spacing: -.005em; } }
.ui-dial__w [data-dial="city"] { font-weight: 500; color: var(--ui-snow-2); }
.ui-dial__c .ui-st { margin-top: 2px; }
@media (prefers-reduced-motion: no-preference) {
	.js .ui-dial:not(:has(.il.in)) .ui-dial__lbls, .js .ui-dial:not(:has(.il.in)) .ui-dial__c { opacity: 0; }
	/* Wejście do 1,1 s (elewacja §6: treść niewidoczna maks. 1 s): napisy i środek .5 s po .2 s, łuki 0,7 s z krokiem 40 ms (maks. 400 ms) */
	.ui-dial__lbls, .ui-dial__c { transition: opacity .5s var(--ui-ease) .2s, background-color var(--ui-t2); }
	.ui-dial .il__d { transition: stroke-dashoffset .7s var(--ui-ease-out-expo) min(calc(var(--i, 0) * 40ms), 400ms); }
	.ui-dial .ui-dial__t { transition: stroke-dashoffset .7s var(--ui-ease-out-expo) min(calc(var(--i, 0) * 40ms), 400ms), stroke-width .32s var(--ui-ease-out-expo), opacity .32s var(--ui-ease), color .32s var(--ui-ease); }
	.ui-dial .il__pt { transition: opacity .4s ease .5s; }
	.ui-dial__d i { transition: color .32s var(--ui-ease), opacity .24s var(--ui-ease); }
	/* Tarcza obok listy (sygnatura, raz, bez pętli i bez sprężyny): punkt "dziś" i podziałka, nazwy miesięcy po pierścieniu,
	   złota droga od "dziś" do najbliższego wolnego terminu (--ui-t5, większość drogi w ok. 0,6 s), łuki terminów zapalają się
	   chronologicznie co 40 ms od 0,25 s, punkt najbliższego terminu po swoim łuku, numery dni, środek na końcu (od 1 s). */
	.js .ui-dial:not(:has(.il.in)) .ui-dial__mt { opacity: 0; }
	.ui-hdial .ui-dial__mt { transition: opacity .6s var(--ui-ease) .1s; }
	.ui-hdial .ui-dial__now { transition: opacity .3s ease; }
	.ui-hdial .ui-dial__route { transition: stroke-dashoffset var(--ui-t5) var(--ui-ease-out-expo) .15s; }
	.ui-hdial .ui-dial__t { transition-delay: min(calc(200ms + var(--i, 0) * 40ms), 900ms), 0s, 0s, 0s; }
	.ui-hdial .ui-dial__p { transition: opacity .5s ease .85s; }
	.ui-hdial .ui-dial__lbls { transition: opacity .5s var(--ui-ease) .6s; }
	.ui-hdial .ui-dial__c { transition: opacity .6s var(--ui-ease) 1s, background-color var(--ui-t2); }
}

/* Tarcza i pasek miesięcy reagują na filtr (ui-harmonogram.js): łuki, numery dni i karty miesięcy spoza filtra
   przygasają, środek tarczy pokazuje pierwszy widoczny termin. Bez JS nic nie jest przygaszone. */
.ui-dial__a.is-dim, .ui-dial__d i.is-dim, .ui-month__days i.is-dim { opacity: .25; }
.ui-dial .ui-dial__p.is-dim { opacity: 0; }
.ui-month.is-dim { opacity: .55; }
.ui-dial__a.is-dim .ui-dial__t { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	.ui-dial__a, .ui-month__days i { transition: opacity .24s var(--ui-ease); }
	.ui-month { transition: opacity .24s var(--ui-ease), background-color var(--ui-t1), border-color var(--ui-t1), scale var(--ui-t1) var(--ui-ease); }
	.ui-dial .ui-dial__p.is-dim { transition: opacity .24s var(--ui-ease); }
	.ui-dial__c.is-swap > * { animation: ui-hh-swap .32s var(--ui-ease); }
	@keyframes ui-hh-swap { from { opacity: 0; transform: translateY(4px); } }
}

/* 2. Arkusz listy: filtr (lepki na każdej szerokości) i grupy miesięcy --------- */
/* Fokus: token --ui-focus z ui.css (na jasnym złoty atrament 5,3:1, na ciemnym jasne złoto), bez lokalnych kolorów */
.ui-hl__sec { padding: 4px 0 clamp(48px, 5vw, 80px); }
.ui-hf__sent { height: 0; }
.ui-hf {
	--hf-bg: var(--ui-ivory);
	position: relative; top: 0; z-index: 20; padding: 10px 0 14px; background: var(--hf-bg); border-bottom: 1px solid var(--ui-line);
	/* Filtr stoi w lewej kolumnie listy (.ui-hl__col w .ui-wrap): poniżej 1100 px pasek wychodzi na całą szerokość ekranu */
	margin-inline: calc(-1 * var(--ui-g)); padding-inline: var(--ui-g);
	transition: box-shadow var(--ui-t2);
}
/* Telefon i tablet: lepki tylko z JS (zwija się do jednego rzędu); bez JS pełny filtr zająłby trzecią część ekranu */
/* top tylko w trybie lepkim: przy position: relative przesuwałby pasek bez JS o wysokość headera na listę */
.ui-hf.has-js { position: sticky; top: var(--ui-hd); }
@media (min-width: 900px) { .ui-hf { position: sticky; top: var(--ui-hd); padding-block: 14px; } }
@media (min-width: 1100px) { .has-dial .ui-hf { margin-inline: 0; padding-inline: 0; } }
.ui-hf__in { display: grid; gap: 10px; }
.ui-hf__row { display: grid; gap: 6px; min-width: 0; }
.ui-hf__lbl { font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-ink-3); }
.ui-hf__scroll {
	display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0; margin: 0 calc(-1 * var(--ui-g)); padding: 2px var(--ui-g); border: 0;
	overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--ui-g);
	-webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.ui-hf__scroll::-webkit-scrollbar { display: none; }
.ui-hf__scroll .ui-seg__o { flex: none; }
.ui-seg__o.is-zero span { color: var(--ui-ink-3); border-style: dashed; }
.ui-hf__end { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.ui-hf__end .ui-tl__n { margin: 0 0 0 auto; }
.ui-hf__acts { display: flex; gap: 8px; }
.ui-hf__acts:not(:has(> :not([hidden]))) { display: none; }
.ui-hf__acts .ui-btn .ui-ic { width: 14px; height: 14px; }
@media (min-width: 600px) {
	/* Etykieta przy pierwszym rzędzie chipów także wtedy, gdy chipy zawiną się do drugiego */
	.ui-hf__row { display: flex; align-items: flex-start; gap: 16px; }
	.ui-hf__lbl { min-width: 64px; line-height: 44px; }
	.ui-hf__scroll { flex: 1; }
}
@media (min-width: 900px) {
	.ui-hf__scroll { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; -webkit-mask: none; mask: none; }
}
/* Panel z miastem i przełącznikiem: w zwykłym stanie przezroczysty dla siatki */
.ui-hf__more { display: contents; }
.ui-hf__tog { display: none; }
/* Szeroki ekran: filtr w lewej kolumnie obok tarczy, trzy rzędy (kurs, miasto, przełącznik z licznikiem) */
@media (min-width: 1100px) { .ui-hf:not(.is-compact) .ui-hf__in { gap: 8px; } }

/* Zwinięty filtr (JS, po przewinięciu pod header): jeden rząd kursów + przycisk "Miasto",
   miasto, przełącznik i licznik w panelu pod paskiem. Wysokość w przepływie trzyma JS (margin-bottom). */
/* Telefon z JS: filtr zwinięty od początku (rząd kursów + "Miasto"), cień dopiero po przyklejeniu (.is-stuck) */
.ui-hf.is-compact { padding-block: 8px; }
.ui-hf.is-stuck { box-shadow: 0 10px 24px -18px rgba(40, 28, 14, .45); }
/* Przypięty filtr: pas tła filtra pod szkłem nagłówka, żeby wiersze listy nie prześwitywały przez header (odbiór 2026-10-12) */
.ui-hf.is-stuck::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: calc(var(--ui-hd) + 2px); background: var(--hf-bg); pointer-events: none; }
.ui-hf.is-compact .ui-hf__in { position: relative; display: flex; align-items: center; gap: 10px; }
.ui-hf.is-compact .ui-hf__row--c { display: flex; flex: 1; min-width: 0; }
.ui-hf.is-compact .ui-hf__row--c .ui-hf__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Przewijany rząd chipów: zanik po stronie, gdzie jest jeszcze coś do zobaczenia (JS ustawia .is-sl / .is-end / .is-fit) */
.ui-hf.is-compact .ui-hf__row--c .ui-hf__scroll {
	--fl: 0px; --fr: 40px;
	flex: 1; flex-wrap: nowrap; overflow-x: auto; margin: 0 0 0 calc(-1 * var(--ui-g)); padding: 2px 0 2px var(--ui-g);
	-webkit-mask: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
	mask: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
}
.ui-hf.is-compact .ui-hf__row--c .ui-hf__scroll.is-sl { --fl: 40px; }
.ui-hf.is-compact .ui-hf__row--c .ui-hf__scroll.is-end { --fr: 0px; }
.ui-hf.is-compact .ui-hf__row--c .ui-hf__scroll.is-fit { --fl: 0px; --fr: 0px; }
.ui-hf.is-compact .ui-hf__tog {
	display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; max-width: 46%; margin-left: auto; padding: 0 12px 0 14px;
	border-radius: 999px; border: 1px solid var(--ui-line-2); background: var(--ui-card); color: var(--ui-ink); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
	transition: border-color var(--ui-t1), background-color var(--ui-t1);
}
.ui-hf__tog:hover { border-color: var(--ui-ink-3); }
.ui-hf__tog:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
/* Licznik zmian w panelu (miasto, wyłączone "Tylko wolne miejsca"): złota plakietka jak w aplikacji */
.ui-hf__tog-n {
	display: inline-grid; place-items: center; flex: none; order: 3; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
	font-size: var(--ui-fs-xs); font-weight: 700; line-height: 1; color: #fff; background: var(--ui-gold-ink);
}
.ui-hf__tog-n[hidden] { display: none; }
.ui-hf__tog[aria-expanded="true"] .ui-hf__tog-n { color: var(--ui-noir); background: var(--ui-gold); }
.ui-hf__tog-chev { order: 4; }
.ui-hf__tog-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Odbiór 2026-10-12: pigułka rośnie do pełnej nazwy miasta ("Solec Kujawski" przy 320 px), przewijany rząd kursów
   bierze resztę szerokości. Wielokropek zostaje tylko jako bezpiecznik powyżej 16 znaków. */
.ui-hf.is-compact .ui-hf__tog { max-width: none; }
.ui-hf.is-compact .ui-hf__tog-v { max-width: 16ch; }
.ui-hf.is-compact .ui-hf__row--c { min-width: 0; }
.ui-hf__tog .ui-hf__tog-ic { width: 18px; height: 18px; flex: none; color: var(--ui-gold-ink); }
/* Licznik wyników na zwiniętym pasku (od 600 px; na telefonie liczba stoi w nagłówkach miesięcy) */
.ui-hf__cnt { display: none; }
@media (min-width: 600px) {
	.ui-hf.is-compact .ui-hf__cnt { display: inline-flex; flex: none; order: 1; font-size: var(--ui-fs-s); font-weight: 600; color: var(--ui-ink-2); white-space: nowrap; }
	.ui-hf.is-compact .ui-hf__tog { order: 2; margin-left: 0; }
}
.ui-hf__tog .ui-hf__tog-chev { width: 14px; height: 14px; flex: none; transform: rotate(90deg); transition: transform var(--ui-t2) var(--ui-ease); }
.ui-hf.is-compact .ui-hf__tog[aria-expanded="true"] { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-snow); }
.ui-hf.is-compact .ui-hf__tog[aria-expanded="true"] .ui-hf__tog-ic { color: var(--ui-gold); }
.ui-hf__tog[aria-expanded="true"] .ui-hf__tog-chev { transform: rotate(-90deg); }
.ui-hf.is-compact .ui-hf__more {
	position: absolute; top: calc(100% + 16px); right: 0; z-index: 2; display: none; gap: 14px; width: min(100%, 640px); padding: 16px 18px;
	border-radius: var(--ui-r); background: var(--ui-card); border: 1px solid var(--ui-line); box-shadow: var(--ui-sh-2);
}
.ui-hf.is-compact.is-open .ui-hf__more { display: grid; }
.ui-hf.is-compact .ui-hf__more .ui-hf__row { display: grid; gap: 8px; }
.ui-hf.is-compact .ui-hf__more .ui-hf__scroll { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; -webkit-mask: none; mask: none; }
.ui-hf.is-compact .ui-hf__more .ui-hf__end { flex-wrap: wrap; }
@media (max-width: 599px) {
	/* Telefon: jak pasek filtrów w aplikacji. "Filtry" z lewej, za kreską rząd kursów wychodzi poza prawą krawędź ekranu
	   (ucięcie na krawędzi ekranu czyta się jako przewijanie, nie jako błąd składu); po przewinięciu chip staje na początku. */
	.ui-hf.is-compact .ui-hf__in { gap: 0; }
	.ui-hf.is-compact .ui-hf__tog { order: -1; max-width: none; margin: 0 12px 0 0; padding: 0 10px 0 12px; gap: 4px; }
	.ui-hf.is-compact .ui-hf__row--c { align-items: center; }
	.ui-hf.is-compact .ui-hf__row--c::before { content: ""; flex: none; width: 1px; height: 28px; background: var(--ui-line-2); }
	.ui-hf.is-compact .ui-hf__row--c .ui-hf__scroll {
		--fr: 28px;
		gap: 6px; margin: 0 calc(-1 * var(--ui-g)) 0 0; padding: 2px var(--ui-g) 2px 12px;
		scroll-snap-type: x proximity; scroll-padding-inline: 12px var(--ui-g);
	}
	.ui-hf.is-compact .ui-hf__row--c .ui-hf__scroll.is-sl { --fl: 28px; }
	.ui-hf.is-compact .ui-hf__row--c .ui-seg__o { scroll-snap-align: start; }
	.ui-hf.is-compact .ui-hf__row--c .ui-seg__o span { gap: 6px; padding-inline: 13px; }
	.ui-hf.is-compact .ui-hf__more { top: calc(100% + 12px); left: 0; right: auto; }
}
@media (prefers-reduced-motion: no-preference) {
	.ui-hf.is-compact.is-open .ui-hf__more { animation: ui-hf-in .28s var(--ui-ease); }
	@keyframes ui-hf-in { from { opacity: 0; transform: translateY(-6px); } }
}

.ui-hl__list { padding-top: 0; }
/* Pierwsza widoczna grupa miesiąca blisko filtra: lista zaczyna się od razu pod nim.
   Bez :nth-child(1 of ...), bo minifikator WP Rocket skleja "1 of" w "1of" i przeglądarka odrzuca regułę. */
.ui-hl .ui-mgroup:not([hidden]):not(.ui-mgroup:not([hidden]) ~ .ui-mgroup) { margin-top: 18px; }
/* Kwota zadatku pod ceną: tylko w układzie telefonu (szerzej jest w pasku filtra) */
.ui-dr__dep { display: none; }
.ui-hl .ui-mgroup { margin-top: clamp(28px, 3.5vw, 44px); scroll-margin-top: calc(var(--ui-hd) + var(--hf-h, 76px) + 8px); }
.ui-mgroup > h3 small { display: inline-flex; align-items: center; }
.ui-mgroup > h3 small .tnum { color: var(--ui-ink-3); }
.ui-hl .ui-dr { scroll-margin-top: calc(var(--ui-hd) + var(--hf-h, 76px) + 24px); }
.ui-hl .ui-dr:target { border-color: var(--ui-gold); box-shadow: 0 0 0 3px var(--ui-gold-a), var(--ui-sh-1); }
/* Łuk tarczy pod kursorem: jego wiersz na liście odpowiada złotą ramą i ciemnym kafelkiem daty (druga strona sygnatury) */
.ui-hl .ui-dr.is-peer { border-color: var(--ui-gold); }
.ui-hl .ui-dr.is-peer .ui-dp { background: var(--ui-noir); border-color: var(--ui-noir); }
.ui-hl .ui-dr.is-peer .ui-dp b { color: var(--ui-snow); }
.ui-hl .ui-dr.is-peer .ui-dp small { color: var(--ui-gold); }
/* Wiersz terminu: wspólny wariant kompaktowy jest w ui.css (sekcja 21). Tu tylko zadatek pod ceną na telefonie. */
@container (max-width: 559px) { .ui-hl .ui-dr__dep { display: block; font-size: var(--ui-fs-xs); font-weight: 400; color: var(--ui-ink-2); } }
/* Wiersz nie rozpycha listy (domyślne min-width: auto elementu siatki), a pełny termin na telefonie ma
   "Lista rezerwowa" w osobnym rzędzie pod ceną (napis ok. 180 px nie mieści się obok ceny przy 320-390 px).
   Lokalnie na tej stronie; ta sama poprawka do ui.css (sekcja 21) jako propozycja dla kursu i terminu. */
.ewa-ui--harmonogram .ui-tl__list > .ui-dr { min-width: 0; }
/* Telefon: karta jak w aplikacji. Kafel daty 52 px tylko przy tytule i statusie, miasto i dni od lewej krawędzi,
   na dole pasek karty (nitka) z ceną i zadatkiem z lewej i "Zapisz się" z prawej. Cały wiersz nadal jest linkiem (::after). */
@container (max-width: 559px) {
	.ewa-ui--harmonogram .ui-dr {
		grid-template-columns: 52px max-content minmax(0, 1fr) auto;
		grid-template-areas: "dp main main main" "dp st st st" "city city days days" "price price price act";
		column-gap: 12px; row-gap: 0; padding: 12px 16px;
	}
	.ewa-ui--harmonogram .ui-dr .ui-dp { width: 52px; height: 52px; border-radius: 14px; }
	.ewa-ui--harmonogram .ui-dr__main { align-self: start; }
	/* Pole linku 44 px (padding), układ bez zmian (ujemny margines) */
	.ewa-ui--harmonogram .ui-dr__main a { min-height: 0; padding-block: 11px 12px; margin-block: -9px; }
	.ewa-ui--harmonogram .ui-dr .ui-st { align-self: start; }
	.ewa-ui--harmonogram .ui-dr__city, .ewa-ui--harmonogram .ui-dr__days { margin-top: 6px; }
	.ewa-ui--harmonogram .ui-dr__city { min-width: 0; }
	.ewa-ui--harmonogram .ui-dr::before { content: ""; grid-row: 4; grid-column: 1 / -1; align-self: start; height: 1px; margin-top: 7px; background: var(--ui-line); }
	.ewa-ui--harmonogram .ui-dr .ui-price, .ewa-ui--harmonogram .ui-dr__act { margin-top: 15px; }
	.ewa-ui--harmonogram .ui-dr.is-full { grid-template-areas: "dp main main main" "dp st st st" "city city days days" "price price price price" "act act act act"; }
	.ewa-ui--harmonogram .ui-dr.is-full .ui-dr__act { justify-self: stretch; margin-top: 8px; }
	.ewa-ui--harmonogram .ui-dr.is-full .ui-dr__act .ui-btn { flex: 1; }
}
/* Od 320 px listy (telefony 360+) "Lista rezerwowa" mieści się obok ceny: ten sam dolny pasek co przy zapisie */
@container (min-width: 320px) and (max-width: 559px) {
	.ewa-ui--harmonogram .ui-dr.is-full { grid-template-areas: "dp main main main" "dp st st st" "city city days days" "price price price act"; }
	.ewa-ui--harmonogram .ui-dr.is-full .ui-dr__act { justify-self: end; margin-top: 15px; }
	.ewa-ui--harmonogram .ui-dr.is-full .ui-dr__act .ui-btn { flex: none; }
}

/* Pomarańcz tylko przy najbliższym terminie: wspólna reguła w ui.css (wiersz terminu, .is-next). */
/* Najbliższy termin z miejscami: złota rama i etykieta "Najbliżej" na górnej krawędzi (poza siatką wiersza) */
.ui-hl .ui-dr.is-next { border-color: var(--ui-gold); box-shadow: 0 0 0 1px var(--ui-gold-a), var(--ui-sh-1); }
.ui-dr__flag {
	position: absolute; z-index: 2; top: -10px; left: 12px; display: inline-flex; align-items: center; height: 20px; padding: 0 9px;
	border-radius: 999px; font-size: var(--ui-fs-xs); font-weight: 700; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ui-noir); background: var(--ui-gold);
}
.ui-hl .ui-dr.is-next:not([hidden]) { margin-top: 6px; }
/* Mikrointerakcje wiersza: kafel daty przechodzi w noir ze złotym miesiącem, wiersz unosi się o 1 px, po tytule strzałka */
.ui-hl .ui-dr .ui-dp { transition: background-color .24s var(--ui-ease), border-color .24s var(--ui-ease), color .24s var(--ui-ease); }
.ui-hl .ui-dr .ui-dp b { transition: color .24s var(--ui-ease); }
.ui-hl .ui-dr:focus-within .ui-dp { background: var(--ui-noir); border-color: var(--ui-noir); }
.ui-hl .ui-dr:focus-within .ui-dp b { color: var(--ui-snow); }
.ui-hl .ui-dr:focus-within .ui-dp small { color: var(--ui-gold); }
.ui-hl .ui-dr__main a > span:first-child::after {
	/* Ujemny margines: strzałka nie zajmuje miejsca w wierszu, więc nie przenosi niczego do drugiej linii */
	content: ""; display: inline-block; width: 14px; height: 14px; margin: 0 -22px 0 8px; vertical-align: -1px; opacity: 0; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ui-hl .ui-dr__main a:focus-visible > span:first-child::after { opacity: 1; }
@media (hover: hover) {
	.ui-hl .ui-dr:hover .ui-dp { background: var(--ui-noir); border-color: var(--ui-noir); }
	.ui-hl .ui-dr:hover .ui-dp b { color: var(--ui-snow); }
	.ui-hl .ui-dr:hover .ui-dp small { color: var(--ui-gold); }
	.ui-hl .ui-dr:hover .ui-dr__main a > span:first-child::after { opacity: 1; transform: none; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.ui-hl .ui-dr:hover { transform: translateY(-1px); box-shadow: var(--ui-sh-1); }
	.ui-hl .ui-dr.is-next:hover { box-shadow: 0 0 0 1px var(--ui-gold-a), var(--ui-sh-1); }
	.ui-hl .ui-dr__main a > span:first-child::after { transform: translateX(-6px); transition: opacity .24s var(--ui-ease), transform .24s var(--ui-ease); }
}

/* Notka pod nazwą (Solec: nocleg i wyżywienie w cenie) w kolorze złota na jasnym */
.ui-hl .ui-dr__main small { color: var(--ui-gold-ink); font-weight: 600; margin-top: -4px; }
@container (max-width: 559px) { .ui-hl .ui-dr__main small { margin-top: 0; } }
.ui-hl__empty { margin-top: 32px; }
/* Pełne terminy ukryte przełącznikiem: notka pod listą z przyciskiem "Pokaż pełne" */
.ui-hl__full {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 24px 0 0; padding: 12px 12px 12px 18px;
	border: 1px dashed var(--ui-line-2); border-radius: var(--ui-r); font-size: var(--ui-fs-s); line-height: 1.45; color: var(--ui-ink-2);
}
.ui-hl__full[hidden] { display: none; }
.ui-hl__full-t { flex: 1 1 260px; text-wrap: pretty; }
.ui-hl__full b { color: var(--ui-ink); font-weight: 600; }
.ui-hl__empty .ui-ic--xl { color: var(--ui-gold-ink); }
.ui-hl__empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ui-hl__none { margin-top: 24px; }
.ui-hl__none form { width: 100%; max-width: 520px; text-align: left; }

/* 3. Pozostałe szkolenia (papier) -------------------------------------------- */
/* Krótszy rytm i szew na granicy tła: zmiana koloru czyta się jako rozdział, nie przypadkowy pas */
.ui-hpoz { padding-block: clamp(72px, 7vw, 96px); border-top: 1px solid var(--ui-line); }
.ui-hpoz + .ui-hhelp, .ui-hpoz + .ui-hcamp { padding-top: clamp(72px, 7vw, 104px); }
.ui-hcamp + .ui-hhelp { border-top: 0; }
/* Rytm dolnej połowy (odbiór 2026-10-12): camp i kroki zapisu to jeden blok, finał zaraz po krokach.
   Było ok. 270 px pustki między kartą campu a "Jak się zapisać" i ok. 150 px przed finałem na 1440. */
.ui-hcamp:has(+ .ui-hhelp) { padding-bottom: clamp(56px, 6vw, 96px); }
.ui-hcamp + .ui-hhelp { padding-top: clamp(56px, 5vw, 72px); }
.ui-hhelp { padding-bottom: clamp(64px, 6vw, 96px); }
/* Szew z pinem między papierem a beżem (jak między listą a "Pozostałe"), nitka na granicy tonów */
.ui-hhelp { border-top: 1px solid var(--ui-line); }
.ui-others { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .ui-others { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ui-other {
	position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img t act"; gap: 16px; align-items: center;
	padding: 10px 14px 10px 10px; border-radius: var(--ui-r); background: var(--ui-card); border: 1px solid var(--ui-line);
	transition: border-color var(--ui-t2), box-shadow var(--ui-t2);
}
.ui-other:hover { border-color: var(--ui-line-2); box-shadow: var(--ui-sh-1); }
.ui-other__img { grid-area: img; display: block; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--ui-noir); }
.ui-other__img img { width: 100%; height: 100%; object-fit: cover; }
/* Rysunek techniki (dłoń, przedramię, stopa, chusta) złotą kreską na noir, statyczny (bez rysowania przy wejściu
   i najechaniu: strona ma jeden ruchomy moment, tarczę); 1:1 dwie dłonie nad stołem */
.ui-other__img--il, .ui-other__img--one {
	display: grid; place-items: center; color: var(--ui-gold);
	background: radial-gradient(120% 90% at 50% 100%, rgba(201, 164, 106, .16), transparent 70%), var(--ui-noir);
}
.ui-other__img--il .il { width: 84%; height: auto; }
.ui-other__img--il .il__d { stroke-width: 1.3; }
.ewa-ui--harmonogram .ui-other .il .il__d { stroke-dashoffset: 0; stroke-dasharray: none; transition: none; animation: none; }
.ewa-ui--harmonogram .ui-other .il :is(.il__pt, .il__halo) { opacity: 1; transition: none; animation: none; }
.ui-other__img--one .il { width: 92%; }
.ui-other__t { grid-area: t; display: grid; gap: 4px; min-width: 0; }
.ui-other__t b { font-weight: 600; line-height: 1.3; }
/* Cała karta klikalna (link tytułu rozciągnięty jak w .ui-dr), przycisk nad nim */
.ui-other__t b a { text-decoration: none; color: inherit; display: inline-block; padding-block: 12px; margin-block: -12px; }
.ui-other__t b a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ui-other__t b a:focus-visible { outline: none; }
.ui-other:has(.ui-other__t a:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-other:hover .ui-other__t b { text-decoration: underline; text-decoration-color: var(--ui-line-2); text-underline-offset: 3px; }
.ui-other__t small { font-size: var(--ui-fs-xs); line-height: 1.4; color: var(--ui-ink-3); }
/* Opis kursu i "Nowy termin wkrótce" zawsze w osobnych liniach (mieści się obok zdjęcia 72 px), separator nigdy nie zostaje na końcu wiersza */
.ui-other__t small { display: flex; flex-direction: column; gap: 0; }
.ui-other__t small wbr { display: none; }
.ui-other__t small .ui-sep { display: none; }
.ui-other > .ui-btn { grid-area: act; position: relative; z-index: 1; }
/* Od 900 px: krótki tekst ("Powiadom mnie", pełny w aria-label) i wspólna kolumna przycisków, lewe krawędzie w jednej linii */
@media (min-width: 900px) {
	.ui-other { grid-template-columns: 72px minmax(0, 1fr) 168px; }
	.ui-other > .ui-btn { justify-self: stretch; justify-content: center; }
	.ui-other__x { display: none; }
	.ui-other__bt { white-space: nowrap; }
}
@media (max-width: 559px) {
	.ui-other { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "img t" "img act"; row-gap: 10px; align-items: start; padding: 12px; }
	.ui-other__img { width: 64px; height: 72px; }
	.ui-other > .ui-btn { justify-self: start; }
}
/* 3a. Campy: kwadratowy detal absolwentek (.ui-unveil, podpis .ui-cap pod kadrem; cała grupa jest w hero /campy-masazowe/),
   obok ostatnia edycja (etykieta, nazwa, data cyframi .ui-num--s, miejsce) albo wiersze otwartych campów.
   Od 900 px kadr 5/12 z lewej, treść 7/12; niżej kadr na pełną szerokość (telefon od krawędzi do krawędzi) i treść pod nim. */
.ui-hcamp { position: relative; border-top: 1px solid var(--ui-line); }
.ui-hcamp__in { display: grid; gap: clamp(24px, 3vw, 40px); margin-top: clamp(8px, 1vw, 16px); }
.ui-hcamp__fig .ui-unveil { aspect-ratio: 1; }
/* Telefon: kadr w marginesie strony z promieniem jak na desktopie (od krawędzi do krawędzi z zaokrągleniem wyglądał na błąd);
   lekkie powiększenie od prawej chowa skrawek ramienia osoby spoza kadru przy lewej krawędzi wersji -m */
@media (max-width: 719px) {
	.ui-hcamp__fig .ui-cap { margin-top: 12px; }
	.ui-hcamp__fig .ui-unveil img { scale: 1.04; transform-origin: 100% 50%; }
}
@media (min-width: 720px) and (max-width: 899px) { .ui-hcamp__fig .ui-unveil { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) {
	.ui-hcamp__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 96px); align-items: center; }
}
.ui-hcamp__body { min-width: 0; }
.ui-hcamp__list { margin: 0; }
.ui-hcamp__more { margin-top: 20px; }
.ui-hcamp__note { display: grid; gap: clamp(16px, 2vw, 24px); justify-items: start; }
.ui-hcamp__ed { display: grid; gap: 12px; margin: 0; padding-bottom: clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--ui-line); width: 100%; }
.ui-hcamp__ed .ui-label { color: var(--ui-gold-ink); }
.ui-hcamp__name { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--ui-ink); }
.ui-hcamp__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.ui-hcamp__when .ui-num { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4rem); line-height: .9; white-space: nowrap; }
.ui-hcamp__place { font-size: var(--ui-fs-s); font-weight: 500; color: var(--ui-ink-2); }
.ui-hcamp__txt { margin: 0; max-width: 34em; font-size: var(--ui-fs-s); line-height: 1.55; color: var(--ui-ink-2); text-wrap: pretty; }
.ui-hcamp__acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 599px) { .ui-hcamp__acts, .ui-hcamp__acts .ui-btn { width: 100%; justify-content: center; } }

/* 4. Pomoc: trzy kroki z etykietami "Krok 1" (13 px wersaliki, złoty punkt), hairline nad krokiem, bez numerów i linii */
.ui-hhelp__acts { display: grid; gap: 14px; max-width: 440px; }
/* H2 tuż pod rozdziałem w obu rozdziałach: prawa kolumna (lead, przyciski) nie spycha go w dół, rytm 01 i 02 ten sam */
@media (min-width: 900px) {
	.ui-hhelp .ui-head--split, .ui-hpoz .ui-head--split, .ui-hcamp .ui-head--split { align-items: start; }
	.ui-hpoz .ui-head--split .ui-lead, .ui-hcamp .ui-head--split .ui-lead { padding-top: .35em; }
	.ui-hhelp__acts { justify-self: end; width: 100%; padding-top: .35em; }
}
.ui-help { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ui-help__s { display: grid; gap: 10px; align-content: start; padding: 22px 0 26px; border-top: 1px solid var(--ui-line-2); }
.ui-help__s small { display: inline-flex; align-items: center; gap: 10px; font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ui-ink-2); }
.ui-help__s small::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ui-gold-ink); }
.ui-help__s b { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.ui-help__s p { margin: 0; max-width: 34em; font-size: var(--ui-fs-s); color: var(--ui-ink-2); text-wrap: pretty; }
/* Zmiana planów (regulamin §16) pod krokami: jedna linia z hairline, nie krok zapisu */
.ui-help__note { margin: 4px 0 0; padding-top: 18px; border-top: 1px solid var(--ui-line); max-width: 52em; font-size: var(--ui-fs-s); line-height: 1.55; color: var(--ui-ink-2); text-wrap: pretty; }
@media (min-width: 900px) { .ui-help__note { margin-top: 32px; } }
@media (min-width: 900px) {
	.ui-help { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 3.5vw, 56px); }
	.ui-help__s { padding-bottom: 0; }
}
.ui-hhelp__acts .ui-lead { margin: 0; }

/* 5. Telefon: dok i finał (lokalnie na tej stronie; propozycja do fundamentu) ---- */
@media (max-width: 899px) {
	/* Przewijanie do kotwic i fokusu nie chowa celu pod dolnym dokiem */
	html:has(body.ewa-ui--harmonogram) { scroll-padding-bottom: calc(var(--ui-dock) + 32px + var(--ui-safe)); }
}
@media (max-width: 599px) {
	/* Finał: dwa przyciski jednej szerokości jeden pod drugim */
	.ewa-ui--harmonogram .ui-final__cta { display: grid; width: 100%; max-width: 360px; }
	.ewa-ui--harmonogram .ui-final__cta .ui-btn { width: 100%; justify-content: center; }
}

/* 6. Finał (lokalnie; propozycja do fundamentu, po jej wdrożeniu do usunięcia) --------------------------------
   Maska okna: gładkie koło zamiast obrysu svg/enso-disk.svg (wielokąt dawał schodki w przerwie pędzla nad zdjęciem).
   Promień 73% połowy boku: krawędź kadru chowa się pod wewnętrzną krawędzią pędzla, w przerwie idzie czystym łukiem.
   Odsłona bez zmian (mask-size 30% -> 100%, ui.css 22.11). */
.ewa-ui--harmonogram .ui-final__disk {
	-webkit-mask: radial-gradient(circle closest-side, #000 calc(73% - .75px), transparent 73%) 50% 50% / 100% 100% no-repeat;
	mask: radial-gradient(circle closest-side, #000 calc(73% - .75px), transparent 73%) 50% 50% / 100% 100% no-repeat;
}
/* Od 1024 px: finał bez pustej czerni nad oknem i pod przyciskami (min-height z ui.css dawał ok. 220 i 260 px) */
@media (min-width: 1024px) {
	.ewa-ui--harmonogram .ui-final__in--win { min-height: 0; padding-block: clamp(80px, 7vw, 112px); }
}

/* 7. Bez JS: nagłówek nad ciemnym hero pod paskiem promocji (lokalnie; propozycja do fundamentu, ui.css 418).
   ui.css daje html:not(.ui-js) .ui-hd--over position: absolute przy top: 0 z reguły .ui-hd (sticky), więc nagłówek
   wchodził pod pasek promocji (z-index 61, 32 px). top: auto = pozycja statyczna, czyli tuż pod paskiem, jakikolwiek ma wysokość. */
html:not(.ui-js) .ui-hd--over { top: auto; }