/*
Name: W limicie: nagłówek strony, style
Slug: wlimicie-naglowek-style
Version: 1.1.2
Description: Układ nagłówka, zwijanie logo do znaku na telefonie, menu konta i pełnoekranowe menu mobilne.
Module: wlimicie-naglowek
Scope: front
Load: manual
Media: all

1.1.2: pełne menu od 1280 px (pięć pozycji z Cennikiem), poniżej przycisk menu.
1.1.1: logo nie zmienia koloru po najechaniu (Astra nadpisywała a:hover), imię i e-mail bez ligatur, czytelniejsze.
1.1.0: wzór klienta: menu wyśrodkowane, czarne pozycje, większy przycisk na komputerze, na telefonie przycisk w pasku dopiero po przewinięciu.
1.0.0: pierwsza wersja.
*/

/* ==========================================================================
   1. ALIASY TOKENÓW (kontrakt v1, wartości zapasowe na wypadek braku ft-core)
   ========================================================================== */
.wlh,
.wlh-sheet {
	--wlh-accent: var(--ft-accent, #80601F);
	--wlh-accent-soft: var(--ft-accent-soft, #F7F2E7);
	--wlh-ink: var(--ft-ink, #111111);
	--wlh-muted: var(--ft-muted, #666666);
	--wlh-surface: var(--ft-surface, #FFFFFF);
	--wlh-surface-alt: var(--ft-surface-alt, #F7F7F7);
	--wlh-border: var(--ft-border, #E5E5E5);
	--wlh-danger: var(--ft-danger, #A23A21);
	--wlh-font: var(--ft-font-body, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);
	--wlh-fs: var(--ft-fs-body, 1rem);
	--wlh-fs-sm: var(--ft-fs-sm, 0.875rem);
	--wlh-fs-xs: var(--ft-fs-xs, 0.8125rem);
	--wlh-fs-big: var(--ft-fs-h3, clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem));
	--wlh-fw-medium: var(--ft-fw-medium, 500);
	--wlh-fw-semibold: var(--ft-fw-semibold, 600);
	--wlh-lh: var(--ft-lh-snug, 1.3);
	--wlh-h: var(--ft-header-h, 4rem);
	--wlh-gutter: var(--ft-gutter, clamp(1rem, 4vw, 2rem));
	--wlh-container: var(--ft-container, 1360px);
	--wlh-s1: var(--ft-space-1, 0.25rem);
	--wlh-s2: var(--ft-space-2, 0.5rem);
	--wlh-s3: var(--ft-space-3, 0.75rem);
	--wlh-s4: var(--ft-space-4, 1rem);
	--wlh-s5: var(--ft-space-5, 1.5rem);
	--wlh-s6: var(--ft-space-6, 2rem);
	--wlh-radius: var(--ft-radius-md, 4px);
	--wlh-radius-lg: var(--ft-radius-lg, 8px);
	--wlh-radius-pill: var(--ft-radius-pill, 999px);
	--wlh-shadow-1: var(--ft-shadow-1, 0 1px 2px rgba(17, 17, 17, 0.06));
	--wlh-shadow-3: var(--ft-shadow-3, 0 2px 6px rgba(17, 17, 17, 0.06), 0 20px 48px rgba(17, 17, 17, 0.14));
	--wlh-ring: var(--ft-ring, 0 0 0 3px rgba(128, 96, 31, 0.35));
	--wlh-dur-fast: var(--ft-dur-fast, 160ms);
	--wlh-dur: var(--ft-dur, 280ms);
	--wlh-ease: var(--ft-ease, cubic-bezier(0.4, 0, 0.2, 1));
	--wlh-ease-out: var(--ft-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
	--wlh-slant: var(--ft-slant, -30deg);
	--wlh-z: var(--ft-z-header, 500);
	--wlh-logo-h: var(--ft-logo-h, 28px);

	/* Wymiary własne nagłówka */
	--wlh-touch: 44px;
	--wlh-avatar: 36px;
	--wlh-panel-w: 280px;
	--wlh-drop-w: 240px;
	--wlh-row-h: 60px;
	--wlh-icon: 24px;
	--wlh-icon-sm: 16px;
	--wlh-icon-md: 20px;
	--wlh-bar-h: 3px;
	--wlh-cta-lg: 52px;
	--wlh-cta-sm: 40px;
}

@media (min-width: 1024px) {
	.wlh,
	.wlh-sheet { --wlh-logo-h: var(--ft-logo-h, 34px); }
}

/* ==========================================================================
   2. RESET W OBRĘBIE NAGŁÓWKA (Astra styluje button, ul, a globalnie)
   ========================================================================== */
.wlh [hidden],
.wlh-sheet[hidden] { display: none !important; }

.wlh *,
.wlh *::before,
.wlh *::after,
.wlh-sheet *,
.wlh-sheet *::before,
.wlh-sheet *::after { box-sizing: border-box; }

.wlh ul,
.wlh li,
.wlh p,
.wlh-sheet ul,
.wlh-sheet li,
.wlh-sheet p { margin: 0; padding: 0; list-style: none; }

.wlh a,
.wlh-sheet a { text-decoration: none; }

.wlh button,
.wlh-sheet button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.wlh summary,
.wlh-sheet summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wlh summary::-webkit-details-marker { display: none; }
.wlh summary::marker { content: ""; }

.wlh__icon { display: block; flex: none; width: var(--wlh-icon); height: var(--wlh-icon); }

/* Kotwice nie chowają się pod lepkim nagłówkiem, płynne przewijanie tylko bez ograniczenia ruchu */
html:has(.wlh) { scroll-padding-top: calc(var(--ft-header-h, 4rem) + var(--ft-space-4, 1rem)); }
@media (prefers-reduced-motion: no-preference) {
	html:has(.wlh) { scroll-behavior: smooth; }
}

/* Astra potrafi ustawić overflow-x: hidden na .site, co wyłącza position: sticky. Clip przycina tak samo, ale nie psuje lepkości. */
.ft-site .site { overflow-x: clip; }

/* Czujnik przewinięcia, absolutnie od góry dokumentu */
.wlh-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 24px;
	pointer-events: none;
}

/* ==========================================================================
   3. PASEK
   ========================================================================== */
.wlh {
	position: sticky;
	top: 0;
	z-index: var(--wlh-z);
	color: var(--wlh-ink);
	font-family: var(--wlh-font);
	font-size: var(--wlh-fs);
	line-height: var(--wlh-lh);
}
body.admin-bar .wlh { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
	body.admin-bar .wlh { top: 0; }
}

.wlh__bar {
	background: var(--wlh-surface);
	border-bottom: 1px solid transparent;
	transition: border-color var(--wlh-dur) var(--wlh-ease), box-shadow var(--wlh-dur) var(--wlh-ease);
}
.wlh.is-scrolled .wlh__bar { border-bottom-color: var(--wlh-border); box-shadow: var(--wlh-shadow-1); }

.wlh__inner {
	display: flex;
	align-items: center;
	gap: var(--wlh-s3);
	width: 100%;
	max-width: var(--wlh-container);
	height: var(--wlh-h);
	margin-inline: auto;
	padding-inline: var(--wlh-gutter);
}

/* ==========================================================================
   4. LOGO. Wektor z pliku źródłowego, na telefonie po przewinięciu zostaje znak W.
   ========================================================================== */
.wlh__logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	height: var(--wlh-touch);
	color: var(--wlh-ink);
	border-radius: var(--wlh-radius);
}
.wlh .wlh__logo:focus-visible,
.wlh-sheet .wlh__logo:focus-visible { outline: none; box-shadow: var(--wlh-ring); }
/* Astra koloruje a:hover kolorem marki. Logo zawsze w barwach znaku. */
.wlh .wlh__logo:hover,
.wlh .wlh__logo:focus,
.wlh .wlh__logo:visited,
.wlh-sheet .wlh__logo:hover,
.wlh-sheet .wlh__logo:focus,
.wlh-sheet .wlh__logo:visited { color: var(--wlh-ink); }

.wlh__logo-svg {
	display: block;
	width: auto;
	height: var(--wlh-logo-h);
	overflow: visible;
}
.wlh__logo-slash { fill: var(--wlh-accent); }

.wlh__logo-mark,
.wlh__logo-word {
	transform-box: fill-box;
	transform-origin: left center;
	transition: opacity var(--wlh-dur) var(--wlh-ease-out), transform var(--wlh-dur) var(--wlh-ease-out);
}

@media (max-width: 767px) {
	.wlh.is-scrolled .wlh__bar .wlh__logo-word { opacity: 0; transform: translateX(-160px); }
	.wlh.is-scrolled .wlh__bar .wlh__logo-mark { transform: scale(1.08); }
	/* Po zwinięciu link logo zajmuje tylko szerokość znaku, napis gaśnie poza układem */
	.wlh.is-scrolled .wlh__bar .wlh__logo { width: calc(var(--wlh-logo-h) * 2.4); }
}

/* ==========================================================================
   5. NAWIGACJA (od 1280 px)
   ========================================================================== */
.wlh__nav { display: none; }

@media (min-width: 1280px) {
	.wlh__nav { display: block; margin-inline: auto; }
	.wlh__list { display: flex; align-items: center; gap: var(--wlh-s3); }
}

.wlh__item { position: relative; }

.wlh__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--wlh-s1);
	min-height: var(--wlh-touch);
	padding: var(--wlh-s2) var(--wlh-s3);
	border-radius: var(--wlh-radius);
	color: var(--wlh-ink);
	font-size: var(--wlh-fs);
	font-weight: var(--wlh-fw-medium);
	white-space: nowrap;
	transition: color var(--wlh-dur-fast) var(--wlh-ease);
}
.wlh .wlh__link:hover,
.wlh .wlh__link.is-current,
.wlh .wlh__drop[open] > .wlh__link { color: var(--wlh-ink); }
.wlh .wlh__link:visited { color: var(--wlh-ink); }
.wlh__link:focus-visible { outline: none; box-shadow: var(--wlh-ring); }

/* Sygnatura: złota belka ścięta pod kątem 60 stopni */
.wlh__link::after {
	content: "";
	position: absolute;
	left: var(--wlh-s3);
	right: var(--wlh-s3);
	bottom: var(--wlh-s1);
	height: var(--wlh-bar-h);
	background: var(--wlh-accent);
	transform: skewX(var(--wlh-slant)) scaleX(0);
	transform-origin: left center;
	transition: transform var(--wlh-dur) var(--wlh-ease-out);
}
.wlh__link:hover::after,
.wlh__link.is-current::after { transform: skewX(var(--wlh-slant)) scaleX(1); }

.wlh__link .wlh__icon { width: var(--wlh-icon-sm); height: var(--wlh-icon-sm); transition: transform var(--wlh-dur-fast) var(--wlh-ease); }
.wlh__drop[open] > .wlh__link .wlh__icon { transform: rotate(180deg); }

/* Podmenu */
.wlh__drop-list {
	position: absolute;
	top: calc(100% + var(--wlh-s2));
	left: 0;
	display: flex;
	flex-direction: column;
	min-width: var(--wlh-drop-w);
	padding: var(--wlh-s2);
	background: var(--wlh-surface);
	border: 1px solid var(--wlh-border);
	border-radius: var(--wlh-radius-lg);
	box-shadow: var(--wlh-shadow-3);
	opacity: 1;
	transform: none;
	transition: opacity var(--wlh-dur-fast) var(--wlh-ease), transform var(--wlh-dur-fast) var(--wlh-ease-out);
}
@starting-style {
	.wlh__drop[open] .wlh__drop-list { opacity: 0; transform: translateY(-4px); }
}
.wlh .wlh__drop-link {
	display: flex;
	align-items: center;
	min-height: var(--wlh-touch);
	padding: var(--wlh-s2) var(--wlh-s3);
	border-radius: var(--wlh-radius);
	color: var(--wlh-ink);
	font-size: var(--wlh-fs-sm);
	font-weight: var(--wlh-fw-medium);
	transition: background-color var(--wlh-dur-fast) var(--wlh-ease), color var(--wlh-dur-fast) var(--wlh-ease);
}
.wlh .wlh__drop-link:hover { background: var(--wlh-surface-alt); color: var(--wlh-ink); }
.wlh .wlh__drop-link[aria-current="page"] { color: var(--wlh-accent); }
.wlh__drop-parent { margin-bottom: var(--wlh-s1); padding-bottom: var(--wlh-s1); border-bottom: 1px solid var(--wlh-border); }
.wlh .wlh__drop-parent .wlh__drop-link { font-weight: var(--wlh-fw-semibold); }
.wlh__drop-link:focus-visible { outline: none; box-shadow: var(--wlh-ring); }

/* ==========================================================================
   6. AKCJE: logowanie, CTA, konto, przycisk menu
   ========================================================================== */
.wlh__actions {
	display: flex;
	align-items: center;
	gap: var(--wlh-s2);
	margin-left: auto;
}

.wlh__login { display: none; }
@media (min-width: 1280px) {
	.wlh .wlh__login { display: inline-flex; }
	.wlh__actions { margin-left: 0; }
	.wlh .wlh__cta { min-height: var(--wlh-cta-lg); padding-inline: var(--wlh-s6); font-size: var(--wlh-fs); }
}

/* CTA: na telefonie pojawia się w pasku po przewinięciu, gdy logo zwinie się do znaku. Od 768 px zawsze. */
.wlh .wlh__cta { display: none; }
.wlh__cta-long { display: none; }
@media (max-width: 767px) {
	.wlh.is-scrolled .wlh__cta { display: inline-flex; min-height: var(--wlh-cta-sm); padding-inline: var(--wlh-s4); animation: wlh-cta-in var(--wlh-dur) var(--wlh-ease-out) both; }
}
@media (min-width: 768px) {
	.wlh .wlh__cta { display: inline-flex; }
}
@keyframes wlh-cta-in {
	from { opacity: 0; transform: translateX(8px); }
	to { opacity: 1; transform: none; }
}
@media (min-width: 768px) {
	.wlh__cta-short { display: none; }
	.wlh__cta-long { display: inline; }
}

.wlh__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wlh-touch);
	height: var(--wlh-touch);
	border-radius: var(--wlh-radius);
	color: var(--wlh-ink);
	transition: background-color var(--wlh-dur-fast) var(--wlh-ease);
}
.wlh .wlh__burger:hover,
.wlh-sheet .wlh__burger:hover { background: var(--wlh-surface-alt); }
.wlh .wlh__burger:focus-visible,
.wlh-sheet .wlh__burger:focus-visible { outline: none; box-shadow: var(--wlh-ring); }
@media (min-width: 1280px) {
	.wlh .wlh__burger { display: none; }
}

/* Konto zalogowanego (od 1280 px, niżej w menu mobilnym) */
.wlh-account { position: relative; display: none; }
@media (min-width: 1280px) {
	.wlh-account { display: block; }
}

.wlh-account__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--wlh-s1);
	min-height: var(--wlh-touch);
	padding: var(--wlh-s1);
	border-radius: var(--wlh-radius);
	color: var(--wlh-muted);
	transition: background-color var(--wlh-dur-fast) var(--wlh-ease), color var(--wlh-dur-fast) var(--wlh-ease);
}
.wlh-account__toggle:hover,
.wlh-account[open] .wlh-account__toggle { background: var(--wlh-surface-alt); color: var(--wlh-ink); }
.wlh-account__toggle:focus-visible { outline: none; box-shadow: var(--wlh-ring); }
.wlh-account__toggle .wlh__icon { width: var(--wlh-icon-sm); height: var(--wlh-icon-sm); transition: transform var(--wlh-dur-fast) var(--wlh-ease); }
.wlh-account[open] .wlh-account__toggle .wlh__icon { transform: rotate(180deg); }

