/*
 * Ad Agentur — Preview Tool
 *
 * Ported from the signed-off design prototype. Two structural changes were needed to
 * make it safe inside a WordPress theme, and nothing else was touched:
 *
 *   1. Everything is scoped under .aa-preview. The prototype styled :root, html, body
 *      and a bare * selector; a shortcode must not restyle the page it is dropped into.
 *      Custom properties moved from :root onto .aa-preview and inherit down from there.
 *   2. The prototype's page gutter (.app padding) is gone. Inside a page the theme
 *      already provides the content column, and keeping it would inset the card from
 *      the rest of the page content. The card's own 24px/18px padding — which every
 *      alignment rule below depends on — is unchanged.
 *
 * The comments explaining specific rules are kept deliberately: each one records a
 * layout bug that was found on a real phone and fixed once already.
 */

/*
 * Bundled Montserrat — OPT-IN, and not used unless the aa_preview_tool_bundle_font
 * filter turns it on. The tool inherits the theme's typeface by default (see below),
 * so this face normally goes unmatched, and a font face nothing matches is never
 * downloaded. Keeping the declaration here costs nothing and leaves the fallback one
 * filter away for a theme that does not serve Montserrat itself.
 *
 * Variable font, latin subset. The family is namespaced so it can never collide with
 * a Montserrat the theme loads at a different weight range.
 */
@font-face {
	font-family: "AA Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-var.woff2") format("woff2");
}

.aa-preview {
	--navy-deep: #024F82;
	--navy: #265E9A;
	--navy-ink: #173F69;
	--navy-bg: #E8EFF6;
	--green: #8EC045;
	--green-ink: #4F7A2A;
	--green-bg: #EEF5E4;
	--paper: #F7F7F7;
	--surface: #FFFFFF;
	--ink: #423838;
	--ink-soft: #7C7170;
	--ink-faint: #a39a98;
	--line: #E6E1DF;
	--bad: #B23B3B;
	--bad-bg: #FBEAEA;
	--amber: #a9701f;
	--amber-bg: #faf0dd;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 16px;
	--shadow-panel: 0 2px 4px rgba(0, 0, 0, .05), 0 12px 32px -8px rgba(16, 24, 32, .18);
	--shadow-sm: 0 1px 4px rgba(16, 24, 32, .12);
	--shadow-pop: 0 8px 20px -6px rgba(16, 24, 32, .35);
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* adagentur.com has no dark mode, so this tool is light-only. color-scheme also
	   pins the UA chrome (select popups, scrollbars, autofill) to light — without it
	   those render dark on a dark OS even though our tokens don't. */
	color-scheme: light;

	max-width: 1140px;
	margin: 0 auto;
	color: var(--ink);

	/* The typeface is inherited from the theme on purpose. adagentur.com already serves
	   Montserrat, which is what this design was drawn in, so inheriting gives the right
	   type with no second font download — and keeps the widget in step with the page
	   around it if the site's typography ever changes.
	   font-size and line-height are still pinned, because every size in this file is
	   expressed in px against a 16px root and the design depends on that scale. */
	font-family: inherit;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	line-height: 1.55;
	text-align: left;
}

.aa-preview *,
.aa-preview *::before,
.aa-preview *::after {
	box-sizing: border-box;
}

/* Neutralise the styling themes routinely put on form controls. Every control below
   declares what it actually needs, so stripping first keeps the port predictable —
   and the blanket padding:0 is what makes the icon-button centring reliable (see the
   note on .check-copy). */
.aa-preview button {
	font: inherit;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	text-align: inherit;
	min-height: 0;
	min-width: 0;
	width: auto;
	height: auto;
}

.aa-preview input,
.aa-preview select {
	margin: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	line-height: normal;
	min-height: 0;
	height: auto;
	max-width: 100%;
}

.aa-preview a {
	text-decoration: none;
	box-shadow: none;
}

