/**
 * Acid AEO admin styles — the Acid Studios light style.
 *
 * Paper, ink and one green. The green is a fill under black text, never a text
 * colour and never a lone border; structure is drawn with borders, the only
 * shadow is the focus ring, every corner is 3px. The values are the ones Acid
 * Speed ships, and tests/Unit/Admin/StyleContractTest.php holds this file to
 * them. Logical properties throughout so the screens read the same way in an
 * RTL locale.
 *
 * This is the base: the wizard's sheet adds to it and redefines nothing.
 */

@font-face { font-display: swap; font-family: "Inter"; font-weight: 400; src: url(../fonts/Inter-Regular.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: "Inter"; font-weight: 600; src: url(../fonts/Inter-SemiBold.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: "Space Mono"; font-weight: 400; src: url(../fonts/SpaceMono-Regular.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: "Space Mono"; font-weight: 700; src: url(../fonts/SpaceMono-Bold.woff2) format("woff2"); }

.acid-aeo-wrap,
.acid-aeo-wizard,
.acid-aeo-wizard-body {
	--paper: #fff;
	--paper-2: #f4f5f5;
	--line: #e2e4e7;
	--ink: #050505;
	--ink-2: #4a4f57;
	--ink-3: #6b7280;
	--acid: #00FF9D;
	--acid-deep: #00db87;
	--danger: #d92d3a;
	--danger-ink: #b3202c;
	--danger-tint: #fdecee;
	--warning-ink: #8a4b00;
	--warning-tint: #fff4d6;
	--success-ink: #0a7a4b;
	--success-tint: #e5fff4;
	--radius: 3px;
	--gap: 16px;
	--sans: "Inter", system-ui, sans-serif;
	--mono: "Space Mono", ui-monospace, monospace;
	--speed: 150ms;
}

.acid-aeo-wrap,
.acid-aeo-wizard {
	color: var(--ink);
	font: 14px/1.5 var(--sans);
}

.acid-aeo-wrap { max-inline-size: 1180px; }

.acid-aeo-wrap *,
.acid-aeo-wizard * { box-sizing: border-box; }

/* Type: titles, numbers, tags and code are set in the mono face ------------- */

.acid-aeo-wrap h1,
.acid-aeo-wrap h2,
.acid-aeo-wrap h3,
.acid-aeo-wrap code,
.acid-aeo-wizard h1,
.acid-aeo-wizard h2,
.acid-aeo-wizard h3,
.acid-aeo-wizard code,
.acid-aeo-version,
.acid-aeo-score-number,
.acid-aeo-tile-number,
.acid-aeo-pill,
.acid-aeo-badge,
.acid-aeo-sysinfo,
.acid-aeo-bots-vendor th { font-family: var(--mono); }

.acid-aeo-wrap h1,
.acid-aeo-wrap h2,
.acid-aeo-wrap h3,
.acid-aeo-wizard h1,
.acid-aeo-wizard h2,
.acid-aeo-wizard h3 {
	color: var(--ink);
	font-weight: 700;
}

/* WordPress's own controls, redrawn --------------------------------------
 * The templates use core's button classes; the `.wp-core-ui` prefix out-ranks
 * core's own rules. Disabled buttons keep core's greys (core uses !important).
 */

.wp-core-ui .acid-aeo-wrap .button,
.wp-core-ui .acid-aeo-wizard .button {
	background: var(--paper);
	border-color: var(--ink);
	border-radius: var(--radius);
	color: var(--ink);
	font-family: var(--sans);
	font-weight: 600;
}

.wp-core-ui .acid-aeo-wrap .button:hover,
.wp-core-ui .acid-aeo-wizard .button:hover {
	background: var(--paper-2);
	border-color: var(--ink);
	color: var(--ink);
}

.wp-core-ui .acid-aeo-wrap .button-primary,
.wp-core-ui .acid-aeo-wizard .button-primary {
	background: var(--acid);
	border-color: var(--ink);
	color: var(--ink);
}

.wp-core-ui .acid-aeo-wrap .button-primary:hover,
.wp-core-ui .acid-aeo-wizard .button-primary:hover {
	background: var(--acid-deep);
	border-color: var(--ink);
	color: var(--ink);
}

.wp-core-ui .acid-aeo-wrap .button.acid-aeo-danger,
.wp-core-ui .acid-aeo-wrap .button.acid-aeo-danger:hover {
	border-color: var(--danger);
	color: var(--danger-ink);
}

.acid-aeo-wrap a:not(.button),
.acid-aeo-wizard a:not(.button),
.wp-core-ui .acid-aeo-wrap .button-link,
.wp-core-ui .acid-aeo-wizard .button-link {
	color: var(--ink);
	text-decoration: underline;
}

.acid-aeo-wrap a:not(.button):hover,
.acid-aeo-wizard a:not(.button):hover,
.wp-core-ui .acid-aeo-wrap .button-link:hover,
.wp-core-ui .acid-aeo-wizard .button-link:hover {
	background: var(--acid);
	color: var(--ink);
}

.wp-core-ui .acid-aeo-wrap input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])),
.wp-core-ui .acid-aeo-wrap select,
.wp-core-ui .acid-aeo-wrap textarea,
.wp-core-ui .acid-aeo-wizard input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])),
.wp-core-ui .acid-aeo-wizard select,
.wp-core-ui .acid-aeo-wizard textarea {
	background-color: var(--paper);
	border: 1px solid var(--ink-3);
	border-radius: var(--radius);
	color: var(--ink);
}

