/*
 * KI-Transparenz frontend.
 *
 * Three constraints drive most of this:
 *
 *  - ZERO LAYOUT SHIFT. Adding a badge must not move the image or its container
 *    by a single pixel. See .kit-wrap below.
 *  - The badge must never swallow clicks. A badge intercepting a click on a
 *    linked image is the single most common support ticket in this category.
 *  - The disclosure must survive print, forced colours and CSS minification.
 *    A badge that vanishes in any of those is a compliance failure, not a
 *    cosmetic one, so those rules are defensive on purpose.
 *
 * COLOURS come from custom properties emitted by KIT_Appearance::css_vars().
 * Every var() carries a literal fallback so an aggressive unused-CSS pass that
 * strips the :root block degrades to the default badge rather than to
 * transparent text on a photograph.
 */

/* --------------------------------------------------------------- structure */

/*
 * Preferred host: an element the page already lays out (a <figure>, a card
 * <div>). Adding position:relative to it costs nothing. Used whenever the image
 * is its parent's only child.
 */
.kit-host {
	position: relative;
	isolation: isolate;
}

/*
 * Fallback wrapper, for images that share their parent with other content.
 *
 * An inline-block sits on the parent's text baseline, so the browser reserves
 * descender space beneath it -- about 4px -- which makes the container taller
 * and pushes everything below it down. vertical-align:top removes the baseline
 * relationship; line-height and font-size zero out inherited text metrics.
 * With all three, wrapped and unwrapped geometry are byte-identical.
 */
.kit-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	isolation: isolate;
	vertical-align: top;
	line-height: 0;
	font-size: 0;
}

/*
 * :where() has zero specificity, so the theme always wins. An earlier version
 * used a plain descendant selector plus `height: auto`, which overrode themes
 * that size images deliberately and visibly resized them.
 */
.kit-wrap > :where(img) {
	max-width: 100%;
}

/* ------------------------------------------------------------------- badge */

.kit-badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin: .5em;
	padding: .3em .55em;
	border-radius: 4px;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	/* rem, not px: .kit-wrap sets font-size:0, and rem resolves against the root. */
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-decoration: none;
	pointer-events: none;

	/* Centre positions must not overflow a narrow image and get clipped. */
	max-width: calc(100% - 1em);
	white-space: normal;
	overflow-wrap: anywhere;

	background: var(--kit-bg, rgba(17, 17, 17, .88));
	color: var(--kit-fg, #ffffff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);

	/* Default corner, so an unknown position modifier still lands somewhere. */
	inset-inline-start: 0;
	bottom: 0;
}

/* ---------------------------------------------------------------- position */

.kit-wrap--top-left      .kit-badge,
.kit-host--top-left      .kit-badge { inset-inline-start: 0; inset-inline-end: auto; top: 0; bottom: auto; }
.kit-wrap--top-right     .kit-badge,
.kit-host--top-right     .kit-badge { inset-inline-end: 0; inset-inline-start: auto; top: 0; bottom: auto; }
.kit-wrap--bottom-left   .kit-badge,
.kit-host--bottom-left   .kit-badge { inset-inline-start: 0; inset-inline-end: auto; bottom: 0; top: auto; }
.kit-wrap--bottom-right  .kit-badge,
.kit-host--bottom-right  .kit-badge { inset-inline-end: 0; inset-inline-start: auto; bottom: 0; top: auto; }

.kit-wrap--top-center    .kit-badge,
.kit-host--top-center    .kit-badge,
.kit-wrap--bottom-center .kit-badge,
.kit-host--bottom-center .kit-badge {
	inset-inline-start: 50%;
	inset-inline-end: auto;
	transform: translateX(-50%);
}
.kit-wrap--top-center    .kit-badge,
.kit-host--top-center    .kit-badge { top: 0; bottom: auto; }
.kit-wrap--bottom-center .kit-badge,
.kit-host--bottom-center .kit-badge { bottom: 0; top: auto; }

/*
 * below-image: the badge leaves the photograph entirely and sits on the page
 * background. This is the only position where contrast is exactly knowable
 * rather than worst-case, so it is the most reliable presentation for low
 * vision readers -- and it needs no colour tuning to stay legible.
 */
.kit-wrap--below-image,
.kit-host--below-image { position: relative; }

.kit-wrap--below-image .kit-badge,
.kit-host--below-image .kit-badge {
	position: static;
	transform: none;
	display: inline-flex;
	margin: .35em 0 0;
	max-width: 100%;
	box-shadow: none;
}

/*
 * A figure with a caption is taller than its image, so a bottom-anchored badge
 * would float over the caption text. Anchor to the top instead.
 */