/* The second half of that reset: the interaction states.
   The block above neutralises how a theme paints a control at rest, but a theme's
   :hover / :focus / :active rules are a separate cascade fight, and `.aa-preview button`
   does not reach them. Kadence — this site's theme — ships this twice over, once in
   global.min.css and again in its inline kadence-global-inline-css:

       button:hover, button:focus, button:active { box-shadow: 0 15px 25px -7px rgba(0,0,0,.1) }
       select:focus, input[type="text"]:focus    { box-shadow: 0 5px 15px -7px rgba(0,0,0,.1) }

   `button:focus` is (0,1,1) — exactly the specificity of `.aa-preview button` in the reset
   — and the theme's stylesheets load after the plugin's, so the tie went to the theme.
   Every button in the widget therefore grew a large drop shadow the moment it was clicked
   and kept it until focus moved away. Measured on the live page: 22 of the 28 focusable
   elements were affected. It was reported as "a weird shadow" and chased twice as a
   repaint artifact before anyone read the computed box-shadow of a focused button.

   So these selectors are built to outrank the theme on *specificity*, never on source
   order — once a minifier concatenates stylesheets, order is not ours to control. The
   widget root already carries `data-aa-root`, which buys the step needed:

       .aa-preview[data-aa-root] button:focus           (0,3,1) > button:focus             (0,1,1)
       .aa-preview[data-aa-root] select:focus           (0,3,1) > select:focus             (0,1,1)
       .aa-preview[data-aa-root] .adv-field input:focus (0,4,1) > input[type="text"]:focus (0,2,1)

   `input` is the one control listed by container rather than blanket-wide, deliberately:
   the only inputs that leak are the two readonly readouts in `.adv-field` (GL and uule).
   The Keyword and Standort fields already win on their own with
   `.aa-preview .field input:focus` further down, and that rule paints the navy ring the
   design calls for — a blanket `input` selector here would tie with it and quietly depend
   on which one sits lower in the file. An input added outside `.field` / `.adv-field`
   would need adding here. */
.aa-preview[data-aa-root] button:hover,
.aa-preview[data-aa-root] button:focus,
.aa-preview[data-aa-root] button:active,
.aa-preview[data-aa-root] select:hover,
.aa-preview[data-aa-root] select:focus,
.aa-preview[data-aa-root] select:active,
.aa-preview[data-aa-root] textarea:hover,
.aa-preview[data-aa-root] textarea:focus,
.aa-preview[data-aa-root] a:hover,
.aa-preview[data-aa-root] a:focus,
.aa-preview[data-aa-root] a:active,
.aa-preview[data-aa-root] .adv-field input:hover,
.aa-preview[data-aa-root] .adv-field input:focus {
	box-shadow: none;
}

/* Taking that shadow away removes the only thing that was marking focus at all. Nothing
   in this stylesheet painted an outline on these controls, and no theme rule suppressed
   one either — verified live: Chrome simply does not draw its own ring for a mouse click,
   because :focus-visible is false there. Keyboard users were relying on an accident.

   :focus-visible rather than :focus is the whole point of the fix: the ring stays for
   keyboard and assistive-tech users and stays off a button someone just clicked, which is
   the lingering visual the report was about. `outline` rather than `box-shadow` because it
   is the focus primitive, it sits outside the shadow fight above, and it never affects
   layout — so nothing shifts by a pixel when a control takes focus. 2px navy at 2px
   offset is the same ring `.switch input:focus-visible + .track` already uses.

   No `outline: none` counterpart on plain :focus, on purpose. Nothing on this page sets an
   outline that would need suppressing, and adding one would mean a browser without
   :focus-visible support drops this whole selector list as invalid and is left with no
   ring at all. `.adv-panel` clips at overflow:hidden, but `.adv-panel-inner` carries 24px
   of padding, so the offset ring inside it cannot be cut off. */
.aa-preview[data-aa-root] button:focus-visible,
.aa-preview[data-aa-root] select:focus-visible,
.aa-preview[data-aa-root] a:focus-visible,
.aa-preview[data-aa-root] summary:focus-visible,
.aa-preview[data-aa-root] .adv-field input:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
}

