/*
 * AeroIDX — post-activation setup wizard.
 *
 * Scoped under .aeroidx-onboarding. Colours, radii and easing come from
 * tokens.css, enqueued as a dependency of this stylesheet, so the wizard and
 * the "successfully installed" page share one palette and pill CTA and read as
 * one continuous flow. Three steps: connect (API key), IDX pages, widgets —
 * driven by a horizontal stepper.
 */

.aeroidx-onboarding {
	margin: 0;
	padding: 6vh 20px 48px;
	font-family: var(--ax-font-body);
	color: var(--ax-ink);
}

/*
 * FULL WIDTH, by the same decision the panels took.
 *
 * The comment here used to read "comfortable, focused reading width", and that
 * argument is not wrong: a wizard is one task with one control per step, and
 * width buys it nothing. It lost to consistency — every other surface in this
 * admin now runs to the edge, and a 720px column in the middle of one that
 * does not reads as a different product rather than as a deliberate focus.
 */
.aeroidx-onboarding__inner {
	margin: 0 auto;
}

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

.aeroidx-onboarding__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 28px;
}

.aeroidx-onboarding .aeroidx-onboarding__title {
	margin: 0;
	padding: 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--ax-ink);
}

.aeroidx-onboarding__skip-top {
	font-size: 13px;
	color: var(--ax-muted);
	text-decoration: none;
}

.aeroidx-onboarding__skip-top:hover,
.aeroidx-onboarding__skip-top:focus {
	color: var(--ax-secondary);
	text-decoration: underline;
}

/* --- Stepper ------------------------------------------------------------ */

.aeroidx-onboarding__steps {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.aeroidx-onboarding__step {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
}

/* Connector line between steps. */
.aeroidx-onboarding__step:not(:last-child)::after {
	content: "";
	width: 36px;
	height: 2px;
	margin-left: 4px;
	background: var(--ax-border-soft);
}

.aeroidx-onboarding__step.is-done:not(:last-child)::after {
	background: var(--ax-violet-700);
}

.aeroidx-onboarding__step-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	background: var(--ax-border-soft);
	color: var(--ax-muted);
	border: 2px solid transparent;
}

/*
 * ONE violet across the stepper, and it is --ax-violet-700.
 *
 * This used to carry two. The dots were filled and ringed with violet-500 and
 * the current step's number was --ax-grad-to, which resolves to --ax-violet-deep
 * (#391eab) — a value tokens.css documents as NOT a Design System colour at all,
 * existing only as the far end of the primary button's gradient. So the stepper
 * showed a lighter violet than anything else on the screen, with a near-navy
 * numeral inside it, and neither of the two was the plugin's violet.
 *
 * The split the rest of admin.css keeps: violet-500 is a TRANSIENT colour, used
 * for :focus rings and :hover states and for the lighter end of a gradient;
 * violet-700 is the resting identity fill. A step indicator is about as resting
 * as a control gets.
 *
 * Contrast improves as a side effect rather than as the reason: the white check
 * on the completed dot goes from 4.23:1 to 7.10:1, and the ring against the
 * #f0f0f1 admin background from 3.72:1 to 6.24:1.
 */
.aeroidx-onboarding__step.is-current .aeroidx-onboarding__step-dot {
	background: var(--ax-card);
	color: var(--ax-violet-700);
	border-color: var(--ax-violet-700);
}

.aeroidx-onboarding__step.is-done .aeroidx-onboarding__step-dot {
	background: var(--ax-violet-700);
	border-color: var(--ax-violet-700);
	color: var(--ax-on-accent);
}

.aeroidx-onboarding__step-check {
	display: block;
}

.aeroidx-onboarding__step-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ax-muted);
}

.aeroidx-onboarding__step.is-current .aeroidx-onboarding__step-label,
.aeroidx-onboarding__step.is-done .aeroidx-onboarding__step-label {
	color: var(--ax-ink);
}

@media (max-width: 600px) {
	.aeroidx-onboarding__step-label {
		display: none;
	}
	.aeroidx-onboarding__step:not(:last-child)::after {
		width: 24px;
	}
}

/* --- Panel / step body -------------------------------------------------- */

.aeroidx-onboarding__panel {
	padding: 36px 34px;
	background: var(--ax-card);
	border: 1px solid var(--ax-border-soft);
	border-radius: var(--ax-radius-card);
	box-shadow: 0 1px 2px var(--ax-shadow-a04),
		0 10px 30px var(--ax-shadow-a06);
}

.aeroidx-onboarding__step-title {
	margin: 0 0 8px;
	padding: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ax-ink);
}

.aeroidx-onboarding__step-text {
	margin: 0 0 24px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ax-secondary);
}