.kit-host--bottom-left:has(figcaption)   .kit-badge,
.kit-host--bottom-center:has(figcaption) .kit-badge,
.kit-host--bottom-right:has(figcaption)  .kit-badge { bottom: auto; top: 0; }

/* -------------------------------------------------------------------- icon */

/*
 * Official EU marks come in two aspect ratios: the plain "AI" disc is 1:1, the
 * worded "AI GENERATED" / "AI MODIFIED" pills are ~5:1. Sizing them the same
 * would squash the pill, so each gets its own box.
 */
.kit-badge .kit-icon {
	flex: 0 0 auto;
	display: block;
}

.kit-icon--ai { width: 15px; height: 15px; }

.kit-icon--ai-generated,
.kit-icon--ai-modified { width: 78px; height: 16px; }

/*
 * Stock is not an AI disclosure, so it is styled to read as a caption rather
 * than as a legal mark -- lighter weight, no icon slot.
 */
.kit-badge--stock {
	font-weight: 500;
	letter-spacing: 0;
}

/* Worded mark carries its own wording, so the badge needs less padding. */
.kit-badge--worded { padding: .35em .5em; }

/* ------------------------------------------------------------------ hiding */

/*
 * ONE visually-hidden utility. PHP decides which parts carry it -- CSS no
 * longer decides visibility, because when both did they could disagree and
 * produce an empty coloured pill that disclosed nothing.
 */
.kit-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------- print and forced colours */

/*
 * Both of these MUST bring the wording back. A printed page or a high-contrast
 * rendering that shows the icon and no text carries no disclosure at all.
 *
 * Selectors are doubled (.kit-badge.kit-badge, 0-2-0) so they outrank theme
 * rules -- and, critically, so they still outrank the coloured .kit-badge rule
 * above. Without the doubling a white-on-white custom badge would print blank.
 */
@media print {
	.kit-badge.kit-badge {
		position: static !important;
		transform: none !important;
		display: inline-flex !important;
		background: none !important;
		color: #000 !important;
		box-shadow: none !important;
		max-width: 100% !important;
	}
	.kit-badge.kit-badge .kit-badge__text.kit-sr-only {
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
	}
	.kit-panel { display: none !important; }
}

@media (forced-colors: active) {
	.kit-badge.kit-badge {
		background: Canvas !important;
		color: CanvasText !important;
		border: 1px solid CanvasText;
		forced-color-adjust: none;
	}
	.kit-badge.kit-badge .kit-badge__text.kit-sr-only {
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
	}
	/* Chromium forces SVG fills to the system palette, collapsing the two-tone
	   mark into a single blob. Text alone is the reliable disclosure here. */
	.kit-badge.kit-badge .kit-icon { display: none !important; }
}

/*
 * Touch devices: nothing here is hover-dependent by design, but a coarse
 * pointer also means a hand covering part of the screen, so never let the icon
 * stand alone on a phone if the badge has room for words.
 */
@media (hover: none) and (pointer: coarse) {
	.kit-badge--iconic:not(.kit-badge--worded) .kit-badge__text.kit-sr-only {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
	}
}

/* ------------------------------------------------------------------ panel */

.kit-panel {
	position: fixed;
	inset-inline-end: 1rem;
	bottom: 1rem;
	z-index: 99990;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.kit-panel__trigger {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .55em .8em;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

.kit-panel__count {
	display: inline-block;
	min-width: 1.5em;
	padding: 0 .35em;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	text-align: center;
}

.kit-panel__dialog {
	position: absolute;
	inset-inline-end: 0;
	bottom: calc(100% + .6rem);
	width: min(24rem, calc(100vw - 2rem));
	max-height: min(28rem, 70vh);
	overflow-y: auto;
	padding: 1rem;
	border-radius: 10px;
	background: #fff;
	color: #111;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}

.kit-panel__dialog[hidden] { display: none; }

.kit-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kit-panel__head h2 { margin: 0; font-size: 15px; }
.kit-panel__close { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; }
.kit-panel__intro { margin: .5rem 0 .75rem; font-size: 13px; }
.kit-panel__list { margin: 0; padding: 0; list-style: none; }

.kit-panel__item {
	display: flex;
	gap: .6rem;
	align-items: center;
	padding: .5rem 0;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

.kit-panel__item img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.kit-panel__meta { display: flex; flex-direction: column; font-size: 12px; min-width: 0; }
.kit-panel__meta span { color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-panel__legal { margin: .75rem 0 0; font-size: 11px; color: #666; }

/* ------------------------------------------------------------ site notice */

.kit-site-notice {
	padding: 1rem;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 13px;
	text-align: center;
	color: inherit;
	opacity: .85;
}

.kit-site-notice p { margin: 0 0 .25rem; }
.kit-site-notice__legal { font-size: 11px; opacity: .8; }