/**
 * WIZSP design system — the ONE file for fonts, colors, spacing, type
 * scale, the shell sidebar nav, page headers, and buttons across every
 * WIZSP wp-admin tool (Analytics, Proposal Builder, Briefing).
 *
 * THIS is the canonical source — the only copy that exists. It ships
 * inside the wizsp-design-system plugin (this file), which every other
 * WIZSP plugin declares as a hard dependency (`Requires Plugins:
 * wizsp-design-system` in its own header) and consumes by naming the
 * 'wizsp-design-system' style handle as a dependency of its own
 * admin.css enqueue — never by re-declaring or copying this file. If
 * this plugin is deactivated, every dependent plugin's admin screens
 * render unstyled rather than silently drifting from a stale local copy;
 * that degradation is intentional, not a bug to route around with a
 * fallback copy.
 *
 * A component NOT covered here (tables, badges, forms, charts, cards) is a
 * plugin-specific concern and stays in that plugin's own stylesheet — but
 * it must consume the tokens below via var(...), never redeclare a literal
 * hex/px value that exists here.
 *
 * Hard rules, every dependent plugin: no gradients, no drop shadows
 * (surfaces separate by a 1px border only), status colors
 * (success/warning/danger) are semantic only, one radius scale, fonts
 * self-hosted only (never a Google Fonts link — that sends every admin's
 * IP to Google on every page load). Outfit is the default since 2.0.0
 * (the brand face, from the WIZSP business card); it has no Greek, so its
 * stack hands Greek to Manrope and polytonic to Inter — every option
 * offered in Design System → Ρυθμίσεις is self-hosted here and verified
 * (via real cmap inspection, not just a subset label) to actually cover
 * Greek before it's added — see class-wzds-settings.php's
 * available_fonts().
 *
 * Palette since 2.0.0: the business-card brand — Navy #001799 (CMYK
 * 100/85/0/40) as primary, Signal Blue #2758CC (CMYK 81/57/0/20) as the
 * accent, navy-tinted neutrals. The token NAMES did not change, so every
 * dependent plugin picks the new brand up with no edit of its own.
 *
 * The full component library for front-end pages and new screens is a
 * separate, opt-in handle: 'wizsp-ui' (assets/wizsp-ui.css). It carries a
 * global reset and element selectors, so it is never loaded into
 * wp-admin itself — see wizsp-design-system.php.
 */

/* ---------------------------------------------------------------------------
 * 1. Fonts — self-hosted, one variable file per Unicode subset per family
 *    so a browser downloads only what a page actually renders. Greek
 *    first: every one of these tools is a Greek-language interface.
 * ------------------------------------------------------------------------- */

/* Outfit — the brand face (default since 2.0.0). Latin and Latin
 * Extended only: Outfit ships no Greek at all, which the cmap check
 * confirms (zero code points in U+0370-03FF). Romanian ș/ț live in
 * latin-ext, so both subsets are needed for the .ro sites. */
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/outfit-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/outfit-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope — Greek only, the brand guide's Greek companion to Outfit.
 * Only the greek subset ships: Latin text stays in Outfit, which is the
 * point. Verified complete for modern Greek (every tonos and dialytika
 * vowel, final sigma). It has NO greek-ext subset and no polytonic
 * glyphs, so it is never offered on its own in the font picker — the
 * Outfit stack ends in Inter, whose greek-ext file covers U+1F00-1FFF. */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('fonts/manrope-greek.woff2') format('woff2');
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Inter — the pre-2.0 default, still selectable, and the polytonic
 * fallback at the end of the Outfit stack. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-greek.woff2') format('woff2');
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-greek-ext.woff2') format('woff2');
	unicode-range: U+1F00-1FFF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Noto Sans — an admin-selectable alternative. Verified via cmap
 * inspection (fontTools), not just Google's subset label: it actually
 * contains every modern Greek diacritic/final-sigma glyph AND the full
 * polytonic block, U+1F00-1FFF. Two other candidates checked the same
 * way (Roboto, Open Sans) both advertise an identical greek-ext
 * unicode-range but ship a near-empty stub there — missing, not just
 * unverified — so neither is offered. */
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/notosans-greek.woff2') format('woff2');
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/notosans-greek-ext.woff2') format('woff2');
	unicode-range: U+1F00-1FFF;
}

