/*
 * CILI: the clap control of an artwork's card and page, the comment's, the count that opens the list and the list of who
 * applauded (ADR-0043 D8, D9 and its amendment of 2026-10-23; ADR-0047 O-8; templates/explore/listing/lcr-card-buttons.php,
 * templates/single/cover/top.php, cili/utillz/applause.php, cili/utillz/comments.php, assets/js/applause.js,
 * assets/js/comments.js, assets/js/clap-toggle.js; WEB-654, WEB-760 to WEB-772).
 *
 * After layout-cards.css and layout-artwork.css, whose rules for the card's applause link and the page's action links it
 * adjusts for a real button. Grayscale tokens only (colour comes from artworks; ADR-0045 redefines the tokens for the dark
 * mode), `html body` first, the keyboard ring is the frame's, targets 44 pixels (the comment's, in layout-comments.css, 34).
 *
 * The clap is Facebook's Like (the owner's decision of 2026-10-23): one applause per member, the round button with the hands
 * and, beside it, the total of people who applauded. Nothing else: no "n/5", no "x", no long press.
 * - Rest: the round button with the outline hands (applause-button's shapes, D9); applauded, it stays ink with the filled hands
 *   in white, hovered or not. A guest's control looks the same; a click goes to the account page.
 * - The word: only a device that can hover (`(hover: hover) and (pointer: fine)`) shows it. Hovered or with the keyboard in it
 *   (`:focus-visible`) the button widens smoothly into a pill and says "Applause" beside the hands, and shrinks back when the
 *   pointer or the focus leaves; reduced motion makes the change instant. A touch screen never shows the word. The word is
 *   visible text only (aria-hidden): the control's accessible name, "Applause", is its own.
 * - The clap: applauding gives the button the class `lcr-clap--clapping` for 750 ms (assets/js/clap-toggle.js): three quick
 *   beats of the hands, each squeezing and springing back, and five dots that spread out on the last one, LeonaCreo's own
 *   animation after applause-button's. A withdrawal removes the class at once. Only under `prefers-reduced-motion:
 *   no-preference`; otherwise the change is instant and nothing moves.
 */

/* ------------------------------------------------------------------------------------------------ the clap */

html body .lcr-clap--member,
html body .lcr-clap-count,
html body .lcr-share--page {
	padding: 0;
	border: 0;
	box-shadow: none;
	background-color: transparent;
	color: var(--lcr-color-ink);
	cursor: pointer;
	font-family: var(--lcr-font-family-sans);
	-webkit-appearance: none;
	appearance: none;
}

html body .lcr-clap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-decoration: none;
	-webkit-user-select: none; /* two quick clicks (applaud, withdraw) must not select the word beside the hands */
	user-select: none;
}

html body .lcr-clap-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

html body .lcr-clap-icon .lcr-clap-filled,
html body .lcr-clap--on .lcr-clap-icon .lcr-clap-outline {
	display: none;
}

html body .lcr-clap--on .lcr-clap-icon .lcr-clap-filled {
	display: inline;
}

/* The applauded control is ink with white hands and "Applause": hovered or not. */
html body .lcr-clap.lcr-clap--on,
html body .lcr-clap.lcr-clap--on:hover {
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
}

/* The word "Applause": no width at rest, its own width while a device that can hover has the pointer on the control or the
   keyboard in it. */
html body .lcr-clap-label {
	display: inline-block;
	max-width: 0;
	margin-left: 0;
	overflow: hidden;
	opacity: 0;
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-type-label-font-weight);
	line-height: var(--lcr-type-label-line-height);
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {

	html body :is(.lcr-clap, a.lcr-card-applause):is(:hover, :focus-visible) .lcr-clap-label {
		max-width: 8em;
		margin-left: var(--lcr-space-6);
		opacity: 1;
	}
}

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

	html body .lcr-clap-label {
		transition:
			max-width var(--lcr-motion-duration-medium) var(--lcr-motion-easing-standard),
			margin-left var(--lcr-motion-duration-medium) var(--lcr-motion-easing-standard),
			opacity var(--lcr-motion-duration-short) var(--lcr-motion-easing-standard);
	}
}

