/* mk-roadmap.css: /roadmap/ (page 1181), rebuilt around one vertical timeline rail. Loaded on that page only (dsc-design plugin,
   assets/mk-<slug>.css), after design.css and home.css. Every rule is under body.dsd; colours, sizes and spaces are tokens.
   Markup: dsc_mk_product.py. Signature element: the rail. One line, newest at the top: what is planned (grey ring), what is in
   the works (teal ring), then what has shipped, newest first (solid amber node, dated). Nothing ahead of today carries a date.
   No JavaScript on this page. */

body.dsd.page-id-1181 :is(#page-container, #et-boc, #et-main-area, #main-content, .et-l, .et_builder_inner_content, .et_pb_post_content) {
	background: var(--dsc-bg) !important;
}
body.dsd #page-container .dsdh-hero.dsdm-hero {
	padding: 40px 0 32px !important;
}
body.dsd #page-container .dsdm-hero .dsdh-col {
	gap: 16px !important;
}
body.dsd #page-container .dsdm-h1 h1.et_pb_module_header {
	font-size: clamp(40px, 5.2vw, 68px) !important;
	line-height: 1.02 !important;
	letter-spacing: -0.035em !important;
	text-wrap: balance;
	max-width: 18ch;
}

/* ---------- the key: what each node means ---------- */

body.dsd #page-container .dsdm-key-module .et_pb_text_inner p.dsdm-key-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 28px;
	margin: 0;
	font: 400 12px/1.5 var(--dsc-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dsc-muted-long);
}
body.dsd .dsdm-key {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
body.dsd .dsdm-key::before {
	content: "";
	flex: none;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border-radius: 50%;
}
body.dsd .dsdm-key--shipped::before { background: var(--dsc-warn); }
body.dsd .dsdm-key--works::before { border: 2px solid var(--dsc-accent); }
body.dsd .dsdm-key--plan::before { border: 2px solid var(--dsc-line-strong); }
body.dsd #page-container .dsdm-key-module .et_pb_text_inner p.dsdm-key-row a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	letter-spacing: 0.04em;
	text-transform: none;
	font-family: var(--dsc-font);
	font-size: 15px;
}

/* ---------- the rail ---------- */

body.dsd #page-container .dsdm-rm {
	padding-bottom: var(--dsdh-pad) !important;
}
body.dsd #page-container .dsdh-row.dsdm-rm-node {
	grid-template-columns: 168px minmax(0, 1fr);
	gap: 0 56px;
	align-items: start;
	padding: 0 !important;
}
/* the line: 2 px, centred 28 px after the date column */
body.dsd #page-container .dsdm-rm-node::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 195px;
	width: 2px;
	background: var(--dsc-line);
}
body.dsd #page-container .dsdm-rm-node--first::before {
	top: 20px;
}
body.dsd #page-container .dsdm-rm-node--last::before {
	bottom: auto;
	height: 14px;
}
body.dsd #page-container .dsdh-row > .et_pb_column.dsdm-rm-date {
	position: relative;
	padding-top: 2px !important;
}
body.dsd #page-container .dsdh-row > .et_pb_column.dsdm-rm-body {
	gap: 12px !important;
	padding: 0 0 56px !important;
}
body.dsd #page-container .dsdm-rm-node--last > .dsdm-rm-body {
	padding-bottom: 0 !important;
}
body.dsd #page-container .dsdm-rm-when .et_pb_text_inner p {
	margin: 0;
	font: 400 13px/1.5 var(--dsc-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dsc-muted);
}
body.dsd #page-container .dsdm-rm-date--shipped .dsdm-rm-when .et_pb_text_inner p { color: var(--dsc-warn); }
body.dsd #page-container .dsdm-rm-date--works .dsdm-rm-when .et_pb_text_inner p { color: var(--dsc-accent); }
body.dsd #page-container .dsdm-rm-date--head .dsdm-rm-when .et_pb_text_inner p {
	color: var(--dsc-accent);
	letter-spacing: 0.14em;
}
/* the nodes */
body.dsd #page-container .dsdm-rm-date:not(.dsdm-rm-date--head)::after {
	content: "";
	position: absolute;
	top: 5px;
	left: calc(100% + 21px);
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--dsc-bg);
}
body.dsd #page-container .dsdm-rm-date--shipped::after { background: var(--dsc-warn) !important; }
body.dsd #page-container .dsdm-rm-date--works::after { border: 2px solid var(--dsc-accent); }
body.dsd #page-container .dsdm-rm-date--plan::after { border: 2px solid var(--dsc-line-strong); }

body.dsd #page-container .dsdm-rm-body h2.et_pb_module_header {
	font-size: clamp(24px, 2.8vw, 34px) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.03em !important;
	max-width: 24ch;
	text-wrap: balance;
}
body.dsd #page-container .dsdm-rm-h3 h3.et_pb_module_header {
	font-size: 22px !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em !important;
}
body.dsd #page-container .dsdm-rm-kicker .et_pb_text_inner p {
	margin: 0;
	font: 400 12px/1.4 var(--dsc-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dsc-muted);
}
body.dsd #page-container .dsdm-rm-text .et_pb_text_inner,
body.dsd #page-container .dsdm-rm-text .et_pb_text_inner p {
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.6;
}
body.dsd #page-container .dsdm-rm-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
body.dsd #page-container .dsdm-rm-list li {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.55;
}
body.dsd #page-container .dsdm-rm-list b {
	font: 400 13px/1.7 var(--dsc-mono);
	letter-spacing: 0.04em;
	color: var(--dsc-warn);
}

/* ---------- gates, checklist, mission ---------- */

body.dsd #page-container .dsdm-rm-close h3.et_pb_module_header {
	font-size: 18px !important;
}
body.dsd #page-container .dsdm-rm-close .dsdh-body + .dsdh-h3 {
	margin-top: 16px !important;
}

/* ---------- phones: the rail moves to the left edge, the date sits above each entry ---------- */

@media (max-width: 767px) {
	body.dsd #page-container .dsdh-hero.dsdm-hero {
		padding: 24px 0 24px !important;
	}
	body.dsd #page-container .dsdh-row.dsdm-rm-node {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px 0;
		padding-left: 32px !important;
	}
	body.dsd #page-container .dsdm-rm-node::before {
		left: 6px;
	}
	body.dsd #page-container .dsdm-rm-date:not(.dsdm-rm-date--head)::after {
		left: -32px;
		top: 3px;
	}
	body.dsd #page-container .dsdh-row > .et_pb_column.dsdm-rm-body {
		padding-bottom: 40px !important;
	}
	body.dsd #page-container .dsdm-rm-list li {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}