.aa-preview h1,
.aa-preview h2,
.aa-preview h3,
.aa-preview p {
	padding: 0;
	text-transform: none;
}

.aa-preview kbd {
	font-family: var(--mono);
	font-size: 11px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 5px;
	padding: 1px 6px;
	color: var(--ink-soft);
}

.aa-preview .topbar { margin-bottom: 20px; }

.aa-preview .brand {
	font-weight: 700;
	font-size: 12.5px;
	color: var(--ink-soft);
	letter-spacing: .03em;
	text-transform: uppercase;
}

.aa-preview h1 {
	font-size: clamp(22px, 3.6vw, 27px);
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 0 0 6px;
	text-wrap: balance;
	color: var(--ink);
	max-width: 22ch;
}

.aa-preview .lede {
	color: var(--ink-soft);
	font-size: 14px;
	margin: 0 0 24px;
	max-width: 58ch;
}

.aa-preview .card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-panel);
}

.aa-preview .card + .card { margin-top: 14px; }
.aa-preview .card-body { padding: 24px; }

.aa-preview .card h2 {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin: 0 0 16px;
}

.aa-preview .card-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}

.aa-preview .card-header-row h2 { margin: 0; }

.aa-preview .util-bar {
	display: flex;
	gap: 4px;
	align-items: center;
	flex-wrap: wrap;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	/* .util-link carries its own 10px horizontal padding, so this must be the card
	   body's padding minus 10 or the util text sits proud of the "SUCHE" heading
	   below it. It was 8px out on phones. */
	padding: 10px 14px;
}

.aa-preview .util-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink-soft);
	background: none;
	border: none;
	border-radius: var(--r-sm);
	padding: 6px 10px;
	cursor: pointer;
	/* Not `transition: .15s` — that shorthand means `transition: all`, which asks the
	   browser to be ready to animate every animatable property, including transform,
	   filter and opacity that none of these ever change. That can promote the element
	   to its own compositing layer for no reason, which is a known source of stale
	   paint. Naming the two or three properties that actually change removes the
	   mechanism and animates exactly the same thing. */
	transition: background-color .15s ease, color .15s ease;
}

.aa-preview .util-link:hover { background: var(--navy-bg); color: var(--navy); }
.aa-preview .util-icon { width: 14px; height: 14px; flex: none; }

/* The gear sits with the other utilities but is a mode toggle, not an action — so it's
   pushed to the far end and shows state through colour instead of a chevron: navy fill
   while the panel is open. */
