/**
 * WIZSP Enterprise — theme stylesheet.
 *
 * Every value in this file is transcribed from `Orbit Dashboard Enterprise.dc.html`.
 * Where WordPress needs a component the mockup does not contain (comments,
 * pagination, block alignments), the styling is composed only from tokens that
 * already appear in the mockup — no new hues, no gradients, no drop shadows.
 *
 * Section order mirrors the mockup: shell, top bar, page header, cards, charts,
 * lists, panels, tables, forms, wizard, states.
 */

/* ================================================================ Tokens */

:root {
	/* Primary — mockup: #002366 nav pill / buttons, #001A4D hover, #001338 deep */
	--wizsp-primary: #002366;
	--wizsp-primary-hover: #001a4d;
	--wizsp-primary-deep: #001338;
	--wizsp-primary-tint: #e6e9f0;

	/* Text */
	--wizsp-text: #0f172a;
	--wizsp-text-secondary: #475569;
	--wizsp-text-muted: #94a3b8;

	/* Surfaces */
	--wizsp-border: #e2e8f0;
	--wizsp-canvas: #f8fafc;
	--wizsp-surface: #ffffff;

	/* Status — used only to represent real state */
	--wizsp-success: #15803d;
	--wizsp-success-tint: rgba(21, 128, 61, 0.12);
	--wizsp-warning: #b45309;
	--wizsp-warning-tint: rgba(180, 83, 9, 0.12);
	--wizsp-danger: #b91c1c;
	--wizsp-danger-tint: rgba(185, 28, 28, 0.12);

	/* On-navy text tiers, from the "Upcoming Renewals" panel */
	--wizsp-on-navy-strong: #ffffff;
	--wizsp-on-navy: rgba(255, 255, 255, 0.7);
	--wizsp-on-navy-muted: rgba(255, 255, 255, 0.55);
	--wizsp-on-navy-surface: rgba(255, 255, 255, 0.12);
	--wizsp-on-navy-border: rgba(255, 255, 255, 0.35);

	/* Radii */
	--wizsp-radius-xs: 4px;
	--wizsp-radius-sm: 6px;
	--wizsp-radius-md: 8px;
	--wizsp-radius-lg: 9px;
	--wizsp-radius-xl: 10px;
	--wizsp-radius-2xl: 12px;

	/* Chrome */
	--wizsp-topbar-height: 64px;
	--wizsp-gutter: 32px;
	--wizsp-max-width: 1440px;

	--wizsp-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--wizsp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ================================================================ Base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--wizsp-canvas);
	color: var(--wizsp-text);
	font-family: var(--wizsp-font);
	font-size: 13px;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-thumb {
	background: var(--wizsp-border);
	border-radius: var(--wizsp-radius-md);
}

a {
	color: var(--wizsp-primary);
	text-decoration: none;
}

a:hover {
	color: var(--wizsp-primary-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wizsp-primary);
	outline-offset: 1px;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

@keyframes wizsp-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.45;
	}
}

.wizsp-skel {
	animation: wizsp-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.wizsp-skel {
		animation: none;
	}

	* {
		transition-duration: 0.01ms !important;
	}
}

.wizsp-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wizsp-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 100;
	padding: 10px 18px;
	border-radius: var(--wizsp-radius-md);
	background: var(--wizsp-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.wizsp-skip-link:focus {
	top: 12px;
	color: #fff;
}

/* ================================================================ Shell */

/* The mockup is a fixed-height app: a 64px bar that never scrolls above a
   scrolling canvas. A website has to scroll as one document, so the bar is
   sticky instead of flex:none — same visual result, correct page behaviour. */
.wizsp-app {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
	background: var(--wizsp-canvas);
}

.wizsp-main {
	flex: 1;
	padding: var(--wizsp-gutter);
}

.wizsp-shell {
	max-width: var(--wizsp-max-width);
	margin: 0 auto;
}

/* ================================================================ Top bar */

.wizsp-topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: var(--wizsp-topbar-height);
	flex: none;
	padding: 0 var(--wizsp-gutter);
	background: var(--wizsp-surface);
	border-bottom: 1px solid var(--wizsp-border);
}

.admin-bar .wizsp-topbar {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .wizsp-topbar {
		top: 46px;
	}
}

.wizsp-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 800;
	color: var(--wizsp-text);
	white-space: nowrap;
}

.wizsp-brand:hover {
	color: var(--wizsp-text);
}

.wizsp-brand__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: var(--wizsp-primary);
	overflow: hidden;
}

.wizsp-brand__mark svg {
	width: 14px;
	height: 14px;
}

.wizsp-brand__mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wizsp-brand__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.wizsp-brand__tagline {
	font-size: 11px;
	font-weight: 500;
	color: var(--wizsp-text-secondary);
}

/* Pill navigation — the mockup's centre control. */
.wizsp-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border-radius: var(--wizsp-radius-xl);
	background: var(--wizsp-canvas);
	list-style: none;
	margin: 0;
}

.wizsp-nav li {
	position: relative;
}

.wizsp-nav a {
	display: block;
	padding: 8px 16px;
	border-radius: var(--wizsp-radius-md);
	font-size: 13px;
	font-weight: 600;
	color: var(--wizsp-text-secondary);
	white-space: nowrap;
}

.wizsp-nav a:hover {
	color: var(--wizsp-text);
}

.wizsp-nav .current-menu-item > a,
.wizsp-nav .current_page_item > a,
.wizsp-nav .current-menu-ancestor > a,
.wizsp-nav .current_page_ancestor > a {
	background: var(--wizsp-primary);
	color: #fff;
}

/* Sub-menus are not in the mockup; they reuse the card surface so a dropdown
   reads as the same material as everything else. */
