/* Copyright (c) 2026 Evan Tann. All rights reserved. */

/* The onboarding pages at /start/, over the site's own stylesheet. They
   lead straight into Easel's dashboard, so they're drawn as it is: its
   colors, type, fields, buttons, badges, and spacing, taken from Easel's
   own admin stylesheet, so the setup and the dashboard read as one
   product. Served as a file, never inline, so the Content-Security-Policy
   allows no inline styles. */

:root {
	--color-primary: #0043ce;
	--color-primary-hover: #003399;
	--color-primary-light: #e8efff;
	--color-on-primary: #fff;
	--color-text: #0f172a;
	--color-text-muted: #475569;
	--color-link: #0043ce;
	--color-link-underline: color-mix(in srgb, currentColor 40%,
		transparent);
	--color-bg: #fff;
	--color-surface: #f8fafc;
	--color-bg-muted: #f8fafc;
	--color-border: #b4bfcf;
	--color-border-light: #e2e8f0;
	--color-border-muted: #eef2f7;
	--color-success: #096624;
	--color-success-bg: #f5ffed;
	--color-success-border: #cfefcf;
	--color-danger: #b42318;
	--color-danger-bg: #fff1f1;
	--color-danger-border: #ffe0e0;
	--color-warning-text: #92400e;
	--color-warning-bg: #fffcef;
	--color-warning-border: #ffe3a8;
	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-size-sm: 0.875rem;
	--font-weight-bold: 600;
	--line-height-text: 1.4;
	--line-height-control: 1.25;
	--border-radius: 0.25rem;
	--radius-md: 0.75rem;
	--padding-input: var(--spacing-md) var(--spacing-lg);
	--width: 42rem;
	--field-width: 28rem;
}

body.start {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.5;
}

.start :is(p, li, label, legend, dt, dd) {
	color: inherit;
}

.start a {
	color: var(--color-link);
	text-decoration-color: var(--color-link-underline);
	text-underline-offset: 0.2em;
}

.start a:hover {
	text-decoration-color: currentColor;
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: var(--spacing-lg);
	top: var(--spacing-lg);
	background: var(--color-bg);
	padding: var(--spacing-sm) var(--spacing-md);
	z-index: 1;
}

/* The header, as the dashboard's: a rule under it, the name at one end
   and help at the other, on a phone too, where the site stacks its own. */
.start .start-header {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-lg);
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing-lg) max(var(--spacing-lg),
		calc((100% - var(--width)) / 2));
	border-bottom: 1px solid var(--color-border-muted);
}

.start .start-logo {
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-text);
	text-decoration: none;
	letter-spacing: -0.02em;
}

.start .start-help {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.start-main {
	max-width: calc(var(--width) + 2 * var(--spacing-lg));
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--spacing-lg) var(--spacing-xxl);
	flex: 1;
	overflow-wrap: break-word;
}

.start-footer {
	margin: 0;
	padding: var(--spacing-lg);
	border-top: 1px solid var(--color-border-muted);
	text-align: center;
}

.start-footer p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

/* Headings, on the dashboard's scale. */
.start h1, .start h2, .start h3 {
	color: var(--color-text);
	font-weight: 700;
	text-wrap: balance;
}

.start h1 {
	font-size: 2rem;
	line-height: 1.15;
	letter-spacing: -0.025em;
	margin: 0;
}

.start h2 {
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: -0.015em;
	margin: 0 0 var(--spacing-md);
}

.start h3 {
	font-size: 1.0625rem;
	line-height: 1.3;
	margin: 0 0 var(--spacing-sm);
}

.start p {
	margin: 0 0 var(--spacing-md);
	line-height: var(--line-height-text);
}

/* A page's title, and the line under it saying what the page is for. */
.start hgroup {
	margin: var(--spacing-xxl) 0;
}

.start hgroup > p {
	max-width: 60ch;
	margin: var(--spacing-sm) 0 0;
	color: var(--color-text-muted);
	font-size: 1.0625rem;
}

.start hgroup > .eyebrow {
	margin: 0 0 var(--spacing-xs);
	font-size: 0.75rem;
}

.start hgroup h1 .badge {
	vertical-align: middle;
	margin-left: var(--spacing-sm);
}

.start .muted {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.start .eyebrow {
	margin: 0 0 var(--spacing-xs);
	color: var(--color-text-muted);
	font-size: 0.75rem;
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* The step indicator: each step's number in a circle, a line between
   them, the page's own in blue and those done ticked. */
.start .steps {
	display: block;
	max-width: calc(var(--width) + 2 * var(--spacing-lg));
	width: 100%;
	margin: 0 auto;
	padding: var(--spacing-xl) var(--spacing-lg) 0;
}

.steps-list {
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
}

.steps-list li {
	flex: 1;
	margin: 0;
	padding: 0;
	position: relative;
	min-width: 0;
}

/* The line to the next step, from the right of this step's circle. */
.steps-list li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 0.75rem;
	left: 2rem;
	right: 0.5rem;
	height: 1px;
	background: var(--color-border-light);
}

.steps-list li.done:not(:last-child)::after {
	background: var(--color-primary);
}

.steps-list :is(a, li > span) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-sm);
	text-decoration: none;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	line-height: 1.25;
}

