/**
 * Yuqi V3 visual system correction for the Phase 12B.1 Factory output.
 *
 * This layer is deliberately marker-scoped. It unifies surfaces, lines and
 * component treatment without changing the validated S15 Data Center path.
 * Family differences remain in layout, content order and media treatment.
 */

[data-renderer] {
	--yuqi-vs-bg: #06131f;
	--yuqi-vs-surface: #0a1b29;
	--yuqi-vs-surface-raised: #0e2636;
	--yuqi-vs-ink: #edf5f7;
	--yuqi-vs-muted: #9bb0b8;
	--yuqi-vs-line: rgba(176, 211, 218, .18);
	--yuqi-vs-line-strong: rgba(176, 211, 218, .3);
	--yuqi-vs-accent: #74cbd2;
	background: var(--yuqi-vs-bg) !important;
	color: var(--yuqi-vs-ink) !important;
	isolation: isolate;
}

[data-renderer="service-enterprise"][data-family="F01"],
[data-renderer="service-enterprise"][data-family="F02"] {
	--yuqi-vs-accent: #83b8d9;
}

[data-renderer="service-infrastructure"][data-family="F03"],
[data-renderer="service-infrastructure"][data-family="F04"],
[data-renderer="service-network-security"][data-family="F05"],
[data-renderer="service-engineering"][data-family="F12"] {
	--yuqi-vs-accent: #62cbd0;
}

[data-renderer="service-network-security"][data-family="F06"] {
	--yuqi-vs-accent: #e3b56a;
}

[data-renderer="service-data-protection"][data-family="F07"],
[data-renderer="service-virtualization-platform"][data-family="F08"],
[data-renderer="service-virtualization-platform"][data-family="F09"],
[data-renderer="service-virtualization-platform"][data-family="F10"],
[data-renderer="service-engineering"][data-family="F11"],
[data-renderer="service-engineering"][data-family="F13"] {
	--yuqi-vs-accent: #77c4c5;
}

/* Keep the existing components on one dark Yuqi surface system. */
[data-renderer] :is(
	.service-type-page,
	.service-network-content-page,
	.service-pilot-page,
	.yuqi-it-service-editorial
) {
	--f-bg: var(--yuqi-vs-bg) !important;
	--f-text: var(--yuqi-vs-ink) !important;
	--f-text-secondary: var(--yuqi-vs-muted) !important;
	--f-border: var(--yuqi-vs-line) !important;
	--type-panel: var(--yuqi-vs-surface-raised) !important;
	--type-panel-raised: var(--yuqi-vs-surface-raised) !important;
	background-color: var(--yuqi-vs-bg) !important;
	background-image: none !important;
	color: var(--yuqi-vs-ink) !important;
}

[data-renderer] :is(
	.service-type-hero,
	.service-network-content-hero,
	.service-pilot-hero,
	.yuqi-it-service-editorial-hero
) {
	background-color: var(--yuqi-vs-surface) !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding-top: clamp(74px, 8vw, 116px) !important;
}

[data-renderer] :is(
	.service-type-section,
	.service-network-content-section,
	.service-pilot-section,
	.data-protection-section,
	.service-smart-focus,
	.service-smart-scope,
	.service-smart-process,
	.service-type-delivery,
	.service-type-faq,
	.service-type-related,
	.service-pilot-related,
	.service-network-content-related
) {
	background-color: var(--yuqi-vs-bg) !important;
	background-image: none !important;
	border-top: 0 !important;
}

[data-renderer] :is(
	.service-type-process,
	.service-smart-process,
	.service-network-content-section--architecture,
	.service-pilot-related,
	.service-network-content-related
) {
	background-color: var(--yuqi-vs-surface) !important;
}

/* A single low-contrast sticky boundary is functional; decorative grid lines are not. */
[data-renderer] :is(.service-type-jump, .service-network-content-jump) {
	background: rgba(6, 19, 31, .96) !important;
	border-top: 0 !important;
	border-bottom: 1px solid var(--yuqi-vs-line) !important;
	box-shadow: none !important;
}

[data-renderer] :is(
	.service-type-hero,
	.service-network-content-hero,
	.service-pilot-hero,
	.service-integration-section,
	.service-pilot-hero-media,
	.service-network-content-hero-media,
	.recovery-figure,
	.data-protection-figure
)::before,
[data-renderer] :is(
	.service-type-hero,
	.service-network-content-hero,
	.service-pilot-hero,
	.service-integration-section,
	.service-network-content-hero-media
)::after {
	content: none !important;
	display: none !important;
	background: none !important;
}

