/**
 * YOOAdmin Focus sidebar — docked expanded or shrunk (icons).
 * Distinct rail color from header; no box-shadow; header panel toggle.
 *
 * @package YOOAdmin
 */

body.yoo-focus.yps-nav-enhanced {
	--yps-rail-width: var(--yps-sidebar-w, 268px);
	--yps-rail-icons-width: 64px;
	/*
	 * Colors come from Brand Colors (Theme settings → Colors), exactly like the
	 * classic sidebar: "Sidebar Background" paints the rail, "Header & Flyout
	 * Menu Text" drives every ink/icon tone, "Accent Color" the active state.
	 * Everything below is derived from those two so a custom palette stays
	 * readable instead of being hardcoded white-on-grey.
	 */
	--yps-rail-bg: var(--yps-bg, var(--yooadmin-sidebar-bg, #4b4b4b));
	--yps-rail-ink-source: var(--yp-text-contrast, var(--yooadmin-text-contrast, #fff));
	--yps-rail-seam-light: color-mix(in srgb, var(--yps-rail-ink-source) 14%, transparent);
	--yps-rail-seam-dark: rgba(0, 0, 0, 0.28);
	/* Muted menu ink (softer than the full contrast color) */
	--yps-rail-ink: color-mix(in srgb, var(--yps-rail-ink-source) 72%, transparent);
	--yps-rail-ink-soft: color-mix(in srgb, var(--yps-rail-ink-source) 48%, transparent);
	--yps-rail-ink-strong: color-mix(in srgb, var(--yps-rail-ink-source) 92%, transparent);
	--yps-rail-icon: color-mix(in srgb, var(--yps-rail-ink-source) 62%, transparent);
	--yps-rail-icon-hover: color-mix(in srgb, var(--yps-rail-ink-source) 90%, transparent);
	/* Row / control wash — tinted by the ink so it shows on light rails too */
	--yps-rail-row-bg: color-mix(in srgb, var(--yps-rail-ink-source) 6%, transparent);
	--yps-rail-row-bg-strong: color-mix(in srgb, var(--yps-rail-ink-source) 8%, transparent);
	--yps-rail-scroll-thumb: color-mix(in srgb, var(--yps-rail-ink-source) 22%, transparent);
	--yps-engrave-dark: rgba(0, 0, 0, 0.32);
	--yps-engrave-light: color-mix(in srgb, var(--yps-rail-ink-source) 10%, transparent);
	/* One height for the footer bar and the rail's Focus row: both sit on the
	   viewport bottom, so equal heights put their top seams on the same line. */
	--yps-foot-h: 44px;
}

/* Failsafe: never flash brand in header while expanded (PHP places it in sidebar). */
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-expanded #yoo-admin-header .yp-header-left > #yps-shell-brand {
	display: none !important;
}

html[data-yooadmin-studio-color-mode-effective='dark'] body.yoo-focus.yps-nav-enhanced,
html.is-dark-theme body.yoo-focus.yps-nav-enhanced,
html[data-yooadmin-studio-color-mode-effective='dark'] body.yoo-focus.yps-nav-enhanced #yps-sidebar,
html.is-dark-theme body.yoo-focus.yps-nav-enhanced #yps-sidebar {
	/* Body hosts tips + toolbar menus; #yps-sidebar has an inline light brand block. */
	--yps-bg: color-mix(in srgb, var(--yooadmin-header-bg-source, #4b4b4b) 26%, #0c0e12 74%);
	--yooadmin-sidebar-bg: var(--yps-bg);
	--yps-rail-bg: var(--yps-bg);
	--yps-rail-seam-light: color-mix(in srgb, var(--yps-rail-ink-source) 10%, transparent);
	--yps-rail-seam-dark: rgba(0, 0, 0, 0.45);
	/* Thumb must stay readable on near-black rails (never derive from ink). */
	--yps-rail-scroll-thumb: rgba(255, 255, 255, 0.32);
	--yps-rail-scroll-thumb-hover: rgba(255, 255, 255, 0.48);
}

html[data-yooadmin-studio-color-mode-effective='light'] body.yoo-focus.yps-nav-enhanced {
	--yps-rail-bg: var(--yps-bg, var(--yooadmin-sidebar-bg, #4b4b4b));
	--yps-rail-seam-light: color-mix(in srgb, var(--yps-rail-ink-source) 16%, transparent);
	--yps-rail-seam-dark: rgba(0, 0, 0, 0.22);
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-expanded {
	--yps-sidebar-width: var(--yps-rail-width);
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons {
	--yps-sidebar-width: var(--yps-rail-icons-width);
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-hidden {
	--yps-sidebar-width: 0px;
}

/*
 * OpenStation (desktop shell + chromeless windows): the dock/wallpaper
 * own navigation. Kill the enhanced rail and its content gutter so the
 * wallpaper is not crushed by a docked #yps-sidebar.
 */
body.yoo-focus.yps-nav-enhanced:is(.os-active, .os-chromeless) {
	--yps-sidebar-width: 0px !important;
}

body.yoo-focus.yps-nav-enhanced:is(.os-active, .os-chromeless) #wpwrap {
	padding-inline-start: 0 !important;
}

body.yoo-focus:is(.os-active, .os-chromeless) #yps-sidebar,
body.yoo-focus:is(.os-active, .os-chromeless) #yps-sidebar.yps-sidebar,
body.yoo-focus.yps-nav-enhanced:is(.os-active, .os-chromeless) #yps-sidebar.yps-sidebar,
body.yoo-focus:is(.os-active, .os-chromeless) .yps-overlay,
body.yoo-focus:is(.os-active, .os-chromeless) #yps-toggle-btn,
body.yoo-focus:is(.os-active, .os-chromeless) .yps-rail-mode,
body.yoo-focus:is(.os-active, .os-chromeless) .yps-rail-mode--header,
body.yoo-focus:is(.os-active, .os-chromeless) .yps-rail-mode--rail {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: translateX(-120%) !important;
	width: 0 !important;
	max-width: 0 !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #wpwrap {
	padding-inline-start: var(--yps-sidebar-width) !important;
	box-sizing: border-box !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #wpcontent,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #wpfooter,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-header-wrapper,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-header,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-breadcrumbs-bar,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-subsite-chrome {
	margin-inline-start: 0 !important;
	width: auto !important;
	max-width: none;
}

/*
 * Breadcrumbs bar tracks the content column edge (never under the rail).
 * Inner row + page column stay centered under --ysh-layout-max with side gutters
 * so wide/normal never kiss the sidebar or the viewport edge.
 */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) {
	--ysh-enhanced-gutter: clamp(16px, 2.2vw, 32px);
	/* Matches breadcrumbs' content edge: gutter + 16px inner inset. */
	--yps-content-edge-inset: calc(
		16px + max(
			var(--ysh-enhanced-gutter, 24px),
			(100% - var(--ysh-layout-max, 1400px)) / 2
		)
	);
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-breadcrumbs-bar {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
	box-sizing: border-box !important;
}

/*
 * Include .wp-admin so this column rule beats Focus core
 * `body.yoo-focus.wp-admin … #wpbody-content > .wrap { max-width:none }`
 * (same class count; later sheet + studio-hub-late finishes the job).
 */
body.yoo-focus.wp-admin.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-breadcrumbs-inner,
body.yoo-focus.wp-admin.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-studio-hub,
body.yoo-focus.wp-admin.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #wpbody-content > .wrap,
body.yoo-focus.wp-admin.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-page-copyright,
/* Admin notices / Elementor upsell must share the hub column (normal/wide + open rail). */
body.yoo-focus.wp-admin.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons)
	#wpbody-content
	> :is(
		.notice,
		.update-nag,
		.updated,
		.error,
		.e-notice,
		#e-conversion-banner,
		.e-conversion-banner-inline,
		[class*='-admin-notice'],
		.codevz-admin-notice
	),
body.yoo-focus.wp-admin.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons)
	#wpbody-content
	> .wrap
	> :is(
		.notice,
		.update-nag,
		.updated,
		.error,
		.e-notice,
		#e-conversion-banner,
		.e-conversion-banner-inline,
		[class*='-admin-notice'],
		.codevz-admin-notice
	) {
	max-width: min(
		var(--ysh-layout-max, 1400px),
		calc(100% - (2 * var(--ysh-enhanced-gutter, clamp(24px, 2.5vw, 40px))))
	) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-inline: auto !important;
	box-sizing: border-box !important;
}

/* Header row stays full-bleed: rail control, brand and account sit at the edges. */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-header {
	max-width: none !important;
	width: 100% !important;
	margin-inline: 0 !important;
}

/*
 * Account cluster (bell + avatar) tracks the content column edge.
 * In icons mode the brand also sits on that edge; the rail menu icon stays
 * on the screen edge inside the closed sidebar.
 */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-header .yp-header-right {
	padding-inline-end: var(--yps-content-edge-inset) !important;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons .yp-header .yp-header-left {
	padding-inline-start: var(--yps-content-edge-inset) !important;
}

/*
 * Closing the rail moves the brand into the header. Cap it to the account avatar
 * box (the tallest fixed item) so header height is identical in both rail modes.
 */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) {
	--yps-header-brand-max: 44px;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-header .yps-shell-brand,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-header .yps-shell-brand .yp-logo-link {
	max-height: var(--yps-header-brand-max) !important;
	min-height: 0 !important;
	overflow: hidden;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-header .yps-shell-brand .yp-logo {
	height: auto !important;
	max-height: var(--yps-header-brand-max) !important;
	width: auto !important;
	max-width: min(100%, var(--yooadmin-logo-w, 150px)) !important;
	object-fit: contain;
}

/* Copyright band starts after the rail so it never slides under it. */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-page-copyright {
	left: var(--yps-sidebar-width) !important;
	right: 0 !important;
	width: auto !important;
	max-width: none !important;
	box-sizing: border-box !important;
}

[dir='rtl'] body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-page-copyright {
	left: 0 !important;
	right: var(--yps-sidebar-width) !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar.yps-sidebar {
	position: fixed !important;
	inset-block: 0 !important;
	inset-inline-start: 0 !important;
	inset-inline-end: auto !important;
	width: var(--yps-sidebar-width) !important;
	max-width: var(--yps-sidebar-width) !important;
	height: 100vh !important;
	height: 100dvh !important;
	transform: none !important;
	z-index: 100050;
	pointer-events: auto !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	padding-bottom: 0 !important;
	box-sizing: border-box !important;
	background: var(--yps-rail-bg) !important;
	box-shadow: none !important;
	border-inline-end: 0 !important;
	border-radius: 0 !important;
}

/* Engraved seam: soft highlight + recessed shadow (no flat border / drop shadow). */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar.yps-sidebar::after {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 2px;
	pointer-events: none;
	z-index: 5;
	background: linear-gradient(
		to right,
		var(--yps-rail-seam-dark) 0,
		var(--yps-rail-seam-dark) 50%,
		var(--yps-rail-seam-light) 50%,
		var(--yps-rail-seam-light) 100%
	);
	opacity: 0.95;
}

[dir='rtl'] body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar.yps-sidebar::after {
	background: linear-gradient(
		to left,
		var(--yps-rail-seam-dark) 0,
		var(--yps-rail-seam-dark) 50%,
		var(--yps-rail-seam-light) 50%,
		var(--yps-rail-seam-light) 100%
	);
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar[aria-hidden='true'] {
	pointer-events: auto !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yps-overlay {
	display: none !important;
}

/* Hamburger only on mobile / hidden; desktop uses header panel control */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-toggle-btn {
	display: none !important;
}

/*
 * Brand strip = exact header height (flex 0 0 + min-height:0 so content cannot stretch it).
 * Engraved bottom edge — identical on .yp-header-wrapper so one continuous carve.
 */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) {
	--yps-chrome-engrave:
		inset 0 -1px 0 var(--yps-engrave-dark),
		inset 0 -2px 0 var(--yps-engrave-light);
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-side-header {
	flex: 0 0 var(--yps-chrome-h, 54px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	height: var(--yps-chrome-h, 54px);
	max-height: var(--yps-chrome-h, 54px);
	padding: 0 12px;
	border-bottom: 0;
	background: transparent;
	box-shadow: var(--yps-chrome-engrave);
	overflow: hidden;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-side-header {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0;
	flex: 0 0 var(--yps-chrome-h, 54px);
	min-height: 0;
	height: var(--yps-chrome-h, 54px);
	max-height: var(--yps-chrome-h, 54px);
	padding: 0 6px;
	border-bottom: 0;
	background: transparent;
	box-shadow: var(--yps-chrome-engrave);
	overflow: hidden;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-side-header > :not(.yps-rail-mode--rail) {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-side-logo,
body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-side-title {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-shell-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	min-height: 0;
	max-height: 100%;
	flex: 0 1 auto;
	overflow: hidden;
}

/* Same Branding width as header; vertically + horizontally centered in the strip */
body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-shell-brand .yp-logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	height: auto;
	min-height: 0;
	max-height: 100%;
	flex-shrink: 1;
	min-width: 0;
	overflow: hidden;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-shell-brand .yp-logo {
	display: block;
	width: var(--yooadmin-logo-w, 150px) !important;
	height: auto !important;
	max-width: min(100%, var(--yooadmin-logo-w, 150px));
	max-height: calc(var(--yps-chrome-h, 54px) - 4px) !important;
	object-fit: contain;
	object-position: center center;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-close {
	display: none !important;
	pointer-events: none !important;
}

/*
 * Rail scrolling: the native scrollbar is fully hidden (every engine renders its
 * own chrome — Windows/Chromium keeps the stepper arrows no matter how
 * ::-webkit-scrollbar-button is styled). The visible bar is .yps-rail-scrollbar,
 * an overlay thumb drawn and driven by JS, so it looks identical everywhere.
 *
 * When the rail is multi-page and the current page fits (`yps-nav--fit`), lock
 * overflow so entries never stack into a scroll under the pagination dots.
 */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-nav {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 6px 0 8px !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-paged:not(.yps-layout-edit-mode) #yps-sidebar .yps-nav.yps-nav--fit {
	overflow-y: hidden !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-nav::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
	display: none !important;
}

/* Visible stand-in while .yps-nav rebuilds (never blank the rail) */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-nav-paint-hold {
	pointer-events: none;
}

/*
 * Never let paint-hold and the live rail share the flex column (halves height =
 * “menu vanished” flash). Prefer the live rail once it is no longer deferred.
 */
body.yoo-focus.yps-nav-enhanced #yps-sidebar:has(.yps-nav:not(.yps-nav-paint-hold):not([hidden]):not(.yps-nav-rebuild)) .yps-nav-paint-hold,
body.yoo-focus.yps-nav-enhanced #yps-sidebar:has(.yps-nav-rebuild:not([hidden])) .yps-nav-paint-hold {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-nav-rebuild[hidden],
body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-nav[hidden] {
	display: none !important;
}

/*
 * Custom overlay thumb — only when the rail is NOT multi-page (paging is the
 * primary overflow UI). Hidden until pointer is over the sidebar / scrolling / dragging.
 */
body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-rail-scrollbar {
	position: absolute;
	inset-inline-end: 2px;
	width: 8px;
	border-radius: 999px;
	background: var(--yps-rail-scroll-thumb);
	opacity: 0;
	visibility: hidden;
	z-index: 6;
	cursor: grab;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0.15s ease, background 0.15s ease, width 0.15s ease;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-paged:not(.yps-layout-edit-mode) #yps-sidebar .yps-rail-scrollbar {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced:not(.yps-nav-paged) #yps-sidebar:hover .yps-rail-scrollbar,
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar:hover .yps-rail-scrollbar,
body.yoo-focus.yps-nav-enhanced:not(.yps-nav-paged) #yps-sidebar .yps-rail-scrollbar:hover,
body.yoo-focus.yps-nav-enhanced:not(.yps-nav-paged) #yps-sidebar .yps-rail-scrollbar.is-dragging,
body.yoo-focus.yps-nav-enhanced:not(.yps-nav-paged) #yps-sidebar .yps-rail-scrollbar.is-scrolling,
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-rail-scrollbar.is-dragging,
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-rail-scrollbar.is-scrolling {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	background: var(
		--yps-rail-scroll-thumb-hover,
		color-mix(in srgb, var(--yps-rail-ink-source) 36%, transparent)
	);
	width: 9px;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-rail-scrollbar.is-dragging {
	cursor: grabbing;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-rail-scrollbar[hidden] {
	display: none !important;
}

/* Expanded (open) rail — muted ink + engraved separators */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-nav {
	padding: 8px 0 8px !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-text,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-link,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-expander {
	color: var(--yps-rail-ink) !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-link .dashicons,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-link .yps-wp-icon-proxy,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-link .wp-menu-image,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-link .yps-wp-icon-proxy *,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-expander .dashicons {
	color: var(--yps-rail-icon) !important;
	fill: currentColor !important;
	stroke: currentColor !important;
	opacity: 1 !important;
	-webkit-text-fill-color: currentColor !important;
}

/*
 * Plugin menu icons arrive as artwork (raster logos, SVG files, CSS sprites)
 * that carries its own brand colors, so a rail of dashicons ends up speckled
 * with green/orange/blue logos. Re-draw that artwork as a mask filled with
 * currentColor: one ink for every icon, and it still follows hover/active.
 * JS puts the artwork URL in --yps-icon-mask (see paintRailIconMask).
 */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-wp-icon-proxy.is-masked {
	position: relative;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-wp-icon-proxy.is-masked > img,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-wp-icon-proxy.is-masked .wp-menu-image {
	visibility: hidden !important;
	background-image: none !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-wp-icon-proxy.is-masked::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask: var(--yps-icon-mask) no-repeat center center;
	mask: var(--yps-icon-mask) no-repeat center center;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
}

/* No alpha channel to mask against (JPEG/BMP) — desaturate instead. */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-wp-icon-proxy.is-desaturated > img {
	filter: grayscale(1) contrast(0.85) !important;
	opacity: 0.75 !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-item:hover > .yps-row .yps-link,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-flyout-open > .yps-row .yps-link,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-active > .yps-row .yps-link {
	color: var(--yps-rail-ink-strong) !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-item:hover > .yps-row .yps-link .dashicons,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-item:hover > .yps-row .yps-link .yps-wp-icon-proxy,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-item:hover > .yps-row .yps-link .yps-wp-icon-proxy *,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-flyout-open > .yps-row .yps-link .dashicons,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-flyout-open > .yps-row .yps-link .yps-wp-icon-proxy,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-active > .yps-row .yps-link .dashicons,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-active > .yps-row .yps-link .yps-wp-icon-proxy {
	color: var(--yps-rail-icon-hover) !important;
	-webkit-text-fill-color: currentColor !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-group {
	margin: 10px 0 4px;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-group__label {
	padding: 10px 16px 8px;
	opacity: 1;
	color: var(--yps-rail-ink-soft) !important;
	position: relative;
}

/* Engraved group separator under label */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-group__label::after {
	content: '';
	display: block;
	height: 2px;
	margin-top: 8px;
	border-radius: 1px;
	background: linear-gradient(
		to bottom,
		var(--yps-engrave-dark) 0,
		var(--yps-engrave-dark) 50%,
		var(--yps-engrave-light) 50%,
		var(--yps-engrave-light) 100%
	);
	opacity: 0.9;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item {
	margin: 0 8px;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-row {
	border: 0 !important;
	padding-right: 4px;
	background: transparent !important;
	border-radius: 10px;
	box-shadow: none !important;
	position: relative;
	/* Let the label shrink instead of forcing the row taller. */
	min-width: 0;
}

/* Engraved hairline between top-level items — absolute so it never shifts the row */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item + .yps-item > .yps-row::before,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-group + .yps-item > .yps-row::before,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item + .yps-group > .yps-group__label::before {
	content: '';
	position: absolute;
	inset-inline: 10px;
	top: 0;
	display: block;
	height: 2px;
	margin: 0;
	border-radius: 1px;
	background: linear-gradient(
		to bottom,
		var(--yps-engrave-dark) 0,
		var(--yps-engrave-dark) 50%,
		var(--yps-engrave-light) 50%,
		var(--yps-engrave-light) 100%
	);
	opacity: 0.55;
	pointer-events: none;
	z-index: 1;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item + .yps-group > .yps-group__label::before {
	position: relative;
	inset-inline: auto;
	top: auto;
	margin: 0 0 6px;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-link {
	gap: 12px;
	padding: 9px 12px;
	border-radius: 10px;
	transition: color 0.15s ease;
	min-width: 0;
	background: transparent !important;
}

/* Fixed icon column — every row starts on the same left edge */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-link > .dashicons,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-link > .yps-wp-icon-proxy,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-link > .wp-menu-image {
	width: 22px !important;
	min-width: 22px !important;
	height: 22px !important;
	flex: 0 0 22px !important;
	margin: 0 !important;
	box-sizing: border-box;
}

/* Hover covers full row (link + chevron) */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item:hover > .yps-row,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-open > .yps-row,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-active > .yps-row,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-flyout-open > .yps-row {
	background: var(--yps-rail-row-bg) !important;
	transition: background 0.15s ease;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item:hover > .yps-row .yps-link,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-open > .yps-row .yps-link,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-active > .yps-row .yps-link,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-flyout-open > .yps-row .yps-link {
	background: transparent !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-wp-icon-proxy {
	margin-right: 0;
	margin-inline-end: 2px;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-text {
	font-weight: 500;
	letter-spacing: 0.01em;
	/* One line always: long plugin names get an ellipsis + hover tip, never wrap. */
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	/* Kill leftover tip inline styles from icons mode (Comments overlap bug) */
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
	width: auto !important;
	height: auto !important;
	z-index: auto !important;
	clip: auto !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-expander {
	opacity: 0.7;
	padding: 8px 6px;
	color: var(--yps-rail-ink-soft) !important;
	flex-shrink: 0;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-expander:hover,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-flyout-open > .yps-row .yps-expander {
	opacity: 1;
	color: var(--yps-rail-ink-strong) !important;
}

/* Side chevron: nudge outward on hover / flyout — never spin */
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-expanded #yps-sidebar .yps-expander .dashicons,
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-expanded #yps-sidebar .yps-item.is-open > .yps-row .yps-expander .dashicons,
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-expanded #yps-sidebar .yps-item.is-flyout-open > .yps-row .yps-expander .dashicons {
	transform: rotate(-90deg) translateY(0) !important;
	transition: transform 0.18s ease;
}

[dir='rtl'] body.yoo-focus.yps-nav-enhanced.yps-nav-mode-expanded #yps-sidebar .yps-expander .dashicons,
[dir='rtl'] body.yoo-focus.yps-nav-enhanced.yps-nav-mode-expanded #yps-sidebar .yps-item.is-open > .yps-row .yps-expander .dashicons,
[dir='rtl'] body.yoo-focus.yps-nav-enhanced.yps-nav-mode-expanded #yps-sidebar .yps-item.is-flyout-open > .yps-row .yps-expander .dashicons {
	transform: rotate(90deg) translateY(0) !important;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-expanded #yps-sidebar .yps-item.has-sub:hover > .yps-row .yps-expander .dashicons,
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-expanded #yps-sidebar .yps-item.has-sub.is-flyout-open > .yps-row .yps-expander .dashicons {
	/* After -90deg, local Y points toward the outer edge (LTR right) */
	transform: rotate(-90deg) translateY(3px) !important;
}

[dir='rtl'] body.yoo-focus.yps-nav-enhanced.yps-nav-mode-expanded #yps-sidebar .yps-item.has-sub:hover > .yps-row .yps-expander .dashicons,
[dir='rtl'] body.yoo-focus.yps-nav-enhanced.yps-nav-mode-expanded #yps-sidebar .yps-item.has-sub.is-flyout-open > .yps-row .yps-expander .dashicons {
	transform: rotate(90deg) translateY(3px) !important;
}

/* Never expand accordion below in enhanced docked modes */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-item.has-sub > .yps-sub:not(.yps-sub--flyout) {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-toggle {
	flex: 0 0 auto !important;
	margin-top: 0;
	border-top: 0;
	/* Same height as the footer bar so the engraved seam lines up with it. */
	display: flex !important;
	align-items: center !important;
	min-height: var(--yps-foot-h) !important;
	padding: 0 12px !important;
	box-sizing: border-box !important;
	background: transparent;
	/* Same carve as the brand strip edge: dark hairline on the seam, highlight inside */
	box-shadow:
		inset 0 1px 0 var(--yps-engrave-dark),
		inset 0 2px 0 var(--yps-engrave-light);
}

/* Focus row reads like a nav row: same ink, same icon size and color */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-label {
	flex: 1 1 auto;
	min-width: 0;
	gap: 10px;
	opacity: 1;
	color: var(--yps-rail-ink) !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-icon {
	flex: 0 0 22px;
	width: 22px !important;
	min-width: 22px !important;
	height: 22px !important;
	font-size: 22px !important;
	line-height: 22px !important;
	color: var(--yps-rail-icon) !important;
	-webkit-text-fill-color: currentColor !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-label:hover .yps-focus-icon {
	color: var(--yps-rail-icon-hover) !important;
}

/*
 * Quiet switch: the default 44x24 track with a pure-white knob shouts next to
 * the muted nav rows. Same ink family as everything else in the rail, sized
 * down so the row reads as a menu row that happens to carry a control.
 */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-text {
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-switch {
	width: 32px !important;
	height: 18px !important;
	border-radius: 999px !important;
	/*
	 * A recess is darker than its surface, never lighter — an ink wash reads as
	 * a flat grey pill. Hole is punched with black, then an outer highlight
	 * hairline below it plays the lip catching the light.
	 */
	background: rgba(0, 0, 0, 0.14) !important;
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.28),
		0 1px 0 var(--yps-engrave-light) !important;
	transition: background 0.15s ease !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-slider {
	top: 3px !important;
	left: 3px !important;
	width: 12px !important;
	height: 12px !important;
	/* The only raised part: lit from above, dropping a shadow into the groove. */
	background: var(--yps-rail-icon) !important;
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--yps-rail-ink-source) 35%, transparent),
		0 1px 2px rgba(0, 0, 0, 0.3) !important;
	transition: transform 0.15s ease, background 0.15s ease !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-label:hover .yps-focus-switch {
	background: rgba(0, 0, 0, 0.18) !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-label:hover .yps-focus-slider {
	background: var(--yps-rail-icon-hover) !important;
}

/* On: the recess stays a recess, the knob brightens — no accent colour. */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-input:checked ~ .yps-focus-switch {
	background: rgba(0, 0, 0, 0.2) !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-label:hover .yps-focus-input:checked ~ .yps-focus-switch {
	background: rgba(0, 0, 0, 0.24) !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-input:checked ~ .yps-focus-switch .yps-focus-slider {
	transform: translateX(14px) !important;
	background: var(--yps-rail-ink-strong) !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-input:focus-visible ~ .yps-focus-switch {
	outline: 2px solid var(--ysh-brand, var(--yp-primary, #eda934));
	outline-offset: 2px;
}

[dir='rtl'] body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-slider {
	left: auto !important;
	right: 3px !important;
}

[dir='rtl'] body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-focus-input:checked ~ .yps-focus-switch .yps-focus-slider {
	transform: translateX(-14px) !important;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-group {
	margin: 8px 0 2px;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-group__label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.62;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-group--new > .yps-group__label {
	color: var(--ysh-brand, var(--yp-primary, #eda934));
	opacity: 0.95;
}

/* Icons (shrunk) mode — soft rail + side flyouts */
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-nav {
	padding: 4px 0 8px !important;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-group {
	margin: 4px 0;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-group__label {
	display: block;
	height: 2px;
	padding: 0;
	margin: 10px 14px 8px;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
	border: 0;
	border-radius: 1px;
	background: linear-gradient(
		to bottom,
		var(--yps-engrave-dark) 0,
		var(--yps-engrave-dark) 50%,
		var(--yps-engrave-light) 50%,
		var(--yps-engrave-light) 100%
	);
	opacity: 0.7;
}

/* Closed rail: no extra hairline above the first icon */
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-nav > .yps-group:first-child > .yps-group__label,
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-nav > .yps-item:first-child + .yps-group > .yps-group__label {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-nav > .yps-group:first-child {
	margin-top: 0;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-group__label * {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-item {
	position: relative;
	margin: 2px 0;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-item + .yps-item::before {
	content: '';
	display: block;
	height: 2px;
	margin: 0 16px 2px;
	border-radius: 1px;
	background: linear-gradient(
		to bottom,
		var(--yps-engrave-dark) 0,
		var(--yps-engrave-dark) 50%,
		var(--yps-engrave-light) 50%,
		var(--yps-engrave-light) 100%
	);
	opacity: 0.45;
	pointer-events: none;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-row {
	border: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
	justify-content: center;
	width: 100%;
	background: transparent !important;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-link {
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
	margin: 0 auto;
	padding: 0 !important;
	border-radius: 10px;
	gap: 0 !important;
	transition: background 0.15s ease;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-item:hover > .yps-row .yps-link,
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-item.is-flyout-open > .yps-row .yps-link,
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-item.is-active > .yps-row .yps-link {
	background: var(--yps-rail-row-bg-strong) !important;
}

/* Keep core --yps-menu-icon-size; only center and clear side margins */
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-link .dashicons,
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-link .yps-wp-icon-proxy,
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-link .wp-menu-image {
	margin: 0 !important;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-wp-icon-proxy {
	margin: 0 !important;
	margin-inline: 0 !important;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-item > .yps-row .yps-text,
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-item > .yps-row .yps-expander,
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-item > .yps-row .yps-badge,
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-focus-text,
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-side-title {
	display: none !important;
}

/* Keep accordion subs collapsed in the rail — flyouts are position:fixed */
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-sub:not(.yps-sub--flyout) {
	display: none !important;
}

/*
 * Closed rail: the eye alone is the control. The wrapping <label> still drives
 * the hidden checkbox, so a click flips Focus Mode exactly like the switch.
 */
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-focus-switch {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-focus-label {
	justify-content: center;
	gap: 0;
	padding-inline: 4px;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-focus-label:has(.yps-focus-input:checked) .yps-focus-icon {
	color: var(--ysh-brand, var(--yp-primary, #eda934)) !important;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-focus-toggle {
	padding: 0 8px !important;
}

/* Label tooltip for items without submenu (icons only) */
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-item:not(.has-sub).is-tip-open > .yps-row .yps-text {
	display: block !important;
	position: fixed !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 6px 10px !important;
	clip: auto !important;
	overflow: visible !important;
	white-space: nowrap !important;
	background: var(--yps-rail-bg) !important;
	color: var(--yps-rail-ink-strong) !important;
	border: 0;
	border-radius: 8px;
	z-index: 100400;
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--yps-engrave-light) 70%, transparent),
		0 10px 28px rgba(0, 0, 0, 0.28);
	pointer-events: none;
	font-size: 12px;
	font-weight: 550;
	letter-spacing: 0.01em;
	opacity: 1;
}

/*
 * Full-name tip for labels the rail had to clip. Same chrome as the icons-mode
 * tip above; lives on <body> so it can never be clipped by the rail.
 */
body.yoo-focus.yps-nav-enhanced .yps-nav-tip {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	max-width: min(360px, 80vw);
	margin: 0;
	padding: 6px 10px;
	background: var(--yps-rail-bg);
	color: var(--yps-rail-ink-strong);
	border: 0;
	border-radius: 8px;
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--yps-engrave-light) 70%, transparent),
		0 10px 28px rgba(0, 0, 0, 0.28);
	font-size: 12px;
	font-weight: 550;
	line-height: 1.35;
	letter-spacing: 0.01em;
	white-space: normal;
	overflow-wrap: anywhere;
	pointer-events: none;
	z-index: 100400;
}

body.yoo-focus.yps-nav-enhanced .yps-nav-tip.is-visible {
	display: block;
}

/* Short chrome tips (rail toggle / focus eye) stay on one line */
body.yoo-focus.yps-nav-enhanced .yps-nav-tip.yps-nav-tip--chrome {
	white-space: nowrap;
	overflow-wrap: normal;
	max-width: none;
}

/* Side flyout — same rail color, muted ink, engraved item separators */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout {
	display: block !important;
	position: fixed !important;
	inset-inline-start: auto;
	inset-block-start: auto;
	z-index: 100400;
	min-width: 228px;
	max-width: min(300px, 72vw);
	margin: 0 !important;
	padding: 6px 0 8px !important;
	list-style: none;
	border: 0;
	border-radius: 12px;
	background: var(--yps-rail-bg) !important;
	color: var(--yps-rail-ink) !important;
	box-shadow:
		inset 1px 0 0 var(--yps-engrave-light),
		inset -1px 0 0 var(--yps-engrave-dark),
		inset 0 1px 0 var(--yps-engrave-light),
		inset 0 -1px 0 var(--yps-engrave-dark),
		0 10px 28px rgba(0, 0, 0, 0.28),
		0 2px 6px rgba(0, 0, 0, 0.16);
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--yps-rail-scroll-thumb) transparent;
}

/* Dense flyouts: 2 / 3 columns instead of a long scroll */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout.yps-flyout--cols-2,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout.yps-flyout--cols-3 {
	position: fixed !important;
	column-fill: balance;
	column-rule: none;
	column-gap: 14px;
	overflow-y: auto;
	overflow-x: hidden;
	/* Vertical engraved seam(s) live in the column gutters */
	background-color: var(--yps-rail-bg) !important;
	background-repeat: no-repeat;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout.yps-flyout--cols-2 {
	column-count: 2;
	min-width: min(440px, 90vw);
	max-width: min(520px, 92vw) !important;
	background-image: linear-gradient(
		to right,
		var(--yps-engrave-dark) 0,
		var(--yps-engrave-dark) 50%,
		var(--yps-engrave-light) 50%,
		var(--yps-engrave-light) 100%
	);
	background-size: 2px calc(100% - 16px);
	background-position: center 8px;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout.yps-flyout--cols-3 {
	column-count: 3;
	min-width: min(600px, 94vw);
	max-width: min(760px, 96vw) !important;
	background-image:
		linear-gradient(
			to right,
			var(--yps-engrave-dark) 0,
			var(--yps-engrave-dark) 50%,
			var(--yps-engrave-light) 50%,
			var(--yps-engrave-light) 100%
		),
		linear-gradient(
			to right,
			var(--yps-engrave-dark) 0,
			var(--yps-engrave-dark) 50%,
			var(--yps-engrave-light) 50%,
			var(--yps-engrave-light) 100%
		);
	background-size: 2px calc(100% - 16px), 2px calc(100% - 16px);
	background-position: 33.33% 8px, 66.66% 8px;
}

/*
 * Multi-col: NO full-bleed item shadows (they look like one continuous line across columns).
 * Inset engraved hairline per item so each column keeps its own separators.
 */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout.yps-flyout--cols-2 > .yps-sub-item,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout.yps-flyout--cols-3 > .yps-sub-item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	box-shadow: none !important;
	position: relative;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout.yps-flyout--cols-2 > .yps-sub-item + .yps-sub-item,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout.yps-flyout--cols-3 > .yps-sub-item + .yps-sub-item {
	box-shadow: none !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout.yps-flyout--cols-2 > .yps-sub-item + .yps-sub-item::before,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout.yps-flyout--cols-3 > .yps-sub-item + .yps-sub-item::before {
	content: '';
	display: block;
	height: 2px;
	margin: 0 12px;
	border-radius: 1px;
	background: linear-gradient(
		to bottom,
		var(--yps-engrave-dark) 0,
		var(--yps-engrave-dark) 50%,
		var(--yps-engrave-light) 50%,
		var(--yps-engrave-light) 100%
	);
	opacity: 0.9;
	pointer-events: none;
}

/* First item of a wrapped column keeps no top hairline (JS flags column starters) */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout.yps-flyout--cols-2 > .yps-sub-item.is-col-start::before,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout.yps-flyout--cols-3 > .yps-sub-item.is-col-start::before {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout .yps-sub-item.is-col-start {
	box-shadow: none !important;
}

/* Flyout title — the rail shows no labels in icons mode, so name the parent there */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-flyout-title {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-flyout-title {
	display: block;
	column-span: all;
	margin: 0 0 6px;
	padding: 4px 14px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--yps-rail-ink-soft) !important;
	box-shadow:
		inset 0 -1px 0 var(--yps-engrave-dark),
		inset 0 -2px 0 var(--yps-engrave-light);
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout .yps-sub-item {
	margin: 0;
	list-style: none;
	width: 100%;
	box-sizing: border-box;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout .yps-sub-item + .yps-sub-item {
	box-shadow:
		inset 0 1px 0 var(--yps-engrave-dark),
		inset 0 2px 0 var(--yps-engrave-light);
}

/*
 * PHP paints <div.yps-sub-row><a.yps-sub-link>. The row is a flex container;
 * without flex:1 the link shrink-wraps to the label and hover bg stops early.
 */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout .yps-sub-link {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	gap: 8px;
	padding: 9px 14px;
	margin: 0 6px;
	border-radius: 8px;
	color: var(--yps-rail-ink) !important;
	text-decoration: none;
	font-size: 13px;
	line-height: 1.35;
	opacity: 1;
	transition: background 0.12s ease, color 0.12s ease;
}

/* Submenu icons — same dashicon language as dashboard card modal tiles. */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-sub-link .yps-wp-icon-proxy {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin: 0;
	opacity: 0.92;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-sub-link .yps-wp-icon-proxy .dashicons,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-sub-link .yps-wp-icon-proxy .wp-menu-image {
	width: 18px !important;
	height: 18px !important;
	font-size: 18px !important;
	line-height: 18px !important;
	color: var(--yps-rail-icon) !important;
	fill: currentColor !important;
	-webkit-text-fill-color: currentColor !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-sub-link:hover .yps-wp-icon-proxy .dashicons,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-sub-link.is-active .yps-wp-icon-proxy .dashicons {
	color: var(--yps-rail-icon-hover) !important;
	-webkit-text-fill-color: currentColor !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-sub-link .yps-wp-icon-proxy img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	display: block;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout .yps-sub-link:hover,
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout .yps-sub-link:focus-visible {
	background: var(--yps-rail-row-bg-strong);
	outline: none;
	color: var(--yps-rail-ink-strong) !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout .yps-sub-link.is-active {
	background: color-mix(in srgb, var(--ysh-brand, var(--yp-primary, #eda934)) 18%, transparent);
	color: var(--yps-rail-ink-strong) !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout .yps-text {
	position: static !important;
	display: inline !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	clip: auto !important;
	overflow: visible !important;
	white-space: normal !important;
	background: transparent;
	box-shadow: none;
	transform: none;
	font-size: inherit;
	font-weight: 500;
	opacity: 1;
	color: inherit !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout .yps-sub-row {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-width: 0;
	border: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	box-sizing: border-box;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout .yps-nested-expander {
	opacity: 0.65;
	margin-inline-end: 6px;
	color: var(--yps-rail-ink-soft) !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout .yps-sub--nested {
	display: block;
	margin: 0 0 4px 12px;
	padding: 0;
	border: 0;
	list-style: none;
	box-shadow:
		inset 2px 0 0 var(--yps-engrave-dark),
		inset 3px 0 0 var(--yps-engrave-light);
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout .yps-sub--nested[hidden] {
	display: none;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-flyout-open > .yps-row {
	background: var(--yps-rail-row-bg) !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-hidden) #yps-sidebar .yps-item.is-flyout-open > .yps-row .yps-link {
	background: transparent !important;
}

/* ⋯ more — cycles pages inside the rail (replaces visible items; no side panel) */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-nav-more-wrap {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px 8px;
	margin-top: auto;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-nav-more-wrap[hidden] {
	display: none !important;
}

/* When More is visible it owns the bottom push; edit chrome sits under it. */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-nav-more-wrap:not([hidden]) + .yps-layout-edit-chrome {
	margin-top: 0;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-nav-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, background 0.15s ease;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-nav-more {
	width: 44px;
	height: 44px;
	min-height: 44px;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-nav-more:hover {
	opacity: 1;
	background: var(--yps-rail-row-bg-strong);
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-nav-more .yps-nav-more-dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-nav-more .yps-nav-more-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--yps-rail-ink-source, #fff) 28%, transparent);
	transition: background 0.15s ease, transform 0.15s ease;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-nav-more .yps-nav-more-dot.is-active {
	background: var(--ysh-brand, var(--yp-primary, #eda934));
	transform: scale(1.2);
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-nav-more .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
	line-height: 1;
}

/* Parked overflow entries are storage only — never visible in any mode. */
body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-nav-hold {
	display: none !important;
}

/* Header panel toggle (collapse when expanded) */
body.yoo-focus.yps-nav-enhanced .yps-rail-mode--header {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	flex: 0 0 auto;
	opacity: 0.72;
	visibility: visible !important;
	position: relative;
	z-index: 6;
	transition: background 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons .yps-rail-mode--header {
	display: none !important;
}

/* Rail expand control — first item at top of closed sidebar */
body.yoo-focus.yps-nav-enhanced .yps-rail-mode--rail {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	flex: 0 0 auto;
	opacity: 0.85;
	transition: background 0.15s ease, opacity 0.15s ease;
}

body.yoo-focus.yps-nav-enhanced .yps-rail-mode--rail:hover,
body.yoo-focus.yps-nav-enhanced .yps-rail-mode--rail:focus-visible {
	opacity: 1;
	background: var(--yps-rail-row-bg-strong);
	outline: none;
}

body.yoo-focus.yps-nav-enhanced:not(.yps-nav-mode-icons) .yps-rail-mode--rail {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced .yps-rail-mode--rail .lucide,
body.yoo-focus.yps-nav-enhanced .yps-rail-mode--header .lucide {
	display: block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

body.yoo-focus.yps-nav-enhanced .yps-rail-mode--header:hover,
body.yoo-focus.yps-nav-enhanced .yps-rail-mode--header:focus-visible {
	opacity: 0.95;
	background: var(--yps-rail-row-bg-strong);
	outline: none;
}

body.yoo-focus:not(.yps-nav-enhanced) .yps-rail-mode {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-header-wrapper {
	box-sizing: border-box;
	/* Same engraved carve as sidebar brand strip — continuous across the seam */
	box-shadow: var(--yps-chrome-engrave) !important;
}

/* One continuous chrome edge — do not stack breadcrumbs border-top under it */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) .yp-breadcrumbs-bar {
	border-top: none !important;
}

/*
 * The breadcrumbs bar sits inside .yp-header-wrapper, so the wrapper's carve
 * lands below it and nothing marks the header/breadcrumbs seam. Carve the
 * header row's own bottom edge instead: it is the exact same declaration and
 * the exact same height as the sidebar brand strip, so the two lines meet.
 */
body.yoo-focus.yps-nav-enhanced:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yoo-admin-header {
	box-shadow: var(--yps-chrome-engrave) !important;
}

/* ---------------------------------------------------------------------------
 * Mobile / tablet: the rail becomes an off-canvas drawer (mode "hidden").
 * The list itself is NOT restyled here — mode "hidden" is folded into the
 * docked-rail selectors above, so rows, groups, engraved dividers, density and
 * pagination are literally the same rules as the desktop rail. Only the shell
 * differs: off-canvas panel, close button, safe areas, accordion submenus.
 * ------------------------------------------------------------------------ */
@media (max-width: 960px) {
	body.yoo-focus.yps-nav-enhanced {
		--yps-drawer-w: min(86vw, 320px);
		--yps-chrome-engrave:
			inset 0 -1px 0 var(--yps-engrave-dark),
			inset 0 -2px 0 var(--yps-engrave-light);
	}

	body.yoo-focus.yps-nav-enhanced #wpwrap {
		padding-inline-start: 0 !important;
	}

	/*
	 * The server paints the stored desktop mode (expanded/icons), which docks
	 * the rail on screen. On a phone that means the drawer is briefly visible
	 * before JS switches to hidden mode. Keep it off-canvas here no matter what
	 * mode class the body carries — only .is-open brings it in.
	 */
	body.yoo-focus.yps-nav-enhanced #yps-sidebar.yps-sidebar {
		transform: translateX(-100%) !important;
	}

	[dir='rtl'] body.yoo-focus.yps-nav-enhanced #yps-sidebar.yps-sidebar {
		transform: translateX(100%) !important;
	}

	body.yoo-focus.yps-nav-enhanced #yps-sidebar.yps-sidebar.is-open,
	[dir='rtl'] body.yoo-focus.yps-nav-enhanced #yps-sidebar.yps-sidebar.is-open {
		transform: translateX(0) !important;
	}

	body.yoo-focus.yps-nav-enhanced #yps-toggle-btn {
		display: inline-flex !important;
	}

	/* Rail-mode controls are desktop-only; the drawer has its own close button. */
	body.yoo-focus.yps-nav-enhanced .yps-rail-mode,
	body.yoo-focus.yps-nav-enhanced .yps-rail-mode--header,
	body.yoo-focus.yps-nav-enhanced .yps-rail-mode--rail,
	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-flyout-title {
		display: none !important;
	}

	/* Drawer shell */
	body.yoo-focus.yps-nav-enhanced #yps-sidebar.yps-sidebar {
		width: var(--yps-drawer-w) !important;
		max-width: var(--yps-drawer-w) !important;
		height: 100vh !important;
		height: 100dvh !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: hidden !important;
		padding-top: env(safe-area-inset-top, 0px) !important;
		padding-bottom: 0 !important;
		box-sizing: border-box !important;
		background: var(--yps-rail-bg) !important;
		color: var(--yps-rail-ink) !important;
		border-inline-end: 0 !important;
		border-radius: 0 !important;
		box-shadow: 12px 0 32px rgba(0, 0, 0, 0.38) !important;
		z-index: 100050;
		transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
	}

	[dir='rtl'] body.yoo-focus.yps-nav-enhanced #yps-sidebar.yps-sidebar {
		box-shadow: -12px 0 32px rgba(0, 0, 0, 0.38) !important;
	}

	body.yoo-focus.yps-nav-enhanced .yps-overlay {
		background: rgba(0, 0, 0, 0.5);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		z-index: 100040;
	}

	/* Brand strip: logo start, close button end, same carve as the docked rail. */
	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-side-header {
		flex: 0 0 auto;
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		width: 100%;
		min-height: var(--yps-chrome-h, 54px);
		padding: 0 6px 0 14px;
		box-sizing: border-box;
		border-bottom: 0;
		background: transparent;
		box-shadow: var(--yps-chrome-engrave);
	}

	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-shell-brand {
		justify-content: flex-start;
		max-height: calc(var(--yps-chrome-h, 54px) - 12px);
	}

	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-shell-brand .yp-logo {
		max-height: calc(var(--yps-chrome-h, 54px) - 12px) !important;
	}

	/* Base hides it until the strip is hovered — useless on touch, always show. */
	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-close {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		position: static !important;
		inset: auto !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		padding: 0;
		border-radius: 10px;
		background: transparent;
		color: var(--yps-rail-icon) !important;
		pointer-events: auto !important;
	}

	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-close:hover,
	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-close:focus-visible {
		background: var(--yps-rail-row-bg-strong);
		color: var(--yps-rail-icon-hover) !important;
		outline: none;
	}

	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-close .dashicons {
		font-size: 22px;
		width: 22px;
		height: 22px;
		line-height: 22px;
	}

	/*
	 * The rail pages to fit, same as desktop, so this normally never scrolls.
	 * `auto` only kicks in when an open accordion makes a page taller.
	 */
	body.yoo-focus.yps-nav-enhanced.yps-nav-mode-hidden #yps-sidebar .yps-nav {
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	/* Submenus open inline — flyout panels do not fit beside a drawer. */
	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-item.has-sub > .yps-sub {
		position: static !important;
		inset: auto !important;
		columns: auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		max-height: none !important;
		margin: 2px 0 6px 26px;
		padding: 2px 0;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow:
			inset 2px 0 0 var(--yps-engrave-dark),
			inset 3px 0 0 var(--yps-engrave-light) !important;
		overflow: visible !important;
	}

	[dir='rtl'] body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-item.has-sub > .yps-sub {
		margin: 2px 26px 6px 0;
		box-shadow:
			inset -2px 0 0 var(--yps-engrave-dark),
			inset -3px 0 0 var(--yps-engrave-light) !important;
	}

	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-sub[hidden] {
		display: none !important;
	}

	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-sub-item {
		margin: 0;
		box-shadow: none !important;
	}

	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-sub-link {
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
		gap: 8px;
		margin: 0 8px;
		padding: 8px 12px;
		border-radius: 8px;
		font-size: 13px;
		line-height: 1.35;
		color: var(--yps-rail-ink) !important;
	}

	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-sub-link.is-active {
		background: color-mix(in srgb, var(--ysh-brand, var(--yp-primary, #eda934)) 18%, transparent) !important;
		color: var(--yps-rail-ink-strong) !important;
	}

	/* Accordion chevron points down/up, not sideways like the flyout rail. */
	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-expander .dashicons {
		transform: none !important;
	}

	body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-item.is-open > .yps-row .yps-expander .dashicons {
		transform: rotate(180deg) !important;
	}

	/* Clear of the home indicator. */
	body.yoo-focus.yps-nav-enhanced.yps-nav-mode-hidden #yps-sidebar .yps-focus-toggle {
		padding-bottom: env(safe-area-inset-bottom, 0px) !important;
	}
}

/* ---- Live layout edit chrome ---- */
body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-group__icon {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode:is(.yps-nav-mode-expanded, .yps-nav-mode-icons, .yps-nav-mode-hidden) #yps-sidebar .yps-item.has-sub > .yps-sub.yps-sub--edit {
	display: block !important;
	position: static !important;
	inset: auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	max-height: none !important;
	margin: 2px 0 8px 18px;
	padding: 2px 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow:
		inset 2px 0 0 var(--yps-engrave-dark),
		inset 3px 0 0 var(--yps-engrave-light) !important;
	overflow: visible !important;
	columns: auto !important;
}

[dir='rtl'] body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-item.has-sub > .yps-sub.yps-sub--edit {
	margin: 2px 18px 8px 0;
	box-shadow:
		inset -2px 0 0 var(--yps-engrave-dark),
		inset -3px 0 0 var(--yps-engrave-light) !important;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-sub.yps-sub--edit .yps-sub-row,
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-sub.yps-sub--edit > .yps-sub-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-inline: 4px;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-sub.yps-sub--edit .yps-sub-link {
	pointer-events: none;
	flex: 1 1 auto;
	min-width: 0;
}

/* Desktop: edit submenu inside the side flyout (opened via chevron). */
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode:is(.yps-nav-mode-expanded, .yps-nav-mode-icons) #yps-sidebar .yps-sub.yps-sub--flyout {
	min-width: 260px;
	max-width: min(380px, calc(100vw - var(--yps-rail-w, 220px) - 24px));
	columns: auto !important;
	padding: 8px 0 !important;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-sub.yps-sub--flyout .yps-sub-row,
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-sub.yps-sub--flyout > .yps-sub-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	box-sizing: border-box;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-sub.yps-sub--flyout .yps-sub-link {
	pointer-events: none;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding-block: 8px !important;
	padding-inline: 4px 8px !important;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-drag--sub {
	flex: 0 0 auto;
	margin-inline: 2px 0;
	pointer-events: auto !important;
	cursor: grab;
	z-index: 2;
	position: relative;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-chrome {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: auto;
}

/* Edit menu is expanded-rail only. */
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-layout-edit-chrome {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: var(--yps-foot-h, 48px);
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow:
		inset 0 1px 0 var(--yps-engrave-dark),
		inset 0 2px 0 var(--yps-engrave-light);
	color: var(--yps-rail-ink) !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	text-align: start;
	box-sizing: border-box;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-toggle .dashicons {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	font-size: 20px;
	line-height: 22px;
	color: var(--yps-rail-icon) !important;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-toggle:hover,
body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-toggle:focus-visible {
	outline: none;
	background: var(--yps-rail-row-bg-strong, color-mix(in srgb, var(--yps-rail-ink-source, #fff) 8%, transparent));
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-toggle:hover .dashicons,
body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-toggle.is-active .dashicons {
	color: var(--yps-rail-icon-hover) !important;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-toggle.is-active {
	color: var(--yps-rail-ink-strong) !important;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-layout-edit-toggle {
	justify-content: center;
	padding: 0;
	gap: 0;
}

body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-layout-edit-toggle__text,
body.yoo-focus.yps-nav-enhanced.yps-nav-mode-icons #yps-sidebar .yps-layout-edit-action__text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-bar {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 8px 4px;
	box-shadow:
		inset 0 1px 0 var(--yps-engrave-dark),
		inset 0 2px 0 var(--yps-engrave-light);
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-bar[hidden] {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-action {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 36px;
	margin: 0;
	padding: 0 10px;
	border: 1px dashed color-mix(in srgb, var(--yps-rail-ink-source, #fff) 28%, transparent);
	border-radius: 8px;
	background: transparent;
	color: var(--yps-rail-ink) !important;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	box-sizing: border-box;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-action--muted {
	border-style: solid;
	border-color: transparent;
	opacity: 0.85;
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-action:hover,
body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-action:focus-visible {
	outline: none;
	background: var(--yps-rail-row-bg-strong, color-mix(in srgb, var(--yps-rail-ink-source, #fff) 8%, transparent));
}

body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-edit-action .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
	color: var(--yps-rail-icon) !important;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-nav {
	overflow-y: auto !important;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-group {
	outline: 1px dashed color-mix(in srgb, var(--ysh-brand, var(--yp-primary, #eda934)) 35%, transparent);
	outline-offset: -1px;
	border-radius: 10px;
	margin: 4px 4px 8px;
	padding-bottom: 4px;
	background: color-mix(in srgb, var(--yps-rail-ink-source, #fff) 3%, transparent);
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-group__label {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-inline-start: 4px;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-drag {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin: 0;
	margin-inline: 6px 4px;
	padding: 0;
	cursor: grab;
	opacity: 0.55;
	color: var(--yps-rail-icon);
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-drag:active {
	cursor: grabbing;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-drag .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-inline-end: 4px;
}

/* Hide the real row while a clone helper follows the pointer (prevents ghost icons). */
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-sort-source,
body.yoo-focus.yps-nav-enhanced.yps-layout-sorting #yps-sidebar .yps-layout-sort-source {
	visibility: hidden !important;
	pointer-events: none !important;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-sort-helper,
body.yoo-focus.yps-nav-enhanced #yps-sidebar .yps-layout-sort-helper,
body.yoo-focus.yps-nav-enhanced .yps-layout-sort-helper {
	z-index: 100450 !important;
	list-style: none !important;
	margin: 0 !important;
	pointer-events: none !important;
	border-radius: 10px;
	background: var(--yps-rail-bg, #1e1e1e) !important;
	color: var(--yps-rail-ink, #f0f0f0) !important;
	box-shadow:
		0 12px 28px rgba(0, 0, 0, 0.32),
		inset 0 0 0 1px color-mix(in srgb, var(--yps-engrave-light, #fff) 55%, transparent);
	opacity: 0.98;
}

body.yoo-focus.yps-nav-enhanced .yps-layout-sort-helper .yps-sub-row,
body.yoo-focus.yps-nav-enhanced .yps-layout-sort-helper.yps-sub-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	box-sizing: border-box;
}

body.yoo-focus.yps-nav-enhanced .yps-layout-sort-helper .yps-sub-link,
body.yoo-focus.yps-nav-enhanced .yps-layout-sort-helper .yps-link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: inherit !important;
	text-decoration: none !important;
}

body.yoo-focus.yps-nav-enhanced .yps-layout-sort-helper .dashicons {
	color: var(--yps-rail-icon, #cfcfcf) !important;
}

body.yoo-focus.yps-nav-enhanced .yps-layout-sort-helper .yps-layout-icon-btn,
body.yoo-focus.yps-nav-enhanced .yps-layout-sort-helper .yps-layout-delete-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0 2px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--yps-rail-icon, #cfcfcf) !important;
	opacity: 0.75;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-sub.yps-sub--flyout.yps-sub--sorting {
	overflow: visible !important;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-sort-helper .yps-layout-icon-btn,
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-sort-helper .yps-layout-delete-btn,
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-sort-helper .yps-expander,
body.yoo-focus.yps-nav-enhanced .yps-layout-sort-helper .yps-layout-icon-btn,
body.yoo-focus.yps-nav-enhanced .yps-layout-sort-helper .yps-layout-delete-btn,
body.yoo-focus.yps-nav-enhanced .yps-layout-sort-helper .yps-expander {
	pointer-events: none !important;
}

body.yps-layout-sorting .yps-nav-tip {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-group__text--editable {
	outline: none;
	border-radius: 4px;
	padding: 1px 4px;
	min-width: 2ch;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-group__text--editable:focus {
	background: color-mix(in srgb, var(--ysh-brand, var(--yp-primary, #eda934)) 16%, transparent);
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar a.yps-link,
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar a.yps-sub-link {
	pointer-events: none;
	cursor: default;
}

/* Chevron opens the side flyout for submenu editing. */
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-expander {
	pointer-events: auto;
	cursor: pointer;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-item__text--editable,
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-group__text--editable {
	pointer-events: auto !important;
	cursor: text;
	outline: none;
	border-radius: 4px;
	padding: 1px 4px;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-item__text--editable:focus,
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-group__text--editable:focus {
	background: color-mix(in srgb, var(--ysh-brand, var(--yp-primary, #eda934)) 16%, transparent);
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-icon-btn,
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-delete-btn {
	pointer-events: auto !important;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0 2px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--yps-rail-icon);
	cursor: pointer;
	opacity: 0.7;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-icon-btn:hover,
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-delete-btn:hover {
	opacity: 1;
	background: var(--yps-rail-row-bg-strong, color-mix(in srgb, var(--yps-rail-ink-source, #fff) 8%, transparent));
	color: var(--yps-rail-icon-hover);
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-delete-btn:hover {
	color: #e35d5d;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-icon-btn .dashicons,
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-delete-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
}

.yps-layout-icon-modal {
	position: fixed;
	inset: 0;
	z-index: 100500;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	padding: 16px;
	box-sizing: border-box;
}

.yps-layout-icon-modal__panel {
	width: min(420px, 100%);
	max-height: min(70vh, 520px);
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	background: var(--yps-rail-bg, #1e1e1e);
	color: var(--yps-rail-ink, #f0f0f0);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.yps-layout-icon-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid color-mix(in srgb, var(--yps-rail-ink-source, #fff) 12%, transparent);
}

.yps-layout-icon-modal__close {
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	padding: 4px;
}

.yps-layout-icon-modal__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
	gap: 8px;
	padding: 14px 16px;
	overflow: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--yps-rail-ink-source, #fff) 22%, transparent) transparent;
}

/* Apple-like thin scrollbar (no arrow buttons). */
.yps-layout-icon-modal__grid::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.yps-layout-icon-modal__grid::-webkit-scrollbar-track {
	background: transparent;
}

.yps-layout-icon-modal__grid::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--yps-rail-ink-source, #fff) 22%, transparent);
	border-radius: 999px;
	border: 1px solid transparent;
	background-clip: padding-box;
}

.yps-layout-icon-modal__grid::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--yps-rail-ink-source, #fff) 34%, transparent);
	background-clip: padding-box;
}

.yps-layout-icon-modal__grid::-webkit-scrollbar-button,
.yps-layout-icon-modal__grid::-webkit-scrollbar-corner {
	display: none;
	width: 0;
	height: 0;
}

.yps-layout-icon-modal__pick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid color-mix(in srgb, var(--yps-rail-ink-source, #fff) 14%, transparent);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.yps-layout-icon-modal__pick:hover {
	background: color-mix(in srgb, var(--ysh-brand, var(--yp-primary, #eda934)) 18%, transparent);
}

.yps-layout-icon-modal__foot {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid color-mix(in srgb, var(--yps-rail-ink-source, #fff) 12%, transparent);
}

.yps-layout-icon-modal__clear,
.yps-layout-icon-modal__cancel {
	border: 0;
	border-radius: 8px;
	padding: 8px 12px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
}

.yps-layout-icon-modal__cancel {
	background: color-mix(in srgb, var(--yps-rail-ink-source, #fff) 12%, transparent);
	color: inherit;
}

.yps-layout-icon-modal__clear {
	background: transparent;
	color: inherit;
	opacity: 0.85;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-add-inline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: calc(100% - 16px);
	min-height: 40px;
	margin: 8px;
	padding: 0 12px;
	border: 1px dashed color-mix(in srgb, var(--ysh-brand, var(--yp-primary, #eda934)) 45%, transparent);
	border-radius: 10px;
	background: transparent;
	color: var(--yps-rail-ink) !important;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	box-sizing: border-box;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-add-inline:hover {
	background: color-mix(in srgb, var(--ysh-brand, var(--yp-primary, #eda934)) 12%, transparent);
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-placeholder {
	border: 1px dashed color-mix(in srgb, var(--ysh-brand, var(--yp-primary, #eda934)) 55%, transparent);
	border-radius: 8px;
	background: color-mix(in srgb, var(--ysh-brand, var(--yp-primary, #eda934)) 10%, transparent);
	margin: 4px 6px;
	min-height: 36px;
	visibility: visible !important;
	box-sizing: border-box;
}

/* Submenu drop target: full-width row (not a square cell). */
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-sub .yps-layout-placeholder,
body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-sub.yps-sub--flyout .yps-layout-placeholder {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	height: 40px !important;
	min-height: 40px !important;
	max-height: 40px !important;
	margin: 4px 10px !important;
	flex: 0 0 auto !important;
	float: none !important;
	clear: both !important;
	column-span: all;
	grid-column: 1 / -1;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-layout-placeholder--group {
	min-height: 56px;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-nav-more-wrap {
	display: none !important;
}

body.yoo-focus.yps-nav-enhanced.yps-layout-edit-mode #yps-sidebar .yps-focus-toggle {
	opacity: 0.45;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	body.yoo-focus.yps-nav-enhanced #yps-sidebar {
		transition: none !important;
	}
}