/**
 * Badge and wrapper.
 *
 * Fixed styling: the badge is always visible, never on hover. The default look is a
 * translucent light pill with a soft shadow for edge contrast against both light and dark
 * images; the burned-in badge in class-stamper.php still draws the hairline border this
 * file used to carry, so the two are not pixel-identical. Styling is a Pro concern; do not
 * make these values themeable here.
 */

.aitransparency-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.aitransparency-wrap > img,
.aitransparency-wrap > picture > img {
	display: block;
	max-width: 100%;
}

/**
 * `height` is a default, not a rule, so it goes in `:where()` — zero specificity, which any
 * theme declaration outranks. A theme that fills a fixed-height box with
 * `height: 100%; object-fit: cover` has to keep winning after we wrap the image, or the
 * picture drops to its own aspect ratio and leaves a strip of the box showing underneath.
 * `display` and `max-width` stay at full weight: those close the inline baseline gap and stop
 * an unconstrained image from overflowing, and a theme overriding them is a bug, not a choice.
 */
:where(.aitransparency-wrap) > img,
:where(.aitransparency-wrap) > picture > img {
	height: auto;
}

/**
 * Layout guard, part one: themes that build a fixed-ratio card absolutely position the
 * image inside a padding-top box, which collapses our inline-block wrapper to zero.
 * These are the layouts we know by name; layout-guard.js generalizes the rest.
 */
.aitransparency-wrap--stretch,
.elementor-post__thumbnail > .aitransparency-wrap,
.has-equal-box-heights .box-image .aitransparency-wrap,
.image-cover .aitransparency-wrap,
.product-gallery-slider .aitransparency-wrap,
.product-thumbnails .aitransparency-wrap {
	position: absolute;
	inset: 0;
	display: block;
}

/**
 * Out of the layout altogether.
 *
 * Set by layout-guard.js when a stretched wrapper measures zero height — a theme that
 * absolutely positions its image inside a container with no height of its own. Our wrapper is
 * the containing block in that case, and any size it takes becomes the image's size, so the
 * only correct move is to stop being a box. The badge stays in the DOM and anchors to whatever
 * the theme had already positioned.
 */
.aitransparency-wrap--passthrough {
	display: contents !important;
}

/**
 * Layout guard, part one-and-a-half: an image sized in percent — `width: 100%` is what nearly
 * every hand-built theme writes for a full-bleed band — has nothing to resolve against inside
 * a shrink-to-fit inline-block, so the band reserves no height and jumps into place when its
 * lazy image lands. Restoring block layout costs such an image nothing, because it was filling
 * the width anyway; it is only wrong for a picture that is centred or capped narrower than its
 * column, where it would left-align the image and anchor the badge to the column edge. Telling
 * those two apart needs a measurement, so layout-guard.js applies this class and never CSS.
 */
.aitransparency-wrap--block {
	display: block;
}

/**
 * Pro's style editor sets these custom properties (see class-pro.php). Every rule below reads
 * them with the free default as the fallback value, so a site with no Pro licence — or a Pro
 * site that changed nothing — gets exactly the same rendering and no extra CSS is emitted.
 */

/**
 * Layer 1 does not wrap: it adds these two classes to an element the block already has and
 * appends the badge inside it. Nothing is inserted into the ancestry, so core's own layout
 * rules — a gallery's flex children, a cover's stacking context — keep matching the nodes
 * they were written for. The badge is absolutely positioned, so it never becomes a flex or
 * grid item of the host either.
 */
.aitransparency-host:not(.aitransparency-host--positioned) {
	position: relative;
}

/**
 * The nine anchors, written as one axis at a time.
 *
 * The offsets the badge is *not* anchored by have to be said out loud. An absolutely positioned
 * box with both `left` and `right` set and `width: auto` stretches to fill the gap between them,
 * so a theme rule that sets `left` on spans in its container — the mega menu that started all
 * this sets `left: 8px` — turns a 40px pill into a full-width bar without touching width at all.
 *
 * Layer 1 hangs the badge on an element the block already has (`--host`), layer 2 wraps the
 * image in one of ours (`--wrap`); the anchoring is identical, so the two are listed together
 * rather than duplicated further down. Free installs only ever emit `top-right` and
 * `bottom-right` — the other seven need a licence — but the rules ship in both builds because
 * a stylesheet that changes with the edition is a second thing to keep in sync for no gain.
 *
 * The three centred anchors deliberately ignore the offset on the axis they centre: "12px from
 * the edge" has no meaning when there is no edge, and adding it to a `translate` would move the
 * badge off centre while the field still said `centre`.
 */
