/**
 * Simple Points and Rewards: setup wizard.
 *
 * A card inside the normal admin screen: a step rail along the top, the current
 * step below it, and a floating bar for navigation. The page itself scrolls; the
 * previews and the bar stay in view, tucked under the admin bar. Preview mocks
 * read the store's brand colors from --wz-p / --wz-s, which the script keeps in
 * sync with the color fields.
 */

/* Placement in wp-admin */

/* Notices printed by script after the page loads (other plugins' are removed on the server). */
body.spar-wz-screen #wpbody-content > .notice,
body.spar-wz-screen #wpbody-content > .updated,
body.spar-wz-screen #wpbody-content > .error,
body.spar-wz-screen #wpbody-content > .update-nag {
	display: none !important;
}

/* The "program is switched off" notice under the header stays: it matters here. */
body.spar-wz-screen #wpbody-content > .spar-program-disabled-notice {
	display: block !important;
	max-width: 1580px;
	margin: 0 auto 16px;
}

.spar-wz {
	/* Space taken by the admin bar, which the sticky parts sit below. */
	--wz-top: 32px;
	--wz-gap: 20px;

	--wz-p: #667eea;
	--wz-s: #764ba2;

	--wz-accent: #667eea;
	--wz-accent-2: #5146c1;
	--wz-accent-bright: #8da0f5;
	--wz-accent-soft: #eef0fd;
	--wz-accent-ring: rgba( 102, 126, 234, .24 );
	--wz-brand: linear-gradient( 135deg, #667eea, #764ba2 );

	--wz-ink: #1b1d33;
	--wz-text: #3a3d56;
	--wz-muted: #646985;
	--wz-faint: #969ab2;
	--wz-line: #e4e6f0;
	--wz-line-2: #eef0f6;
	--wz-field: #d9dcea;
	--wz-bg: #f5f6fb;
	--wz-tint: #f8f9fd;
	--wz-dark: #1c1b33;
	--wz-shadow-sm: 0 1px 2px rgba( 27, 29, 51, .04 ), 0 4px 14px rgba( 27, 29, 51, .04 );

	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 600px;
	max-width: 1620px;
	/*
	 * Centred in the space between the admin menu and the window edge, like the
	 * full-width plugin header above it. wp-admin pads the content area by 20px
	 * on the left only, so plain auto margins would sit 10px off-centre; this
	 * splits the spare width evenly and keeps 20px gutters when there is none.
	 * No top margin: the plugin header already leaves a gap.
	 */
	margin-top: 0;
	margin-right: max( 20px, calc( ( 100% - 1620px ) / 2 + 10px ) );
	margin-bottom: var( --wz-gap );
	margin-left: max( 0px, calc( ( 100% - 1620px ) / 2 - 10px ) );
	/* Step layouts adapt to the width left beside the admin menu, not the window. */
	container: spar-wz / inline-size;
	border: 1px solid #dfe2ee;
	border-radius: 12px;
	background: var( --wz-bg );
	box-shadow: 0 1px 2px rgba( 27, 29, 51, .04 );
	color: var( --wz-text );
	font-size: 14px;
	line-height: 1.5;
}

.spar-wz *,
.spar-wz *::before,
.spar-wz *::after {
	box-sizing: border-box;
}

.spar-wz .is-hidden {
	display: none !important;
}

.spar-wz a {
	color: var( --wz-accent-2 );
}

.spar-wz code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Stepper */
.spar-wz-stepper {
	padding: 24px 28px 20px;
	border-bottom: 1px solid var( --wz-line );
	border-radius: 11px 11px 0 0;
	background: #fff;
}

.spar-wz-steps {
	display: grid;
	grid-auto-columns: minmax( 0, 1fr );
	grid-auto-flow: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-wz-steps-item {
	position: relative;
	margin: 0;
}

/* The track joining each dot to the one before it. */
.spar-wz-steps-item:not( :first-child )::before {
	content: "";
	position: absolute;
	top: 16px;
	right: calc( 50% + 24px );
	left: calc( -50% + 24px );
	height: 2px;
	border-radius: 2px;
	background: #e1e4ef;
	transition: background .4s ease;
}

.spar-wz-steps-item.is-done::before,
.spar-wz-steps-item.is-active::before {
	background: linear-gradient( 90deg, var( --wz-accent-bright ), var( --wz-accent ) );
}

.spar-wz-steps-btn {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	width: 100%;
	margin: 0;
	padding: 0 6px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: center;
	cursor: pointer;
}

.spar-wz-steps-btn:disabled {
	cursor: default;
}

.spar-wz-steps-btn:focus-visible {
	outline: none;
}

.spar-wz-steps-btn:focus-visible .spar-wz-steps-dot {
	box-shadow: 0 0 0 4px var( --wz-accent-ring );
}

.spar-wz-steps-dot {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 2px solid #dcdfec;
	border-radius: 50%;
	background: #fff;
	color: var( --wz-faint );
	font-size: 13px;
	font-weight: 700;
	transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.spar-wz-steps-btn:hover:not( :disabled ) .spar-wz-steps-dot {
	border-color: var( --wz-accent );
}

.spar-wz-steps-check {
	display: none;
	width: 16px;
	height: 16px;
}

.spar-wz-steps-item.is-done .spar-wz-steps-dot {
	border-color: transparent;
	background: var( --wz-brand );
	color: #fff;
}

.spar-wz-steps-item.is-done .spar-wz-steps-num {
	display: none;
}

.spar-wz-steps-item.is-done .spar-wz-steps-check {
	display: block;
}

.spar-wz-steps-item.is-active .spar-wz-steps-dot {
	border-color: var( --wz-accent );
	background: var( --wz-accent-soft );
	color: var( --wz-accent-2 );
	box-shadow: 0 0 0 3px var( --wz-accent-ring );
}

.spar-wz-steps-text {
	display: block;
	min-width: 0;
}

.spar-wz-steps-text strong {
	display: block;
	color: var( --wz-muted );
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.spar-wz-steps-item.is-done .spar-wz-steps-text strong,
.spar-wz-steps-item.is-active .spar-wz-steps-text strong {
	color: var( --wz-ink );
}

.spar-wz-steps-item.is-active .spar-wz-steps-text strong {
	font-weight: 700;
}

.spar-wz-steps-text small {
	display: block;
	margin-top: 2px;
	color: var( --wz-faint );
	font-size: 11.5px;
	line-height: 1.35;
}

.spar-wz .spar-wz-stepper-current {
	display: none;
	margin: 12px 0 0;
	color: var( --wz-ink );
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

/* Content */
.spar-wz-content {
	flex: 1;
	/* Clip (not hide) so the step transition never adds a page scrollbar,
	   without breaking the sticky previews inside. */
	overflow-x: clip;
}

.spar-wz-step {
	animation: spar-wz-step-in .2s ease both;
}

.spar-wz-step-inner {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 40px 36px;
}

.spar-wz-step--wide .spar-wz-step-inner {
	max-width: 1180px;
}

@keyframes spar-wz-step-in {
	from { opacity: 0; transform: translateY( 4px ); }
	to { opacity: 1; transform: none; }
}

/* Anything shown by a condition fades in as it appears. */
.spar-wz [data-wz-when]:not( .is-hidden ) {
	animation: spar-wz-reveal .28s ease both;
}

@keyframes spar-wz-reveal {
	from { opacity: 0; transform: translateY( -4px ); }
	to { opacity: 1; transform: none; }
}

/* Step heading */
.spar-wz-head {
	margin: 0 0 28px;
}

.spar-wz-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var( --wz-accent-2 );
	font-size: 13px;
	font-weight: 600;
}

.spar-wz .spar-wz-head h1 {
	margin: 10px 0;
	padding: 0;
	color: var( --wz-ink );
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
}

.spar-wz .spar-wz-head h1:focus {
	outline: none;
}

.spar-wz-lede {
	max-width: 660px;
	margin: 0;
	color: var( --wz-muted );
	font-size: 16px;
	line-height: 1.6;
	text-wrap: pretty;
}

.spar-wz .spar-wz-subhead {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 36px 0 14px;
	padding: 0;
	color: var( --wz-faint );
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* A smaller heading for a group of cards inside a section. */
.spar-wz .spar-wz-minihead {
	margin: 10px 0 -2px;
	padding: 0;
	color: var( --wz-muted );
	font-size: 13px;
	font-weight: 700;
}

.spar-wz-features > .spar-wz-minihead:first-child {
	margin-top: 0;
}

.spar-wz-note {
	margin: 16px 0 0;
	color: var( --wz-muted );
	font-size: 13.5px;
}

/* Welcome */
.spar-wz-hero {
	position: relative;
	margin-bottom: 8px;
	padding: 36px 36px 30px;
	overflow: hidden;
	border: 1px solid var( --wz-line );
	border-radius: 12px;
	background: #fff;
	box-shadow: var( --wz-shadow-sm );
}

/* A soft wash of the brand gradient in the corner. */
.spar-wz-hero::after {
	content: "";
	position: absolute;
	top: -120px;
	right: -120px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 118, 75, 162, .12 ), rgba( 102, 126, 234, 0 ) 70% );
	pointer-events: none;
}

.spar-wz-hero-badge {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	border-radius: 12px;
	background: var( --wz-brand );
	color: #fff;
	font-size: 26px;
	box-shadow: 0 8px 20px -8px rgba( 118, 75, 162, .6 );
}

.spar-wz-hero .spar-wz-head {
	margin-bottom: 20px;
}

.spar-wz-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-wz-hero-meta li {
	display: flex;
	align-items: center;
	margin: 0;
	color: var( --wz-muted );
	font-size: 13px;
	font-weight: 500;
}

.spar-wz-hero-meta li + li::before {
	content: "\00b7";
	margin-right: 12px;
	color: var( --wz-faint );
}

.spar-wz-lifecycle {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 22px minmax( 0, 1fr ) 22px minmax( 0, 1fr );
	align-items: stretch;
	gap: 8px;
}

.spar-wz-lifecycle-stage {
	position: relative;
	padding: 20px 18px 18px;
	border: 1px solid var( --wz-line );
	border-radius: 12px;
	background: #fff;
	box-shadow: var( --wz-shadow-sm );
}

.spar-wz-lifecycle-num {
	position: absolute;
	top: 14px;
	right: 16px;
	color: #d4d7e6;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
}

.spar-wz-lifecycle-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 10px;
	background: var( --wz-accent-soft );
	color: var( --wz-accent-2 );
	font-size: 19px;
}

.spar-wz .spar-wz-lifecycle-stage h3 {
	margin: 0 0 6px;
	color: var( --wz-ink );
	font-size: 15px;
	font-weight: 700;
}

.spar-wz-lifecycle-stage p {
	margin: 0;
	color: var( --wz-muted );
	font-size: 13px;
	line-height: 1.55;
}

.spar-wz-lifecycle-arrow {
	align-self: center;
	justify-self: center;
	width: 10px;
	height: 10px;
	border-top: 2px solid #b9c1ef;
	border-right: 2px solid #b9c1ef;
	transform: rotate( 45deg );
}

/* Import from another plugin (welcome) */
.spar-wz-import {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 22px 0 0;
	padding: 16px 18px;
	border: 1px solid #f3d9a4;
	border-radius: 12px;
	background: #fffaeb;
}

.spar-wz-import-icon {
	display: grid;
	place-items: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #f3d9a4;
	color: #b54708;
	font-size: 16px;
}

.spar-wz-import-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.spar-wz-import-text strong {
	color: #7a2e0e;
	font-size: 14.5px;
}

.spar-wz-import-text span {
	color: #93370d;
	font-size: 13.5px;
	line-height: 1.5;
}

.spar-wz .spar-wz-import .spar-wz-import-button {
	flex: 0 0 auto;
	gap: 6px;
	border-color: #f0c674;
	background: #fff;
	color: #7a2e0e;
}

.spar-wz .spar-wz-import .spar-wz-import-button:hover,
.spar-wz .spar-wz-import .spar-wz-import-button:focus {
	border-color: #b54708;
	background: #fff;
	color: #7a2e0e;
}

.spar-wz-import-button .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

/* Plain-English tip */
.spar-wz-tip {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 22px 0 0;
	padding: 14px 16px;
	border: 1px solid #dfe3fb;
	border-radius: 10px;
	background: #f6f7ff;
}

.spar-wz-tip-icon {
	flex: 0 0 auto;
	margin-top: 1px;
	color: var( --wz-accent );
	font-size: 15px;
}

.spar-wz-tip p {
	margin: 0;
	color: #3c3f6b;
	font-size: 13.5px;
	line-height: 1.55;
}

.spar-wz-tip strong {
	color: #26284f;
}

/* Tags */
.spar-wz-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	background: #e9f8ef;
	color: #067647;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.5;
	white-space: nowrap;
}

.spar-wz-tag--pro {
	background: linear-gradient( 135deg, #ff6b6b, #ee5a24 );
	color: #fff;
}

.spar-wz-tag--muted {
	background: #eff0f5;
	color: var( --wz-muted );
}

.spar-wz-tag--on {
	background: var( --wz-accent-soft );
	color: var( --wz-accent-2 );
}

/* Choice cards (go live) */
.spar-wz-choices {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px;
}

.spar-wz-choice {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
}

.spar-wz .spar-wz-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.spar-wz-choice-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 20px 22px;
	border: 2px solid var( --wz-line );
	border-radius: 12px;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.spar-wz-choice:hover .spar-wz-choice-card {
	border-color: #c9cfee;
	box-shadow: 0 2px 6px rgba( 27, 29, 51, .08 );
}

.spar-wz-choice input:checked + .spar-wz-choice-card {
	border-color: var( --wz-accent );
	background: #fbfbff;
	box-shadow: none;
}

.spar-wz-choice input:focus-visible + .spar-wz-choice-card {
	outline: 2px solid var( --wz-accent );
	outline-offset: 4px;
}

.spar-wz-choice-check {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 26px;
	height: 26px;
	border: 2px solid #d6d9e8;
	border-radius: 50%;
	background: #fff center / 14px no-repeat;
	transition: background-color .2s ease, border-color .2s ease;
}

.spar-wz-choice input:checked + .spar-wz-choice-card .spar-wz-choice-check {
	border-color: var( --wz-accent );
	background-color: var( --wz-accent );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E" );
}

.spar-wz-choice-icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var( --wz-accent-soft );
	color: var( --wz-accent-2 );
	font-size: 19px;
	transition: background .2s ease, color .2s ease;
}

.spar-wz-choice input:checked + .spar-wz-choice-card .spar-wz-choice-icon {
	background: var( --wz-brand );
	color: #fff;
}

.spar-wz-choice-title {
	padding-right: 30px;
	color: var( --wz-ink );
	font-size: 16px;
	font-weight: 700;
}

.spar-wz-choice-desc {
	color: var( --wz-muted );
	font-size: 13.5px;
	line-height: 1.55;
}

/* Panels & fields */
.spar-wz-panel {
	margin-top: 18px;
	padding: 22px 24px;
	border: 1px solid var( --wz-line );
	border-radius: 12px;
	background: #fff;
	box-shadow: var( --wz-shadow-sm );
}

.spar-wz .spar-wz-panel-title {
	margin: 0 0 4px;
	padding: 0;
	color: var( --wz-ink );
	font-size: 16px;
	font-weight: 700;
}

.spar-wz .spar-wz-panel-title label {
	cursor: default;
}

.spar-wz-panel-desc {
	margin: 0 0 16px;
	color: var( --wz-muted );
	font-size: 13.5px;
	line-height: 1.55;
}

.spar-wz-panel > .spar-wz-field {
	margin-top: 16px;
}

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

.spar-wz-field > label,
.spar-wz .spar-wz-field-label {
	margin: 0;
	color: var( --wz-ink );
	font-size: 13px;
	font-weight: 600;
}

.spar-wz-field--inline {
	align-items: flex-start;
}

.spar-wz-field--inline .spar-wz-input-affix {
	width: 280px;
	max-width: 100%;
}

.spar-wz .spar-wz-field--narrow input.spar-wz-text {
	max-width: 440px;
}

/* Number fields side by side, at the same width as the single ones (280px),
   until there is no room for two. */
.spar-wz-field-row {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 14px;
	max-width: 574px;
}

/* A row whose last field holds more than one control: the first column
   still lines up with the rows above and below. */
.spar-wz-field-row--wide {
	display: flex;
	flex-wrap: wrap;
	max-width: none;
}

.spar-wz-field-row--wide > .spar-wz-field {
	flex: 0 1 280px;
	min-width: 200px;
}

.spar-wz-field-row--wide > .spar-wz-field:last-child {
	flex: 0 1 auto;
}

/* A field and the control that goes with it, such as a unit. */
.spar-wz-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.spar-wz .spar-wz-controls .spar-wz-input-affix--narrow {
	width: 110px;
}

.spar-wz-stack {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.spar-wz-indent {
	padding-left: 14px;
}

.spar-wz .spar-wz-help {
	margin: 0;
	color: var( --wz-faint );
	font-size: 12.5px;
	line-height: 1.5;
}

.spar-wz input.spar-wz-text,
.spar-wz input[type="number"] {
	width: 100%;
	min-width: 0;
	max-width: none;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1.5px solid var( --wz-field );
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
	color: var( --wz-ink );
	font-size: 15px;
	line-height: normal;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* No spinner buttons: they take room from the number and every field has its
   own label and unit. */
.spar-wz input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.spar-wz input[type="number"]::-webkit-inner-spin-button,
.spar-wz input[type="number"]::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.spar-wz input.spar-wz-text:focus,
.spar-wz input[type="number"]:focus {
	border-color: var( --wz-accent );
	box-shadow: 0 0 0 4px var( --wz-accent-ring );
	outline: none;
}

.spar-wz-input-affix {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	border: 1.5px solid var( --wz-field );
	border-radius: 12px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.spar-wz-input-affix:focus-within {
	border-color: var( --wz-accent );
	box-shadow: 0 0 0 4px var( --wz-accent-ring );
}

.spar-wz .spar-wz-input-affix input[type="number"] {
	flex: 1;
	min-width: 60px;
	height: 41px;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.spar-wz .spar-wz-input-affix input[type="number"]:focus {
	box-shadow: none;
}

.spar-wz-input-affix--narrow {
	width: 110px;
}

.spar-wz-affix {
	display: flex;
	align-items: center;
	padding: 0 12px;
	border-right: 1px solid #e8eaf3;
	background: var( --wz-tint );
	color: var( --wz-muted );
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}

.spar-wz-input-affix--end .spar-wz-affix,
.spar-wz-input-affix .spar-wz-affix:last-child:not( :first-child ) {
	order: 2;
	border-right: 0;
	border-left: 1px solid #e8eaf3;
}

.spar-wz-inline-error {
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fef3f2;
	color: #b42318;
	font-size: 13px;
	font-weight: 600;
}

/* Checkbox (WordPress core draws its own; recolor it to match). */
.spar-wz-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border: 1px dashed #cfd5f3;
	border-radius: 12px;
	background: #fbfbff;
	color: var( --wz-text );
	font-size: 13.5px;
	cursor: pointer;
}

.spar-wz .spar-wz-check input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 1px 0 0;
	border-color: #b8bfdf;
	border-radius: 5px;
}

.spar-wz .spar-wz-check input[type="checkbox"]:checked {
	border-color: var( --wz-accent );
	background: var( --wz-accent );
}

.spar-wz .spar-wz-check input[type="checkbox"]:checked::before {
	content: url( "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E" );
}

.spar-wz .spar-wz-check input[type="checkbox"]:focus {
	border-color: var( --wz-accent );
	box-shadow: 0 0 0 3px var( --wz-accent-ring );
}

.spar-wz-check code {
	padding: 1px 5px;
	border-radius: 4px;
	background: #eef0fa;
	font-size: 12px;
}

.spar-wz-check small {
	display: block;
	margin-top: 3px;
	color: var( --wz-muted );
	font-size: 12.5px;
}

.spar-wz-page-made {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.spar-wz-page-made .dashicons {
	color: #12b76a;
}

/* Segmented control */
.spar-wz-segmented {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	width: fit-content;
	max-width: 100%;
	padding: 4px;
	border-radius: 12px;
	background: #eef0f6;
}

.spar-wz-segment {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.spar-wz .spar-wz-segment input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.spar-wz-segment span {
	display: block;
	padding: 8px 15px;
	border-radius: 9px;
	color: var( --wz-muted );
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.spar-wz-segment:hover span {
	color: var( --wz-ink );
}

.spar-wz-segment input:checked + span {
	background: #fff;
	color: var( --wz-ink );
	box-shadow: 0 1px 3px rgba( 27, 29, 51, .1 ), 0 1px 1px rgba( 27, 29, 51, .04 );
}

.spar-wz-segment input:focus-visible + span {
	outline: 2px solid var( --wz-accent );
	outline-offset: 1px;
}

.spar-wz-segmented--sm .spar-wz-segment span {
	padding: 6px 11px;
	font-size: 12.5px;
}

/* Names & chips */
.spar-wz-label-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.spar-wz .spar-wz-label-row input.spar-wz-text {
	max-width: 440px;
}

.spar-wz-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.spar-wz-chip {
	appearance: none;
	margin: 0;
	padding: 6px 13px;
	border: 1px solid var( --wz-field );
	border-radius: 999px;
	background: var( --wz-tint );
	color: var( --wz-text );
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.spar-wz-chip:hover {
	border-color: var( --wz-accent );
	color: var( --wz-accent-2 );
}

.spar-wz-chip.is-active {
	border-color: var( --wz-accent );
	background: var( --wz-accent-soft );
	color: var( --wz-accent-2 );
	font-weight: 600;
}

.spar-wz-chip:focus-visible {
	outline: 2px solid var( --wz-accent );
	outline-offset: 2px;
}

/* Points icon picker */
.spar-wz-icon-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
}

.spar-wz-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Upload your own: a dashed tile after the choices. */
.spar-wz-icon-upload {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: none;
	font: inherit;
	cursor: pointer;
}

.spar-wz-icon-swatch--upload {
	gap: 3px;
	align-content: center;
	border-style: dashed;
	border-color: #c9cfee;
	background: var( --wz-tint );
	color: var( --wz-accent-2 );
	font-size: 11px;
	font-weight: 700;
}

.spar-wz-icon-swatch--upload i {
	font-size: 15px;
}

.spar-wz-icon-upload:hover .spar-wz-icon-swatch--upload {
	border-color: var( --wz-accent );
	background: var( --wz-accent-soft );
	transform: translateY( -1px );
}

.spar-wz-icon-upload:focus-visible {
	outline: 2px solid var( --wz-accent );
	outline-offset: 3px;
}

.spar-wz-icon-choice {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.spar-wz .spar-wz-icon-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.spar-wz-icon-swatch {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 2px solid var( --wz-line );
	border-radius: 12px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.spar-wz-icon-swatch img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.spar-wz-icon-swatch--none {
	color: var( --wz-muted );
	font-size: 12px;
	font-weight: 600;
}

.spar-wz-icon-choice:hover .spar-wz-icon-swatch {
	border-color: #c9cfee;
	transform: translateY( -1px );
}

.spar-wz-icon-choice input:checked + .spar-wz-icon-swatch {
	border-color: var( --wz-accent );
	box-shadow: 0 0 0 3px var( --wz-accent-ring );
}

.spar-wz-icon-choice input:focus-visible + .spar-wz-icon-swatch {
	outline: 2px solid var( --wz-accent );
	outline-offset: 3px;
}

/* Feature cards */
.spar-wz-features {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spar-wz-panel + .spar-wz-features {
	margin-top: 18px;
}

.spar-wz-feature {
	border: 1.5px solid var( --wz-line );
	border-radius: 12px;
	background: #fff;
	transition: border-color .25s ease, box-shadow .25s ease;
}

.spar-wz-feature.is-on {
	border-color: #c4cbf6;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .06 );
}

.spar-wz-feature-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 18px 20px;
	cursor: pointer;
}

.spar-wz-feature.is-group .spar-wz-feature-head,
.spar-wz-feature.is-static .spar-wz-feature-head,
.spar-wz-feature.is-locked .spar-wz-feature-head {
	cursor: default;
}

.spar-wz-feature-icon {
	display: grid;
	place-items: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #f1f2f8;
	color: #7d8199;
	font-size: 18px;
	transition: background .25s ease, color .25s ease;
}

.spar-wz-feature.is-on .spar-wz-feature-icon {
	background: var( --wz-brand );
	color: #fff;
}

.spar-wz-feature.is-group .spar-wz-feature-icon {
	background: var( --wz-accent-soft );
	color: var( --wz-accent-2 );
}

.spar-wz-feature-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.spar-wz-feature-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var( --wz-ink );
	font-size: 15.5px;
	font-weight: 700;
}

.spar-wz-feature-desc {
	color: var( --wz-muted );
	font-size: 13.5px;
	line-height: 1.55;
	text-wrap: pretty;
}

.spar-wz-feature-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0 20px 20px 80px;
}

.spar-wz-feature.is-static {
	border-style: dashed;
	background: transparent;
}

/* PRO ways to earn that are set up on the Settings page. */
.spar-wz-more {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0 20px 8px 80px;
	list-style: none;
}

.spar-wz-more-item {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 14px 0;
	border-top: 1px solid var( --wz-line-2 );
}

.spar-wz-more-icon {
	display: grid;
	place-items: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var( --wz-accent-soft );
	color: var( --wz-accent-2 );
	font-size: 14px;
}

.spar-wz-more-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.spar-wz-more-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var( --wz-ink );
	font-size: 14px;
	font-weight: 600;
}

.spar-wz-more-desc {
	color: var( --wz-muted );
	font-size: 13px;
	line-height: 1.5;
}

.spar-wz .spar-wz-more-link {
	flex: 0 0 auto;
	padding: 7px 12px;
	border: 1px solid var( --wz-field );
	border-radius: 9px;
	background: #fff;
	color: var( --wz-ink );
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.spar-wz .spar-wz-more-link:hover,
.spar-wz .spar-wz-more-link:focus {
	border-color: var( --wz-accent );
	color: var( --wz-accent-2 );
}

.spar-wz-feature.is-locked {
	border-style: dashed;
	background: linear-gradient( 135deg, #fff, #f9f9fd );
}

.spar-wz-feature.is-locked .spar-wz-feature-icon {
	opacity: .7;
}

.spar-wz .spar-wz-unlock {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	padding: 8px 13px;
	border-radius: 10px;
	background: var( --wz-dark );
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease;
}

.spar-wz .spar-wz-unlock:hover,
.spar-wz .spar-wz-unlock:focus {
	background: #33315a;
	color: #fff;
}

.spar-wz-pro-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 6px 0 0;
}

.spar-wz-pro-promo {
	color: #c2410c;
	font-size: 13.5px;
	font-weight: 700;
}

/* Switch */
.spar-wz-switch {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 46px;
	height: 26px;
}

.spar-wz .spar-wz-switch input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.spar-wz-switch-track {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: #d3d6e4;
	transition: background .25s ease, box-shadow .2s ease;
}

.spar-wz-switch-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .25 );
	transition: transform .2s ease;
}

.spar-wz-switch input:checked + .spar-wz-switch-track {
	background: var( --wz-accent );
}

.spar-wz-switch input:checked + .spar-wz-switch-track::after {
	transform: translateX( 20px );
}

.spar-wz-switch input:focus-visible + .spar-wz-switch-track {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --wz-accent );
}

.spar-wz-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: var( --wz-tint );
	color: var( --wz-ink );
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}

.spar-wz-toggle-row:hover {
	background: #f2f3f9;
}

.spar-wz-toggle-row small {
	display: block;
	margin-top: 2px;
	color: var( --wz-muted );
	font-size: 12.5px;
	font-weight: 400;
}

/* Examples */
.spar-wz-example {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var( --wz-line-2 );
	border-radius: 12px;
	background: #f7f8fc;
	color: var( --wz-text );
	font-size: 13.5px;
	line-height: 1.65;
}

.spar-wz-example-tag {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 7px;
	border-radius: 6px;
	background: var( --wz-dark );
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: 1px;
}

.spar-wz-figure {
	color: var( --wz-ink );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Reward & level editors */
.spar-wz-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* Rows lay out by their own width, which shrinks as the preview opens. */
	container: spar-wz-rows / inline-size;
}

.spar-wz-row {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var( --wz-line );
	border-radius: 12px;
	background: var( --wz-tint );
	transition: border-color .2s ease, opacity .2s ease, background .2s ease;
}

.spar-wz-row.is-off {
	background: #fff;
	opacity: .72;
}

.spar-wz-row.has-error {
	border-color: #f4b4ae;
}

.spar-wz-row-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
}

.spar-wz-row-icon {
	display: grid;
	place-items: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var( --wz-brand );
	color: #fff;
	font-size: 15px;
}

.spar-wz-row.is-off .spar-wz-row-icon {
	background: #c9ccdc;
}

.spar-wz-row-icon--badge {
	align-self: flex-end;
	margin-bottom: 4px;
}

.spar-wz-row-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.spar-wz-row-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: var( --wz-muted );
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.spar-wz-row-remove {
	appearance: none;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 9px;
	background: none;
	color: var( --wz-faint );
	font-size: 14px;
	cursor: pointer;
	transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.spar-wz-row-remove:hover,
.spar-wz-row-remove:focus-visible {
	border-color: #f4c7c3;
	background: #fef3f2;
	color: #b42318;
	outline: none;
}

.spar-wz-row-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.spar-wz-row-fields > .spar-wz-field {
	flex: 0 1 170px;
}

.spar-wz-row-fields > .spar-wz-field--grow {
	flex: 1 1 220px;
}

.spar-wz-row-fields > .spar-wz-field--product {
	flex: 1 1 240px;
}

.spar-wz-row-fields > .spar-wz-field--small {
	flex: 0 1 150px;
}

.spar-wz-level .spar-wz-row-fields > .spar-wz-row-remove,
.spar-wz-tier .spar-wz-row-fields > .spar-wz-row-remove {
	margin-bottom: 5px;
}

.spar-wz .spar-wz-row-note {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	color: var( --wz-muted );
	font-size: 12.5px;
}

.spar-wz-row-note i {
	color: var( --wz-faint );
	font-size: 12px;
}

.spar-wz .spar-wz-row-note:has( > span:empty ) {
	display: none;
}

/* Reward rows: what it gives, what it costs and its name, in the same three
   columns whatever the type. */
.spar-wz-reward .spar-wz-row-fields {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ) minmax( 0, 1.3fr );
	align-items: end;
	gap: 12px;
}

.spar-wz-static-value {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 44px;
	padding: 0 14px;
	overflow: hidden;
	border: 1.5px dashed var( --wz-field );
	border-radius: 12px;
	color: var( --wz-muted );
	font-size: 13.5px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spar-wz-static-value i {
	color: var( --wz-accent );
}

/* Level and spend level rows: an icon, the fields, and the remove button. */
.spar-wz-level .spar-wz-row-fields,
.spar-wz-tier .spar-wz-row-fields {
	display: grid;
	align-items: end;
	gap: 12px;
}

/* Levels: the badge, name, points and multiplier, with the perks underneath. */
.spar-wz-level .spar-wz-row-fields {
	grid-template-areas:
		"icon name points mult remove"
		". perks perks perks .";
	grid-template-columns: 44px minmax( 0, 1.3fr ) minmax( 0, 1fr ) minmax( 0, .75fr ) 34px;
	row-gap: 14px;
}

/* The starting level is reached from the start, so it has no points to set. */
.spar-wz-level--starter .spar-wz-row-fields {
	grid-template-areas:
		"icon name start start ."
		". perks perks perks .";
}

.spar-wz-row-fields > .spar-wz-field--start {
	grid-area: start;
}

.spar-wz-row-fields > .spar-wz-field--perks {
	grid-area: perks;
}

.spar-wz-level--starter {
	border-style: dashed;
	background: #fff;
}

.spar-wz-tier .spar-wz-row-fields {
	grid-template-areas: "icon threshold points remove";
	grid-template-columns: 36px minmax( 0, 1fr ) minmax( 0, 1fr ) 34px;
}

.spar-wz-row-fields > .spar-wz-row-icon,
.spar-wz-row-fields > .spar-wz-badge {
	grid-area: icon;
}

.spar-wz-row-fields > .spar-wz-field--name {
	grid-area: name;
}

.spar-wz-level .spar-wz-row-fields > .spar-wz-field--points,
.spar-wz-tier .spar-wz-row-fields > .spar-wz-field--points {
	grid-area: points;
}

.spar-wz-row-fields > .spar-wz-field--mult {
	grid-area: mult;
}

.spar-wz-row-fields > .spar-wz-field--threshold {
	grid-area: threshold;
}

.spar-wz-level .spar-wz-row-fields > .spar-wz-row-remove,
.spar-wz-tier .spar-wz-row-fields > .spar-wz-row-remove {
	grid-area: remove;
}

/* The note under a level lines up with its fields, not its badge. */
.spar-wz .spar-wz-level .spar-wz-row-note {
	padding-left: 56px;
}

.spar-wz .spar-wz-optional {
	margin-left: 4px;
	color: var( --wz-faint );
	font-weight: 400;
}

.spar-wz textarea.spar-wz-textarea {
	display: block;
	width: 100%;
	min-height: 44px;
	max-height: 160px;
	margin: 0;
	padding: 10px 14px;
	resize: none;
	border: 1.5px solid var( --wz-field );
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
	color: var( --wz-ink );
	font-size: 14px;
	line-height: 1.5;
	field-sizing: content;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.spar-wz textarea.spar-wz-textarea:focus {
	border-color: var( --wz-accent );
	box-shadow: 0 0 0 4px var( --wz-accent-ring );
	outline: none;
}

.spar-wz textarea.spar-wz-textarea::placeholder {
	color: var( --wz-faint );
}

/* Level badges */
.spar-wz-badge {
	position: relative;
	align-self: end;
}

.spar-wz-badge-button {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var( --wz-brand );
	box-shadow: 0 4px 12px -6px rgba( 81, 70, 193, .6 );
	color: #fff;
	font-size: 18px;
	list-style: none;
	cursor: pointer;
	transition: box-shadow .15s ease, transform .15s ease;
}

.spar-wz-badge-button::-webkit-details-marker {
	display: none;
}

.spar-wz-badge-button::marker {
	content: "";
}

.spar-wz-badge-button:hover,
.spar-wz-badge[open] > .spar-wz-badge-button {
	box-shadow: 0 0 0 4px var( --wz-accent-ring ), 0 4px 12px -6px rgba( 81, 70, 193, .6 );
}

.spar-wz-badge-button:focus-visible {
	outline: 2px solid var( --wz-accent );
	outline-offset: 3px;
}

/* A small pencil shows the badge can be changed. */
.spar-wz-badge-edit {
	position: absolute;
	right: -6px;
	bottom: -6px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var( --wz-dark );
	color: #fff;
	font-size: 8px;
}

.spar-wz-badge-current,
.spar-wz-badge-swatch {
	display: grid;
	place-items: center;
	line-height: 1;
}

/* A badge set in Settings (an image or text) shown in the editor. */
.spar-wz-badge-img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.spar-wz-badge-glyph {
	font-size: 22px;
	font-weight: 700;
}

.spar-wz-badge-art {
	display: grid;
	place-items: center;
}

.spar-wz-badge-glyph.spar-badge-icon--gradient {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: inherit;
}

.spar-wz-badge-menu {
	position: absolute;
	top: calc( 100% + 8px );
	left: -6px;
	z-index: 20;
	width: 288px;
	padding: 12px;
	border: 1px solid var( --wz-line );
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba( 27, 29, 51, .06 ), 0 18px 40px -16px rgba( 27, 29, 51, .35 );
	animation: spar-wz-reveal .18s ease both;
}

.spar-wz-badge-choices {
	display: grid;
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	gap: 6px;
}

.spar-wz-badge-choice {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.spar-wz .spar-wz-badge-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.spar-wz-badge-swatch {
	height: 38px;
	border-radius: 10px;
	background: var( --wz-tint );
	color: var( --wz-accent-2 );
	font-size: 16px;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.spar-wz-badge-choice:hover .spar-wz-badge-swatch {
	background: var( --wz-accent-soft );
}

.spar-wz-badge-choice input:checked + .spar-wz-badge-swatch {
	background: var( --wz-brand );
	color: #fff;
}

.spar-wz-badge-choice input:focus-visible + .spar-wz-badge-swatch {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --wz-accent );
}

/* A badge from Settings, kept: on its own line above the icons. */
.spar-wz-badge-choice--own {
	grid-column: 1 / -1;
}

.spar-wz-badge-choice--own .spar-wz-badge-swatch {
	display: flex;
	justify-content: flex-start;
	gap: 10px;
	padding: 0 12px;
}

.spar-wz-badge-own {
	color: inherit;
	font-size: 13px;
	font-weight: 600;
}

.spar-wz .spar-wz-badge-note {
	margin: 10px 2px 0;
	color: var( --wz-faint );
	font-size: 12px;
	line-height: 1.45;
}

@container spar-wz-rows ( max-width: 640px ) {
	/* The icon and the switches on one line, the type of reward across the next. */
	.spar-wz-reward .spar-wz-row-head {
		display: grid;
		grid-template-areas:
			"icon actions"
			"kind kind";
		grid-template-columns: auto minmax( 0, 1fr );
		gap: 12px;
	}

	.spar-wz-reward .spar-wz-row-head > .spar-wz-row-icon {
		grid-area: icon;
	}

	.spar-wz-reward .spar-wz-row-head > .spar-wz-row-actions {
		grid-area: actions;
		justify-self: end;
	}

	.spar-wz-reward .spar-wz-row-head > .spar-wz-segmented {
		display: flex;
		grid-area: kind;
		width: 100%;
	}

	.spar-wz-reward .spar-wz-row-head .spar-wz-segment {
		flex: 1 1 auto;
	}

	.spar-wz-reward .spar-wz-row-head .spar-wz-segment span {
		padding-right: 8px;
		padding-left: 8px;
		text-align: center;
	}

	.spar-wz-reward .spar-wz-row-fields {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}

	.spar-wz-reward .spar-wz-row-fields > .spar-wz-field--grow {
		grid-column: 1 / -1;
	}

	.spar-wz-level .spar-wz-row-fields {
		grid-template-areas:
			"icon name name remove"
			". points mult ."
			". perks perks .";
		grid-template-columns: 44px minmax( 0, 1.3fr ) minmax( 0, 1fr ) 34px;
	}

	.spar-wz-level--starter .spar-wz-row-fields {
		grid-template-areas:
			"icon name name ."
			". start start ."
			". perks perks .";
	}
}

@container spar-wz-rows ( max-width: 440px ) {
	.spar-wz-reward .spar-wz-row-head > .spar-wz-segmented {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.spar-wz-reward .spar-wz-row-fields {
		grid-template-columns: minmax( 0, 1fr );
	}

	.spar-wz-level .spar-wz-row-fields {
		grid-template-areas:
			"icon name remove"
			". points ."
			". mult ."
			". perks .";
		grid-template-columns: 44px minmax( 0, 1fr ) 34px;
	}

	.spar-wz-level--starter .spar-wz-row-fields {
		grid-template-areas:
			"icon name ."
			". start ."
			". perks .";
	}

	.spar-wz .spar-wz-level .spar-wz-row-note {
		padding-left: 0;
	}

	.spar-wz-badge-menu {
		width: 240px;
	}

	.spar-wz-badge-choices {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	.spar-wz-tier .spar-wz-row-fields {
		grid-template-areas:
			"icon threshold remove"
			". points .";
		grid-template-columns: 36px minmax( 0, 1fr ) 34px;
	}

	.spar-wz-row-toggle-text {
		display: none;
	}
}

.spar-wz-row--static {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	border-style: dashed;
	background: #fff;
}

.spar-wz-row-static-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.spar-wz-row-static-text strong {
	color: var( --wz-ink );
	font-size: 14px;
}

.spar-wz-row-static-text small {
	color: var( --wz-muted );
	font-size: 12.5px;
}

/* WooCommerce's product search, sized like the wizard's other fields. */
.spar-wz .select2-container .select2-selection--single {
	height: 44px;
	border: 1.5px solid var( --wz-field );
	border-radius: 12px;
}

.spar-wz .select2-container .select2-selection--single .select2-selection__rendered {
	padding-left: 14px;
	color: var( --wz-ink );
	font-size: 14px;
	line-height: 41px;
}

.spar-wz .select2-container .select2-selection--single .select2-selection__arrow {
	top: 1px;
	right: 6px;
	height: 41px;
}

.spar-wz .select2-container--focus .select2-selection--single,
.spar-wz .select2-container--open .select2-selection--single {
	border-color: var( --wz-accent );
	box-shadow: 0 0 0 4px var( --wz-accent-ring );
}

.spar-wz select[data-wz-product-select] {
	width: 100%;
	height: 44px;
	border: 1.5px solid var( --wz-field );
	border-radius: 12px;
}

/* Inline actions */
.spar-wz-inline-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.spar-wz-inline-status {
	color: var( --wz-muted );
	font-size: 13px;
}

.spar-wz-inline-status.is-success {
	color: #067647;
	font-weight: 600;
}

.spar-wz-inline-status.is-error {
	color: #b42318;
	font-weight: 600;
}

/* Layout with the live preview */

/* Steps with a preview sit in the left column. The one preview panel, shared
   by every step (moving a frame would reload it), is a drawer in the right
   column: closed, that column has no width and the step is centred; opened
   from the tab on the right, the column widens and the panel slides in. */
.spar-wz-content.has-live {
	--wz-ease: cubic-bezier( .22, .8, .26, 1 );
	--wz-live-cols: minmax( 0, 1fr ) minmax( 0, 1.25fr );
	--wz-live-gap: 72px;
	--wz-live-pad: 32px;

	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 0fr );
	align-items: start;
	column-gap: 0;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	/* Room for the preview tab on the right, and the same on the left so the
	   step stays centred like the steps without a preview. */
	padding: 0 calc( var( --wz-live-pad ) + 44px );
	transition: grid-template-columns .5s var( --wz-ease ), column-gap .5s var( --wz-ease ), padding .5s var( --wz-ease );
}

.spar-wz-content.has-live.is-live-open {
	grid-template-columns: var( --wz-live-cols );
	column-gap: var( --wz-live-gap );
	padding-right: var( --wz-live-pad );
	padding-left: var( --wz-live-pad );
}

.spar-wz-content.has-live > .spar-wz-form {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}

/* The step lays out by the width of its own column, which shrinks while the
   preview is open. */
.spar-wz-form {
	container: spar-wz-step / inline-size;
}

/* In a narrow column a card's settings use its full width, rather than
   lining up under the title. */
@container spar-wz-step ( max-width: 700px ) {
	.spar-wz-feature-body {
		padding-left: 20px;
	}

	.spar-wz-more {
		padding-left: 20px;
	}
}

/* A comfortable reading width, centred while the preview is closed. */
.spar-wz-content.has-live .spar-wz-step-inner {
	max-width: 920px;
	padding: 40px 0 36px;
}

.spar-wz-split-main > .spar-wz-panel:first-child,
.spar-wz-split-main > .spar-wz-subhead:first-child {
	margin-top: 0;
}

.spar-wz [data-wz-preview-slot] {
	display: none;
}

/* The tab that opens and closes the preview: on the right edge while it is
   closed, and on the edge of the panel while it is open. */
.spar-wz-live-toggle {
	appearance: none;
	position: sticky;
	top: calc( 50vh - 96px );
	z-index: 3;
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	justify-self: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 44px;
	margin: 0 0 0 14px;
	padding: 8px 0 12px;
	border: 0;
	border-radius: 16px;
	background: var( --wz-brand );
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, .28 ),
		0 2px 4px rgba( 81, 70, 193, .18 ),
		0 14px 28px -12px rgba( 81, 70, 193, .7 );
	color: #fff;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: margin .5s var( --wz-ease ), transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.spar-wz-live-toggle:hover {
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, .28 ),
		0 2px 4px rgba( 81, 70, 193, .2 ),
		0 18px 34px -12px rgba( 81, 70, 193, .8 );
	transform: translateX( -3px );
}

.spar-wz-live-toggle:active {
	transform: translateX( -1px ) scale( .98 );
}

.spar-wz-live-toggle:focus-visible {
	outline: 2px solid var( --wz-accent );
	outline-offset: 3px;
}

/* A first visit points out the tab, twice, then leaves it be. */
.spar-wz-live-toggle.is-new {
	animation: spar-wz-nudge 1.6s ease-out .8s 2;
}

@keyframes spar-wz-nudge {
	0% { box-shadow: 0 0 0 0 rgba( 102, 126, 234, .5 ), 0 14px 28px -12px rgba( 81, 70, 193, .7 ); }
	70% { box-shadow: 0 0 0 14px rgba( 102, 126, 234, 0 ), 0 14px 28px -12px rgba( 81, 70, 193, .7 ); }
	100% { box-shadow: 0 0 0 0 rgba( 102, 126, 234, 0 ), 0 14px 28px -12px rgba( 81, 70, 193, .7 ); }
}

.spar-wz-live-toggle-show,
.spar-wz-live-toggle-hide {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
}

.spar-wz-live-toggle[aria-expanded="true"] .spar-wz-live-toggle-show,
.spar-wz-live-toggle[aria-expanded="false"] .spar-wz-live-toggle-hide {
	display: none;
}

/* The icon, in a soft circle at the top of the tab. */
.spar-wz-live-toggle-icon {
	display: grid;
	place-items: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .2 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .22 );
	font-size: 12px;
	transition: background .2s ease, color .2s ease;
}

.spar-wz-live-toggle:hover .spar-wz-live-toggle-icon {
	background: #fff;
	color: var( --wz-accent-2 );
}

.spar-wz-live-toggle-label {
	letter-spacing: .04em;
	white-space: nowrap;
	writing-mode: vertical-rl;
}

/* A small arrow: the preview slides out from here. */
.spar-wz-live-toggle-cue {
	font-size: 9px;
	opacity: .7;
	transition: transform .2s ease, opacity .2s ease;
}

.spar-wz-live-toggle:hover .spar-wz-live-toggle-cue {
	opacity: 1;
	transform: translateX( -2px );
}

/* Open: a quieter tab on the edge of the panel, to close it again. */
.spar-wz-content.is-live-open > .spar-wz-live-toggle {
	/* Centred in the gap between the step and the panel. */
	margin-left: calc( ( var( --wz-live-gap ) + 44px ) / -2 );
	padding-top: 8px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var( --wz-line ), 0 6px 16px -10px rgba( 27, 29, 51, .3 );
	color: var( --wz-muted );
}

.spar-wz-content.is-live-open > .spar-wz-live-toggle:hover {
	box-shadow: inset 0 0 0 1px var( --wz-accent ), 0 10px 22px -12px rgba( 81, 70, 193, .45 );
	color: var( --wz-accent-2 );
	transform: translateX( 2px );
}

.spar-wz-content.is-live-open .spar-wz-live-toggle-icon {
	background: var( --wz-accent-soft );
	box-shadow: none;
	color: var( --wz-accent-2 );
}

.spar-wz-content.is-live-open > .spar-wz-live-toggle:hover .spar-wz-live-toggle-icon {
	background: var( --wz-brand );
	color: #fff;
}

/* Live preview */
.spar-wz-live {
	position: sticky;
	top: calc( var( --wz-top ) + 16px );
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* Laid out at a usable width from the start, so nothing reflows as the
	   drawer opens; the edge of the wizard clips it until it is fully in. */
	min-width: 440px;
	height: calc( 100vh - var( --wz-top ) - 112px );
	min-height: 480px;
	max-height: 1100px;
	margin-top: 40px;
	transition: opacity .35s ease .1s, transform .5s var( --wz-ease ), visibility 0s;
}

.spar-wz-content.has-live:not( .is-live-open ) > .spar-wz-live {
	visibility: hidden;
	opacity: 0;
	transform: translateX( 24px );
	pointer-events: none;
	transition: opacity .2s ease, transform .5s var( --wz-ease ), visibility 0s .5s;
}

.spar-wz-live-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}

.spar-wz-live-tools {
	display: flex;
	align-items: center;
	gap: 8px;
}

.spar-wz-preview-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	padding: 3px;
	border-radius: 10px;
	background: #e8eaf3;
}

