/*
 * Lista źródeł (blok `flexisnap/references`): okno z bibliografią spod
 * odsyłacza w tekście i ten sam panel w kanwie listy źródeł. Przeniesione
 * z makiety (rozdział 6.22, węzeł 5399:4622).
 *
 * Na stronie elementem zewnętrznym jest `dialog`, w kanwie `div`. Położenie
 * okna i jego ukrycie dotyczą więc tylko `dialog`, a wygląd panelu obu; bez
 * tego kanwa chowałaby listę jako zamknięte okno.
 */

/* Okno na cały ekran, panel przy prawej krawędzi, 16 px od góry, dołu
   i prawej. Projekt nie daje pod oknem zasłony ani rozmycia: strona pod
   spodem jest widoczna, choć wyłączona z obsługi. */
dialog.flexisnap-references {
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: flex-end;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	max-block-size: none;
	margin: 0;
	padding: var(--wp--preset--spacing--4);
	border: 0;
	background-color: transparent;
	color: var(--wp--preset--color--czern);
	opacity: 0;

	/* Przenikanie jak w nakładce wyszukiwania: ten sam rodzaj warstwy i ten
	   sam czas. `display` i `overlay` są skokowe, stąd `allow-discrete`. */
	transition:
		opacity var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie),
		display var(--wp--custom--ruch--srednio) allow-discrete,
		overlay var(--wp--custom--ruch--srednio) allow-discrete;
}

/* Własne `display` wymaga własnego ukrycia: reguła przeglądarki przegrywa
   z arkuszem strony. */
dialog.flexisnap-references:not([open]) {
	display: none;
}

dialog.flexisnap-references[open] {
	opacity: 1;
}

@starting-style {

	dialog.flexisnap-references[open] {
		opacity: 0;
	}
}

dialog.flexisnap-references::backdrop {
	background-color: transparent;
}

/* Panel: 608 px przy prawej krawędzi, w oknie wysoki na cały ekran (projekt
   ma stałą wysokość ramki). Poniżej 640 px zajmuje całą szerokość z tym samym
   odstępem od krawędzi. */
.flexisnap-references__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 38rem;
	padding: var(--wp--preset--spacing--6);
	border-radius: var(--wp--preset--border-radius--l);
	background-color: var(--wp--preset--color--tlo-wtorne);
}

.flexisnap-references__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
}

/* Dwie klasy, bo styl nagłówków z theme.json waży tyle co jedna. */
.flexisnap-references .flexisnap-references__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--tytul-s);
	font-weight: 500;
	line-height: var(--wp--custom--interlinia--normalna);
}

/* Krzyżyk ten sam co w nakładce wyszukiwania, tylko przygaszony. */
.flexisnap-references__close {
	flex: none;
	inline-size: 2rem;
	block-size: 2rem;
	color: var(--wp--preset--color--tekst-przygaszony);
	transition: opacity var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie);
}

.flexisnap-references__close-icon {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	background-color: currentcolor;
	mask: url(../../icons/search-close.svg) center / contain no-repeat;
}

/* Projekt przepełnia panel i ucina ostatnią pozycję; lista przewija się
   w środku, inaczej bibliografia byłaby nie do przeczytania. `min-block-size`
   zeruje próg elementu zginanego, bez tego lista rozpychałaby panel. */
.flexisnap-references__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	min-block-size: 0;
	overflow-y: auto;
}

.flexisnap-references__item {
	display: flex;
	gap: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--4);
	border-radius: var(--wp--preset--border-radius--l);
	font-size: var(--wp--preset--font-size--tekst);
	line-height: var(--wp--custom--interlinia--normalna);
	transition: background-color var(--wp--custom--ruch--srednio) var(--wp--custom--ruch--wyjscie);
}

/* Białe tło: pozycja pod kursorem (makieta, decyzja z 2026-09-23) i pozycje
   wskazane przez klikniętą plakietkę (wzorzec hcp.arthrosamid.com, który
   podświetla cytowane źródła). */
.flexisnap-references__item[aria-current] {
	background-color: var(--wp--preset--color--biel);
}

/* Fokus trafia na pierwszą wskazaną pozycję; obrys w środku, bo lista
   przycina to, co wystaje poza nią. */
.flexisnap-references__item:focus-visible {
	outline-offset: -2px;
}

@media (hover: hover) {

	.flexisnap-references__close:hover {
		opacity: 0.7;
	}

	.flexisnap-references__item:hover {
		background-color: var(--wp--preset--color--biel);
	}
}

/* Numer w kolumnie 20 px, żeby treść wszystkich pozycji zaczynała się w jednej
   linii także przy numerze dwucyfrowym. */
.flexisnap-references__number {
	flex: none;
	inline-size: 1.25rem;
	font-weight: 500;
}

.flexisnap-references__text {
	flex: 1;
	min-inline-size: 0;
	color: var(--wp--preset--color--tekst-przygaszony);
}