.wlh-account__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--wlh-avatar);
	height: var(--wlh-avatar);
	border-radius: var(--wlh-radius-pill);
	background: var(--wlh-ink);
	color: var(--wlh-surface);
	font-size: var(--wlh-fs-xs);
	font-weight: var(--wlh-fw-semibold);
}

.wlh-account__panel {
	position: absolute;
	top: calc(100% + var(--wlh-s2));
	right: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wlh-s1);
	width: var(--wlh-panel-w);
	padding: var(--wlh-s2);
	background: var(--wlh-surface);
	border: 1px solid var(--wlh-border);
	border-radius: var(--wlh-radius-lg);
	box-shadow: var(--wlh-shadow-3);
	opacity: 1;
	transform: none;
	transition: opacity var(--wlh-dur-fast) var(--wlh-ease), transform var(--wlh-dur-fast) var(--wlh-ease-out);
}
@starting-style {
	.wlh-account[open] .wlh-account__panel { opacity: 0; transform: translateY(-4px); }
}

.wlh-account__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--wlh-s2) var(--wlh-s3) var(--wlh-s3);
	border-bottom: 1px solid var(--wlh-border);
	margin-bottom: var(--wlh-s1);
}
.wlh-account__name {
	font-variant-ligatures: no-common-ligatures no-discretionary-ligatures;
	font-feature-settings: "liga" 0, "dlig" 0;
	color: var(--wlh-ink);
	font-size: var(--wlh-fs-sm);
	font-weight: var(--wlh-fw-semibold);
	overflow-wrap: anywhere;
}
.wlh-account__email {
	font-variant-ligatures: no-common-ligatures no-discretionary-ligatures;
	font-feature-settings: "liga" 0, "dlig" 0;
	color: var(--wlh-muted);
	font-size: var(--wlh-fs-xs);
	overflow-wrap: anywhere;
}

