/* Modernize WordPress: a softer, rounder, smoother WordPress admin.
 *
 * The look: one soft blue-grey surface for the left menu, top bar and page; white rounded cards
 * with soft shadows floating on it; menu icons on little white tiles (the open section's tile in
 * a blue gradient); pill buttons and segmented filters; gentle motion (menus ease in, pages fade
 * in, hovers glide).
 *
 * Layers, switched on with body classes by includes/modules/modern-admin.php:
 *   .ndet-modern       every admin screen: frame and canvas.
 *   .ndet-modern-ui    WordPress's own screens: buttons, fields, cards, tables, notices, tabs, ACF.
 *   .ndet-modern-meta  block editor screens: only the boxes under the editor (ACF and the like).
 *   .ndet-modern-tabs  screens with the phone tab bar (everything but the block editor).
 *   .ndet-modern-brand Neo Tools, Neo Pulse, Plugin Updates: the frame only, page untouched.
 *   .ndet-modern-frame plugins' own pages: the frame, plus WordPress's notices at the top.
 *
 * Sizes stay WordPress's own (40px buttons and fields in 7.x). The accent is one modern blue on
 * every screen, whichever colour scheme a user picked; WordPress's own theme-colour variables are
 * set to it too, so the block editor and the scheme's links and buttons match. The block editor's
 * content frame is styled from editor.css (its own iframe). */

body.ndet-modern {
	--ndet-ma-frame: #eef2f7;
	--ndet-ma-frame-hover: rgba(255, 255, 255, 0.65);
	--ndet-ma-segment: #e2e8f0;
	--ndet-ma-lime: #84bd00;
	--ndet-ma-lime-text: #4d7c0f;
	--ndet-ma-canvas: #eef2f7;
	--ndet-ma-surface: #fff;
	--ndet-ma-subtle: #f8fafc;
	--ndet-ma-border: #e8edf3;
	--ndet-ma-border-strong: #d5dde7;
	--ndet-ma-text: #0f172a;
	--ndet-ma-text-2: #334155;
	--ndet-ma-muted: #64748b;
	--ndet-ma-hover: #f1f5f9;
	--ndet-ma-accent: #2563eb;
	--ndet-ma-accent-rgb: 37, 99, 235;
	--ndet-ma-accent-dark: #1d4ed8;
	--ndet-ma-accent-darker: #1e40af;
	--ndet-ma-accent-grad: linear-gradient(135deg, #3b82f6, #2563eb);
	--ndet-ma-accent-grad-hover: linear-gradient(135deg, #2563eb, #1d4ed8);
	--ndet-ma-accent-glow: 0 8px 18px rgba(37, 99, 235, 0.3);
	--ndet-ma-accent-soft: #bfdbfe;
	--ndet-ma-tint: rgba(var(--ndet-ma-accent-rgb), 0.08);
	--ndet-ma-ring: 0 0 0 4px rgba(var(--ndet-ma-accent-rgb), 0.16);
	--ndet-ma-r-canvas: 22px;
	--ndet-ma-r-card: 20px;
	--ndet-ma-r-pop: 16px;
	--ndet-ma-r-item: 14px;
	--ndet-ma-r-field: 12px;
	--ndet-ma-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
	--ndet-ma-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
	--ndet-ma-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.04), 0 12px 28px rgba(15, 23, 42, 0.08);
	--ndet-ma-shadow-pop: 0 16px 40px rgba(15, 23, 42, 0.14), 0 4px 10px rgba(15, 23, 42, 0.06);
	background: var(--ndet-ma-frame);
}

/* WordPress's theme colour (block editor, components, the colour scheme's variables). Two classes
 * so it wins over body.admin-color-* from the scheme. */
body.ndet-modern.wp-admin {
	--wp-admin-theme-color: #2563eb;
	--wp-admin-theme-color--rgb: 37, 99, 235;
	--wp-admin-theme-color-darker-10: #1d4ed8;
	--wp-admin-theme-color-darker-10--rgb: 29, 78, 216;
	--wp-admin-theme-color-darker-20: #1e40af;
	--wp-admin-theme-color-darker-20--rgb: 30, 64, 175;
}

/* The colour scheme's hard-coded blue in the common places: links, plain buttons, Add New.
 * :where() keeps these at the scheme's own strength, so plugins that colour their links and
 * buttons still win. */
:where(body.ndet-modern:not(.ndet-modern-brand)) a,
:where(body.ndet-modern:not(.ndet-modern-brand)).wp-core-ui .button-link {
	color: var(--ndet-ma-accent);
}
:where(body.ndet-modern:not(.ndet-modern-brand)) a:is(:hover, :active, :focus),
:where(body.ndet-modern:not(.ndet-modern-brand)).wp-core-ui .button-link:is(:hover, :active, :focus) {
	color: var(--ndet-ma-accent-darker);
}
:where(body.ndet-modern:not(.ndet-modern-brand)).wp-core-ui :is(.button, .button-secondary) {
	color: var(--ndet-ma-accent);
	border-color: var(--ndet-ma-accent);
}
:where(body.ndet-modern:not(.ndet-modern-brand)).wp-core-ui :is(.button, .button-secondary):is(:hover, .hover) {
	color: var(--ndet-ma-accent-darker);
	border-color: var(--ndet-ma-accent-darker);
}
:where(body.ndet-modern:not(.ndet-modern-brand)) .wrap .page-title-action {
	color: var(--ndet-ma-accent);
	border-color: var(--ndet-ma-accent);
}
:where(body.ndet-modern:not(.ndet-modern-brand)).wp-core-ui .button-primary {
	background: var(--ndet-ma-accent);
	border-color: var(--ndet-ma-accent);
	color: #fff;
}
:where(body.ndet-modern:not(.ndet-modern-brand)).wp-core-ui .button-primary:is(:hover, :focus) {
	background: var(--ndet-ma-accent-dark);
	border-color: var(--ndet-ma-accent-dark);
	color: #fff;
}
:where(body.ndet-modern:not(.ndet-modern-brand)).wp-core-ui .button-primary:active {
	background: var(--ndet-ma-accent-darker);
	border-color: var(--ndet-ma-accent-darker);
}
:where(body.ndet-modern:not(.ndet-modern-brand)) :is(.media-item .bar, .media-progress-bar div, .attachment.details .check) {
	background-color: var(--ndet-ma-accent);
}

/* No motion: pages appear as soon as they load, hovers change instantly, and scrolling is the
 * browser's own. Fades and slides from WordPress and plugins finish instantly too (a near-zero
 * duration rather than none, so scripts waiting for a fade to end still hear that it ended).
 * Loading spinners keep spinning. jQuery slides and scrolls are switched off in modern-desktop.js.
 * The one exception: menu groups slide open and shut (quick, and not for reduced-motion users). */
body.ndet-modern *,
body.ndet-modern *::before,
body.ndet-modern *::after {
	transition-delay: 0s !important;
	transition-duration: 0.01ms !important;
}
html:has(> body.ndet-modern),
body.ndet-modern {
	scroll-behavior: auto !important;
}

/* ------------------------------------------------------------------------
 * Frame and canvas
 * ---------------------------------------------------------------------- */

body.ndet-modern #wpwrap {
	background: var(--ndet-ma-frame);
}
/* The page sits straight on the same surface as the menu: the cards on it carry the shape. */
body.ndet-modern #wpcontent {
	background: var(--ndet-ma-canvas);
	box-sizing: border-box;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}
body.ndet-modern #wpfooter {
	color: var(--ndet-ma-muted);
}
/* The block editor fills the canvas with its own fixed layout: round its corner the same way. */
body.ndet-modern:not(.is-fullscreen-mode) .interface-interface-skeleton {
	border-top-left-radius: var(--ndet-ma-r-canvas);
	box-shadow: -1px -1px 0 var(--ndet-ma-border);
	overflow: hidden;
}
@media screen and (max-width: 782px) {
	body.ndet-modern:not(.is-fullscreen-mode) .interface-interface-skeleton {
		border-radius: 0;
		box-shadow: none;
	}
}

/* ------------------------------------------------------------------------
 * Frame: left menu
 * ---------------------------------------------------------------------- */

body.ndet-modern #adminmenuback,
body.ndet-modern #adminmenuwrap,
body.ndet-modern #adminmenu {
	background: var(--ndet-ma-frame);
}
body.ndet-modern #adminmenuwrap {
	padding-top: 10px;
}
body.ndet-modern #adminmenu {
	margin-top: 0;
}
/* li.menu-top lifts these over the colour scheme's "#adminmenu .wp-has-current-submenu.opensub .wp-submenu a". */
body.ndet-modern #adminmenu a,
body.ndet-modern #adminmenu li.menu-top .wp-submenu a {
	color: var(--ndet-ma-text-2);
}

/* Each section: a rounded row with its icon on a small white tile. The tile is drawn on the link
 * (::before) rather than on the icon, because plugin icons are recoloured with a filter that would
 * tint a tile drawn on the icon too. */
body.ndet-modern #adminmenu li.menu-top,
body.ndet-modern #adminmenu li.menu-top:hover,
body.ndet-modern #adminmenu li.opensub > a.menu-top,
body.ndet-modern #adminmenu li > a.menu-top:focus {
	background: transparent;
}
body.ndet-modern #adminmenu li.menu-top > a.menu-top {
	border-radius: var(--ndet-ma-r-item);
	box-sizing: border-box;
	isolation: isolate;
	margin: 1px 6px;
	min-height: 40px;
	position: relative;
}
body.ndet-modern #adminmenu li.menu-top > a.menu-top::before {
	background: var(--ndet-ma-surface);
	border-radius: 9px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.06);
	content: "";
	height: 28px;
	left: 6px;
	position: absolute;
	top: 6px;
	width: 28px;
	z-index: 0;
}
body.ndet-modern #adminmenu li.menu-top > a.menu-top div.wp-menu-image {
	align-items: center;
	display: flex;
	float: none;
	height: 28px;
	justify-content: center;
	left: 6px;
	position: absolute;
	top: 6px;
	width: 28px;
	z-index: 1;
}
body.ndet-modern #adminmenu div.wp-menu-image::before {
	color: #475569;
}
body.ndet-modern #adminmenu li.menu-top > a.menu-top div.wp-menu-image::before {
	font-size: 18px;
	height: 18px;
	line-height: 1;
	opacity: 1;
	padding: 0;
	width: 18px;
}
body.ndet-modern #adminmenu li.menu-top > a.menu-top div.wp-menu-image.svg {
	background-position: center;
	background-size: 18px auto;
}
body.ndet-modern #adminmenu li.menu-top > a.menu-top div.wp-menu-image img {
	max-height: 18px;
	max-width: 18px;
	padding: 0;
}
body.ndet-modern #adminmenu li.menu-top > a.menu-top .wp-menu-name {
	padding: 11px 8px 11px 44px;
}

/* Custom menu icons (plugins, post types with an uploaded icon). WordPress's own icons are a font;
 * custom ones are either an SVG (which WordPress repaints in its dark-menu greys) or an image.
 * modern-desktop.js looks at each one:
 * - one colour (made for WordPress's dark menu, often white): drawn through as a mask, so it takes
 *   exactly the colours of WordPress's own icons, grey, darker on hover, white on the blue tile;
 * - a full-colour logo (Hunter Douglas, Essential Addons…): shown as it is, and its tile stays
 *   white with a blue ring when you are in that section, so the logo still reads.
 * Until the script has looked (or if it can't), SVGs are drawn dark and images as they are.
 * Neo Digital's own icons are left alone. */
body.ndet-modern #adminmenu li.menu-top:not(#toplevel_page_ndet-settings, #toplevel_page_neo-pulse-wp, #toplevel_page_neo-mcp, #toplevel_page_ndus) div.wp-menu-image.svg {
	filter: brightness(0) opacity(0.6);
}
body.ndet-modern #adminmenu div.wp-menu-image.ndet-ma-mask {
	background-image: none !important;
	color: #475569;
	filter: none !important;
}
body.ndet-modern #adminmenu div.wp-menu-image.ndet-ma-mask::before,
body.ndet-modern #adminmenu div.wp-menu-image.ndet-ma-mask img {
	display: none;
}
body.ndet-modern #adminmenu div.wp-menu-image.ndet-ma-mask::after {
	background: currentColor;
	content: "";
	display: block;
	height: 18px;
	-webkit-mask: var(--ndet-ma-icon) center / contain no-repeat;
	mask: var(--ndet-ma-icon) center / contain no-repeat;
	width: 18px;
}
body.ndet-modern #adminmenu li.menu-top:is(:hover, .opensub) div.wp-menu-image.ndet-ma-mask,
body.ndet-modern #adminmenu li > a.menu-top:focus div.wp-menu-image.ndet-ma-mask {
	color: var(--ndet-ma-text);
}
body.ndet-modern #adminmenu li.menu-top:is(.current, .wp-has-current-submenu) div.wp-menu-image.ndet-ma-mask {
	color: #fff;
}
body.ndet-modern #adminmenu li.ndet-ma-icon-logo div.wp-menu-image img {
	border-radius: 3px;
	filter: none;
	opacity: 1;
}
body.ndet-modern #adminmenu li.menu-top.ndet-ma-icon-logo:is(.current, .wp-has-current-submenu) > a.menu-top::before {
	background: var(--ndet-ma-surface);
	box-shadow: inset 0 0 0 1.5px var(--ndet-ma-accent), 0 4px 10px rgba(var(--ndet-ma-accent-rgb), 0.25);
}

/* Hover: the row lightens and its tile lifts. */
body.ndet-modern #adminmenu li.menu-top:hover > a.menu-top,
body.ndet-modern #adminmenu li.opensub > a.menu-top,
body.ndet-modern #adminmenu li > a.menu-top:focus {
	background: var(--ndet-ma-frame-hover);
	color: var(--ndet-ma-text);
}
/* WordPress 7 draws a dark bar at the left edge of any menu link under the pointer or focused (and
 * focuses the first item when the phone menu opens): none here; a soft ring for keyboard focus. */
body.ndet-modern #adminmenu a:is(:hover, :focus),
body.ndet-modern.folded #adminmenu .wp-submenu-head:hover,
body.ndet-modern #adminmenu li.menu-top > a.menu-top:focus {
	box-shadow: none;
}
body.ndet-modern #adminmenu li.menu-top > a.menu-top:focus-visible {
	box-shadow: 0 0 0 2px var(--ndet-ma-accent-soft);
}
body.ndet-modern #adminmenu li.menu-top:is(:hover, .opensub) > a.menu-top::before,
body.ndet-modern #adminmenu li.menu-top > a.menu-top:focus::before {
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.1);
}
body.ndet-modern #adminmenu li.menu-top:hover div.wp-menu-image::before,
body.ndet-modern #adminmenu li.opensub div.wp-menu-image::before,
body.ndet-modern #adminmenu li > a.menu-top:focus div.wp-menu-image::before {
	color: var(--ndet-ma-text);
}