.wizsp-nav .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 50;
	display: none;
	min-width: 200px;
	padding: 6px;
	margin: 0;
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-xl);
	background: var(--wizsp-surface);
	list-style: none;
}

.wizsp-nav li:hover > .sub-menu,
.wizsp-nav li:focus-within > .sub-menu {
	display: block;
}

.wizsp-nav .sub-menu a {
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 600;
}

.wizsp-nav .sub-menu a:hover {
	background: var(--wizsp-primary-tint);
	color: var(--wizsp-primary);
}

.wizsp-topbar__tools {
	display: flex;
	align-items: center;
	gap: 16px;
}

.wizsp-icon-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wizsp-text-secondary);
	cursor: pointer;
}

.wizsp-icon-button svg {
	width: 18px;
	height: 18px;
	stroke-width: 1.8;
}

.wizsp-icon-button:hover {
	color: var(--wizsp-text);
}

.wizsp-badge-dot {
	position: relative;
	display: flex;
}

.wizsp-badge-dot::after {
	content: "";
	position: absolute;
	top: -2px;
	right: -2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wizsp-danger);
}

.wizsp-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wizsp-primary-tint);
	color: var(--wizsp-primary);
	font-size: 12px;
	font-weight: 700;
	overflow: hidden;
}

.wizsp-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wizsp-avatar--sm {
	width: 28px;
	height: 28px;
	font-size: 11px;
}

.wizsp-avatar--md {
	width: 36px;
	height: 36px;
}

/* Mobile menu toggle — not in the mockup; built from the icon-button spec. */
.wizsp-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-md);
	background: var(--wizsp-surface);
	color: var(--wizsp-text);
	cursor: pointer;
}

.wizsp-nav-toggle svg {
	width: 16px;
	height: 16px;
	stroke-width: 2;
}

/* ================================================================ Page header */

.wizsp-page-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.wizsp-page-header__title {
	margin: 0 0 4px;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wizsp-text);
	line-height: 1.2;
}

.wizsp-page-header__subtitle {
	margin: 0;
	font-size: 14px;
	color: var(--wizsp-text-secondary);
	line-height: 1.5;
}

.wizsp-eyebrow {
	font-size: 12px;
	color: var(--wizsp-text-muted);
}

.wizsp-section-label {
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wizsp-text-muted);
}

/* ================================================================ Buttons */

.wizsp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--wizsp-radius-md);
	background: var(--wizsp-primary);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: normal;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.wizsp-button:hover {
	background: var(--wizsp-primary-hover);
	color: #fff;
}

.wizsp-button:active {
	background: var(--wizsp-primary-deep);
}

.wizsp-button--secondary {
	padding: 9px 16px;
	border-color: var(--wizsp-border);
	background: var(--wizsp-surface);
	color: var(--wizsp-text);
	font-weight: 600;
}

.wizsp-button--secondary:hover {
	background: var(--wizsp-surface);
	border-color: var(--wizsp-text-muted);
	color: var(--wizsp-text);
}

.wizsp-button--danger {
	width: 100%;
	padding: 9px;
	border-color: var(--wizsp-border);
	background: var(--wizsp-surface);
	color: var(--wizsp-danger);
	font-size: 12px;
	font-weight: 700;
}

.wizsp-button--danger:hover {
	background: var(--wizsp-surface);
	border-color: var(--wizsp-danger);
	color: var(--wizsp-danger);
}

.wizsp-button--compact {
	padding: 9px 18px;
}

.wizsp-button--block {
	width: 100%;
}

.wizsp-button-back {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-md);
	background: var(--wizsp-surface);
	color: var(--wizsp-text);
	cursor: pointer;
}

.wizsp-button-back svg {
	width: 15px;
	height: 15px;
	stroke-width: 2;
}

/* ================================================================ Cards */

.wizsp-card {
	background: var(--wizsp-surface);
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-2xl);
	padding: 18px;
}

.wizsp-card--pad-20 {
	padding: 20px;
}

.wizsp-card--pad-24 {
	padding: 24px;
}

.wizsp-card--flush {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.wizsp-card--rail {
	padding: 6px;
}

.wizsp-card__title {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wizsp-text);
}

.wizsp-card__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--wizsp-text);
}

.wizsp-card__metric {
	font-size: 22px;
	font-weight: 800;
	color: var(--wizsp-text);
	margin-bottom: 12px;
}

.wizsp-card__caption {
	font-size: 12px;
	color: var(--wizsp-text-secondary);
	margin-bottom: 4px;
}

.wizsp-card__media {
	width: 100%;
	height: 110px;
	flex: none;
	background: var(--wizsp-primary-tint);
	object-fit: cover;
	display: block;
}

.wizsp-card__body {
	padding: 16px;
}

/* Navy highlight card — at most one per screen, per the design rules. */
.wizsp-card--navy {
	background: var(--wizsp-primary);
	border: 0;
	border-radius: var(--wizsp-radius-2xl);
	padding: 20px;
	color: var(--wizsp-on-navy-strong);
}

.wizsp-card--navy a {
	color: var(--wizsp-on-navy-strong);
}

.wizsp-card--navy .wizsp-card__title {
	font-size: 14px;
	font-weight: 700;
	color: var(--wizsp-on-navy-strong);
	margin: 0;
}

/* ================================================================ Grids */

.wizsp-grid {
	display: grid;
	gap: 18px;
}

.wizsp-grid--feature {
	grid-template-columns: 1.1fr 1fr 1fr 1fr;
	margin-bottom: 20px;
}

.wizsp-grid--rail {
	grid-template-columns: 280px 1fr 320px;
}

.wizsp-grid--split {
	grid-template-columns: 2fr 1fr;
}