/* Signals communicate metadata by spacing, not by a row of vertical rules. */
[data-renderer] :is(
	.service-type-hero-signals,
	.service-network-content-signals,
	.service-pilot-signals
) {
	border-top: 1px solid var(--yuqi-vs-line) !important;
	border-bottom: 0 !important;
	gap: clamp(18px, 3vw, 36px);
}

[data-renderer] :is(
	.service-type-hero-signals > div,
	.service-network-content-signals > div,
	.service-pilot-signals > div
) {
	border: 0 !important;
	background: transparent !important;
}

/* One frame for a real media object. Shadows and nested borders do not stack. */
[data-renderer] :is(
	.service-type-hero-media,
	.service-network-content-hero-media,
	.service-network-content-media,
	.service-pilot-hero-media,
	.service-smart-focus-visual,
	.service-smart-mid-visual,
	.data-protection-figure,
	.recovery-figure,
	.service-type-evidence-shell
) {
	border: 1px solid var(--yuqi-vs-line-strong) !important;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .2) !important;
}

[data-renderer] :is(
	.service-type-hero-media figcaption,
	.service-network-content-hero-media figcaption,
	.service-pilot-hero-media figcaption,
	.service-smart-focus-visual figcaption,
	.data-protection-figure figcaption,
	.recovery-figure figcaption
) {
	background: rgba(6, 19, 31, .94) !important;
	border-top: 1px solid var(--yuqi-vs-line) !important;
	color: var(--yuqi-vs-muted) !important;
}