.aa-preview .adv-toggle { margin-left: auto; }
.aa-preview .adv-toggle[aria-expanded="true"] { background: var(--navy); color: #fff; }
.aa-preview .adv-toggle[aria-expanded="true"]:hover { background: var(--navy-deep); color: #fff; }
.aa-preview .util-link.copied { background: var(--green-bg); color: var(--green-ink); }

.aa-preview .field-grid {
	display: grid;
	grid-template-columns: 1.6fr 1.2fr .9fr;
	gap: 14px;
	align-items: start;
}

.aa-preview .field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.aa-preview .field.full { grid-column: 1/2; }

.aa-preview .field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.aa-preview .label-hint { font-weight: 400; color: var(--ink-faint); }

.aa-preview .field input[type=text] {
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 11px 12px;
	width: 100%;
}

/* The suggestion list is anchored to the input, not to the whole field — the field also
   holds the chips and the status line below it, and "top:100%" of the field would drop
   the list underneath those. */
.aa-preview .combo-wrap { position: relative; }
.aa-preview .combo-wrap input[type=text] { width: 100%; }

.aa-preview .aa-suggest {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 40;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--shadow-pop);
	max-height: 264px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.aa-preview .aa-suggest[hidden] { display: none; }

.aa-preview .aa-sug {
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding: 7px 9px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13.5px;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
}

.aa-preview .aa-sug .flag { font-size: 13px; line-height: 1; flex: none; }
.aa-preview .aa-sug .sug-name { font-weight: 600; color: var(--ink); flex: none; }

/* The disambiguating context, muted: "Clinton" is 30 different places and the region is
   the only thing that tells them apart. */
.aa-preview .aa-sug .sug-meta {
	font-size: 11.5px;
	color: var(--ink-faint);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aa-preview .aa-sug:hover,
.aa-preview .aa-sug[aria-selected="true"] { background: var(--navy-bg); }
.aa-preview .aa-sug[aria-selected="true"] .sug-name { color: var(--navy); }

.aa-preview .field input::placeholder { color: var(--ink-faint); }
.aa-preview .field input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-bg); }
.aa-preview .field .hintline { font-size: 11px; color: var(--ink-faint); }
.aa-preview .loc-status { font-size: 11px; margin-top: 1px; }
.aa-preview .loc-status.ok { color: var(--green-ink); }
.aa-preview .loc-status.soft { color: var(--amber); }
.aa-preview .loc-status.pending { color: var(--ink-faint); }

.aa-preview .pill-group { display: flex; flex-wrap: wrap; gap: 8px; }

.aa-preview .pill-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 10px 14px;
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
	/* Not `transition: .15s` — that shorthand means `transition: all`, which asks the
	   browser to be ready to animate every animatable property, including transform,
	   filter and opacity that none of these ever change. That can promote the element
	   to its own compositing layer for no reason, which is a known source of stale
	   paint. Naming the two or three properties that actually change removes the
	   mechanism and animates exactly the same thing. */
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.aa-preview .pill-toggle svg { width: 15px; height: 15px; flex: none; }
.aa-preview .pill-toggle:hover { border-color: var(--navy); }
.aa-preview .pill-toggle.active { background: var(--green); border-color: var(--green); color: #fff; }

.aa-preview .kw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; min-height: 0; }

.aa-preview .kw-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	background: var(--navy-bg);
	color: var(--navy);
	border-radius: 999px;
	padding: 5px 6px 5px 12px;
}

.aa-preview .kw-chip button {
	border: none;
	background: none;
	color: var(--navy);
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	padding: 2px;
}

.aa-preview .cta-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.aa-preview .btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--green);
	border: none;
	border-radius: 100px;
	padding: 12px 22px;
	cursor: pointer;
	text-decoration: none;
	transition: transform .15s ease, background .15s ease;
}

.aa-preview .btn-primary:hover { background: var(--green-ink); transform: translateY(-1px); color: #fff; }
.aa-preview .btn-primary:active { transform: translateY(0); }
.aa-preview .kbd-hint { font-size: 11.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 5px; }

.aa-preview .url-preview {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 6px 6px 6px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.aa-preview .url-preview code {
	flex: 1;
	min-width: 0;
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--ink-soft);
	overflow-x: auto;
	white-space: nowrap;
	background: none;
	padding: 0;
}

.aa-preview .icon-btn {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--navy-bg);
	color: var(--navy);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Not `transition: .15s` — that shorthand means `transition: all`, which asks the
	   browser to be ready to animate every animatable property, including transform,
	   filter and opacity that none of these ever change. That can promote the element
	   to its own compositing layer for no reason, which is a known source of stale
	   paint. Naming the two or three properties that actually change removes the
	   mechanism and animates exactly the same thing. */
	transition: background-color .15s ease, color .15s ease;
}