.wizsp-grid--halves {
	grid-template-columns: 1fr 1fr;
}

.wizsp-stack {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ================================================================ KPI strip */

.wizsp-kpi-strip {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	background: var(--wizsp-surface);
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-2xl);
	padding: 18px 24px;
	margin-bottom: 24px;
}

.wizsp-kpi-strip__spacer {
	flex: 1;
}

.wizsp-kpi-meter__label {
	font-size: 12px;
	color: var(--wizsp-text-secondary);
	margin-bottom: 6px;
}

.wizsp-kpi-meter__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wizsp-meter {
	width: 80px;
	height: 8px;
	border-radius: 5px;
	background: var(--wizsp-primary-tint);
	overflow: hidden;
}

.wizsp-meter__fill {
	height: 100%;
	border-radius: 5px;
	background: var(--wizsp-primary);
}

.wizsp-meter__fill--warning {
	background: var(--wizsp-warning);
}

.wizsp-meter__fill--danger {
	background: var(--wizsp-danger);
}

.wizsp-kpi-meter__value {
	font-size: 12px;
	font-weight: 700;
	color: var(--wizsp-text);
}

.wizsp-kpi-number {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wizsp-icon-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: var(--wizsp-radius-lg);
	background: var(--wizsp-primary-tint);
	color: var(--wizsp-primary);
}

.wizsp-icon-chip svg {
	width: 16px;
	height: 16px;
	stroke-width: 1.8;
}

.wizsp-kpi-number__value {
	font-size: 18px;
	font-weight: 800;
	color: var(--wizsp-text);
	line-height: 1;
}

.wizsp-kpi-number__label {
	font-size: 11px;
	color: var(--wizsp-text-secondary);
}

/* ================================================================ Charts */

.wizsp-bars {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 60px;
}

.wizsp-bars__bar {
	flex: 1;
	border-radius: 3px 3px 0 0;
	background: var(--wizsp-primary-tint);
}

.wizsp-bars__bar--active {
	background: var(--wizsp-primary);
}

.wizsp-axis {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 10px;
	color: var(--wizsp-text-muted);
}

.wizsp-axis--lg {
	font-size: 11px;
}

.wizsp-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 108px;
	height: 108px;
	border-radius: 50%;
}

.wizsp-ring--lg {
	width: 110px;
	height: 110px;
}

.wizsp-ring__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 82px;
	height: 82px;
	border-radius: 50%;
	background: var(--wizsp-surface);
}

.wizsp-ring__value {
	font-size: 18px;
	font-weight: 800;
	color: var(--wizsp-text);
}

.wizsp-ring__value--lg {
	font-size: 20px;
}

.wizsp-ring__sub {
	font-size: 10px;
	color: var(--wizsp-text-secondary);
}

.wizsp-ring__sub--success {
	color: var(--wizsp-success);
	font-weight: 600;
}

.wizsp-card--centred {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wizsp-card--centred .wizsp-card__title,
.wizsp-card--centred .wizsp-card__caption {
	align-self: flex-start;
}

.wizsp-sparkline {
	display: block;
	width: 100%;
	height: 130px;
}

.wizsp-sparkline path {
	fill: none;
	stroke: var(--wizsp-primary);
	stroke-width: 2.5;
}

/* Segmented progress bar */
.wizsp-segments {
	display: flex;
	height: 8px;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 12px;
}

.wizsp-segments__part--done {
	background: var(--wizsp-primary);
}

.wizsp-segments__part--pending {
	background: var(--wizsp-primary-tint);
}

.wizsp-segments__part--overdue {
	background: var(--wizsp-danger);
}

.wizsp-legend {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wizsp-legend__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--wizsp-text-secondary);
}

.wizsp-legend__swatch {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	flex: none;
}

.wizsp-legend__swatch--done {
	background: var(--wizsp-primary);
}

.wizsp-legend__swatch--pending {
	background: var(--wizsp-primary-tint);
	border: 1px solid var(--wizsp-border);
}

.wizsp-legend__swatch--overdue {
	background: var(--wizsp-danger);
}

/* Horizontal progress list (Plan Distribution / Tickets by Category) */
.wizsp-progress-item {
	margin-bottom: 12px;
}

.wizsp-progress-item:last-child {
	margin-bottom: 0;
}

.wizsp-progress-item__head {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;
	font-size: 12px;
}

.wizsp-progress-item__name {
	font-weight: 600;
	color: var(--wizsp-text);
}

.wizsp-progress-item__value {
	color: var(--wizsp-text-secondary);
}

.wizsp-progress-track {
	height: 7px;
	border-radius: var(--wizsp-radius-xs);
	background: var(--wizsp-primary-tint);
	overflow: hidden;
}

.wizsp-progress-track__fill {
	height: 100%;
	border-radius: var(--wizsp-radius-xs);
	background: var(--wizsp-primary);
}

.wizsp-progress-track__fill--muted {
	background: var(--wizsp-text-muted);
}

.wizsp-progress-track__fill--deep {
	background: var(--wizsp-primary-deep);
}

/* ================================================================ Accordion */

.wizsp-accordion__item {
	border-bottom: 1px solid var(--wizsp-border);
}

.wizsp-accordion__item:last-child {
	border-bottom: 0;
}

.wizsp-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 14px 12px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--wizsp-text);
	text-align: left;
	cursor: pointer;
}

.wizsp-accordion__chevron {
	width: 14px;
	height: 14px;
	flex: none;
	color: var(--wizsp-text-muted);
	stroke-width: 2;
	transition: transform 0.15s;
}

.wizsp-accordion__trigger[aria-expanded="true"] .wizsp-accordion__chevron {
	transform: rotate(180deg);
}