@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/notosans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/notosans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
 * 2. Tokens — every color, spacing, radius and type value used by the
 *    shared components below (and by every plugin's own bespoke CSS) is a
 *    var() read from here. No literal repeats anywhere else.
 * ------------------------------------------------------------------------- */
:root {
	/* Color — core palette. The business-card brand since 2.0.0: Navy
	   #001799 and its darker steps from the same scale wizsp-ui.css uses
	   (--wz-navy-900 / -950), so admin and front end hover alike. */
	--wizsp-primary: #001799;
	--wizsp-primary-hover: #000E6B;
	--wizsp-primary-active: #000A47;
	--wizsp-primary-tint: #E3E9F9;

	/* Signal Blue — the second brand colour. For links and one accent per
	   screen; never a second primary button colour. */
	--wizsp-accent: #2758CC;

	/* Neutrals — navy-tinted, not Tailwind slate, so greys sit with the
	   brand instead of beside it. */
	--wizsp-text-primary: #0B1033;
	--wizsp-text-secondary: #4A5070;
	--wizsp-text-muted: #6A7090;

	--wizsp-border: #DCE0EC;
	--wizsp-page-bg: #F7F8FB;
	--wizsp-surface: #FFFFFF;
	--wizsp-neutral-tint: #EBEEF5;

	/* Color — semantic status only, never decorative */
	--wizsp-success: #1E7A4F;
	--wizsp-success-tint: rgba(30, 122, 79, 0.12);
	--wizsp-warning: #B26B00;
	--wizsp-warning-tint: rgba(178, 107, 0, 0.12);
	--wizsp-danger: #C42B3B;
	--wizsp-danger-tint: rgba(196, 43, 59, 0.12);

	/* On the navy shell fill only — never on a light surface */
	--wizsp-ondark-text: rgba(255, 255, 255, 0.72);
	--wizsp-ondark-text-subtle: rgba(255, 255, 255, 0.6);
	--wizsp-ondark-text-faint: rgba(255, 255, 255, 0.4);
	--wizsp-ondark-hover-bg: rgba(255, 255, 255, 0.08);
	--wizsp-ondark-border: rgba(255, 255, 255, 0.15);

	/* Typography */
	--wizsp-font-family: 'Outfit', 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--wizsp-weight-regular: 400;
	--wizsp-weight-medium: 500;
	--wizsp-weight-semibold: 600;
	--wizsp-weight-bold: 700;
	--wizsp-weight-black: 800;

	/* Type scale — one scale, every plugin, every screen. Matches the
	   client's own WIZSP Design Language reference doc exactly. */
	--wizsp-text-display: 800 30px/1.2 var(--wizsp-font-family);
	--wizsp-text-h2: 800 22px/1.3 var(--wizsp-font-family);
	--wizsp-text-h3: 700 16px/1.35 var(--wizsp-font-family);
	--wizsp-text-body: 400 14px/1.5 var(--wizsp-font-family);
	--wizsp-text-label: 600 12px/1.3 var(--wizsp-font-family);
	--wizsp-text-micro: 700 11px/1.3 var(--wizsp-font-family);

	/* Spacing scale — 4 / 8 / 12 / 16 / 24 / 32, no off-scale value */
	--wizsp-space-1: 4px;
	--wizsp-space-2: 8px;
	--wizsp-space-3: 12px;
	--wizsp-space-4: 16px;
	--wizsp-space-6: 24px;
	--wizsp-space-8: 32px;

	/* Radius — fixed scale. Matches the client's own WIZSP Design Language
	   reference doc, which specifies "full" as 999px for pills/avatars —
	   kept as 9999px here instead, since 999px stops fully rounding any
	   element wider than 999px (a wide pill badge, say), while 9999px has
	   no such ceiling and is visually identical everywhere it stays
	   accurate. */
	--wizsp-radius-btn: 6px;
	--wizsp-radius-tile: 9px;
	--wizsp-radius-card: 12px;
	--wizsp-radius-full: 9999px;

	/* Borders */
	--wizsp-border-width: 1px;
	--wizsp-border-rule: var(--wizsp-border-width) solid var(--wizsp-border);

	/* Motion — one easing curve, shared */
	--wizsp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------------
 * 3. Shell — the fixed left sidebar that replaces the native #adminmenu.
 *
 * Scoped to body.wizsp-shell-page (set via each plugin's own
 * admin_body_class filter, gated on that plugin's own admin screens) rather
 * than a loose selector, so this never leaks onto an unrelated wp-admin
 * screen or a sibling plugin's page that happens to share a slug prefix —
 * that exact wildcard-matching bug has already happened once between two
 * of these plugins.
 * ------------------------------------------------------------------------- */
body.wizsp-shell-page #adminmenumain,
body.wizsp-shell-page #adminmenuback,
body.wizsp-shell-page #adminmenuwrap,
body.wizsp-shell-page #wpfooter {
	display: none !important;
}

body.wizsp-shell-page #wpcontent {
	margin-left: 0 !important;
}

body.wizsp-shell-page #wpbody-content {
	margin-left: 220px;
	width: calc(100% - 220px);
	max-width: calc(100vw - 220px);
	box-sizing: border-box;
	padding-bottom: var(--wizsp-space-8);
}

