/* Component-width responsiveness and accessible target sizing. */
.qwizz-builder {
	container-type: inline-size;
}

@container (max-width: 960px) {
	.qwizz-builder__layout {
		grid-template-columns: 1fr;
	}

	.qwizz-review {
		position: relative;
		top: auto;
		order: -1;
	}

	.qwizz-review__card {
		padding: 18px;
	}

	.qwizz-review dl {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 16px;
	}

	.qwizz-review__note {
		display: none;
	}
}

@container (max-width: 650px) {
	.qwizz-step {
		padding-left: 0;
		padding-inline-start: 28px;
	}

	.qwizz-step__node {
		left: auto;
		inset-inline-start: 0;
		width: 18px;
		height: 18px;
	}

	.qwizz-step::before {
		left: auto;
		inset-inline-start: 8px;
	}

	.qwizz-step__content {
		padding: 17px;
		border-radius: 18px;
	}

	.qwizz-source-grid {
		grid-template-columns: 1fr;
	}

	.qwizz-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.qwizz-theme-picker {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.qwizz-actions {
		flex-direction: row;
	}

	.qwizz-review {
		display: block;
		order: 0;
	}

	.qwizz-builder__flow {
		order: -1;
	}
}

.qwizz-preview-open,
.qwizz-section-nav a,
.qwizz-check-chip span,
.qwizz-segment button,
.qwizz-admin-category span,
.qwizz-preview__dialog > header button,
.qwizz-preview__dialog > nav button,
.p-actions button {
	height: auto !important;
	min-height: 44px !important;
}

.qwizz-preview__dialog > header button {
	width: 44px;
	min-width: 44px;
}

.qwizz-settings .button,
.qwizz-builder .qwizz-pill,
.qwizz-builder .qwizz-switch,
.qwizz-builder .qwizz-mini-segment button,
.qwizz-builder .qwizz-segmented button,
.qwizz-player__submit,
.qwizz-player__actions button,
.qwizz-player__auto {
	min-height: 44px;
}

.qwizz-stepper button {
	width: 44px;
	height: 44px;
}

.qwizz-stepper input,
.qwizz-title-field input {
	min-height: 44px;
}

.qwizz-search input,
.qwizz-number-grid input,
.qwizz-wide-field input,
.qwizz-wide-field select,
.qwizz-exposure__default select {
	min-height: 44px;
}

.qwizz-wide-field__heading {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

.qwizz-admin-switch {
	position: relative;
	justify-content: flex-end;
	min-width: 44px;
	min-height: 44px;
}

.qwizz-help {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 0;
	vertical-align: middle;
	background: transparent;
}

.qwizz-help::before {
	content: "i";
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	color: #6c637d;
	font-size: .7rem;
	font-weight: 900;
	background: #eeeaf4;
}

.qwizz-help > span[aria-hidden="true"] {
	display: none;
}

.qwizz-admin-switch input:focus + span,
.qwizz-admin-switch input:focus-visible + span,
.qwizz-check-chip input:focus + span,
.qwizz-check-chip input:focus-visible + span,
.qwizz-admin-category input:focus + span,
.qwizz-admin-category input:focus-visible + span {
	outline: 3px solid rgba(109, 40, 217, .42) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px rgba(109, 40, 217, .24) !important;
}

.qwizz-help__bubble {
	font-size: .69rem;
}

@media (max-width: 600px) {
	#wpcontent {
		padding-left: 0;
		padding-inline-start: 0;
	}

	.qwizz-settings {
		width: auto;
		max-width: calc(100% - 20px);
		margin: 12px 10px 80px !important;
	}

	.qwizz-settings__hero {
		align-items: stretch;
		flex-direction: column;
		gap: 14px;
	}

	.qwizz-settings__brand,
	.qwizz-panel,
	.qwizz-subcard {
		min-width: 0;
	}

	.qwizz-settings__hero h1 {
		font-size: 1.75rem;
	}

	.qwizz-preview-open {
		justify-content: center;
		width: 100%;
	}

	.qwizz-settings__toolbar {
		max-width: 100%;
	}

	.qwizz-savebar {
		width: calc(100% - 20px);
	}

	.qwizz-preview__dialog > nav button {
		flex: 1;
	}

	.qwizz-help__bubble {
		position: fixed;
			right: auto;
			bottom: 16px;
			left: auto;
			inset-inline: 16px;
		width: auto;
		transform: translateY(4px);
	}

	.qwizz-help:hover .qwizz-help__bubble,
	.qwizz-help:focus .qwizz-help__bubble,
	.qwizz-help:focus-visible .qwizz-help__bubble,
	.qwizz-help.is-help-visible .qwizz-help__bubble {
		transform: translateY(0);
	}

	.qwizz-preview__stage {
		align-items: start;
	}

	.p-actions {
		flex-direction: column;
	}

	.p-actions button {
		width: 100%;
	}
}

@media (max-width: 520px) {
	.qwizz-player {
		margin: 24px auto;
	}

	.qwizz-player__top {
		gap: 10px;
	}

	.qwizz-player__top > span:first-child {
		white-space: nowrap;
	}

	.qwizz-player__top > span:last-child {
		min-width: 0;
		text-align: end;
		overflow-wrap: anywhere;
	}
}

/* Administration refinements shared by the Settings workspace. */
.qwizz-preview,
.qwizz-preview * {
	box-sizing: border-box;
}

.qwizz-settings__hero p {
	color: #675f76;
}

.qwizz-savebar [data-discard] {
	background: transparent;
	border-color: #91899e;
	color: #fff;
}

.qwizz-savebar [data-discard]:hover,
.qwizz-savebar [data-discard]:focus {
	background: #382d46;
	border-color: #fff;
	color: #fff;
}

.qwizz-admin-toast {
	bottom: 92px;
	max-width: min(420px, calc(100vw - 32px));
}

.quizwizz_page_qw-settings #wpfooter {
	margin: 20px 20px 12px;
	position: static;
}

