/* ==========================================================================
   SEOvault AI - Meta Box Styles
   ========================================================================== */

/* Meta box title pillbox */
#seovault_seo_meta_box .hndle {
	display: flex;
	align-items: center;
	padding: 8px 12px;
}

#seovault_seo_meta_box .hndle .seovaultseo-pillbox-title {
	background: #e8f5e9;
	color: #2e7d32;
	padding: 3px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	border: 1px solid #c8e6c9;
}

.seovault-ai-meta-box .seovault-ai-field {
	margin-bottom: 12px;
}

.seovault-ai-meta-box label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	margin-bottom: 4px;
}

.seovault-ai-meta-box input[type="text"],
.seovault-ai-meta-box input[type="url"],
.seovault-ai-meta-box textarea {
	width: 100%;
	font-size: 12px;
}

.seovault-ai-meta-box .description {
	font-size: 11px;
	color: #646970;
	margin-top: 3px;
}

.seovault-ai-meta-box details {
	margin-top: 12px;
	border-top: 1px solid #e0e0e0;
	padding-top: 8px;
}

.seovault-ai-meta-box details > summary {
	font-weight: 600;
	cursor: pointer;
	padding: 4px 0;
	font-size: 12px;
	color: #0D9488;
}

.seovault-ai-meta-box details[open] > summary {
	margin-bottom: 8px;
}

/* ==========================================================================
   Character Counter
   ========================================================================== */

.seovaultseo-char-counter {
	font-size: 11px;
	font-weight: 400;
	color: #646970;
	min-width: 60px;
	text-align: right;
}

.seovaultseo-char-counter.seovaultseo-counter-good {
	color: #00a32a;
}

.seovaultseo-char-counter.seovaultseo-counter-okay {
	color: #b5891a;
}

.seovaultseo-char-counter.seovaultseo-counter-bad {
	color: #d63638;
}

/* ==========================================================================
   Assessment Panel
   ========================================================================== */

.seovaultseo-assessment-panel {
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e0e0e0;
}

/* Score Circle */
.seovaultseo-assessment-score-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	margin: 0 auto 10px;
	color: #fff;
	background: #c0c0c0;
}

