/**
 * AeroIDX, the SEO settings modal (Details and Agent Listings gears).
 * Class names still say "sheet": it began as a side sheet, and the markup
 * contract (and its tests) kept the name.
 *
 * Markup: src/Settings/SeoSheet.php. Behaviour: assets/js/seo-sheet.js.
 * Colours and radii come from tokens.css; this file declares no colour of its
 * own. The one custom property declared here is an easing curve, scoped to the
 * modal, because tokens.css only carries the standard (in-out) curve and the
 * modal's motion is all "something arrived" (ease-out). (The one exception to
 * "no --ax-* of its own" is the control block under "Form controls", which
 * re-points two tokens on the control element itself, and says why.)
 *
 * Sizes follow the approved canvas (desktop 1440, tablet 900, phone 390):
 * every control that is pressed with a finger is 44px tall (48px for the phone
 * footer), except the view chips and the Simple | Advanced segments, which the
 * canvas draws at 36px (40px on phones).
 *
 * Layout, once the script has taken over (`is-ready`):
 *
 *   ┌ head: title, close ─────────────────────────────────────┐
 *   │ tabs: Page | Search & sharing                            │
 *   ├ settings (~55%, scrolls) ─────┬ preview (~45%, scrolls) ─┤
 *   │                               │ health, views, card,     │
 *   │                               │ meters                   │
 *   ├ foot: unsaved / confirm ──────┴──────── Cancel · Save ───┤
 *
 * Head and foot never scroll; each column has its own scroll, so the preview
 * stays in view (sticky in effect) however long the settings get. Below 960px
 * it is one column with the preview on top, collapsible.
 *
 * Stacking, one documented scale (no ad-hoc values anywhere in this file):
 *
 *     9990   WordPress admin menu (core)
 *    99999   WordPress admin bar (core). The modal starts BELOW it, so the
 *            bar stays usable and is never dimmed.
 *   100000   this modal: above every admin chrome layer.
 *   160000   wp.media modal (core), opened FROM this one by "Choose an image".
 *            It has to sit above, and core's value already does.
 *
 * The modal is position: fixed. Nothing between it and <body> is transformed,
 * so fixed positioning is relative to the viewport.
 *
 * Selects are native: their option list is drawn by the browser above the
 * page, so the scrolling columns cannot clip it. Nothing here builds a custom
 * dropdown, on purpose.
 *
 * Every rule that sets `display` also has to respect the `hidden` attribute,
 * because the markup relies on it (controls that need scripting ship hidden).
 * The first rule below makes that explicit instead of hoping each selector's
 * specificity happens to lose to the user-agent stylesheet.
 */

.aeroidx-seo-sheet [hidden] {
	display: none !important;
}

.aeroidx-seo-sheet {
	/* ease-out-quart: fast start, soft landing. Motion here only says "this
	 * just appeared"; nothing waits for it. */
	--aeroidx-seo-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
}

body.aeroidx-seo-sheet-open {
	overflow: hidden;
}

/*
 * The overlay layout only applies once the script has taken over (`is-ready`).
 * Without it the <noscript> rule in the markup shows the sheet inline, as a
 * plain form, and a fixed overlay with no way to close it would trap the page.
 */
.aeroidx-seo-sheet.is-ready {
	position: fixed;
	inset: var(--wp-admin--admin-bar--height, 32px) 0 0 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.aeroidx-seo-sheet.is-ready[hidden] {
	display: none;
}

.aeroidx-seo-sheet:not(.is-ready) .aeroidx-seo-sheet__backdrop {
	display: none;
}

.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: var(--ax-scrim);
	animation: aeroidx-seo-fade-in 200ms var(--aeroidx-seo-ease-out);
}

.aeroidx-seo-sheet__panel {
	display: flex;
	flex-direction: column;
	background: var(--ax-card);
	color: var(--ax-ink);
	border: 1px solid var(--ax-border-soft);
	border-radius: var(--ax-radius-card);
}

/*
 * 88vh tall, but never taller than the space under the admin bar: the root
 * already starts below the bar, so 100% here is exactly what is left. Clipped
 * (overflow: hidden) so the preview column's tint follows the rounded corner;
 * the columns scroll inside, never the panel.
 */
.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__panel {
	position: relative;
	width: min(1200px, 100%);
	height: min(88vh, 100%);
	overflow: hidden;
	border-radius: var(--ax-radius-md);
	box-shadow: var(--ax-shadow-overlay);
	animation: aeroidx-seo-modal-in 200ms var(--aeroidx-seo-ease-out);
}

/* The panel takes focus on open only so the dialog is announced; the ring
 * belongs on the controls inside it. */
.aeroidx-seo-sheet__panel:focus {
	outline: none;
}

.aeroidx-seo-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ax-hairline);
}

/* In the modal the tabs close the header, so the line moves under them. */
.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__head {
	padding: 16px 16px 4px 28px;
	border-bottom: 0;
}

.aeroidx-seo-sheet__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.25;
	font-weight: 600;
	color: var(--ax-ink);
}

.aeroidx-seo-sheet .aeroidx-seo-sheet__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	padding: 0;
	line-height: 1;
	font-size: 1.25rem;
}

/* The modal's close is a bare 44px icon button, not a bordered .button. The
 * selector out-ranks `.aeroidx-settings .button` and its hover. */
.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__close,
.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__close:hover {
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	border: 0;
	border-radius: var(--ax-radius-sm);
	background: transparent;
	color: var(--ax-secondary);
}

.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__close:hover {
	background: var(--ax-neutral-100);
	color: var(--ax-ink);
}

/*
 * One focus ring for every WordPress button inside the modal: the violet the
 * rest of the plugin uses, replacing core's blue box-shadow so the modal does
 * not show two different focus styles side by side.
 */