.steps-list a:hover .step-name {
	text-decoration: underline;
	text-decoration-color: var(--color-link-underline);
}

.step-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	font-size: 0.75rem;
	font-weight: var(--font-weight-bold);
	font-variant-numeric: tabular-nums;
	color: var(--color-text-muted);
}

.steps-list .done .step-mark {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
}

.steps-list .skipped .step-mark {
	background: var(--color-bg-muted);
	border-style: dashed;
}

.steps-list .current .step-mark {
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
}

.steps-list .current .step-name {
	color: var(--color-text);
	font-weight: var(--font-weight-bold);
}

.steps-list .done .step-name {
	color: var(--color-text);
}

.steps-compact {
	display: none;
}

/* Cards, as the dashboard's. */
.start .card {
	background: var(--color-bg);
	border: 1px solid var(--color-border-light);
	border-radius: var(--border-radius);
	padding: var(--spacing-xl);
	margin: var(--spacing-lg) 0;
}

.start .card > :last-child {
	margin-bottom: 0;
}

.start .card h2 {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm) var(--spacing-md);
	flex-wrap: wrap;
}

/* Buttons, as the dashboard's: blue fills the one that goes on, white
   edged like the fields for the rest. */
.start :is(button, .btn-primary, .btn-secondary) {
	display: inline-block;
	margin: 0;
	padding: var(--spacing-md) var(--spacing-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-bg);
	box-shadow: var(--shadow-sm);
	color: var(--color-text);
	font: inherit;
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-control);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.start :is(button, .btn-primary, .btn-secondary):active {
	transform: translate(1px, 1px);
}

.start .btn-secondary:hover {
	background: var(--color-surface);
}

.start .btn-primary {
	background: var(--color-primary);
	border-color: var(--color-primary);
	box-shadow: none;
	color: var(--color-on-primary);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.start .btn-primary:hover {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: var(--color-on-primary);
}

.start .link-button {
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
	color: var(--color-link);
	font-weight: normal;
	text-decoration: underline;
	text-decoration-color: var(--color-link-underline);
	text-underline-offset: 0.2em;
}

.start .link-button:hover {
	background: none;
	text-decoration-color: currentColor;
}

.start .link-button:active {
	transform: none;
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-md);
}

/* A form's end: its button, apart from the fields above it, and any
   note under it. */
.start .form-end {
	margin-top: var(--spacing-xl);
}

.start .form-end .muted {
	margin: var(--spacing-md) 0 0;
}

/* The end of every step's page: back at one end, on at the other. */
.step-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-lg);
	margin-top: var(--spacing-xxl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border-light);
}

.step-nav form {
	margin: 0 0 0 auto;
}

.start .back {
	color: var(--color-text-muted);
}

.back::before {
	content: "← ";
}

.start .up {
	margin: var(--spacing-xl) 0 0;
	font-size: var(--font-size-sm);
}

.start .up + hgroup {
	margin-top: var(--spacing-lg);
}

/* Problems, as the dashboard's alerts. */
.start .error-summary {
	background: var(--color-danger-bg);
	border: 1px solid var(--color-danger-border);
	border-radius: var(--border-radius);
	padding: var(--spacing-md) var(--spacing-lg);
	margin: var(--spacing-lg) 0;
	color: var(--color-danger);
}

.start .error-summary p {
	margin: 0;
	color: var(--color-danger);
}

.start .error-summary p + p {
	margin-top: var(--spacing-sm);
}

.start .error-summary ul {
	margin: var(--spacing-sm) 0 0;
	padding-left: var(--spacing-lg);
}

.start .error-summary li {
	margin: 0;
	color: var(--color-danger);
}

.start .error-summary a {
	color: var(--color-danger);
	font-weight: var(--font-weight-bold);
}

/* Fields, as the dashboard's: the label over the field, any help and
   then any problem under it. */
.start .field {
	margin: var(--spacing-xl) 0 0;
	border: none;
	padding: 0;
	min-width: 0;
}

.start .field > label, .start legend {
	display: block;
	padding: 0;
	margin: 0 0 var(--spacing-sm);
	font-weight: var(--font-weight-bold);
}

.start legend + :is(.hint, .field-error) {
	margin: calc(-1 * var(--spacing-xs)) 0 var(--spacing-sm);
}

.start :is(.hint, .field-error) {
	display: block;
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-sm);
	font-weight: normal;
	line-height: var(--line-height-text);
}