.wizsp-accordion__panel {
	padding: 0 12px 14px;
}

.wizsp-accordion__panel[hidden] {
	display: none;
}

.wizsp-accordion__panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wizsp-accordion__panel a {
	font-size: 12px;
	font-weight: 600;
	color: var(--wizsp-text);
}

.wizsp-accordion__panel a:hover {
	color: var(--wizsp-primary);
}

.wizsp-accordion__meta {
	font-size: 11px;
	color: var(--wizsp-text-muted);
}

/* ================================================================ Agenda list */

.wizsp-agenda__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.wizsp-agenda__side {
	font-size: 12px;
	font-weight: 600;
	color: var(--wizsp-text-secondary);
}

.wizsp-agenda__current {
	font-size: 14px;
	font-weight: 700;
	color: var(--wizsp-text);
}

.wizsp-agenda__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wizsp-agenda__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--wizsp-radius-lg);
	background: transparent;
}

.wizsp-agenda__row--highlight {
	background: var(--wizsp-primary-tint);
}

.wizsp-agenda__date {
	width: 44px;
	flex: none;
	font-size: 11px;
	font-weight: 700;
	color: var(--wizsp-text-secondary);
	text-transform: uppercase;
}

.wizsp-agenda__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex: none;
	background: var(--wizsp-primary);
}

.wizsp-agenda__dot--success {
	background: var(--wizsp-success);
}

.wizsp-agenda__dot--warning {
	background: var(--wizsp-warning);
}

.wizsp-agenda__label {
	flex: 1;
	font-size: 13px;
	color: var(--wizsp-text);
	min-width: 0;
}

.wizsp-agenda__label a {
	color: var(--wizsp-text);
}

.wizsp-agenda__label a:hover {
	color: var(--wizsp-primary);
}

/* ================================================================ Navy checklist panel */

.wizsp-panel__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.wizsp-panel__count {
	font-size: 12px;
	color: var(--wizsp-on-navy);
}

.wizsp-panel__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wizsp-panel__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 6px;
	border-radius: var(--wizsp-radius-md);
}

.wizsp-panel__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--wizsp-on-navy-surface);
}

.wizsp-panel__icon svg {
	width: 12px;
	height: 12px;
	stroke-width: 2;
}

.wizsp-panel__text {
	flex: 1;
	min-width: 0;
}

.wizsp-panel__title {
	font-size: 12px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wizsp-panel__meta {
	font-size: 11px;
	color: var(--wizsp-on-navy-muted);
}

.wizsp-panel__check {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--wizsp-on-navy-border);
}

.wizsp-panel__check--done {
	background: var(--wizsp-success);
	border-color: var(--wizsp-success);
}

.wizsp-panel__check svg {
	width: 10px;
	height: 10px;
	stroke-width: 3;
}

/* ================================================================ Filter bar */

.wizsp-filters {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.wizsp-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-md);
	background: var(--wizsp-surface);
	color: var(--wizsp-text-secondary);
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
}

.wizsp-filter-pill:hover {
	color: var(--wizsp-text);
}

.wizsp-filter-pill--active {
	border-color: var(--wizsp-primary);
	background: var(--wizsp-primary-tint);
	color: var(--wizsp-primary);
	font-weight: 600;
}

/* ================================================================ Tables */

.wizsp-table {
	background: var(--wizsp-surface);
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-2xl);
	overflow: hidden;
}

.wizsp-table__head {
	display: grid;
	padding: 12px 20px;
	border-bottom: 1px solid var(--wizsp-border);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wizsp-text-muted);
}

.wizsp-table__row {
	display: grid;
	align-items: center;
	padding: 14px 20px;
	border-bottom: 1px solid var(--wizsp-border);
	font-size: 13px;
	color: var(--wizsp-text);
}

.wizsp-table__row:last-child {
	border-bottom: 0;
}

.wizsp-table__row--link:hover {
	background: var(--wizsp-canvas);
}

.wizsp-table--subs .wizsp-table__head,
.wizsp-table--subs .wizsp-table__row {
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}

.wizsp-table--clients .wizsp-table__head,
.wizsp-table--clients .wizsp-table__row {
	grid-template-columns: 2fr 1fr 1fr 1fr;
}

.wizsp-table__identity {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.wizsp-table__name {
	font-weight: 600;
	color: var(--wizsp-text);
	overflow: hidden;
	text-overflow: ellipsis;
}

.wizsp-table__sub {
	font-size: 11px;
	color: var(--wizsp-text-muted);
}

.wizsp-table__muted {
	color: var(--wizsp-text-secondary);
}

.wizsp-table__strong {
	font-weight: 600;
}

/* A plain content table inside post content, given the same material. */
.wizsp-prose table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.wizsp-prose th,
.wp-block-table th {
	padding: 12px 16px;
	border-bottom: 1px solid var(--wizsp-border);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wizsp-text-muted);
	text-align: left;
}

.wizsp-prose td,
.wp-block-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--wizsp-border);
}

/* ================================================================ Badges */

.wizsp-badge {
	display: inline-block;
	width: fit-content;
	padding: 3px 9px;
	border-radius: var(--wizsp-radius-sm);
	font-size: 11px;
	font-weight: 700;
	background: var(--wizsp-primary-tint);
	color: var(--wizsp-primary);
}

.wizsp-badge--lg {
	padding: 4px 10px;
	font-size: 12px;
	border-radius: 7px;
}

.wizsp-badge--active,
.wizsp-badge--success {
	background: var(--wizsp-success-tint);
	color: var(--wizsp-success);
}

.wizsp-badge--warning {
	background: var(--wizsp-warning-tint);
	color: var(--wizsp-warning);
}

