/*
 * AI Prompt Manager — COSMETIC layer (optional; Settings → Front-end CSS).
 * Borders/tints derive from currentColor, so they adapt to light and dark themes.
 * Same @layer + :where() rules: your theme always wins.
 */
@layer apm {
	:where(.apm-card) {
		padding: var(--apm-space);
		border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
		border-radius: var(--apm-radius);
	}
	:where(.apm-card__lang) {
		border-radius: calc(var(--apm-radius) * 0.75);
		background: color-mix(in srgb, currentColor 88%, transparent);
		color: Canvas;
	}
	:where(.apm-card__thumb) {
		background: color-mix(in srgb, currentColor 8%, transparent);
		color: color-mix(in srgb, currentColor 55%, transparent);
	}
	:where(.apm-card__label) {
		padding: 0.2em 0.55em;
		border-radius: 0.25em;
		background: color-mix(in srgb, currentColor 9%, transparent);
		font-family: var(--apm-mono);
		font-size: 0.7rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}
	:where(.apm-card__title) {
		font-size: 1.05em;
		line-height: 1.3;
	}
	:where(.apm-card__title a) {
		text-decoration: none;
	}
	:where(.apm-card__excerpt) {
		opacity: 0.8;
	}

	:where(.apm-badge) {
		border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
		border-radius: 999px;
	}
	:where(.apm-badge a) {
		color: inherit;
		text-decoration: none;
	}
	:where(.apm-badge--visibility, .apm-badge--quality[data-quality="deprecated"]) {
		background: color-mix(in srgb, currentColor 8%, transparent);
	}

	:where(.apm-prompt, .apm-output) {
		padding: var(--apm-space);
		border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
		border-radius: var(--apm-radius);
		background: color-mix(in srgb, currentColor 3%, transparent);
	}
	:where(.apm-prompt__code) {
		padding: 0.75em;
		border-radius: calc(var(--apm-radius) - 2px);
		background: color-mix(in srgb, currentColor 6%, transparent);
	}
	:where(.apm-var) {
		border-radius: 3px;
		background: color-mix(in srgb, currentColor 12%, transparent);
		padding-inline: 0.15em;
	}

	/* Secondary actions: outline style derived from the text colour. */
	:where(.apm-btn--secondary) {
		padding: 0.45em 0.9em;
		border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
		border-radius: var(--apm-radius);
		background: none;
		color: inherit;
	}

	:where(.apm-fill) {
		padding: var(--apm-space);
		border: 1px dashed color-mix(in srgb, currentColor 20%, transparent);
		border-radius: var(--apm-radius);
	}
	:where(.apm-result img) {
		border-radius: var(--apm-radius);
	}

	:where(.apm-palette) {
		border-radius: calc(var(--apm-radius) * 2);
		box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.3);
	}
	:where(.apm-palette__item) {
		border-radius: var(--apm-radius);
	}
	:where(.apm-palette kbd) {
		padding: 0 0.3em;
		border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
		border-radius: 3px;
	}
}