/*! @egenverk/design web part chrome 1.9.0+web-0.1 · generated by web/build.mjs from web/tokens, web/registry and web/src. Do not edit. */
/* Chrome, on demand (1.7.0): scroll progress, loading bar, skeletons. Needs 46-chrome-core.css (bar rules, egv-fade-pulse) before it. */
/* ---------- Scroll progress: scroll-driven, compositor only; hidden where unsupported and under reduce ---------- */
.egv-scroll-progress { display: none; }
@keyframes egv-scroll-progress { from { transform: translateX(-100%); } to { transform: none; } }
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.egv-scroll-progress { display: block; }
		.egv-scroll-progress > i { animation: egv-scroll-progress linear both; animation-timeline: scroll(root block); }
	}
}

/* ---------- Loading bar: determinate (--value 0…1 with aria-valuenow) or indeterminate ---------- */
.egv-progress { position: relative; block-size: var(--egv-chrome-h); overflow: hidden; background: var(--egv-chrome-line); border-radius: 1px; }
.egv-progress > i { transform: translateX(calc((var(--value, 0) - 1) * 100%)); }
.egv-progress[data-indeterminate] > i { inline-size: 32%; transform: translateX(-100%); clip-path: polygon(var(--egv-chrome-h) 0, 100% 0, calc(100% - var(--egv-chrome-h) / 2) 100%, calc(var(--egv-chrome-h) / 2) 100%); }
@keyframes egv-progress-sweep { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
@media (prefers-reduced-motion: no-preference) {
	.egv-progress > i { transition: transform var(--egv-d3) var(--egv-ease); }
	.egv-progress[data-indeterminate] > i { animation: egv-progress-sweep var(--egv-sweep) var(--egv-ease-in-out) infinite; }
}
@media (prefers-reduced-motion: reduce) {
	.egv-progress[data-indeterminate] > i { inline-size: 100%; transform: none; clip-path: none; animation: egv-fade-pulse var(--egv-sweep) var(--egv-ease-in-out) infinite alternate; }
}

/* ---------- Skeletons: text lines are bars with the brand slant; shimmer after 300 ms ----------
   The skeleton reserves the final layout (1lh per line, aspect-ratio for media), so swapping in content is CLS 0.
   <div class="egv-skeleton" aria-busy="true"><span class="sk-line" style="--w:72%"></span>…<span class="egv-sr">Laddar…</span></div> */
.egv-skeleton { display: grid; gap: 0; }
.egv-skeleton .sk-line { display: block; block-size: 1lh; position: relative; overflow: hidden; }
.egv-skeleton .sk-line::before, .egv-skeleton .sk-box::before { content: ""; position: absolute; inset: .3lh auto .3lh 0; inline-size: var(--w, 100%); background: var(--egv-skeleton); clip-path: polygon(.25lh 0, 100% 0, calc(100% - .2lh) 100%, 0 100%); }
.egv-skeleton .sk-box { display: block; position: relative; overflow: hidden; aspect-ratio: var(--ratio, 16 / 9); border-radius: var(--egv-radius); background: var(--egv-skeleton); }
.egv-skeleton .sk-box::before { display: none; }
.egv-skeleton :is(.sk-line, .sk-box)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--egv-skeleton-hi), transparent); transform: translateX(-100%) skewX(-26.565deg); opacity: 0; }
@keyframes egv-shimmer { from { transform: translateX(-100%) skewX(-26.565deg); opacity: 1; } to { transform: translateX(100%) skewX(-26.565deg); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	.egv-skeleton :is(.sk-line, .sk-box)::after { animation: egv-shimmer var(--egv-sweep) var(--egv-ease-in-out) var(--egv-wait) infinite; }
}
@media (prefers-reduced-motion: reduce) {
	.egv-skeleton :is(.sk-line, .sk-box) { animation: egv-fade-pulse var(--egv-sweep) var(--egv-ease-in-out) var(--egv-wait) infinite alternate; }
}