.aeroidx-seo-sheet .button:focus-visible {
	outline: 2px solid var(--ax-violet-500);
	outline-offset: 2px;
	box-shadow: none;
}

.aeroidx-seo-sheet__segments {
	display: flex;
	gap: 4px;
	padding: 10px 20px 0;
	border-bottom: 1px solid var(--ax-hairline);
}

.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__segments {
	padding: 0 28px;
}

.aeroidx-seo-sheet__segment {
	flex: none;
	white-space: nowrap;
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin: 0 0 -1px;
	min-height: 44px;
	padding: 0 14px;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--ax-muted-on-fill);
	cursor: pointer;
	transition: color 150ms var(--aeroidx-seo-ease-out), border-color 150ms var(--aeroidx-seo-ease-out);
}

.aeroidx-seo-sheet__segment:hover {
	color: var(--ax-ink);
}

.aeroidx-seo-sheet__segment:active {
	color: var(--ax-ink);
	border-bottom-color: var(--ax-border);
}

.aeroidx-seo-sheet__segment[aria-selected="true"] {
	font-weight: 600;
	color: var(--ax-ink);
	border-bottom-color: var(--ax-violet-700);
}

.aeroidx-seo-sheet__segment:focus-visible {
	outline: 2px solid var(--ax-violet-500);
	outline-offset: -2px;
	border-radius: var(--ax-radius-sm);
}

.aeroidx-seo-sheet__segment:disabled {
	color: var(--ax-muted);
	opacity: 0.6;
	cursor: not-allowed;
}

/* The form holds the two columns and the footer; the footer stays pinned. */
.aeroidx-seo-sheet__form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/*
 * Without the script these wrappers are plain blocks, so the no-JS form reads
 * top to bottom exactly as before: Page fields, then the SEO fields.
 */
.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__body {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	/* 55 / 45. minmax(0, …) so a long URL or template cannot widen a column. */
	grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
}

.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__main,
.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__aside {
	min-height: 0;
	overflow-y: auto;
	/* Scrolling past the end of a column must not scroll the admin page. */
	overscroll-behavior: contain;
}

/* A 1px divider, not an accent: the tint is what separates the columns. */
.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__aside {
	padding: 24px;
	border-left: 1px solid var(--ax-hairline);
	background: var(--ax-zebra);
}

.aeroidx-seo-sheet__section {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 20px;
}

/* In the modal the column scrolls, not the section. */
.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__section {
	overflow: visible;
	padding: 24px 28px 32px;
}

/* Tab switch: the panel that just appeared fades in. From-only keyframes, so
 * with the animation off (reduced motion) it is simply there. */
.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__section:not([hidden]) {
	animation: aeroidx-seo-fade-in 150ms var(--aeroidx-seo-ease-out);
}

/* The Page panel is both the scroll area (flex: 1, so it fills the sheet) and
 * the page-config grid. Without align-content the grid rows stretch to that
 * height and open a gap between them. One column, too: at 640px two columns
 * leave the permalink too narrow to show its base, slug and pattern. */
.aeroidx-seo-sheet__section.aeroidx-page-config {
	grid-template-columns: 1fr;
	align-content: start;
	gap: 24px;
}

/* Only one panel is visible at a time once scripting runs; the other is
 * `hidden`, so flex sizing is only ever asked of the visible one. */
.aeroidx-seo-sheet__section[hidden] {
	display: none;
}

.aeroidx-seo-sheet__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px 14px;
	padding: 12px 20px;
	border-top: 1px solid var(--ax-hairline);
	background: var(--ax-card);
}

.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__foot {
	padding: 12px 24px;
}

/* margin-top: 0 undoes admin.css's 4px on this shared row: the unsaved
 * question swaps in for it, and with the 4px the footer jumped by that much
 * every time the question came and went. */
.aeroidx-seo-sheet__foot .aeroidx-page-config__actions {
	margin-top: 0;
	margin-left: auto;
}

.aeroidx-seo-sheet__dirty {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--ax-radius-pill);
	background: var(--ax-warning-wash);
	color: var(--ax-warning-ink);
	border: 1px solid var(--ax-warning-edge);
	font-size: 12px;
	font-weight: 600;
}

.aeroidx-seo-sheet__confirm {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: 1 1 100%;
}

/*
 * No wash behind the question: the footer stays white and the warning is
 * carried by the icon and the amber text, like the other warnings here. While
 * the question is up, Cancel and Save are hidden by the script, so this row is
 * the whole footer.
 */
.aeroidx-seo-sheet__confirm-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: auto;
	color: var(--ax-warning-ink);
	font-weight: 600;
}

.aeroidx-seo-sheet__confirm-text svg {
	flex: none;
}

.aeroidx-seo-sheet__foot:has(.aeroidx-seo-sheet__confirm:not([hidden])) .aeroidx-seo-sheet__dirty {
	display: none;
}

/* ── Simple | Advanced and presets ─────────────────────────────────────── */

/* Simple | Advanced as two choice cards, the same card as the presets below
 * (edge, violet wash and inner ring when chosen), so the whole column speaks
 * one language. The radio itself is hidden: the card is the target, and the
 * ring shows focus. */
.aeroidx-seo-sheet__modebar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 28px;
}

.aeroidx-seo-sheet__mode {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 44px;
	padding: 12px 14px;
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius-md);
	background: var(--ax-card);
	cursor: pointer;
}

.aeroidx-seo-sheet__mode:hover {
	background: var(--ax-zebra);
}

.aeroidx-seo-sheet__mode:has(input:checked) {
	border-color: var(--ax-violet-700);
	background: var(--ax-violet-wash);
	box-shadow: inset 0 0 0 1px var(--ax-violet-700);
}

.aeroidx-seo-sheet__mode:has(input:focus-visible) {
	outline: 2px solid var(--ax-violet-500);
	outline-offset: 1px;
}

