/* Docs site styles — shared by all /docs pages. */
			/* --- fluid page --------------------------------------------------------
			   The shared stylesheet lays the CV out as a fixed-width document
			   (body: 982 → 700 → 575 → 350px per breakpoint) and uppercases the
			   header. The docs are a three-column documentation site (nav tree +
			   article + on-this-page), so override those page-level rules. */
			body#cv-content {
				width: auto;
				max-width: none;
				margin: 0;
			}
			.docs-layout,
			.docs-layout *,
			.cv-footer,
			.cv-footer * {
				box-sizing: border-box;
			}
			/* callout accent colours, matched to the site's pill palette */
			:root {
				--t-info: #2b7dd6;
				--t-ok: #2f9e57;
				--t-warn: #b9770f;
			}
			:root[data-theme="dark"] {
				--t-info: #5aadff;
				--t-ok: #5fd08a;
				--t-warn: #e0a94a;
			}
			@media (prefers-color-scheme: dark) {
				:root:not([data-theme="light"]) {
					--t-info: #5aadff;
					--t-ok: #5fd08a;
					--t-warn: #e0a94a;
				}
			}

			/* ---- navbar: brand wordmark --------------------------------------- */
			.cv-nav-center {
				flex: 1 1 auto;
			}
			.brand {
				display: inline-flex;
				align-items: center;
				gap: 10px;
			}
			.brand-mark {
				height: 22px;
				width: auto;
				display: block;
			}
			.brand-name {
				font-family: "Lato", sans-serif;
				font-size: 12px;
				line-height: 1;
				letter-spacing: 2px;
				text-transform: uppercase;
				white-space: nowrap;
				color: var(--text-color);
			}
			.brand-first {
				font-weight: 700;
			}
			.brand-last {
				font-weight: 300;
			}
			.brand-docs {
				margin-left: 10px;
				padding-left: 11px;
				border-left: 1px solid var(--nav-border-color);
				font-size: 13px;
				letter-spacing: 0.5px;
				color: var(--secondary-color);
			}
			.brand-version {
				display: inline-flex;
				align-items: center;
				margin-left: 8px;
				padding: 3px 7px;
				border: 1px solid var(--nav-border-color);
				border-radius: 999px;
				font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
				font-size: 10px;
				letter-spacing: 0.2px;
				line-height: 1;
				white-space: nowrap;
				color: var(--secondary-color);
				background: color-mix(in srgb, var(--nav-elevated-color) 55%, transparent);
			}

			/* mobile nav toggle lives in the navbar; hidden on desktop */
			.docs-nav-toggle {
				display: none;
			}

			/* ---- three-column docs layout ------------------------------------- */
			.docs-layout {
				max-width: 1400px;
				margin: 0 auto;
				/* 48px clears the fixed navbar; the extra ~36px is breathing room */
				padding: 84px 40px 0;
				display: grid;
				grid-template-columns: 232px minmax(0, 1fr) 208px;
				gap: 64px;
				align-items: start;
			}

			/* ---- left: navigation tree ---------------------------------------- */
			.docs-nav {
				position: sticky;
				top: 64px;
				align-self: start;
				max-height: calc(100vh - 80px);
				overflow-y: auto;
				padding: 12px 4px 40px;
			}
			.docs-nav-group {
				margin-bottom: 26px;
			}
			.docs-nav-grouplabel {
				font-family: "Lato", sans-serif;
				font-size: 11px;
				font-weight: 700;
				letter-spacing: 1.3px;
				text-transform: uppercase;
				color: var(--secondary-color);
				margin: 0 0 10px;
			}
			.docs-nav-list {
				list-style: none;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				gap: 1px;
			}
			.docs-nav-sublabel {
				font-size: 10px;
				font-weight: 700;
				letter-spacing: 0.8px;
				text-transform: uppercase;
				color: var(--secondary-color);
				opacity: 0.75;
				margin: 12px 0 5px 2px;
			}
			.docs-nav-link {
				display: flex;
				align-items: center;
				gap: 7px;
				padding: 6px 10px;
				border-radius: 7px;
				font-size: 14px;
				line-height: 1.35;
				color: var(--secondary-color) !important;
				transition:
					color 0.15s ease,
					background 0.15s ease;
			}
			a.docs-nav-link:hover {
				color: var(--text-color) !important;
				background: var(--nav-hover-color);
			}
			.docs-nav-link.active {
				color: var(--text-color) !important;
				background: var(--nav-elevated-color);
				font-weight: 700;
			}
			.docs-nav-link.soon {
				cursor: default;
				opacity: 0.75;
			}
			.docs-nav-link .soon-pill {
				margin-left: auto;
				font-size: 9px;
				font-weight: 700;
				letter-spacing: 0.4px;
				text-transform: uppercase;
				color: var(--secondary-color);
				border: 1px solid var(--nav-border-color);
				border-radius: 999px;
				padding: 1px 6px;
			}

			/* ---- middle: article ---------------------------------------------- */
			.docs-article {
				min-width: 0;
				max-width: 46rem;
				padding: 12px 0 64px;
			}
			.docs-eyebrow {
				font-size: 12px;
				font-weight: 700;
				letter-spacing: 1.5px;
				text-transform: uppercase;
				color: var(--link-color);
				margin: 0 0 12px;
			}
			.docs-article h1 {
				font-family: "Lato", sans-serif;
				font-weight: 700;
				font-size: 40px;
				letter-spacing: -0.4px;
				line-height: 1.15;
				text-transform: none;
				margin: 0 0 16px;
			}
			.docs-lede {
				color: var(--secondary-color);
				font-size: 18px;
				line-height: 1.6;
				margin: 0 0 8px;
			}
			.docs-section {
				display: block;
				scroll-margin-top: 64px;
				padding: 40px 0;
				border-top: 1px solid var(--nav-border-color);
			}
			.docs-section:first-of-type {
				border-top: none;
				padding-top: 28px;
			}
			.docs-section h2 {
				font-family: "Lato", sans-serif;
				font-weight: 700;
				font-size: 26px;
				letter-spacing: -0.2px;
				text-transform: none;
				margin: 0 0 18px;
			}
			.docs-section h3 {
				font-family: "Lato", sans-serif;
				font-weight: 700;
				font-size: 17px;
				margin: 30px 0 10px;
			}
			.docs-section h4 {
				font-family: "Lato", sans-serif;
				font-weight: 700;
				font-size: 14.5px;
				color: var(--text-color);
				margin: 22px 0 8px;
			}
			.docs-section p {
				font-size: 16px;
				line-height: 1.7;
				color: var(--text-color);
				margin: 0 0 16px;
			}
			.docs-section p:last-child {
				margin-bottom: 0;
			}
			.docs-section ul,
			.docs-section ol {
				margin: 0 0 16px;
				padding-left: 22px;
			}
			.docs-section li {
				font-size: 16px;
				line-height: 1.7;
				margin-bottom: 8px;
			}
			.docs-section ol.steps {
				list-style: none;
				counter-reset: step;
				padding-left: 0;
			}
			.docs-section ol.steps > li {
				position: relative;
				padding: 0 0 4px 46px;
				margin-bottom: 22px;
				counter-increment: step;
			}
			.docs-section ol.steps > li::before {
				content: counter(step);
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 28px;
				height: 28px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 999px;
				background: var(--nav-elevated-color);
				border: 1px solid var(--nav-border-color);
				font-size: 13px;
				font-weight: 700;
				color: var(--text-color);
			}
			.docs-section ol.steps > li > strong {
				display: block;
				margin-bottom: 4px;
			}
			.docs-section a.inline {
				color: var(--link-color) !important;
				text-decoration: none;
			}
			.docs-section a.inline:hover {
				text-decoration: underline !important;
			}
			.docs-section :not(pre) > code {
				font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
				font-size: 0.86em;
				padding: 2px 6px;
				border-radius: 5px;
				background: var(--nav-shortcut-background);
			}

			/* ---- callouts (Note / Tip / Warning) ------------------------------ */
			.callout {
				--_c: var(--t-info);
				--_mix: 9%;
				display: flex;
				gap: 12px;
				margin: 22px 0;
				padding: 14px 16px;
				border: 1px solid
					color-mix(in srgb, var(--_c) 26%, transparent);
				border-left: 4px solid var(--_c);
				border-radius: 10px;
				background: color-mix(
					in srgb,
					var(--_c) var(--_mix),
					var(--background-color)
				);
			}
			:root[data-theme="dark"] .callout {
				--_mix: 15%;
			}
			@media (prefers-color-scheme: dark) {
				:root:not([data-theme="light"]) .callout {
					--_mix: 15%;
				}
			}
			.callout-tip {
				--_c: var(--t-ok);
			}
			.callout-warning {
				--_c: var(--t-warn);
			}
			.callout-icon {
				color: var(--_c);
				font-size: 16px;
				line-height: 1.5;
				flex: 0 0 auto;
			}
			.callout-body {
				min-width: 0;
			}
			.callout-body p {
				margin: 0;
				font-size: 14.5px;
				line-height: 1.6;
			}
			.callout-body p + p {
				margin-top: 8px;
			}
			.callout-title {
				font-weight: 700;
				color: var(--_c);
				margin-right: 6px;
			}

			/* ---- citation (copy buttons + plain-text reference) --------------- */
			.cite-box {
				margin: 0 0 26px;
			}
			.cite-actions {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
				margin-bottom: 12px;
			}
			.cite-btn {
				display: inline-flex;
				align-items: center;
				gap: 7px;
				border: 1px solid var(--nav-border-color);
				background: var(--nav-elevated-color);
				color: var(--text-color);
				border-radius: 8px;
				padding: 8px 14px;
				font: inherit;
				font-size: 13.5px;
				cursor: pointer;
				transition:
					border-color 0.15s ease,
					background 0.15s ease;
			}
			.cite-btn:hover {
				border-color: var(--secondary-color);
			}
			.cite-btn:focus-visible {
				outline: 2px solid var(--link-color);
				outline-offset: 2px;
			}
			.cite-btn.is-copied {
				border-color: var(--link-color);
				color: var(--link-color);
			}
			.cite-btn i {
				font-size: 12px;
			}
			.citation-plain {
				margin: 0;
				padding: 14px 16px;
				border: 1px solid var(--nav-border-color);
				border-radius: 8px;
				background: var(--nav-elevated-color);
				font-size: 14.5px;
				line-height: 1.6;
				color: var(--secondary-color);
			}

			/* ---- code block (copyable) ---------------------------------------- */
			.code-block {
				margin: 22px 0;
				border: 1px solid var(--nav-border-color);
				border-radius: 10px;
				overflow: hidden;
				background: var(--nav-elevated-color);
			}
			.code-head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 12px;
				padding: 8px 10px 8px 16px;
				border-bottom: 1px solid var(--nav-border-color);
			}
			.code-lang {
				font-size: 11px;
				font-weight: 700;
				letter-spacing: 1px;
				text-transform: uppercase;
				color: var(--secondary-color);
			}
			.code-copy {
				display: inline-flex;
				align-items: center;
				gap: 7px;
				border: 1px solid var(--nav-border-color);
				background: var(--background-color);
				color: var(--text-color);
				border-radius: 7px;
				padding: 5px 11px;
				font: inherit;
				font-size: 12.5px;
				cursor: pointer;
				transition:
					border-color 0.15s ease,
					background 0.15s ease;
			}
			.code-copy:hover {
				border-color: var(--secondary-color);
			}
			.code-copy:focus-visible {
				outline: 2px solid var(--link-color);
				outline-offset: 2px;
			}
			.code-copy.is-copied {
				border-color: var(--link-color);
				color: var(--link-color);
			}
			.code-copy i {
				font-size: 11px;
			}
			.code-actions {
				display: flex;
				align-items: center;
				gap: 8px;
			}
			.code-download {
				display: inline-flex;
				align-items: center;
				gap: 7px;
				border: 1px solid var(--nav-border-color);
				background: var(--background-color);
				color: var(--text-color);
				border-radius: 7px;
				padding: 5px 11px;
				font: inherit;
				font-size: 12.5px;
				cursor: pointer;
				transition:
					border-color 0.15s ease,
					background 0.15s ease;
			}
			.code-download:hover {
				border-color: var(--secondary-color);
			}
			.code-download:focus-visible {
				outline: 2px solid var(--link-color);
				outline-offset: 2px;
			}
			.code-download.is-copied {
				border-color: var(--link-color);
				color: var(--link-color);
			}
			.code-download i {
				font-size: 11px;
			}
			.code-block pre {
				margin: 0;
				padding: 16px;
				overflow-x: auto;
			}
			.code-block code {
				font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
				font-size: 13.5px;
				line-height: 1.65;
				color: var(--text-color);
				white-space: pre;
			}
			.code-note {
				display: flex;
				align-items: center;
				gap: 14px;
				margin: 18px 0;
				padding: 12px 14px;
				border: 1px solid var(--nav-border-color);
				border-radius: 8px;
				background: var(--nav-elevated-color);
				font-size: 12.5px;
				line-height: 1.6;
				color: var(--secondary-color);
				opacity: 0.85;
			}
			.code-note-icon {
				flex: 0 0 auto;
				font-size: 11px;
			}
			.code-note-text {
				min-width: 0;
			}
			.code-note :not(pre) > code {
				font-size: 0.92em;
				padding: 1px 5px;
				background: var(--nav-shortcut-background);
				color: var(--text-color);
			}

			/* ---- next-steps cards --------------------------------------------- */
			.next-cards {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
				gap: 14px;
				margin-top: 8px;
			}
			/* "Where to go next" grid on the Overview: two even columns */
			.overview-cards {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: 14px;
				margin-top: 4px;
			}
			@media (max-width: 560px) {
				.overview-cards {
					grid-template-columns: 1fr;
				}
			}
			.next-card {
				display: flex;
				flex-direction: column;
				gap: 6px;
				padding: 16px 18px;
				border: 1px solid var(--nav-border-color);
				border-radius: 10px;
				transition:
					border-color 0.15s ease,
					background 0.15s ease;
			}
			a.next-card:hover {
				border-color: var(--secondary-color);
				background: var(--nav-hover-color);
			}
			.next-card.is-soon {
				opacity: 0.72;
			}
			.next-card-icon {
				font-size: 18px;
				line-height: 1;
				color: var(--link-color);
			}
			.next-card.is-soon .next-card-icon {
				color: var(--secondary-color);
			}
			.next-card-title {
				display: flex;
				align-items: center;
				gap: 8px;
				font-weight: 700;
				font-size: 15px;
				color: var(--text-color) !important;
			}
			.next-card-title .fa-arrow-right {
				font-size: 11px;
				color: var(--secondary-color);
			}
			.next-card-desc {
				font-size: 13.5px;
				line-height: 1.5;
				color: var(--secondary-color);
			}

			/* ---- right: on-this-page ------------------------------------------ */
			.docs-toc {
				position: sticky;
				top: 64px;
				align-self: start;
				max-height: calc(100vh - 80px);
				overflow-y: auto;
				padding: 12px 0 40px;
			}
			.docs-toc-title {
				font-family: "Lato", sans-serif;
				font-size: 11px;
				font-weight: 700;
				letter-spacing: 1.3px;
				text-transform: uppercase;
				color: var(--secondary-color);
				margin: 0 0 14px;
			}
			.docs-toc-list {
				list-style: none;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				gap: 2px;
			}
			.docs-toc-link {
				display: block;
				padding: 5px 0 5px 13px;
				border-left: 2px solid var(--nav-border-color);
				font-size: 13.5px;
				line-height: 1.4;
				color: var(--secondary-color) !important;
				transition:
					color 0.15s ease,
					border-color 0.15s ease;
			}
			.docs-toc-link:hover {
				color: var(--text-color) !important;
			}
			.docs-toc-link.active {
				color: var(--text-color) !important;
				border-left-color: var(--link-color);
				font-weight: 700;
			}

			/* ---- footer aligned to the layout width --------------------------- */
			.cv-footer {
				max-width: 1400px;
				margin: 0 auto;
				padding: 26px 40px 48px;
			}

			/* ---- responsive --------------------------------------------------- */
			/* hide the on-this-page rail first (content keeps the left nav) */
			@media (max-width: 1180px) {
				.docs-layout {
					grid-template-columns: 224px minmax(0, 1fr);
					gap: 40px;
				}
				.docs-toc {
					display: none;
				}
			}
			/* collapse the left nav into a drawer toggled from the navbar */
			@media (max-width: 900px) {
				.docs-layout {
					grid-template-columns: 1fr;
					padding: 72px 24px 0;
				}
				.docs-nav-toggle {
					display: inline-flex;
				}
				.docs-nav {
					display: none;
					position: static;
					max-height: none;
					overflow: visible;
					margin-bottom: 8px;
					padding: 14px 0 20px;
					border-bottom: 1px solid var(--nav-border-color);
				}
				.docs-nav.open {
					display: block;
				}
				.cv-footer {
					padding: 26px 24px 48px;
				}
			}
			@media (max-width: 520px) {
				.brand-docs {
					display: none;
				}
				.brand-version {
					display: none;
				}
				.brand-name {
					font-size: 13px;
					letter-spacing: 1px;
				}
				.docs-article h1 {
					font-size: 32px;
				}
				.docs-lede {
					font-size: 16px;
				}
			}