.aa-preview .icon-btn:hover { background: var(--navy); color: #fff; }
.aa-preview .icon-btn.copied { background: var(--green-bg); color: var(--green-ink); }
.aa-preview .icon-btn svg { width: 16px; height: 16px; }
.aa-preview .icon-btn .icon-check { display: none; }
.aa-preview .icon-btn.copied .icon-copy { display: none; }
.aa-preview .icon-btn.copied .icon-check { display: block; }

.aa-preview .info-wrap { position: relative; display: inline-flex; }

.aa-preview .infobtn {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: none;
	background: var(--paper);
	color: var(--ink-faint);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	/* Not `transition: .15s` — that shorthand means `transition: all`, which asks the
	   browser to be ready to animate every animatable property, including transform,
	   filter and opacity that none of these ever change. That can promote the element
	   to its own compositing layer for no reason, which is a known source of stale
	   paint. Naming the two or three properties that actually change removes the
	   mechanism and animates exactly the same thing. */
	transition: background-color .15s ease, color .15s ease;
	flex: none;
	position: relative;
}

/* The glyph is 16px, which is under the 24px minimum target size (WCAG 2.5.8) and a real
   miss on a phone — it sits between a label and a value, so there is nothing forgiving
   around it. Growing the button is not an option: it lives on the label row and every
   §10 alignment number is measured against that row's boxes. An overlay extends only the
   hit area, so the button's box, the glyph and every measurement stay exactly where they
   were. `inset:-4px` turns 16px into 24px. The popover positions itself from the
   button's own rect, which the overlay does not change. */
.aa-preview .infobtn::after {
	content: '';
	position: absolute;
	inset: -4px;
}

.aa-preview .infobtn:hover { background: var(--navy-bg); color: var(--navy); }
.aa-preview .infobtn svg { width: 12px; height: 12px; }

/* The tooltip is appended to <body>, not to the widget, so it is immune to any
   transformed or overflow-hidden ancestor the theme might introduce — a fixed element
   inside one of those would be positioned against the wrong box. Being outside
   .aa-preview it cannot inherit the tokens, so its two colours are literal here. */
.aa-preview-pop {
	position: fixed;
	top: 0;
	left: 0;
	width: 210px;
	max-width: calc(100vw - 32px);
	background: #173F69;
	color: #fff;
	/* Appended to <body>, so this inherits the theme's typeface like the widget does. */
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	padding: 10px 12px;
	border-radius: 10px;
	z-index: 999999;
	box-shadow: 0 8px 20px -6px rgba(16, 24, 32, .35);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s;
	box-sizing: border-box;
}

.aa-preview-pop.shown { opacity: 1; pointer-events: auto; }

.aa-preview-pop::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: var(--arrow-left, 50%);
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-bottom-color: #173F69;
}

/* Only max-height and opacity animate. `margin` used to animate too — negative
   margins, reaching out across the card's rounded corners and its shadow, on a property
   that forces layout. That is what left a step at the corner after closing. The panel is
   now a sibling of .card-body, so it is full-bleed without any margin at all, and the
   padding lives on an inner wrapper so it does not animate either. */
.aa-preview .adv-panel {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .35s ease, opacity .3s ease;
}

.aa-preview .adv-panel-inner { padding: 24px; }

/* Its own band directly under the util bar: full-bleed to the card edges and tinted
   --paper, so it reads as a separate section rather than a block wedged into the Suche
   card. Sitting above the "SUCHE" heading means opening it pushes the whole search
   block down, instead of splitting the heading off its fields. Fields invert to
   --surface (white) — on a tinted ground the white inputs are what should look
   "active". */
.aa-preview .adv-panel.open {
	max-height: 2000px;
	opacity: 1;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.aa-preview .adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; }

/* justify-content:flex-end bottom-aligns the control in each cell, so switches, selects
   and readonly inputs all sit on one baseline even when a label wraps to two lines at
   narrow widths. */
.aa-preview .adv-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	justify-content: flex-end;
}

.aa-preview .adv-field-wide { grid-column: 1/-1; }

.aa-preview .adv-field label {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ink-soft);
	display: flex;
	align-items: center;
	gap: 5px;
}

.aa-preview .adv-field select,
.aa-preview .adv-field input[readonly] {
	font: inherit;
	font-size: 13px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 8px 10px;
	color: var(--ink);
	width: 100%;
}

.aa-preview .adv-field input[readonly] { font-family: var(--mono); color: var(--ink-soft); }

.aa-preview .switch-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 9px 12px;
	background: var(--surface);
}

.aa-preview .switch-row .switch-code { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.aa-preview .switch { position: relative; width: 36px; height: 21px; flex: none; }
.aa-preview .switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.aa-preview .switch .track { position: absolute; inset: 0; background: var(--line); border-radius: 99px; transition: background .15s ease; }

.aa-preview .switch .knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--shadow-sm);
	transition: transform .15s ease;
}