.qwizz-panel {
	scroll-margin-top: 132px;
}

.qwizz-admin-theme__controls label {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 5px;
	min-height: 44px;
}

.qwizz-import-review pre {
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.qwizz-import-review pre:focus-visible {
	border-radius: 6px;
}

.qwizz-backup__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.qwizz-backup__actions > a,
.qwizz-inline-form {
	align-items: center;
	display: inline-flex;
	margin: 0;
	min-height: 44px;
}

.qwizz-backup__actions > a,
.qwizz-inline-form .button-link {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
	padding: 8px;
}

.qwizz-bundled-import > p:last-child a {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

.qwizz-settings__empty {
	color: #675f76;
}

.qwizz-preview .p-paper,
.qwizz-preview .p-paper h3,
.qwizz-preview .p-paper > small,
.qwizz-preview .p-paper article,
.qwizz-preview .p-paper article b,
.qwizz-preview .p-paper article span {
	color: var(--pink);
}

.qwizz-preview .p-paper > small {
	opacity: .78;
}

.qwizz-bundled-import > p:last-child {
	margin-bottom: 0;
}

.qwizz-bundled-import .qw-import-row {
	align-items: end;
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(110px, .55fr) minmax(190px, 1.4fr) minmax(150px, 1fr) minmax(120px, .75fr) auto;
}

.qwizz-bundled-import .qw-import-row label {
	display: grid;
	gap: 5px;
	min-width: 0;
}

.qwizz-bundled-import .qw-import-label {
	color: var(--qmuted);
	font-size: .72rem;
	font-weight: 700;
}

.qwizz-bundled-import input,
.qwizz-bundled-import select,
.qwizz-bundled-import .button {
	min-height: 44px;
	width: 100%;
}

.p-actions > span {
	align-items: center;
	background: #fff;
	border: 1px solid #ddd6e5;
	border-radius: 10px;
	display: flex;
	flex: 1;
	font-weight: 700;
	justify-content: center;
	min-height: 44px;
	padding: 9px;
}

.p-actions > span + span {
	background: #6d28d9;
	color: #fff;
}

@media (max-width: 900px) {
	.qwizz-bundled-import .qw-import-row {
		grid-template-columns: 1fr 1fr;
	}

	.qwizz-bundled-import .qw-import-row .button {
		width: auto;
	}
}

@media (max-width: 600px) {
	.qwizz-panel {
		scroll-margin-top: 20px;
	}

	.qwizz-settings__toolbar {
		position: relative;
		top: auto;
	}

	.qwizz-bundled-import .qw-import-row {
		grid-template-columns: 1fr;
	}

	.qwizz-bundled-import .qw-import-row .button {
		width: 100%;
	}

	.qwizz-savebar {
		align-items: stretch;
		bottom: 10px;
		flex-direction: column;
		gap: 8px;
	}

		.qwizz-admin-toast {
			bottom: 142px;
			left: auto;
			right: auto;
			inset-inline: 10px;
		max-width: none;
		text-align: center;
	}

	.qwizz-savebar > div,
	.qwizz-savebar > div .button {
		flex: 1;
	}

	.p-actions > span {
		width: 100%;
	}
}

/* Direction-neutral geometry and durable focus across builder, player and settings. */
.qwizz-step {
	padding-left: 0;
	padding-inline-start: 38px;
}

.qwizz-step__node {
	left: auto;
	inset-inline-start: 0;
}

.qwizz-step::before {
	left: auto;
	inset-inline-start: 10px;
}

.qwizz-category__check,
.qwizz-challenge__check,
.qwizz-format__check,
.qwizz-site-badge,
.qwizz-theme__default {
	right: auto;
	inset-inline-end: 0;
}

.qwizz-category__check {
	inset-inline-end: 8px;
}

.qwizz-challenge__check,
.qwizz-format__check {
	inset-inline-end: 9px;
}

.qwizz-theme__default {
	inset-inline-end: -5px;
}

.qwizz-theme[aria-pressed="true"]::after {
	left: auto;
	inset-inline-start: -6px;
}

.qwizz-review__card::after {
	right: auto;
	inset-inline-end: -20px;
}

.qwizz-review dd {
	text-align: end;
}

.qwizz-library-item,
.qwizz-challenge,
.qwizz-format {
	text-align: start;
}

.qwizz-builder__alert {
	border-left-width: 1px;
	border-inline-start: 4px solid #b42318;
}

.qwizz-dependent-options {
	margin-left: 0;
	margin-inline-start: 18px;
	padding-left: 0;
	padding-inline-start: 14px;
	border-left-width: 0;
	border-inline-start: 2px solid #e6ddf6;
}

.qwizz-switch::before {
	left: auto;
	inset-inline-start: 3px;
}

.qwizz-switch span {
	left: auto;
	inset-inline-start: 6px;
}

[dir="rtl"] .qwizz-switch[aria-checked="true"] span,
.rtl .qwizz-switch[aria-checked="true"] span {
	transform: translateX(-16px);
}

.qwizz-player__answers label[data-result]::after,
.qwizz-player__top span:only-child {
	margin-left: 0;
	margin-inline-start: auto;
}

.qwizz-player[data-answer-labels="none"] .qwizz-player__answers label {
	padding-left: 0;
	padding-inline-start: 18px;
}

.qwizz-player__review {
	text-align: start;
}

.qwizz-player__review-item {
	border-left-width: 1px;
	border-inline-start: 4px solid #8b8496;
}

.qwizz-player__review-item.is-correct {
	border-inline-start-color: #15803d;
}

.qwizz-player__review-item.is-wrong {
	border-inline-start-color: #b42318;
}

.qwizz-help {
	margin-left: 0;
	margin-inline-start: 6px;
}

.qwizz-help__bubble {
	left: auto;
	inset-inline-start: 50%;
}

.qwizz-backup a {
	margin-left: 0;
	margin-inline-start: 10px;
}

.qwizz-savebar {
	left: auto;
	inset-inline-start: 50%;
}

.qwizz-admin-toast {
	right: auto;
	inset-inline-end: 24px;
}

.qwizz-theme-indicator--enabled {
	right: auto;
	inset-inline-end: 13px;
}

.qwizz-theme-indicator--default {
	left: auto;
	inset-inline-start: 13px;
}

.p-languages {
	margin-left: 0;
	margin-inline-start: auto;
}

.p-answers b {
	margin-right: 0;
	margin-inline-end: 8px;
}

.p-paper {
	text-align: start;
}

.p-paper article {
	padding-left: 0;
	padding-inline-start: 12px;
	border-left-width: 0;
	border-inline-start: 4px solid var(--pac);
}

.qwizz-builder :focus-visible,
.qwizz-player button:focus-visible,
.qwizz-player__answers label:has(input:focus-visible),
.qwizz-settings :focus-visible,
.qwizz-preview :focus-visible,
.qwizz-admin-switch input:focus + span,
.qwizz-admin-switch input:focus-visible + span,
.qwizz-check-chip input:focus + span,
.qwizz-check-chip input:focus-visible + span,
.qwizz-admin-category input:focus + span,
.qwizz-admin-category input:focus-visible + span {
	outline: 3px solid #5b21b6 !important;
	outline-offset: 3px !important;
}

.qwizz-challenge small,
.qwizz-format small,
.qwizz-logo-upload small,
.qwizz-theme,
.qwizz-admin-switch em,
.qwizz-segment button,
.qwizz-admin-theme__controls,
.qwizz-effect {
	font-size: .75rem;
}

@container (max-width: 650px) {
	.qwizz-step {
		padding-inline-start: 28px;
	}

	.qwizz-step::before {
		inset-inline-start: 8px;
	}
}

[dir="rtl"] .qwizz-admin-switch input:checked + span::after,
.rtl .qwizz-admin-switch input:checked + span::after {
	transform: translateX(-18px);
}

[dir="rtl"] .qwizz-admin-switch--small input:checked + span::after,
.rtl .qwizz-admin-switch--small input:checked + span::after {
	transform: translateX(-14px);
}

@media (forced-colors: active) {
	.qwizz-builder :focus-visible,
	.qwizz-player button:focus-visible,
	.qwizz-player__answers label:has(input:focus-visible),
	.qwizz-settings :focus-visible,
	.qwizz-preview :focus-visible {
		outline-color: Highlight !important;
	}

	.qwizz-review > summary,
	.qwizz-player__review-item,
	.qwizz-settings__search-results,
	.qwizz-panel,
	.qwizz-subcard {
		border-color: CanvasText;
	}
}

@media (max-width: 600px) {
	.qwizz-help__bubble {
		left: auto;
		right: auto;
		inset-inline: 16px;
	}

	.qwizz-admin-toast {
		left: auto;
		right: auto;
		inset-inline: 10px;
	}
}