/* One disclosure component; never wrap or resize the native image. */
.nxs-ai-image-label {
	display: inline-block;
	box-sizing: border-box;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: 400 11px/1.25 system-ui, sans-serif;
	letter-spacing: .01em;
	text-align: center;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	pointer-events: none;
	vertical-align: middle;
}

/* Set in head, not after paint: labels take no space while JS measures them.
   Without JS (or if it fails), the disclosure remains readable in normal flow. */
.nxs-ai-labels-js .nxs-ai-image-label {
	/* Soften the text itself, not the image or its containing component. */
	color: rgb(255 255 255 / 72%);
	text-shadow: 0 1px 2px rgb(0 0 0 / 75%);
	position: absolute;
	left: 0;
	top: 0;
	right: auto;
	bottom: auto;
	z-index: 2;
	width: max-content;
	max-width: var(--nxs-ai-label-width, 8rem);
	margin: 0;
	visibility: hidden;
}

.nxs-ai-labels-js .nxs-ai-image-label[data-nxs-ai-ready] { visibility: visible; }

@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
	.nxs-ai-labels-js .nxs-ai-image-label {
		color: #fff;
		text-shadow: -1px 0 1px #000, 1px 0 1px #000, 0 -1px 1px #000, 0 1px 1px #000;
	}
}

@media (forced-colors: active) {
	.nxs-ai-image-label,
	.nxs-ai-labels-js .nxs-ai-image-label { background: Canvas; color: CanvasText; text-shadow: none; }
}