.aeroidx-seo-sheet__mode input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.aeroidx-seo-sheet__mode-name {
	font-weight: 600;
	color: var(--ax-ink);
}

.aeroidx-seo-sheet__mode-note {
	font-size: 13px;
	color: var(--ax-muted-on-fill);
}

.aeroidx-seo-sheet__presets,
.aeroidx-seo-sheet__group {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.aeroidx-seo-sheet__preset {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 12px;
	row-gap: 2px;
	align-items: start;
	margin: 0 0 8px;
	padding: 12px 14px;
	border: 1px solid var(--ax-border);
	border-radius: 10px;
	cursor: pointer;
}

.aeroidx-seo-sheet__preset:hover {
	background: var(--ax-zebra);
}

.aeroidx-seo-sheet__preset:has(input:checked) {
	border-color: var(--ax-violet-700);
	background: var(--ax-violet-wash);
	/* A second ring inside the border: the choice reads without relying on
	 * the tint alone. */
	box-shadow: inset 0 0 0 1px var(--ax-violet-700);
}

.aeroidx-seo-sheet__preset:has(input:focus-visible) {
	outline: 2px solid var(--ax-violet-500);
	outline-offset: 1px;
}

.aeroidx-seo-sheet__preset input {
	grid-row: 1 / span 3;
	margin-top: 3px;
}

.aeroidx-seo-sheet__preset-name {
	font-weight: 600;
}

.aeroidx-seo-sheet__preset-note {
	color: var(--ax-muted-on-fill);
	font-size: 13px;
}

.aeroidx-seo-sheet__preset-template {
	justify-self: start;
	font-family: var(--ax-font-mono);
	font-size: 12px;
	color: var(--ax-secondary);
	word-break: break-word;
}

.aeroidx-seo-sheet__advanced .aeroidx-page-config__field {
	margin: 0 0 20px;
}

/* Advanced groups: a hairline above each, the legend floated off that line so
 * it does not sit on it. */
.aeroidx-seo-sheet__advanced .aeroidx-seo-sheet__group {
	padding: 20px 0 0;
	border-top: 1px solid var(--ax-hairline);
}

.aeroidx-seo-sheet__advanced .aeroidx-seo-sheet__group > legend {
	float: left;
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
}

.aeroidx-seo-sheet__advanced .aeroidx-seo-sheet__group > legend + * {
	clear: both;
}

.aeroidx-seo-sheet__tokens code {
	margin-right: 4px;
}

/* ── Sharing image ─────────────────────────────────────────────────────── */

/* Its own section in both modes, under a hairline like the Advanced groups. */
.aeroidx-seo-image {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 20px;
	padding: 20px 0 0;
	border-top: 1px solid var(--ax-hairline);
}

.aeroidx-seo-image__heading {
	margin: 0;
}

.aeroidx-seo-image .aeroidx-field__help {
	margin: 0;
}

/* The drop zone. The dashed edge is --ax-border-control, so it meets the 3:1
 * a control boundary needs. Only one of idle / over / busy shows at a time. */
.aeroidx-seo-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 28px 24px;
	border: 2px dashed var(--ax-border-control);
	border-radius: var(--ax-radius-md);
	background: var(--ax-zebra);
	text-align: center;
	transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}

.aeroidx-seo-drop__idle,
.aeroidx-seo-drop__over,
.aeroidx-seo-drop__busy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.aeroidx-seo-drop__over,
.aeroidx-seo-drop.is-over .aeroidx-seo-drop__idle,
.aeroidx-seo-drop.is-busy .aeroidx-seo-drop__idle {
	display: none;
}

.aeroidx-seo-drop.is-over {
	border-style: solid;
	border-color: var(--ax-violet-700);
	background: var(--ax-violet-wash);
}

.aeroidx-seo-drop.is-over .aeroidx-seo-drop__over {
	display: flex;
}

.aeroidx-seo-drop.is-invalid {
	border-color: var(--ax-danger);
}

.aeroidx-seo-drop__icon {
	color: var(--ax-muted);
}

.aeroidx-seo-drop.is-over .aeroidx-seo-drop__icon,
.aeroidx-seo-drop__spinner {
	color: var(--ax-violet-700);
}

.aeroidx-seo-drop__lead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 4px;
	min-height: 44px;
	margin: 0;
	font-size: 15px;
	color: var(--ax-secondary);
}

.aeroidx-seo-drop.is-over .aeroidx-seo-drop__lead {
	font-weight: 600;
	color: var(--ax-violet-700);
}

.aeroidx-seo-drop__hint {
	margin: 0;
	font-size: 13px;
	color: var(--ax-muted-on-fill);
}