.acid-aeo-wrap input,
.acid-aeo-wrap select,
.acid-aeo-wrap textarea { max-inline-size: 100%; }

.acid-aeo-field-bots { overflow-x: auto; }

/* An address, a number: values, set in the mono face. */
.acid-aeo-wrap input[type="url"],
.acid-aeo-wrap input[type="email"],
.acid-aeo-wrap input[type="number"],
.acid-aeo-wizard input[type="url"],
.acid-aeo-wizard input[type="email"],
.acid-aeo-wizard input[type="number"] { font-family: var(--mono); }

.wp-core-ui .acid-aeo-wrap input[type="checkbox"],
.wp-core-ui .acid-aeo-wrap input[type="radio"],
.wp-core-ui .acid-aeo-wizard input[type="checkbox"],
.wp-core-ui .acid-aeo-wizard input[type="radio"] { border: 1px solid var(--ink-3); }

.wp-core-ui .acid-aeo-wrap input[type="checkbox"],
.wp-core-ui .acid-aeo-wizard input[type="checkbox"] { border-radius: var(--radius); }

.wp-core-ui .acid-aeo-wrap input[type="checkbox"]:checked,
.wp-core-ui .acid-aeo-wrap input[type="radio"]:checked,
.wp-core-ui .acid-aeo-wizard input[type="checkbox"]:checked,
.wp-core-ui .acid-aeo-wizard input[type="radio"]:checked {
	background: var(--ink);
	border-color: var(--ink);
}

/* Core draws the tick as an image in its own blue: turn it white. */
.wp-core-ui .acid-aeo-wrap input[type="checkbox"]:checked::before,
.wp-core-ui .acid-aeo-wizard input[type="checkbox"]:checked::before { filter: brightness(0) invert(1); }

.wp-core-ui .acid-aeo-wrap input[type="radio"]:checked::before,
.wp-core-ui .acid-aeo-wizard input[type="radio"]:checked::before { background-color: var(--paper); }

/* Header ------------------------------------------------------------------ */

.acid-aeo-header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	margin-block: 12px 20px;
}

.acid-aeo-brand { align-items: center; display: flex; gap: 8px; }

.acid-aeo-mark {
	align-items: center;
	background: var(--acid);
	block-size: 26px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	color: var(--ink);
	display: inline-flex;
	font-family: var(--mono);
	font-weight: 700;
	inline-size: 26px;
	justify-content: center;
	line-height: 1;
}

.acid-aeo-brand-name { font-weight: 600; }
.acid-aeo-version { color: var(--ink-2); font-size: 12px; }