.aitransparency-host--top-left > .aitransparency-badge,
.aitransparency-host--top-center > .aitransparency-badge,
.aitransparency-host--top-right > .aitransparency-badge,
.aitransparency-wrap--top-left > .aitransparency-badge,
.aitransparency-wrap--top-center > .aitransparency-badge,
.aitransparency-wrap--top-right > .aitransparency-badge {
	top: calc(var(--ait-badge-y, 8px) + var(--ait-badge-crop, 0px) + var(--ait-inset-top, 0px)) !important;
	bottom: auto !important;
}

.aitransparency-host--bottom-left > .aitransparency-badge,
.aitransparency-host--bottom-center > .aitransparency-badge,
.aitransparency-host--bottom-right > .aitransparency-badge,
.aitransparency-wrap--bottom-left > .aitransparency-badge,
.aitransparency-wrap--bottom-center > .aitransparency-badge,
.aitransparency-wrap--bottom-right > .aitransparency-badge {
	bottom: calc(var(--ait-badge-y, 8px) + var(--ait-badge-crop, 0px) + var(--ait-inset-bottom, 0px)) !important;
	top: auto !important;
}

.aitransparency-host--middle-left > .aitransparency-badge,
.aitransparency-host--middle-center > .aitransparency-badge,
.aitransparency-host--middle-right > .aitransparency-badge,
.aitransparency-wrap--middle-left > .aitransparency-badge,
.aitransparency-wrap--middle-center > .aitransparency-badge,
.aitransparency-wrap--middle-right > .aitransparency-badge {
	top: calc(50% + var(--ait-badge-crop, 0px)) !important;
	bottom: auto !important;
	--ait-shift-y: -50%;
}

.aitransparency-host--top-right > .aitransparency-badge,
.aitransparency-host--middle-right > .aitransparency-badge,
.aitransparency-host--bottom-right > .aitransparency-badge,
.aitransparency-wrap--top-right > .aitransparency-badge,
.aitransparency-wrap--middle-right > .aitransparency-badge,
.aitransparency-wrap--bottom-right > .aitransparency-badge {
	right: calc(var(--ait-badge-x, 8px) + var(--ait-inset-right, 0px)) !important;
	left: auto !important;
}

.aitransparency-host--top-left > .aitransparency-badge,
.aitransparency-host--middle-left > .aitransparency-badge,
.aitransparency-host--bottom-left > .aitransparency-badge,
.aitransparency-wrap--top-left > .aitransparency-badge,
.aitransparency-wrap--middle-left > .aitransparency-badge,
.aitransparency-wrap--bottom-left > .aitransparency-badge {
	left: calc(var(--ait-badge-x, 8px) + var(--ait-inset-left, 0px)) !important;
	right: auto !important;
}

.aitransparency-host--top-center > .aitransparency-badge,
.aitransparency-host--middle-center > .aitransparency-badge,
.aitransparency-host--bottom-center > .aitransparency-badge,
.aitransparency-wrap--top-center > .aitransparency-badge,
.aitransparency-wrap--middle-center > .aitransparency-badge,
.aitransparency-wrap--bottom-center > .aitransparency-badge {
	left: 50% !important;
	right: auto !important;
	--ait-shift-x: -50%;
}

/*
 * One transform for both axes.
 *
 * `translate()` cannot be split across two rules — the second declaration replaces the first,
 * it does not add to it — so each axis contributes a custom property and this applies whatever
 * they add up to. An anchor that centres neither axis translates by zero, which costs nothing.
 */
.aitransparency-host > .aitransparency-badge,
.aitransparency-wrap > .aitransparency-badge {
	transform: translate(var(--ait-shift-x, 0), var(--ait-shift-y, 0)) !important;
}

/* A caption sits below the image, so a bottom-anchored badge would land on the text. */
.aitransparency-host--bottom-left:has(> figcaption) > .aitransparency-badge,
.aitransparency-host--bottom-center:has(> figcaption) > .aitransparency-badge,
.aitransparency-host--bottom-right:has(> figcaption) > .aitransparency-badge {
	bottom: auto !important;
	top: 8px !important;
}