.start .hint {
	color: var(--color-text-muted);
}

.start .field-error {
	color: var(--color-danger);
}

.start :is(input[type="text"], input[type="email"], input[type="password"],
	select) {
	display: block;
	width: 100%;
	max-width: var(--field-width);
	padding: var(--padding-input);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-bg);
	color: inherit;
	font: inherit;
	line-height: var(--line-height-control);
}

.start input::placeholder {
	color: #94a3b8;
}

.start :is(input, select, button, a, summary):focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.start .has-error :is(input, select) {
	border-color: var(--color-danger);
}

/* A checkbox or radio beside its words, any help lined up under the
   words rather than the box. */
.start label.choice {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-sm);
	margin: 0;
	padding: var(--spacing-xs) 0;
	font-weight: normal;
	cursor: pointer;
}

.start label.choice input {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin: 0.2em 0 0;
	accent-color: var(--color-primary);
}

.start label.choice:has(input[type="radio"]:checked) {
	font-weight: var(--font-weight-bold);
}

.choice-text {
	display: flex;
	flex-direction: column;
}

.choice-text small {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	font-weight: normal;
}

.choices label.choice + label.choice {
	margin-top: var(--spacing-xs);
}

/* Where a shop sells: a region to a row, each opening onto its
   countries. */
.regions {
	border: 1px solid var(--color-border-light);
	border-radius: var(--border-radius);
	max-width: var(--field-width);
}

.region {
	padding: var(--spacing-sm) var(--spacing-md);
}

.region + .region {
	border-top: 1px solid var(--color-border-light);
}

.start .region-all {
	font-weight: var(--font-weight-bold);
}

.region details {
	margin: 0 0 var(--spacing-xs) 1.5rem;
}

.region summary {
	cursor: pointer;
	color: var(--color-link);
	font-size: var(--font-size-sm);
}

.country-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: 0 var(--spacing-md);
	margin-top: var(--spacing-sm);
	font-size: var(--font-size-sm);
}

/* The honeypot, which people never see and bots fill in. */
.hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fine-print {
	margin-top: var(--spacing-xxl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border-light);
}

.fine-print p {
	margin: 0 0 var(--spacing-sm);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

/* Guides: numbered steps, as the dashboard's next steps number them. */
.start ol.guide {
	list-style: none;
	margin: 0 0 var(--spacing-lg);
	padding: 0;
	counter-reset: guide;
}

.start ol.guide li {
	counter-increment: guide;
	position: relative;
	margin: 0;
	padding: var(--spacing-xs) 0 var(--spacing-xs) 2.25rem;
	line-height: 1.6;
}

.start ol.guide li + li {
	margin-top: var(--spacing-sm);
}

.start ol.guide li::before {
	content: counter(guide);
	position: absolute;
	left: 0;
	top: 0.3rem;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.375rem;
	text-align: center;
	color: var(--color-text-muted);
}

/* A label of the other platform's interface, drawn as its button. A
   long one wraps as text does, rather than pushing past the line. */
.ui {
	font-weight: var(--font-weight-bold);
	font-size: 0.9375em;
	border: 1px solid var(--color-border-light);
	border-radius: var(--border-radius);
	padding: 0.05em 0.35em;
	background: var(--color-surface);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* An upload: its label over the file and the button that sends it. */
.upload {
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border-light);
}

.start .upload label {
	display: block;
	margin: 0 0 var(--spacing-sm);
	font-weight: var(--font-weight-bold);
}

.upload-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-md);
}

.start .upload input[type="file"] {
	flex: 1 1 14rem;
	min-width: 0;
	padding: var(--spacing-sm);
	border: 1px dashed var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-surface);
	font: inherit;
	font-size: var(--font-size-sm);
}

.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--spacing-lg);
	border-bottom: 1px solid var(--color-border-light);
	margin: 0 0 var(--spacing-lg);
}

.tabs :is(a, span) {
	padding: var(--spacing-sm) 0;
	color: var(--color-text-muted);
	text-decoration: none;
}

.tabs [aria-current] {
	color: var(--color-text);
	font-weight: var(--font-weight-bold);
	border-bottom: 2px solid var(--color-primary);
}

/* Badges, as the dashboard's: small, square, and in capitals. */
.start .badge {
	display: inline-block;
	padding: 0 var(--spacing-sm);
	border: 1px solid var(--color-border-light);
	border-radius: var(--border-radius);
	background: var(--color-bg-muted);
	color: var(--color-text-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
	text-transform: uppercase;
	white-space: nowrap;
}

.start .badge.done {
	background: var(--color-success-bg);
	border-color: var(--color-success-border);
	color: var(--color-success);
}

.start .badge.pending, .start .badge.queued, .start .badge.running {
	background: var(--color-warning-bg);
	border-color: var(--color-warning-border);
	color: var(--color-warning-text);
}

.start .badge.failed {
	background: var(--color-danger-bg);
	border-color: var(--color-danger-border);
	color: var(--color-danger);
}

.plain-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.plain-list li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-md);
	margin: 0;
	padding: var(--spacing-sm) 0;
}