.wizsp-badge--danger {
	background: var(--wizsp-danger-tint);
	color: var(--wizsp-danger);
}

.wizsp-badge--muted {
	background: var(--wizsp-canvas);
	color: var(--wizsp-text-muted);
}

.wizsp-badge--outline {
	padding: 4px 10px;
	background: var(--wizsp-canvas);
	border: 1px solid var(--wizsp-border);
	color: var(--wizsp-text-secondary);
	font-size: 11px;
	font-weight: 400;
}

/* ================================================================ Detail view */

.wizsp-detail-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.wizsp-detail-header__spacer {
	flex: 1;
}

.wizsp-detail-header__title {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: var(--wizsp-text);
	line-height: 1.25;
}

.wizsp-line-item {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--wizsp-border);
	font-size: 13px;
}

.wizsp-line-item__label {
	color: var(--wizsp-text);
}

.wizsp-line-item__value {
	font-weight: 700;
	color: var(--wizsp-text);
}

.wizsp-line-total {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-top: 14px;
	font-size: 14px;
}

.wizsp-line-total__label {
	font-weight: 700;
	color: var(--wizsp-text);
}

.wizsp-line-total__value {
	font-weight: 800;
	color: var(--wizsp-text);
}

.wizsp-row-split {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--wizsp-border);
}

.wizsp-row-split:last-child {
	border-bottom: 0;
}

.wizsp-identity {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.wizsp-identity__name {
	font-size: 13px;
	font-weight: 700;
	color: var(--wizsp-text);
}

.wizsp-identity__meta {
	font-size: 11px;
	color: var(--wizsp-text-secondary);
}

.wizsp-meta-label {
	font-size: 12px;
	color: var(--wizsp-text-secondary);
	margin-bottom: 4px;
}

.wizsp-meta-value {
	font-size: 13px;
	font-weight: 600;
	color: var(--wizsp-text);
}

.wizsp-danger-zone__text {
	font-size: 12px;
	color: var(--wizsp-text-secondary);
	margin-bottom: 12px;
}

/* ================================================================ Forms */

.wizsp-field {
	display: block;
}

.wizsp-field + .wizsp-field {
	margin-top: 14px;
}

.wizsp-label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--wizsp-text-secondary);
}

.wizsp-input,
.wizsp-select,
.wizsp-textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	display: block;
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-md);
	background: var(--wizsp-surface);
	color: var(--wizsp-text);
	font-family: inherit;
	font-size: 13px;
	line-height: normal;
}

textarea {
	resize: vertical;
}

::placeholder {
	color: var(--wizsp-text-muted);
	opacity: 1;
}

.wizsp-form-stack {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 420px;
}

.wizsp-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--wizsp-border);
}

/* Toggle switch — 40x22 track, 16px knob travelling 3px to 21px. */
.wizsp-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--wizsp-border);
}

.wizsp-toggle-row:last-child {
	border-bottom: 0;
}

.wizsp-toggle-row__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--wizsp-text);
}

.wizsp-toggle-row__desc {
	font-size: 12px;
	color: var(--wizsp-text-secondary);
}

.wizsp-toggle {
	position: relative;
	display: block;
	flex: none;
	width: 40px;
	height: 22px;
}

.wizsp-toggle input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.wizsp-toggle__track {
	display: block;
	width: 40px;
	height: 22px;
	border-radius: 11px;
	background: var(--wizsp-border);
	pointer-events: none;
	transition: background-color 0.15s;
}

.wizsp-toggle__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: left 0.15s;
}

.wizsp-toggle input:checked ~ .wizsp-toggle__track {
	background: var(--wizsp-primary);
}

.wizsp-toggle input:checked ~ .wizsp-toggle__track .wizsp-toggle__knob {
	left: 21px;
}

.wizsp-toggle input:focus-visible ~ .wizsp-toggle__track {
	outline: 2px solid var(--wizsp-primary);
	outline-offset: 2px;
}

/* Gateway-style selectable row */
.wizsp-option-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px;
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-xl);
	margin-bottom: 10px;
}

.wizsp-option-row:last-child {
	margin-bottom: 0;
}

.wizsp-option-row--selected {
	border-color: var(--wizsp-primary);
}

.wizsp-option-row__name {
	font-size: 13px;
	font-weight: 700;
	color: var(--wizsp-text);
}

.wizsp-option-row__meta {
	font-size: 11px;
	color: var(--wizsp-text-secondary);
}

.wizsp-option-row__dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var(--wizsp-border);
	background: transparent;
	flex: none;
}

.wizsp-option-row--selected .wizsp-option-row__dot {
	border-color: var(--wizsp-primary);
	background: var(--wizsp-primary);
}

/* Dropzone */
.wizsp-dropzone {
	padding: 32px;
	border: 1px dashed var(--wizsp-border);
	border-radius: var(--wizsp-radius-xl);
	background: var(--wizsp-canvas);
	text-align: center;
}

.wizsp-dropzone svg {
	display: block;
	width: 26px;
	height: 26px;
	margin: 0 auto 10px;
	color: var(--wizsp-primary);
	stroke-width: 1.8;
}

.wizsp-dropzone__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--wizsp-text);
	margin-bottom: 4px;
}

.wizsp-dropzone__hint {
	font-size: 12px;
	color: var(--wizsp-text-secondary);
}