/**
 * Every declaration that shapes the badge itself is `!important`, and that is a policy rather
 * than a shortcut.
 *
 * The badge is a bare `<span>` inside whatever the theme happened to build, so it matches any
 * descendant selector aimed at spans in that context. Measured on a real shop:
 * `.mega_submenu .dropdown-menu li a span` — specificity (0,2,3) — beat
 * `.aitransparency--mini > .aitransparency-badge` (0,2,0) and dressed the badge in the theme's
 * menu type: 18px text and 16px padding, which covered a 140x56 category thumbnail whole. That
 * shape of selector is ordinary in menus, buttons and cards, and out-specifying it is an arms
 * race with no ceiling: any extra class we chain, a theme can out-chain.
 *
 * A disclosure whose legibility depends on which container it lands in is not a disclosure, and
 * the header of this file already says these values are not themeable. `!important` is simply
 * that sentence written in CSS. Customisation is unaffected: Pro sets the custom properties, and
 * `var()` resolves inside an important declaration exactly as it does outside one.
 *
 * The consequence to remember: every later rule in this file that touches the badge needs
 * `!important` too, or it silently loses to this block.
 */
.aitransparency-badge {
	position: absolute !important;
	z-index: 2 !important;
	display: block !important;
	background: var(--ait-badge-bg, rgba(255,255,255,.5)) !important;
	color: var(--ait-badge-fg, #101010) !important;
	border: 0 !important;
	border-radius: var(--ait-badge-radius, 999px) !important;
	opacity: var(--ait-badge-opacity, 1) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
	font-size: var(--ait-badge-size, 12px) !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em !important;
	text-align: left !important;
	text-transform: none !important;
	padding: 3px 8px !important;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	white-space: nowrap !important;
	pointer-events: none !important;
	text-decoration: none !important;
}

/**
 * WooCommerce puts its gallery zoom trigger in the same corner as a top-right badge, and the
 * two overlap. Measured on the demo: the trigger occupies 22–58px in from the right edge, so
 * the badge has to clear 58px plus a gap. Applied only when the trigger is really there —
 * plenty of themes switch the zoom off.
 *
 * Scoped to `__wrapper`, the slides, and not to the gallery as a whole. The trigger sits over
 * the main image and nowhere else, but the gallery also contains the Flexslider thumbnail
 * strip: 128px pictures that were being pushed 72px in from their own right edge to clear a
 * magnifier 400px away, which put the badge two thirds of the way off the thumbnail. Found on
 * the demo on 2026-08-16, after a separate fix stopped those badges landing on the wrong box
 * altogether and made this one visible.
 */
.woocommerce-product-gallery:has(> .woocommerce-product-gallery__trigger) .woocommerce-product-gallery__wrapper .aitransparency-wrap--top-right > .aitransparency-badge,
.woocommerce-product-gallery:has(> .woocommerce-product-gallery__trigger) .woocommerce-product-gallery__wrapper .aitransparency-host--top-right > .aitransparency-badge {
	right: 72px !important;
}

/**
 * Small images. The words are the disclosure and are never dropped, so the badge scales
 * instead: the type comes down and the padding with it, and on a thumbnail small enough that
 * one line cannot hold the text it wraps rather than running off the edge. `min()` keeps the
 * Pro font size as a ceiling and never as a floor — a shop that set 18px still gets a badge
 * that fits its 150px search thumbnails.
 *
 * Which bucket an image is in cannot be read off the stylesheet, because the badge sits on the
 * image rather than in the flow that sized it. layout-guard.js measures the rendered image and
 * sets the class; the thresholds are the same numbers in both files.
 */
.aitransparency--compact > .aitransparency-badge {
	font-size: min( var(--ait-badge-size, 12px), 11px ) !important;
	padding: 2px 7px !important;
}

.aitransparency--mini > .aitransparency-badge {
	font-size: min( var(--ait-badge-size, 12px), 10px ) !important;
	padding: 1px 6px !important;
	max-width: calc( 100% - 16px ) !important;
	white-space: normal !important;
	text-align: center !important;
}

/**
 * The mark. Below the admin's threshold the sentence stops fitting at any type size — measured
 * on a real shop, "KI-bearbeitet" at 10px wraps to two lines and covers three quarters of a
 * 57x32 category thumbnail — so the badge becomes a round two-letter mark that opens to the
 * full wording on tap.
 *
 * What does not change: the wording is still in `aria-label`, so a screen reader reads the
 * disclosure without touching anything, and the mark is still always visible. Only the *sighted*
 * reading of the full sentence moves behind an interaction, and only where the sentence could
 * not be read anyway. layout-guard.js adds this class and never CSS: the decision needs the
 * rendered width of the image, which no media query can see.
 */
.aitransparency--mark > .aitransparency-badge {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 22px !important;
	height: 22px !important;
	padding: 0 !important;
	border-radius: 999px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
	max-width: none !important;
	/* The mark is the one badge a visitor is meant to be able to hit. */
	pointer-events: auto !important;
	cursor: pointer !important;
}

/**
 * Hang the mark on the corner itself, half in and half out of the picture.
 *
 * A 22px circle sitting inside an 80px thumbnail eats an eighth of it; moved out by half its
 * own width and height it reads as a seal on the edge and covers a quarter as much. The class
 * is set by layout-guard.js and only where nothing clips the wrapper — inside an
 * `overflow: hidden` card the outer half would simply be cut off, which is worse than sitting
 * inside. Dropped again while the mark is open, because an expanded pill hanging off the
 * corner runs out of the viewport on a right-hand column.
 */
.aitransparency--mark.aitransparency--outset:not(.aitransparency--open) > .aitransparency-badge {
	top: var(--ait-inset-top, 0px) !important;
	right: var(--ait-inset-right, 0px) !important;
	bottom: auto !important;
	left: auto !important;
	transform: translate(50%, -50%) !important;
}

.aitransparency--mark.aitransparency--outset.aitransparency-wrap--bottom-right:not(.aitransparency--open) > .aitransparency-badge,
.aitransparency--mark.aitransparency--outset.aitransparency-host--bottom-right:not(.aitransparency--open) > .aitransparency-badge {
	top: auto !important;
	bottom: var(--ait-inset-bottom, 0px) !important;
	transform: translate(50%, 50%) !important;
}

/* The same two, mirrored, for the corners a licence adds. */
.aitransparency--mark.aitransparency--outset.aitransparency-wrap--top-left:not(.aitransparency--open) > .aitransparency-badge,
.aitransparency--mark.aitransparency--outset.aitransparency-host--top-left:not(.aitransparency--open) > .aitransparency-badge {
	top: var(--ait-inset-top, 0px) !important;
	left: var(--ait-inset-left, 0px) !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) !important;
}