.spar-wz-preview-tabs button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 6px 12px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var( --wz-muted );
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

.spar-wz-preview-tabs button .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
}

.spar-wz-preview-tabs button.is-active {
	background: #fff;
	color: var( --wz-ink );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .08 );
}

.spar-wz-preview-tabs button:focus-visible {
	outline: 2px solid var( --wz-accent );
	outline-offset: 1px;
}

.spar-wz .spar-wz-live-open {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var( --wz-line );
	border-radius: 9px;
	background: #fff;
	color: var( --wz-muted );
	text-decoration: none;
}

.spar-wz .spar-wz-live-open:hover,
.spar-wz .spar-wz-live-open:focus {
	border-color: var( --wz-accent );
	color: var( --wz-accent-2 );
}

.spar-wz-browser {
	overflow: hidden;
	border: 1px solid #dfe2ee;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 27, 29, 51, .08 ), 0 18px 40px -24px rgba( 27, 29, 51, .35 );
}

.spar-wz-browser-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	border-bottom: 1px solid #e8eaf2;
	background: #f4f5f9;
}

.spar-wz-browser-bar i {
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #d3d5df;
}

.spar-wz-browser-url {
	flex: 1;
	min-width: 0;
	margin-left: 8px;
	padding: 3px 10px;
	overflow: hidden;
	border: 1px solid #e8eaf2;
	border-radius: 6px;
	background: #fff;
	color: var( --wz-faint );
	font-size: 11.5px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spar-wz-live-status {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	color: var( --wz-accent-2 );
	font-size: 11.5px;
	font-weight: 600;
}

.spar-wz-live-status::before {
	content: "";
	width: 11px;
	height: 11px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spar-wz-spin .7s linear infinite;
}

.spar-wz-live.is-updating .spar-wz-live-status {
	display: inline-flex;
}

.spar-wz-live-window {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.spar-wz-live-stage {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	background: #fff;
}

/* Before the first page arrives. */
.spar-wz-live.is-updating .spar-wz-live-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 100deg, #f5f6fb 30%, #eceef6 50%, #f5f6fb 70% ) 0 0 / 300% 100%;
	animation: spar-wz-shimmer 1.4s ease infinite;
}

@keyframes spar-wz-shimmer {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}

.spar-wz-live-frame {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	border: 0;
	background: #fff;
	transform-origin: 0 0;
}

/* A page still loading stays behind the one on screen until it is ready. */
.spar-wz-live-frame.is-loading {
	visibility: hidden;
}

.spar-wz-live[data-device="mobile"] .spar-wz-live-stage {
	background: #eef0f6;
}

.spar-wz-live[data-device="mobile"] .spar-wz-live-frame {
	box-shadow: 0 0 0 1px #dfe2ee, 0 12px 30px -10px rgba( 27, 29, 51, .25 );
}

.spar-wz-live-message {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: min( 80%, 360px );
	padding: 16px 18px;
	border: 1px solid var( --wz-line );
	border-radius: 12px;
	background: #fff;
	color: var( --wz-muted );
	font-size: 13.5px;
	line-height: 1.5;
	text-align: center;
	box-shadow: 0 10px 30px -12px rgba( 27, 29, 51, .3 );
	transform: translate( -50%, -50% );
}

.spar-wz .spar-wz-preview-note {
	margin: 0;
	color: var( --wz-faint );
	font-size: 12.5px;
	text-align: center;
}

.spar-wz .spar-wz-preview-note.is-warning {
	padding: 8px 12px;
	border-radius: 10px;
	background: #fffaeb;
	color: #93370d;
	text-align: left;
}

/* Quick picks */
.spar-wz-quick {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.spar-wz-quick-label {
	color: var( --wz-ink );
	font-size: 13px;
	font-weight: 600;
}

.spar-wz-quick .spar-wz-help {
	flex-basis: 100%;
}

/* Brand colors */
.spar-wz-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.spar-wz-swatch {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 5px 12px 5px 5px;
	border: 1.5px solid #e1e4ee;
	border-radius: 999px;
	background: #fff;
	color: var( --wz-text );
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.spar-wz-swatch:hover {
	border-color: #c4c9dc;
}

.spar-wz-swatch[aria-pressed="true"] {
	border-color: var( --wz-ink );
	box-shadow: 0 0 0 3px rgba( 27, 29, 51, .08 );
}

.spar-wz-swatch:focus-visible {
	outline: 2px solid var( --wz-accent );
	outline-offset: 2px;
}

.spar-wz-swatch-dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --sw-1 ), var( --sw-2 ) );
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .08 );
}