/* ---- Overview (index) page: no on-this-page rail, two columns ------- */
.docs-layout--index {
	grid-template-columns: 232px minmax(0, 1fr);
}
@media (max-width: 900px) {
	.docs-layout--index {
		grid-template-columns: 1fr;
	}
}

/* ---- previous / next pager ----------------------------------------- */
.docs-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--nav-border-color);
}
.docs-pager-link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 18px;
	border: 1px solid var(--nav-border-color);
	border-radius: 10px;
	min-width: 190px;
	transition:
		border-color 0.15s ease,
		background 0.15s ease;
}
.docs-pager-link:hover {
	border-color: var(--secondary-color);
	background: var(--nav-hover-color);
}
.docs-pager-prev {
	align-items: flex-start;
	text-align: left;
	margin-right: auto;
}
.docs-pager-next {
	align-items: flex-end;
	text-align: right;
	margin-left: auto;
}
.docs-pager-dir {
	font-size: 12px;
	letter-spacing: 0.5px;
	color: var(--secondary-color);
}
.docs-pager-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;
	color: var(--text-color) !important;
}
.docs-pager-title i {
	font-size: 12px;
	color: var(--secondary-color);
}

/* ---- teleoperation-loop diagram ------------------------------------ */
.loop-figure {
	margin: 26px 0 8px;
}
.loop-scroll {
	overflow-x: auto;
}
.loop-diagram {
	display: block;
	width: 100%;
	min-width: 600px;
	height: auto;
}
.loop-diagram text {
	font-family: "Lato", sans-serif;
}
.loop-box {
	fill: var(--nav-elevated-color);
	stroke: var(--nav-border-color);
	stroke-width: 1.5;
}
.loop-box-label {
	fill: var(--text-color);
	font-size: 15px;
	font-weight: 700;
}
.loop-sub {
	fill: var(--secondary-color);
	font-size: 12.5px;
}
.loop-arrow {
	stroke: var(--secondary-color);
	stroke-width: 1.5;
	fill: none;
}
.loop-arrowhead {
	fill: var(--secondary-color);
}
.loop-flow {
	fill: var(--secondary-color);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.4px;
}
.loop-delay {
	fill: var(--background-color);
	stroke: var(--link-color);
	stroke-width: 1.5;
}
.loop-delay-label {
	fill: var(--link-color);
	font-size: 11px;
	font-weight: 700;
}
.loop-caption {
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--secondary-color);
}