/* The section you are in: a raised white row, its tile in the blue gradient with a white icon.
 * :is() keeps these over Neo Tools' own green item and the colour scheme's current item. */
body.ndet-modern #adminmenu li.menu-top:is(.current, .wp-has-current-submenu) > a.menu-top,
body.ndet-modern #adminmenu li.menu-top:is(.current, .wp-has-current-submenu) > a.menu-top:is(:hover, :focus),
body.ndet-modern.neo-pulse-wp-admin-screen #adminmenu li#toplevel_page_neo-pulse-wp > a.menu-top {
	background: var(--ndet-ma-surface);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.07);
	color: var(--ndet-ma-text);
	font-weight: 600;
}
body.ndet-modern #adminmenu li.menu-top:is(.current, .wp-has-current-submenu) > a.menu-top::before {
	background: var(--ndet-ma-accent-grad);
	box-shadow: 0 4px 10px rgba(var(--ndet-ma-accent-rgb), 0.35);
}
body.ndet-modern #adminmenu li.menu-top:is(.current, .wp-has-current-submenu) div.wp-menu-image::before,
body.ndet-modern #adminmenu li.menu-top:is(.current, .wp-has-current-submenu):hover div.wp-menu-image::before,
body.ndet-modern #adminmenu li.menu-top:is(.current, .wp-has-current-submenu) > a.menu-top:focus div.wp-menu-image::before {
	color: #fff;
}
body.ndet-modern #adminmenu li.menu-top:not(#toplevel_page_ndet-settings, #toplevel_page_neo-pulse-wp, #toplevel_page_neo-mcp, #toplevel_page_ndus):is(.current, .wp-has-current-submenu) div.wp-menu-image.svg {
	filter: brightness(0) invert(1);
}
/* Neo Tools, Neo Pulse and Neo MCP keep their green: a lime tile while open. */
body.ndet-modern #adminmenu li.menu-top:is(#toplevel_page_ndet-settings, #toplevel_page_neo-pulse-wp, #toplevel_page_neo-mcp):is(.current, .wp-has-current-submenu) > a.menu-top::before,
body.ndet-modern.neo-pulse-wp-admin-screen #adminmenu li#toplevel_page_neo-pulse-wp > a.menu-top::before {
	background: var(--ndet-ma-lime);
	box-shadow: 0 4px 10px rgba(132, 189, 0, 0.35);
}
/* Neo Tools' and Neo MCP's icons are green and would vanish on the lime tile: white, like Neo Pulse's. */
body.ndet-modern #adminmenu li.menu-top:is(#toplevel_page_ndet-settings, #toplevel_page_neo-mcp):is(.current, .wp-has-current-submenu) div.wp-menu-image {
	filter: brightness(0) invert(1);
}
body.ndet-modern #adminmenu .wp-menu-arrow,
body.ndet-modern #adminmenu li.wp-has-current-submenu .wp-menu-arrow {
	display: none;
}
/* The little triangles pointing at the page. */
body.ndet-modern ul#adminmenu a.wp-has-current-submenu::after,
body.ndet-modern ul#adminmenu > li.current > a.current::after,
body.ndet-modern #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover::after,
body.ndet-modern #adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within::after {
	display: none;
}

/* Neo Pulse's sidebar sections (General, SEO, AI Tools) are coloured for WordPress's dark menu:
 * recolour them for the light frame. Its own rules use !important, hence these. */
body.ndet-modern #adminmenu .toplevel_page_neo-pulse-wp ul.wp-submenu li.neo-pulse-wp-menu-group-li > a {
	color: var(--ndet-ma-muted) !important;
	margin-left: 26px;
	padding-left: 12px;
}
body.ndet-modern #adminmenu .toplevel_page_neo-pulse-wp ul.wp-submenu li.neo-pulse-wp-menu-group-li:is(:hover, .neo-pulse-wp-menu-group-li--expanded, .neo-pulse-wp-menu-group-li--active) > a,
body.ndet-modern #adminmenu .toplevel_page_neo-pulse-wp ul.wp-submenu li.neo-pulse-wp-menu-group-li > a:focus {
	color: var(--ndet-ma-text) !important;
}
body.ndet-modern #adminmenu .toplevel_page_neo-pulse-wp ul.wp-submenu li.neo-pulse-wp-menu-group-li:is(.neo-pulse-wp-menu-group-li--expanded, .neo-pulse-wp-menu-group-li--active) > a::after {
	color: var(--ndet-ma-lime-text);
}
body.ndet-modern #adminmenu .toplevel_page_neo-pulse-wp .neo-pulse-wp-menu-nested {
	margin-left: 34px;
}
body.ndet-modern #adminmenu .toplevel_page_neo-pulse-wp .neo-pulse-wp-menu-nested li > a {
	color: var(--ndet-ma-text-2) !important;
	margin: 1px 8px 1px 0;
	padding: 5px 10px;
}
body.ndet-modern #adminmenu .toplevel_page_neo-pulse-wp .neo-pulse-wp-menu-nested li > a:is(:hover, :focus) {
	background: rgba(132, 189, 0, 0.16) !important;
	color: var(--ndet-ma-text) !important;
}
body.ndet-modern #adminmenu .toplevel_page_neo-pulse-wp .neo-pulse-wp-menu-nested li.current > a,
body.ndet-modern #adminmenu .toplevel_page_neo-pulse-wp .neo-pulse-wp-menu-nested li.current > a:is(:hover, :focus),
body.ndet-modern #adminmenu .toplevel_page_neo-pulse-wp ul.wp-submenu > li.neo-pulse-wp-menu-dashboard-li.current > a {
	color: var(--ndet-ma-lime-text) !important;
	font-weight: 600;
}
body.ndet-modern #adminmenu .toplevel_page_neo-pulse-wp ul.wp-submenu > li.neo-pulse-wp-menu-dashboard-li > a:is(:hover, :focus) {
	color: var(--ndet-ma-text);
}

/* Sub-items of the current section, listed under it and lined up with its name. */
body.ndet-modern #adminmenu .wp-has-current-submenu .wp-submenu,
body.ndet-modern #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
body.ndet-modern #adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
	background: transparent;
	box-shadow: none;
	padding: 4px 0 8px;
}
body.ndet-modern #adminmenu .wp-submenu a {
	border-radius: 10px;
	margin: 1px 8px 1px 38px;
	padding-left: 12px;
}
body.ndet-modern #adminmenu li.menu-top .wp-submenu a:hover,
body.ndet-modern #adminmenu li.menu-top .wp-submenu a:focus {
	background: var(--ndet-ma-frame-hover);
	color: var(--ndet-ma-text);
	box-shadow: none;
}
body.ndet-modern #adminmenu li.menu-top .wp-submenu li.current a,
body.ndet-modern #adminmenu li.menu-top .wp-submenu li.current a:hover,
body.ndet-modern #adminmenu li.menu-top .wp-submenu li.current a:focus {
	color: var(--ndet-ma-accent);
	font-weight: 600;
}

/* Fly-out sub-menus of the other sections: floating white panels. */
body.ndet-modern #adminmenu .wp-not-current-submenu .wp-submenu,
body.ndet-modern.folded #adminmenu .wp-has-current-submenu .wp-submenu {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border);
	border-radius: var(--ndet-ma-r-pop);
	box-shadow: var(--ndet-ma-shadow-pop);
	margin-left: 4px;
	padding: 6px 0;
}
body.ndet-modern #adminmenu .wp-not-current-submenu .wp-submenu a,
body.ndet-modern.folded #adminmenu .wp-submenu a {
	margin: 1px 6px;
	padding-left: 12px;
}
body.ndet-modern #adminmenu .wp-not-current-submenu .wp-submenu a:hover,
body.ndet-modern.folded #adminmenu .wp-submenu a:hover {
	background: var(--ndet-ma-hover);
}
body.ndet-modern #adminmenu .wp-submenu .wp-submenu-head {
	background: transparent;
	color: var(--ndet-ma-text);
	font-weight: 600;
	margin: 0 6px;
	padding-left: 12px;
}

/* The open section's sub-list fills a widened menu (WordPress keeps it at 160px), so names don't
 * wrap and third-level panels open beside the menu rather than over it. */
@media screen and (min-width: 961px) {
	body.ndet-modern:not(.folded) #adminmenu .wp-has-current-submenu .wp-submenu {
		width: auto;
	}
}

/* Elementor's third-level panels (Elementor → Editor ▸): drawn for WordPress's dark menu, so they
 * get the white fly-out look here. Its own variables drive the panel; the links need our sub-item
 * margins and colours undone. */
body.ndet-modern #adminmenu {
	--editor-one-flyout-menu-bg: var(--ndet-ma-surface);
	--editor-one-flyout-menu-bg-hover: var(--ndet-ma-hover);
	--editor-one-flyout-menu-text: var(--ndet-ma-text-2);
	--editor-one-flyout-menu-text-hover: var(--ndet-ma-text);
	--editor-one-flyout-menu-border-radius: var(--ndet-ma-r-pop);
	--editor-one-flyout-menu-box-shadow: var(--ndet-ma-shadow-pop);
	--editor-one-flyout-menu-padding-y: 6px;
}
body.ndet-modern #adminmenu li.menu-top .elementor-submenu-flyout {
	border: 1px solid var(--ndet-ma-border);
	border-radius: var(--ndet-ma-r-pop);
	margin-left: 4px;
}
body.ndet-modern #adminmenu li.menu-top .wp-submenu .elementor-submenu-flyout li a {
	background: transparent;
	border-radius: 10px;
	color: var(--ndet-ma-text-2);
	font-weight: 400;
	margin: 1px 6px;
	padding: 6px 12px;
}
body.ndet-modern #adminmenu li.menu-top .wp-submenu .elementor-submenu-flyout li a:is(:hover, :focus) {
	background: var(--ndet-ma-hover);
	color: var(--ndet-ma-text);
}
body.ndet-modern #adminmenu li.menu-top .wp-submenu .elementor-submenu-flyout li.current > a {
	color: var(--ndet-ma-accent);
	font-weight: 600;
}
/* Above the rows below it while open (the open section's sub-list is its own low layer). */
body.ndet-modern #adminmenu li.menu-top:has(.elementor-flyout-open, .elementor-submenu-flyout-visible) {
	z-index: 10002;
}

/* Group headings (modern-menu.php): small grey capitals, each a button that opens and closes its
 * group (modern-desktop.js; the rules hiding a shut group's items are printed by modern-menu.php).
 * A shut group shows how many items it holds and the item for the page you are on. Folded to
 * icons, there are no headings and every item shows. */
body.ndet-modern #adminmenu li.ndet-ma-menu-heading {
	cursor: default;
	height: auto;
	margin: 16px 0 4px;
	padding: 0;
}
body.ndet-modern #adminmenu li.ndet-ma-menu-heading div.separator {
	display: none;
}
body.ndet-modern #adminmenu li.ndet-ma-menu-heading:not(.has-toggle)::before {
	color: #94a3b8;
	content: var(--ndet-ma-heading, "");
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 22px;
	padding: 0 18px;
	text-transform: uppercase;
}
body.ndet-modern #adminmenu .ndet-ma-menu-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 10px;
	color: #94a3b8;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	gap: 6px;
	letter-spacing: 0.08em;
	line-height: 22px;
	margin: 0 6px;
	padding: 2px 8px 2px 12px;
	text-align: left;
	text-transform: uppercase;
	width: calc(100% - 12px);
}
body.ndet-modern #adminmenu .ndet-ma-menu-toggle:is(:hover, :focus-visible) {
	background: var(--ndet-ma-frame-hover);
	color: var(--ndet-ma-text-2);
	outline: none;
}
body.ndet-modern #adminmenu .ndet-ma-menu-toggle__count {
	background: var(--ndet-ma-segment);
	border-radius: 999px;
	color: var(--ndet-ma-muted);
	font-size: 10px;
	letter-spacing: 0;
	line-height: 16px;
	padding: 0 6px;
}
body.ndet-modern #adminmenu .ndet-ma-menu-toggle .dashicons {
	font-size: 14px;
	height: 14px;
	margin-left: auto;
	width: 14px;
}
body.ndet-modern #adminmenu .ndet-ma-menu-toggle[aria-expanded="true"] .dashicons {
	transform: rotate(180deg);
}
/* The arrow turns with the group's slide (modern-desktop.js): the one exception to "no motion". */
@media (prefers-reduced-motion: no-preference) {
	body.ndet-modern #adminmenu .ndet-ma-menu-toggle .dashicons {
		transition-duration: 0.18s !important;
		transition-property: transform !important;
		transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1) !important;
	}
}
body.ndet-modern #adminmenu .ndet-ma-menu-toggle[aria-expanded="true"] .ndet-ma-menu-toggle__count {
	display: none;
}
body.ndet-modern.folded #adminmenu li.ndet-ma-menu-heading {
	display: none;
}
@media screen and (max-width: 960px) and (min-width: 783px) {
	body.ndet-modern.auto-fold #adminmenu li.ndet-ma-menu-heading {
		display: none;
	}
	body.ndet-modern.auto-fold #adminmenu > li[class*="ndet-ma-menu-in-"] {
		display: list-item !important;
	}
}

/* Counters (updates, comments). */
body.ndet-modern #adminmenu .awaiting-mod,
body.ndet-modern #adminmenu .update-plugins {
	background: #f04438;
	color: #fff;
	font-weight: 600;
}

/* Collapse button and separators. */
body.ndet-modern #collapse-button {
	border-radius: var(--ndet-ma-r-item);
	color: var(--ndet-ma-muted);
}
body.ndet-modern #collapse-button:hover,
body.ndet-modern #collapse-button:focus {
	color: var(--ndet-ma-text);
}
body.ndet-modern #adminmenu div.separator {
	border-top: 1px solid var(--ndet-ma-border-strong);
	height: 0;
	margin: 8px 20px;
	opacity: 0.7;
}