.aitransparency--mark.aitransparency--outset.aitransparency-wrap--bottom-left:not(.aitransparency--open) > .aitransparency-badge,
.aitransparency--mark.aitransparency--outset.aitransparency-host--bottom-left:not(.aitransparency--open) > .aitransparency-badge {
	top: auto !important;
	bottom: var(--ait-inset-bottom, 0px) !important;
	left: var(--ait-inset-left, 0px) !important;
	right: auto !important;
	transform: translate(-50%, 50%) !important;
}

/**
 * Opened by tap, click or keyboard. Back to an ordinary pill, sized to the words.
 *
 * Deliberately not on hover. It was tried and taken out again on 2026-08-15: on an image that
 * already carries a link or its own hover effect, a pill that pops open under the moving cursor
 * covers most of a small picture — measured at 70% of a 70x50 footer icon — and reads as the
 * page misbehaving rather than as a disclosure.
 */
.aitransparency--mark.aitransparency--open > .aitransparency-badge {
	display: block !important;
	width: auto !important;
	height: auto !important;
	padding: 2px 7px !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em !important;
	white-space: normal !important;
	text-align: center !important;
	/* An opened badge is wider than the thumbnail under it, and that is the point: it has to be
	   readable. Held to the image's left edge so it grows inward rather than off the page. */
	max-width: 160px !important;
	min-width: 100% !important;
	z-index: 3 !important;
}

/* Anchored by the left edge instead, for a mark whose pill would open off the page. */
.aitransparency--mark.aitransparency--open.aitransparency--open-left > .aitransparency-badge {
	left: 0 !important;
	right: auto !important;
}

.aitransparency--mark > .aitransparency-badge:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
}

/* The decorative dot has no room inside a 22px circle. */
.aitransparency--mark:not(.aitransparency--open) > .aitransparency-badge > .aitransparency-badge__icon {
	display: none !important;
}

