/* Navigation controls are inserted as the first child of the active test toolbar. */
html:not(.gmat-section-embed) :is(
	.gmat-reading-test-form > .gmat-reading-topbar,
	.gmat-di-test-form > .gmat-di-test-topbar,
	.gmat-full-shell .gmat-full-topbar,
	.gmat-frontend-shell .gmat-frontend-topbar
) {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: center !important;
	gap: var(--gmat-test-toolbar-gap, 8px) !important;
	flex: 0 0 auto;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: auto;
	scrollbar-width: thin;
}

:is(.gmat-reading-topbar, .gmat-di-test-topbar, .gmat-full-topbar) > .mks-gmat-lms-pwa-nav.is-test-header {
	flex: 0 0 auto;
	margin: 0;
}

:is(.gmat-reading-test-form, .gmat-di-test-form, .gmat-full-shell, .gmat-frontend-shell) :is(
	.gmat-gmat-rw-top-center, .gmat-gmat-rw-top-right,
	.gmat-di-test-top-center, .gmat-di-test-top-right,
	.gmat-full-top-actions, .gmat-frontend-actions
) {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.gmat-reading-test-shell:not(.is-header-collapsed) .gmat-reading-test-form > .gmat-reading-topbar > .gmat-gmat-rw-top-left {
	display: flex !important;
	align-items: center;
	gap: 8px !important;
	flex: 1 0 5rem;
}

.gmat-reading-test-form .gmat-gmat-rw-title {
	display: block !important;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gmat-reading-test-form .gmat-gmat-rw-subline {
	min-width: 0;
	margin: 0 !important;
}

.gmat-reading-test-form .gmat-gmat-rw-modules {
	flex-wrap: nowrap !important;
	overflow-x: auto;
	white-space: nowrap;
}

.gmat-reading-test-form .gmat-gmat-rw-modules > button {
	flex: 0 0 auto;
}

.gmat-reading-test-form > .gmat-reading-topbar:has(> .mks-gmat-lms-pwa-nav) > .gmat-gmat-rw-top-left {
	justify-content: center;
}

.gmat-di-test-topbar > .gmat-di-test-top-left,
.gmat-full-topbar > .gmat-full-title,
.gmat-frontend-topbar > .gmat-frontend-title {
	flex: 1 0 auto;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.gmat-full-topbar > .gmat-full-section-context {
	flex: 0 0 auto;
}

.gmat-full-topbar > .mks-mba-section-progress {
	flex: 0 0 auto;
}

.gmat-frontend-topbar > .gmat-frontend-parts {
	flex: 0 0 auto;
	flex-wrap: nowrap;
}

html.gmat-test-wide {
	--gmat-fullscreen-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 10l6-6m-5 0h5v5M10 14l-6 6m0-5v5h5'/%3E%3C/svg%3E");
}

html.gmat-test-wide :is(:fullscreen, :-webkit-full-screen) {
	--gmat-fullscreen-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4l-6 6m0-5v5h5M4 20l6-6m-5 0h5v5'/%3E%3C/svg%3E");
}

html.gmat-test-wide :is(.gmat-reading-test-shell, .gmat-di-shell, .gmat-full-shell, .gmat-frontend-shell)
	:is(button[data-action="toggle-fullscreen"], button[data-action="fullscreen"]) {
	display: inline-flex !important;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px !important;
	min-width: 44px !important;
	height: 44px !important;
	min-height: 44px !important;
	padding: 0 !important;
	border: 1px solid #a70f22 !important;
	border-radius: 12px !important;
	background: linear-gradient(150deg, #ed3542, #b20f24) !important;
	box-shadow: 0 5px 13px rgba(153, 17, 36, .38), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
	color: #fff !important;
	font-size: 0 !important;
	cursor: pointer;
}

html.gmat-test-wide :is(.gmat-reading-test-shell, .gmat-di-shell, .gmat-full-shell, .gmat-frontend-shell)
	:is(button[data-action="toggle-fullscreen"], button[data-action="fullscreen"])::before {
	content: "";
	flex: 0 0 23px;
	height: 23px;
	background: var(--gmat-fullscreen-icon) center / contain no-repeat;
}

html.gmat-test-wide :is(.gmat-reading-test-shell, .gmat-di-shell, .gmat-full-shell, .gmat-frontend-shell)
	:is(button[data-action="toggle-fullscreen"], button[data-action="fullscreen"])
	> :is(svg, .gmat-full-fullscreen-icon, [data-role="fullscreen-label"]) {
	display: none !important;
}

html.gmat-test-wide :is(.gmat-reading-test-shell, .gmat-di-shell, .gmat-full-shell, .gmat-frontend-shell)
	:is(button[data-action="toggle-fullscreen"], button[data-action="fullscreen"]):hover {
	background: linear-gradient(150deg, #ff4650, #c9152a) !important;
}

html.gmat-test-wide :is(.gmat-reading-test-shell, .gmat-di-shell, .gmat-full-shell, .gmat-frontend-shell)
	:is(button[data-action="toggle-fullscreen"], button[data-action="fullscreen"]):focus-visible {
	outline: 2px solid #7f1021 !important;
	outline-offset: 3px;
}

html.gmat-test-phone :is(.gmat-reading-test-shell, .gmat-di-shell, .gmat-full-shell, .gmat-frontend-shell)
	:is(button[data-action="toggle-fullscreen"], button[data-action="fullscreen"]) {
	display: none !important;
}

@media (max-width: 767px) {
	html.gmat-test-wide .gmat-reading-intro--showcase .gmat-reading-intro-top-actions {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	html.gmat-test-wide .gmat-di-intro-hero-top-actions {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
	}
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
	.gmat-reading-test-form,
	.gmat-di-test-form,
	.gmat-full-shell,
	.gmat-frontend-shell {
		--gmat-test-toolbar-gap: 6px;
	}

	html.gmat-test-phone .gmat-full-topbar > .gmat-full-section-context {
		grid-template-columns: minmax(0, 1fr);
	}

	:is(.gmat-reading-topbar, .gmat-di-test-topbar, .gmat-full-topbar) > .mks-gmat-lms-pwa-nav.is-test-header {
		width: auto;
		height: 38px;
		gap: 3px;
		padding: 3px;
		border-radius: 12px;
	}

	.mks-gmat-lms-pwa-nav.is-test-header > .mks-gmat-lms-pwa-nav-button {
		width: 27px;
		height: 30px;
	}

	.mks-gmat-lms-pwa-nav.is-test-header > .mks-gmat-lms-pwa-nav-button svg {
		width: 16px;
		height: 16px;
	}

	.gmat-reading-test-shell .gmat-reading-test-form > .gmat-reading-topbar > .gmat-gmat-rw-top-left {
		flex: 1 1 56px;
		min-width: 36px;
	}

	.gmat-reading-test-form .gmat-gmat-rw-title {
		padding-inline: 6px !important;
	}

	.gmat-reading-test-form .gmat-gmat-rw-time {
		min-width: 60px !important;
		padding-inline: 8px !important;
		font-size: 14px !important;
	}

	.gmat-di-test-topbar > .gmat-di-test-top-left {
		flex: 1 1 132px;
		min-width: 100px;
		gap: 4px;
	}

	.gmat-di-test-topbar :is(.gmat-di-test-title-pill, .gmat-di-test-name) {
		display: block;
		min-width: 0;
		padding-inline: 6px;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 11px;
	}

	.gmat-di-test-topbar :is(.gmat-di-util-btn, .gmat-di-header-toggle, .gmat-di-test-timer) {
		padding-inline: 8px;
		font-size: 12px;
	}

	/* The footer occupies its own space so the question pane needs no spacer. */
	.gmat-reading-test-shell .gmat-reading-test-form {
		height: var(--gmat-test-available-height, 100dvh) !important;
		min-height: 0 !important;
		max-height: none !important;
		padding-bottom: 0 !important;
	}

	.gmat-reading-test-form > .gmat-reading-test-main {
		padding-bottom: 12px !important;
	}

	.gmat-reading-test-form > .gmat-reading-footer--test {
		position: static !important;
		flex: 0 0 auto;
	}

	.gmat-di-shell:has(.gmat-di-intro),
	.gmat-reading-test-shell:has(.gmat-reading-test-form) {
		margin: 0;
		padding: 0;
		border: 0 !important;
	}

	.gmat-di-intro .gmat-di-intro-hero-card,
	.gmat-reading-test-shell .gmat-reading-intro--showcase.gmat-reading-intro--hero-overlaid .gmat-reading-intro-hero-card {
		box-sizing: border-box;
		min-height: var(--gmat-test-available-height, 100dvh);
		align-content: start;
	}

	.gmat-reading-test-shell .gmat-reading-intro--showcase.gmat-reading-intro--hero-overlaid .gmat-reading-intro-hero-card {
		min-height: calc(var(--gmat-test-available-height, 100dvh) - 22px);
	}

	.gmat-di-shell .gmat-di-test-form {
		grid-template-rows: auto minmax(0, 1fr) auto;
		height: var(--gmat-test-available-height, 100dvh);
		min-height: 0;
		margin: 0;
		padding-bottom: 0;
	}

	.gmat-di-test-form > .gmat-di-test-topbar { grid-row: 1; }
	.gmat-di-test-form > :is(.gmat-di-main, .gmat-di-review) { grid-row: 2; }
	.gmat-di-test-form > .gmat-di-footer--test {
		grid-row: 3;
		grid-template-areas: "center" "nav";
		position: static;
		border-radius: 0;
	}

	.gmat-di-test-form .gmat-di-footer-center {
		flex-wrap: nowrap;
	}
}