.spar-wz-color-input {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 12px 5px 5px;
	border: 1.5px solid var( --wz-field );
	border-radius: 12px;
	background: #fff;
}

.spar-wz-color-input:focus-within {
	border-color: var( --wz-accent );
	box-shadow: 0 0 0 4px var( --wz-accent-ring );
}

.spar-wz-color-input input[type="color"] {
	width: 40px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	cursor: pointer;
}

.spar-wz-color-input input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

.spar-wz-color-input input[type="color"]::-webkit-color-swatch {
	border: 0;
	border-radius: 8px;
}

.spar-wz-color-input input[type="color"]::-moz-color-swatch {
	border: 0;
	border-radius: 8px;
}

.spar-wz .spar-wz-color-input code {
	padding: 0;
	background: none;
	color: var( --wz-ink );
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .03em;
}

/* Navigation bar */

/* Floats at the bottom of the window while the step scrolls beneath it, and
   settles at the end of the wizard once the page reaches it. */
.spar-wz-footer {
	position: sticky;
	bottom: var( --wz-gap );
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 28px var( --wz-gap );
	padding: 10px 10px 10px 12px;
	border: 1px solid var( --wz-line );
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 14px 34px -14px rgba( 27, 29, 51, .3 ), 0 1px 2px rgba( 27, 29, 51, .06 );
}