/* A link-looking button: it opens the Media Library, it does not navigate. */
.aeroidx-seo-drop__pick {
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: var(--ax-violet-700);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.aeroidx-seo-drop__pick:focus-visible {
	outline: 2px solid var(--ax-violet-500);
	outline-offset: 2px;
	border-radius: var(--ax-radius-sm);
}

.aeroidx-seo-drop__spinner {
	animation: aeroidx-seo-spin 0.9s linear infinite;
}

.aeroidx-seo-drop__progress {
	width: min(260px, 100%);
	height: 6px;
	border-radius: 3px;
	background: var(--ax-locked);
	overflow: hidden;
}

.aeroidx-seo-drop__progress i {
	display: block;
	height: 100%;
	background: var(--ax-violet-700);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease-out;
}

/* Announced, not shown: the visible state already says it. */
.aeroidx-seo-image__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.aeroidx-seo-image__error {
	margin: 0;
	font-size: 13px;
	color: var(--ax-danger);
}

/* The chosen image: a 1.91:1 thumbnail, as Facebook and X crop it. */
.aeroidx-seo-chosen {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px;
	border: 1px solid var(--ax-border-control);
	border-radius: var(--ax-radius-md);
	background: var(--ax-card);
}

.aeroidx-seo-chosen__thumb {
	flex: none;
	display: block;
	width: 200px;
	max-width: 40%;
	aspect-ratio: 1.91 / 1;
	object-fit: cover;
	border-radius: var(--ax-radius-sm);
	background: var(--ax-locked);
}

.aeroidx-seo-chosen__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.aeroidx-seo-chosen__name {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aeroidx-seo-chosen__size {
	font-size: 13px;
	color: var(--ax-muted-on-fill);
}

.aeroidx-seo-chosen__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-chosen__actions .button {
	min-height: 40px;
	padding: 0 14px;
	border-radius: var(--ax-radius-sm);
	border-color: var(--ax-border-control);
	color: var(--ax-ink);
}

/* Replace is the one outlined-violet button, as in the canvas. */
.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-chosen__actions .aeroidx-seo-chosen__replace {
	border-color: var(--ax-violet-700);
	color: var(--ax-violet-700);
	font-weight: 600;
}

/* ── Preview ───────────────────────────────────────────────────────────── */

/*
 * The preview is its own column now, and the column is the tinted surface.
 * The shell itself draws no box: a bordered card inside a tinted column inside
 * the modal would be three nested containers for one thing. The simulated
 * result (.aeroidx-seo-card) is the only white card here, because it stands
 * for what a search engine or a feed would draw.
 */
.aeroidx-seo-preview {
	margin: 0;
}

/* One rhythm for the whole column: 18px between the bar, the views, the card,
 * the meters and the checks, so none of them carries its own margin. */
.aeroidx-seo-preview,
.aeroidx-seo-preview__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.aeroidx-seo-preview[hidden] {
	display: none;
}

.aeroidx-seo-preview__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.aeroidx-seo-preview__heading {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.25;
	font-weight: 600;
	color: var(--ax-ink);
}

/*
 * Only the single-column layout can collapse the preview, so the button is
 * hidden here and shown inside the 960px query. Specific enough to beat
 * core's `.wp-core-ui .button { display: inline-block }`.
 */
.aeroidx-seo-preview .aeroidx-seo-preview__toggle.button {
	display: none;
}

/* The checks sit in one white card, like the simulated result: it is a
 * readout, not a setting. Nothing to say yet (before the first answer) means
 * no empty box. */
.aeroidx-seo-health {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px;
	border: 1px solid var(--ax-hairline);
	border-radius: var(--ax-radius-md);
	background: var(--ax-card);
}

.aeroidx-seo-health:empty {
	display: none;
}

/* Folded to one line: glyph, verdict, the first thing to fix, chevron. */
.aeroidx-seo-health__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 40px;
	margin: -6px 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ax-ink);
	font: inherit;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}

.aeroidx-seo-health__toggle:focus-visible {
	outline: 2px solid var(--ax-violet-500);
	outline-offset: 4px;
	border-radius: 4px;
}

.aeroidx-seo-health__glyph {
	flex: none;
	font-weight: 700;
}

.aeroidx-seo-health__toggle[data-state="ok"] .aeroidx-seo-health__glyph {
	color: var(--ax-success-ink);
}

.aeroidx-seo-health__toggle[data-state="warn"] .aeroidx-seo-health__glyph {
	color: var(--ax-warning-ink);
}

.aeroidx-seo-health__line {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aeroidx-seo-health__chevron {
	flex: none;
	color: var(--ax-muted-on-fill);
	transition: transform 150ms var(--aeroidx-seo-ease-out);
}

.aeroidx-seo-health__toggle[aria-expanded="true"] .aeroidx-seo-health__chevron {
	transform: rotate(180deg);
}

.aeroidx-seo-health__details {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--ax-hairline);
}

.aeroidx-seo-health__details[hidden] {
	display: none;
}

.aeroidx-seo-health__summary {
	margin: 0;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.aeroidx-seo-health__chevron {
		transition: none;
	}
}

.aeroidx-seo-health__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Text and a glyph, never colour alone: the tick and the "!" say pass or
 * fail without the green and the amber. */
.aeroidx-seo-health__item {
	margin: 0;
	font-size: 13px;
}

.aeroidx-seo-health__item::before {
	content: "\2713\00a0";
	font-weight: 700;
}

.aeroidx-seo-health__item[data-state="ok"] {
	color: var(--ax-success-ink);
}

.aeroidx-seo-health__item[data-state="warn"] {
	color: var(--ax-warning-ink);
}

.aeroidx-seo-health__item[data-state="warn"]::before {
	content: "!\00a0";
}

/* Information, not a check: neutral, never coloured as pass or fail. */
.aeroidx-seo-health__info {
	margin: 0;
	font-size: 12px;
	color: var(--ax-muted-on-fill);
}