@media (max-width: 480px) {
	.aitransparency-badge {
		font-size: 12px !important;
		padding: 2px 8px !important;
	}

	.aitransparency--compact > .aitransparency-badge {
		font-size: min( var(--ait-badge-size, 12px), 11px ) !important;
	}

	.aitransparency--mini > .aitransparency-badge {
		font-size: min( var(--ait-badge-size, 12px), 10px ) !important;
	}
}

/**
 * The visitor has asked the operating system for more contrast, so the translucent pill and
 * the soft shadow both have to go: a 50% background takes its contrast from whatever photo
 * happens to be underneath, which is the opposite of a guarantee. Opaque background, hard
 * outline, no shadow. `border-color` alone used to do this job and silently stopped
 * working when the hairline came off the base rule — there was no border left to recolour.
 *
 * Two things were still wrong, measured in a browser for the first time on 2026-08-16.
 *
 * The background read `var( --ait-badge-bg, #fff )`, and a fallback only applies when the
 * property is *missing*. On a free site it is, so the badge went opaque; on a licensed site the
 * Pro build prints the property and the rule resolved straight back to the operator's
 * translucent colour. High contrast measured **4.78:1 — identical to no high contrast at all**,
 * while still throwing the shadow away. `--ait-badge-bg-solid` is the same colour at full alpha,
 * computed in PHP because CSS cannot strip an alpha off a custom property.
 *
 * The border was `#000`, which is invisible on a dark badge with light text — the one case
 * where a licensed operator most needs the edge. `currentColor` follows the text instead.
 */
