/*
 * CILI: artworks flagged for artistic nudity (ADR-0058 D5; cili/artwork-nudity.php, assets/js/nudity.js).
 *
 * LCR Core decides the view; the server prints `lcr-sensitive` on the image's block (the card, the cover of the artwork's page
 * and of the quick view) and `lcr-sensitive-page` on the artwork page's body, for every view but `shown`. This sheet only blurs
 * what is under those classes and lays the "Sensitive content" label over it:
 * - the images, the slider's tiles, the poster and the video, blurred by a space token (as layout-promote.css blurs its
 *   frame) and scaled a little so the blur's soft edge stays inside the rounded frame; a blurred video takes no pointer;
 * - the label: the overlay token over the image, the eye-off icon and "Sensitive content" in the stage's white, centred. On a
 *   card it lets the pointer through, so the card's own link opens the artwork; on the page it holds the way on;
 * - on the artwork's page, "More photos" and the gallery window blur too, and their tiles take no pointer.
 * Grayscale only: the colours are the overlay, the stage's white and the page's own ground and ink for "Show".
 */

html body .lcr-sensitive {
	position: relative;
	overflow: hidden;
}

/* "More photos" prints each tile as a link with the photo as its background (Utillz's gallery module), and the gallery
   window holds the photo in its image block: both are blurred whole, not only an `img` inside them. */
html body .lcr-sensitive img,
html body .lcr-sensitive video,
html body .lcr-sensitive .ulz--img,
html body .lcr-sensitive .ulz-listing-gallery-item,
html body.lcr-sensitive-page .ulz-mod-listing-gallery img,
html body.lcr-sensitive-page .ulz-mod-listing-gallery .ulz--image,
html body.lcr-sensitive-page .ulz-modal-gallery .ulz-modal-image {
	filter: blur(var(--lcr-space-32));
	transform: scale(1.1);
}

html body .lcr-sensitive video,
html body.lcr-sensitive-page .ulz-mod-listing-gallery a,
html body.lcr-sensitive-page .ulz-modal-gallery .ulz-modal-image {
	pointer-events: none;
}

html body .lcr-sensitive-label {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--lcr-space-8);
	padding: var(--lcr-space-16);
	background: var(--lcr-color-overlay);
	color: var(--lcr-color-on-stage);
	font-size: var(--lcr-type-label-font-size);
	font-weight: var(--lcr-type-label-font-weight);
	line-height: var(--lcr-type-label-line-height);
	text-align: center;
	pointer-events: none;
}

html body .lcr-sensitive-label .lcr-icon {
	width: var(--lcr-size-icon);
	height: var(--lcr-size-icon);
}

html body .lcr-sensitive-label--page {
	pointer-events: auto;
}

html body .lcr-sensitive-label--page .lcr-sensitive-note {
	font-weight: normal;
}

html body .lcr-sensitive-label--page .lcr-sensitive-link {
	color: inherit;
	text-decoration: underline;
}

html body .lcr-sensitive-label--page .lcr-sensitive-show {
	min-height: var(--lcr-size-control);
	padding: var(--lcr-space-8) var(--lcr-space-20);
	border-radius: var(--lcr-radius-pill);
	background: var(--lcr-color-background);
	color: var(--lcr-color-ink);
}

/* The account's "Sensitive content" and Submit Art's checkbox. */

html body .lcr-content-filter {
	margin-top: var(--lcr-space-32);
}

html body .lcr-content-filter-option,
html body .lcr-nudity-option {
	display: flex;
	align-items: flex-start;
	gap: var(--lcr-space-8);
	margin-top: var(--lcr-space-12);
}

html body .lcr-content-filter-note,
html body .lcr-content-filter-status,
html body .lcr-nudity-help,
html body .lcr-nudity-status {
	color: var(--lcr-color-muted);
}