.spar-wz-footer-start,
.spar-wz-footer-end {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* The links may wrap; the Continue button never shrinks off the edge. */
.spar-wz-footer-start {
	flex: 0 1 auto;
	min-width: 0;
}

.spar-wz-footer-end {
	flex: 0 0 auto;
}

.spar-wz-footer-status:empty {
	display: none;
}

.spar-wz-footer-status {
	flex: 1;
	color: #b42318;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.spar-wz-counter {
	color: var( --wz-faint );
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.spar-wz .spar-wz-skip {
	color: var( --wz-muted );
	font-size: 13.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.spar-wz .spar-wz-skip:hover {
	color: var( --wz-ink );
}

.spar-wz .spar-wz-quit {
	color: var( --wz-muted );
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.spar-wz .spar-wz-quit:hover,
.spar-wz .spar-wz-quit:focus {
	color: var( --wz-ink );
}

/* Buttons */
.spar-wz-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	margin: 0;
	padding: 0 20px;
	border: 1.5px solid transparent;
	border-radius: 12px;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

.spar-wz-btn .dashicons {
	position: relative;
	top: -1px;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1 !important;
}

.spar-wz-btn .dashicons::before {
	display: inline-block !important;
	line-height: 1 !important;
	vertical-align: middle !important;
}

.spar-wz-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var( --wz-accent-ring );
}

.spar-wz-btn:disabled {
	cursor: default;
	opacity: .55;
}

.spar-wz .spar-wz-btn--primary {
	background: var( --wz-brand );
	color: #fff;
	box-shadow: 0 6px 16px -8px rgba( 118, 75, 162, .7 );
}

.spar-wz .spar-wz-btn--primary:hover {
	color: #fff;
	box-shadow: 0 8px 20px -8px rgba( 118, 75, 162, .85 );
}

.spar-wz .spar-wz-btn--primary:focus-visible {
	box-shadow: 0 0 0 3px var( --wz-accent-ring );
}

.spar-wz .spar-wz-btn--ghost {
	border-color: var( --wz-field );
	background: #fff;
	color: var( --wz-ink );
}

.spar-wz .spar-wz-btn--ghost:hover {
	border-color: #b9bfd6;
	color: var( --wz-ink );
}

.spar-wz .spar-wz-btn--soft {
	height: 38px;
	padding: 0 14px;
	border-color: #d6dcfa;
	background: var( --wz-accent-soft );
	color: var( --wz-accent-2 );
	font-size: 13.5px;
}

.spar-wz .spar-wz-btn--soft:hover {
	background: #e3e7fc;
	color: var( --wz-accent-2 );
}

.spar-wz .spar-wz-btn--dark {
	background: var( --wz-dark );
	color: #fff;
}

.spar-wz .spar-wz-btn--dark:hover {
	background: #33315a;
	color: #fff;
}

.spar-wz-btn--lg {
	height: 52px;
	padding: 0 26px;
	font-size: 15.5px;
}

.spar-wz-btn.is-busy {
	opacity: .85;
	pointer-events: none;
}

.spar-wz-btn.is-busy .dashicons {
	display: none;
}

.spar-wz-btn.is-busy::after {
	content: "";
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spar-wz-spin .7s linear infinite;
}

@keyframes spar-wz-spin {
	to { transform: rotate( 360deg ); }
}

/* Finish */

/* Shown on the last step only until setup has been finished. */
.spar-wz-head--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.spar-wz-head--center .spar-wz-lede {
	margin: 0 auto;
}

/* The banner, in the store's own brand colors with the points icon as a coin. */
.spar-wz-done {
	position: relative;
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0 0 28px;
	padding: 34px 40px;
	overflow: hidden;
	border-radius: 16px;
	background:
		linear-gradient( rgba( 17, 16, 40, .16 ), rgba( 17, 16, 40, .16 ) ),
		linear-gradient( 125deg, var( --wz-p ), var( --wz-s ) );
	box-shadow: 0 22px 44px -26px rgba( 27, 29, 51, .6 );
	color: #fff;
}

.spar-wz-done::before {
	content: "";
	position: absolute;
	right: -90px;
	bottom: -170px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 255, 255, 255, .2 ), rgba( 255, 255, 255, 0 ) 70% );
	pointer-events: none;
}

/* A scatter of light dots in the top corner. */
.spar-wz-done::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 320px;
	height: 100%;
	background-image: radial-gradient( rgba( 255, 255, 255, .32 ) 1.4px, transparent 1.6px );
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient( 230deg, #000, transparent 65% );
	mask-image: linear-gradient( 230deg, #000, transparent 65% );
	pointer-events: none;
}

.spar-wz-done-art {
	position: relative;
	flex: 0 0 112px;
	width: 112px;
	height: 112px;
}

.spar-wz-done-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .14 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .28 );
}