.wlh-account__list { display: flex; flex-direction: column; gap: 2px; }

.wlh .wlh-account__link,
.wlh-sheet .wlh-account__link {
	display: flex;
	align-items: center;
	gap: var(--wlh-s3);
	min-height: var(--wlh-touch);
	padding: var(--wlh-s2) var(--wlh-s3);
	border-radius: var(--wlh-radius);
	color: var(--wlh-ink);
	font-size: var(--wlh-fs-sm);
	font-weight: var(--wlh-fw-medium);
	transition: background-color var(--wlh-dur-fast) var(--wlh-ease), color var(--wlh-dur-fast) var(--wlh-ease);
}
.wlh .wlh-account__link .wlh__icon,
.wlh-sheet .wlh-account__link .wlh__icon { width: var(--wlh-icon-md); height: var(--wlh-icon-md); color: var(--wlh-muted); transition: color var(--wlh-dur-fast) var(--wlh-ease); }
.wlh .wlh-account__link:hover,
.wlh-sheet .wlh-account__link:hover { background: var(--wlh-surface-alt); color: var(--wlh-ink); }
.wlh .wlh-account__link:hover .wlh__icon,
.wlh-sheet .wlh-account__link:hover .wlh__icon { color: var(--wlh-accent); }
.wlh-account__link:focus-visible { outline: none; box-shadow: var(--wlh-ring); }