.aeroidx-seo-preview__views {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Pill chips. Hover, active and disabled come from core's .button; the
 * pressed view is a selection, so it is filled (white on violet-700, 7.1:1), and
 * keeps the fill under the pointer. */
.aeroidx-settings .aeroidx-seo-preview .aeroidx-seo-preview__view {
	min-height: 36px;
	padding: 0 12px;
	border-radius: var(--ax-radius-pill);
	font-size: 13px;
	line-height: 1.2;
}

.aeroidx-settings .aeroidx-seo-preview .aeroidx-seo-preview__view[aria-pressed="true"],
.aeroidx-settings .aeroidx-seo-preview .aeroidx-seo-preview__view[aria-pressed="true"]:hover {
	background: var(--ax-violet-700);
	border-color: var(--ax-violet-700);
	color: var(--ax-on-accent);
}

/*
 * Tall enough for the Google card, so the first draw replaces the skeleton
 * without pushing the meters down by much (the share cards are taller, and
 * that change is the owner's own choice of view).
 */
.aeroidx-seo-preview__stage {
	min-height: 120px;
	margin: 0;
}

/* A newer preview is on its way: the last card stays, dimmed, instead of a
 * flash of skeleton on every keystroke. */
.aeroidx-seo-preview__stage[aria-busy="true"] > .aeroidx-seo-card {
	opacity: 0.6;
	transition: opacity 150ms var(--aeroidx-seo-ease-out);
}

/* ── Preview states: loading and error ─────────────────────────────────── */

.aeroidx-seo-skeleton {
	display: grid;
	gap: 10px;
	padding: 14px;
	border-radius: var(--ax-radius-md);
	background: var(--ax-card);
	border: 1px solid var(--ax-hairline);
}

.aeroidx-seo-skeleton__line {
	display: block;
	height: 10px;
	border-radius: var(--ax-radius-full);
	background: var(--ax-locked);
	animation: aeroidx-seo-pulse 1.2s ease-in-out infinite alternate;
}

.aeroidx-seo-skeleton__line--short {
	width: 40%;
}

/* The title line: a touch taller, as the real title is. */
.aeroidx-seo-skeleton__line--title {
	height: 14px;
	width: 85%;
}

.aeroidx-seo-skeleton__line--mid {
	width: 70%;
}

/* A preview hiccup, not a failure of the settings: neutral, never alarm red. */
.aeroidx-seo-preview__error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 12px 14px;
	border-radius: var(--ax-radius-md);
	background: var(--ax-card);
	border: 1px solid var(--ax-border);
	color: var(--ax-secondary);
}

.aeroidx-seo-preview__error p {
	margin: 0 auto 0 0;
}

.aeroidx-seo-preview__meters {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

/* Name left, "58 of 60 characters" right, the bar under both. The count takes
 * the state's ink, so the verdict is the words and the bar, not colour alone. */
.aeroidx-seo-meter {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 8px;
	font-size: 13px;
}

.aeroidx-seo-meter > span {
	font-weight: 600;
	color: var(--ax-ink);
}

.aeroidx-seo-meter > b {
	font-weight: 400;
	color: var(--ax-success-ink);
}

.aeroidx-seo-meter[data-state="short"] > b,
.aeroidx-seo-meter[data-state="over"] > b {
	color: var(--ax-warning-ink);
}

.aeroidx-seo-meter__bar {
	grid-column: 1 / -1;
	height: 6px;
	overflow: hidden;
	border-radius: var(--ax-radius-full);
	background: var(--ax-hairline);
}

.aeroidx-seo-meter__bar i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ax-success);
	transition: width 150ms var(--ax-ease);
}

.aeroidx-seo-meter[data-state="short"] .aeroidx-seo-meter__bar i {
	background: var(--ax-warning-edge);
}

.aeroidx-seo-meter[data-state="over"] .aeroidx-seo-meter__bar i {
	background: var(--ax-danger-solid);
}

/* ── Preview cards ─────────────────────────────────────────────────────── */

.aeroidx-seo-card {
	padding: 18px 20px;
	border-radius: var(--ax-radius-md);
	background: var(--ax-neutral-0);
	border: 1px solid var(--ax-hairline);
	overflow: hidden;
	line-height: 1.35;
}

.aeroidx-seo-card__url,
.aeroidx-seo-card__host {
	font-size: 12px;
	color: var(--ax-muted);
	overflow-wrap: anywhere;
}

.aeroidx-seo-card__title {
	margin: 2px 0;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 400;
	color: var(--ax-sim-google-link);
	overflow-wrap: anywhere;
}

.aeroidx-seo-card__desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ax-secondary);
	overflow-wrap: anywhere;
}

.aeroidx-seo-card--facebook,
.aeroidx-seo-card--x {
	padding: 0;
}

.aeroidx-seo-card__image {
	position: relative;
	aspect-ratio: 1.91 / 1;
	background: var(--ax-fill-locked);
	overflow: hidden;
}

.aeroidx-seo-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aeroidx-seo-card__image.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ax-muted);
	font-size: 12px;
}

.aeroidx-seo-card__body {
	padding: 10px 12px;
}

.aeroidx-seo-card--facebook .aeroidx-seo-card__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--ax-ink);
}

.aeroidx-seo-card--x {
	border-radius: var(--ax-radius-lg);
}

.aeroidx-seo-card--x .aeroidx-seo-card__host {
	padding: 8px 12px;
}

.aeroidx-seo-card__badge {
	position: absolute;
	left: 8px;
	bottom: 8px;
	max-width: calc(100% - 16px);
	padding: 2px 8px;
	border-radius: var(--ax-radius-sm);
	background: rgb(0 0 0 / 0.7);
	color: var(--ax-neutral-0);
	font-size: 12px;
}

/* ── Motion ────────────────────────────────────────────────────────────── */

/* From-only keyframes: the end state is the element's own style, so if an
 * animation never runs (reduced motion, a slow frame) nothing stays hidden. */
@keyframes aeroidx-seo-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes aeroidx-seo-fade-in {
	from {
		opacity: 0;
	}
}

@keyframes aeroidx-seo-modal-in {
	from {
		opacity: 0;
		transform: scale(0.98);
	}
}

/* Loading, the one looping motion: says "still working" without a spinner. */
@keyframes aeroidx-seo-pulse {
	to {
		opacity: 0.55;
	}
}

/* ── Form controls ─────────────────────────────────────────────────────── */