.aa-preview .switch input:checked + .track { background: var(--navy); }
.aa-preview .switch input:checked + .track + .knob { transform: translateX(15px); }
.aa-preview .switch input:focus-visible + .track { outline: 2px solid var(--navy); outline-offset: 2px; }

.aa-preview .reason-tags { display: flex; flex-wrap: wrap; gap: 7px; }

.aa-preview .reason-tags span {
	font-size: 11.5px;
	font-weight: 500;
	background: var(--surface);
	color: var(--ink-soft);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 5px 11px;
}

/* Prüfliste — the worked-through list of combinations. Replaces what used to be two
   separate blocks ("Vergleich" of pending combos + "Letzte Suchen" history): one row
   can be pending or done, which is the same thing at two points in time. */
.aa-preview .checklist {
	margin-top: 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 14px 16px 16px;
	background: var(--paper);
}

/* align-items:center, NOT baseline: the clear button is icon-only at rest and so has no
   text baseline, but gains one when the armed label appears — under baseline alignment
   that moved the whole row and visibly nudged "PRÜFLISTE" down. Centring makes the
   heading immune to the button's content changing. */
.aa-preview .checklist-head {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr auto auto auto;
	grid-template-areas: "title count rest clear";
	gap: 0 10px;
	margin-bottom: 4px;
}

.aa-preview .checklist-head h3 {
	grid-area: title;
	margin: 0;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* Both header icon buttons are the same 28px box as the row's copy/delete buttons, with
   the same 10px gap — so the header's icons land exactly in the rows' icon columns
   instead of floating near them. */
.aa-preview [data-aa="openAll"] {
	grid-area: rest;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
}

.aa-preview .rest-count {
	grid-area: count;
	font-size: 11.5px;
	color: var(--ink-faint);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.aa-preview .rest-icon { width: 14px; height: 14px; flex: none; }

/* Icon-only at every width; the label is only revealed by the armed state, so a
   destructive tap is never unlabelled. The negative margin cancels the button's own
   padding so the icon's box edge lands on the container's content edge — and the armed
   padding/margin pair cancels to the same edge, so growing to fit "Wirklich leeren?"
   expands leftwards without the right edge jumping.
   min-height pins the box across both states — the armed label is ~2px taller than the
   bare icon, which would otherwise grow the header row on the phone (where this button
   alone sets that row's height). */
.aa-preview [data-aa="clearList"] {
	grid-area: clear;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 28px;
	height: 28px;
	padding: 0;
}

.aa-preview [data-aa="clearList"]:not(.armed) .clear-label { display: none; }
.aa-preview .clear-icon { display: block; width: 14px; height: 14px; flex: none; }
.aa-preview .clear-label { line-height: 1.3; }
.aa-preview [data-aa="clearList"].armed { background: var(--bad-bg); padding: 0 10px; }
.aa-preview .util-link.danger { color: var(--bad); }

.aa-preview .checklist-empty { font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); margin: 10px 0 0; }

.aa-preview .checklist-popup {
	font-size: 12px;
	line-height: 1.5;
	color: var(--bad);
	background: var(--bad-bg);
	border-radius: var(--r-sm);
	padding: 8px 11px;
	margin: 12px 0 0;
}

.aa-preview .checklist-safety {
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--ink-faint);
	text-align: center;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

.aa-preview .checklist-safety code { font-family: var(--mono); font-size: 11px; background: none; padding: 0; }
.aa-preview .checklist-safety b { color: var(--bad); font-weight: 700; }

/* "Anzeige nicht dabei?" — replaces the old yes/no Diagnose card. Nobody needs to be
   asked whether they saw their ad; they need the reasons when they didn't. */
.aa-preview .no-ad { margin-top: 10px; text-align: center; }

.aa-preview .no-ad summary {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--navy);
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 2px;
}