.wlh .wlh-account__link--logout { border-top: 1px solid var(--wlh-border); border-radius: 0 0 var(--wlh-radius) var(--wlh-radius); margin-top: var(--wlh-s1); }
.wlh .wlh-account__link--logout:hover,
.wlh-sheet .wlh-account__link--logout:hover { color: var(--wlh-danger); }
.wlh .wlh-account__link--logout:hover .wlh__icon,
.wlh-sheet .wlh-account__link--logout:hover .wlh__icon { color: var(--wlh-danger); }

/* ==========================================================================
   7. MENU MOBILNE (popover w warstwie wierzchniej, działa także bez JS)
   ========================================================================== */
.wlh-sheet {
	position: fixed;
	inset: 0;
	z-index: var(--ft-z-modal, 9999);
	width: 100%;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--wlh-surface);
	color: var(--wlh-ink);
	font-family: var(--wlh-font);
	font-size: var(--wlh-fs);
	line-height: var(--wlh-lh);
	opacity: 0;
	transform: translateY(-8px);
	transition:
		opacity var(--wlh-dur) var(--wlh-ease-out),
		transform var(--wlh-dur) var(--wlh-ease-out),
		overlay var(--wlh-dur) allow-discrete,
		display var(--wlh-dur) allow-discrete;
}
.wlh-sheet:popover-open {
	display: flex;
	flex-direction: column;
	opacity: 1;
	transform: none;
}
@starting-style {
	.wlh-sheet:popover-open { opacity: 0; transform: translateY(-8px); }
}
.wlh-sheet::backdrop { background: transparent; }