/* Folded (icons only) and auto-folded menus: just the tiles. */
body.ndet-modern.folded #adminmenu li.menu-top > a.menu-top {
	margin: 3px 4px;
	min-height: 28px;
}
body.ndet-modern.folded #adminmenu li.menu-top > a.menu-top,
body.ndet-modern.folded #adminmenu li.menu-top > a.menu-top:is(:hover, :focus),
body.ndet-modern.folded #adminmenu li.menu-top:is(.current, .wp-has-current-submenu, .opensub) > a.menu-top {
	background: transparent;
	box-shadow: none;
}
body.ndet-modern.folded #adminmenu li.menu-top > a.menu-top::before,
body.ndet-modern.folded #adminmenu li.menu-top > a.menu-top div.wp-menu-image {
	left: 0;
	top: 0;
}
@media screen and (max-width: 960px) and (min-width: 783px) {
	body.ndet-modern.auto-fold #adminmenu li.menu-top > a.menu-top {
		margin: 3px 4px;
		min-height: 28px;
	}
	body.ndet-modern.auto-fold #adminmenu li.menu-top > a.menu-top,
	body.ndet-modern.auto-fold #adminmenu li.menu-top > a.menu-top:is(:hover, :focus),
	body.ndet-modern.auto-fold #adminmenu li.menu-top:is(.current, .wp-has-current-submenu, .opensub) > a.menu-top {
		background: transparent;
		box-shadow: none;
	}
	body.ndet-modern.auto-fold #adminmenu li.menu-top > a.menu-top::before,
	body.ndet-modern.auto-fold #adminmenu li.menu-top > a.menu-top div.wp-menu-image {
		left: 0;
		top: 0;
	}
	body.ndet-modern.auto-fold #adminmenu .wp-has-current-submenu .wp-submenu {
		background: var(--ndet-ma-surface);
		border: 1px solid var(--ndet-ma-border);
		border-radius: var(--ndet-ma-r-pop);
		box-shadow: var(--ndet-ma-shadow-pop);
		margin-left: 4px;
		padding: 6px 0;
	}
	body.ndet-modern.auto-fold #adminmenu .wp-submenu a {
		margin: 1px 6px;
		padding-left: 12px;
	}
}
/* The phone-size menu (opened from the Menu tab): roomier rows for fingers. */
@media screen and (max-width: 782px) {
	body.ndet-modern #adminmenu li.menu-top > a.menu-top {
		min-height: 48px;
	}
	body.ndet-modern #adminmenu li.menu-top > a.menu-top::before,
	body.ndet-modern #adminmenu li.menu-top > a.menu-top div.wp-menu-image {
		top: 10px;
	}
	body.ndet-modern #adminmenu li.menu-top > a.menu-top .wp-menu-name {
		padding: 14px 8px 14px 46px;
	}
}

/* A wider menu, set by dragging its right edge (modern-desktop.js; the width is saved per user
 * and printed by modern-admin.php as --ndet-ma-menu-w). Narrower screens keep WordPress's own
 * folding. */
@media screen and (min-width: 961px) {
	body.ndet-modern.ndet-ma-menu-sized:not(.folded) :is(#adminmenuback, #adminmenuwrap, #adminmenu) {
		width: var(--ndet-ma-menu-w, 160px);
	}
	body.ndet-modern.ndet-ma-menu-sized:not(.folded) :is(#wpcontent, #wpfooter) {
		margin-left: var(--ndet-ma-menu-w, 160px);
	}
	body.ndet-modern.ndet-ma-menu-sized:not(.folded) #adminmenu .wp-not-current-submenu .wp-submenu {
		left: var(--ndet-ma-menu-w, 160px);
	}
	body.ndet-modern.ndet-ma-menu-sized:not(.folded, .is-fullscreen-mode) .interface-interface-skeleton {
		left: var(--ndet-ma-menu-w, 160px);
	}

	/* The handle: an invisible strip along the menu's right edge (inside the menu, clear of the
	 * page), showing a small bar and a resize cursor on hover. */
	body.ndet-modern .ndet-ma-grip {
		bottom: 0;
		cursor: col-resize;
		left: calc(var(--ndet-ma-menu-w, 160px) - 6px);
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 32px);
		touch-action: none;
		width: 6px;
		z-index: 9991; /* over the menu (9990); fly-outs open beyond the strip */
	}
	body.ndet-modern:not(.ndet-ma-menu-sized) .ndet-ma-grip {
		left: 154px;
	}
	body.ndet-modern.folded .ndet-ma-grip {
		left: 32px;
		width: 4px;
	}
	body.ndet-modern.is-fullscreen-mode .ndet-ma-grip {
		display: none;
	}
	body.ndet-modern .ndet-ma-grip::after {
		background: var(--ndet-ma-border-strong);
		border-radius: 999px;
		content: "";
		height: 40px;
		left: 50%;
		opacity: 0;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 4px;
	}
	body.ndet-modern .ndet-ma-grip:is(:hover, :focus-visible)::after,
	body.ndet-modern.ndet-ma-resizing .ndet-ma-grip::after {
		opacity: 1;
	}
	body.ndet-modern.ndet-ma-resizing .ndet-ma-grip::after,
	body.ndet-modern .ndet-ma-grip:focus-visible::after {
		background: var(--ndet-ma-accent);
		height: 64px;
	}
	body.ndet-modern .ndet-ma-grip:focus-visible {
		outline: none;
	}
	/* While dragging: no text selection, no hover effects, the resize cursor everywhere. */
	body.ndet-modern.ndet-ma-resizing,
	body.ndet-modern.ndet-ma-resizing * {
		cursor: col-resize !important;
		user-select: none;
	}
	body.ndet-modern.ndet-ma-resizing :is(#adminmenu, #wpbody) {
		pointer-events: none;
	}
}
.ndet-ma-grip {
	display: none;
}
@media screen and (min-width: 961px) {
	body.ndet-modern .ndet-ma-grip {
		display: block;
	}
}

/* ------------------------------------------------------------------------
 * Frame: top admin bar
 * ---------------------------------------------------------------------- */

body.ndet-modern #wpadminbar {
	background: var(--ndet-ma-frame);
	color: var(--ndet-ma-text-2);
}
/* A crowded bar on a narrower screen would wrap onto a second row over the page (in plain
 * WordPress too). Keep it on one row: the left-hand items are trimmed at the edge instead;
 * dropdowns still open downwards. */
@media screen and (min-width: 783px) {
	body.ndet-modern #wpadminbar .quicklinks {
		display: flex;
	}
	body.ndet-modern #wpadminbar #wp-admin-bar-root-default {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		overflow-x: clip;
	}
	body.ndet-modern #wpadminbar #wp-admin-bar-root-default > li {
		flex: none;
	}
	body.ndet-modern #wpadminbar #wp-admin-bar-top-secondary {
		display: flex;
		flex: none;
		flex-direction: row-reverse;
		order: 2;
	}
}
body.ndet-modern #wpadminbar .ab-item,
body.ndet-modern #wpadminbar a.ab-item,
body.ndet-modern #wpadminbar > #wp-toolbar span.ab-label,
body.ndet-modern #wpadminbar > #wp-toolbar span.noticon {
	color: var(--ndet-ma-text-2);
}
body.ndet-modern #wpadminbar .ab-icon,
body.ndet-modern #wpadminbar .ab-icon::before,
body.ndet-modern #wpadminbar .ab-item::before,
body.ndet-modern #wpadminbar .ab-item::after {
	color: var(--ndet-ma-muted);
}
/* WordPress colours some toolbar icons with two-id rules (the phone-size menu, search and + New). */
body.ndet-modern #wpadminbar #wp-toolbar :is(.ab-icon, .ab-item)::before {
	color: var(--ndet-ma-muted);
}
body.ndet-modern #wpadminbar #wp-toolbar li:is(:hover, .hover) > .ab-item :is(.ab-icon)::before,
body.ndet-modern #wpadminbar #wp-toolbar li:is(:hover, .hover) > .ab-item::before {
	color: var(--ndet-ma-text);
}
/* Phone-size menu button: WordPress fills it dark while the menu is open. */
body.ndet-modern #wpadminbar #wp-admin-bar-menu-toggle > a.ab-item,
body.ndet-modern .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle > a.ab-item {
	background: transparent;
}
body.ndet-modern .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon::before {
	color: var(--ndet-ma-accent);
}
/* Hover: a rounded pill behind the item, drawn under its text. */
body.ndet-modern #wpadminbar .ab-top-menu > li {
	position: relative;
}
body.ndet-modern #wpadminbar .ab-top-menu > li::before {
	background: var(--ndet-ma-frame-hover);
	border-radius: 8px;
	content: "";
	inset: 3px 1px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}
body.ndet-modern #wpadminbar .ab-top-menu > li:is(:hover, .hover, :focus-within)::before {
	opacity: 1;
}
/* On wider screens every item is its own small white chip; hovering lifts it. */
@media screen and (min-width: 783px) {
	body.ndet-modern #wpadminbar .ab-top-menu > li::before {
		background: var(--ndet-ma-surface);
		border-radius: 999px;
		box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(15, 23, 42, 0.04);
		inset: 3px 2px;
		opacity: 1;
	}
	body.ndet-modern #wpadminbar .ab-top-menu > li:is(:hover, .hover, :focus-within)::before {
		box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.1);
	}
	body.ndet-modern #wpadminbar .ab-top-menu > li > .ab-item {
		padding: 0 12px;
	}
	body.ndet-modern #wpadminbar .ab-top-menu > li#wp-admin-bar-menu-toggle::before {
		content: none;
	}
}
body.ndet-modern #wpadminbar .ab-top-menu > li > .ab-item,
body.ndet-modern #wpadminbar .ab-top-menu > li:hover > .ab-item,
body.ndet-modern #wpadminbar .ab-top-menu > li.hover > .ab-item,
body.ndet-modern #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
body.ndet-modern #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
body.ndet-modern #wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
body.ndet-modern #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
	background: transparent;
	color: var(--ndet-ma-text);
}
body.ndet-modern #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
body.ndet-modern #wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
body.ndet-modern #wpadminbar:not(.mobile) li:hover .ab-icon::before,
body.ndet-modern #wpadminbar:not(.mobile) li:hover .ab-item::before,
body.ndet-modern #wpadminbar:not(.mobile) li:hover .ab-item::after,
body.ndet-modern #wpadminbar:not(.mobile) li:hover #adminbarsearch::before {
	color: var(--ndet-ma-text);
}
/* Plugins that write white text straight into their toolbar item, expecting a dark bar. Badges
 * with their own background colour keep their white text. */
body.ndet-modern #wpadminbar .ab-top-menu > li > .ab-item :is([style*="color: white"], [style*="color:white"], [style*="color: #fff"], [style*="color:#fff"], [style*="color: rgb(255, 255, 255)"]):is([style*="background-color: inherit"], [style*="background-color: transparent"], :not([style*="background"])) {
	color: var(--ndet-ma-text-2) !important;
}
/* Dropdowns: floating white panels. */
body.ndet-modern #wpadminbar .menupop .ab-sub-wrapper,
body.ndet-modern #wpadminbar .shortlink-input {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border);
	border-radius: var(--ndet-ma-r-pop);
	box-shadow: var(--ndet-ma-shadow-pop);
}
body.ndet-modern #wpadminbar .menupop .ab-sub-wrapper .ab-submenu {
	padding: 6px 0;
}
body.ndet-modern #wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
body.ndet-modern #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
	background: var(--ndet-ma-subtle);
}
body.ndet-modern #wpadminbar .quicklinks .menupop .ab-sub-wrapper > ul:last-child {
	border-radius: 0 0 var(--ndet-ma-r-pop) var(--ndet-ma-r-pop);
}
body.ndet-modern #wpadminbar .quicklinks .menupop .ab-sub-wrapper > ul:first-child {
	border-radius: var(--ndet-ma-r-pop) var(--ndet-ma-r-pop) 0 0;
}
body.ndet-modern #wpadminbar .quicklinks .menupop ul li .ab-item {
	border-radius: 8px;
	margin: 0 6px;
}
body.ndet-modern #wpadminbar .quicklinks .menupop ul li a,
body.ndet-modern #wpadminbar .quicklinks .menupop ul li .ab-item,
body.ndet-modern #wpadminbar .quicklinks .menupop.hover ul li a,
body.ndet-modern #wpadminbar.nojs .quicklinks .menupop:hover ul li a {
	color: var(--ndet-ma-text-2);
}
body.ndet-modern #wpadminbar .quicklinks .menupop ul li a:hover,
body.ndet-modern #wpadminbar .quicklinks .menupop ul li a:focus,
body.ndet-modern #wpadminbar .quicklinks .menupop.hover ul li a:hover,
body.ndet-modern #wpadminbar .quicklinks .menupop.hover ul li a:focus {
	background: var(--ndet-ma-hover);
	color: var(--ndet-ma-text);
}
body.ndet-modern #wpadminbar .quicklinks .menupop ul li a:hover strong,
body.ndet-modern #wpadminbar li:hover .ab-sub-wrapper .ab-item:hover::before {
	color: var(--ndet-ma-text);
}
body.ndet-modern #wpadminbar #wp-admin-bar-user-info .display-name,
body.ndet-modern #wpadminbar #wp-admin-bar-user-info .username {
	color: var(--ndet-ma-text);
}
body.ndet-modern #wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-user-actions > li {
	margin-left: 70px;
}
body.ndet-modern #wpadminbar #wp-admin-bar-my-account.with-avatar > a img,
body.ndet-modern #wpadminbar #wp-admin-bar-user-info .avatar {
	border-radius: 999px;
}
body.ndet-modern #wpadminbar #adminbarsearch .adminbar-input {
	background: var(--ndet-ma-surface);
	border-radius: 8px;
	color: var(--ndet-ma-text);
}

/* ------------------------------------------------------------------------
 * WordPress screens: headings, buttons, fields
 * ---------------------------------------------------------------------- */

body.ndet-modern-ui #wpbody-content .wrap > h1,
body.ndet-modern-ui #wpbody-content .wrap > h1.wp-heading-inline {
	color: var(--ndet-ma-text);
	font-size: 30px;
	font-weight: 750;
	letter-spacing: -0.02em;
	line-height: 1.25;
}
body.ndet-modern-ui #wpbody-content .wrap h2 {
	color: var(--ndet-ma-text);
	letter-spacing: -0.01em;
}