/* "Create all pages" sits on its own row, right-aligned, between the step intro
 * and the page list. */
.aeroidx-onboarding__bulk {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 16px;
}

/* --- Error flash -------------------------------------------------------- */

.aeroidx-onboarding__error {
	margin: 0 0 20px;
	padding: 12px 14px;
	border-radius: var(--ax-radius-tile);
	background: var(--ax-danger-wash);
	border: 1px solid var(--ax-danger-edge);
	color: var(--ax-danger);
	font-size: 13.5px;
	line-height: 1.5;
}

/* --- API step ----------------------------------------------------------- */

.aeroidx-onboarding__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ax-ink);
}

.aeroidx-onboarding__locked {
	margin: 0;
	padding: 12px 14px;
	border-radius: var(--ax-radius-tile);
	background: var(--ax-violet-a07);
	border: 1px solid var(--ax-violet-edge);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ax-secondary);
}

/* --- Pages step --------------------------------------------------------- */

.aeroidx-onboarding__pages {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	border: 1px solid var(--ax-border-soft);
	border-radius: var(--ax-radius-card);
	overflow: hidden;
}

.aeroidx-onboarding__page {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 16px;
}

.aeroidx-onboarding__page:not(:last-child) {
	border-bottom: 1px solid var(--ax-border-soft);
}

.aeroidx-onboarding__page-name {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ax-ink);
}

.aeroidx-onboarding__page form {
	margin: 0;
}

/*
 * The bulk button. Its label took --ax-grad-to for the same reason the stepper
 * did, and it is wrong for the same reason: that token is the far end of the
 * primary button's gradient, not a colour the Design System names. Nothing else
 * in the admin writes text in it.
 */
.aeroidx-onboarding__page-create {
	padding: 7px 18px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ax-violet-700);
	background: var(--ax-card);
	border: 1px solid var(--ax-violet-a38);
	border-radius: var(--ax-radius-pill);
	cursor: pointer;
	transition: background 120ms var(--ax-ease), border-color 120ms var(--ax-ease);
}

.aeroidx-onboarding__page-create:hover,
.aeroidx-onboarding__page-create:focus {
	background: var(--ax-violet-a07);
	border-color: var(--ax-violet-500);
}

.aeroidx-onboarding__page-done {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ax-success);
}

/* --- Actions row (shared) ----------------------------------------------- */

/*
 * The input and reveal rules that lived here are gone with the markup. The
 * wizard renders Admin\ApiKeyField now, which is the Settings field, so it is
 * styled by `.aeroidx-field__input` and `.aeroidx-reveal` in admin.css. This
 * file had a parallel set of both, and the Settings pair had meanwhile grown a
 * failure state the copy never received.
 */

.aeroidx-onboarding__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 20px 0 0;
}

/* When a step has only the primary button (e.g. the API step, where skipping a
 * required key makes no sense), keep it right-aligned. */
.aeroidx-onboarding__actions--end {
	justify-content: flex-end;
}

/*
 * The .aeroidx-onboarding__cta rules that lived here are gone with the markup
 * that used them. The wizard's submit buttons are the admin's
 * `.button.button-primary` now: this file had rebuilt the same gradient pill at
 * a different size (14.5px against 12px, 12/28 padding against 9/26), which is
 * what happens when a component is redrawn in a second stylesheet rather than
 * imported.
 */

.aeroidx-onboarding__ghost {
	font-size: 14px;
	font-weight: 600;
	color: var(--ax-muted);
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px 4px;
}

.aeroidx-onboarding__ghost:hover,
.aeroidx-onboarding__ghost:focus {
	color: var(--ax-secondary);
	text-decoration: underline;
}

.aeroidx-field__input {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 9px 12px;
	font-size: 14px;
	line-height: 1.4;
	background: var(--ax-input);
	border: 1px solid var(--ax-border);
	border-radius: var(--ax-radius-input);
	color: var(--ax-ink);
	box-shadow: none;
	transition: border-color 150ms var(--ax-ease),
		box-shadow 150ms var(--ax-ease), background 150ms var(--ax-ease);
}

.aeroidx-field__input:focus {
	background: var(--ax-input-focus);
	border-color: var(--ax-violet-500);
	box-shadow: 0 0 0 1px var(--ax-violet-500);
	outline: 2px solid transparent; /* preserved for forced-colors mode */
}
/*
 * A failed trip, not a refused key. Nothing was rejected and the key in the
 * reader's hand is probably fine, so this must not look like the rejection
 * beside it.
 */
.aeroidx-onboarding__error--warn {
	background: var(--ax-warning-wash);
	border-color: var(--ax-warning-edge);
	color: var(--ax-warning-ink);
}