.spar-wz-done-coin {
	position: absolute;
	inset: 14px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 12px 26px -12px rgba( 0, 0, 0, .5 ), inset 0 -5px 0 rgba( 27, 29, 51, .06 );
	color: var( --wz-p );
	font-size: 36px;
}

.spar-wz-done-coin img {
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.spar-wz-done-check {
	position: absolute;
	right: 2px;
	bottom: 6px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #12b76a;
	color: #fff;
}

.spar-wz-done-check svg {
	width: 16px;
	height: 16px;
}

.spar-wz-done-text {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.spar-wz-done-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .16 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .28 );
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .02em;
}

.spar-wz-done-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 3px rgba( 74, 222, 128, .3 );
	animation: spar-wz-live-dot 2s ease-in-out infinite;
}

.spar-wz-done.is-testing .spar-wz-done-dot {
	background: #fbbf24;
	box-shadow: 0 0 0 3px rgba( 251, 191, 36, .3 );
	animation: none;
}

@keyframes spar-wz-live-dot {
	50% { box-shadow: 0 0 0 6px rgba( 74, 222, 128, 0 ); }
}

.spar-wz .spar-wz-done h1 {
	margin: 14px 0 8px;
	padding: 0;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
}

.spar-wz .spar-wz-done h1:focus {
	outline: none;
}