/* ---- pipeline diagram (uplink / robot / downlink stages) ------------ */
.pipeline {
	margin: 26px 0 8px;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.pipeline-figure {
	margin: 0;
	padding: 0;
}
.pipeline-figure + ol:not(.steps),
.pipeline-figure + ul,
.pipeline-figure + p {
	margin-top: 16px;
}
.pipeline-figure + ol.steps {
	margin-top: 24px;
}
.pipeline-lane {
	border: 1px solid var(--nav-border-color);
	border-radius: 12px;
	padding: 14px 16px 18px;
	background: color-mix(in srgb, var(--nav-elevated-color) 45%, transparent);
}
.pipeline-lane + .pipeline-lane {
	margin-top: 26px;
}
.pipeline-lane-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--secondary-color);
	margin: 0 0 12px;
}
.pipeline-lane-label .dir {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.85;
}
.pipeline-stage {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--nav-border-color);
	border-radius: 9px;
	background: var(--background-color);
}
.pipeline-lane > .pipeline-stage + .pipeline-stage {
	margin-top: 8px;
}
/* a stage with a note attached (e.g. Remote-side Assistance): the note is
   part of the same bordered card, not a separate box, so skipping the
   (often optional) stage obviously skips the note's behavior too. */
.pipeline-stage.has-note {
	display: block;
	padding: 0;
}
.pipeline-stage-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 14px;
}
.pipeline-stage-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 12px 10px;
	padding-top: 8px;
	border-top: 1px dashed var(--nav-border-color);
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--secondary-color);
}
.pipeline-stage-note i {
	margin-top: 2px;
	flex: 0 0 auto;
	color: var(--link-color);
}
.pipeline-stage-name {
	font-weight: 700;
	font-size: 14.5px;
	color: var(--text-color);
}
.pipeline-stage-type {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--secondary-color);
}
.pipeline-stage-tag {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
}
.pipeline-stage-tag-locked {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--secondary-color);
	border: 1px solid var(--nav-border-color);
	background: color-mix(in srgb, var(--nav-elevated-color) 55%, transparent);
}
/* optional (assistance) stages: dashed + muted */
.pipeline-stage.is-optional {
	border-style: dashed;
	border-color: var(--secondary-color);
	background: transparent;
}
.pipeline-stage.is-optional .pipeline-stage-name {
	font-weight: 400;
	color: var(--secondary-color);
}
.pipeline-stage.is-optional .pipeline-stage-tag {
	color: var(--secondary-color);
	border: 1px solid var(--nav-border-color);
}
/* communication (delay) stages: accented */
.pipeline-stage.is-delay {
	border-color: var(--link-color);
}
.pipeline-stage.is-delay .pipeline-stage-tag {
	color: #fff;
	background: var(--link-color);
}
:root[data-theme="dark"] .pipeline-stage.is-delay .pipeline-stage-tag {
	color: #0d0d0d;
}
/* observation hooks: subtle tint to show the same module's two tick positions */
.pipeline-stage.is-observation-hook {
	border-color: color-mix(in srgb, var(--link-color) 45%, var(--nav-border-color));
	background: color-mix(in srgb, var(--link-color) 6%, var(--background-color));
}
.pipeline-stage.is-observation-hook .pipeline-stage-type {
	color: color-mix(in srgb, var(--link-color) 45%, var(--secondary-color));
}
/* connector arrow between stages */
.pipeline-arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 22px;
	color: var(--secondary-color);
	font-size: 12px;
}
.pipeline-dependency-arrow {
	flex-direction: column;
	gap: 1px;
	height: 34px;
	font-size: 12px;
}
.pipeline-dependency-arrow > span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.45px;
	text-transform: uppercase;
	color: var(--secondary-color);
}
/* cross-cutting note (task + data) */
.pipeline-cross {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 18px;
	padding: 12px 14px;
	border: 1px dashed var(--nav-border-color);
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--secondary-color);
}
.pipeline-cross i {
	color: var(--secondary-color);
	font-size: 13px;
	margin-top: 2px;
	flex: 0 0 auto;
}
.pipeline-cross strong {
	color: var(--text-color);
}
.pipeline-cross.is-cross-cutting {
	border-color: var(--link-color);
}
.pipeline-cross.is-cross-cutting i {
	color: var(--link-color);
}
.pipeline-caption {
	margin-top: 14px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--secondary-color);
}
.pipeline-paper-ref {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 3px 8px;
	margin-top: 14px;
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: 0.2px;
	color: var(--secondary-color);
	opacity: 0.75;
}
.pipeline-paper-ref-label {
	font-weight: 700;
	margin-right: 2px;
}
.pipeline-paper-ref-item:not(:last-child)::after {
	content: "\00b7";
	margin-left: 8px;
	opacity: 0.6;
}