/*
 * WCAG 1.4.11 (non-text contrast, 3:1). Inputs, selects and textareas in the
 * modal had a --ax-border edge (black at 18%, 1.53:1 on white) on the grey
 * input fill (1.16:1 against the white card): the field was found by its text,
 * not its shape. Now the boundary is --ax-border-control (3.38:1 on white) on
 * a white fill, as the canvas draws them.
 *
 * Done by re-pointing the two tokens ON THE CONTROL ITSELF, not by writing a
 * border here. admin.css reads var(--ax-border) and var(--ax-input) in a dozen
 * state rules (focus, a select's hover, its mouse-focus reset), and a custom
 * property set on the element reaches all of them whatever their specificity.
 * Scoped to the modal: the rest of the admin keeps its edge until it has its
 * own audit, and tokens.css stays the one place the colour lives.
 */
.aeroidx-seo-sheet .aeroidx-field__input,
.aeroidx-seo-sheet .aeroidx-page-config__permalink {
	--ax-border: var(--ax-border-control);
	--ax-input: var(--ax-neutral-0);
	--ax-input-focus: var(--ax-neutral-0);
}

.aeroidx-seo-sheet .aeroidx-field__input,
.aeroidx-seo-sheet .aeroidx-page-config__permalink {
	min-height: 44px;
}

/*
 * Page URL as the canvas draws it: text, field, text. Only the base is
 * editable, so only the base is a box. The host and the {address}/{id} tail
 * are plain text around it; before, all three sat inside one bordered shape
 * and the fixed parts looked typeable. Monospace, so the three read as one
 * URL and the script's width in ch fits the word exactly. content-box: that
 * width is the text's, and the padding goes outside it instead of eating it.
 * Wraps on narrow screens rather than truncating the host.
 */
.aeroidx-seo-sheet .aeroidx-page-config__permalink--pattern {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
	font-family: var(--ax-font-mono);
	font-size: 13px;
	color: var(--ax-secondary);
}

.aeroidx-seo-sheet .aeroidx-page-config__permalink--pattern:focus-within {
	border-color: transparent;
	box-shadow: none;
	background: transparent;
}

.aeroidx-seo-sheet .aeroidx-page-config__permalink--pattern .aeroidx-page-config__permalink-base,
.aeroidx-seo-sheet .aeroidx-page-config__permalink--pattern .aeroidx-page-config__permalink-suffix {
	max-width: none;
	padding: 0;
	font-size: inherit;
	color: inherit;
	white-space: normal;
	overflow-wrap: anywhere;
}

.aeroidx-settings .aeroidx-seo-sheet .aeroidx-page-config__permalink--pattern .aeroidx-field__input {
	flex: none;
	box-sizing: content-box;
	/* Room for a longer word from the start (the script still grows it past
	 * this as the person types); never wider than the row, so a very long
	 * base wraps onto its own line instead of pushing the modal sideways. */
	min-width: 16ch;
	max-width: calc(100% - 22px);
	min-height: 0;
	height: 26px; /* + 8px padding top and bottom + 1px edges = 44px */
	padding: 8px 10px;
	border: 1px solid var(--ax-border-control);
	border-radius: var(--ax-radius-sm);
	background: var(--ax-card);
	font-family: inherit;
	font-size: inherit;
	color: var(--ax-ink);
}

.aeroidx-settings .aeroidx-seo-sheet .aeroidx-page-config__permalink--pattern .aeroidx-field__input:focus {
	border-color: var(--ax-violet-500);
	box-shadow: 0 0 0 1px var(--ax-violet-500);
	background: var(--ax-card);
}

/* Why saving would refuse the typed base (a page already on that slug),
 * under the field while the owner types. The field edge goes red with it. */
.aeroidx-seo-sheet .aeroidx-seo-sheet__base-error {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--ax-danger);
}

.aeroidx-seo-sheet .aeroidx-seo-sheet__base-error[hidden] {
	display: none;
}

.aeroidx-settings .aeroidx-seo-sheet .aeroidx-page-config__permalink--pattern .aeroidx-field__input[aria-invalid="true"] {
	border-color: var(--ax-danger);
}

.aeroidx-settings .aeroidx-seo-sheet .aeroidx-page-config__permalink--pattern .aeroidx-field__input[aria-invalid="true"]:focus {
	border-color: var(--ax-danger);
	box-shadow: 0 0 0 1px var(--ax-danger);
}

/* Every help under a Page field sits 8px clear of its control, in both
 * modals (it used to be only the URL's, so Title and Status hugged theirs). */
.aeroidx-seo-sheet .aeroidx-page-config__field .aeroidx-field__help {
	margin-top: 8px;
}

/* "Leave it empty to use …": the default in bold ink, in the field's own
 * typeface, so it reads as what the field would hold. Plain monospace for the
 * URL word, not a grey chip, so it never reads as a second box touching the
 * first. `~`, not `+`: on Details and Agent the script puts the URL error
 * between the field and the help, and `+` then missed the help. */
.aeroidx-seo-sheet .aeroidx-page-config__field .aeroidx-field__help strong {
	font-weight: 600;
	color: var(--ax-ink);
}

.aeroidx-seo-sheet .aeroidx-page-config__permalink--pattern ~ .aeroidx-field__help code {
	padding: 0;
	background: none;
	font-family: var(--ax-font-mono);
	font-size: inherit;
	font-weight: 600;
	color: var(--ax-ink);
}

/* Templates are code-shaped text. */
.aeroidx-seo-sheet [data-aeroidx-seo-field="title_template"],
.aeroidx-seo-sheet [data-aeroidx-seo-field="description_template"] {
	font-family: var(--ax-font-mono);
	font-size: 13px;
}

.aeroidx-seo-sheet .aeroidx-page-config__label {
	margin-bottom: 6px;
	font-size: 14px;
}

.aeroidx-seo-sheet .aeroidx-field__help {
	font-size: 13px;
	color: var(--ax-muted-on-fill);
}

/* ── Footer buttons ───────────────────────────────────────────────────── */