.aa-preview .no-ad summary::-webkit-details-marker { display: none; }
.aa-preview .no-ad summary::after { content: '▾'; font-size: 9px; transition: transform .15s ease; }
.aa-preview .no-ad[open] summary::after { transform: rotate(180deg); }
.aa-preview .no-ad-body { text-align: left; margin-top: 8px; }
.aa-preview .no-ad-body p { margin: 0 0 10px; font-size: 11.5px; color: var(--ink-faint); }

/* Grid rather than flex so the same markup can be re-laid-out per breakpoint.
   Wide: keyword over meta on the left, actions vertically centred on the right.
   Phone: actions stay on line 1 next to the keyword, meta drops to line 2 with the full
   row width — which keeps the row to two short lines instead of the four it wrapped to
   when everything competed for one flex line. */
.aa-preview .check-row {
	display: grid;
	align-items: center;
	grid-template-columns: auto minmax(0, 1fr) auto auto auto;
	grid-template-areas:
		"state kw   open copy del"
		"state meta open copy del";
	column-gap: 10px;
	row-gap: 1px;
	padding: 9px 0;
	border-top: 1px solid var(--line);
}

.aa-preview .check-row:first-of-type { border-top: none; }

.aa-preview .check-state {
	grid-area: state;
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 11px;
}

.aa-preview .check-kw { grid-area: kw; }
.aa-preview .check-meta { grid-area: meta; }
.aa-preview .check-open { grid-area: open; }
.aa-preview .check-copy { grid-area: copy; }
.aa-preview .check-del { grid-area: del; }
.aa-preview .check-row.done .check-state { background: var(--green-bg); color: var(--green-ink); }
.aa-preview .check-row.todo .check-state { border: 1.5px dashed var(--line); }