/* Buttons: pills. */
body.ndet-modern-ui.wp-core-ui .button,
body.ndet-modern-ui.wp-core-ui .button-secondary,
body.ndet-modern-ui.wp-core-ui .button-primary,
body.ndet-modern-ui #wpbody-content .wrap .page-title-action,
body.ndet-modern-meta.wp-core-ui .edit-post-meta-boxes-area .button {
	border-radius: 999px;
}
body.ndet-modern-ui.wp-core-ui .button,
body.ndet-modern-ui.wp-core-ui .button-secondary {
	background: var(--ndet-ma-surface);
	border-color: var(--ndet-ma-border-strong);
	box-shadow: var(--ndet-ma-shadow-xs);
	color: var(--ndet-ma-text);
}
body.ndet-modern-ui.wp-core-ui .button:hover,
body.ndet-modern-ui.wp-core-ui .button-secondary:hover {
	background: var(--ndet-ma-subtle);
	border-color: var(--ndet-ma-border-strong);
	box-shadow: var(--ndet-ma-shadow);
	color: var(--ndet-ma-text);
}
body.ndet-modern-ui.wp-core-ui .button:focus,
body.ndet-modern-ui.wp-core-ui .button-secondary:focus {
	border-color: var(--ndet-ma-accent);
	box-shadow: var(--ndet-ma-ring);
	color: var(--ndet-ma-text);
}
/* Add New (beside the page title): the page's main action, in the blue gradient. */
body.ndet-modern-ui #wpbody-content .wrap .page-title-action {
	background: var(--ndet-ma-accent-grad);
	border: 0;
	box-shadow: var(--ndet-ma-accent-glow);
	color: #fff;
	font-weight: 600;
	padding: 7px 18px;
	text-shadow: none;
}
body.ndet-modern-ui #wpbody-content .wrap .page-title-action:is(:hover, :focus) {
	background: var(--ndet-ma-accent-grad-hover);
	box-shadow: 0 10px 22px rgba(var(--ndet-ma-accent-rgb), 0.36);
	color: #fff;
}
body.ndet-modern-ui #wpbody-content .wrap .page-title-action:focus {
	box-shadow: var(--ndet-ma-ring), var(--ndet-ma-accent-glow);
	outline: none;
}
body.ndet-modern-ui.wp-core-ui .button-primary {
	background: var(--ndet-ma-accent-grad);
	border-color: var(--ndet-ma-accent);
	box-shadow: 0 4px 12px rgba(var(--ndet-ma-accent-rgb), 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14);
	color: #fff;
}
body.ndet-modern-ui.wp-core-ui .button-primary:hover,
body.ndet-modern-ui.wp-core-ui .button-primary:focus {
	background: var(--ndet-ma-accent-grad-hover);
	border-color: var(--ndet-ma-accent-dark);
	box-shadow: 0 8px 18px rgba(var(--ndet-ma-accent-rgb), 0.32);
	color: #fff;
}
body.ndet-modern-ui.wp-core-ui .button-primary:focus {
	box-shadow: var(--ndet-ma-ring), 0 8px 18px rgba(var(--ndet-ma-accent-rgb), 0.24);
}
body.ndet-modern-ui.wp-core-ui .button-link,
body.ndet-modern-ui.wp-core-ui .button-link:hover {
	background: none;
	border: 0;
	box-shadow: none;
}
body.ndet-modern-ui.wp-core-ui :is(.button-link-delete, .button.delete, .button.button-link-delete) {
	color: #d92d20;
}
/* Buttons that sit flush in a group (pagination arrows, media view switch) stay rounded as a set. */
body.ndet-modern-ui #wpbody-content .tablenav-pages .button {
	border-radius: 10px;
}

/* Fields. */
body.ndet-modern-ui #wpbody-content :is(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], input[type="search"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select, textarea),
body.ndet-modern-meta .edit-post-meta-boxes-area :is(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], input[type="search"], input[type="tel"], input[type="date"], select, textarea) {
	background-color: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border-strong);
	border-radius: var(--ndet-ma-r-field);
	box-shadow: var(--ndet-ma-shadow-xs);
	color: var(--ndet-ma-text);
}
body.ndet-modern-ui #wpbody-content :is(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], input[type="search"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select, textarea):hover,
body.ndet-modern-meta .edit-post-meta-boxes-area :is(input[type="text"], input[type="url"], input[type="email"], select, textarea):hover {
	border-color: #98a2b3;
}
body.ndet-modern-ui #wpbody-content :is(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], input[type="search"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select, textarea):focus,
body.ndet-modern-meta .edit-post-meta-boxes-area :is(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], input[type="search"], input[type="tel"], input[type="date"], select, textarea):focus {
	border-color: var(--ndet-ma-accent);
	box-shadow: var(--ndet-ma-ring);
	outline: none;
}
body.ndet-modern-ui #wpbody-content input#title,
body.ndet-modern-ui #wpbody-content #titlewrap input {
	border-radius: 14px;
	font-weight: 600;
}
/* The title field: room all round (WordPress gives it 3px above and below). The "Add title"
 * placeholder is a separate label laid over the field, so it moves with the text. */
body.ndet-modern-ui #wpbody-content #titlewrap input#title {
	height: auto;
	line-height: 1.3;
	padding: 12px 18px;
}
body.ndet-modern-ui #wpbody-content #titlewrap #title-prompt-text {
	line-height: 1.3;
	padding: 13px 19px;
}
/* File pickers ("Choose File"): the button is a white pill like the others. */
body.ndet-modern-ui #wpbody-content input[type="file"] {
	color: var(--ndet-ma-muted);
}
body.ndet-modern-ui #wpbody-content input[type="file"]::file-selector-button {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border-strong);
	border-radius: 999px;
	box-shadow: var(--ndet-ma-shadow-xs);
	color: var(--ndet-ma-text);
	cursor: pointer;
	font: inherit;
	font-weight: 500;
	margin-right: 12px;
	padding: 8px 18px;
}
body.ndet-modern-ui #wpbody-content input[type="file"]:hover::file-selector-button {
	background: var(--ndet-ma-subtle);
	box-shadow: var(--ndet-ma-shadow);
}
body.ndet-modern-ui #wpbody-content input[type="file"]:focus-visible {
	outline: none;
}
body.ndet-modern-ui #wpbody-content input[type="file"]:focus-visible::file-selector-button {
	border-color: var(--ndet-ma-accent);
	box-shadow: var(--ndet-ma-ring);
}
/* Upload a plugin or theme: the box is a card. */
body.ndet-modern-ui #wpbody-content :is(.upload-plugin, .upload-theme) .wp-upload-form {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border);
	border-radius: var(--ndet-ma-r-card);
	box-shadow: var(--ndet-ma-shadow);
	gap: 24px;
}
/* The bars above and below a list (bulk actions, filters, search): pills, like the buttons. */
body.ndet-modern-ui #wpbody-content :is(.tablenav, .search-box, .wp-filter) :is(select, input[type="search"], input[type="text"]:not(.current-page)) {
	border-color: var(--ndet-ma-border);
	border-radius: 999px;
	box-shadow: var(--ndet-ma-shadow-xs), 0 4px 12px rgba(15, 23, 42, 0.03);
}
body.ndet-modern-ui #wpbody-content :is(.tablenav, .search-box, .wp-filter) select {
	background-position: right 12px top 55%;
	padding-left: 14px;
	padding-right: 34px;
}
body.ndet-modern-ui #wpbody-content :is(.search-box, .wp-filter) input[type="search"] {
	padding-left: 16px;
	padding-right: 16px;
}
body.ndet-modern-ui #wpbody-content :is(.tablenav .actions, .search-box, .wp-filter) .button:not(.button-primary) {
	border-color: var(--ndet-ma-border);
	padding-left: 16px;
	padding-right: 16px;
}
body.ndet-modern-ui #wpbody-content :is(input[type="checkbox"], input[type="radio"]),
body.ndet-modern-meta .edit-post-meta-boxes-area :is(input[type="checkbox"], input[type="radio"]) {
	border-color: var(--ndet-ma-border-strong);
	box-shadow: none;
}
body.ndet-modern-ui #wpbody-content input[type="checkbox"],
body.ndet-modern-meta .edit-post-meta-boxes-area input[type="checkbox"] {
	border-radius: 6px;
}
body.ndet-modern-ui #wpbody-content :is(input[type="checkbox"], input[type="radio"]):checked {
	background-color: var(--ndet-ma-accent);
	border-color: var(--ndet-ma-accent);
}
body.ndet-modern-ui #wpbody-content input[type="checkbox"]:checked::before {
	/* White tick on the filled box. */
	content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E");
}
body.ndet-modern-ui #wpbody-content input[type="radio"]:checked::before {
	background-color: #fff;
}

/* Appearance → Themes: the active theme's name bar. WordPress paints it in the colour scheme
   (blue on WordPress 7) and our dark heading colour made the text unreadable on it; instead it
   is a light blue strip under the screenshot with the Customize pill on the right. */
body.ndet-modern-ui .theme-browser .theme.active .theme-name {
	background: #eff6ff;
	box-shadow: inset 0 1px 0 var(--ndet-ma-accent-soft);
	color: var(--ndet-ma-text);
	font-weight: 500;
}
body.ndet-modern-ui .theme-browser .theme.active .theme-name span {
	color: var(--ndet-ma-accent-dark);
	font-weight: 700;
}
body.ndet-modern-ui .theme-browser .theme.active .theme-actions {
	background: transparent;
	border: 0;
}

/* Appearance → Menus: a long page title wraps under itself, not under its checkbox. */
body.ndet-modern-ui #nav-menu-meta .categorychecklist label.menu-item-title {
	display: block;
	padding-left: 26px;
	position: relative;
}
body.ndet-modern-ui #nav-menu-meta .categorychecklist label.menu-item-title input[type="checkbox"] {
	left: 0;
	margin: 0;
	position: absolute;
	top: 0.15em;
}
@media screen and (max-width: 782px) {
	body.ndet-modern-ui #nav-menu-meta .categorychecklist label.menu-item-title {
		padding-left: 36px;
	}
	body.ndet-modern-ui #nav-menu-meta .categorychecklist label.menu-item-title input[type="checkbox"] {
		top: 0.05em;
	}
}

/* ------------------------------------------------------------------------
 * The classic editor (posts without the block editor, and ACF's editor fields)
 *
 * One white card: a light toolbar strip with soft rounded buttons, the writing area, and (for the
 * post's own editor) the word-count bar closing it off. Add Media is a pill like the other
 * buttons; Visual / Text is a segmented switch like the list filters. The Visual tab's page is a
 * frame of its own, given room at the edges in modern-admin.php.
 * ---------------------------------------------------------------------- */

/* Add Media and Visual / Text, above the card. */
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .wp-editor-tools {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding-bottom: 10px;
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .wp-editor-tools::after {
	content: none;
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .wp-media-buttons {
	float: none;
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .wp-editor-tabs {
	background: var(--ndet-ma-segment);
	border-radius: 999px;
	display: inline-flex;
	float: none;
	gap: 2px;
	margin-left: auto;
	padding: 3px;
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .wp-editor-tabs .wp-switch-editor {
	background: transparent;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	color: var(--ndet-ma-muted);
	font-weight: 500;
	height: auto;
	margin: 0;
	padding: 5px 14px;
	top: 0;
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .wp-editor-tabs .wp-switch-editor:hover {
	color: var(--ndet-ma-text);
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) :is(.tmce-active .switch-tmce, .html-active .switch-html) {
	background: var(--ndet-ma-surface);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
	color: var(--ndet-ma-text);
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .wp-editor-tabs .wp-switch-editor:focus-visible {
	box-shadow: var(--ndet-ma-ring);
	outline: none;
}
/* The post editor's sticky tool row (it stays in view while you scroll a long post). */
body.ndet-modern-ui #wpbody-content #wp-content-editor-tools {
	background-color: var(--ndet-ma-canvas);
	border-bottom: 0;
}

/* The card. */
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .wp-editor-container {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border);
	border-radius: var(--ndet-ma-r-pop);
	box-shadow: var(--ndet-ma-shadow);
	overflow: hidden;
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .wp-editor-container:focus-within {
	border-color: var(--ndet-ma-accent);
	box-shadow: var(--ndet-ma-ring);
}
/* The post's own editor continues into the word-count bar below it. */
body.ndet-modern-ui #wpbody-content #wp-content-editor-container {
	border-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
body.ndet-modern-ui #wpbody-content #post-status-info {
	background: var(--ndet-ma-subtle);
	border: 1px solid var(--ndet-ma-border);
	border-radius: 0 0 var(--ndet-ma-r-pop) var(--ndet-ma-r-pop);
	border-top: 1px solid var(--ndet-ma-border);
	box-shadow: var(--ndet-ma-shadow);
	color: var(--ndet-ma-muted);
}
body.ndet-modern-ui #wpbody-content #post-status-info td {
	padding: 8px 16px;
}
body.ndet-modern-ui #wpbody-content #post-status-info #content-resize-handle {
	border-radius: 0 0 var(--ndet-ma-r-pop) 0;
}

/* The toolbar strip. */
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) :is(div.mce-toolbar-grp, .quicktags-toolbar) {
	background: var(--ndet-ma-subtle);
	border-bottom: 1px solid var(--ndet-ma-border);
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) div.mce-toolbar-grp > div {
	padding: 6px 8px;
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .quicktags-toolbar {
	padding: 8px 10px;
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .mce-toolbar .mce-btn-group .mce-btn,
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .qt-dfw {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	box-shadow: none;
	margin: 1px;
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .mce-toolbar .mce-btn-group .mce-btn:is(:hover, :focus, :active),
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .qt-dfw:is(:hover, :focus) {
	background: var(--ndet-ma-surface);
	border-color: var(--ndet-ma-border);
	box-shadow: var(--ndet-ma-shadow-xs);
	color: var(--ndet-ma-text);
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .mce-toolbar .mce-btn-group .mce-btn.mce-active,
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .qt-dfw.active {
	background: var(--ndet-ma-tint);
	border-color: transparent;
	box-shadow: none;
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .mce-toolbar .mce-btn-group .mce-btn.mce-active .mce-ico,
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .qt-dfw.active {
	color: var(--ndet-ma-accent);
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .mce-toolbar .mce-ico {
	color: var(--ndet-ma-text-2);
}
/* "Paragraph": a small rounded menu field. */
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .mce-toolbar .mce-btn-group .mce-btn.mce-listbox {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border-strong);
	border-radius: 8px;
	box-shadow: var(--ndet-ma-shadow-xs);
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover {
	border-color: var(--ndet-ma-border-strong);
}
/* Text tab buttons (b, i, link…): small soft chips. */
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .quicktags-toolbar input.button.button-small {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border);
	border-radius: 8px;
	box-shadow: none;
	color: var(--ndet-ma-text-2);
	margin: 2px;
	min-height: 28px;
	padding: 2px 9px;
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .quicktags-toolbar input.button.button-small:hover {
	background: var(--ndet-ma-hover);
	border-color: var(--ndet-ma-border-strong);
	color: var(--ndet-ma-text);
}
/* The writing area itself: no box of its own inside the card, and room at the edges. */
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .wp-editor-container textarea.wp-editor-area {
	background: var(--ndet-ma-surface);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 14px 18px;
}
:is(body.ndet-modern-ui #wpbody-content, body.ndet-modern-meta .edit-post-meta-boxes-area) .wp-editor-container textarea.wp-editor-area:focus {
	box-shadow: none;
}
/* The editor's pop-up menus ("Paragraph", colours…): floating rounded panels. */
:is(body.ndet-modern-ui, body.ndet-modern-meta) .mce-menu {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border);
	border-radius: 12px;
	box-shadow: var(--ndet-ma-shadow-pop);
	padding: 6px 0;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .mce-menu .mce-menu-item {
	border-radius: 8px;
	margin: 0 6px;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .mce-menu .mce-menu-item:is(:hover, :focus, .mce-selected) {
	background: var(--ndet-ma-hover);
	color: var(--ndet-ma-text);
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .mce-menu .mce-menu-item:is(:hover, :focus, .mce-selected) .mce-text {
	color: var(--ndet-ma-text);
}
/* The menu's current choice ("Paragraph"): the soft blue tint, not WordPress's solid blue. */
:is(body.ndet-modern-ui, body.ndet-modern-meta) .mce-menu .mce-menu-item.mce-active:is(.mce-menu-item-normal, .mce-menu-item-preview) {
	background: var(--ndet-ma-tint);
	color: var(--ndet-ma-accent);
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .mce-menu .mce-menu-item.mce-active:is(.mce-menu-item-normal, .mce-menu-item-preview) :is(.mce-text, .mce-ico) {
	color: var(--ndet-ma-accent);
}
/* No keyboard shortcut labels in the menus ("Shift+Alt+1" ran into the large heading previews).
 * The shortcuts themselves still work. */
:is(body.ndet-modern-ui, body.ndet-modern-meta) .mce-menu .mce-menu-item .mce-menu-shortcut {
	display: none;
}

/* ------------------------------------------------------------------------
 * WordPress screens: cards, notices, tabs
 * ---------------------------------------------------------------------- */

body.ndet-modern-ui #wpbody-content :is(.postbox, .stuffbox, .card, .welcome-panel, .health-check-accordion, .community-events),
body.ndet-modern-meta .edit-post-meta-boxes-area .postbox {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border);
	border-radius: var(--ndet-ma-r-card);
	box-shadow: var(--ndet-ma-shadow);
}
body.ndet-modern-ui #wpbody-content .postbox .postbox-header {
	border-bottom-color: var(--ndet-ma-border);
}
body.ndet-modern-ui #wpbody-content .postbox .hndle,
body.ndet-modern-ui #wpbody-content .postbox .postbox-header h2 {
	color: var(--ndet-ma-text);
	font-weight: 600;
}
body.ndet-modern-ui #wpbody-content .postbox .handle-actions button {
	border-radius: 8px;
}
body.ndet-modern-ui #wpbody-content .postbox .handle-actions button:hover {
	background: var(--ndet-ma-hover);
}
body.ndet-modern-ui #wpbody-content #major-publishing-actions {
	background: var(--ndet-ma-subtle);
	border-top-color: var(--ndet-ma-border);
	border-radius: 0 0 var(--ndet-ma-r-card) var(--ndet-ma-r-card);
}
body.ndet-modern-ui #wpbody-content .meta-box-sortables.empty-container,
body.ndet-modern-ui #wpbody-content .sortable-placeholder {
	border-color: var(--ndet-ma-border-strong);
	border-radius: var(--ndet-ma-r-card);
}
/* Dashboard widgets get a lift on hover. */
body.ndet-modern-ui #dashboard-widgets .postbox:hover {
	box-shadow: var(--ndet-ma-shadow-hover);
}

/* Notices: rounded cards with a coloured edge, the same on every screen. On WordPress's own screens
 * that is every notice; on plugins' own pages (the frame layer) only the notices WordPress puts at
 * the top of the page (straight inside the page or its .wrap), so a plugin's own panels further
 * down are left alone. Neo Digital's pages are left as they are. */
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)) {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border);
	border-radius: var(--ndet-ma-r-pop);
	box-shadow: inset 4px 0 0 var(--ndet-ma-notice, var(--ndet-ma-border-strong)), var(--ndet-ma-shadow);
	overflow: hidden; /* Anything a plugin draws at the edge follows the rounded corner. */
	padding-left: 16px;
}
/* Elementor's notices draw their coloured edge as a straight bar beside the box: use the rounded
 * inset edge instead. */
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)).e-notice::before {
	content: none;
}
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)) .e-notice__dismiss {
	right: 8px;
	top: 8px;
}
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)):is(.notice-success, .updated, .e-notice--success) {
	--ndet-ma-notice: #12b76a;
}
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)):is(.notice-error, .error, .e-notice--error) {
	--ndet-ma-notice: #f04438;
}
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)):is(.notice-warning, .e-notice--warning) {
	--ndet-ma-notice: #f79009;
}
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)):is(.notice-info, .e-notice--info) {
	--ndet-ma-notice: var(--ndet-ma-accent);
}
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)) .notice-dismiss {
	border-radius: 8px;
}
/* Buttons in notices: the same pills everywhere. Elementor's notice buttons (.e-button) only get
 * WordPress's button classes on some sites, and plugin pages don't style WordPress's buttons, so
 * both are styled here. The first button is the main one (blue), the rest are white. */
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)) :is(.button, .e-button) {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border-strong);
	border-radius: 999px;
	box-shadow: var(--ndet-ma-shadow-xs);
	color: var(--ndet-ma-text);
	text-decoration: none;
}
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)) :is(.button, .e-button):is(:hover, :focus) {
	background: var(--ndet-ma-subtle);
	border-color: var(--ndet-ma-border-strong);
	box-shadow: var(--ndet-ma-shadow);
	color: var(--ndet-ma-text);
}
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)) :is(.button-primary, .e-button:not(.e-button--outline, .button-secondary)) {
	background: var(--ndet-ma-accent-grad);
	border-color: var(--ndet-ma-accent);
	box-shadow: 0 4px 12px rgba(var(--ndet-ma-accent-rgb), 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14);
	color: #fff;
}
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)) :is(.button-primary, .e-button:not(.e-button--outline, .button-secondary)):is(:hover, :focus) {
	background: var(--ndet-ma-accent-grad-hover);
	border-color: var(--ndet-ma-accent-dark);
	box-shadow: 0 8px 18px rgba(var(--ndet-ma-accent-rgb), 0.32);
	color: #fff;
}
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)) .e-notice__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)) .e-button {
	align-items: center;
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
	line-height: 1.3;
	min-height: 36px;
	padding: 0 18px;
}
:is(body.ndet-modern-ui #wpbody-content :is(.notice, div.updated, div.error), body.ndet-modern-frame :is(#wpbody-content, #wpbody-content .wrap) > :is(.notice, div.updated, div.error)) :is(.button, .e-button):focus-visible {
	outline: none;
	box-shadow: var(--ndet-ma-ring);
}