/*
 * 44px pills (Save, Cancel, Discard, Keep editing), like the plugin's other
 * primary buttons. The primary keeps the plugin's violet gradient. Discard
 * keeps the control edge as the fields; Cancel is a ghost (no edge, no fill
 * until hovered) so it never competes with Save.
 */
.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__foot .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--ax-radius-full);
	font-size: 14px;
	line-height: 1.2;
}

.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__foot .button:not(.button-primary) {
	border-color: var(--ax-border-control);
	color: var(--ax-ink);
}

.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__foot .button:not(.button-primary):hover,
.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__foot .button:not(.button-primary):focus-visible {
	border-color: var(--ax-violet-500);
	color: var(--ax-violet-700);
}

.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__foot .button-primary {
	padding: 0 20px;
}

/* Ghost buttons (Cancel, Discard): no edge, no fill until hovered, so they
 * never compete with the primary. The focus ring stays, so a keyboard user
 * still sees where they are. */
.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__foot .button.aeroidx-seo-sheet__ghost {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	color: var(--ax-ink);
	font-weight: 600;
}

.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__foot .button.aeroidx-seo-sheet__ghost:hover {
	border-color: transparent;
	background: var(--ax-locked);
	color: var(--ax-ink);
}

.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__foot .button.aeroidx-seo-sheet__ghost:focus-visible {
	border-color: transparent;
	outline: 2px solid var(--ax-violet-500);
	outline-offset: 2px;
	color: var(--ax-ink);
}

/* Keep editing: the outlined middle option, the same control edge as the
 * fields. */
.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__foot .aeroidx-seo-sheet__keep {
	font-weight: 600;
}

/* ── Single column (below ~960px) ──────────────────────────────────────── */

/*
 * Two 55/45 columns under ~960px leave the settings too narrow for the
 * permalink row. One column instead, preview first (order: -1; the DOM keeps
 * settings first so the wide layout's Tab order reads left to right), capped
 * so the settings always keep most of the height, and foldable with a 44px
 * "Hide preview" button.
 */