/* Vertical tab rail (Settings) */
.wizsp-tabs {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wizsp-tabs__item {
	padding: 9px 12px;
	border: 0;
	border-radius: var(--wizsp-radius-md);
	background: transparent;
	color: var(--wizsp-text-secondary);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.wizsp-tabs__item:hover {
	color: var(--wizsp-text);
}

.wizsp-tabs__item[aria-selected="true"] {
	background: var(--wizsp-primary-tint);
	color: var(--wizsp-primary);
}

.wizsp-grid--settings {
	grid-template-columns: 200px 1fr;
}

/* ================================================================ Wizard */

.wizsp-wizard {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
}

.wizsp-wizard__card {
	width: 560px;
	max-width: 100%;
	background: var(--wizsp-surface);
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-2xl);
	padding: 32px;
}

.wizsp-wizard__steps {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 26px;
}

.wizsp-wizard__step {
	display: flex;
	align-items: center;
	flex: 1;
}

.wizsp-wizard__step:last-child {
	flex: none;
}

.wizsp-wizard__marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.wizsp-wizard__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--wizsp-border);
	background: var(--wizsp-surface);
	color: var(--wizsp-text-muted);
	font-size: 12px;
	font-weight: 700;
}

.wizsp-wizard__step--done .wizsp-wizard__circle,
.wizsp-wizard__step--active .wizsp-wizard__circle {
	background: var(--wizsp-primary);
	border-color: var(--wizsp-primary);
	color: #fff;
}

.wizsp-wizard__label {
	font-size: 10px;
	font-weight: 600;
	color: var(--wizsp-text-muted);
	white-space: nowrap;
}

.wizsp-wizard__step--active .wizsp-wizard__label {
	color: var(--wizsp-text);
}

.wizsp-wizard__line {
	flex: 1;
	height: 1px;
	background: var(--wizsp-border);
	margin: 0 6px 16px;
}

.wizsp-wizard__step--done .wizsp-wizard__line {
	background: var(--wizsp-primary);
}

.wizsp-wizard__title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 800;
	color: var(--wizsp-text);
}

.wizsp-wizard__text {
	margin: 0 0 18px;
	font-size: 13px;
	color: var(--wizsp-text-secondary);
}

.wizsp-wizard__actions {
	display: flex;
	justify-content: space-between;
	margin-top: 26px;
	padding-top: 16px;
	border-top: 1px solid var(--wizsp-border);
}

/* ================================================================ States */

.wizsp-state {
	background: var(--wizsp-surface);
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-2xl);
	padding: 48px 24px;
	text-align: center;
}

.wizsp-state__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wizsp-radius-xl);
	background: var(--wizsp-primary-tint);
	color: var(--wizsp-primary);
	margin: 0 auto 14px;
}

.wizsp-state__icon svg {
	width: 20px;
	height: 20px;
	stroke-width: 1.8;
}

.wizsp-state__icon--danger {
	background: var(--wizsp-danger-tint);
	color: var(--wizsp-danger);
}

.wizsp-state__icon--muted {
	background: var(--wizsp-canvas);
	border: 1px solid var(--wizsp-border);
	color: var(--wizsp-text-muted);
}

.wizsp-state__icon--success {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wizsp-success-tint);
	color: var(--wizsp-success);
}

.wizsp-state__icon--success svg {
	width: 22px;
	height: 22px;
	stroke-width: 2.5;
}

.wizsp-state__title {
	font-size: 14px;
	font-weight: 700;
	color: var(--wizsp-text);
	margin-bottom: 4px;
}

.wizsp-state__text {
	font-size: 13px;
	color: var(--wizsp-text-secondary);
	margin-bottom: 18px;
}

.wizsp-state__link {
	font-size: 13px;
	font-weight: 700;
}

/* Skeleton rows */
.wizsp-skeleton__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--wizsp-border);
}

.wizsp-skeleton__row:last-child {
	border-bottom: 0;
}

.wizsp-skeleton__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wizsp-primary-tint);
	flex: none;
}

.wizsp-skeleton__lines {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wizsp-skeleton__line {
	height: 10px;
	border-radius: var(--wizsp-radius-xs);
	background: var(--wizsp-primary-tint);
	width: 55%;
}

.wizsp-skeleton__line--short {
	height: 8px;
	width: 35%;
}

.wizsp-skeleton__tail {
	width: 60px;
	height: 10px;
	border-radius: var(--wizsp-radius-xs);
	background: var(--wizsp-primary-tint);
}

/* ================================================================ List layout */

/* Content beside the 320px rail, matching the dashboard's right-hand column. */
.wizsp-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 18px;
	align-items: start;
}

.wizsp-no-sidebar .wizsp-layout {
	grid-template-columns: 1fr;
}

.wizsp-layout__main {
	min-width: 0;
}

.wizsp-layout__rail {
	min-width: 0;
}

@media (max-width: 980px) {
	.wizsp-layout {
		grid-template-columns: 1fr;
	}
}

/* ================================================================ Search */

/* Top-bar search, built on <details> so it opens without JavaScript. */
.wizsp-search {
	position: relative;
}

.wizsp-search > summary {
	list-style: none;
	cursor: pointer;
}

.wizsp-search > summary::-webkit-details-marker,
.wizsp-search > summary::marker {
	display: none;
	content: "";
}

.wizsp-search__panel {
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	z-index: 50;
	width: 360px;
	max-width: calc(100vw - 32px);
	padding: 14px;
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-2xl);
	background: var(--wizsp-surface);
}

.wizsp-search-form {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wizsp-search-form__field {
	position: relative;
	flex: 1;
	min-width: 0;
}

.wizsp-search-form__icon {
	position: absolute;
	top: 11px;
	left: 12px;
	width: 14px;
	height: 14px;
	color: var(--wizsp-text-muted);
	pointer-events: none;
}

/* Two classes deep on purpose: the shared control rule above matches
   `input[type="search"]`, which would otherwise out-specify a single class and
   reset the padding that makes room for the icon. */
.wizsp-search-form .wizsp-search-form__input {
	padding-left: 34px;
	-webkit-appearance: none;
	appearance: none;
}

.wizsp-search-form .wizsp-search-form__input::-webkit-search-decoration,
.wizsp-search-form .wizsp-search-form__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* In the filter row the search field stretches, as it does in the mockup. */
.wizsp-filters .wizsp-search-form {
	flex: 1;
	min-width: 220px;
}

/* ================================================================ Post cards */

.wizsp-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
}