/* WP Engine's notices under its plugin are a small table of messages: each one a rounded notice
 * with a coloured edge, like the others. */
body.ndet-modern-ui #wpbody-content .wpe-notice .wpe-notice-table {
	background: transparent;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 6px;
	margin: -6px 0 0;
	width: 100%;
}
body.ndet-modern-ui #wpbody-content .wpe-notice .wpe-notice-table > tbody > tr {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}
body.ndet-modern-ui #wpbody-content .wpe-notice .wpe-notice-table > tbody > tr > td {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border);
	border-radius: var(--ndet-ma-r-pop);
	box-shadow: inset 4px 0 0 var(--ndet-ma-notice, var(--ndet-ma-border-strong)), var(--ndet-ma-shadow);
	color: var(--ndet-ma-text-2);
	padding: 4px 14px 4px 18px;
}
body.ndet-modern-ui #wpbody-content .wpe-notice .wpe-notice-table > tbody > tr > td p {
	margin: 8px 0;
}
body.ndet-modern-ui #wpbody-content .wpe-notice tr.notice-warning {
	--ndet-ma-notice: #f79009;
}
body.ndet-modern-ui #wpbody-content .wpe-notice tr.notice-success {
	--ndet-ma-notice: #12b76a;
}
body.ndet-modern-ui #wpbody-content .wpe-notice tr.notice-error {
	--ndet-ma-notice: #f04438;
}
body.ndet-modern-ui #wpbody-content .wpe-notice tr.notice-info {
	--ndet-ma-notice: var(--ndet-ma-accent);
}

/* Screen Options / Help: pills at the top right. */
body.ndet-modern-ui #screen-meta-links .show-settings {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border);
	border-radius: 999px;
	box-shadow: var(--ndet-ma-shadow-xs);
	color: var(--ndet-ma-text-2);
	margin-top: 8px;
}
body.ndet-modern-ui #screen-meta-links .show-settings:hover {
	box-shadow: var(--ndet-ma-shadow);
}
body.ndet-modern-ui #screen-meta {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border);
	border-radius: var(--ndet-ma-r-card);
	box-shadow: var(--ndet-ma-shadow);
	margin: 12px 20px 0 0;
}

/* Tabs (Settings, Add Plugins, Site Health…): a segmented control. */
body.ndet-modern-ui #wpbody-content .nav-tab-wrapper,
body.ndet-modern-ui #wpbody-content .wrap h2.nav-tab-wrapper {
	background: var(--ndet-ma-segment);
	border: 0;
	border-radius: 14px;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-bottom: 16px;
	padding: 4px;
}
body.ndet-modern-ui #wpbody-content .nav-tab {
	background: transparent;
	border: 0;
	border-radius: 10px;
	color: var(--ndet-ma-muted);
	float: none;
	font-weight: 500;
	margin: 0;
	padding: 6px 14px;
}
body.ndet-modern-ui #wpbody-content .nav-tab:hover {
	background: var(--ndet-ma-frame-hover);
	color: var(--ndet-ma-text);
}
body.ndet-modern-ui #wpbody-content :is(.nav-tab-active, .nav-tab-active:hover, .nav-tab-active:focus) {
	background: var(--ndet-ma-surface);
	box-shadow: var(--ndet-ma-shadow);
	color: var(--ndet-ma-text);
}

/* ------------------------------------------------------------------------
 * WordPress screens: list tables (posts, pages, users, plugins…)
 * ---------------------------------------------------------------------- */

body.ndet-modern-ui #wpbody-content table.widefat {
	background: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border);
	border-collapse: separate;
	border-radius: var(--ndet-ma-r-card);
	border-spacing: 0;
	box-shadow: var(--ndet-ma-shadow);
	overflow: hidden;
}
body.ndet-modern-ui #wpbody-content table.widefat :is(thead, tfoot) :is(th, td) {
	background: var(--ndet-ma-subtle);
	border-color: var(--ndet-ma-border);
	color: var(--ndet-ma-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
body.ndet-modern-ui #wpbody-content table.widefat :is(thead, tfoot) :is(th, td) a {
	color: var(--ndet-ma-text-2);
}
body.ndet-modern-ui #wpbody-content table.widefat > tbody > tr > :is(th, td) {
	border-top: 1px solid var(--ndet-ma-border);
}
body.ndet-modern-ui #wpbody-content table.widefat > tbody > tr:first-child > :is(th, td) {
	border-top: 0;
}
body.ndet-modern-ui #wpbody-content :is(.striped > tbody > :nth-child(odd), ul.striped > :nth-child(odd), .alternate) {
	background: transparent;
}
body.ndet-modern-ui #wpbody-content table.widefat > tbody > tr:hover > :is(th, td) {
	background: var(--ndet-ma-subtle);
}
body.ndet-modern-ui #wpbody-content .plugins tr.active > :is(th, td) {
	background: var(--ndet-ma-tint);
}
body.ndet-modern-ui #wpbody-content .plugins .active th.check-column {
	border-left-color: var(--ndet-ma-accent);
}
body.ndet-modern-ui #wpbody-content .plugins :is(.plugin-update-tr, .active.update) :is(th, td) {
	box-shadow: none;
}
body.ndet-modern-ui #wpbody-content .row-actions {
}
/* On screens wider than phones, each row is its own rounded card with a little space between
 * (phones get their own card layout further down). */