/* Przeglądarki bez popover: arkusz ukryty, skrypt przełącza klasę is-open */
@supports not selector(:popover-open) {
	.wlh-sheet { display: none; }
	.wlh-sheet.is-open { display: flex; flex-direction: column; opacity: 1; transform: none; }
}

@media (min-width: 1280px) {
	.wlh-sheet:popover-open,
	.wlh-sheet.is-open { display: none; }
}

html:has(.wlh-sheet:popover-open),
html.wlh-lock { overflow: hidden; }

.wlh-sheet__top {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wlh-s4);
	height: var(--wlh-h);
	padding-inline: var(--wlh-gutter);
	background: var(--wlh-surface);
	border-bottom: 1px solid var(--wlh-border);
}

.wlh-sheet__body {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wlh-s6);
	padding: var(--wlh-s4) var(--wlh-gutter) calc(var(--wlh-s6) + env(safe-area-inset-bottom, 0px));
}

.wlh-sheet__item { border-bottom: 1px solid var(--wlh-border); }

.wlh-sheet .wlh-sheet__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wlh-s4);
	min-height: var(--wlh-row-h);
	padding-block: var(--wlh-s3);
	color: var(--wlh-ink);
	font-size: var(--wlh-fs-big);
	font-weight: var(--wlh-fw-semibold);
	letter-spacing: var(--ft-track-tight, -0.025em);
	transition: color var(--wlh-dur-fast) var(--wlh-ease);
}
.wlh-sheet__link .wlh__icon { width: var(--wlh-icon-md); height: var(--wlh-icon-md); color: var(--wlh-muted); transition: transform var(--wlh-dur-fast) var(--wlh-ease), color var(--wlh-dur-fast) var(--wlh-ease); }
.wlh-sheet .wlh-sheet__link:hover,
.wlh-sheet .wlh-sheet__link.is-current { color: var(--wlh-accent); }
.wlh-sheet__link:hover .wlh__icon,
.wlh-sheet__link.is-current .wlh__icon { color: var(--wlh-accent); transform: translateX(3px); }
.wlh-sheet__link:focus-visible,
.wlh-sheet__sublink:focus-visible { outline: none; box-shadow: var(--wlh-ring); }