/* Five dots that spread out once, on the last beat of the clap. */
html body .lcr-clap-dots {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	pointer-events: none;
}

html body .lcr-clap-dots > i {
	position: absolute;
	top: calc(-0.5 * var(--lcr-space-4));
	left: calc(-0.5 * var(--lcr-space-4));
	width: var(--lcr-space-4);
	height: var(--lcr-space-4);
	border-radius: var(--lcr-radius-pill);
	background-color: currentColor;
	opacity: 0;
}

html body .lcr-clap-dots > i:nth-child(1) { --lcr-clap-angle: 0deg; }
html body .lcr-clap-dots > i:nth-child(2) { --lcr-clap-angle: 72deg; }
html body .lcr-clap-dots > i:nth-child(3) { --lcr-clap-angle: 144deg; }
html body .lcr-clap-dots > i:nth-child(4) { --lcr-clap-angle: 216deg; }
html body .lcr-clap-dots > i:nth-child(5) { --lcr-clap-angle: 288deg; }

/* One beat: the hands squeeze together and spring back. Three of them are the clap. */
@keyframes lcr-clap-beat {
	0% { transform: scale(1); }
	35% { transform: scale(0.82); }
	70% { transform: scale(1.12); }
	100% { transform: scale(1); }
}

@keyframes lcr-clap-dot {
	0% { opacity: 1; transform: rotate(var(--lcr-clap-angle)) translateY(calc(-1 * var(--lcr-space-12))) scale(1); }
	100% { opacity: 0; transform: rotate(var(--lcr-clap-angle)) translateY(calc(-1 * var(--lcr-space-24))) scale(0.4); }
}

/* Three beats of 250 ms, 750 ms in all (assets/js/clap-toggle.js removes the class at the same time); the dots start with the
   third beat. The hands end as the applauded look: nothing is left in a transform. */
@media (prefers-reduced-motion: no-preference) {

	html body .lcr-clap--clapping .lcr-clap-icon > .lcr-icon {
		animation: lcr-clap-beat 250ms var(--lcr-motion-easing-standard) 3;
	}

	html body .lcr-clap--clapping .lcr-clap-dots > i {
		animation: lcr-clap-dot 250ms var(--lcr-motion-easing-standard) 500ms 1;
	}
}

html body .lcr-clap-count {
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-type-label-font-weight);
	line-height: var(--lcr-type-label-line-height);
}

/* "Link copied" and the clap's own polite status share one look (layout-cards.css). */
html body .lcr-clap-status {
	bottom: var(--lcr-space-64);
}

/* ------------------------------------------------------------------------------------------------ the card */

/* The clap control in the post's row (layout-cards.css places it): a round button on the gray fill, as the app's, 44 pixels
   with the hands (24) centred; a pill while it says the word on a hover. The guest's link and the old link look the same. */
html body .ulz-listing .lcr-card-overlay :is(.lcr-clap, a.lcr-card-applause) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: var(--lcr-size-icon-button);
	min-width: var(--lcr-size-icon-button);
	padding: 0 calc((var(--lcr-size-icon-button) - var(--lcr-size-icon)) / 2);
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-type-label-font-weight);
	line-height: var(--lcr-type-label-line-height);
}

html body .ulz-listing .lcr-card-overlay .lcr-clap.lcr-clap--on,
html body .ulz-listing .lcr-card-overlay .lcr-clap.lcr-clap--on:hover {
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
}

html body .ulz-listing .lcr-card-overlay :is(.lcr-clap, a.lcr-card-applause) .lcr-icon {
	width: var(--lcr-size-icon);
	height: var(--lcr-size-icon);
}

@media (hover: hover) and (pointer: fine) {

	html body .ulz-listing .lcr-card-overlay :is(.lcr-clap:not(.lcr-clap--on), a.lcr-card-applause):hover {
		background-color: var(--lcr-color-outline);
	}
}

