/* Family styles for defense-system — populated by its presentation template contract. */

/* ============================================================
   DEFENSE SYSTEM — all .msi-ds-* rules live here (no base in
   equipment.css). Layered teal identity hero, vertical engagement
   chain with inline-start rail, subsystem components grid.
   ============================================================ */

/* Hero — layered radial teal glow */
.msi-ds-hero {
	position: relative;
	overflow: hidden;
	border-block-end: 1px solid var(--ms-color-border);
	background:
		radial-gradient(75% 120% at 82% 8%, color-mix(in srgb, var(--ms-color-teal) 10%, transparent), transparent 55%),
		radial-gradient(50% 90% at 12% 0%, var(--ms-atmo-cobalt), transparent 60%),
		var(--ms-color-bg-secondary);
}
.msi-ds-hero__inner {
	position: relative;
	z-index: 2;
	padding-block: var(--ms-space-8);
}
.msi-ds-hero__title {
	font-family: var(--ms-font-display);
	font-size: var(--ms-fs-hero);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.015em;
	margin-block: var(--ms-space-4) var(--ms-space-3);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ms-space-3);
	color: var(--ms-color-text);
}
.msi-ds-hero__title small {
	font-family: var(--ms-font-mono);
	font-size: var(--ms-fs-h4);
	font-weight: 500;
	color: var(--ms-family-accent, var(--ms-color-teal));
	letter-spacing: .02em;
}
.msi-ds-hero__excerpt {
	color: var(--ms-color-text-secondary);
	font-size: calc(var(--ms-fs-body) * 1.1);
	max-inline-size: 66ch;
	margin-block: 0 var(--ms-space-2);
}

/* Engagement chain — vertical rail (mirrors .msi-timeline pattern) */
.msi-ds-chain {
	position: relative;
	display: grid;
	gap: var(--ms-space-4);
	padding-inline-start: var(--ms-space-6);
}
.msi-ds-chain::before {
	content: "";
	position: absolute;
	inset-block: 10px;
	inset-inline-start: 7px;
	inline-size: 1.5px;
	background: linear-gradient(to bottom, var(--ms-color-teal), color-mix(in srgb, var(--ms-color-teal) 30%, transparent) 45%, var(--ms-color-border));
}
.msi-ds-chain__step {
	position: relative;
	padding: var(--ms-space-4) var(--ms-space-5);
	background: var(--ms-color-surface);
	border: 1px solid var(--ms-color-border);
	border-radius: var(--ms-radius-lg);
	display: grid;
	gap: var(--ms-space-2);
	align-content: start;
	transition:
		background-color var(--ms-dur-fast) var(--ms-ease-out),
		border-color var(--ms-dur-fast) var(--ms-ease-out),
		transform var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-ds-chain__step::before {
	content: "";
	position: absolute;
	inset-block-start: 26px;
	inset-inline-start: calc(-1 * var(--ms-space-6) + 2px);
	inline-size: 11px;
	block-size: 11px;
	border-radius: 50%;
	background: var(--ms-color-surface);
	border: 2px solid var(--ms-family-accent, var(--ms-color-teal));
	box-shadow: 0 0 0 4px var(--ms-color-teal-soft);
}
.msi-ds-chain__step:hover {
	background: var(--ms-color-surface-raised);
	border-color: color-mix(in srgb, var(--ms-color-teal) 35%, transparent);
	transform: translateY(-1px);
}
.msi-ds-chain__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ms-space-2) var(--ms-space-3);
}
.msi-ds-chain__index {
	font-family: var(--ms-font-mono);
	font-size: var(--ms-fs-tiny);
	font-weight: 600;
	color: var(--ms-color-text-quaternary);
	direction: ltr;
	unicode-bidi: embed;
}
.msi-ds-chain__label {
	font-family: var(--ms-font-mono);
	font-size: var(--ms-fs-micro);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ms-family-accent, var(--ms-color-teal));
	direction: ltr;
	unicode-bidi: embed;
}
.msi-ds-chain__title {
	font-size: var(--ms-fs-body);
	font-weight: 700;
	color: var(--ms-color-text);
}
.msi-ds-chain .msi-eq-dl__row {
	padding-block: 6px;
}

/* Components grid — subsystem cards with teal accent spine */
.msi-ds-components {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--ms-space-3);
}
.msi-ds-components__card {
	background: var(--ms-color-surface);
	border: 1px solid var(--ms-color-border);
	border-inline-start: 3px solid color-mix(in srgb, var(--ms-color-teal) 45%, transparent);
	border-radius: var(--ms-radius-md);
	padding: var(--ms-space-4);
	display: grid;
	gap: 4px;
	align-content: start;
	transition:
		background-color var(--ms-dur-fast) var(--ms-ease-out),
		border-color var(--ms-dur-fast) var(--ms-ease-out),
		transform var(--ms-dur-fast) var(--ms-ease-out),
		box-shadow var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-ds-components__card:hover {
	background: var(--ms-color-surface-raised);
	border-color: color-mix(in srgb, var(--ms-color-teal) 35%, transparent);
	transform: translateY(-1px);
	box-shadow: var(--ms-shadow-2);
}
.msi-ds-components__label {
	font-size: var(--ms-fs-micro);
	color: var(--ms-color-text-tertiary);
}
.msi-ds-components__value {
	font-family: var(--ms-font-mono);
	font-size: var(--ms-fs-small);
	font-weight: 600;
	color: var(--ms-color-text);
	direction: ltr;
	unicode-bidi: embed;
	overflow-wrap: anywhere;
}
.msi-ds-components__value .msi-unit {
	font-size: var(--ms-fs-micro);
	color: var(--ms-color-text-tertiary);
	font-style: normal;
}

/* Integration graph — teal family hover (reuses .msi-graph from components.css) */
.msi-ds-integration .msi-graph__node:hover {
	border-color: color-mix(in srgb, var(--ms-color-teal) 40%, transparent);
	color: var(--ms-family-accent, var(--ms-color-teal));
}

/* RESPONSIVE */
@media (max-width: 900px) {
	.msi-ds-hero__inner { padding-block: var(--ms-space-7); }
	.msi-ds-hero__title { font-size: var(--ms-fs-display); }
}
@media (max-width: 640px) {
	.msi-ds-hero__inner { padding-block: var(--ms-space-6); }
	.msi-ds-hero__title {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ms-space-1);
	}
	.msi-ds-chain { padding-inline-start: var(--ms-space-5); }
	.msi-ds-chain__step { padding: var(--ms-space-4); }
	.msi-ds-chain__step::before {
		inset-inline-start: calc(-1 * var(--ms-space-5) + 2px);
	}
	.msi-ds-components { grid-template-columns: 1fr; }
}