/* HTML sitemap /mapa-strony/ — light page, grouped lists, collapsible tool categories. Colors only from tokens. */

.pm-hero {
	position: relative;
	padding: clamp(40px, 7vw, 88px) 0 clamp(24px, 4vw, 40px);
	background:
		radial-gradient(60% 80% at 85% 0%, var(--color-accent-tint), transparent 70%),
		var(--color-bg);
	border-bottom: 1px solid var(--color-border-soft);
}
.pm-h1 { margin-top: 12px; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; color: var(--color-text); }
.pm-accent { color: var(--color-accent); }
.pm-lead { max-width: 62ch; margin-top: 18px; font-size: var(--fs-lead); line-height: 1.6; color: var(--color-text-muted); }

.pm-search { margin-top: 28px; max-width: 520px; }
.pm-search__input {
	width: 100%;
	padding: 14px 18px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	font-size: 1rem;
	color: var(--color-text);
	transition: border-color .15s, box-shadow .15s;
}
.pm-search__input::placeholder { color: var(--color-text-subtle); }
.pm-search__input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-tint); }
.pm-search__status { min-height: 1.4em; margin-top: 8px; font-size: var(--fs-xs); color: var(--color-text-subtle); }

.pm-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pm-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	font-size: var(--fs-sm); font-weight: 500; color: var(--color-text-soft);
	transition: border-color .15s, color .15s, transform .15s;
}
.pm-chip:hover, .pm-chip:focus-visible { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-2px); }
.pm-chip__n { font-size: var(--fs-xs); color: var(--color-text-subtle); }

.pm-body { padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(48px, 8vw, 96px); }
.pm-sec { scroll-margin-top: calc(var(--header-height) + 24px); padding: 32px 0; border-bottom: 1px solid var(--color-border-soft); }
.pm-sec[hidden], .pm-cat[hidden], .pm-list li[hidden] { display: none; }
.pm-h2 { display: flex; align-items: baseline; gap: 12px; font-size: clamp(1.5rem, 2.8vw, 2rem); color: var(--color-text); }
.pm-count, .pm-cat__n, .pm-sub__n { font-size: var(--fs-xs); font-weight: 500; color: var(--color-accent); background: var(--color-lavender); padding: 3px 9px; border-radius: var(--radius-pill); }
.pm-note { max-width: 70ch; margin: 8px 0 16px; line-height: 1.6; color: var(--color-text-muted); }
.pm-note a { color: var(--color-indigo); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(83, 74, 183, .35); }
.pm-note a:hover { color: var(--color-accent); text-decoration-color: currentColor; }

.pm-list { margin: 12px 0 0; padding: 0; list-style: none; columns: 2 260px; column-gap: 32px; }
.pm-list--cols { margin-top: 16px; }
.pm-list li { break-inside: avoid; }
.pm-list a {
	display: block;
	padding: 7px 0 7px 16px;
	position: relative;
	line-height: 1.4;
	color: var(--color-text-soft);
}
.pm-list a::before {
	content: "";
	position: absolute; left: 0; top: 50%;
	width: 6px; height: 6px; margin-top: -3px;
	border-radius: 50%;
	background: var(--color-primary);
	opacity: .5;
	transition: opacity .15s, transform .15s;
}
.pm-list a:hover, .pm-list a:focus-visible { color: var(--color-accent); }
.pm-list a:hover::before, .pm-list a:focus-visible::before { opacity: 1; background: var(--color-accent); transform: scale(1.3); }

/* Tool categories */
.pm-cat { margin-top: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color .15s; }
.pm-cat[open], .pm-cat:hover { border-color: var(--color-primary-tint-border); }
.pm-cat__sum { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 600; color: var(--color-text); }
.pm-cat__sum::-webkit-details-marker { display: none; }
.pm-cat__sum::after {
	content: ""; order: 3; flex-shrink: 0;
	width: 8px; height: 8px; margin: 0 4px 0 2px;
	border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
	transform: rotate(45deg); transition: transform .2s;
}
.pm-cat[open] > .pm-cat__sum::after { transform: rotate(-135deg); }
.pm-cat__name { flex: 1; }
.pm-cat__sum:hover .pm-cat__name { color: var(--color-accent); }
.pm-cat__sum:focus-visible { outline-offset: -2px; }
.pm-cat__body { padding: 0 20px 20px; }
.pm-cat__all { margin: 0 0 4px; }
.pm-cat__all a { font-size: var(--fs-sm); font-weight: 500; color: var(--color-indigo); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(83, 74, 183, .35); }
.pm-cat__all a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.pm-sub { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--color-border-soft); font-size: 1rem; }
.pm-sub a { color: var(--color-text); }
.pm-sub a:hover { color: var(--color-accent); }

.pm-xml { margin-top: 32px; font-size: var(--fs-xs); color: var(--color-text-subtle); }

@media (max-width: 640px) {
	.pm-list { columns: 1; }
	.pm-cat__sum { padding: 14px 16px; }
	.pm-cat__body { padding: 0 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.pm-chip, .pm-list a::before, .pm-cat__sum::after { transition: none; }
}

.pm-wrap { max-width: calc(1040px + 2 * var(--gutter)); }