/* muted "soon" next-pager (non-link continuation) */
.docs-pager-next.is-soon {
	opacity: 0.6;
	cursor: default;
}
.docs-pager-next.is-soon:hover {
	border-color: var(--nav-border-color);
	background: none;
}

/* long file paths in inline code should wrap, not overflow */
.docs-section :not(pre) > code {
	overflow-wrap: anywhere;
}

/* ---- module reference: quick-facts bar ------------------------------ */
.module-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 28px;
	margin: 22px 0 4px;
	padding: 16px 20px;
	border: 1px solid var(--nav-border-color);
	border-radius: 10px;
	background: var(--nav-elevated-color);
}
.module-meta-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.module-meta-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--secondary-color);
}
.module-meta-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-color);
}
.module-meta-value code {
	font-weight: 500;
}

/* ---- boundary: owns / does-not-own comparison ------------------------ */
.boundary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
	margin: 8px 0 4px;
}
.boundary-col {
	border: 1px solid var(--nav-border-color);
	border-radius: 10px;
	padding: 16px 18px;
}
.boundary-col-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.3px;
	margin: 0 0 12px;
	color: var(--text-color);
}
.boundary-col.is-owns .boundary-col-title i {
	color: var(--t-ok);
}
.boundary-col.is-not .boundary-col-title i {
	color: var(--secondary-color);
}
.boundary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.boundary-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0;
}
.boundary-list i {
	flex: 0 0 auto;
	margin-top: 4px;
	font-size: 11px;
}
.boundary-col.is-owns .boundary-list i {
	color: var(--t-ok);
}
.boundary-col.is-not .boundary-list i {
	color: var(--secondary-color);
}
.boundary-col.is-not .boundary-list li {
	color: var(--secondary-color);
}

