/*
 * CILI: the skeleton cards of Explore's grid while Utillz loads it (the owner's request of 2026-11-07, ADR-0023's note of that
 * day, ADR-0018's note on D5; WEB-840 to WEB-846). assets/js/skeleton.js builds them when Utillz's AJAX read starts
 * (a filter, a numbered page, "Load more", the infinite scroll) and removes them when it ends, whatever the outcome; this
 * sheet draws them. A page printed by the server has none: its cards arrive with the page.
 *
 * A skeleton card has the card's own layout (layout-cards.css): the artist's round avatar with two lines, the image in a
 * ratio, the title, the row of two round buttons. The blocks are the interface's two grays (`fill`, then `divider`, in either
 * mode) and pulse slowly between them, only under `prefers-reduced-motion: no-preference`; with "reduce motion" they are
 * still. The grid follows the real grid: the columns the page printed (`--lcr-skeleton-columns`), the same gaps, one column
 * on a phone (`web.columns.phone`) with its first three cards. Nothing here is text, a link or focusable, and the script
 * marks the grid `aria-hidden` and its container `aria-busy`.
 *
 * Every rule starts with `html body`; every value is a token.
 */

@keyframes lcr-skeleton-pulse {
	from {
		background-color: var(--lcr-color-fill);
	}
	to {
		background-color: var(--lcr-color-divider);
	}
}

/* The grid: the columns of the list it stands in, the gaps of the cards' grids. */
html body .lcr-skeleton-grid {
	display: grid;
	grid-template-columns: repeat(var(--lcr-skeleton-columns, var(--lcr-web-columns-desktop)), minmax(0, 1fr));
	column-gap: var(--lcr-web-grid-gap-desktop);
	row-gap: var(--lcr-space-24);
	margin: 0;
	padding: 0;
	pointer-events: none;
	user-select: none;
}

/* While a filter or a page is read, the list it replaces gives way and the list's height stays (no jump of the page). */
html body .lcr-skeleton-replacing {
	min-height: var(--lcr-skeleton-height, 0);
}

html body .lcr-skeleton-replacing > :not(.lcr-skeleton-grid) {
	display: none;
}

/* The card: a grid of one column, as the real card. */
html body .lcr-skeleton-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--lcr-space-12);
	min-width: 0;
}

html body .lcr-skeleton-block {
	display: block;
	background-color: var(--lcr-color-fill);
}

html body .lcr-skeleton-artist {
	display: flex;
	align-items: center;
	gap: var(--lcr-space-10);
}

html body .lcr-skeleton-avatar {
	flex: 0 0 var(--lcr-size-avatar-card);
	width: var(--lcr-size-avatar-card);
	height: var(--lcr-size-avatar-card);
	border-radius: var(--lcr-radius-pill);
}

html body .lcr-skeleton-names {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--lcr-space-6);
	min-width: 0;
}

html body .lcr-skeleton-line {
	height: var(--lcr-space-12);
	border-radius: var(--lcr-radius-picture);
}

html body .lcr-skeleton-line--name {
	width: 40%;
	height: var(--lcr-space-14);
}

html body .lcr-skeleton-line--type {
	width: 25%;
}

html body .lcr-skeleton-line--title {
	width: 55%;
	height: var(--lcr-space-20);
}

/* The image keeps the ratios real artworks have, so the grid has the uneven rhythm of the real one. */
html body .lcr-skeleton-image {
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--lcr-radius-tile);
}

html body .lcr-skeleton-card:nth-child(3n + 2) .lcr-skeleton-image {
	aspect-ratio: 1;
}

html body .lcr-skeleton-card:nth-child(3n) .lcr-skeleton-image {
	aspect-ratio: 5 / 4;
}

html body .lcr-skeleton-buttons {
	display: flex;
	gap: var(--lcr-space-10);
}

html body .lcr-skeleton-button {
	width: var(--lcr-size-control);
	height: var(--lcr-size-control);
	border-radius: var(--lcr-radius-pill);
}

@media (prefers-reduced-motion: no-preference) {

	html body .lcr-skeleton-block {
		animation: lcr-skeleton-pulse calc(3 * var(--lcr-motion-duration-long)) var(--lcr-motion-easing-standard) infinite alternate;
	}
}

@media (max-width: 1199.98px) {

	html body .lcr-skeleton-grid {
		column-gap: var(--lcr-web-grid-gap-phone);
	}
}

/* On a phone every list is one card per row (web.columns.phone); three fill the screen. */
@media (max-width: 767.98px) {

	html body .lcr-skeleton-grid {
		grid-template-columns: repeat(var(--lcr-web-columns-phone), minmax(0, 1fr));
		row-gap: var(--lcr-space-32);
	}

	html body .lcr-skeleton-card:nth-child(n + 4) {
		display: none;
	}
}