/*
 * Słownik pojęć (pole strony "uklad: slownik", szablon czesci/slownik.php) - jak w PD: przyklejona kolumna z wyszukiwarką
 * i alfabetem, hasła według liter. Ładowany tylko na stronie słownika (Komponenty::styl), po serwis.css. Wydzielony
 * z narzedzia.css (audyt 2, G-W7 / S-D6).
 */
.slownik__uklad { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.slownik__boczna { align-self: stretch; }
.slownik__przyklejone { position: sticky; top: calc(var(--wys-naglowka) + 24px); }
.slownik__etykieta { display: block; margin-bottom: 8px; color: var(--granat); font: 600 15px/1.3 var(--font-naglowki); }
.slownik__pole { position: relative; display: block; }
.slownik__pole svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tekst-slaby); pointer-events: none; }
.slownik__input { width: 100%; padding: 12px 14px 12px 42px; border: 1px solid var(--obramowanie-pola); border-radius: 10px; background: #fff; color: var(--tekst); font: 400 16px/1.3 var(--font-tresc); }
.slownik__input:focus { border-color: var(--akcent); outline: 2px solid var(--akcent); outline-offset: 0; }
.slownik__licznik { margin: 12px 0 18px; color: var(--tekst-slaby); font-size: 14px; }
.slownik__litery { display: grid; grid-template-columns: repeat(6, 40px); gap: 8px; margin: 0; padding: 0; list-style: none; }
.slownik__litera-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--linia); border-radius: 50%; color: var(--granat); font: 500 15px/1 var(--font-naglowki); text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
a.slownik__litera-link:hover, a.slownik__litera-link:focus-visible, .slownik__litera-link.jest-aktywna { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.slownik__litera-link.jest-pusta { opacity: .3; pointer-events: none; }
/* podczas filtrowania wstęp zwinięty, wyniki od razu pod polem */
.slownik__wstep { margin-bottom: 8px; }
.slownik__wstep > :first-child { margin-top: 0; }
.slownik--filtr .slownik__wstep { display: none; }
.slownik__litera { margin: 40px 0 4px; padding-bottom: 8px; border-bottom: 2px solid var(--akcent); font-size: 28px; line-height: 1.2; scroll-margin-top: calc(var(--wys-naglowka) + 24px); }
.slownik__grupa:first-of-type .slownik__litera { margin-top: 24px; }
.slownik__hasla { margin: 0; }
.slownik__haslo dt { margin: 0; padding-top: 20px; color: var(--granat); font: 500 19px/1.35 var(--font-naglowki); scroll-margin-top: calc(var(--wys-naglowka) + 24px); }
.slownik__haslo dt:target { color: var(--akcent); }
.slownik__haslo dd { margin: 6px 0 0; padding-bottom: 20px; border-bottom: 1px solid var(--linia); color: var(--tekst); }
.slownik__haslo dd > :first-child { margin-top: 0; }
.slownik__haslo dd > :last-child { margin-bottom: 0; }
/* trafienie: żółte tło i podkreślenie w akcencie (kontrast tekstu bez zmian) */
.slownik__haslo mark { padding: 0 2px; border-radius: 3px; background: var(--zaznaczenie); color: inherit; box-shadow: inset 0 -2px var(--akcent); }
.slownik__grupa[hidden], .slownik__haslo[hidden] { display: none; }
.slownik__brak { margin: 32px 0 0; padding: 20px 24px; border-radius: 12px; background: var(--tlo-sekcji); }
@media (max-width: 991.98px) {
	.slownik__uklad { grid-template-columns: minmax(0, 1fr); }
	/* telefon i tablet: pole i litery przyklejone u góry jako pasek */
	.slownik__boczna { position: sticky; top: var(--wys-naglowka); z-index: 5; align-self: start; margin: 0 calc(-1 * var(--margines)); padding: 12px var(--margines); background: #fff; box-shadow: 0 8px 16px -14px rgba(20, 43, 62, .4); }
	.slownik__przyklejone { position: static; }
	/* etykieta pola ukryta wizualnie, ale w drzewie dostępności - podpowiedź „Szukaj pojęcia” zostaje w placeholderze (A-D5) */
	.slownik__etykieta { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	/* licznik (aria-live) zostaje w drzewie dostępności - ukryty wizualnie, nie display: none */
	.slownik__licznik { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	/* przyklejony pasek nie zasłania fokusu */
	html:has(.slownik__boczna) { scroll-padding-top: calc(var(--wys-naglowka) + 140px); }
	/* pasek liter bez paska przewijania, prawa krawędź wygaszona - widać, że lista jest dłuższa */
	.slownik__nawigacja { margin-top: 10px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
	.slownik__nawigacja::-webkit-scrollbar { display: none; }
	/* fokus w pasku liter: bez maski - litera z fokusem przy prawej krawędzi nie jest wygaszona (audyt 1, A-D1) */
	.slownik__nawigacja:focus-within { -webkit-mask-image: none; mask-image: none; }
	.slownik__litery { display: flex; width: max-content; padding-right: 48px; }
	.slownik__litera-link { width: 36px; height: 36px; }
	.slownik__litera-link.jest-pusta { opacity: .45; }
	.slownik__litera, .slownik__haslo dt { scroll-margin-top: calc(var(--wys-naglowka) + 130px); }
}
/* powiększenie 200-400% (niski ekran): pasek słownika w treści, nie przyklejony - zajmował do 71% ekranu, a cel litery lądował
   przy dolnej krawędzi (audyt 1, A-W1; nagłówek strony jest wtedy statyczny - serwis.css, max-height: 480px) */
@media (max-width: 991.98px) and (max-height: 480px) {
	.slownik__boczna { position: static; }
	html:has(.slownik__boczna) { scroll-padding-top: 16px; }
	.slownik__litera, .slownik__haslo dt { scroll-margin-top: 16px; }
}