.wlh-sheet__sublist { display: flex; flex-direction: column; padding-bottom: var(--wlh-s3); }
.wlh-sheet .wlh-sheet__sublink {
	display: flex;
	align-items: center;
	min-height: var(--wlh-touch);
	padding-left: var(--wlh-s4);
	border-left: 1px solid var(--wlh-border);
	color: var(--wlh-muted);
	font-size: var(--wlh-fs);
	font-weight: var(--wlh-fw-medium);
	transition: color var(--wlh-dur-fast) var(--wlh-ease), border-color var(--wlh-dur-fast) var(--wlh-ease);
}
.wlh-sheet .wlh-sheet__sublink:hover,
.wlh-sheet .wlh-sheet__sublink.is-current { color: var(--wlh-ink); border-left-color: var(--wlh-accent); }

.wlh-sheet__account { display: flex; flex-direction: column; gap: var(--wlh-s3); }

.wlh-sheet__who {
	display: flex;
	align-items: center;
	gap: var(--wlh-s3);
	padding: var(--wlh-s3);
	background: var(--wlh-surface-alt);
	border-radius: var(--wlh-radius);
}
.wlh-sheet__who-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wlh-sheet .wlh-account__list { margin-bottom: var(--wlh-s2); }

.wlh-sheet__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wlh-s2);
	color: var(--wlh-muted);
	font-size: var(--wlh-fs-xs);
	text-align: center;
}

/* Kolejne pozycje wchodzą z niewielkim opóźnieniem */
@keyframes wlh-item-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
.wlh-sheet:popover-open .wlh-sheet__item,
.wlh-sheet:popover-open .wlh-sheet__account {
	animation: wlh-item-in var(--wlh-dur) var(--wlh-ease-out) both;
}
.wlh-sheet:popover-open .wlh-sheet__item:nth-child(2) { animation-delay: 40ms; }
.wlh-sheet:popover-open .wlh-sheet__item:nth-child(3) { animation-delay: 80ms; }
.wlh-sheet:popover-open .wlh-sheet__item:nth-child(4) { animation-delay: 120ms; }
.wlh-sheet:popover-open .wlh-sheet__item:nth-child(5) { animation-delay: 160ms; }
.wlh-sheet:popover-open .wlh-sheet__item:nth-child(n+6) { animation-delay: 200ms; }
.wlh-sheet:popover-open .wlh-sheet__account { animation-delay: 160ms; }

/* ==========================================================================
   8. OGRANICZENIE RUCHU
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.wlh *,
	.wlh-sheet,
	.wlh-sheet * {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0.01ms !important;
	}
	.wlh.is-scrolled .wlh__bar .wlh__logo-word { transform: none; }
	.wlh.is-scrolled .wlh__bar .wlh__logo-mark { transform: none; }
}