/* ---------------------------------------------------------------
 * KRISTAL Media Library — shared frontend stylesheet
 *
 * NOTE: the CSS custom properties (--kml-bg, --kml-text, etc.) are
 * NOT defined here. They're emitted by Plugin::print_visual_tokens()
 * inside <style id="kml-visual-tokens"> in the document head, pulling
 * from the Settings → Visual tab. This file provides only the
 * neutral utilities that all widgets share.
 *
 * Per-widget CSS (Phase 2) lives under widgets/{slug}/css/{slug}.css
 * and references the tokens as var(--kml-{token}).
 * ------------------------------------------------------------ */

/* Utility: visually-hidden but accessible to screen readers */
.kml-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Utility: truncate to a single line with ellipsis */
.kml-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Utility: focus ring shared across all interactive bits */
.kml-focusable:focus-visible {
	outline: 2px solid var(--kml-accent, #E52B51);
	outline-offset: 2px;
}