[data-renderer] :is(
	.service-type-hero-copy,
	.service-network-content-hero-copy,
	.service-pilot-hero-copy,
	.yuqi-it-service-editorial-hero-copy
) {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Rows, rails and lists are the default. Cards are reserved for media or a true object. */
[data-renderer] :is(
	.service-type-row-list article,
	.service-type-lens-list article,
	.service-type-step-rail li,
	.service-type-delivery-grid > div,
	.service-network-content-card,
	.service-network-content-card-grid > *,
	.service-smart-focus-points article,
	.service-smart-scope-list article,
	.service-type-related-list > a
) {
	background: transparent !important;
	border: 0 !important;
	border-top: 1px solid var(--yuqi-vs-line) !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

[data-renderer] :is(
	.service-type-row-list,
	.service-type-lens-list,
	.service-type-step-rail,
	.service-type-compare,
	.service-type-delivery-grid,
	.service-type-faq-list,
	.service-type-related-list,
	.service-network-content-card-grid,
	.service-network-content-related-grid
) {
	border-top: 1px solid var(--yuqi-vs-line) !important;
	border-bottom: 0 !important;
}

[data-renderer] :is(
	.service-type-section + .service-type-section,
	.service-network-content-section + .service-network-content-section,
	.service-pilot-section + .service-pilot-section
) {
	border-top: 0 !important;
}

[data-renderer] :is(
	.service-type-section-head h2,
	.service-network-content-section h2,
	.service-pilot-section-head h2,
	.yuqi-it-service-editorial h2
) {
	color: var(--yuqi-vs-ink) !important;
	font-size: clamp(30px, 4vw, 54px) !important;
	line-height: 1.12 !important;
}

[data-renderer] :is(
	.service-type-hero h1,
	.service-network-content-hero h1,
	.service-pilot-hero h1,
	.yuqi-it-service-editorial h1
) {
	color: var(--yuqi-vs-ink) !important;
	font-size: clamp(42px, 5vw, 72px) !important;
	line-height: 1.04 !important;
	letter-spacing: -.045em !important;
}

[data-renderer] :is(
	.service-type-page .eyebrow,
	.service-network-content-page .service-network-content-eyebrow,
	.service-pilot-page .eyebrow,
	.yuqi-it-service-editorial .eyebrow,
	.service-type-row-number,
	.service-type-row-detail,
	.service-type-step-rail li > span
) {
	color: var(--yuqi-vs-accent) !important;
}

[data-renderer] :is(
	.service-type-hero-actions .button-primary,
	.service-network-content-actions .button-primary,
	.service-pilot-hero-actions .button-primary
) {
	background: var(--yuqi-vs-accent) !important;
	border-color: var(--yuqi-vs-accent) !important;
	box-shadow: none !important;
}

[data-renderer] :is(
	.service-type-hero-actions .button-outline,
	.service-network-content-actions .button-outline,
	.service-pilot-hero-actions .button-outline
) {
	background: transparent !important;
	border-color: var(--yuqi-vs-line-strong) !important;
	color: var(--yuqi-vs-ink) !important;
}

/* Family distinction is compositional; F06 keeps amber as a status accent only. */
[data-renderer="service-network-security"][data-family="F05"],
[data-renderer="service-network-security"][data-family="F06"] {
	--r03-line: var(--yuqi-vs-line) !important;
	--r03-line-strong: var(--yuqi-vs-line-strong) !important;
}

[data-renderer="service-network-security"][data-family="F06"] :is(
	.service-network-content-hero,
	.service-network-content-main,
	.service-network-content-section,
	.service-network-content-cta
) {
	background-color: var(--yuqi-vs-bg) !important;
	background-image: none !important;
}

[data-renderer="service-network-security"][data-family="F06"] :is(
	.service-network-content-card,
	.service-network-content-card-grid > *
) {
	border-top-color: var(--yuqi-vs-line) !important;
}

/* R02 keeps topology and dependency layout, without blueprint ornament. */
[data-renderer="service-infrastructure"][data-family="F03"] .service-integration-section::before {
	content: none !important;
	display: none !important;
}

/* R06 uses real site imagery and process order, not a separate cream theme. */
[data-renderer="service-engineering"][data-family="F12"] {
	--r06-surface: var(--yuqi-vs-bg) !important;
	--r06-surface-alt: var(--yuqi-vs-surface) !important;
	--r06-surface-deep: var(--yuqi-vs-bg) !important;
	--r06-line: var(--yuqi-vs-line) !important;
	--r06-ink: var(--yuqi-vs-ink) !important;
	--r06-muted: var(--yuqi-vs-muted) !important;
	--r06-accent: var(--yuqi-vs-accent) !important;
	--r06-accent-bright: #a7e3e2 !important;
}

[data-renderer="service-engineering"][data-family="F12"] :is(
	.service-type-hero-media,
	.service-smart-focus,
	.service-smart-scope,
	.service-smart-process,
	.service-type-delivery,
	.service-type-faq,
	.service-type-related,
	.service-smart-focus-points article,
	.service-type-step-rail li,
	.service-type-delivery-grid > div,
	.service-type-related-list > a
) {
	background-color: var(--yuqi-vs-bg) !important;
	background-image: none !important;
}

[data-renderer="service-engineering"][data-family="F12"] :is(
	.service-type-hero-media img,
	.service-smart-focus-visual img,
	.service-smart-mid-visual img
) {
	filter: saturate(.92) contrast(1.04) !important;
}

/* Static presentation for this governance pass. */
[data-renderer] * {
	animation: none !important;
	transition-duration: 0s !important;
}

@media (max-width: 820px) {
	[data-renderer] :is(
		.service-type-hero,
		.service-network-content-hero,
		.service-pilot-hero,
		.yuqi-it-service-editorial-hero
	) {
		padding-top: 54px !important;
	}

	[data-renderer] :is(
		.service-type-section,
		.service-network-content-section,
		.service-pilot-section
	) {
		padding-top: clamp(46px, 12vw, 72px) !important;
		padding-bottom: clamp(46px, 12vw, 72px) !important;
	}

	[data-renderer] :is(
		.service-type-hero-signals > div,
		.service-network-content-signals > div,
		.service-pilot-signals > div
	) {
		border-top: 1px solid var(--yuqi-vs-line) !important;
		padding: 14px 0 !important;
	}

	[data-renderer] :is(
		.service-type-hero-signals > div:first-child,
		.service-network-content-signals > div:first-child,
		.service-pilot-signals > div:first-child
	) {
		border-top: 0 !important;
	}

	[data-renderer] :is(
		.service-type-hero h1,
		.service-network-content-hero h1,
		.service-pilot-hero h1,
		.yuqi-it-service-editorial h1
	) {
		font-size: clamp(34px, 10vw, 50px) !important;
		line-height: 1.08 !important;
	}

	[data-renderer] :is(
		.service-type-step-rail,
		.service-network-content-card-grid
	) {
		gap: 0 !important;
	}
}

@media (max-width: 560px) {
	[data-renderer] :is(
		.service-type-hero-actions,
		.service-network-content-actions,
		.service-pilot-hero-actions
	) {
		gap: 8px !important;
	}

	[data-renderer] :is(
		.service-type-hero-actions .button,
		.service-network-content-actions .button,
		.service-pilot-hero-actions .button
	) {
		min-height: 46px !important;
	}

	[data-renderer] :is(
		.service-type-hero-media,
		.service-network-content-hero-media,
		.service-pilot-hero-media
	) {
		border-radius: 0 12px 0 12px !important;
	}
}