@media screen and (min-width: 783px) {
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat {
		background: transparent;
		border: 0;
		border-collapse: separate;
		border-radius: 0;
		border-spacing: 0 10px;
		box-shadow: none;
		margin-top: -4px;
		overflow: visible;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat tfoot {
		display: none;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat thead :is(th, td) {
		background: transparent;
		border: 0;
		font-size: 11.5px;
		letter-spacing: 0.05em;
		padding-bottom: 2px;
		padding-top: 2px;
		text-transform: uppercase;
	}
	/* The card's shadow follows its rounded corners (a shadow on the row itself would be square). */
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat > tbody > tr {
		background: transparent;
		filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.03)) drop-shadow(0 4px 10px rgba(15, 23, 42, 0.045));
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat > tbody > tr:is(:hover, :focus-within) {
		filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.04)) drop-shadow(0 10px 18px rgba(15, 23, 42, 0.08));
		position: relative;
		z-index: 1;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat > tbody > tr > :is(th, td) {
		background: var(--ndet-ma-surface);
		border-bottom: var(--ndet-ma-outline-w, 1px) solid var(--ndet-ma-outline, var(--ndet-ma-border));
		border-top: var(--ndet-ma-outline-w, 1px) solid var(--ndet-ma-outline, var(--ndet-ma-border));
		padding-bottom: 16px;
		padding-top: 16px;
	}
	/* Roomier cards: more space inside each edge. */
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat > tbody > tr > :is(th, td):first-child {
		padding-left: 18px;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat > tbody > tr > :is(th, td):not(.hidden):not(:has(~ :is(th, td):not(.hidden))) {
		padding-right: 18px;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat > tbody > tr > th.check-column {
		padding-top: 17px;
		width: 2.6em;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat thead :is(th, td):first-child {
		padding-left: 18px;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat thead .check-column {
		width: 2.6em;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat > tbody > tr > :is(th, td) .row-actions {
		padding-top: 8px;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat > tbody > tr > :is(th, td):first-child {
		border-left: var(--ndet-ma-outline-w, 1px) solid var(--ndet-ma-outline, var(--ndet-ma-border));
		border-radius: 18px 0 0 18px;
	}
	/* The last column that is showing (Screen Options can hide some). */
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat > tbody > tr > :is(th, td):not(.hidden):not(:has(~ :is(th, td):not(.hidden))) {
		border-right: var(--ndet-ma-outline-w, 1px) solid var(--ndet-ma-outline, var(--ndet-ma-border));
		border-radius: 0 18px 18px 0;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat > tbody > tr > :is(th, td):only-child {
		border-radius: 18px;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat > tbody > tr:hover > :is(th, td) {
		background: var(--ndet-ma-surface);
		border-color: var(--ndet-ma-outline-hover, var(--ndet-ma-border-strong));
	}
	/* Row actions (Edit, Quick Edit, Trash, View…) as small pills. */
	body.ndet-modern-ui #wpbody-content table.wp-list-table .row-actions {
		color: transparent;
		display: flex;
		flex-wrap: wrap;
		font-size: 0; /* hides the " | " between actions */
		gap: 4px;
		left: 0; /* always shown, not only on hover */
		padding-top: 6px;
		position: static;
	}
	/* With the buttons always showing, give the title column more of the width. */
	body.ndet-modern-ui #wpbody-content table.wp-list-table.fixed :is(th, td):is(.column-categories, .column-tags) {
		width: 12%;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.fixed :is(th, td).column-author {
		width: 9%;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table .row-actions > span {
		font-size: 0;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table .row-actions > span > :is(a, button.button-link) {
		background: var(--ndet-ma-hover);
		border-radius: 999px;
		color: var(--ndet-ma-text-2);
		display: inline-block;
		font-size: 12px;
		font-weight: 600;
		line-height: 1.5;
		padding: 3px 10px;
		text-decoration: none;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table .row-actions > span > :is(a, button.button-link):is(:hover, :focus) {
		background: var(--ndet-ma-segment);
		color: var(--ndet-ma-text);
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table .row-actions > span.edit > :is(a, button.button-link) {
		background: var(--ndet-ma-tint);
		color: var(--ndet-ma-accent);
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table .row-actions > span:is(.trash, .delete, .spam) > :is(a, button.button-link) {
		color: #b42318;
	}

	/* Plugins: active ones tinted, update notices as their own box under the plugin. */
	body.ndet-modern-ui #wpbody-content table.wp-list-table.widefat thead tr {
		background: transparent;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.plugins > tbody > tr > th.check-column {
		border-left-width: 1px;
	}
	/* Notices under a plugin (updates, warnings): just the notices, lined up with the cards.
	 * WordPress gives these rows a white background, which would show as a box around them. */
	body.ndet-modern-ui #wpbody-content table.wp-list-table.plugins > tbody > tr.plugin-update-tr {
		background: transparent;
		filter: none;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.plugins > tbody > tr.plugin-update-tr > td {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0 !important; /* over the roomier card padding */
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.plugins > tbody > tr.plugin-update-tr :is(.update-message, .notice, .wpe-notice) {
		margin: -2px 0 6px;
	}
}

/* Column headings: a small hide button that shows on hover (modern-desktop.js), and the
 * "2 hidden columns" button with its checklist above the list. Wider screens only. */
.ndet-ma-colhide,
.ndet-ma-cols {
	display: none;
}
@media screen and (min-width: 783px) {
	/* Right after the heading's name (sortable names are links: kept inline beside it). */
	body.ndet-modern-ui #wpbody-content table.wp-list-table thead th:has(> .ndet-ma-colhide) > a {
		display: inline-flex;
		vertical-align: middle;
	}
	body.ndet-modern-ui #wpbody-content .ndet-ma-colhide {
		align-items: center;
		background: transparent;
		border: 0;
		border-radius: 6px;
		color: var(--ndet-ma-muted);
		cursor: pointer;
		display: inline-flex;
		height: 22px;
		justify-content: center;
		margin: -4px 0 -4px 2px;
		opacity: 0;
		padding: 0;
		vertical-align: middle;
		width: 22px;
	}
	body.ndet-modern-ui #wpbody-content .ndet-ma-colhide .dashicons {
		font-size: 15px;
		height: 15px;
		line-height: 15px;
		width: 15px;
	}
	body.ndet-modern-ui #wpbody-content thead th:is(:hover, :focus-within) > .ndet-ma-colhide,
	body.ndet-modern-ui #wpbody-content .ndet-ma-colhide:focus-visible {
		opacity: 1;
	}
	body.ndet-modern-ui #wpbody-content .ndet-ma-colhide:is(:hover, :focus-visible) {
		background: var(--ndet-ma-segment);
		color: var(--ndet-ma-text);
		outline: none;
	}

	body.ndet-modern-ui #wpbody-content .tablenav .ndet-ma-cols.has-hidden {
		display: block;
		overflow: visible;
		position: relative;
	}
	body.ndet-modern-ui.wp-core-ui #wpbody-content .ndet-ma-cols__btn {
		align-items: center;
		border-color: var(--ndet-ma-border);
		color: var(--ndet-ma-text-2);
		display: inline-flex;
		gap: 6px;
		padding-left: 14px;
		padding-right: 16px;
	}
	body.ndet-modern-ui #wpbody-content .ndet-ma-cols__btn .dashicons {
		color: var(--ndet-ma-muted);
		font-size: 16px;
		height: 16px;
		width: 16px;
	}
	body.ndet-modern-ui #wpbody-content .ndet-ma-cols__panel {
		background: var(--ndet-ma-surface);
		border: 1px solid var(--ndet-ma-border);
		border-radius: var(--ndet-ma-r-pop);
		box-shadow: var(--ndet-ma-shadow-pop);
		left: 0;
		min-width: 200px;
		padding: 8px;
		position: absolute;
		top: calc(100% + 6px);
		z-index: 100;
	}
	body.ndet-modern-ui #wpbody-content .ndet-ma-cols__panel[hidden] {
		display: none;
	}
	body.ndet-modern-ui #wpbody-content .ndet-ma-cols__title {
		color: var(--ndet-ma-muted);
		font-size: 11.5px;
		font-weight: 600;
		letter-spacing: 0.05em;
		margin: 2px 8px 6px;
		text-transform: uppercase;
	}
	body.ndet-modern-ui #wpbody-content .ndet-ma-cols__item {
		align-items: center;
		border-radius: 10px;
		color: var(--ndet-ma-text-2);
		display: flex;
		gap: 8px;
		padding: 7px 8px;
		white-space: nowrap;
	}
	body.ndet-modern-ui #wpbody-content .ndet-ma-cols__item:hover {
		background: var(--ndet-ma-hover);
	}
	body.ndet-modern-ui #wpbody-content .ndet-ma-cols__item input {
		margin: 0;
	}
	body.ndet-modern-ui.wp-core-ui #wpbody-content .ndet-ma-cols__all {
		border-top: 1px solid var(--ndet-ma-border);
		color: var(--ndet-ma-accent);
		display: block;
		font-weight: 600;
		margin-top: 6px;
		padding: 8px 8px 2px;
		text-align: left;
		width: 100%;
	}
}

/* "All | Published | Drafts" filters: a segmented control. */
body.ndet-modern-ui #wpbody-content .subsubsub {
	background: var(--ndet-ma-segment);
	border-radius: 20px;
	color: transparent;
	display: flex;
	flex-wrap: wrap;
	font-size: 0;
	gap: 2px;
	margin: 8px 12px 4px 0;
	padding: 4px;
}
body.ndet-modern-ui #wpbody-content .subsubsub:empty {
	display: none;
}
body.ndet-modern-ui #wpbody-content .subsubsub li {
	display: block;
	font-size: 13px;
	margin: 0;
}
body.ndet-modern-ui #wpbody-content .subsubsub a {
	border-radius: 999px;
	color: #475569;
	display: inline-block;
	line-height: 20px;
	padding: 6px 14px;
}
body.ndet-modern-ui #wpbody-content .subsubsub a:hover {
	background: var(--ndet-ma-frame-hover);
	color: var(--ndet-ma-text);
}
body.ndet-modern-ui #wpbody-content .subsubsub a.current {
	background: var(--ndet-ma-surface);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
	color: var(--ndet-ma-text);
	font-weight: 650;
}
body.ndet-modern-ui #wpbody-content .subsubsub .count {
	color: var(--ndet-ma-muted);
	font-weight: 500;
}

/* Status at a glance: a small coloured dot before each title, a light outline of the same colour
 * around the card, and the same colour as a label in the Status column (modern-lists.php). Green live / active, blue scheduled, amber draft or update
 * available, orange pending review, violet private, grey inactive / in the Trash. Colours come
 * from WordPress's own row classes. */
body.ndet-modern-ui #wpbody-content table.wp-list-table {
	--ndet-ma-st-live: #16a34a;
	--ndet-ma-st-live-bg: #dcfce7;
	--ndet-ma-st-live-text: #166534;
	--ndet-ma-st-scheduled: #2563eb;
	--ndet-ma-st-scheduled-bg: #dbeafe;
	--ndet-ma-st-scheduled-text: #1e40af;
	--ndet-ma-st-draft: #d97706;
	--ndet-ma-st-draft-bg: #fef3c7;
	--ndet-ma-st-draft-text: #92400e;
	--ndet-ma-st-pending: #ea580c;
	--ndet-ma-st-pending-bg: #ffedd5;
	--ndet-ma-st-pending-text: #9a3412;
	--ndet-ma-st-private: #7c3aed;
	--ndet-ma-st-private-bg: #ede9fe;
	--ndet-ma-st-private-text: #5b21b6;
	--ndet-ma-st-off: #94a3b8;
	--ndet-ma-st-off-bg: #f1f5f9;
	--ndet-ma-st-off-text: #475569;
}
body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr:is(.status-publish, .status-future, .status-draft, .status-pending, .status-private, .status-trash) .column-primary a.row-title::before,
body.ndet-modern-ui #wpbody-content table.wp-list-table.plugins > tbody > tr:is(.active, .inactive) td.plugin-title > strong::before {
	background: var(--ndet-ma-dot, var(--ndet-ma-st-off));
	border-radius: 999px;
	box-shadow: 0 0 0 4px var(--ndet-ma-dot-ring, var(--ndet-ma-st-off-bg));
	content: "";
	display: inline-block;
	height: 8px;
	margin: 0 12px 0 4px;
	vertical-align: 2px;
	width: 8px;
}
/* A title that wraps lines up under its first word, not under the dot. */
body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr:is(.status-publish, .status-future, .status-draft, .status-pending, .status-private, .status-trash) .column-primary strong:has(> a.row-title),
body.ndet-modern-ui #wpbody-content table.wp-list-table.plugins > tbody > tr:is(.active, .inactive) td.plugin-title > strong {
	display: block;
	padding-left: 24px;
	text-indent: -24px;
}
body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr:is(.status-publish, .active) {
	--ndet-ma-dot: var(--ndet-ma-st-live);
	--ndet-ma-dot-ring: var(--ndet-ma-st-live-bg);
	--ndet-ma-outline: #a7e8bf;
	--ndet-ma-outline-hover: #6fd197;
	--ndet-ma-outline-w: 1.5px;
}
body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr.status-future {
	--ndet-ma-dot: var(--ndet-ma-st-scheduled);
	--ndet-ma-dot-ring: var(--ndet-ma-st-scheduled-bg);
	--ndet-ma-outline: #b7cffb;
	--ndet-ma-outline-hover: #8db1f5;
	--ndet-ma-outline-w: 1.5px;
}
body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr:is(.status-draft, .update) {
	--ndet-ma-dot: var(--ndet-ma-st-draft);
	--ndet-ma-dot-ring: var(--ndet-ma-st-draft-bg);
	--ndet-ma-outline: #f5d77a;
	--ndet-ma-outline-hover: #e9bd3f;
	--ndet-ma-outline-w: 1.5px;
}
body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr.status-pending {
	--ndet-ma-dot: var(--ndet-ma-st-pending);
	--ndet-ma-dot-ring: var(--ndet-ma-st-pending-bg);
	--ndet-ma-outline: #fdc89a;
	--ndet-ma-outline-hover: #f7a463;
	--ndet-ma-outline-w: 1.5px;
}
body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr.status-private {
	--ndet-ma-dot: var(--ndet-ma-st-private);
	--ndet-ma-dot-ring: var(--ndet-ma-st-private-bg);
	--ndet-ma-outline: #d6c8f5;
	--ndet-ma-outline-hover: #b9a4ee;
	--ndet-ma-outline-w: 1.5px;
}
/* Inactive plugins stand out with a red outline (and a red dot), so a plugin left switched off is easy to spot. */
body.ndet-modern-ui #wpbody-content table.wp-list-table.plugins > tbody > tr.inactive {
	--ndet-ma-dot: #d92d20;
	--ndet-ma-dot-ring: #fee4e2;
	--ndet-ma-outline: #f5a3a0;
	--ndet-ma-outline-hover: #e5605a;
	--ndet-ma-outline-w: 1.5px;
}
body.ndet-modern-ui #wpbody-content table.wp-list-table :is(th, td).column-ndet_status {
	width: 9.5em;
}
body.ndet-modern-ui #wpbody-content .ndet-ma-status {
	align-items: center;
	background: var(--ndet-ma-st-off-bg);
	border-radius: 999px;
	color: var(--ndet-ma-st-off-text);
	display: inline-flex;
	font-size: 12px;
	font-weight: 650;
	line-height: 1;
	padding: 6px 11px;
	white-space: nowrap;
}
body.ndet-modern-ui #wpbody-content .ndet-ma-status--live {
	background: var(--ndet-ma-st-live-bg);
	color: var(--ndet-ma-st-live-text);
}
body.ndet-modern-ui #wpbody-content .ndet-ma-status--scheduled {
	background: var(--ndet-ma-st-scheduled-bg);
	color: var(--ndet-ma-st-scheduled-text);
}
body.ndet-modern-ui #wpbody-content :is(.ndet-ma-status--draft, .ndet-ma-status--update) {
	background: var(--ndet-ma-st-draft-bg);
	color: var(--ndet-ma-st-draft-text);
}
body.ndet-modern-ui #wpbody-content .ndet-ma-status--pending {
	background: var(--ndet-ma-st-pending-bg);
	color: var(--ndet-ma-st-pending-text);
}
body.ndet-modern-ui #wpbody-content .ndet-ma-status--private {
	background: var(--ndet-ma-st-private-bg);
	color: var(--ndet-ma-st-private-text);
}

/* List titles: dark and a little larger, like a card's heading. */
body.ndet-modern-ui #wpbody-content table.wp-list-table .column-primary a.row-title {
	color: var(--ndet-ma-text);
	font-size: 15px;
	font-weight: 650;
}
body.ndet-modern-ui #wpbody-content table.wp-list-table .column-primary a.row-title:is(:hover, :focus) {
	color: var(--ndet-ma-accent);
}

/* Media library. */
body.ndet-modern-ui #wpbody-content :is(.wp-filter, .media-toolbar.wp-filter) {
	border: 1px solid var(--ndet-ma-border);
	border-radius: var(--ndet-ma-r-card);
	box-shadow: var(--ndet-ma-shadow);
}
body.ndet-modern-ui #wpbody-content .attachment-preview {
	border-radius: 12px;
	overflow: hidden;
}
body.ndet-modern-ui #wpbody-content .attachment:hover .attachment-preview {
	box-shadow: var(--ndet-ma-shadow-hover);
}

/* ------------------------------------------------------------------------
 * ACF fields (post, page, term, user and options screens)
 * ---------------------------------------------------------------------- */

:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-fields > .acf-field {
	border-top-color: var(--ndet-ma-border);
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-field .acf-label label {
	color: var(--ndet-ma-text);
	font-weight: 600;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-field :is(p.description, .acf-label .description) {
	color: var(--ndet-ma-muted);
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-field :is(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], input[type="search"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea),
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-field .select2-container--default .select2-selection {
	background-color: var(--ndet-ma-surface);
	border: 1px solid var(--ndet-ma-border-strong);
	border-radius: var(--ndet-ma-r-field);
	box-shadow: var(--ndet-ma-shadow-xs);
	color: var(--ndet-ma-text);
	min-height: 40px;
	padding: 6px 12px;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-field textarea {
	padding: 10px 12px;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-field :is(input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], input[type="search"], input[type="tel"], input[type="date"], input[type="time"], select, textarea):focus {
	border-color: var(--ndet-ma-accent);
	box-shadow: var(--ndet-ma-ring);
	outline: none;
}
/* The WYSIWYG field: styled with the classic editor (see "The classic editor"). */
/* Prefix / suffix boxes beside a field ("$", "px"…). */
:is(body.ndet-modern-ui, body.ndet-modern-meta) :is(.acf-input-prepend, .acf-input-append) {
	background: var(--ndet-ma-subtle);
	border-color: var(--ndet-ma-border-strong);
	box-sizing: border-box;
	line-height: 26px;
	min-height: 40px;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-input-prepend {
	border-radius: var(--ndet-ma-r-field) 0 0 var(--ndet-ma-r-field);
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-input-append {
	border-radius: 0 var(--ndet-ma-r-field) var(--ndet-ma-r-field) 0;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-input-wrap input.acf-is-prepended {
	border-radius: 0 var(--ndet-ma-r-field) var(--ndet-ma-r-field) 0;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-input-wrap input.acf-is-appended {
	border-radius: var(--ndet-ma-r-field) 0 0 var(--ndet-ma-r-field);
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-input-wrap input.acf-is-prepended.acf-is-appended {
	border-radius: 0;
}

/* Tabs: a segmented control, like the WordPress ones. */
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-tab-wrap.-top .acf-tab-group {
	background: var(--ndet-ma-segment);
	border: 0;
	border-radius: 14px;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 12px 12px 4px;
	padding: 4px;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-tab-wrap.-top .acf-tab-group li {
	margin: 0;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-tab-wrap.-top .acf-tab-group li a {
	background: transparent;
	border: 0;
	border-radius: 10px;
	color: var(--ndet-ma-muted);
	font-weight: 500;
	padding: 6px 14px;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-tab-wrap.-top .acf-tab-group li a:hover {
	background: var(--ndet-ma-frame-hover);
	color: var(--ndet-ma-text);
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-tab-wrap.-top .acf-tab-group li.active a {
	background: var(--ndet-ma-surface);
	box-shadow: var(--ndet-ma-shadow);
	color: var(--ndet-ma-text);
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-tab-wrap.-left .acf-tab-group li a {
	border-radius: 10px 0 0 10px;
}

/* Groups, repeaters, flexible content, galleries. */
:is(body.ndet-modern-ui, body.ndet-modern-meta) :is(.acf-field .acf-fields.-border, .acf-field > .acf-input > .acf-fields, .acf-table, .acf-flexible-content .layout, .acf-gallery) {
	border-color: var(--ndet-ma-border);
	border-radius: 14px;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-table {
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-table > thead > tr > th {
	background: var(--ndet-ma-subtle);
	color: var(--ndet-ma-muted);
	font-weight: 600;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-table > :is(thead, tbody) > tr > :is(th, td) {
	border-color: var(--ndet-ma-border);
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-repeater .acf-row-handle {
	background: var(--ndet-ma-subtle);
	color: var(--ndet-ma-muted);
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-flexible-content .layout .acf-fc-layout-handle {
	border-radius: 14px 14px 0 0;
	color: var(--ndet-ma-text);
	font-weight: 600;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-fields.-left > .acf-field::before {
	background: var(--ndet-ma-subtle);
	border-color: var(--ndet-ma-border);
}

/* True / false switch, image and file pickers, buttons. */
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-switch {
	border-color: var(--ndet-ma-border-strong);
	border-radius: 999px;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-switch .acf-switch-slider {
	border-color: var(--ndet-ma-border-strong);
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.2);
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-switch.-on {
	background: var(--ndet-ma-accent);
	border-color: var(--ndet-ma-accent);
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-switch.-on .acf-switch-slider {
	border-color: var(--ndet-ma-accent);
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) :is(.acf-image-uploader .image-wrap img, .acf-file-uploader .file-wrap) {
	border-color: var(--ndet-ma-border);
	border-radius: 12px;
}
:is(body.ndet-modern-ui, body.ndet-modern-meta) .acf-field :is(.acf-radio-list, .acf-checkbox-list) li label {
	color: var(--ndet-ma-text-2);
}

/* ------------------------------------------------------------------------
 * Phones (WordPress's own small-screen layout starts at 782px)
 *
 * A floating tab bar at the bottom (Home, Pages, Posts, Media, Menu; printed by
 * modern-admin.php on screens with .ndet-modern-tabs), the Save/Update button floating above
 * it (modern-mobile.js marks it .ndet-ma-float), list tables as cards with their actions as
 * buttons, and the desktop-only extras hidden.
 * ---------------------------------------------------------------------- */

.ndet-ma-tabs {
	display: none;
}
@media screen and (max-width: 782px) {
	body.ndet-modern {
		--ndet-ma-tabs-h: 64px;
		--ndet-ma-tabs-gap: calc(10px + env(safe-area-inset-bottom, 0px));
	}

	/* Tab bar. */
	body.ndet-modern-tabs .ndet-ma-tabs {
		backdrop-filter: saturate(1.6) blur(16px);
		-webkit-backdrop-filter: saturate(1.6) blur(16px);
		background: rgba(255, 255, 255, 0.92);
		border: 1px solid rgba(255, 255, 255, 0.7);
		border-radius: 24px;
		bottom: var(--ndet-ma-tabs-gap);
		box-shadow: var(--ndet-ma-shadow-pop);
		box-sizing: border-box;
		display: flex;
		gap: 4px;
		height: var(--ndet-ma-tabs-h);
		left: 12px;
		padding: 6px;
		position: fixed;
		right: 12px;
		z-index: 9992;
	}
	.ndet-ma-tabs .ndet-ma-tabs__tab {
		-webkit-tap-highlight-color: transparent;
		align-items: center;
		background: none;
		border: 0;
		border-radius: 16px;
		box-shadow: none;
		color: var(--ndet-ma-muted);
		cursor: pointer;
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		font: inherit;
		font-size: 11px;
		font-weight: 600;
		gap: 2px;
		justify-content: center;
		min-width: 0;
		padding: 0;
		text-decoration: none;
	}
	.ndet-ma-tabs .ndet-ma-tabs__tab .dashicons {
		font-size: 22px;
		height: 22px;
		width: 22px;
	}
	.ndet-ma-tabs .ndet-ma-tabs__label {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.ndet-ma-tabs .ndet-ma-tabs__tab:is(.is-active, [aria-expanded="true"]) {
		background: var(--ndet-ma-tint);
		color: var(--ndet-ma-accent);
	}
	.ndet-ma-tabs .ndet-ma-tabs__tab:focus-visible {
		box-shadow: inset 0 0 0 2px var(--ndet-ma-accent);
		outline: 0;
	}
	/* Room for the bar under the page and the open menu. */
	body.ndet-modern-tabs #wpbody-content {
		padding-bottom: calc(var(--ndet-ma-tabs-h) + var(--ndet-ma-tabs-gap) + 32px);
	}
	body.ndet-modern-tabs.ndet-ma-has-float #wpbody-content {
		padding-bottom: calc(var(--ndet-ma-tabs-h) + var(--ndet-ma-tabs-gap) + 96px);
	}
	body.ndet-modern-tabs.wp-responsive-open #adminmenu,
	body.ndet-modern-tabs .wp-responsive-open #adminmenu {
		padding-bottom: calc(var(--ndet-ma-tabs-h) + var(--ndet-ma-tabs-gap) + 24px);
	}

	/* Save / Update floating above the tab bar. */
	body.ndet-modern-tabs .ndet-ma-float {
		align-items: center;
		bottom: calc(var(--ndet-ma-tabs-h) + var(--ndet-ma-tabs-gap) + 12px);
		display: flex;
		float: none;
		gap: 8px;
		line-height: 1;
		margin: 0;
		padding: 0;
		position: fixed;
		right: 16px;
		text-align: right;
		z-index: 9991;
	}
	body.ndet-modern-tabs .ndet-ma-float .spinner {
		margin: 0;
	}
	body.ndet-modern-tabs.wp-core-ui .ndet-ma-float .button-primary {
		box-shadow: 0 10px 24px rgba(var(--ndet-ma-accent-rgb), 0.35), 0 2px 6px rgba(16, 24, 40, 0.12);
		font-size: 15px;
		min-height: 48px;
		padding: 0 24px;
	}

	/* Neo Pulse's chat button sits where the tab bar is: lift it above the bar (and above a
	 * floating Save). Its own rules use !important, hence these.
	 * Under 768px Neo Pulse turns its side tab into the same round button. */
	body.ndet-modern-tabs #neo-pulse-chat-mobile-launcher.fcw-mobile-launcher:not(.fcw-launcher--edge-tab) {
		bottom: calc(var(--ndet-ma-tabs-h) + var(--ndet-ma-tabs-gap) + 12px) !important;
	}
	body.ndet-modern-tabs.ndet-ma-has-float #neo-pulse-chat-mobile-launcher.fcw-mobile-launcher:not(.fcw-launcher--edge-tab) {
		bottom: calc(var(--ndet-ma-tabs-h) + var(--ndet-ma-tabs-gap) + 72px) !important;
	}
}
@media screen and (max-width: 767px) {
	body.ndet-modern-tabs #neo-pulse-chat-mobile-launcher.fcw-mobile-launcher.fcw-mobile-launcher {
		bottom: calc(var(--ndet-ma-tabs-h) + var(--ndet-ma-tabs-gap) + 12px) !important;
	}
	body.ndet-modern-tabs.ndet-ma-has-float #neo-pulse-chat-mobile-launcher.fcw-mobile-launcher.fcw-mobile-launcher {
		bottom: calc(var(--ndet-ma-tabs-h) + var(--ndet-ma-tabs-gap) + 72px) !important;
	}
}
@media screen and (max-width: 782px) {

	/* Status filters: one scrolling row. */
	body.ndet-modern-ui #wpbody-content .subsubsub {
		flex-wrap: nowrap;
		float: none;
		margin: 8px 0 10px;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
		width: max-content;
	}
	body.ndet-modern-ui #wpbody-content .subsubsub li {
		flex: none;
	}

	/* The dot before the title says it; no Status line on phone cards. */
	body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr:not(.is-expanded) > td.column-ndet_status {
		display: none;
	}

	/* Notices under a plugin: no card around them. */
	body.ndet-modern-ui #wpbody-content table.wp-list-table.plugins > tbody > tr.plugin-update-tr {
		background: transparent;
		border: 0;
		box-shadow: none;
		min-height: 0;
		padding: 0;
	}

	/* Desktop-only extras. */
	body.ndet-modern-tabs #wpfooter,
	body.ndet-modern-ui #screen-meta-links,
	body.ndet-modern-ui #dashboard_primary,
	body.ndet-modern #wpadminbar #wp-admin-bar-comments {
		display: none;
	}

	/* List tables as cards. */
	body.ndet-modern-ui #wpbody-content table.wp-list-table {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		display: block;
		overflow: visible;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table tfoot {
		display: none;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table :is(thead, tbody) {
		background: transparent;
		display: block;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table thead tr {
		background: transparent;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table thead tr {
		align-items: center;
		display: flex;
		padding: 0 4px 6px 15px;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table thead :is(th, td) {
		background: transparent;
		border: 0;
		padding: 0;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table thead :is(th, td):not(.check-column, .column-primary) {
		display: none;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table thead .check-column {
		padding: 8px 13px 8px 0;
		width: auto;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table .check-column input[type="checkbox"] {
		margin: 0;
		vertical-align: middle;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr {
		background: var(--ndet-ma-surface);
		border: var(--ndet-ma-outline-w, 1px) solid var(--ndet-ma-outline, var(--ndet-ma-border));
		border-radius: 20px;
		box-shadow: var(--ndet-ma-shadow);
		box-sizing: border-box;
		display: block;
		margin: 0 0 10px;
		min-height: 64px;
		padding: 14px 14px 12px 52px;
		position: relative;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr:not(:has(> .check-column)) {
		padding-left: 16px;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr > :is(th, td) {
		background: transparent;
		border: 0;
		box-sizing: border-box;
		padding: 0;
	}
	/* The checkbox centred on the title's first line, with a little room before the title. */
	body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr > .check-column {
		align-items: center;
		display: flex;
		height: 22px;
		left: 14px;
		padding: 0;
		position: absolute;
		top: 14px;
		width: auto;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr > .column-primary {
		display: block;
		padding-right: 40px;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table .column-primary :is(strong, .row-title) {
		font-size: 15px;
		line-height: 22px;
	}
	/* The date, always under the title. */
	body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr:not(.is-expanded) > td.column-date {
		color: var(--ndet-ma-muted);
		display: block !important;
		font-size: 13px;
		padding: 4px 0 0;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr:not(.is-expanded) > td.column-date::before {
		content: none;
	}
	/* Expanded rows: the other columns underneath. */
	body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr.is-expanded > td:not(.column-primary, .check-column) {
		border-top: 1px solid var(--ndet-ma-border);
		margin-top: 8px;
		padding: 8px 0 0 38%;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr.is-expanded > td:not(.column-primary, .check-column)::before {
		color: var(--ndet-ma-muted);
		font-weight: 600;
		left: 0;
		top: 8px;
	}
	/* The show-more chevron. */
	body.ndet-modern-ui #wpbody-content table.wp-list-table .toggle-row {
		border-radius: 999px;
		right: 0;
		top: 0;
	}
	/* Row actions as buttons. */
	body.ndet-modern-ui #wpbody-content table.wp-list-table .row-actions {
		color: transparent;
		display: flex;
		flex-wrap: wrap;
		font-size: 0;
		gap: 6px;
		left: 0;
		margin: 0 -40px 0 0;
		padding: 10px 0 0;
		position: static;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table .row-actions span {
		font-size: 0;
		padding: 0;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table .row-actions :is(a, button.button-link) {
		align-items: center;
		background: var(--ndet-ma-hover);
		border-radius: 999px;
		color: var(--ndet-ma-text-2);
		display: inline-flex;
		font-size: 13px;
		font-weight: 500;
		min-height: 36px;
		padding: 0 12px;
		text-decoration: none;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table .row-actions .edit :is(a, button.button-link) {
		background: var(--ndet-ma-tint);
		color: var(--ndet-ma-accent);
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table .row-actions :is(.trash, .delete, .spam) :is(a, button.button-link) {
		color: #b42318;
	}
	/* Hover colour off (it lingers after a tap). */
	body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr:hover > :is(th, td) {
		background: transparent;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.plugins > tbody > tr.active {
		background: var(--ndet-ma-surface);
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table.plugins > tbody > tr > :is(th, td) {
		background: transparent;
		border-left: 0;
		box-shadow: none;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr.no-items {
		padding-left: 16px;
	}
	body.ndet-modern-ui #wpbody-content table.wp-list-table > tbody > tr.inline-edit-row {
		padding: 12px;
	}
}

/* ------------------------------------------------------------------------
 * Login screen
 * ---------------------------------------------------------------------- */

body.login.ndet-modern-login {
	background: #eef2f7;
}
body.login.ndet-modern-login #login {
	padding-top: 9vh;
}
body.login.ndet-modern-login form {
	border: 0;
	border-radius: 24px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 20px 48px rgba(15, 23, 42, 0.08);
	padding: 30px 30px 34px;
}
body.login.ndet-modern-login form :is(.input, input[type="text"], input[type="password"], input[type="email"]) {
	border: 1px solid #d0d5dd;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
body.login.ndet-modern-login form :is(.input, input[type="text"], input[type="password"], input[type="email"]):focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
}
body.login.ndet-modern-login .button,
body.login.ndet-modern-login .button-primary {
	border-radius: 999px;
}
body.login.ndet-modern-login .button-primary {
	padding: 0 20px;
}
body.login.ndet-modern-login :is(.message, .notice, #login_error, .success) {
	border: 1px solid #e4e7ec;
	border-left-width: 4px;
	border-radius: 14px;
	box-shadow: none;
}
body.login.ndet-modern-login :is(#nav a, #backtoblog a) {
	color: #667085;
}

/* ------------------------------------------------------------------------
 * Block editor: the boxes under the post, the top bar and the settings sidebar
 * ---------------------------------------------------------------------- */

/* The boxes under the post just show, after it (modern-editor.js sizes the post's frame to the
 * post, so the editor area scrolls through the post and on into the boxes). No drag handle, no
 * "Meta Boxes" bar, always open. */
body.ndet-modern-meta.ndet-ma-flow .interface-interface-skeleton__content {
	overflow-x: hidden;
	overflow-y: auto;
	background: var(--ndet-ma-canvas);
}
body.ndet-modern-meta.ndet-ma-flow .editor-visual-editor {
	flex: 0 0 auto !important;
	height: var(--ndet-ma-canvas-h, 100%) !important;
	min-height: 0;
	max-height: none !important;
}
body.ndet-modern-meta.ndet-ma-flow .edit-post-meta-boxes-main {
	flex: 0 0 auto;
	height: auto !important;
	max-height: none !important;
	overflow: visible;
	border-top: 0;
	background: var(--ndet-ma-canvas);
	box-shadow: none;
}
body.ndet-modern-meta.ndet-ma-flow .edit-post-meta-boxes-main__presenter {
	display: none;
}
body.ndet-modern-meta.ndet-ma-flow .edit-post-meta-boxes-main__liner,
body.ndet-modern-meta.ndet-ma-flow .edit-post-meta-boxes-main__liner[hidden] {
	display: block !important;
	overflow: visible;
}
body.ndet-modern-meta .edit-post-meta-boxes-area {
	background: transparent;
}
body.ndet-modern-meta.ndet-ma-flow .edit-post-meta-boxes-area.is-normal {
	padding: 24px clamp(16px, 3vw, 32px) 8px;
}
body.ndet-modern-meta.ndet-ma-flow .edit-post-meta-boxes-area.is-advanced {
	padding: 0 clamp(16px, 3vw, 32px) 24px;
}
body.ndet-modern-meta .edit-post-meta-boxes-area .postbox {
	margin-bottom: 16px;
	overflow: hidden;
}
body.ndet-modern-meta .edit-post-meta-boxes-area .postbox-header {
	border-bottom: 1px solid var(--ndet-ma-border);
}
body.ndet-modern-meta .edit-post-meta-boxes-area .postbox-header .hndle {
	padding: 16px 20px;
	color: var(--ndet-ma-text);
	font-size: 15px;
	font-weight: 600;
}
body.ndet-modern-meta .edit-post-meta-boxes-area .postbox .inside {
	padding: 4px 20px 16px;
}
body.ndet-modern-meta .edit-post-meta-boxes-area .postbox .handle-actions button {
	border-radius: 10px;
}
body.ndet-modern-meta .edit-post-meta-boxes-area .postbox .handle-actions button:hover {
	background: var(--ndet-ma-hover);
}

/* Top bar: the soft frame colour, every control a white pill or round button on it (the admin
 * bar's look), the inserter and Save in the blue gradient. */
body.ndet-modern-meta .editor-header {
	gap: 8px;
	padding: 0 12px 0 8px;
	border-bottom: 1px solid var(--ndet-ma-border);
	background: var(--ndet-ma-frame);
}
body.ndet-modern-meta .editor-header .components-button.has-icon:not(.editor-document-tools__inserter-toggle),
body.ndet-modern-meta .editor-header .editor-header__post-preview-button {
	min-width: 40px;
	height: 40px;
	border-radius: 999px;
	color: var(--ndet-ma-text-2);
	transition: background-color .15s, color .15s, box-shadow .15s;
}
body.ndet-modern-meta .editor-header .components-button.has-icon:not(.editor-document-tools__inserter-toggle):hover:not(:disabled, [aria-disabled="true"]) {
	background: var(--ndet-ma-surface);
	color: var(--ndet-ma-text);
	box-shadow: var(--ndet-ma-shadow-xs);
}
body.ndet-modern-meta .editor-header .components-button.has-icon:is(.is-pressed, [aria-expanded="true"]):not(.editor-document-tools__inserter-toggle) {
	background: var(--ndet-ma-surface);
	color: var(--ndet-ma-accent);
	box-shadow: inset 0 0 0 1px var(--ndet-ma-accent-soft), var(--ndet-ma-shadow-xs);
}
body.ndet-modern-meta .editor-header .components-button.has-icon:is(.is-pressed, [aria-expanded="true"]):not(.editor-document-tools__inserter-toggle) svg {
	fill: currentColor;
}
body.ndet-modern-meta .editor-header .components-button:focus-visible {
	box-shadow: var(--ndet-ma-ring);
	outline: none;
}
body.ndet-modern-meta .editor-document-tools__left {
	gap: 4px;
}
/* The back button keeps its own 40px with a gap after it, so its hover circle never runs into the
 * inserter. */
body.ndet-modern-meta .editor-header__back-button {
	flex: none;
	min-width: 40px;
	margin-right: 10px;
}
body.ndet-modern-meta .editor-header__back-button :is(a, button).components-button {
	width: 40px;
}
/* The block inserter: a round blue button (turns into a cross while open). */
body.ndet-modern-meta .editor-header .editor-document-tools__inserter-toggle.components-button {
	width: 40px;
	min-width: 40px;
	height: 40px;
	margin-right: 4px;
	border-radius: 999px;
	background: var(--ndet-ma-accent-grad);
	box-shadow: var(--ndet-ma-accent-glow);
	color: #fff;
}
body.ndet-modern-meta .editor-header .editor-document-tools__inserter-toggle.components-button:hover {
	background: var(--ndet-ma-accent-grad-hover);
	color: #fff;
}
body.ndet-modern-meta .editor-header .editor-document-tools__inserter-toggle.components-button svg {
	fill: currentColor;
}
/* Edit with Elementor: a white pill with Elementor's mark. Elementor styles it with an id and
 * three classes (33px high, 2px margins, a bigger icon), so these lead with both ids. */
body.ndet-modern-meta #elementor-switch-mode {
	display: flex;
	align-items: center;
	margin: 0 0 0 8px;
}
body.ndet-modern-meta #elementor-switch-mode #elementor-switch-mode-button.button {
	display: inline-flex;
	align-items: center;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0 18px 0 14px;
	border: 1px solid var(--ndet-ma-border);
	border-radius: 999px;
	background: var(--ndet-ma-surface);
	box-shadow: var(--ndet-ma-shadow-xs) !important;
	color: var(--ndet-ma-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-shadow: none;
	transform: none;
	transition: box-shadow .15s, border-color .15s;
}
body.ndet-modern-meta #elementor-switch-mode #elementor-switch-mode-button.button:hover {
	border-color: var(--ndet-ma-border-strong);
	background: var(--ndet-ma-surface);
	box-shadow: var(--ndet-ma-shadow-hover) !important;
	color: var(--ndet-ma-text);
}
body.ndet-modern-meta #elementor-switch-mode #elementor-switch-mode-button.button:focus-visible {
	box-shadow: var(--ndet-ma-ring) !important;
	outline: none;
}
/* The label Elementor shows (Edit with Elementor, or Edit with WordPress on an Elementor page):
 * mark and words centred on one line. */
body.ndet-modern-meta:not(.elementor-editor-active) #elementor-switch-mode-button .elementor-switch-mode-off,
body.ndet-modern-meta.elementor-editor-active #elementor-switch-mode-button .elementor-switch-mode-on,
body.ndet-modern-meta #elementor-edit-mode-button .elementor-edit-mode-gutenberg {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
}
body.ndet-modern-meta #elementor-switch-mode #elementor-switch-mode-button i,
body.ndet-modern-meta #elementor-edit-mode-button.button i {
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	vertical-align: middle;
}
body.ndet-modern-meta #elementor-switch-mode #elementor-switch-mode-button i {
	color: #d30c5c;
}
/* On a page built with Elementor, Elementor adds its own "Edit with Elementor" beside the switch:
 * the page's main action there, so the blue gradient pill. */
body.ndet-modern-meta #elementor-switch-mode #elementor-edit-mode-button.button,
body.ndet-modern-meta #elementor-edit-mode-button.button {
	display: inline-flex;
	align-items: center;
	height: 40px;
	min-height: 40px;
	margin: 0 0 0 8px;
	padding: 0 20px 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--ndet-ma-accent-grad);
	box-shadow: var(--ndet-ma-accent-glow);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-shadow: none;
}
body.ndet-modern-meta #elementor-edit-mode-button.button:hover {
	background: var(--ndet-ma-accent-grad-hover);
	color: #fff;
}
body.ndet-modern-meta #elementor-edit-mode-button.button:focus-visible {
	box-shadow: var(--ndet-ma-ring), var(--ndet-ma-accent-glow);
	outline: none;
}
/* The post's name in the middle: a white pill. */
body.ndet-modern-meta .editor-document-bar {
	height: 40px;
	border: 1px solid var(--ndet-ma-border);
	border-radius: 999px;
	background: var(--ndet-ma-surface);
	box-shadow: var(--ndet-ma-shadow-xs);
}
body.ndet-modern-meta .editor-document-bar:hover {
	background: var(--ndet-ma-surface);
	box-shadow: var(--ndet-ma-shadow-hover);
}
body.ndet-modern-meta .editor-document-bar .components-button {
	border-radius: 999px;
}
body.ndet-modern-meta .editor-document-bar__post-title {
	color: var(--ndet-ma-text);
	font-weight: 600;
}
body.ndet-modern-meta .editor-document-bar__post-type-label {
	color: var(--ndet-ma-muted);
}
/* Save / Publish / Update: the blue gradient pill. Save draft: a white pill. */
body.ndet-modern-meta .editor-header__settings {
	gap: 6px;
}
body.ndet-modern-meta .editor-header :is(.editor-post-publish-button, .editor-post-publish-panel__toggle).components-button.is-primary {
	height: 40px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--ndet-ma-accent-grad);
	box-shadow: var(--ndet-ma-accent-glow);
	color: #fff;
	font-weight: 600;
}
body.ndet-modern-meta .editor-header :is(.editor-post-publish-button, .editor-post-publish-panel__toggle).components-button.is-primary:hover:not(:disabled, [aria-disabled="true"]) {
	background: var(--ndet-ma-accent-grad-hover);
	color: #fff;
}
body.ndet-modern-meta .editor-header :is(.editor-post-publish-button, .editor-post-publish-panel__toggle).components-button.is-primary:is(:disabled, [aria-disabled="true"]) {
	background: var(--ndet-ma-segment);
	box-shadow: none;
	color: var(--ndet-ma-muted);
}
body.ndet-modern-meta .editor-header :is(.editor-post-save-draft, .editor-post-saved-state).components-button {
	height: 40px;
	padding: 0 16px;
	border-radius: 999px;
}
body.ndet-modern-meta .editor-header .editor-post-save-draft.components-button {
	border: 1px solid var(--ndet-ma-border);
	background: var(--ndet-ma-surface);
	color: var(--ndet-ma-text);
}
/* Other plugins' buttons in the bar (Neo Pulse and the like) get the same height and shape. */
body.ndet-modern-meta .editor-header .interface-pinned-items .components-button:not(.has-icon) {
	height: 40px;
	border-radius: 999px;
}

/* Settings sidebar: Post / Block as a segmented pill; buttons and fields rounded. */
body.ndet-modern-meta .editor-sidebar__panel-tabs,
body.ndet-modern-meta .interface-complementary-area-header {
	border-bottom: 1px solid var(--ndet-ma-border);
}
body.ndet-modern-meta .editor-sidebar [role="tablist"] {
	gap: 2px;
	margin: 10px 8px 10px 12px;
	padding: 3px;
	border-radius: 999px;
	background: var(--ndet-ma-segment);
}
body.ndet-modern-meta .editor-sidebar [role="tablist"] [role="tab"] {
	height: 34px;
	padding: 0 16px;
	border-radius: 999px;
	color: var(--ndet-ma-text-2);
	font-weight: 600;
}
body.ndet-modern-meta .editor-sidebar [role="tablist"] [role="tab"][aria-selected="true"] {
	background: var(--ndet-ma-surface);
	box-shadow: var(--ndet-ma-shadow-xs);
	color: var(--ndet-ma-text);
}
/* WordPress's sliding underline under the chosen tab: the white pill shows it instead. */
body.ndet-modern-meta .editor-sidebar [role="tablist"]::before,
body.ndet-modern-meta .editor-sidebar [role="tablist"]::after,
body.ndet-modern-meta .editor-sidebar [role="tablist"] [role="tab"]::before,
body.ndet-modern-meta .editor-sidebar [role="tablist"] [role="tab"]::after {
	display: none;
}
body.ndet-modern-meta .editor-sidebar .components-panel__body-toggle.components-button {
	border-radius: 12px;
}
body.ndet-modern-meta .editor-sidebar .components-panel__body {
	border-color: var(--ndet-ma-border);
}
body.ndet-modern-meta .editor-sidebar .components-button.is-secondary,
body.ndet-modern-meta .editor-sidebar .editor-post-featured-image__toggle,
body.ndet-modern-meta .editor-sidebar .editor-post-trash.components-button {
	border-radius: 999px;
}
body.ndet-modern-meta .editor-sidebar .editor-post-featured-image__preview,
body.ndet-modern-meta .editor-sidebar .editor-post-featured-image__preview img,
body.ndet-modern-meta .editor-sidebar .editor-post-featured-image__container {
	border-radius: var(--ndet-ma-r-item);
}
body.ndet-modern-meta .editor-sidebar .editor-post-trash.components-button {
	box-shadow: inset 0 0 0 1px #fda29b;
	color: #d92d20;
}
body.ndet-modern-meta .editor-sidebar .editor-post-trash.components-button:hover {
	background: #fef3f2;
	box-shadow: inset 0 0 0 1px #f04438;
}
body.ndet-modern-meta .editor-sidebar .editor-post-panel__row-control .components-button.is-tertiary,
body.ndet-modern-meta .editor-sidebar .editor-post-panel__row-control .components-dropdown .components-button {
	border-radius: 10px;
}
body.ndet-modern-meta .editor-sidebar :is(.components-text-control__input, .components-textarea-control__input, .components-input-control__container, .components-select-control__input, .components-form-token-field__input-container) {
	border-radius: var(--ndet-ma-r-field);
}