/* Patch Pile 0.3.0
   Override the pill via these variables, or pass the theme's own pill class as label_class:
   the visual rules below sit in :where() so any theme class wins. */
.patch-pile {
	--pp-pill-bg: #f3ede7;
	--pp-pill-fg: #333637;
	--pp-pill-border: #333637;
	--pp-shadow: rgba(16, 24, 36, .28);
	position: relative;
	width: 100%;
}

/* Fallback before/without JS (and in the editor preview): a simple wrapping grid */
.patch-pile__items {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
}
.patch-pile__patch {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	width: 180px;
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}
.patch-pile__patch img {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
	filter: drop-shadow(0 2px 2px var(--pp-shadow));
}

:where(.patch-pile__label) {
	background: var(--pp-pill-bg);
	color: var(--pp-pill-fg);
	border: 1.5px solid var(--pp-pill-border);
	border-radius: 999px;
	padding: .375em 1em;
	font: inherit;
	font-size: 1rem;
	line-height: 1.25;
}
.patch-pile__label { white-space: nowrap; }

/* Packed mode (JS active) */
.patch-pile.is-packed .patch-pile__items {
	display: block;
	position: relative;
	min-height: 200px;
}
.patch-pile.is-packed .patch-pile__patch {
	position: absolute;
	display: block;
	border-radius: 40%;
}
.patch-pile.is-packed .patch-pile__patch.is-pending { visibility: hidden; }
.patch-pile.is-packed .patch-pile__patch img {
	height: 100%;
	pointer-events: none;
	transform: rotate(var(--pp-r, 0deg));
	transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), filter .25s;
}
.patch-pile.is-packed .patch-pile__patch.is-new img {
	animation: patch-pile-drop .45s cubic-bezier(.2, 1.3, .4, 1) both;
	animation-delay: var(--pp-d, 0ms);
}
@keyframes patch-pile-drop {
	from { transform: rotate(var(--pp-r, 0deg)) scale(1.15) translateY(-10px); opacity: .2; }
}
.patch-pile.is-packed .patch-pile__label {
	position: absolute;
	left: 50%;
	bottom: 6%;
	transform: translate(-50%, 6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s, transform .15s;
}
.patch-pile.is-packed .patch-pile__patch:hover,
.patch-pile.is-packed .patch-pile__patch:focus-visible,
.patch-pile.is-packed .patch-pile__patch.is-shown { z-index: 5; }
.patch-pile.is-packed .patch-pile__patch:hover img,
.patch-pile.is-packed .patch-pile__patch:focus-visible img,
.patch-pile.is-packed .patch-pile__patch.is-shown img {
	transform: rotate(0deg) scale(1.06);
	filter: drop-shadow(0 8px 10px var(--pp-shadow));
}
.patch-pile.is-packed .patch-pile__patch:hover .patch-pile__label,
.patch-pile.is-packed .patch-pile__patch:focus-visible .patch-pile__label,
.patch-pile.is-packed .patch-pile__patch.is-shown .patch-pile__label {
	opacity: 1;
	transform: translate(-50%, 0);
}
.patch-pile__patch:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.patch-pile__sentinel { height: 1px; }

@media (prefers-reduced-motion: reduce) {
	.patch-pile.is-packed .patch-pile__patch img,
	.patch-pile.is-packed .patch-pile__label { transition: none; }
	.patch-pile.is-packed .patch-pile__patch.is-new img { animation: none; }
}