body.wizsp-shell-page .wrap {
	overflow-x: auto;
	max-width: 100%;
}

body.wizsp-shell-page .wizsp-shell-nav {
	position: fixed;
	/* 0, not 32px, since 1.6.0: wzds_suppress_admin_bar() unhooks the bar's
	 * renderer on these screens and wzds_close_admin_bar_gap() removes the
	 * padding it reserved, so there is no longer a bar to clear. The three
	 * belong together — any one without the others and the nav either
	 * overlaps the bar or floats below a 32px gap.
	 *
	 * 1.6.0 shipped this line with only a `show_admin_bar` filter behind
	 * it, which wp-admin never consults; the result was a nav sliding under
	 * a bar that was still there. Fixed in 1.6.1. */
	top: 0;
	left: 0;
	bottom: 0;
	width: 220px;
	background: var(--wizsp-primary);
	z-index: 9990;
	display: flex;
	flex-direction: column;
	padding: var(--wizsp-space-6) 0;
	overflow-y: auto;
	font-family: var(--wizsp-font-family);
}

body.wizsp-shell-page .wizsp-shell-brand {
	display: flex;
	align-items: center;
	gap: var(--wizsp-space-3);
	padding: 0 var(--wizsp-space-4) var(--wizsp-space-6);
	color: #fff;
	font-weight: var(--wizsp-weight-bold);
	font-size: 14.4px;
	line-height: 1.35;
}

body.wizsp-shell-page .wizsp-shell-logo {
	width: 28px;
	height: 28px;
	border-radius: var(--wizsp-radius-btn);
	object-fit: cover;
	flex: none;
	display: block;
}

/* The bundled vector mark (wzds_logo_url()) is a portrait glyph on a
 * transparent ground, not a square avatar: cropping it to fill would cut
 * the mark itself. */
body.wizsp-shell-page .wizsp-shell-logo--mark {
	object-fit: contain;
	border-radius: 0;
}

/* No flex:1 here. A grown, empty box with its links pinned to the top is a
 * dead gap before the back-link on any menu with few items — this is the
 * exact bug already found and fixed once; the shared file must not
 * reintroduce it. */
body.wizsp-shell-page .wizsp-shell-nav nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 var(--wizsp-space-3);
}

body.wizsp-shell-page .wizsp-shell-item {
	display: block;
	padding: var(--wizsp-space-2) var(--wizsp-space-3);
	border-radius: var(--wizsp-radius-btn);
	color: var(--wizsp-ondark-text);
	font-size: 13px;
	font-weight: var(--wizsp-weight-medium);
	text-decoration: none;
	transition: all 0.2s var(--wizsp-ease);
}

body.wizsp-shell-page .wizsp-shell-item:hover {
	background: var(--wizsp-ondark-hover-bg);
	color: #fff;
	text-decoration: none;
}

body.wizsp-shell-page .wizsp-shell-item.is-active {
	background: var(--wizsp-surface);
	color: var(--wizsp-primary);
	font-weight: var(--wizsp-weight-bold);
}

body.wizsp-shell-page .wizsp-shell-back {
	margin: var(--wizsp-space-4) var(--wizsp-space-4) 0;
	padding-top: var(--wizsp-space-4);
	border-top: 1px solid var(--wizsp-ondark-border);
	color: var(--wizsp-ondark-text-subtle);
	font-size: 12px;
	text-decoration: none;
}

body.wizsp-shell-page .wizsp-shell-back:hover {
	color: #fff;
	text-decoration: none;
}

/* Links to every OTHER installed, permitted WIZSP tool — resolved at
 * render time from the wzds_sibling_tools() registry (wzds_render_
 * sibling_nav() in the WIZSP Design System plugin), never hardcoded per
 * plugin. Renders nothing when there's nothing to link to. */
body.wizsp-shell-page .wizsp-shell-tools {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: var(--wizsp-space-4);
	padding: var(--wizsp-space-4) var(--wizsp-space-3) 0;
	border-top: 1px solid var(--wizsp-ondark-border);
}

body.wizsp-shell-page .wizsp-shell-tools__label {
	padding: 0 var(--wizsp-space-3) var(--wizsp-space-1);
	font-size: 11px;
	font-weight: var(--wizsp-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wizsp-ondark-text-faint);
}

/* Below 960px the fixed 220px column eats too much of an already-narrow
   screen — it becomes a static, horizontally scrollable strip above the
   content instead of a fixed side column. */