.plain-list li + li {
	border-top: 1px solid var(--color-border-light);
}

/* An import's results, as the dashboard's stat cards. */
.start .counts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: var(--spacing-md);
	margin: 0 0 var(--spacing-lg);
}

.counts div {
	border: 1px solid var(--color-border-light);
	border-radius: var(--border-radius);
	padding: var(--spacing-md) var(--spacing-lg);
}

.start .counts dt {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.start .counts dd {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.product-grid {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--spacing-lg);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
	gap: var(--spacing-md);
}

.product-grid li {
	border: 1px solid var(--color-border-light);
	border-radius: var(--border-radius);
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-size: var(--font-size-sm);
}

.product-grid img, .product-grid .no-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--color-surface);
}

.product-grid span:last-child {
	display: block;
	padding: var(--spacing-sm) var(--spacing-md);
}

.warnings ul {
	margin: 0;
	padding-left: var(--spacing-lg);
}

.warnings .row {
	font-weight: var(--font-weight-bold);
	margin-right: var(--spacing-sm);
}

/* An import still running. */
.start .progress {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.progress a {
	white-space: nowrap;
}

.spinner {
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--color-border-light);
	border-top-color: var(--color-primary);
	border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
	.spinner {
		animation: spin 0.8s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(1turn);
		}
	}
}

/* The recommendations: one to a row, its words at one end and the way
   to set it up at the other. */
.tool-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-border-light);
	border-radius: var(--border-radius);
}

.tool-list .tool {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	margin: 0;
	padding: var(--spacing-lg) var(--spacing-xl);
}

.tool-list .tool + .tool {
	border-top: 1px solid var(--color-border-light);
}

.tool-text {
	flex: 1;
	min-width: 0;
}

.start .tool-text h2 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	margin: 0 0 var(--spacing-xs);
	font-size: 1.0625rem;
}

.start .tool-text p:last-child {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.tool .btn-secondary {
	flex: none;
}

/* Payments: the webhook part of a provider's form. */
.webhook {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--color-border-light);
}

.start code {
	font-size: 0.875em;
}

.start code.copy {
	display: block;
	padding: var(--spacing-sm) var(--spacing-md);
	border: 1px solid var(--color-border-light);
	border-radius: var(--border-radius);
	background: var(--color-surface);
	word-break: break-all;
	user-select: all;
}

/* The summary's checklist. */
.checklist {
	list-style: none;
	margin: 0 0 var(--spacing-md);
	padding: 0;
}

.checklist li {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	margin: 0;
	padding: var(--spacing-sm) 0;
}

.checklist li + li {
	border-top: 1px solid var(--color-border-light);
}

.checklist .mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.checklist .done .mark {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
}

.checklist .skipped .mark {
	border-style: dashed;
}

.checklist .badge {
	margin-left: auto;
	flex: none;
}

/* A phone shows the step indicator as which step this is, of how many,
   and a bar of how far that is, since every step's name won't fit. */
@media (max-width: 600px) {
	.steps-list {
		display: none;
	}

	.steps-compact {
		display: block;
	}

	.steps-compact p {
		display: flex;
		justify-content: space-between;
		gap: var(--spacing-md);
		margin: 0 0 var(--spacing-sm);
		font-size: var(--font-size-sm);
	}

	.steps-count {
		color: var(--color-text-muted);
	}

	.steps-compact progress {
		display: block;
		width: 100%;
		height: 4px;
		border: none;
		border-radius: 2px;
		background: var(--color-border-light);
		appearance: none;
	}

	.steps-compact progress::-webkit-progress-bar {
		background: var(--color-border-light);
		border-radius: 2px;
	}

	.steps-compact progress::-webkit-progress-value {
		background: var(--color-primary);
		border-radius: 2px;
	}

	.steps-compact progress::-moz-progress-bar {
		background: var(--color-primary);
		border-radius: 2px;
	}

	.start h1 {
		font-size: 1.75rem;
	}

	.start hgroup {
		margin: var(--spacing-xl) 0;
	}

	.start .card {
		padding: var(--spacing-lg);
	}

	.start :is(input[type="text"], input[type="email"],
		input[type="password"], select), .regions {
		max-width: none;
	}

	.tool-list .tool {
		flex-direction: column;
		align-items: stretch;
		padding: var(--spacing-lg);
	}

	.form-end :is(.btn-primary, .btn-secondary),
	.button-row > *,
	.step-nav .btn-primary {
		width: 100%;
	}

	.step-nav form:has(.btn-primary) {
		flex: 1 1 100%;
		order: -1;
	}
}