.acid-aeo-title {
	border-inline-start: 1px solid var(--line);
	font-size: 22px;
	line-height: 1.2;
	margin: 0;
	padding-inline-start: var(--gap);
}

.acid-aeo-header-actions { display: flex; gap: 8px; margin-inline-start: auto; }

/* Cards and grids --------------------------------------------------------- */

.acid-aeo-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-block-end: var(--gap);
	padding: 20px;
}

.acid-aeo-card-title { font-size: 15px; margin-block: 0 12px; }
.acid-aeo-card-danger { border-color: var(--danger); }
.acid-aeo-grid { display: grid; gap: var(--gap); }

.acid-aeo-grid-main,
.acid-aeo-grid-cards { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.acid-aeo-grid-modules { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.acid-aeo-grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.acid-aeo-grid-main > .acid-aeo-card,
.acid-aeo-grid-cards > .acid-aeo-card { margin-block-end: 0; }

/* Score: an ink ring on a line track, square caps (the markup asks for round) */

.acid-aeo-score { display: grid; justify-items: center; position: relative; }
.acid-aeo-ring { block-size: 140px; inline-size: 140px; }
.acid-aeo-ring-track { stroke: var(--line); }
.acid-aeo-ring-value { stroke: var(--ink); stroke-linecap: butt; transition: stroke-dasharray 400ms ease; }

.acid-aeo-score-number {
	font-size: 34px;
	font-weight: 700;
	inset-block-start: 48px;
	line-height: 1;
	margin: 0;
	position: absolute;
}

.acid-aeo-score-band { font-weight: 600; margin-block: 4px 0; }

.acid-aeo-band-excellent,
.acid-aeo-band-good { color: var(--success-ink); }
.acid-aeo-band-fair { color: var(--warning-ink); }
.acid-aeo-band-poor { color: var(--danger-ink); }

.acid-aeo-counts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-block: 16px;
}

/* Status tags: ink on its tint, never the acid green ---------------------- */

.acid-aeo-pill {
	align-items: center;
	background: var(--paper-2);
	border: 1px solid currentColor;
	border-radius: var(--radius);
	color: var(--ink-2);
	display: inline-flex;
	font-size: 11px;
	font-weight: 700;
	gap: 6px;
	letter-spacing: 0.04em;
	line-height: 1.6;
	padding-block: 1px;
	padding-inline: 8px;
	text-transform: uppercase;
	white-space: nowrap;
}

.acid-aeo-pill-pass { background: var(--success-tint); color: var(--success-ink); }
.acid-aeo-pill-pass::before { content: "\2713"; }
.acid-aeo-pill-warn { background: var(--warning-tint); color: var(--warning-ink); }
.acid-aeo-pill-warn::before { content: "\26A0"; }
.acid-aeo-pill-fail { background: var(--danger-tint); color: var(--danger-ink); }
.acid-aeo-pill-fail::before { content: "\2717"; }
.acid-aeo-pill-skip::before { content: "\2013"; }

/* Checks list ------------------------------------------------------------- */

.acid-aeo-checks { list-style: none; margin: 0; }

.acid-aeo-check {
	align-items: start;
	border-block-start: 1px solid var(--line);
	display: grid;
	gap: 10px;
	grid-template-columns: auto 1fr auto;
	margin: 0;
	padding-block: 12px;
}

.acid-aeo-check:first-child { border-block-start: 0; }
.acid-aeo-checks .acid-aeo-check:last-child { padding-block-end: 0; }
.acid-aeo-check-body { display: grid; gap: 2px; }
.acid-aeo-check-message { color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.acid-aeo-empty { color: var(--ink-2); }

/* Tiles, sparkline and chart: ink for what matters, ink-3 for the rest ---- */

.acid-aeo-tiles {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	margin-block-end: var(--gap);
}

.acid-aeo-tile {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: grid;
	gap: 2px;
	padding: 12px;
}

.acid-aeo-tile-number { font-size: 26px; font-weight: 700; line-height: 1.1; }
.acid-aeo-tile-label { color: var(--ink-2); font-size: 12px; }
.acid-aeo-spark { block-size: 60px; inline-size: 100%; }
.acid-aeo-spark-crawl { stroke: var(--ink-3); }
.acid-aeo-spark-referral { stroke: var(--ink); }
.acid-aeo-chart svg { block-size: 180px; inline-size: 100%; }
.acid-aeo-bar-crawl { fill: var(--ink-3); }
.acid-aeo-bar-referral { fill: var(--ink); }

.acid-aeo-legend {
	color: var(--ink-2);
	display: flex;
	font-size: 12px;
	gap: var(--gap);
}

.acid-aeo-key::before {
	block-size: 10px;
	border-radius: 0;
	content: "";
	display: inline-block;
	inline-size: 10px;
	margin-inline-end: 6px;
}

.acid-aeo-key-crawl::before { background: var(--ink-3); }
.acid-aeo-key-referral::before { background: var(--ink); }

/* Files ------------------------------------------------------------------- */

.acid-aeo-files { margin: 0; }

.acid-aeo-file {
	align-items: center;
	border-block-start: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding-block: 10px;
}

.acid-aeo-file:first-child { border-block-start: 0; }
.acid-aeo-file-name { font-family: var(--mono); }
.acid-aeo-file.is-off .acid-aeo-file-name { color: var(--ink-2); }
.acid-aeo-file-actions { display: flex; gap: 12px; margin-inline-start: auto; }

/* Tabs: the active one is an acid fill, in the rail and in the scroller alike */

/* minmax(0, …): without it the tab scroller widens the column past a phone's screen. */
.acid-aeo-settings { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }

.acid-aeo-tabs {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	padding-block-end: 4px;
}

.acid-aeo-tab {
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius);
	color: var(--ink-2);
	cursor: pointer;
	font: 600 13px/1.4 var(--sans);
	padding: 8px 12px;
	text-align: start;
	white-space: nowrap;
}

.acid-aeo-tab:hover { background: var(--paper-2); color: var(--ink); }

.acid-aeo-tab.is-active {
	background: var(--acid);
	border-color: var(--ink);
	color: var(--ink);
}

@media (min-width: 960px) {
	.acid-aeo-settings { align-items: start; grid-template-columns: 220px minmax(0, 1fr); }

	.acid-aeo-tabs {
		flex-direction: column;
		inset-block-start: 46px;
		overflow: visible;
		position: sticky;
	}
}

.acid-aeo-panel[hidden] { display: none; }

/* Fields ------------------------------------------------------------------ */

.acid-aeo-field { border: 0; margin: 0 0 var(--gap); min-inline-size: 0; padding: 0; }

.acid-aeo-label {
	display: block;
	font-weight: 600;
	margin-block-end: 4px;
	padding: 0;
}

.acid-aeo-help { color: var(--ink-2); font-size: 12px; margin-block: 4px 0; }

.acid-aeo-input {
	inline-size: 100%;
	max-inline-size: 520px;
	padding: 6px 10px;
}

.acid-aeo-textarea { font-family: inherit; max-inline-size: 100%; }
.acid-aeo-sysinfo { font-size: 12px; }
.acid-aeo-inline-field { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.acid-aeo-inline-field label { color: var(--ink-2); font-size: 12px; min-inline-size: 90px; }

.acid-aeo-group,
.acid-aeo-field-bots,
.acid-aeo-field-types,
.acid-aeo-field-repeater,
.acid-aeo-choices {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
}

.acid-aeo-subsection {
	border-block-start: 1px solid var(--line);
	margin-block-start: var(--gap);
	padding-block-start: var(--gap);
}

.acid-aeo-subsection:first-of-type { border-block-start: 0; margin-block-start: 0; padding-block-start: 0; }
.acid-aeo-subsection-title { font-size: 14px; margin-block: 0 12px; }

.acid-aeo-derived {
	background: var(--paper-2);
	border-radius: var(--radius);
	font-size: 13px;
	margin-block-end: var(--gap);
	padding: 8px 10px;
}

.acid-aeo-derived-label { color: var(--ink-2); }

.acid-aeo-badge {
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink-2);
	font-size: 11px;
	font-weight: 400;
	margin-inline-start: 6px;
	padding-inline: 8px;
}

/* Toggle: one drawing, under the two names it has (settings, wizard) ------ */

.acid-aeo-toggle,
.acid-aeo-switch {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 10px;
}

.acid-aeo-toggle input,
.acid-aeo-switch-input {
	block-size: 1px;
	inline-size: 1px;
	margin: 0;
	opacity: 0;
	position: absolute;
}

.acid-aeo-toggle-track,
.acid-aeo-switch-track {
	background: var(--paper);
	block-size: 20px;
	border: 1px solid var(--ink-3);
	border-radius: var(--radius);
	color: var(--ink-3);
	flex: 0 0 auto;
	inline-size: 36px;
	position: relative;
	transition: background var(--speed) ease;
}

/* Core sizes checkboxes and dims disabled ones at (0,2,1): three classes keep these hidden. */
.acid-aeo-wizard .acid-aeo-switch .acid-aeo-switch-input,
.acid-aeo-wrap .acid-aeo-toggle input {
	min-block-size: 0;
	min-inline-size: 0;
	opacity: 0;
}

/* The knob takes the track's colour: ink-3 off, ink on. */
.acid-aeo-toggle-track::after,
.acid-aeo-switch-track::after {
	background: currentColor;
	block-size: 12px;
	content: "";
	inline-size: 12px;
	inset-block-start: 3px;
	inset-inline-start: 3px;
	position: absolute;
	transition: inset-inline-start var(--speed) ease;
}

.acid-aeo-toggle input:checked + .acid-aeo-toggle-track,
.acid-aeo-switch-input:checked + .acid-aeo-switch-track {
	background: var(--acid);
	border-color: var(--ink);
	color: var(--ink);
}

.acid-aeo-toggle input:checked + .acid-aeo-toggle-track::after,
.acid-aeo-switch-input:checked + .acid-aeo-switch-track::after { inset-inline-start: 19px; }

.acid-aeo-toggle input:focus-visible + .acid-aeo-toggle-track,
.acid-aeo-switch-input:focus-visible + .acid-aeo-switch-track {
	box-shadow: 0 0 0 4px var(--acid);
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

/* Chips ------------------------------------------------------------------- */

.acid-aeo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
}

.acid-aeo-chip {
	align-items: center;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: inline-flex;
	font-size: 12px;
	gap: 6px;
	padding-block: 2px;
	padding-inline: 10px 6px;
}

.acid-aeo-chip-remove {
	background: none;
	border: 0;
	color: var(--ink-2);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0 2px;
}

.acid-aeo-chip-remove:hover { color: var(--danger-ink); }
.acid-aeo-chip-input { max-inline-size: 340px; }

/* Checkbox lists, choice cards, repeaters --------------------------------- */

.acid-aeo-options { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.acid-aeo-option { align-items: center; display: flex; gap: 6px; }

.acid-aeo-choice-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.acid-aeo-choice {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 12px;
}

/* The chosen one is framed in ink, twice. */
.acid-aeo-choice:has(input:checked) {
	border-color: var(--ink);
	outline: 1px solid var(--ink);
}

.acid-aeo-choice-title { font-weight: 600; }
.acid-aeo-choice-desc { color: var(--ink-2); font-size: 12px; }
.acid-aeo-rows { display: grid; gap: 10px; margin-block-end: 10px; }

.acid-aeo-row {
	align-items: start;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: flex;
	gap: 10px;
	padding: 12px;
}

.acid-aeo-row-fields {
	display: grid;
	flex: 1 1 auto;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.acid-aeo-row-fields .acid-aeo-field { margin-block-end: 0; }

/* Media ------------------------------------------------------------------- */

.acid-aeo-media { align-items: center; display: flex; gap: 10px; }

.acid-aeo-media-preview {
	block-size: 56px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	inline-size: 56px;
	object-fit: cover;
}

.acid-aeo-media-preview.is-empty { display: none; }

/* Tables ------------------------------------------------------------------ */

.acid-aeo-table { border-collapse: collapse; inline-size: 100%; margin-block: 8px; }

.acid-aeo-table th,
.acid-aeo-table td {
	border-block-end: 1px solid var(--line);
	font-size: 13px;
	padding: 8px 6px;
	text-align: start;
	vertical-align: top;
}

.acid-aeo-table th { font-weight: 600; }
.acid-aeo-bots-vendor th { background: var(--paper-2); font-size: 12px; text-transform: uppercase; }
.acid-aeo-bots-table select { max-inline-size: 240px; }

.acid-aeo-table td a,
.acid-aeo-table th a { word-break: break-all; }

/* Toolbar, pagination, dialogs, toasts ------------------------------------ */

.acid-aeo-toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: var(--gap);
}

.acid-aeo-toolbar-end { display: flex; gap: 8px; margin-inline-start: auto; }
.acid-aeo-range { display: flex; gap: 4px; }

.acid-aeo-pagination {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-block-start: 10px;
}

.acid-aeo-page-info { color: var(--ink-2); font-size: 12px; }

.acid-aeo-form-actions {
	border-block-start: 1px solid var(--line);
	display: flex;
	gap: 8px;
	margin-block-start: var(--gap);
	padding-block-start: var(--gap);
}

.acid-aeo-dialog {
	background: var(--paper);
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	color: var(--ink);
	max-block-size: 80vh;
	max-inline-size: min(860px, 92vw);
	padding: 20px;
}

.acid-aeo-dialog::backdrop { background: rgba(5, 5, 5, 0.45); }
.acid-aeo-dialog-title { font-size: 15px; margin-block: 0 12px; }

.acid-aeo-dialog-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-block-start: var(--gap);
}

/* A generated file is shown on the dark surface, here and in the wizard. */
.acid-aeo-pre {
	background: var(--ink);
	border-radius: var(--radius);
	color: var(--line);
	font: 12px/1.55 var(--mono);
	max-block-size: 55vh;
	overflow: auto;
	padding: 12px;
	white-space: pre-wrap;
	word-break: break-word;
}

.acid-aeo-toasts {
	display: grid;
	gap: 8px;
	inset-block-end: 24px;
	inset-inline-end: 24px;
	position: fixed;
	z-index: 100;
}

.acid-aeo-toast {
	background: var(--ink);
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	color: var(--paper);
	font-size: 13px;
	max-inline-size: 380px;
	padding: 10px 14px;
}

.acid-aeo-toast-success { background: var(--acid); color: var(--ink); }
.acid-aeo-toast-error { background: var(--danger-tint); border-color: var(--danger); color: var(--danger-ink); }

/* Focus and motion -------------------------------------------------------- */

.acid-aeo-wrap :focus-visible,
.acid-aeo-wizard :focus-visible,
.wp-core-ui .acid-aeo-wrap .button:focus-visible,
.wp-core-ui .acid-aeo-wizard .button:focus-visible,
.wp-core-ui .acid-aeo-wrap .button-link:focus-visible,
.wp-core-ui .acid-aeo-wizard .button-link:focus-visible,
.wp-core-ui .acid-aeo-wrap input:focus-visible,
.wp-core-ui .acid-aeo-wrap select:focus-visible,
.wp-core-ui .acid-aeo-wrap textarea:focus-visible,
.wp-core-ui .acid-aeo-wizard input:focus-visible,
.wp-core-ui .acid-aeo-wizard select:focus-visible,
.wp-core-ui .acid-aeo-wizard textarea:focus-visible {
	border-color: var(--ink);
	box-shadow: 0 0 0 4px var(--acid);
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

/* A click is not a keyboard visit: no ring, and none of core's blue either. */
.acid-aeo-wrap :focus:not(:focus-visible),
.acid-aeo-wizard :focus:not(:focus-visible) {
	box-shadow: none;
	outline: 0;
}

.acid-aeo-is-busy { opacity: 0.6; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.acid-aeo-wrap *,
	.acid-aeo-wrap *::before,
	.acid-aeo-wrap *::after,
	.acid-aeo-wizard *,
	.acid-aeo-wizard *::before,
	.acid-aeo-wizard *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}