.wizsp-post-card {
	display: flex;
	flex-direction: column;
	background: var(--wizsp-surface);
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-2xl);
	overflow: hidden;
}

.wizsp-post-card__thumb {
	display: block;
	width: 100%;
	height: 110px;
	flex: none;
	overflow: hidden;
	background: var(--wizsp-primary-tint);
}

.wizsp-post-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wizsp-post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px;
}

.wizsp-post-card__title {
	margin: 0 0 2px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.wizsp-post-card__title a {
	color: var(--wizsp-text);
}

.wizsp-post-card__title a:hover {
	color: var(--wizsp-primary);
}

.wizsp-post-card__meta {
	font-size: 12px;
	color: var(--wizsp-text-secondary);
	margin-bottom: 10px;
}

.wizsp-post-card__excerpt {
	font-size: 13px;
	color: var(--wizsp-text-secondary);
	line-height: 1.5;
	margin: 0 0 12px;
	flex: 1;
}

.wizsp-post-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* ================================================================ Prose */

.wizsp-prose {
	font-size: 14px;
	line-height: 1.65;
	color: var(--wizsp-text);
}

.wizsp-prose > * {
	margin-top: 0;
	margin-bottom: 16px;
}

.wizsp-prose > *:last-child {
	margin-bottom: 0;
}

.wizsp-prose h1 {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.wizsp-prose h2 {
	font-size: 22px;
	font-weight: 800;
	margin-top: 28px;
}

.wizsp-prose h3 {
	font-size: 18px;
	font-weight: 800;
	margin-top: 24px;
}

.wizsp-prose h4 {
	font-size: 14px;
	font-weight: 700;
	margin-top: 20px;
}

.wizsp-prose h5,
.wizsp-prose h6 {
	font-size: 13px;
	font-weight: 700;
	margin-top: 18px;
}

.wizsp-prose ul,
.wizsp-prose ol {
	padding-left: 20px;
}

.wizsp-prose li {
	margin-bottom: 6px;
}

.wizsp-prose blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 14px 18px;
	border-left: 3px solid var(--wizsp-primary);
	background: var(--wizsp-canvas);
	border-radius: 0 var(--wizsp-radius-xl) var(--wizsp-radius-xl) 0;
	color: var(--wizsp-text-secondary);
}

.wizsp-prose blockquote p:last-child {
	margin-bottom: 0;
}

.wizsp-prose code {
	padding: 2px 6px;
	border-radius: var(--wizsp-radius-sm);
	background: var(--wizsp-primary-tint);
	color: var(--wizsp-primary-deep);
	font-family: var(--wizsp-font-mono);
	font-size: 12px;
}

.wizsp-prose pre {
	padding: 16px 18px;
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-xl);
	background: var(--wizsp-canvas);
	overflow-x: auto;
	font-family: var(--wizsp-font-mono);
	font-size: 12px;
	line-height: 1.6;
}

.wizsp-prose pre code {
	padding: 0;
	background: none;
	color: var(--wizsp-text);
}

.wizsp-prose hr {
	border: 0;
	border-top: 1px solid var(--wizsp-border);
	margin: 28px 0;
}

.wizsp-prose img {
	border-radius: var(--wizsp-radius-xl);
}

.wizsp-prose figcaption,
.wp-element-caption {
	margin-top: 8px;
	font-size: 11px;
	color: var(--wizsp-text-muted);
	text-align: center;
}

.wizsp-prose table {
	display: block;
	overflow-x: auto;
}

/* The full-width page template: content centred at the theme.json content size,
   with wide and full blocks allowed to break out. */
.wizsp-prose--wide {
	max-width: 760px;
	margin: 0 auto;
}

.wizsp-prose--wide > .alignwide {
	max-width: 1120px;
	width: 1120px;
	margin-left: calc(50% - 560px);
	margin-right: auto;
}

.wizsp-prose--wide > .alignfull {
	max-width: none;
	width: auto;
	margin-left: calc(-1 * var(--wizsp-gutter));
	margin-right: calc(-1 * var(--wizsp-gutter));
}

@media (max-width: 1200px) {
	.wizsp-prose--wide > .alignwide {
		width: auto;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
}

/* Core block alignments */
.alignleft {
	float: left;
	margin: 0 20px 16px 0;
}

.alignright {
	float: right;
	margin: 0 0 16px 20px;
}

.aligncenter {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.alignwide {
	margin-left: calc(-1 * var(--wizsp-gutter));
	margin-right: calc(-1 * var(--wizsp-gutter));
	max-width: calc(100% + var(--wizsp-gutter) * 2);
}

.alignfull {
	margin-left: calc(-1 * var(--wizsp-gutter) - 24px);
	margin-right: calc(-1 * var(--wizsp-gutter) - 24px);
	max-width: calc(100% + (var(--wizsp-gutter) + 24px) * 2);
}

.wizsp-entry-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--wizsp-text-secondary);
}

.wizsp-entry-meta a {
	color: var(--wizsp-text-secondary);
}

.wizsp-entry-meta a:hover {
	color: var(--wizsp-primary);
}

.wizsp-entry-footer {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--wizsp-border);
}

.wizsp-entry-footer > svg {
	flex: none;
	width: 14px;
	height: 14px;
	color: var(--wizsp-text-muted);
}

/* ================================================================ Pagination */

