/* =========================================
   inkPad / Navigation
   Normalized nav renderer + overlay modes
========================================= */

.inkpad-nav-editor-shell {
	width: 100%;
}

.inkpad-scope .inkpad-nav,
.editor-styles-wrapper .inkpad-nav {
	--inkpad-nav-color: var(--inkpad-text, currentColor);
	--inkpad-nav-color-hover: var(--inkpad-accent, currentColor);
	--inkpad-nav-color-active: var(--inkpad-accent, currentColor);
	--inkpad-nav-gap: var(--inkpad-space-md);
	--inkpad-nav-size: var(--inkpad-font-md);
	--inkpad-nav-weight: var(--inkpad-weight-normal);
	--inkpad-nav-link-padding-y: var(--inkpad-space-xs);
	--inkpad-nav-link-padding-x: calc(var(--inkpad-space-sm) * 0.85);
	--inkpad-nav-submenu-min-width: min(18rem, calc(100vw - (var(--inkpad-space-md) * 2)));
	--inkpad-nav-submenu-bg: var(--inkpad-surface, #fff);
	--inkpad-nav-submenu-border: color-mix(in srgb, var(--inkpad-text, #000) 10%, transparent);
	--inkpad-nav-submenu-radius: var(--inkpad-radius-md);
	--inkpad-nav-submenu-shadow: 0 calc(var(--inkpad-space-xs) * 2)
		calc(var(--inkpad-space-xs) * 6)
		color-mix(in srgb, var(--inkpad-text, #000) 12%, transparent);
	--inkpad-nav-transition-fast: var(--inkpad-transition-fast);
	--inkpad-nav-transition-med: var(--inkpad-transition-medium, var(--inkpad-transition-med));
	--inkpad-nav-underline-thickness: calc(var(--inkpad-space-xs) * 0.45);
	--inkpad-nav-shell-bg: color-mix(
		in srgb,
		var(--inkpad-color-surface, var(--inkpad-surface, #ffffff)) 84%,
		transparent
	);
	--inkpad-nav-shell-border: color-mix(
		in srgb,
		var(--inkpad-color-text, var(--inkpad-text, #000)) 10%,
		transparent
	);
	--inkpad-nav-shell-shadow: var(--inkpad-shadow-elevation, var(--inkpad-shadow, none));
	--inkpad-nav-shell-radius: max(
		var(--inkpad-radius-round, 9999px),
		calc(var(--inkpad-space-xl) * 1.3)
	);
	--inkpad-nav-shell-blur: 16px;
	--inkpad-nav-overlay-offset: clamp(1.25rem, 8vh, 4.5rem);
	--inkpad-nav-bottom-offset: clamp(1rem, 3vw, 2rem);
	width: 100%;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.inkpad-scope .inkpad-nav .inkpad-nav-inner,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-inner {
	width: 100%;
}

.inkpad-scope .inkpad-nav-empty,
.editor-styles-wrapper .inkpad-nav-empty {
	margin: 0;
	padding: var(--inkpad-space-sm) var(--inkpad-space-md);
	color: var(--inkpad-color-text-muted, var(--inkpad-text-muted, currentColor));
	font-size: var(--inkpad-nav-size);
}

.inkpad-scope .inkpad-nav .inkpad-nav-toggle,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--inkpad-space-sm);
	width: 100%;
	padding: calc(var(--inkpad-space-xs) * 1.1) var(--inkpad-space-md);
	border: 1px solid var(--inkpad-nav-shell-border);
	border-radius: var(--inkpad-radius-round, 9999px);
	background: color-mix(
		in srgb,
		var(--inkpad-color-surface, var(--inkpad-surface, #ffffff)) 90%,
		var(--inkpad-color-accent, var(--inkpad-accent, currentcolor)) 10%
	);
	color: var(--inkpad-nav-color);
	font: inherit;
	cursor: pointer;
	box-shadow: var(--inkpad-shadow-ambient, none);
}

.inkpad-scope .inkpad-nav .inkpad-nav-toggle-icon,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-toggle-icon {
	position: relative;
	display: inline-block;
	width: 1.15rem;
	height: 2px;
	background: currentColor;
	border-radius: 999px;
	transition:
		background-color var(--inkpad-nav-transition-fast),
		transform var(--inkpad-nav-transition-fast);
}

.inkpad-scope .inkpad-nav .inkpad-nav-toggle-icon::before,
.inkpad-scope .inkpad-nav .inkpad-nav-toggle-icon::after,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-toggle-icon::before,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 999px;
	transition: transform var(--inkpad-nav-transition-fast), top var(--inkpad-nav-transition-fast);
}

.inkpad-scope .inkpad-nav .inkpad-nav-toggle-icon::before,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-toggle-icon::before {
	top: -0.34rem;
}

.inkpad-scope .inkpad-nav .inkpad-nav-toggle-icon::after,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-toggle-icon::after {
	top: 0.34rem;
}

.inkpad-scope .inkpad-nav[data-nav-open="true"] .inkpad-nav-toggle-icon,
.editor-styles-wrapper .inkpad-nav[data-nav-open="true"] .inkpad-nav-toggle-icon {
	background-color: transparent;
}

.inkpad-scope .inkpad-nav[data-nav-open="true"] .inkpad-nav-toggle-icon::before,
.editor-styles-wrapper .inkpad-nav[data-nav-open="true"] .inkpad-nav-toggle-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.inkpad-scope .inkpad-nav[data-nav-open="true"] .inkpad-nav-toggle-icon::after,
.editor-styles-wrapper .inkpad-nav[data-nav-open="true"] .inkpad-nav-toggle-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

.inkpad-scope .inkpad-nav .inkpad-nav-panel,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-panel {
	width: 100%;
	box-sizing: border-box;
}

.inkpad-scope .inkpad-nav .inkpad-nav-panel[hidden] {
	display: none;
}

.editor-styles-wrapper .inkpad-nav .inkpad-nav-panel[hidden] {
	display: block;
}

.inkpad-scope .inkpad-nav ul,
.inkpad-scope .inkpad-nav li,
.editor-styles-wrapper .inkpad-nav ul,
.editor-styles-wrapper .inkpad-nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.inkpad-scope .inkpad-nav .inkpad-nav-list,
.inkpad-scope .inkpad-nav .inkpad-nav-submenu,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-list,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.inkpad-scope .inkpad-nav .inkpad-nav-list,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--inkpad-align-flex, flex-start);
	gap: var(--inkpad-nav-gap);
}

.inkpad-scope .inkpad-nav.inkpad-nav--vertical .inkpad-nav-list,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--vertical .inkpad-nav-list {
	flex-direction: column;
	align-items: flex-start;
}

.inkpad-scope .inkpad-nav .inkpad-nav-item,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-item {
	position: relative;
	margin: 0;
	padding: 0;
}

.inkpad-scope .inkpad-nav .inkpad-nav-item-row,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-item-row {
	display: flex;
	align-items: center;
	gap: calc(var(--inkpad-space-xs) * 0.65);
}

.inkpad-scope .inkpad-nav .inkpad-nav-link,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: var(--inkpad-nav-link-padding-y) var(--inkpad-nav-link-padding-x);
	border-radius: var(--inkpad-radius-round, 9999px);
	color: var(--inkpad-nav-color);
	font-size: var(--inkpad-nav-size);
	font-weight: var(--inkpad-nav-weight);
	line-height: 1.35;
	text-decoration: none;
	transform: translateZ(0);
	transition:
		color var(--inkpad-nav-transition-fast),
		background-color var(--inkpad-nav-transition-fast),
		box-shadow var(--inkpad-nav-transition-fast),
		opacity var(--inkpad-nav-transition-fast),
		transform var(--inkpad-nav-transition-fast);
}

.inkpad-scope .inkpad-nav .inkpad-nav-link--text,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-link--text {
	cursor: default;
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-top .inkpad-nav-link::after,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-top .inkpad-nav-link::after {
	content: "";
	position: absolute;
	left: var(--inkpad-nav-link-padding-x);
	right: var(--inkpad-nav-link-padding-x);
	bottom: calc(var(--inkpad-nav-link-padding-y) * 0.4);
	height: var(--inkpad-nav-underline-thickness);
	background: var(--inkpad-nav-color-hover);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0.95;
	transition: transform var(--inkpad-nav-transition-med);
}

.inkpad-scope .inkpad-nav .inkpad-nav-link:hover,
.inkpad-scope .inkpad-nav .inkpad-nav-link:focus-visible,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-link:hover,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-link:focus-visible {
	color: var(--inkpad-nav-color-hover);
	opacity: 0.94;
	transform: translateY(-1px);
	outline: none;
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-top .inkpad-nav-link:hover::after,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-top .inkpad-nav-link:focus-visible::after,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-top .inkpad-nav-link:hover::after,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-top .inkpad-nav-link:focus-visible::after {
	transform: scaleX(1);
}

.inkpad-scope .inkpad-nav .current-menu-item > .inkpad-nav-item-row > .inkpad-nav-link,
.inkpad-scope .inkpad-nav .current-menu-ancestor > .inkpad-nav-item-row > .inkpad-nav-link,
.inkpad-scope .inkpad-nav .current_page_item > .inkpad-nav-item-row > .inkpad-nav-link,
.editor-styles-wrapper .inkpad-nav .current-menu-item > .inkpad-nav-item-row > .inkpad-nav-link,
.editor-styles-wrapper .inkpad-nav .current-menu-ancestor > .inkpad-nav-item-row > .inkpad-nav-link,
.editor-styles-wrapper .inkpad-nav .current_page_item > .inkpad-nav-item-row > .inkpad-nav-link {
	color: var(--inkpad-nav-color-active);
	opacity: 1;
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-top .current-menu-item > .inkpad-nav-item-row > .inkpad-nav-link::after,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-top .current-menu-ancestor > .inkpad-nav-item-row > .inkpad-nav-link::after,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-top .current_page_item > .inkpad-nav-item-row > .inkpad-nav-link::after,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-top .current-menu-item > .inkpad-nav-item-row > .inkpad-nav-link::after,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-top .current-menu-ancestor > .inkpad-nav-item-row > .inkpad-nav-link::after,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-top .current_page_item > .inkpad-nav-item-row > .inkpad-nav-link::after {
	transform: scaleX(1);
	background: var(--inkpad-nav-color-active);
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom {
	position: fixed;
	width: auto;
	max-width: min(calc(100vw - (var(--inkpad-space-md) * 2)), 72rem);
	z-index: 60;
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay {
	top: var(--inkpad-nav-overlay-offset);
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom {
	bottom: var(--inkpad-nav-bottom-offset);
}

.admin-bar .inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay {
	top: calc(var(--inkpad-nav-overlay-offset) + 32px);
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay.inkpad-nav--align-left,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom.inkpad-nav--align-left {
	left: clamp(1rem, 4vw, 2rem);
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay.inkpad-nav--align-center,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom.inkpad-nav--align-center {
	left: 50%;
	transform: translateX(-50%);
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay.inkpad-nav--align-right,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom.inkpad-nav--align-right {
	right: clamp(1rem, 4vw, 2rem);
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-inner,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--inkpad-space-sm);
	width: auto;
	max-width: 100%;
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-toggle,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-toggle {
	display: inline-flex;
	justify-content: center;
	width: 3.35rem;
	height: 3.35rem;
	padding: 0;
	border-radius: max(var(--inkpad-radius-round, 9999px), calc(var(--inkpad-space-xl) * 1.1));
	background: var(--inkpad-nav-shell-bg);
	border: 1px solid var(--inkpad-nav-shell-border);
	box-shadow: var(--inkpad-nav-shell-shadow);
	backdrop-filter: blur(var(--inkpad-nav-shell-blur));
	-webkit-backdrop-filter: blur(var(--inkpad-nav-shell-blur));
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-toggle:hover,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-toggle:focus-visible,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-toggle:hover,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-toggle:focus-visible {
	color: var(--inkpad-nav-color-hover);
	transform: translateY(-1px);
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-toggle-label,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-toggle-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-panel,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-panel {
	position: absolute;
	width: max-content;
	max-width: min(calc(100vw - (var(--inkpad-space-md) * 2)), 72rem);
	padding: calc(var(--inkpad-space-sm) * 1.1);
	background: var(--inkpad-nav-shell-bg);
	border: 1px solid var(--inkpad-nav-shell-border);
	border-radius: var(--inkpad-nav-shell-radius);
	box-shadow: var(--inkpad-nav-shell-shadow);
	backdrop-filter: blur(var(--inkpad-nav-shell-blur));
	-webkit-backdrop-filter: blur(var(--inkpad-nav-shell-blur));
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-panel,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-panel,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-panel,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-panel {
	scrollbar-width: thin;
	scrollbar-color:
		color-mix(in srgb, var(--inkpad-nav-color-hover) 38%, transparent)
		color-mix(in srgb, var(--inkpad-nav-shell-border) 55%, transparent);
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-panel::-webkit-scrollbar,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-panel::-webkit-scrollbar,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-panel::-webkit-scrollbar,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-panel::-webkit-scrollbar {
	width: 0.72rem;
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-panel::-webkit-scrollbar-track,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-panel::-webkit-scrollbar-track,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-panel::-webkit-scrollbar-track,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-panel::-webkit-scrollbar-track {
	background: color-mix(in srgb, var(--inkpad-nav-shell-border) 34%, transparent);
	border-radius: 999px;
	margin: calc(var(--inkpad-space-sm) * 0.4) calc(var(--inkpad-space-xs) * 0.25);
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-panel::-webkit-scrollbar-thumb,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-panel::-webkit-scrollbar-thumb,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-panel::-webkit-scrollbar-thumb,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-panel::-webkit-scrollbar-thumb {
	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--inkpad-nav-color-hover) 55%, transparent) 0%,
			color-mix(in srgb, var(--inkpad-nav-color-hover) 32%, transparent) 100%
		);
	border: 2px solid transparent;
	border-radius: 999px;
	background-clip: padding-box;
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-panel::-webkit-scrollbar-thumb:hover,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-panel::-webkit-scrollbar-thumb:hover,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-panel::-webkit-scrollbar-thumb:hover,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-panel::-webkit-scrollbar-thumb:hover {
	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--inkpad-nav-color-hover) 72%, transparent) 0%,
			color-mix(in srgb, var(--inkpad-nav-color-hover) 44%, transparent) 100%
		);
	background-clip: padding-box;
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-panel {
	top: calc(100% + var(--inkpad-space-sm));
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-panel {
	bottom: calc(100% + var(--inkpad-space-sm));
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay.inkpad-nav--align-left .inkpad-nav-panel,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom.inkpad-nav--align-left .inkpad-nav-panel {
	left: 0;
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay.inkpad-nav--align-center .inkpad-nav-panel,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom.inkpad-nav--align-center .inkpad-nav-panel {
	left: 50%;
	transform: translateX(-50%);
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay.inkpad-nav--align-right .inkpad-nav-panel,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom.inkpad-nav--align-right .inkpad-nav-panel {
	right: 0;
}

.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom {
	padding: calc(var(--inkpad-space-xs) * 0.9);
	background: var(--inkpad-nav-shell-bg);
	border: 1px solid var(--inkpad-nav-shell-border);
	border-radius: var(--inkpad-nav-shell-radius);
	box-shadow: var(--inkpad-nav-shell-shadow);
	backdrop-filter: blur(var(--inkpad-nav-shell-blur));
	-webkit-backdrop-filter: blur(var(--inkpad-nav-shell-blur));
	width: fit-content;
	max-width: min(100%, 72rem);
	margin-inline: auto;
}

.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay {
	margin-block: var(--inkpad-space-sm) var(--inkpad-space-md);
}

.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom {
	margin-block: var(--inkpad-space-md) var(--inkpad-space-sm);
}

.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-inner,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-inner {
	width: auto;
	max-width: 100%;
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link {
	padding: calc(var(--inkpad-space-xs) * 1.15) calc(var(--inkpad-space-sm) * 1.15);
	isolation: isolate;
	z-index: 0;
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link::after,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link::after,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link::after,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link::after {
	display: none;
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link::before,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link::before,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link::before,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link::before {
	content: "";
	position: absolute;
	inset: calc(var(--inkpad-space-xs) * -0.45) calc(var(--inkpad-space-sm) * -0.45);
	border-radius: max(var(--inkpad-radius-round, 9999px), calc(var(--inkpad-space-xl) * 0.95));
	background:
		linear-gradient(
			180deg,
			color-mix(
				in srgb,
				var(--inkpad-nav-color-hover) 16%,
				var(--inkpad-color-surface, var(--inkpad-surface, #ffffff))
			) 0%,
			color-mix(
				in srgb,
				var(--inkpad-nav-color-hover) 9%,
				var(--inkpad-color-surface, var(--inkpad-surface, #ffffff))
			) 100%
		);
	box-shadow:
		0 calc(var(--inkpad-space-xs) * 0.9) calc(var(--inkpad-space-sm) * 1.65)
			color-mix(in srgb, var(--inkpad-nav-color-hover) 18%, transparent),
		0 0 0 1px color-mix(in srgb, var(--inkpad-nav-color-hover) 12%, transparent);
	opacity: 0;
	transform: scale(0.94);
	transform-origin: center;
	transition:
		opacity var(--inkpad-nav-transition-fast),
		transform var(--inkpad-nav-transition-fast),
		box-shadow var(--inkpad-nav-transition-fast);
	z-index: -1;
	pointer-events: none;
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link:hover,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link:focus-visible,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link:hover,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link:focus-visible,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link:hover,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link:focus-visible,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link:hover,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link:focus-visible {
	background: transparent;
	box-shadow: none;
	opacity: 1;
	transform: translate3d(calc(var(--inkpad-space-xs) * -0.7), -1px, 0);
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link:hover::before,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link:focus-visible::before,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link:hover::before,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link:focus-visible::before,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link:hover::before,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link:focus-visible::before,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link:hover::before,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link:focus-visible::before {
	opacity: 1;
	transform: scale(1);
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .current-menu-item > .inkpad-nav-item-row > .inkpad-nav-link,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .current-menu-ancestor > .inkpad-nav-item-row > .inkpad-nav-link,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .current_page_item > .inkpad-nav-item-row > .inkpad-nav-link,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .current-menu-item > .inkpad-nav-item-row > .inkpad-nav-link,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .current-menu-ancestor > .inkpad-nav-item-row > .inkpad-nav-link,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .current_page_item > .inkpad-nav-item-row > .inkpad-nav-link,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .current-menu-item > .inkpad-nav-item-row > .inkpad-nav-link,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .current-menu-ancestor > .inkpad-nav-item-row > .inkpad-nav-link,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .current_page_item > .inkpad-nav-item-row > .inkpad-nav-link,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .current-menu-item > .inkpad-nav-item-row > .inkpad-nav-link,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .current-menu-ancestor > .inkpad-nav-item-row > .inkpad-nav-link,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .current_page_item > .inkpad-nav-item-row > .inkpad-nav-link {
	background: transparent;
	box-shadow: none;
	opacity: 1;
	transform: translate3d(calc(var(--inkpad-space-xs) * -0.45), 0, 0);
}

.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .current-menu-item > .inkpad-nav-item-row > .inkpad-nav-link::before,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .current-menu-ancestor > .inkpad-nav-item-row > .inkpad-nav-link::before,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay .current_page_item > .inkpad-nav-item-row > .inkpad-nav-link::before,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .current-menu-item > .inkpad-nav-item-row > .inkpad-nav-link::before,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .current-menu-ancestor > .inkpad-nav-item-row > .inkpad-nav-link::before,
.inkpad-scope .inkpad-nav.inkpad-nav--mode-bottom .current_page_item > .inkpad-nav-item-row > .inkpad-nav-link::before,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .current-menu-item > .inkpad-nav-item-row > .inkpad-nav-link::before,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .current-menu-ancestor > .inkpad-nav-item-row > .inkpad-nav-link::before,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay .current_page_item > .inkpad-nav-item-row > .inkpad-nav-link::before,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .current-menu-item > .inkpad-nav-item-row > .inkpad-nav-link::before,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .current-menu-ancestor > .inkpad-nav-item-row > .inkpad-nav-link::before,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-bottom .current_page_item > .inkpad-nav-item-row > .inkpad-nav-link::before {
	opacity: 1;
	transform: scale(1);
	background:
		linear-gradient(
			180deg,
			color-mix(
				in srgb,
				var(--inkpad-nav-color-active) 18%,
				var(--inkpad-color-surface, var(--inkpad-surface, #ffffff))
			) 0%,
			color-mix(
				in srgb,
				var(--inkpad-nav-color-active) 10%,
				var(--inkpad-color-surface, var(--inkpad-surface, #ffffff))
			) 100%
		);
}

.inkpad-scope .inkpad-nav .inkpad-nav-submenu-toggle,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: var(--inkpad-nav-color);
	cursor: pointer;
	transition:
		color var(--inkpad-nav-transition-fast),
		background-color var(--inkpad-nav-transition-fast),
		transform var(--inkpad-nav-transition-fast);
}

.inkpad-scope .inkpad-nav .inkpad-nav-submenu-toggle:hover,
.inkpad-scope .inkpad-nav .inkpad-nav-submenu-toggle:focus-visible,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-submenu-toggle:hover,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-submenu-toggle:focus-visible {
	color: var(--inkpad-nav-color-hover);
	background: color-mix(in srgb, var(--inkpad-nav-color-hover) 10%, transparent);
	outline: none;
}

.inkpad-scope .inkpad-nav .inkpad-nav-submenu-toggle-icon,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-submenu-toggle-icon {
	display: inline-block;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform var(--inkpad-nav-transition-fast);
}

.inkpad-scope .inkpad-nav .inkpad-nav-item[data-submenu-open="true"] > .inkpad-nav-item-row .inkpad-nav-submenu-toggle-icon,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-item[data-submenu-open="true"] > .inkpad-nav-item-row .inkpad-nav-submenu-toggle-icon {
	transform: rotate(225deg) translateY(-1px);
}

.inkpad-scope .inkpad-nav .inkpad-nav-submenu-shell,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-submenu-shell {
	position: absolute;
	top: calc(100% + (var(--inkpad-space-sm) * 0.7));
	left: 0;
	min-width: var(--inkpad-nav-submenu-min-width);
	opacity: 0;
	visibility: hidden;
	transform: translateY(calc(var(--inkpad-space-xs) * 1.5));
	pointer-events: none;
	transition:
		opacity var(--inkpad-nav-transition-fast),
		transform var(--inkpad-nav-transition-fast),
		visibility var(--inkpad-nav-transition-fast);
	z-index: 30;
}

.inkpad-scope .inkpad-nav .inkpad-nav-item:hover > .inkpad-nav-submenu-shell,
.inkpad-scope .inkpad-nav .inkpad-nav-item:focus-within > .inkpad-nav-submenu-shell,
.inkpad-scope .inkpad-nav .inkpad-nav-item[data-submenu-open="true"] > .inkpad-nav-submenu-shell,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-item:hover > .inkpad-nav-submenu-shell,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-item:focus-within > .inkpad-nav-submenu-shell,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-item[data-submenu-open="true"] > .inkpad-nav-submenu-shell {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.inkpad-scope .inkpad-nav .inkpad-nav-submenu,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-submenu {
	display: flex;
	flex-direction: column;
	gap: calc(var(--inkpad-space-xs) * 0.4);
	padding: calc(var(--inkpad-space-sm) * 0.9);
	background: var(--inkpad-nav-submenu-bg);
	border: 1px solid var(--inkpad-nav-submenu-border);
	border-radius: var(--inkpad-nav-submenu-radius);
	box-shadow: var(--inkpad-nav-submenu-shadow);
}

.inkpad-scope .inkpad-nav .inkpad-nav-submenu .inkpad-nav-item-row,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-submenu .inkpad-nav-item-row {
	justify-content: space-between;
}

.inkpad-scope .inkpad-nav .inkpad-nav-submenu .inkpad-nav-link,
.inkpad-scope .inkpad-nav .inkpad-nav-submenu .inkpad-nav-link--text,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-submenu .inkpad-nav-link,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-submenu .inkpad-nav-link--text {
	width: 100%;
}

.inkpad-scope .inkpad-nav .inkpad-nav-submenu .inkpad-nav-submenu-shell,
.editor-styles-wrapper .inkpad-nav .inkpad-nav-submenu .inkpad-nav-submenu-shell {
	top: 0;
	left: calc(100% + (var(--inkpad-space-sm) * 0.7));
}

.inkpad-scope .inkpad-nav.inkpad-nav--vertical .inkpad-nav-submenu-shell,
.editor-styles-wrapper .inkpad-nav.inkpad-nav--vertical .inkpad-nav-submenu-shell {
	top: auto;
	left: calc(100% + (var(--inkpad-space-sm) * 0.7));
}

@media (max-width: 768px) {
	.inkpad-scope .inkpad-nav.inkpad-nav--stack .inkpad-nav-toggle,
	.editor-styles-wrapper .inkpad-nav.inkpad-nav--stack .inkpad-nav-toggle {
		display: inline-flex;
	}

	.inkpad-scope .inkpad-nav.inkpad-nav--stack .inkpad-nav-panel[hidden],
	.editor-styles-wrapper .inkpad-nav.inkpad-nav--stack .inkpad-nav-panel[hidden] {
		display: none;
	}

	.inkpad-scope .inkpad-nav.inkpad-nav--stack .inkpad-nav-panel,
	.editor-styles-wrapper .inkpad-nav.inkpad-nav--stack .inkpad-nav-panel {
		margin-top: var(--inkpad-space-sm);
		width: 100%;
	}

	.inkpad-scope .inkpad-nav.inkpad-nav--stack .inkpad-nav-list,
	.editor-styles-wrapper .inkpad-nav.inkpad-nav--stack .inkpad-nav-list {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		width: 100%;
		gap: calc(var(--inkpad-space-xs) * 0.7);
	}

	.inkpad-scope .inkpad-nav.inkpad-nav--stack .inkpad-nav-item,
	.editor-styles-wrapper .inkpad-nav.inkpad-nav--stack .inkpad-nav-item {
		width: 100%;
	}

	.inkpad-scope .inkpad-nav.inkpad-nav--stack .inkpad-nav-item-row,
	.editor-styles-wrapper .inkpad-nav.inkpad-nav--stack .inkpad-nav-item-row {
		width: 100%;
		justify-content: space-between;
	}

	.inkpad-scope .inkpad-nav.inkpad-nav--stack .inkpad-nav-link,
	.inkpad-scope .inkpad-nav.inkpad-nav--stack .inkpad-nav-link--text,
	.editor-styles-wrapper .inkpad-nav.inkpad-nav--stack .inkpad-nav-link,
	.editor-styles-wrapper .inkpad-nav.inkpad-nav--stack .inkpad-nav-link--text {
		width: 100%;
	}

	.inkpad-scope .inkpad-nav.inkpad-nav--stack .inkpad-nav-submenu-shell,
	.editor-styles-wrapper .inkpad-nav.inkpad-nav--stack .inkpad-nav-submenu-shell {
		position: static;
		min-width: 0;
		width: 100%;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		margin-top: calc(var(--inkpad-space-xs) * 0.7);
	}

	.inkpad-scope .inkpad-nav.inkpad-nav--stack .inkpad-nav-submenu[hidden],
	.editor-styles-wrapper .inkpad-nav.inkpad-nav--stack .inkpad-nav-submenu[hidden] {
		display: none;
	}

	.inkpad-scope .inkpad-nav.inkpad-nav--stack .inkpad-nav-submenu,
	.editor-styles-wrapper .inkpad-nav.inkpad-nav--stack .inkpad-nav-submenu {
		box-shadow: none;
	}

	.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay.inkpad-nav--stack,
	.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay.inkpad-nav--stack {
		width: min(calc(100vw - var(--inkpad-space-md)), 100%);
		max-width: calc(100vw - var(--inkpad-space-md));
	}

	.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay.inkpad-nav--stack {
		top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
	}

	.admin-bar .inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay.inkpad-nav--stack {
		top: calc(env(safe-area-inset-top, 0px) + 46px + 0.75rem);
	}

	.inkpad-scope .inkpad-nav.inkpad-nav--mode-middle-overlay.inkpad-nav--stack .inkpad-nav-inner,
	.editor-styles-wrapper .inkpad-nav.inkpad-nav--mode-middle-overlay.inkpad-nav--stack .inkpad-nav-inner {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.inkpad-scope .inkpad-nav .inkpad-nav-link,
	.inkpad-scope .inkpad-nav .inkpad-nav-submenu-shell,
	.inkpad-scope .inkpad-nav .inkpad-nav-submenu-toggle,
	.inkpad-scope .inkpad-nav .inkpad-nav-toggle-icon,
	.editor-styles-wrapper .inkpad-nav .inkpad-nav-link,
	.editor-styles-wrapper .inkpad-nav .inkpad-nav-submenu-shell,
	.editor-styles-wrapper .inkpad-nav .inkpad-nav-submenu-toggle,
	.editor-styles-wrapper .inkpad-nav .inkpad-nav-toggle-icon {
		transition: none;
	}
}

/* Header-integrated navigation: horizontal on desktop, contained below-row menu on mobile. */
@media (min-width: 769px) {
	/* Keep the desktop header trigger and its dropdown in one pointer region. */
	.inkpad-scope .inkpad-frame-top[data-nav-docked-inside-header="true"] .inkpad-frame-slot--navigation-docked-inside-header .inkpad-nav-list > .inkpad-nav-item--has-children > .inkpad-nav-submenu-shell {
		top: 100%;
		padding-top: calc(var(--inkpad-space-sm) * 0.7);
	}
	.inkpad-scope .inkpad-frame-top[data-nav-docked-inside-header="true"] .inkpad-frame-slot--navigation-docked-inside-header .inkpad-nav-list > .inkpad-nav-item--has-children[data-submenu-dismissed="true"] > .inkpad-nav-submenu-shell {
		opacity: 0;
		visibility: hidden;
		transform: translateY(calc(var(--inkpad-space-xs) * 1.5));
		pointer-events: none;
	}
	.inkpad-scope .inkpad-frame-top[data-nav-docked-inside-header="true"] .inkpad-frame-slot--navigation-docked-inside-header {
		flex: 1 1 auto !important;
		width: 100% !important;
		min-width: 0;
	}
	.inkpad-scope .inkpad-frame-top[data-nav-docked-inside-header="true"] .inkpad-frame-slot--navigation-docked-inside-header .inkpad-nav {
		width: 100% !important;
		max-width: none !important;
	}
	.inkpad-scope .inkpad-frame-top .inkpad-nav,
	.inkpad-scope .inkpad-frame-top .inkpad-nav.inkpad-nav--mode-middle-overlay,
	.inkpad-scope .inkpad-frame-top .inkpad-nav.inkpad-nav--mode-bottom {
		position: relative;
		inset: auto;
		z-index: auto;
		width: 100%;
		max-width: 100%;
		transform: none;
	}
	.inkpad-scope .inkpad-frame-top .inkpad-nav .inkpad-nav-inner {
		display: block;
		width: auto;
	}
	.inkpad-scope .inkpad-frame-top .inkpad-nav .inkpad-nav-toggle {
		display: none;
	}
	.inkpad-scope .inkpad-frame-top .inkpad-nav .inkpad-nav-panel,
	.inkpad-scope .inkpad-frame-top .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-panel,
	.inkpad-scope .inkpad-frame-top .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-panel {
		position: static;
		display: block;
		width: 100% !important;
		min-width: 0;
		max-width: none !important;
		max-height: none;
		padding: 0;
		overflow: visible;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		transform: none;
	}
	.inkpad-scope .inkpad-frame-top[data-nav-docked-inside-header="true"] .inkpad-frame-slot--navigation-docked-inside-header .inkpad-nav-list {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: clamp(0.75rem, 2vw, 1.5rem) !important;
	}
	.inkpad-scope .inkpad-frame-top[data-nav-docked-inside-header="true"] .inkpad-frame-slot--navigation-docked-inside-header .inkpad-nav-item {
		width: auto !important;
		min-width: 0;
	}
	.inkpad-scope .inkpad-frame-top .inkpad-nav .inkpad-nav-link,
	.inkpad-scope .inkpad-frame-top .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link,
	.inkpad-scope .inkpad-frame-top .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link {
		width: auto;
		padding: 0.4rem 0.15rem;
		border-radius: 0;
		white-space: normal;
		text-align: center;
		overflow-wrap: anywhere;
		transform: none;
	}
	.inkpad-scope .inkpad-frame-top .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-link::before,
	.inkpad-scope .inkpad-frame-top .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-link::before {
		display: none;
	}
}

@media (max-width: 768px) {
	.inkpad-scope .inkpad-frame-top .inkpad-nav,
	.inkpad-scope .inkpad-frame-top .inkpad-nav.inkpad-nav--mode-middle-overlay,
	.inkpad-scope .inkpad-frame-top .inkpad-nav.inkpad-nav--mode-bottom {
		position: relative;
		inset: auto;
		z-index: var(--inkpad-layer-menu, 200) !important;
		width: auto;
		max-width: 100%;
		transform: none;
	}
	.inkpad-scope .inkpad-frame-top .inkpad-nav .inkpad-nav-inner {
		display: block;
		width: auto;
	}
	.inkpad-scope .inkpad-frame-top .inkpad-nav .inkpad-nav-toggle,
	.inkpad-scope .inkpad-frame-top .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-toggle,
	.inkpad-scope .inkpad-frame-top .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-toggle {
		display: inline-flex;
		width: auto;
		min-width: 3rem;
		height: 2.75rem;
		padding: 0.5rem 0.75rem;
		border-radius: var(--inkpad-radius, 12px);
		background: var(--inkpad-color-surface, var(--inkpad-surface, #fff));
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.inkpad-scope .inkpad-frame-top .inkpad-nav .inkpad-nav-toggle-label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		clip: auto;
		overflow: visible;
		white-space: normal;
	}
	.inkpad-scope .inkpad-frame-top .inkpad-nav .inkpad-nav-panel,
	.inkpad-scope .inkpad-frame-top .inkpad-nav.inkpad-nav--mode-middle-overlay .inkpad-nav-panel,
	.inkpad-scope .inkpad-frame-top .inkpad-nav.inkpad-nav--mode-bottom .inkpad-nav-panel {
		position: absolute;
		top: calc(100% + 0.5rem);
		right: 0;
		bottom: auto;
		left: auto;
		display: block;
		width: min(24rem, calc(100vw - 2rem));
		min-width: min(18rem, calc(100vw - 2rem));
		max-width: calc(100vw - 2rem);
		max-height: min(70vh, 32rem);
		padding: 0.5rem;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 1px solid var(--inkpad-nav-shell-border);
		border-radius: var(--inkpad-radius, 12px);
		background: var(--inkpad-color-surface, var(--inkpad-surface, #fff));
		box-shadow: var(--inkpad-shadow-elevation, var(--inkpad-shadow, none));
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		transform: none;
	}
	.inkpad-scope .inkpad-frame-top .inkpad-nav .inkpad-nav-panel[hidden] {
		display: none;
	}
	.inkpad-scope .inkpad-frame-top .inkpad-nav .inkpad-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0.2rem;
	}
	.inkpad-scope .inkpad-frame-top .inkpad-nav .inkpad-nav-item,
	.inkpad-scope .inkpad-frame-top .inkpad-nav .inkpad-nav-item-row,
	.inkpad-scope .inkpad-frame-top .inkpad-nav .inkpad-nav-link {
		width: 100%;
	}
	.inkpad-scope .inkpad-frame-top .inkpad-nav .inkpad-nav-link {
		min-height: 2.75rem;
		justify-content: flex-start;
		padding: 0.65rem 0.75rem;
		border-radius: calc(var(--inkpad-radius, 12px) * 0.65);
		white-space: normal;
		overflow-wrap: anywhere;
	}
}