@media (max-width: 960px) {
	body.wizsp-shell-page #wpbody-content {
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100vw !important;
	}
	body.wizsp-shell-page .wizsp-shell-nav {
		position: static;
		top: auto;
		left: auto;
		bottom: auto;
		width: auto;
		flex-direction: row;
		align-items: center;
		padding: var(--wizsp-space-2);
		gap: var(--wizsp-space-2);
		overflow-x: auto;
		overflow-y: visible;
	}
	body.wizsp-shell-page .wizsp-shell-brand {
		padding: 0 var(--wizsp-space-2) 0 0;
		flex: none;
	}
	body.wizsp-shell-page .wizsp-shell-nav nav {
		flex-direction: row;
		padding: 0;
		gap: var(--wizsp-space-1);
		flex: none;
	}
	body.wizsp-shell-page .wizsp-shell-item {
		white-space: nowrap;
	}
	body.wizsp-shell-page .wizsp-shell-back {
		margin: 0 0 0 auto;
		padding: 0 var(--wizsp-space-2);
		border-top: none;
		flex: none;
	}
	body.wizsp-shell-page .wizsp-shell-tools {
		flex-direction: row;
		align-items: center;
		gap: var(--wizsp-space-1);
		margin: 0;
		padding: 0 0 0 var(--wizsp-space-2);
		border-top: none;
		border-left: 1px solid var(--wizsp-ondark-border);
		flex: none;
	}
	body.wizsp-shell-page .wizsp-shell-tools__label {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * 4. Type scale defaults — every h1/h2/h3 on a shell page, whether or not
 *    the page also uses the .wizsp-page-header wrapper below.
 * ------------------------------------------------------------------------- */
body.wizsp-shell-page .wrap > h1,
body.wizsp-shell-page .wizsp-h1 {
	font: var(--wizsp-text-display);
	color: var(--wizsp-text-primary);
	margin: 0 0 var(--wizsp-space-1);
	padding: 0;
}

body.wizsp-shell-page .wrap h2,
body.wizsp-shell-page .wizsp-h2 {
	font: var(--wizsp-text-h2);
	color: var(--wizsp-text-primary);
}

body.wizsp-shell-page .wrap h3,
body.wizsp-shell-page .wizsp-h3 {
	font: var(--wizsp-text-h3);
	color: var(--wizsp-text-primary);
}

/* ---------------------------------------------------------------------------
 * 5. Page header — the h1 + description + action-buttons row at the top of
 *    every screen.
 * ------------------------------------------------------------------------- */
body.wizsp-shell-page .wizsp-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wizsp-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--wizsp-space-6);
}

body.wizsp-shell-page .wizsp-page-header h1 {
	font: var(--wizsp-text-display);
	color: var(--wizsp-text-primary);
	margin: 0;
	padding: 0;
}

body.wizsp-shell-page .wizsp-page-header p {
	font: var(--wizsp-text-body);
	color: var(--wizsp-text-secondary);
	margin: var(--wizsp-space-1) 0 0;
	max-width: 68ch;
}

body.wizsp-shell-page .wizsp-page-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wizsp-space-2);
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
 * 6. Buttons — the .wizsp-btn component, plus the same computed values
 *    applied to native WordPress .button/.button-primary markup so a
 *    plugin that hasn't moved to .wizsp-btn yet still renders identically.
 * ------------------------------------------------------------------------- */
body.wizsp-shell-page .wizsp-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: var(--wizsp-space-2) var(--wizsp-space-4);
	border-radius: var(--wizsp-radius-btn);
	border: 1px solid var(--wizsp-primary);
	background: var(--wizsp-primary);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: var(--wizsp-weight-semibold);
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

body.wizsp-shell-page .wizsp-btn:hover,
body.wizsp-shell-page .wizsp-btn:focus {
	background: var(--wizsp-primary-hover);
	border-color: var(--wizsp-primary-hover);
	color: #fff;
}

body.wizsp-shell-page .wizsp-btn:focus-visible {
	outline: 2px solid var(--wizsp-primary);
	outline-offset: 2px;
}

body.wizsp-shell-page .wizsp-btn[disabled],
body.wizsp-shell-page .wizsp-btn[aria-disabled='true'] {
	opacity: 0.5;
	cursor: not-allowed;
}

body.wizsp-shell-page .wizsp-btn--ghost {
	background: var(--wizsp-surface);
	color: var(--wizsp-primary);
	border-color: var(--wizsp-border);
}