/* ---- member tables (Contract / Config sections) ----------------------- */
.table-scroll {
	overflow-x: auto;
	margin: 18px 0;
}
.member-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
/* names a worked-example table for screen readers, and labels it on screen —
   matched to .timeline-caption so a table and a figure read the same way */
.member-table caption {
	text-align: left;
	padding-bottom: 10px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--secondary-color);
}
.member-table th,
.member-table td {
	text-align: left;
	padding: 10px 18px 10px 0;
	border-bottom: 1px solid var(--nav-border-color);
	vertical-align: top;
}
.member-table th {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--secondary-color);
	white-space: nowrap;
}
/* every column but the last (Description) stays on one line; short type/field
   tokens must never break mid-word even when the table is squeezed to make
   room for the wrapping Description column */
.member-table td:not(:last-child) {
	white-space: nowrap;
}
.member-table code {
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: normal;
}
.member-table tr:last-child td {
	border-bottom: none;
}
.member-tag {
	display: inline-block;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid var(--nav-border-color);
	color: var(--secondary-color);
}
.member-tag.is-required {
	color: var(--link-color);
	border-color: color-mix(in srgb, var(--link-color) 45%, transparent);
}

/* ---- code tabs: switch between alternate implementations -------------- */
.code-tabs {
	margin: 22px 0;
}
.code-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}
.demo-downlink-examples .code-tabs-nav {
	gap: 10px;
}
.code-tab-btn {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	border: 1px solid var(--nav-border-color);
	background: var(--nav-elevated-color);
	color: var(--secondary-color);
	border-radius: 8px;
	padding: 7px 14px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		color 0.15s ease;
}
.code-tab-btn:hover {
	border-color: var(--secondary-color);
	color: var(--text-color);
}
.code-tab-btn:focus-visible {
	outline: 2px solid var(--link-color);
	outline-offset: 2px;
}
.code-tab-btn.is-active {
	border-color: var(--link-color);
	color: var(--link-color);
	font-weight: 700;
}
.code-tab-note {
	font-weight: 400;
	font-size: 11.5px;
	opacity: 0.85;
}
.code-tab-panel > .code-block:first-child {
	margin-top: 0;
}
.code-tab-panel[hidden] {
	display: none;
}