.seovaultseo-assessment-score-num {
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.seovaultseo-assessment-score-max {
	font-size: 9px;
	opacity: 0.7;
}

.seovaultseo-assessment-score-unknown {
	background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
}

.seovaultseo-assessment-score-bad {
	background: linear-gradient(135deg, #f8b0a2, #f1938c);
}

.seovaultseo-assessment-score-good {
	background: linear-gradient(135deg, #6ec1e4, #4a90d9);
}

.seovaultseo-assessment-score-great {
	background: linear-gradient(135deg, #5fcf80, #3ba85a);
}

.seovaultseo-assessment-overall {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	font-size: 13px;
}

.seovaultseo-assessment-overall-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.seovaultseo-assessment-overall-good .seovaultseo-assessment-overall-dot {
	background: #00a32a;
}

.seovaultseo-assessment-overall-okay .seovaultseo-assessment-overall-dot {
	background: #b5891a;
}

.seovaultseo-assessment-overall-bad .seovaultseo-assessment-overall-dot {
	background: #d63638;
}

.seovaultseo-assessment-overall-unknown .seovaultseo-assessment-overall-dot {
	background: #646970;
}

.seovaultseo-assessment-overall-label {
	color: #646970;
	font-size: 12px;
}

.seovaultseo-assessment-checks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.seovaultseo-assessment-check {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 6px;
	padding: 3px 0;
	font-size: 11px;
	line-height: 1.4;
}

.seovaultseo-assessment-check-icon {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 3px;
}

.seovaultseo-assessment-check-good .seovaultseo-assessment-check-icon {
	background: #00a32a;
}

.seovaultseo-assessment-check-okay .seovaultseo-assessment-check-icon {
	background: #b5891a;
}

.seovaultseo-assessment-check-bad .seovaultseo-assessment-check-icon {
	background: #d63638;
}

.seovaultseo-assessment-check-unknown .seovaultseo-assessment-check-icon {
	background: #646970;
}

.seovaultseo-assessment-check-label {
	font-weight: 600;
	flex-shrink: 0;
}

.seovaultseo-assessment-check-good .seovaultseo-assessment-check-label {
	color: #00a32a;
}

.seovaultseo-assessment-check-okay .seovaultseo-assessment-check-label {
	color: #b5891a;
}

.seovaultseo-assessment-check-bad .seovaultseo-assessment-check-label {
	color: #d63638;
}

.seovaultseo-assessment-check-unknown .seovaultseo-assessment-check-label {
	color: #646970;
}

.seovaultseo-assessment-check-msg {
	color: #646970;
	flex: 1;
	min-width: 0;
}

/* ==========================================================================
   Variable Picker
   ========================================================================== */

.seovaultseo-input-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.seovaultseo-input-row input.large-text,
.seovaultseo-input-row textarea.large-text {
	flex: 1;
	min-width: 0;
	width: auto;
	margin: 0;
}

.seovaultseo-template-input-row {
	max-width: 620px;
	align-items: flex-start;
}

.seovaultseo-template-input-row .seovaultseo-var-picker-btn {
	width: 32px;
	height: 32px;
	margin-top: 0;
	align-self: flex-start;
}

.seovaultseo-template-input-row input.large-text {
	min-height: 32px;
}

.seovaultseo-template-input-row textarea.large-text {
	min-height: 100px;
}

.seovaultseo-var-picker-btn {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	margin-top: 1px;
	border: 1px solid #c3c4c7;
	background: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	color: #50575e;
}

.seovaultseo-var-picker-btn:hover {
	background: #f0f0f1;
	border-color: #8c8f94;
	color: #0D9488;
}

.seovaultseo-var-picker-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.seovaultseo-var-picker-dropdown {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	overflow: hidden;
}

.seovaultseo-var-picker-search {
	width: 100%;
	border: none;
	border-bottom: 1px solid #e0e0e0;
	padding: 8px 10px;
	font-size: 13px;
	box-sizing: border-box;
	outline: none;
}

.seovaultseo-var-picker-search:focus {
	border-bottom-color: #0D9488;
}

.seovaultseo-var-picker-list {
	max-height: 240px;
	overflow-y: auto;
}

.seovaultseo-var-picker-item {
	padding: 6px 10px;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.seovaultseo-var-picker-item:last-child {
	border-bottom: none;
}

.seovaultseo-var-picker-item:hover {
	background: #f0f7ff;
}

.seovaultseo-var-picker-item-name {
	font-size: 12px;
	font-weight: 600;
	color: #1d2327;
}

.seovaultseo-var-picker-item-desc {
	font-size: 11px;
	color: #646970;
}

/* ==========================================================================
   Settings Page — Variable Panel (two-column layout)
   ========================================================================== */

.seovaultseo-templates-layout {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.seovaultseo-templates-form {
	flex: 1;
	min-width: 0;
}

.seovaultseo-var-panel {
	width: 300px;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
}

.seovaultseo-var-panel-header {
	padding: 10px 12px;
	border-bottom: 1px solid #e0e0e0;
}

.seovaultseo-var-panel-header h3 {
	margin: 0 0 8px 0;
	font-size: 13px;
	font-weight: 600;
}

.seovaultseo-var-panel-search {
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 4px 8px;
	font-size: 13px;
	box-sizing: border-box;
}

.seovaultseo-var-panel-search:focus {
	border-color: #0D9488;
	outline: none;
}

.seovaultseo-var-panel-body {
	padding: 8px 0;
}

.seovaultseo-var-panel-hint {
	padding: 4px 12px 8px;
	font-size: 11px;
	color: #646970;
	font-style: italic;
	margin: 0;
}

.seovaultseo-var-panel-list {
	max-height: 400px;
	overflow-y: auto;
}

.seovaultseo-var-panel-item {
	display: flex;
	align-items: center;
	padding: 6px 12px;
	gap: 8px;
	border-bottom: 1px solid #f6f7f7;
}

.seovaultseo-var-panel-item:last-child {
	border-bottom: none;
}

.seovaultseo-var-panel-item:hover {
	background: #f0f7ff;
}

.seovaultseo-var-panel-item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.seovaultseo-var-panel-item-name {
	font-size: 12px;
	font-weight: 600;
	color: #1d2327;
}

.seovaultseo-var-panel-item-desc {
	font-size: 11px;
	color: #646970;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.seovaultseo-var-panel-item-add {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border: 1px solid #c3c4c7;
	background: #fff;
	border-radius: 3px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0D9488;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	padding: 0;
	margin: 0;
}

.seovaultseo-var-panel-item-add:hover {
	background: #0D9488;
	color: #fff;
	border-color: #0D9488;
}

.seovaultseo-var-target-active {
	border-color: #0D9488 !important;
	box-shadow: 0 0 0 1px #0D9488 !important;
}

@media screen and (max-width: 1200px) {
	.seovaultseo-templates-layout {
		flex-direction: column;
	}

	.seovaultseo-var-panel {
		width: 100%;
	}
}

/* ==========================================================================
   SERP Preview
   Proportional mini-SERP scaled from Google mobile reference:
   480px content width, Arial 14px URL, 20px title, 14px description.
   ========================================================================== */

.seovaultseo-serp-preview {
	margin: 12px 0;
	padding: 12px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
}

.seovaultseo-serp-preview-label {
	font-size: 11px;
	font-weight: 600;
	color: #646970;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Container query context — measures the available card width. */
.seovaultseo-serp-preview-container {
	container-type: inline-size;
	width: 100%;
	overflow: hidden;
}

/*
 * Scales all SERP typography proportionally.
 * At 480px wide: 1em = 10px → URL 14px, title 20px, description 14px.
 * At narrower widths everything shrinks by the same ratio so line breaks match mobile.
 */
.seovaultseo-serp-preview-mock {
	font-family: arial, sans-serif;
	font-size: calc(100cqw / 48);
	width: 48em;
	max-width: 100%;
}

.seovaultseo-serp-preview-url {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: 1.4em;
	color: #202124;
	margin-bottom: 0.4em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.seovaultseo-serp-preview-favicon {
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
	background: #f1f3f4;
	border-radius: 50%;
	flex-shrink: 0;
}

.seovaultseo-serp-preview-domain {
	color: #202124;
	font-weight: 400;
}

.seovaultseo-serp-preview-path {
	color: #4d5156;
	font-weight: 400;
}

.seovaultseo-serp-preview-title {
	font-size: 2em;
	line-height: 1.3;
	color: #1a0dab;
	text-decoration: none;
	margin-bottom: 0.2em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
}

.seovaultseo-serp-preview-description {
	font-size: 1.4em;
	line-height: 1.58;
	color: #4d5156;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	word-break: break-word;
}

.seovaultseo-serp-preview-title.seovaultseo-serp-truncated {
	color: #d93025;
}

.seovaultseo-serp-preview-description.seovaultseo-serp-truncated {
	color: #d93025;
}

/* ==========================================================================
   Keyword Suggestions
   ========================================================================== */

.seovaultseo-suggest-keywords-btn.button.button-secondary {
	display: inline-block;
	margin-top: 8px;
	padding: 0 10px;
	min-height: 24px;
	height: 24px;
	line-height: 22px;
	font-size: 11px;
}

.seovault-ai-field #seovault_focus_keyword {
	margin-bottom: 0;
}

.seovaultseo-keyword-error {
	color: #d63638;
}

.seovaultseo-keyword-suggestions {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.seovaultseo-keyword-chip {
	display: inline-block;
	padding: 4px 10px;
	background: #f0f7ff;
	border: 1px solid #d0e3ff;
	border-radius: 16px;
	font-size: 12px;
	color: #2271b1;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	user-select: none;
}

.seovaultseo-keyword-chip:hover {
	background: #e0efff;
	border-color: #b0d3ff;
}

.seovaultseo-keyword-chip:active {
	background: #d0e3ff;
}

/* ==========================================================================
   Cache compatibility notice
   ========================================================================== */

.seovaultseo-cache-notice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 12px;
	padding: 10px 12px;
	background: #fcf9e8;
	border: 1px solid #f0e6a6;
	border-left: 3px solid #dba617;
	border-radius: 2px;
	color: #3c434a;
	box-sizing: border-box;
}

.seovaultseo-cache-notice__body {
	flex: 1;
	min-width: 0;
}

.seovaultseo-cache-notice__title {
	display: block;
	margin: 0 0 4px;
	font-size: 13px;
}

.seovaultseo-cache-notice__message {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
}

.seovaultseo-cache-notice__plugins {
	display: inline;
	opacity: 0.85;
}

.seovaultseo-cache-notice__dismiss {
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #646970;
	cursor: pointer;
	line-height: 1;
}

.seovaultseo-cache-notice__dismiss:hover,
.seovaultseo-cache-notice__dismiss:focus {
	color: #1d2327;
}

.seovaultseo-cache-notice__dismiss .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
}

.seovaultseo-cache-notice--compact {
	align-items: center;
	padding: 8px 10px;
}

.seovaultseo-cache-notice--compact .dashicons-warning {
	color: #dba617;
	width: 18px;
	height: 18px;
	font-size: 18px;
	flex-shrink: 0;
}

.seovault-ai-meta-box .seovaultseo-cache-notice--compact {
	margin-top: 0;
}

/* Term add/edit SEO fields */
.seovault-ai-term-meta-box--add {
	margin: 1.5em 0;
	padding: 12px;
	border: 1px solid #c3c4c7;
	background: #fff;
}

.seovault-ai-term-meta-box--add h2,
.seovault-ai-term-meta-heading h2 {
	margin: 0 0 12px;
	padding: 0;
	font-size: 14px;
}

.seovault-ai-term-field .seovaultseo-char-counter {
	margin-left: 6px;
	font-weight: 400;
}

/* ==========================================================================
   Schema Health — compact sidebar summary
   ========================================================================== */

.seovaultseo-schema-health {
	margin: 0 0 14px;
	padding: 10px 8px;
	border: 1px solid #c3c4c7;
	border-inline-start-width: 3px;
	border-radius: 3px;
	background: #fff;
}

.seovaultseo-schema-health-compact {
	/* Compact summary: never create an inner scrollbar in the editor sidebar. */
	overflow: visible;
	max-height: none;
}

.seovaultseo-schema-health-valid,
.seovaultseo-schema-health-healthy {
	border-inline-start-color: #68b984;
	background: #f7fbf8;
}

.seovaultseo-schema-health-valid_with_recommendations,
.seovaultseo-schema-health-improvements_available {
	border-inline-start-color: #c4a35a;
	background: #fcfbf7;
}

.seovaultseo-schema-health-warning,
.seovaultseo-schema-health-invalid,
.seovaultseo-schema-health-action_required,
.seovaultseo-schema-health-unavailable {
	border-inline-start-color: #d63638;
	background: #fff;
}

.seovaultseo-schema-health-not_checked,
.seovaultseo-schema-health-no_schema,
.seovaultseo-schema-health-available_after_publishing {
	border-inline-start-color: #8c8f94;
	background: #fff;
}

.seovaultseo-schema-health-stale {
	border-inline-start-color: #2271b1;
}

.seovaultseo-schema-health h3 {
	margin: 0 0 6px;
	font-size: 13px;
}

.seovaultseo-schema-health-state {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
	font-size: 12px;
}

.seovaultseo-schema-health-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #8c8f94;
	color: #fff;
	font-weight: 700;
	line-height: 1;
}

.seovaultseo-schema-health-valid .seovaultseo-schema-health-icon,
.seovaultseo-schema-health-healthy .seovaultseo-schema-health-icon {
	background: #46a35e;
}

.seovaultseo-schema-health-valid_with_recommendations .seovaultseo-schema-health-icon,
.seovaultseo-schema-health-improvements_available .seovaultseo-schema-health-icon {
	background: #a8873a;
}

.seovaultseo-schema-health-warning .seovaultseo-schema-health-icon,
.seovaultseo-schema-health-invalid .seovaultseo-schema-health-icon,
.seovaultseo-schema-health-action_required .seovaultseo-schema-health-icon,
.seovaultseo-schema-health-unavailable .seovaultseo-schema-health-icon {
	background: #d63638;
}

.seovaultseo-schema-health-summary,
.seovaultseo-schema-health-scope,
.seovaultseo-schema-health-entities,
.seovaultseo-schema-health-limitation,
.seovaultseo-schema-health-setup-count {
	margin: 4px 0;
	color: #50575e;
	font-size: 12px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.seovaultseo-schema-health-entities {
	color: #1d2327;
	font-weight: 500;
}

.seovaultseo-schema-health-top-actions {
	margin: 6px 0 4px;
	padding-inline-start: 1.2em;
	color: #1d2327;
	font-size: 11px;
	line-height: 1.45;
}

.seovaultseo-schema-health-top-actions li {
	margin: 0 0 4px;
	overflow-wrap: anywhere;
}

.seovaultseo-schema-health-setup-count {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #dcdcde;
	font-weight: 600;
	color: #1d2327;
}

.seovaultseo-schema-health-setup {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #dcdcde;
}

.seovaultseo-schema-health-setup-heading {
	margin: 0 0 4px;
	font-size: 12px;
	line-height: 1.4;
	color: #1d2327;
}

.seovaultseo-schema-health-setup .seovaultseo-schema-health-setup-count {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	font-weight: 500;
}

.seovaultseo-schema-health-setup-list,
.seovaultseo-schema-health-entity-list {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.seovaultseo-schema-health-setup-item,
.seovaultseo-schema-health-entity-item {
	margin: 0 0 8px;
	padding: 0;
}

.seovaultseo-schema-health-setup-item-title,
.seovaultseo-schema-health-setup-item-summary,
.seovaultseo-schema-health-setup-item-actions {
	margin: 0 0 2px;
	font-size: 11px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.seovaultseo-schema-health-setup-badge {
	display: inline-block;
	margin-inline-start: 4px;
	color: #646970;
	font-weight: 500;
}

.seovaultseo-schema-health-setup-item-actions,
.seovaultseo-schema-health-entity-item {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.seovaultseo-schema-health-entity-type {
	font-size: 11px;
	font-weight: 600;
	color: #1d2327;
}

.seovaultseo-schema-setup-complete,
.seovaultseo-schema-setup-remove,
.seovaultseo-schema-entity-edit {
	padding: 0;
	min-height: 0;
	line-height: 1.4;
}

.seovaultseo-schema-health-actions {
	margin-top: 9px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.seovaultseo-schema-health-actions .button {
	max-width: 100%;
	white-space: normal;
	font-size: 11px;
	line-height: 1.4;
	height: 24px;
	min-height: 24px;
	padding: 0 8px;
}

.seovaultseo-schema-health-live {
	margin-top: 10px;
	padding-top: 9px;
	border-top: 1px solid #dcdcde;
}

.seovaultseo-schema-health-live h4 {
	margin: 0 0 6px;
	font-size: 12px;
}

.seovaultseo-schema-health-live-state {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
	font-size: 12px;
}

.seovaultseo-schema-health-live-summary {
	margin: 4px 0;
	color: #3c434a;
	font-size: 12px;
	line-height: 1.45;
}

.seovaultseo-schema-health-live-details {
	margin: 6px 0 0;
	padding-inline-start: 18px;
	color: #3c434a;
	font-size: 12px;
}

.seovaultseo-schema-health-live-matches .seovaultseo-schema-health-icon,
.seovaultseo-schema-health-live-healthy .seovaultseo-schema-health-icon {
	background: #46a35e;
}

.seovaultseo-schema-health-live-differs .seovaultseo-schema-health-icon,
.seovaultseo-schema-health-live-action_required .seovaultseo-schema-health-icon,
.seovaultseo-schema-health-live-unavailable .seovaultseo-schema-health-icon {
	background: #d63638;
}

.seovaultseo-schema-health-live-not_checked .seovaultseo-schema-health-icon,
.seovaultseo-schema-health-live-not_public .seovaultseo-schema-health-icon,
.seovaultseo-schema-health-live-available_after_publishing .seovaultseo-schema-health-icon {
	background: #8c8f94;
}

.seovaultseo-schema-health-request-error {
	margin-top: 8px;
	padding: 6px 8px;
	border-inline-start: 3px solid #d63638;
	background: #fcf0f1;
	color: #8a2424;
	font-size: 11px;
}

.seovaultseo-schema-health-request-error[hidden] {
	display: none;
}

/* Review-schema detail markup (not shown in the compact sidebar). */
.seovaultseo-schema-health-details-panel {
	/* Wide Review surface may scroll as a whole; avoid nested sidebar scroll. */
	max-height: none;
	overflow: visible;
	padding-inline-end: 0;
}

.seovaultseo-schema-health-group h4 {
	margin: 10px 0 5px;
	font-size: 12px;
}

.seovaultseo-schema-health-group-recommendation {
	border-inline-start: 3px solid #c4a35a;
	padding-inline-start: 6px;
}

.seovaultseo-schema-health-group-error {
	border-inline-start: 3px solid #d63638;
	padding-inline-start: 6px;
}

.seovaultseo-schema-health-group-warning {
	border-inline-start: 3px solid #d63638;
	padding-inline-start: 6px;
}

.seovaultseo-schema-health-technical {
	margin-top: 8px;
}

.seovaultseo-schema-health-technical summary {
	cursor: pointer;
	color: #646970;
	font-size: 11px;
}

.seovaultseo-schema-health-repair-actions {
	margin: 6px 0 0;
	padding-inline-start: 18px;
	font-size: 11px;
}

.seovaultseo-schema-health-group-count {
	color: #646970;
	font-weight: 400;
}

.seovaultseo-schema-health-group ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.seovaultseo-schema-health-issue-row {
	margin: 0 0 5px;
}

.seovaultseo-schema-health-issue {
	margin: 0;
	padding: 0;
	border: 1px solid #dcdcde;
	border-radius: 3px;
	background: #f6f7f7;
	font-size: 11px;
}

.seovaultseo-schema-health-issue-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 5px;
	min-width: 0;
	padding: 6px;
	color: #1d2327;
	font-size: 11px;
	line-height: 1.35;
}

.seovaultseo-schema-health-issue-icon {
	flex: 0 0 14px;
	font-weight: 700;
	text-align: center;
}

.seovaultseo-schema-health-issue-title-text {
	flex: 1 1 150px;
	min-width: 0;
	font-weight: 600;
	overflow-wrap: break-word;
}

.seovaultseo-schema-health-issue-hint {
	flex: 1 1 100%;
	min-width: 0;
	padding-inline-start: 19px;
	color: #646970;
	font-size: 10px;
}

.seovaultseo-schema-health-issue-body {
	padding: 0 6px 6px;
	color: #50575e;
	border-top: 1px solid #dcdcde;
}

.seovaultseo-schema-health-action {
	margin: 6px 0;
}

.seovaultseo-schema-health-learn-more {
	margin: 6px 0 0;
}

.seovaultseo-schema-health-technical dl {
	margin: 6px 0 0;
}

.seovaultseo-schema-health-technical dt {
	font-weight: 600;
	color: #1d2327;
}

.seovaultseo-schema-health-technical dd {
	margin: 0 0 6px;
}

.seovaultseo-schema-health-limitation {
	margin-top: 9px;
	padding-top: 7px;
	border-top: 1px solid #dcdcde;
}

/* ==========================================================================
   Review schema wide surface
   ========================================================================== */

.seovaultseo-schema-review {
	padding: 0;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	width: min(960px, calc(100vw - 2rem));
	max-width: calc(100vw - 2rem);
	max-height: min(90vh, 900px);
	background: #fff;
	color: #1d2327;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.seovaultseo-schema-review::backdrop {
	background: rgba(0, 0, 0, 0.45);
}

.seovaultseo-schema-review-fallback-open {
	position: fixed;
	inset-block-start: 5vh;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 100100;
	display: block;
}

.seovaultseo-schema-review-chrome {
	display: flex;
	flex-direction: column;
	max-height: min(90vh, 900px);
}

.seovaultseo-schema-review-header,
.seovaultseo-schema-review-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-block-end: 1px solid #dcdcde;
	background: #f6f7f7;
}

.seovaultseo-schema-review-footer {
	border-block-end: 0;
	border-block-start: 1px solid #dcdcde;
}

.seovaultseo-schema-review-header h2 {
	margin: 0;
	flex: 1 1 auto;
	font-size: 16px;
	line-height: 1.3;
}

.seovaultseo-schema-review-close.button-link {
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	color: #1d2327;
}

.seovaultseo-schema-review-body {
	overflow: auto;
	overscroll-behavior: contain;
	padding: 14px 16px;
	min-height: 120px;
}

.seovaultseo-schema-review-section {
	margin: 0 0 18px;
	padding-block-end: 12px;
	border-block-end: 1px solid #dcdcde;
}

.seovaultseo-schema-review-section:last-of-type {
	border-block-end: 0;
}

.seovaultseo-schema-review-section h3 {
	margin: 0 0 8px;
	font-size: 13px;
}

.seovaultseo-schema-review-status {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
}

.seovaultseo-schema-review-muted,
.seovaultseo-schema-review-placeholder {
	color: #50575e;
	font-size: 12px;
}

.seovaultseo-schema-review-error {
	color: #8a2424;
	font-size: 12px;
}

.seovaultseo-schema-review-list {
	margin: 0;
	padding-inline-start: 1.2em;
	font-size: 12px;
	line-height: 1.45;
}

.seovaultseo-schema-review-list li {
	margin: 0 0 8px;
	overflow-wrap: anywhere;
}

.seovaultseo-schema-review-type {
	display: inline-block;
	margin-inline-end: 6px;
	font-weight: 600;
}

.seovaultseo-schema-review-source,
.seovaultseo-schema-review-badge {
	display: inline-block;
	margin-inline-end: 6px;
	padding: 1px 6px;
	border: 1px solid #c3c4c7;
	border-radius: 2px;
	background: #fff;
	color: #3c434a;
	font-size: 11px;
}

.seovaultseo-schema-review-id {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
	font-size: 11px;
}

.seovaultseo-schema-review-technical {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #dcdcde;
	font-size: 12px;
}

.seovaultseo-schema-review-technical summary {
	cursor: pointer;
	color: #1d2327;
	font-weight: 600;
}

.seovaultseo-schema-review-technical dl {
	margin: 8px 0 0;
}

.seovaultseo-schema-review-technical dt {
	font-weight: 600;
}

.seovaultseo-schema-review-technical dd {
	margin: 0 0 8px;
	overflow-wrap: anywhere;
}

.seovaultseo-schema-review-copy-status {
	font-size: 12px;
	color: #1d2327;
}

.seovaultseo-schema-review-footer .button {
	white-space: normal;
	height: auto;
	line-height: 1.3;
}

@media (forced-colors: active) {
	.seovaultseo-schema-review,
	.seovaultseo-schema-review-source,
	.seovaultseo-schema-review-badge {
		border: 1px solid CanvasText;
	}

	.seovaultseo-schema-review::backdrop {
		background: CanvasText;
	}
}

@media (max-width: 782px) {
	.seovaultseo-schema-review {
		width: calc(100vw - 1rem);
		max-height: 92vh;
	}
}

/* ==========================================================================
   Add schema picker shell
   ========================================================================== */

.seovaultseo-schema-add-picker,
.seovaultseo-schema-guided-placeholder,
.seovaultseo-schema-guided-form {
	padding: 0;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	width: min(640px, calc(100vw - 2rem));
	max-width: calc(100vw - 2rem);
	max-height: min(88vh, 760px);
	background: #fff;
	color: #1d2327;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.seovaultseo-schema-add-picker::backdrop,
.seovaultseo-schema-guided-placeholder::backdrop,
.seovaultseo-schema-guided-form::backdrop {
	background: rgba(0, 0, 0, 0.45);
}

.seovaultseo-schema-dialog-fallback-open,
.seovaultseo-schema-review-fallback-open {
	position: fixed;
	inset-block-start: 5vh;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 100100;
	display: block;
}

.seovaultseo-schema-add-picker-chrome {
	display: flex;
	flex-direction: column;
	max-height: min(88vh, 760px);
}

.seovaultseo-schema-add-picker-header,
.seovaultseo-schema-add-picker-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-block-end: 1px solid #dcdcde;
	background: #f6f7f7;
}

.seovaultseo-schema-add-picker-footer {
	border-block-end: 0;
	border-block-start: 1px solid #dcdcde;
}

.seovaultseo-schema-add-picker-header h2 {
	margin: 0;
	flex: 1 1 auto;
	font-size: 16px;
	line-height: 1.3;
}

.seovaultseo-schema-add-picker-close.button-link,
.seovaultseo-schema-guided-placeholder-close.button-link {
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	color: #1d2327;
}

.seovaultseo-schema-add-picker-body {
	overflow: auto;
	overscroll-behavior: contain;
	padding: 14px 16px;
}

.seovaultseo-schema-add-picker-intro,
.seovaultseo-schema-add-picker-note,
.seovaultseo-schema-add-picker-muted,
.seovaultseo-schema-add-picker-unavailable,
.seovaultseo-schema-add-picker-placeholder-copy {
	margin: 0 0 10px;
	color: #50575e;
	font-size: 12px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.seovaultseo-schema-add-picker-note {
	padding: 8px 10px;
	border-inline-start: 3px solid #c4a35a;
	background: #fcfbf7;
	color: #1d2327;
}

.seovaultseo-schema-add-picker-group {
	margin: 0 0 16px;
	padding-block-end: 12px;
	border-block-end: 1px solid #dcdcde;
}

.seovaultseo-schema-add-picker-group:last-child {
	border-block-end: 0;
	margin-bottom: 0;
}

.seovaultseo-schema-add-picker-group h3 {
	margin: 0 0 6px;
	font-size: 13px;
}

.seovaultseo-schema-add-picker-actions {
	margin: 0;
	padding: 0;
	list-style: none;
}

.seovaultseo-schema-add-picker-actions li {
	margin: 0 0 10px;
}

.seovaultseo-schema-add-action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	width: 100%;
	max-width: 100%;
	height: auto;
	white-space: normal;
	text-align: start;
	line-height: 1.35;
	padding-top: 6px;
	padding-bottom: 6px;
}

.seovaultseo-schema-add-action-label {
	font-weight: 600;
}

.seovaultseo-schema-add-action-status {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid #c3c4c7;
	border-radius: 2px;
	background: #fff;
	color: #3c434a;
	font-size: 11px;
	font-weight: 400;
}

.seovaultseo-schema-add-action:disabled .seovaultseo-schema-add-action-status,
.seovaultseo-schema-add-action[aria-disabled="true"] .seovaultseo-schema-add-action-status {
	border-color: #8c8f94;
}

.seovaultseo-schema-add-picker-placeholder-type {
	margin: 0;
	font-weight: 600;
	font-size: 13px;
}

/* Guided form engine */
.seovaultseo-schema-guided-form {
	width: min(720px, calc(100vw - 2rem));
}

.seovaultseo-schema-guided-form-body {
	padding: 0 16px 12px;
	overflow: auto;
}

.seovaultseo-schema-guided-form-status {
	margin: 0 0 12px;
	padding: 8px 10px;
	border-inline-start: 3px solid #2271b1;
	background: #f0f6fc;
	font-size: 13px;
}

.seovaultseo-schema-guided-form-advisory,
.seovaultseo-schema-guided-field .description {
	color: #646970;
	font-size: 12px;
}

.seovaultseo-schema-guided-form-help {
	margin: 0 0 12px;
	padding: 8px 10px;
	border-inline-start: 3px solid #2271b1;
	background: #f6f7f7;
	color: #1d2327;
	font-size: 13px;
	line-height: 1.45;
}

.seovaultseo-schema-guided-form-source {
	margin: 0 0 10px;
}

.seovaultseo-schema-source-label {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 1px 6px;
	border: 1px solid #c3c4c7;
	border-radius: 2px;
	color: #50575e;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	vertical-align: middle;
}

.seovaultseo-schema-health-entity-item .seovaultseo-schema-source-label {
	margin-inline-start: 8px;
}

.seovaultseo-schema-guided-field {
	margin: 0 0 14px;
}

.seovaultseo-schema-guided-field label,
.seovaultseo-schema-guided-legend {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.seovaultseo-schema-guided-required {
	color: #b32d2e;
	margin-inline-start: 2px;
}

.seovaultseo-schema-guided-field-error {
	margin: 4px 0 0;
	color: #b32d2e;
	font-size: 12px;
}

.seovaultseo-schema-guided-form-errors {
	margin: 8px 0 0;
	color: #b32d2e;
	font-size: 13px;
}

.seovaultseo-schema-guided-group,
.seovaultseo-schema-guided-visibility {
	margin: 0 0 14px;
	padding: 10px 12px;
	border: 1px solid #dcdcde;
	border-radius: 2px;
}

.seovaultseo-schema-guided-list-item,
.seovaultseo-schema-guided-media {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
}

.seovaultseo-schema-guided-list-item .regular-text,
.seovaultseo-schema-guided-media .regular-text {
	flex: 1 1 180px;
}

.seovaultseo-schema-guided-visibility-option {
	display: block;
	margin: 0 0 8px;
	font-weight: 400;
}

.seovaultseo-schema-guided-form-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	align-items: center;
}

.seovaultseo-schema-guided-form-footer .seovaultseo-schema-guided-form-remove {
	margin-inline-end: auto;
}

@media (forced-colors: active) {
	.seovaultseo-schema-add-picker,
	.seovaultseo-schema-guided-placeholder,
	.seovaultseo-schema-guided-form,
	.seovaultseo-schema-add-action-status,
	.seovaultseo-schema-guided-group,
	.seovaultseo-schema-guided-visibility {
		border: 1px solid CanvasText;
	}
}

@media (max-width: 782px) {
	.seovaultseo-schema-add-picker,
	.seovaultseo-schema-guided-placeholder,
	.seovaultseo-schema-guided-form {
		width: calc(100vw - 1rem);
	}
}

/* Phase 54 — Advanced custom JSON editor */
.seovaultseo-schema-custom-json {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
}

.seovaultseo-schema-custom-json > summary {
	cursor: pointer;
	font-weight: 600;
}

.seovaultseo-schema-custom-json-intro {
	margin-top: 8px;
}

.seovaultseo-schema-custom-json-banner {
	margin: 8px 0 12px;
	padding: 8px 10px;
	border-inline-start: 3px solid #646970;
	background: #f6f7f7;
}

.seovaultseo-schema-custom-json-banner strong {
	display: block;
	margin-bottom: 2px;
}

.seovaultseo-schema-custom-json-banner--emitted_add,
.seovaultseo-schema-custom-json-banner--emitted_replace {
	border-inline-start-color: #00a32a;
}

.seovaultseo-schema-custom-json-banner--invalid_saved,
.seovaultseo-schema-custom-json-banner--replace_unconfirmed {
	border-inline-start-color: #dba617;
}

.seovaultseo-schema-custom-json-banner--unsaved {
	border-inline-start-color: #2271b1;
	margin-top: 0;
}

.seovaultseo-schema-custom-json-published {
	margin: 6px 0 0;
	color: #646970;
}

.seovaultseo-schema-custom-json-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0;
}

.seovaultseo-schema-custom-json-status {
	min-height: 1.2em;
	margin: 0 0 8px;
	color: #1d2327;
}

.seovaultseo-schema-custom-json-status.is-error {
	color: #b32d2e;
}

.seovaultseo-schema-custom-json-preview {
	margin: 8px 0 12px;
	padding: 8px 10px;
	border: 1px solid #c3c4c7;
	background: #fff;
}

.seovaultseo-schema-custom-json-preview h4,
.seovaultseo-schema-custom-json-preview h5 {
	margin: 0 0 6px;
}

.seovaultseo-schema-custom-json-preview ul {
	margin: 0 0 8px 1.2em;
}

.seovaultseo-schema-custom-json-preview-error {
	color: #b32d2e;
}

@media (forced-colors: active) {
	.seovaultseo-schema-custom-json-banner,
	.seovaultseo-schema-custom-json-preview {
		border: 1px solid CanvasText;
	}
}

/* Phase 55 — content-to-block suggestions */
.seovaultseo-schema-content-suggestions {
	margin: 12px 0;
	padding-top: 8px;
	border-top: 1px solid #dcdcde;
}

.seovaultseo-schema-content-suggestions-heading {
	margin: 0 0 4px;
	font-size: 12px;
}

.seovaultseo-schema-content-suggestions-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.seovaultseo-schema-content-suggestion {
	margin: 0 0 10px;
	padding: 8px 0;
	font-size: 12px;
}

.seovaultseo-schema-content-suggestion-preview {
	margin: 6px 0 8px;
	margin-inline-start: 1.1em;
	color: #3c434a;
	font-size: 12px;
}

.seovaultseo-schema-content-suggestion-title,
.seovaultseo-schema-content-suggestion-reason {
	font-size: 12px;
}

.seovaultseo-schema-content-suggestion-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: center;
}

.seovaultseo-schema-content-suggestion-dialog {
	width: min(560px, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 0;
	border: 1px solid #c3c4c7;
}

.seovaultseo-schema-content-suggestion-dialog::backdrop {
	background: rgba(0, 0, 0, 0.35);
}

.seovaultseo-schema-content-suggestion-dialog-chrome {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 2rem);
}

.seovaultseo-schema-content-suggestion-dialog header,
.seovaultseo-schema-content-suggestion-dialog footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 16px;
	border-bottom: 1px solid #dcdcde;
}

.seovaultseo-schema-content-suggestion-dialog footer {
	border-bottom: 0;
	border-top: 1px solid #dcdcde;
	justify-content: flex-end;
}

.seovaultseo-schema-content-suggestion-dialog-body {
	padding: 12px 16px;
	overflow: auto;
}

.seovaultseo-schema-content-suggestion-row {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #f0f0f1;
}

.seovaultseo-schema-content-suggestion-dialog-error {
	color: #b32d2e;
}

@media (forced-colors: active) {
	.seovaultseo-schema-content-suggestion-dialog,
	.seovaultseo-schema-content-suggestion,
	.seovaultseo-schema-content-suggestion-dialog-error {
		border: 1px solid CanvasText;
	}
}

@media (max-width: 782px) {
	.seovaultseo-schema-content-suggestion-dialog footer {
		flex-wrap: wrap;
		justify-content: stretch;
	}

	.seovaultseo-schema-content-suggestion-dialog footer .button {
		flex: 1 1 auto;
		white-space: normal;
	}
}