.wizsp-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 24px;
}

.wizsp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--wizsp-border);
	border-radius: var(--wizsp-radius-md);
	background: var(--wizsp-surface);
	color: var(--wizsp-text-secondary);
	font-size: 13px;
	font-weight: 600;
}

.wizsp-pagination .page-numbers:hover {
	color: var(--wizsp-text);
}

.wizsp-pagination .page-numbers.current {
	background: var(--wizsp-primary);
	border-color: var(--wizsp-primary);
	color: #fff;
	font-weight: 700;
}

.wizsp-pagination .dots {
	border-color: transparent;
	background: none;
}

.wizsp-pagination svg {
	width: 14px;
	height: 14px;
}

/* ================================================================ Comments */

.wizsp-comments__title {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wizsp-text);
}

.wizsp-comments__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wizsp-comments__list .children {
	margin: 0 0 0 24px;
	padding: 0;
	list-style: none;
}

.wizsp-comment {
	padding: 14px 0;
	border-bottom: 1px solid var(--wizsp-border);
}

.wizsp-comment__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.wizsp-comment__author {
	font-size: 13px;
	font-weight: 700;
	color: var(--wizsp-text);
}

.wizsp-comment__date {
	font-size: 11px;
	color: var(--wizsp-text-muted);
}

.wizsp-comment__body {
	font-size: 13px;
	line-height: 1.6;
	color: var(--wizsp-text);
}

.wizsp-comment__body p:last-child {
	margin-bottom: 0;
}

.wizsp-comment__actions {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
}

.comment-respond .comment-reply-title {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wizsp-text);
}

.comment-form p {
	margin: 0 0 14px;
}

.comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--wizsp-text-secondary);
}

.comment-form .form-submit {
	margin-bottom: 0;
}

.comment-form input[type="submit"] {
	width: auto;
	padding: 10px 18px;
	border: 1px solid var(--wizsp-primary);
	border-radius: var(--wizsp-radius-md);
	background: var(--wizsp-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.comment-form .comment-form-cookies-consent label,
.comment-form .comment-notes {
	font-size: 12px;
	font-weight: 400;
	color: var(--wizsp-text-secondary);
}

/* ================================================================ Widgets */

.wizsp-widget + .wizsp-widget {
	margin-top: 18px;
}

.wizsp-widget__title {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wizsp-text);
}

.wizsp-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wizsp-widget li {
	font-size: 13px;
	color: var(--wizsp-text);
}

.wizsp-widget a {
	color: var(--wizsp-text);
	font-weight: 600;
}

.wizsp-widget a:hover {
	color: var(--wizsp-primary);
}

.wizsp-widget .children {
	margin-top: 10px;
	margin-left: 14px;
}

/* ================================================================ Footer */

.wizsp-footer {
	flex: none;
	padding: var(--wizsp-gutter);
	padding-top: 0;
}

.wizsp-footer__inner {
	max-width: var(--wizsp-max-width);
	margin: 0 auto;
	background: var(--wizsp-primary);
	border-radius: var(--wizsp-radius-2xl);
	padding: 20px 24px;
	color: var(--wizsp-on-navy-strong);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.wizsp-footer__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wizsp-on-navy-strong);
}

.wizsp-footer__brand .wizsp-brand__mark {
	background: var(--wizsp-on-navy-surface);
}

.wizsp-footer__nav {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wizsp-footer__nav a {
	display: block;
	padding: 9px 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--wizsp-on-navy);
}

.wizsp-footer__nav a:hover {
	color: var(--wizsp-on-navy-strong);
}

.wizsp-footer__note {
	font-size: 11px;
	color: var(--wizsp-on-navy-muted);
}

/* ================================================================ Responsive */

@media (max-width: 1200px) {
	.wizsp-grid--feature {
		grid-template-columns: 1fr 1fr;
	}

	.wizsp-grid--rail {
		grid-template-columns: 1fr 1fr;
	}

	.wizsp-grid--rail > *:last-child {
		grid-column: span 2;
	}
}

@media (max-width: 980px) {
	.wizsp-nav-toggle {
		display: flex;
	}

	.wizsp-nav {
		position: absolute;
		top: calc(100% + 8px);
		left: var(--wizsp-gutter);
		right: var(--wizsp-gutter);
		z-index: 45;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		border: 1px solid var(--wizsp-border);
		background: var(--wizsp-surface);
		padding: 6px;
	}

	.wizsp-nav.is-open {
		display: flex;
	}

	.wizsp-nav .sub-menu {
		position: static;
		display: block;
		min-width: 0;
		padding: 0 0 0 12px;
		border: 0;
		background: none;
	}

	.wizsp-grid--split,
	.wizsp-grid--settings {
		grid-template-columns: 1fr;
	}

	.wizsp-tabs {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media (max-width: 782px) {
	:root {
		--wizsp-gutter: 16px;
	}

	.wizsp-topbar {
		padding: 0 16px;
	}

	.wizsp-grid--feature,
	.wizsp-grid--rail,
	.wizsp-grid--halves {
		grid-template-columns: 1fr;
	}

	.wizsp-grid--rail > *:last-child {
		grid-column: auto;
	}

	.wizsp-page-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 14px;
	}

	.wizsp-kpi-strip {
		gap: 18px;
	}

	.wizsp-kpi-strip__spacer {
		display: none;
	}

	/* Tables become stacked rows — a five-column grid is unreadable at
	   phone width, and the mockup has no small-screen variant to copy. */
	.wizsp-table__head {
		display: none;
	}

	.wizsp-table__row {
		grid-template-columns: 1fr !important;
		gap: 8px;
	}

	.wizsp-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.alignwide,
	.alignfull {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}
}