/* ---- release-order timeline (Uplink Communication) -------------------- */
.timeline-figure {
	margin: 26px 0 8px;
}
.timeline-scroll {
	overflow-x: auto;
}
.timeline-diagram {
	display: block;
	width: 100%;
	min-width: 600px;
	height: auto;
}
.timeline-diagram text {
	font-family: "Lato", sans-serif;
}
.timeline-title {
	fill: var(--text-color);
	font-size: 13px;
	font-weight: 700;
}
.timeline-rail {
	stroke: var(--nav-border-color);
	stroke-width: 1;
}
.timeline-track-label {
	fill: var(--secondary-color);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.4px;
}
/* a package sitting on a track: same treatment as a pipeline stage box */
.timeline-packet {
	fill: var(--nav-elevated-color);
	stroke: var(--secondary-color);
	stroke-width: 1.5;
}
/* a package occupying the wire for as long as it takes to serialise */
.timeline-serialise {
	fill: var(--background-color);
	stroke: var(--link-color);
	stroke-width: 1.5;
}
.timeline-packet-label {
	fill: var(--text-color);
	font-size: 11px;
	font-weight: 700;
}
/* dashed connector: how long the queue held this package */
.timeline-hold {
	stroke: var(--secondary-color);
	stroke-width: 1;
	stroke-dasharray: 3 3;
	fill: none;
}
.timeline-axis {
	stroke: var(--secondary-color);
	stroke-width: 1;
	fill: none;
}
.timeline-axis-head {
	fill: var(--secondary-color);
}
.timeline-axis-label {
	fill: var(--secondary-color);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.4px;
}
.timeline-caption {
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--secondary-color);
}