.spar-wz-done-text p {
	max-width: 640px;
	margin: 0;
	color: rgba( 255, 255, 255, .9 );
	font-size: 15.5px;
	line-height: 1.6;
	text-wrap: pretty;
}

.spar-wz .spar-wz-done-link {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 16px 0 0;
	padding: 9px 14px;
	border: 0;
	border-radius: 10px;
	background: #fff;
	color: var( --wz-ink );
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}

.spar-wz .spar-wz-done-link:hover {
	box-shadow: 0 6px 16px -8px rgba( 0, 0, 0, .5 );
	transform: translateY( -1px );
}

.spar-wz .spar-wz-done-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.spar-wz-done-link .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

/* Going live from the banner, while the program is hidden. */
.spar-wz-done-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 16px;
}

.spar-wz-done-actions .spar-wz-done-link {
	gap: 8px;
	margin: 0;
	padding: 10px 16px;
}

.spar-wz .spar-wz-done-link.is-busy {
	opacity: .8;
	cursor: progress;
}

.spar-wz-done-hint {
	color: rgba( 255, 255, 255, .82 );
	font-size: 13px;
}

.spar-wz .spar-wz-done-error {
	display: inline-block;
	margin: 12px 0 0;
	padding: 6px 12px;
	border-radius: 8px;
	background: #fff;
	color: #b42318;
	font-size: 13px;
	font-weight: 600;
}