.aa-preview .check-kw {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aa-preview .check-meta {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	font-size: 11px;
	color: var(--ink-faint);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aa-preview .check-meta .flag { font-size: 13px; line-height: 1; flex: none; }
.aa-preview .check-meta svg { width: 12px; height: 12px; flex: none; }
.aa-preview .check-row.done .check-kw { color: var(--ink-soft); }

.aa-preview .check-open {
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--navy);
	cursor: pointer;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 6px 11px;
	text-decoration: none;
	white-space: nowrap;
}

.aa-preview .check-open:hover { background: var(--navy-bg); border-color: var(--navy); }

/* Chrome's UA stylesheet gives <button> padding:1px 6px. In a 28px box that still
   leaves room for a 14px glyph, but at the 22px phone size the content box shrinks to
   10px — the glyph overflows and CSS grid's *safe* centring silently falls back to
   start-alignment, putting the icon 2px off. The boxes measure as perfectly aligned
   while the glyphs are not, which is why this only ever showed up on a phone. */
.aa-preview .check-copy {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: none;
	border-radius: var(--r-sm);
	cursor: pointer;
	color: var(--ink-faint);
}

.aa-preview .check-copy:hover { color: var(--navy); background: var(--navy-bg); }
.aa-preview .check-copy svg { width: 14px; height: 14px; }
.aa-preview .check-copy .icon-check { display: none; }
.aa-preview .check-copy.copied { color: var(--green-ink); background: var(--green-bg); }
.aa-preview .check-copy.copied .icon-copy { display: none; }
.aa-preview .check-copy.copied .icon-check { display: block; }

.aa-preview .check-del {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: none;
	border-radius: var(--r-sm);
	cursor: pointer;
	color: var(--ink-faint);
}

.aa-preview .check-del svg { width: 14px; height: 14px; }
.aa-preview .check-del:hover { color: var(--bad); background: var(--bad-bg); }
.aa-preview .combo-hint { font-size: 12px; color: var(--ink-faint); }

@media (max-width: 640px) {
	.aa-preview .field-grid { grid-template-columns: 1fr 1fr; }

	/* Below 640 the grid drops to two columns; Gerät takes the full width there so the
	   two pills sit side by side instead of stacking in a ~139px column. The nowrap /
	   flex sizing must stay inside the query — above it the Gerät column is narrow
	   (.9fr) and the pills still need to be allowed to wrap. */
	.aa-preview .field-device { grid-column: 1/-1; }
	.aa-preview .field-device .pill-group { flex-wrap: nowrap; }
	.aa-preview .field-device .pill-toggle { flex: 1 1 0; justify-content: center; }

	/* At phone widths the Standort column is only ~139px, far too narrow to read
	   "Wiener Neustadt · Lower Austria, Österreich" — every suggestion was ellipsised
	   down to nothing. Anchor the list to the input's RIGHT edge instead and let it grow
	   leftwards: that column sits against the card's right edge, so growing left is the
	   direction that keeps it on screen. */
	.aa-preview .aa-suggest {
		left: auto;
		right: 0;
		/* Width is set in JS so the left edge lands exactly on the card's content edge —
		   the same rail the util icons, SUCHE, the labels and the CTA sit on. A fixed
		   min-width here overhung the card by a few px at some widths. */
		min-width: 0;
	}

	/* Even at full card width the region will not fit beside the name on a phone, so it
	   drops to its own line, indented past the flag. Exactly what the Prüfliste rows do
	   at this breakpoint — same problem, same answer — and it removes the truncation
	   instead of trading it against alignment. */
	.aa-preview .aa-sug {
		flex-wrap: wrap;
		row-gap: 1px;
	}

	.aa-preview .aa-sug .sug-meta {
		flex-basis: 100%;
		padding-left: 20px;
	}

	/* In the two-column phone layout "Standort (Land oder Ort)" wraps to a second line,
	   which pushed its input a row below the Keyword input. The parenthetical only
	   repeats what the placeholder already says, so it's dropped here rather than
	   reserving a blank second line under every label just to keep the inputs level. */
	.aa-preview .label-hint { display: none; }

	.aa-preview .adv-grid { grid-template-columns: 1fr 1fr; }
}

/* Four labelled utilities wrap to two rows below ~430px. Icons only there — the names
   live in title/aria-label, and .flashing re-reveals the label so the "✓ Kopiert"
   confirmation is still visible on a phone. */
@media (max-width: 560px) {
	.aa-preview .util-bar .util-link span { display: none; }
	.aa-preview .util-bar .util-link.flashing span { display: inline; }
	.aa-preview .util-bar .util-link { padding: 6px 9px; }
	/* card-body 24 − util-link 9 = 15, so the icons stay on the outer rail */
	.aa-preview .util-bar { padding: 10px 15px; }

	/* icon + count now fit beside the heading, so no second header row */
	.aa-preview .checklist-head { column-gap: 8px; }
	.aa-preview [data-aa="openAll"],
	.aa-preview [data-aa="clearList"] { width: 22px; min-width: 22px; height: 22px; }

	/* Meta moves to its own line, indented under the keyword, and gets the whole row
	   width — so it fits on one line again instead of being clipped to "Berlin · Mob"
	   by the buttons. */
	.aa-preview .check-row {
		grid-template-areas:
			"state kw   open copy del"
			".     meta meta meta meta";
		column-gap: 8px;
		row-gap: 0;
		padding: 7px 0;
	}

	.aa-preview .check-kw { font-size: 12.5px; }
	.aa-preview .check-open { padding: 4px 8px; font-size: 11.5px; }
	.aa-preview .check-copy { width: 22px; height: 22px; }
	.aa-preview .check-del { width: 22px; height: 22px; }
}

/* Width for layout, pointer for a keyboard-less tablet. */
@media (max-width: 560px), (hover: none) and (pointer: coarse) {
	.aa-preview .kbd-hint { display: none; }
	.aa-preview .hintline .desktop-only { display: none; }
}

@media (max-width: 480px) {
	.aa-preview .card-body { padding: 18px; }
	/* card-body 18 − util-link 9 = 9, so the icons stay on the outer rail */
	.aa-preview .util-bar { padding: 8px 9px; }
	.aa-preview .adv-panel-inner { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.aa-preview *,
	.aa-preview-pop { transition: none !important; }
}