@media (max-width: 960px) {
	.aeroidx-seo-sheet.is-ready {
		padding: 24px;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__panel {
		height: 100%;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__head {
		padding: 16px 16px 4px 24px;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__segments {
		padding: 0 24px;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__body {
		display: flex;
		flex-direction: column;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__main {
		flex: 1 1 auto;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__section {
		padding: 24px;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__aside {
		order: -1;
		flex: 0 0 auto;
		/* vh, not %: a percentage of a flexed parent's height is not
		 * resolved the same way by every engine. */
		max-height: 40vh;
		padding: 16px 24px 20px;
		border-left: 0;
		border-bottom: 1px solid var(--ax-hairline);
	}

	/* Text button, violet, with a chevron that turns when folded. */
	.aeroidx-settings .aeroidx-seo-preview .aeroidx-seo-preview__toggle.button {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		padding: 0 12px;
		border: 0;
		border-radius: var(--ax-radius-sm);
		background: transparent;
		color: var(--ax-violet-700);
		font-size: 14px;
		font-weight: 600;
	}

	.aeroidx-seo-preview__toggle-text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	/* The verdict line is the phone's folded row; wider, the card is there. */
	.aeroidx-seo-preview__toggle-summary {
		display: none;
	}

	.aeroidx-seo-preview__chevron {
		flex: none;
		transition: transform 150ms var(--aeroidx-seo-ease-out);
	}

	.aeroidx-seo-preview[data-collapsed] .aeroidx-seo-preview__chevron {
		transform: rotate(180deg);
	}

	/* Collapsed: the bar (heading + Show preview) is all that is left. The
	 * rule lives in this query on purpose, so widening the window always
	 * brings the preview back. */
	.aeroidx-seo-preview[data-collapsed] .aeroidx-seo-preview__body {
		display: none;
	}
}

@media (max-width: 782px) {
	.aeroidx-seo-sheet.is-ready {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

/*
 * Phones: a full-screen modal under the admin bar. Tabs share the width, the
 * Simple | Advanced control is full width (44px segments), the footer pair is 1:2 and 48px, and
 * the preview starts folded (the script folds it on open) as ONE row: "Show
 * preview" over the verdict, e.g. "3 of 3 checks pass".
 */
@media (max-width: 600px) {
	/* The unsaved-changes question, stacked: the words, then Save and close
	 * full width, then Discard | Keep editing side by side. Tab order stays
	 * Discard, Keep editing, Save and close (the DOM); only the picture moves
	 * the primary up, where a thumb reaches it first. */
	.aeroidx-seo-sheet__confirm-text {
		flex: 1 1 100%;
		order: -2;
	}

	.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__confirm .aeroidx-seo-sheet__save-close {
		flex: 1 1 100%;
		order: -1;
	}

	.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__confirm .button:not(.aeroidx-seo-sheet__save-close) {
		flex: 1 1 0;
	}

	/* top: 0, not under the admin bar: below 600px WordPress makes the bar
	 * position: absolute, so it scrolls away and left a strip of the page
	 * uncovered (and clickable) above the modal. Full screen covers the bar. */
	.aeroidx-seo-sheet.is-ready {
		top: 0;
		padding: 0;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__panel {
		border: 0;
		border-radius: 0;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__head {
		padding: 8px 8px 0 16px;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__title {
		font-size: 17px;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__segments {
		gap: 0;
		padding: 0 8px 0 16px;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__segment {
		flex: 1 1 0;
		padding: 0;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__section {
		padding: 20px 16px;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__aside {
		max-height: none;
		padding: 0;
		overflow: visible;
	}

	/* The aside has no padding here (the preview pads its own body), so the
	 * Page Layout card brings its own instead of touching the screen edges. */
	.aeroidx-seo-sheet.is-ready .aeroidx-where {
		padding: 16px 16px 0;
	}

	/* Three tabs fit a 390px screen on one line. */
	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__segments {
		gap: 0;
		padding: 0 6px;
	}

	.aeroidx-seo-sheet__segment {
		padding: 0 10px;
	}

	/* Expanded, the card gets its own scroll and its own padding. */
	.aeroidx-seo-preview__body {
		max-height: 50vh;
		overflow-y: auto;
		padding: 16px;
	}

	.aeroidx-seo-preview__bar {
		display: block;
	}

	/* The row's name is "Show/Hide preview"; the heading is redundant. It
	 * stays for the region's aria-labelledby, off screen. */
	.aeroidx-seo-preview__heading {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.aeroidx-settings .aeroidx-seo-preview .aeroidx-seo-preview__toggle.button {
		display: flex;
		width: 100%;
		min-height: 56px;
		padding: 8px 16px;
		box-sizing: border-box;
		justify-content: space-between;
		border-radius: 0;
		text-align: left;
	}

	.aeroidx-seo-preview[data-collapsed] .aeroidx-seo-preview__toggle-summary {
		display: block;
		font-size: 13px;
		font-weight: 400;
		color: var(--ax-success-ink);
	}

	.aeroidx-seo-preview[data-collapsed] .aeroidx-seo-preview__toggle-summary[data-state="warn"] {
		color: var(--ax-warning-ink);
	}

	/* Finger-sized chips on phones; wider layouts keep the canvas's 36px. */
	.aeroidx-settings .aeroidx-seo-preview .aeroidx-seo-preview__view {
		min-height: 44px;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__foot {
		flex-wrap: wrap;
		padding: 10px 16px 16px;
	}

	.aeroidx-seo-sheet__foot .aeroidx-page-config__actions {
		flex: 1 1 100%;
		margin-left: 0;
	}

	.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__foot .button {
		min-height: 48px;
	}

	/* 1 : 2 */
	.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__foot .aeroidx-page-config__actions .button:not(.button-primary) {
		flex: 1 1 0;
	}

	.aeroidx-settings .aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__foot .aeroidx-page-config__actions .button-primary {
		flex: 2 1 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aeroidx-seo-meter__bar i,
	.aeroidx-seo-drop,
	.aeroidx-seo-drop__progress i,
	.aeroidx-seo-sheet__segment,
	.aeroidx-seo-preview__stage[aria-busy="true"] > .aeroidx-seo-card {
		transition: none;
	}

	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__backdrop,
	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__panel,
	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__section:not([hidden]),
	.aeroidx-seo-skeleton__line,
	.aeroidx-seo-drop__spinner {
		animation: none;
	}
}

/*
 * Compact modal (PageSheet): the gear of a real WordPress page's row (Search,
 * Sign In...). Same overlay, title row and footer as above; one column, no
 * tabs, no preview. 560px wide and only as tall as its fields, so it sits in
 * the middle of the screen instead of filling it. Last in the file on purpose:
 * it has to win over the 960px rules above at the same specificity.
 */
.aeroidx-seo-sheet--compact.is-ready .aeroidx-seo-sheet__panel {
	width: min(560px, 100%);
	height: auto;
	max-height: 100%;
}

/* No tabs under the title, so the line closes the header itself: the
 * compact page modal, and a Details / Agent sheet with no Page Layout. */
.aeroidx-seo-sheet--single.is-ready .aeroidx-seo-sheet__head,
.aeroidx-seo-sheet--compact.is-ready .aeroidx-seo-sheet__head {
	padding: 16px 16px 16px 28px;
	border-bottom: 1px solid var(--ax-hairline);
}

.aeroidx-seo-sheet--compact.is-ready .aeroidx-seo-sheet__body {
	display: block;
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* One column: the page-config grid pairs fields two by two elsewhere. */
.aeroidx-seo-sheet--compact .aeroidx-seo-sheet__main.aeroidx-page-config {
	grid-template-columns: 1fr;
	align-content: start;
	gap: 20px;
}

.aeroidx-seo-sheet--compact.is-ready .aeroidx-seo-sheet__main.aeroidx-page-config {
	overflow: visible;
	padding: 24px 28px 28px;
}

/* At 560px the question and its three buttons don't fit on one line: the
 * words take the first, the buttons the second, on the right like the
 * Cancel / Save pair they replace. */
.aeroidx-seo-sheet--compact .aeroidx-seo-sheet__confirm {
	justify-content: flex-end;
}

.aeroidx-seo-sheet--compact .aeroidx-seo-sheet__confirm-text {
	flex: 1 1 100%;
}

/* Phones: full screen like the SEO modal, footer pinned to the bottom. */
@media (max-width: 600px) {
	.aeroidx-seo-sheet--compact.is-ready .aeroidx-seo-sheet__panel {
		height: 100%;
	}

	.aeroidx-seo-sheet--compact.is-ready .aeroidx-seo-sheet__head {
		padding: 10px 8px 10px 16px;
	}

	.aeroidx-seo-sheet--compact.is-ready .aeroidx-seo-sheet__body {
		flex: 1 1 auto;
		min-height: 0;
	}

	.aeroidx-seo-sheet--compact.is-ready .aeroidx-seo-sheet__main.aeroidx-page-config {
		padding: 20px 16px;
	}
}

/* Short windows, side by side (under ~740px tall): the preview column
 * tightens its padding and spacing so it still fits without a scrollbar.
 * seo-sheet.js already folds the checks and shortens a share card's photo;
 * this covers the rest. */
@media (min-width: 961px) and (max-height: 740px) {
	.aeroidx-seo-sheet.is-ready .aeroidx-seo-sheet__aside {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.aeroidx-seo-preview__body {
		gap: 12px;
	}

	.aeroidx-seo-preview__meters {
		gap: 8px;
	}
}