@media (prefers-contrast: more) {
	.aitransparency-badge {
		background: var(--ait-badge-bg-solid, #fff) !important;
		border: 1px solid currentColor !important;
		box-shadow: none !important;
	}
}

/**
 * Windows High Contrast and friends. The user agent replaces every author colour with the
 * user's own palette, which is the right behaviour and needs no help — except that it also
 * drops `box-shadow`, and the shadow was the only thing giving this badge an edge, since the
 * base rule sets `border: 0`. Measured on 2026-08-16: in forced-colors the badge had no
 * border, no outline and no shadow, so a pale mark sat on a photograph with nothing to
 * separate the two.
 *
 * The system keywords are used deliberately rather than `forced-color-adjust: none`: a
 * disclosure has no business overriding the palette someone chose for legibility. All this
 * adds is the edge.
 */
@media (forced-colors: active) {
	.aitransparency-badge {
		background: Canvas !important;
		color: CanvasText !important;
		border: 1px solid CanvasText !important;
		box-shadow: none !important;
	}
}

/**
 * The standalone badge from the block and the self-closing shortcode. It has no image under
 * it, so unlike every other case it needs its own box to sit in rather than sitting on one.
 */
.aitransparency-standalone {
	display: inline-block;
	min-width: 1px;
	min-height: 1.9em;
	vertical-align: middle;
}

.aitransparency-standalone > .aitransparency-badge {
	position: static !important;
	display: inline-block !important;
}

/**
 * Optional icon (Pro). A decorative mark only — it is inserted with aria-hidden and never
 * replaces the text, because the words are the disclosure.
 */
.aitransparency-badge__icon {
	/*
	 * Drawn, not typed.
	 *
	 * This was the character `●` for three versions and could not be centred: a glyph sits on
	 * the baseline of a string that has both capitals and a descender, so aligning its box
	 * centre puts it visibly low, and every attempt to nudge it was a guess about one font.
	 * The badge's font-family is a system stack — the glyph is a different shape and a
	 * different height on every platform, so there was no single correct nudge to find.
	 *
	 * An empty box with a radius has no baseline of its own, and `vertical-align: middle` on
	 * an empty inline-block is exact: it centres the box on the parent's baseline plus half
	 * its x-height, which is the optical middle of the words beside it. Sized in `em` so it
	 * follows the Pro font-size setting.
	 */
	display: inline-block !important;
	box-sizing: border-box !important;
	width: 0.5em !important;
	height: 0.5em !important;
	margin: 0 0.42em 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: currentColor !important;
	vertical-align: middle !important;
	/* A page cached before the glyph was dropped still has it inside; keep it out of sight
	   without touching font-size, which the width above is measured in. */
	text-indent: 100% !important;
	white-space: nowrap !important;
	overflow: hidden !important;
}

/**
 * Alteration details (Pro). What the AI did, next to the badge that says it did something.
 *
 * Opens on hover and on focus and nothing else — no JavaScript is involved, which is what makes
 * it work for a tap as well: a tap gives the badge focus, and `:focus-within` covers the panel
 * itself. The text is in the badge's `aria-label` too, so nothing here is the only copy of a
 * disclosure; this panel is what a sighted visitor gets instead of an announcement.
 *
 * The free build never emits `--has-details`, so these rules are inert there. They ship in both
 * for the same reason the nine anchors do: a stylesheet that differs by edition is a second
 * thing to keep in step, and it buys 500 bytes.
 */
.aitransparency-badge--has-details {
	/* The base rule turns pointer events off so a badge never eats a click meant for the
	   picture. A badge that has something to show has to take them back. */
	pointer-events: auto !important;
	cursor: help !important;
}

.aitransparency-details {
	position: absolute !important;
	z-index: 4 !important;
	top: calc(100% + 4px) !important;
	right: 0 !important;
	left: auto !important;
	display: none !important;
	box-sizing: border-box !important;
	/*
	 * `min-width: max-content` was here, and it defeated the max-width completely — a minimum
	 * beats a maximum, so the panel took the width of its longest possible line and a
	 * three-alteration list ran off the side of the screen. It wraps now.
	 *
	 * `min()` against the viewport as well as a fixed cap: 280px is comfortable on a desktop
	 * and wider than a phone, and a panel that is off the screen discloses nothing.
	 */
	width: max-content !important;
	max-width: min(280px, 70vw) !important;
	min-width: 0 !important;
	padding: 5px 9px !important;
	/* A single unbroken word — a URL in the free-text line — must not push the box wide. */
	overflow-wrap: anywhere !important;
	border-radius: 6px !important;
	background: var(--ait-badge-bg-solid, #ffffff) !important;
	color: var(--ait-badge-fg, #101010) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
	font-size: 0.92em !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-align: left !important;
	white-space: normal !important;
	pointer-events: none !important;
}

.aitransparency-badge--has-details:hover > .aitransparency-details,
.aitransparency-badge--has-details:focus > .aitransparency-details,
.aitransparency-badge--has-details:focus-within > .aitransparency-details {
	display: block !important;
}

/* Bottom-anchored badges open upwards; there is nothing below them but the edge of the picture. */
.aitransparency-wrap--bottom-left > .aitransparency-badge > .aitransparency-details,
.aitransparency-wrap--bottom-center > .aitransparency-badge > .aitransparency-details,
.aitransparency-wrap--bottom-right > .aitransparency-badge > .aitransparency-details,
.aitransparency-host--bottom-left > .aitransparency-badge > .aitransparency-details,
.aitransparency-host--bottom-center > .aitransparency-badge > .aitransparency-details,
.aitransparency-host--bottom-right > .aitransparency-badge > .aitransparency-details {
	top: auto !important;
	bottom: calc(100% + 4px) !important;
}

/* Left-anchored ones open to the right, or they run off the side of the page. */
.aitransparency-wrap--top-left > .aitransparency-badge > .aitransparency-details,
.aitransparency-wrap--middle-left > .aitransparency-badge > .aitransparency-details,
.aitransparency-wrap--bottom-left > .aitransparency-badge > .aitransparency-details,
.aitransparency-host--top-left > .aitransparency-badge > .aitransparency-details,
.aitransparency-host--middle-left > .aitransparency-badge > .aitransparency-details,
.aitransparency-host--bottom-left > .aitransparency-badge > .aitransparency-details {
	right: auto !important;
	left: 0 !important;
}

.aitransparency-badge--has-details:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
}

/* Inside the closed mark there is no room for anything but the two letters. */
.aitransparency--mark:not(.aitransparency--open) > .aitransparency-badge > .aitransparency-details {
	display: none !important;
}

/**
 * The public transparency statement. Deliberately unstyled beyond spacing: it goes on the
 * operator's own page, next to their imprint and privacy notice, and should read as part of
 * that page rather than as something a plugin dropped in. The theme's type and colours win.
 */
.aitransparency-statement {
	margin: 0 0 1.5em;
}

.aitransparency-statement p {
	margin: 0 0 0.9em;
}

.aitransparency-statement__note {
	opacity: 0.8;
}