body.wizsp-shell-page .wizsp-btn--ghost:hover,
body.wizsp-shell-page .wizsp-btn--ghost:focus {
	background: var(--wizsp-page-bg);
	color: var(--wizsp-primary);
	border-color: var(--wizsp-primary);
}

body.wizsp-shell-page .wizsp-btn--quiet {
	background: transparent;
	border-color: transparent;
	color: var(--wizsp-text-secondary);
	padding: var(--wizsp-space-2);
}

body.wizsp-shell-page .wizsp-btn--quiet:hover,
body.wizsp-shell-page .wizsp-btn--quiet:focus {
	background: var(--wizsp-page-bg);
	border-color: var(--wizsp-border);
	color: var(--wizsp-text-primary);
}

body.wizsp-shell-page .wizsp-btn--danger {
	background: var(--wizsp-surface);
	border-color: var(--wizsp-border);
	color: var(--wizsp-danger);
}

body.wizsp-shell-page .wizsp-btn--danger:hover,
body.wizsp-shell-page .wizsp-btn--danger:focus {
	background: var(--wizsp-danger-tint);
	border-color: var(--wizsp-danger);
	color: var(--wizsp-danger);
}

/* Transparent, no border — for a destructive action that shouldn't read
 * as prominent as a bordered .wizsp-btn--danger (a "remove row" link
 * beside a field, not a confirm-style delete action). */
body.wizsp-shell-page .wizsp-btn--text-danger {
	background: transparent;
	border-color: transparent;
	color: var(--wizsp-danger);
}

body.wizsp-shell-page .wizsp-btn--text-danger:hover,
body.wizsp-shell-page .wizsp-btn--text-danger:focus {
	background: var(--wizsp-danger-tint);
	border-color: transparent;
	color: var(--wizsp-danger);
}

body.wizsp-shell-page .wizsp-btn--sm {
	padding: 5px 10px;
	font-size: 12px;
}

/* Native WordPress buttons, restyled to the same computed values — for a
 * screen (or a whole plugin) that renders core .button markup instead of
 * .wizsp-btn. */
body.wizsp-shell-page .button,
body.wizsp-shell-page .page-title-action {
	border-radius: var(--wizsp-radius-btn) !important;
	padding: var(--wizsp-space-2) var(--wizsp-space-4) !important;
	height: auto !important;
	font-weight: var(--wizsp-weight-semibold);
	border: 1px solid var(--wizsp-border);
	background: var(--wizsp-surface);
	color: var(--wizsp-text-primary);
	transition: all 0.2s var(--wizsp-ease);
	box-shadow: none;
}

body.wizsp-shell-page .button:hover {
	border-color: var(--wizsp-primary);
	color: var(--wizsp-primary);
}

body.wizsp-shell-page .button:active {
	transform: scale(0.97);
}

body.wizsp-shell-page .button-primary,
body.wizsp-shell-page .page-title-action {
	background: var(--wizsp-primary) !important;
	border-color: var(--wizsp-primary) !important;
	color: #fff !important;
}

body.wizsp-shell-page .button-primary:hover,
body.wizsp-shell-page .page-title-action:hover {
	background: var(--wizsp-primary-hover) !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------------------
 * 7. Toggle — an on/off switch, built on a real checkbox so it stays
 *    keyboard- and screen-reader-operable:
 *
 *    <label class="wizsp-toggle">
 *      <input type="checkbox" class="wizsp-toggle__input">
 *      <span class="wizsp-toggle__track"><span class="wizsp-toggle__knob"></span></span>
 *    </label>
 * ------------------------------------------------------------------------- */
body.wizsp-shell-page .wizsp-toggle {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

body.wizsp-shell-page .wizsp-toggle__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

body.wizsp-shell-page .wizsp-toggle__track {
	position: relative;
	display: inline-block;
	flex: none;
	width: 40px;
	height: 22px;
	border-radius: var(--wizsp-radius-full);
	background: var(--wizsp-border);
	transition: background 0.15s var(--wizsp-ease);
}

body.wizsp-shell-page .wizsp-toggle__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: left 0.15s var(--wizsp-ease);
}

body.wizsp-shell-page .wizsp-toggle__input:checked + .wizsp-toggle__track {
	background: var(--wizsp-primary);
}

body.wizsp-shell-page .wizsp-toggle__input:checked + .wizsp-toggle__track .wizsp-toggle__knob {
	left: 21px;
}

body.wizsp-shell-page .wizsp-toggle__input:focus-visible + .wizsp-toggle__track {
	outline: 2px solid var(--wizsp-primary);
	outline-offset: 2px;
}

body.wizsp-shell-page .wizsp-toggle__input:disabled + .wizsp-toggle__track {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
	body.wizsp-shell-page * {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}