/* The summary and the test drive side by side. */
.spar-wz-ready-grid {
	display: grid;
	grid-template-columns: minmax( 0, 1.45fr ) minmax( 0, 1fr );
	align-items: start;
	gap: 24px;
}

.spar-wz-glance,
.spar-wz-try {
	border: 1px solid var( --wz-line );
	border-radius: 14px;
	background: #fff;
	box-shadow: var( --wz-shadow-sm );
}

/* Your program at a glance. */
.spar-wz-glance {
	padding: 6px 26px 8px;
}

.spar-wz-glance-header {
	padding: 18px 0 16px;
	border-bottom: 1px solid var( --wz-line-2 );
}

.spar-wz .spar-wz-glance-header h2,
.spar-wz .spar-wz-try h2 {
	margin: 0;
	padding: 0;
	color: var( --wz-ink );
	font-size: 18px;
	font-weight: 700;
}

.spar-wz-glance-header p {
	margin: 4px 0 0;
	color: var( --wz-muted );
	font-size: 13.5px;
}

.spar-wz-glance-section {
	padding: 16px 0;
	border-bottom: 1px solid var( --wz-line-2 );
}

.spar-wz-glance-section:last-child {
	border-bottom: 0;
}

.spar-wz-glance-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.spar-wz-glance-icon {
	display: grid;
	place-items: center;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var( --wz-accent-soft );
	color: var( --wz-accent-2 );
	font-size: 13px;
}

.spar-wz .spar-wz-glance-head h3 {
	flex: 1;
	margin: 0;
	padding: 0;
	color: var( --wz-ink );
	font-size: 14.5px;
	font-weight: 700;
}

.spar-wz .spar-wz-glance-edit {
	appearance: none;
	margin: 0;
	padding: 5px 12px;
	border: 1px solid var( --wz-line );
	border-radius: 8px;
	background: #fff;
	color: var( --wz-accent-2 );
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.spar-wz .spar-wz-glance-edit:hover {
	border-color: var( --wz-accent );
	background: var( --wz-accent-soft );
}

.spar-wz .spar-wz-glance-edit:focus-visible {
	outline: 2px solid var( --wz-accent );
	outline-offset: 2px;
}

.spar-wz-glance-lines {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding-left: 40px;
}

.spar-wz-glance-line {
	display: grid;
	grid-template-columns: 136px minmax( 0, 1fr );
	align-items: baseline;
	gap: 12px;
}

.spar-wz-glance-line dt {
	color: var( --wz-muted );
	font-size: 13px;
}

.spar-wz-glance-line dd {
	margin: 0;
	color: var( --wz-ink );
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.spar-wz-glance-line dd .is-off {
	color: var( --wz-faint );
	font-weight: 500;
}

.spar-wz-glance-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.spar-wz-glance-label-icon {
	display: inline-grid;
	place-items: center;
	color: var( --wz-accent );
}

.spar-wz-glance-label-icon img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* Lists, such as the bonuses or where points are shown. */
.spar-wz-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.spar-wz-tag-item {
	padding: 3px 10px;
	border: 1px solid var( --wz-line );
	border-radius: 999px;
	background: var( --wz-tint );
	color: var( --wz-text );
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
}

/* The levels, from the starting level up. */
.spar-wz-chain {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-wz-chain-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 3px 11px 3px 3px;
	border: 1px solid var( --wz-line );
	border-radius: 999px;
	background: var( --wz-tint );
	color: var( --wz-text );
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
}

.spar-wz-chain-badge {
	display: grid;
	place-items: center;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var( --wz-brand );
	color: #fff;
	font-size: 10px;
	line-height: 1;
}

.spar-wz-chain-img {
	width: 14px;
	height: 14px;
	object-fit: contain;
}

.spar-wz-chain-glyph {
	font-size: 12px;
}

.spar-wz-chain-glyph.spar-badge-icon--gradient {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: inherit;
}

/* Try it as a customer: three numbered steps. */
.spar-wz-try {
	position: sticky;
	top: calc( var( --wz-top ) + 16px );
	padding: 24px 24px 20px;
}

.spar-wz-try-lede {
	margin: 4px 0 20px;
	color: var( --wz-muted );
	font-size: 13.5px;
}

.spar-wz-try-steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-wz-try-step {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax( 0, 1fr );
	gap: 14px;
	margin: 0;
	padding-bottom: 22px;
}

/* The line joining one number to the next. */
.spar-wz-try-step:not( :last-child )::before {
	content: "";
	position: absolute;
	top: 36px;
	bottom: 4px;
	left: 15px;
	width: 2px;
	border-radius: 2px;
	background: var( --wz-line );
}

.spar-wz-try-num {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var( --wz-accent-soft );
	color: var( --wz-accent-2 );
	font-size: 13.5px;
	font-weight: 800;
	transition: background .3s ease, color .3s ease;
}

.spar-wz-try-num svg {
	display: none;
	width: 16px;
	height: 16px;
}

.spar-wz-try-step.is-done .spar-wz-try-num {
	background: #12b76a;
	color: #fff;
}

.spar-wz-try-step.is-done .spar-wz-try-num span {
	display: none;
}

.spar-wz-try-step.is-done .spar-wz-try-num svg {
	display: block;
}

.spar-wz-try-body {
	min-width: 0;
	padding-top: 5px;
}

.spar-wz-try-body strong {
	display: block;
	margin-bottom: 4px;
	color: var( --wz-ink );
	font-size: 14.5px;
}

.spar-wz-try-body p {
	margin: 0 0 10px;
	color: var( --wz-muted );
	font-size: 13.5px;
	line-height: 1.5;
}

.spar-wz-trial-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.spar-wz-trial-form .spar-wz-input-affix {
	flex: 1 1 150px;
	min-width: 0;
}

.spar-wz .spar-wz-trial-status {
	margin: 8px 0 0;
	color: #067647;
	font-size: 13px;
	font-weight: 600;
}

.spar-wz .spar-wz-trial-status:empty {
	display: none;
}

.spar-wz .spar-wz-trial-status.is-error {
	color: #b42318;
}

.spar-wz .spar-wz-try-link {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 8px 13px;
	border: 1px solid var( --wz-field );
	border-radius: 10px;
	background: #fff;
	color: var( --wz-ink );
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.spar-wz .spar-wz-try-link:hover,
.spar-wz .spar-wz-try-link:focus {
	border-color: var( --wz-accent );
	color: var( --wz-accent-2 );
}

.spar-wz-try-link .dashicons {
	width: 15px;
	height: 15px;
	font-size: 15px;
}

.spar-wz .spar-wz-try > .spar-wz-help {
	padding-top: 14px;
	border-top: 1px solid var( --wz-line-2 );
}

/* Next steps. */
.spar-wz-ready-grid + .spar-wz-subhead {
	margin-top: 40px;
}

.spar-wz-next-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.spar-wz .spar-wz-next-grid > .spar-wz-next-card {
	flex: 1 1 260px;
}

.spar-wz .spar-wz-next-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 18px 18px 20px;
	border: 1px solid var( --wz-line );
	border-radius: 12px;
	background: #fff;
	color: var( --wz-text );
	text-decoration: none;
	transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.spar-wz .spar-wz-next-card:hover {
	border-color: #c4cbf6;
	color: var( --wz-text );
	box-shadow: 0 6px 16px -8px rgba( 27, 29, 51, .2 );
	transform: translateY( -1px );
}

.spar-wz .spar-wz-next-card:focus-visible {
	outline: 2px solid var( --wz-accent );
	outline-offset: 2px;
}

.spar-wz-next-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: 6px;
	border-radius: 11px;
	background: var( --wz-brand );
	color: #fff;
	font-size: 15px;
}

.spar-wz-next-card strong {
	padding-right: 20px;
	color: var( --wz-ink );
	font-size: 14.5px;
}

.spar-wz-next-card > span:not( .spar-wz-next-icon ):not( .spar-wz-next-arrow ) {
	color: var( --wz-muted );
	font-size: 13px;
	line-height: 1.5;
}

.spar-wz-next-arrow {
	position: absolute;
	top: 18px;
	right: 16px;
	color: #c3c7da;
	transition: transform .2s ease, color .2s ease;
}

.spar-wz-next-card:hover .spar-wz-next-arrow {
	color: var( --wz-accent );
	transform: translateX( 3px );
}

/* Everything else, as a row of links. */
.spar-wz-more-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: 14px;
	padding: 14px 18px;
	border: 1px solid var( --wz-line );
	border-radius: 12px;
	background: #fff;
}

.spar-wz-more-links-label {
	color: var( --wz-faint );
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.spar-wz-more-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-wz-more-links li {
	margin: 0;
}

.spar-wz .spar-wz-more-links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border: 1px solid var( --wz-line );
	border-radius: 999px;
	background: var( --wz-tint );
	color: var( --wz-text );
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.spar-wz .spar-wz-more-links a:hover,
.spar-wz .spar-wz-more-links a:focus {
	border-color: var( --wz-accent );
	color: var( --wz-accent-2 );
}

.spar-wz-more-links a i {
	color: var( --wz-accent );
	font-size: 12px;
}

/* PRO, in the free version. */
.spar-wz .spar-wz-pro-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 14px;
	padding: 18px 22px;
	border-radius: 14px;
	background: var( --wz-dark );
	color: #fff;
	text-decoration: none;
}

.spar-wz-pro-banner-icon {
	display: grid;
	place-items: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: rgba( 255, 255, 255, .1 );
	color: #f1c75b;
	font-size: 17px;
}

.spar-wz-pro-banner-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.spar-wz-pro-banner-text strong {
	color: #fff;
	font-size: 15px;
}

.spar-wz-pro-banner-text span {
	color: #c3c4de;
	font-size: 13px;
}

.spar-wz-pro-banner-cta {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 2px;
	padding: 9px 14px;
	border-radius: 10px;
	background: #fff;
	color: var( --wz-ink );
	font-size: 13.5px;
	font-weight: 700;
}

.spar-wz-pro-banner-cta .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.spar-wz-finish {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var( --wz-line );
}

/* The overview video, under the finish buttons. */
.spar-wz-video {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.55fr );
	align-items: center;
	gap: 36px;
	margin-top: 56px;
	padding: 30px;
	overflow: hidden;
	border: 1px solid var( --wz-line );
	border-radius: 16px;
	background: #fff;
	box-shadow: var( --wz-shadow-sm );
}