/* ------------------------------------------------------------------------------------------------ the page */

html body .ulz-cover-top .ulz--cell-action .lcr-clap-group {
	display: flex;
	align-items: center;
	gap: var(--lcr-space-4);
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action :is(.lcr-clap--page, .lcr-share--page) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lcr-space-6);
	min-width: var(--lcr-size-control);
	height: var(--lcr-size-control);
	padding: 0 var(--lcr-space-12);
	box-sizing: border-box;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-web-type-label-font-size);
	font-weight: var(--lcr-web-type-label-font-weight);
	text-decoration: none;
}

/* The clap's word has a margin of its own, so no gap adds space for a hidden word; with the hands (20) and a padding of 10 the
   button is round, 40 pixels (44 below 768 and on a device that cannot hover, as every target there). */
html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action .lcr-clap--page {
	gap: 0;
	padding: 0 calc((var(--lcr-size-control) - var(--lcr-space-20)) / 2);
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action :is(.lcr-clap--page:not(.lcr-clap--on), .lcr-share--page):hover {
	background-color: var(--lcr-color-outline);
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action .lcr-clap--page.lcr-clap--on,
html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action .lcr-clap--page.lcr-clap--on:hover {
	background-color: var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
}

html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action .lcr-share--page span {
	display: inline;
}

/* The artwork page's control is 44 pixels on a device that cannot hover too (a tablet's 40 would be a smaller target than the
   card's). */
@media not all and (hover: hover) and (pointer: fine) {

	html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action .lcr-clap--page {
		min-width: var(--lcr-size-icon-button);
		min-height: var(--lcr-size-icon-button);
		height: var(--lcr-size-icon-button);
	}
}

/* The count beside the clap: a number (a button for a member, who opens the list with it). */
html body .ulz-cover-top .ulz--cell-action .lcr-clap-count {
	display: inline-flex;
	align-items: center;
	min-width: var(--lcr-space-24);
	min-height: var(--lcr-size-control);
	padding: 0 var(--lcr-space-4);
	color: var(--lcr-color-ink);
}

html body .ulz-cover-top .ulz--cell-action button.lcr-clap-count:hover .lcr-card-count-value {
	text-decoration: underline;
}

html body .ulz-cover-top .ulz--cell-action .lcr-clap-count.lcr-card-count--empty {
	display: none;
}

html body .ulz-cover-top .ulz--cell-action .lcr-clap--page .lcr-icon,
html body .ulz-cover-top .ulz--cell-action .lcr-share--page .lcr-icon {
	width: var(--lcr-space-20);
	height: var(--lcr-space-20);
}

/* The views, when the owner shows them on the page (templates/single/cover/top.php): small, muted, after Share. */
html body .ulz-cover-top .ulz--cell-action .lcr-page-views .lcr-card-count--views {
	display: inline-flex;
	align-items: center;
	gap: var(--lcr-space-4);
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-meta-font-size);
	line-height: var(--lcr-type-meta-line-height);
}

html body .ulz-cover-top .ulz--cell-action .lcr-page-views .lcr-icon {
	width: var(--lcr-space-16);
	height: var(--lcr-space-16);
}

@media (max-width: 767.98px) {

	/* Share shows its icon alone below 768, as Heilz's did; every target is 44 pixels. */
	html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action .lcr-share--page span {
		display: none;
	}

	html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action :is(.lcr-clap--page, .lcr-share--page),
	html body .ulz-cover-top .ulz--cell-action .lcr-clap-count {
		min-width: var(--lcr-size-icon-button);
		min-height: var(--lcr-size-icon-button);
		height: var(--lcr-size-icon-button);
	}

	html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action .lcr-share--page {
		padding: 0;
	}

	/* The artist's row and the actions: the actions take a row of their own so none is squeezed. */
	html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--inner {
		flex-wrap: wrap;
	}

	html body .ulz-cover.ulz-cover-gallery .ulz-cover-top .ulz--cell-action {
		flex-wrap: wrap;
		flex: 1 1 100%;
		align-items: center;
		justify-content: flex-start;
		min-width: 0;
	}
}

/* ------------------------------------------------------------------------------------------- who applauded */

/* A native dialog in the top layer (showModal(): the focus trap, Escape, focus back to the count), like the promoted
   chip's panel. */
html body dialog.lcr-applauders {
	width: var(--lcr-web-container-auth);
	max-width: calc(100% - 2 * var(--lcr-web-gutter-phone));
	max-height: calc(100% - 2 * var(--lcr-web-gutter-phone));
	padding: 0;
	border: var(--lcr-size-hairline) solid var(--lcr-color-outline);
	border-radius: var(--lcr-radius-panel);
	background-color: var(--lcr-color-background);
	color: var(--lcr-color-body);
}

html body dialog.lcr-applauders::backdrop {
	background-color: var(--lcr-color-scrim);
}

html body dialog.lcr-applauders .lcr-applauders-body {
	display: flex;
	flex-direction: column;
	gap: var(--lcr-space-12);
	padding: var(--lcr-space-24);
}

html body dialog.lcr-applauders .lcr-applauders-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lcr-space-12);
}

html body dialog.lcr-applauders .lcr-applauders-title {
	margin: 0;
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-section-font-size);
	font-weight: var(--lcr-type-section-font-weight);
	line-height: var(--lcr-type-section-line-height);
}

html body dialog.lcr-applauders .lcr-applauders-list {
	display: flex;
	flex-direction: column;
	gap: var(--lcr-space-8);
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

html body dialog.lcr-applauders .lcr-applauders-item {
	display: flex;
	align-items: center;
	gap: var(--lcr-space-12);
	min-height: var(--lcr-size-icon-button);
	margin: 0;
	padding: 0;
}

html body dialog.lcr-applauders .lcr-applauders-avatar {
	flex: none;
	width: var(--lcr-size-avatar-artist);
	height: var(--lcr-size-avatar-artist);
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	object-fit: cover;
}

html body dialog.lcr-applauders .lcr-applauders-name {
	min-width: 0;
	overflow: hidden;
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-body-large-font-size);
	font-weight: var(--lcr-font-weight-semibold);
	line-height: var(--lcr-type-body-large-line-height);
	overflow-wrap: anywhere;
}

/* An applauder who is an artist for the member: the whole row, the picture and the name, is one link to their page, in
   the ink of the name (ADR-0043, note of 2026-10-20); the frame's `:focus-visible` ring marks it for the keyboard. A
   collector's row is the text row above. */
html body dialog.lcr-applauders a.lcr-applauders-link {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: var(--lcr-space-12);
	min-width: 0;
	min-height: var(--lcr-size-icon-button);
	border-radius: var(--lcr-radius-pill);
	color: var(--lcr-color-ink);
	text-decoration: none;
}

html body dialog.lcr-applauders a.lcr-applauders-link:hover .lcr-applauders-name {
	text-decoration: underline;
}

html body dialog.lcr-applauders .lcr-applauders-message {
	margin: 0;
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-body-font-size);
	line-height: var(--lcr-type-body-line-height);
}

html body dialog.lcr-applauders .lcr-applauders-message:empty {
	display: none;
}

html body dialog.lcr-applauders :is(.lcr-applauders-close, .lcr-applauders-action) {
	min-width: var(--lcr-size-icon-button);
	min-height: var(--lcr-size-icon-button);
	padding: 0 var(--lcr-space-20);
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	box-shadow: none;
	color: var(--lcr-color-ink);
	cursor: pointer;
	font-family: var(--lcr-font-family-sans);
	font-weight: var(--lcr-font-weight-semibold);
}

html body dialog.lcr-applauders .lcr-applauders-action[hidden] {
	display: none;
}

html body dialog.lcr-applauders .lcr-applauders-action[aria-disabled="true"] {
	cursor: default;
	opacity: 0.6;
}