/* A soft wash of the brand colors behind the text. */
.spar-wz-video::before {
	content: "";
	position: absolute;
	top: -140px;
	left: -140px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 118, 75, 162, .1 ), rgba( 102, 126, 234, 0 ) 70% );
	pointer-events: none;
}

.spar-wz-video-text {
	position: relative;
}

.spar-wz-video-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 11px;
	border-radius: 999px;
	background: var( --wz-accent-soft );
	color: var( --wz-accent-2 );
	font-size: 12px;
	font-weight: 700;
}

.spar-wz .spar-wz-video-text h2 {
	margin: 14px 0 8px;
	padding: 0;
	color: var( --wz-ink );
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}

.spar-wz-video-text p {
	margin: 0 0 18px;
	color: var( --wz-muted );
	font-size: 14.5px;
	line-height: 1.6;
	text-wrap: pretty;
}

.spar-wz .spar-wz-video-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var( --wz-accent-2 );
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

.spar-wz .spar-wz-video-link:hover,
.spar-wz .spar-wz-video-link:focus {
	text-decoration: underline;
}

.spar-wz-video-link .dashicons {
	width: 15px;
	height: 15px;
	font-size: 15px;
}

.spar-wz-video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 14px;
	background: var( --wz-dark );
	box-shadow: 0 1px 2px rgba( 27, 29, 51, .08 ), 0 24px 44px -24px rgba( 27, 29, 51, .55 );
}

.spar-wz-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The thumbnail, which becomes the player when clicked. */
.spar-wz-video-play {
	appearance: none;
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.spar-wz-video-play img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.spar-wz-video-play::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 17, 16, 40, 0 ) 35%, rgba( 17, 16, 40, .45 ) );
}

/* In the corner, so the thumbnail's own title stays clear. */
.spar-wz-video-button {
	position: absolute;
	bottom: 18px;
	left: 18px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 18px 6px 6px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .96 );
	box-shadow: 0 14px 30px -12px rgba( 17, 16, 40, .7 );
	color: var( --wz-ink );
	font-size: 14px;
	font-weight: 700;
	transition: transform .2s ease, box-shadow .2s ease;
}

.spar-wz-video-button-icon {
	display: grid;
	place-items: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --wz-brand );
	color: #fff;
	transition: transform .2s ease;
}

.spar-wz-video-button-icon svg {
	width: 17px;
	height: 17px;
	margin-left: 3px;
}

.spar-wz-video-play:hover img {
	transform: scale( 1.03 );
}

.spar-wz-video-play:hover .spar-wz-video-button {
	box-shadow: 0 18px 36px -12px rgba( 17, 16, 40, .8 );
	transform: translateY( -2px );
}

.spar-wz-video-play:hover .spar-wz-video-button-icon {
	transform: scale( 1.08 );
}

.spar-wz-video-play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -8px;
}

/* Responsive */

/* The admin bar is taller on small screens, and scrolls away with the page below 600px. */
@media ( max-width: 782px ) {
	.spar-wz {
		--wz-top: 46px;
		--wz-gap: 12px;
		/* wp-admin's left padding drops to 10px here; match it on the right. */
		margin-right: 10px;
		margin-left: 0;
	}
}

@media ( max-width: 600px ) {
	.spar-wz {
		--wz-top: 0px;
	}
}

/* Everything below follows the width of the wizard itself, which depends on the
   admin menu (expanded, folded or hidden) as much as on the window. */
@container spar-wz ( max-width: 1180px ) {
	.spar-wz-steps-text small {
		display: none;
	}
}

@container spar-wz ( max-width: 1240px ) {
	.spar-wz-content.has-live {
		--wz-live-cols: minmax( 0, 1fr ) minmax( 0, 1.15fr );
		--wz-live-gap: 64px;
		--wz-live-pad: 24px;
	}
}

@container spar-wz ( max-width: 960px ) {
	.spar-wz-ready-grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.spar-wz-try {
		position: static;
	}

	.spar-wz-video {
		grid-template-columns: minmax( 0, 1fr );
		gap: 22px;
		padding: 24px;
	}

	/* The preview moves below the step, opened by a button there. */
	.spar-wz-content.has-live,
	.spar-wz-content.has-live.is-live-open {
		grid-template-columns: minmax( 0, 1fr );
		column-gap: 0;
		padding: 0 24px;
	}

	/* A bar across the step, the arrow pointing to where the preview opens. */
	.spar-wz-content.has-live > .spar-wz-live-toggle,
	.spar-wz-content.is-live-open > .spar-wz-live-toggle {
		position: static;
		grid-column: 1;
		grid-row: 2;
		justify-self: stretch;
		width: auto;
		margin: 0 0 16px;
		padding: 10px 16px 10px 10px;
		border-radius: 14px;
	}

	.spar-wz-live-toggle:hover,
	.spar-wz-content.is-live-open > .spar-wz-live-toggle:hover {
		transform: translateY( -1px );
	}

	.spar-wz-live-toggle-show,
	.spar-wz-live-toggle-hide {
		flex-direction: row;
		gap: 10px;
		width: 100%;
	}

	.spar-wz-live-toggle-label {
		flex: 1;
		text-align: left;
		writing-mode: horizontal-tb;
	}

	.spar-wz-live-toggle-cue {
		font-size: 11px;
		transform: rotate( -90deg );
	}

	.spar-wz-live-toggle:hover .spar-wz-live-toggle-cue {
		transform: rotate( -90deg ) translateX( -2px );
	}

	.spar-wz-content.is-live-open .spar-wz-live-toggle-icon .fa-chevron-right {
		transform: rotate( -90deg );
	}

	.spar-wz-live {
		position: static;
		grid-column: 1;
		grid-row: 3;
		min-width: 0;
		height: 70vh;
		min-height: 420px;
		margin: 0 0 24px;
	}

	.spar-wz-content.has-live:not( .is-live-open ) > .spar-wz-live {
		display: none;
	}

	.spar-wz-step-inner {
		padding: 32px 28px 28px;
	}

	.spar-wz-footer {
		margin-right: 20px;
		margin-left: 20px;
	}
}

/* Too narrow for eight labels: show the dots, and name the current step below. */
@container spar-wz ( max-width: 760px ) {
	.spar-wz-stepper {
		padding: 18px 10px 16px;
	}

	/* Visually hidden rather than removed, so each button keeps its name. */
	.spar-wz-steps-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
	}

	.spar-wz .spar-wz-stepper-current {
		display: block;
	}

	.spar-wz-steps-dot {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}

	.spar-wz-steps-item:not( :first-child )::before {
		top: 13px;
		right: calc( 50% + 18px );
		left: calc( -50% + 18px );
	}
}

@container spar-wz ( max-width: 620px ) {
	.spar-wz-step-inner {
		padding: 24px 16px;
	}

	.spar-wz .spar-wz-head h1 {
		font-size: 25px;
	}

	.spar-wz-lede {
		font-size: 15px;
	}

	.spar-wz-hero {
		padding: 26px 20px 22px;
	}

	.spar-wz-choices,
	.spar-wz-lifecycle {
		grid-template-columns: minmax( 0, 1fr );
	}

	.spar-wz-lifecycle-arrow {
		transform: rotate( 135deg );
	}

	.spar-wz-feature-head {
		align-items: flex-start;
		gap: 12px;
		padding: 16px;
	}

	.spar-wz-feature-icon {
		flex-basis: 38px;
		width: 38px;
		height: 38px;
		font-size: 16px;
	}

	.spar-wz-feature-body {
		padding: 0 16px 16px;
	}

	.spar-wz-panel {
		padding: 18px 16px;
	}

	.spar-wz-row-fields > .spar-wz-field,
	.spar-wz-row-fields > .spar-wz-field--small {
		flex: 1 1 140px;
	}

	.spar-wz-footer {
		gap: 10px;
		margin: 0 10px var( --wz-gap );
		padding: 8px;
	}

	.spar-wz .spar-wz-skip {
		font-size: 12.5px;
		line-height: 1.35;
	}

	.spar-wz-counter {
		display: none;
	}

	.spar-wz-done {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding: 26px 22px;
	}

	.spar-wz-import {
		flex-wrap: wrap;
	}

	.spar-wz-import-button {
		width: 100%;
		justify-content: center;
	}

	.spar-wz-done-art {
		flex-basis: 84px;
		width: 84px;
		height: 84px;
	}

	.spar-wz-done-coin {
		inset: 10px;
		font-size: 26px;
	}

	.spar-wz-done-coin img {
		width: 36px;
		height: 36px;
	}

	.spar-wz-done-check {
		width: 28px;
		height: 28px;
	}

	.spar-wz .spar-wz-done h1 {
		font-size: 24px;
	}

	.spar-wz-video {
		padding: 18px;
	}

	/* Just the round button on a small thumbnail; the label stays for screen readers. */
	.spar-wz-video-button {
		bottom: 12px;
		left: 12px;
		padding: 5px;
	}

	.spar-wz-video-button-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
	}

	.spar-wz-video-button-icon {
		flex-basis: 34px;
		width: 34px;
		height: 34px;
	}

	.spar-wz-glance {
		padding: 4px 18px 6px;
	}

	.spar-wz-glance-lines {
		padding-left: 0;
	}

	.spar-wz-glance-line {
		grid-template-columns: minmax( 0, 1fr );
		gap: 3px;
	}

	.spar-wz-pro-banner {
		flex-wrap: wrap;
	}

	.spar-wz-btn {
		padding: 0 16px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.spar-wz *,
	.spar-wz *::before,
	.spar-wz *::after {
		animation-duration: .01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}