/* mk-firmware.css: /firmware/ (releases, page 134), rebuilt around the version ledger. 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 ledger. The latest brain release first, the current firmware per role as an
   instrument strip, then a table of releases (version, date, what shipped) with a hairline frame and its own horizontal scroll on
   phones. The Divi Loop of release posts below is Divi's own module (kept exactly); only the wrapper around it is styled here.
   No JavaScript on this page. */

body.dsd.page-id-134 :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: 20ch;
}
body.dsd #page-container .dsdm-h4 h4.et_pb_module_header {
	font-size: 18px !important;
}
body.dsd #page-container .dsdm-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);
}

/* ---------- the latest release, first ---------- */

body.dsd #page-container .dsdm-latest-module .et_pb_text_inner p.dsdm-latest {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 20px;
	margin: 0;
	padding: 14px 20px;
	background: var(--dsc-surface);
	border: 1px solid var(--dsc-line);
	border-radius: var(--dsc-r-card);
	max-width: 100%;
	margin-top: 8px;
}
body.dsd .dsdm-latest__k {
	font: 400 12px/1.4 var(--dsc-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dsc-muted);
}
body.dsd .dsdm-latest__v {
	font: 400 clamp(32px, 4vw, 44px)/1 var(--dsc-mono);
	color: var(--dsc-warn);
}
body.dsd .dsdm-latest__d {
	font: 400 14px/1.4 var(--dsc-mono);
	color: var(--dsc-text);
}

/* ---------- firmware per role: the instrument strip ---------- */

body.dsd #page-container .dsdm-fw-strip {
	padding-bottom: 56px !important;
}
body.dsd #page-container .dsdm-fw-frame .dsdh-reading__n {
	font-size: clamp(28px, 3vw, 40px);
}
body.dsd #page-container .dsdm-fw-notes {
	margin-top: 20px !important;
}
body.dsd #page-container .dsdm-fw-notes .dsdh-col {
	gap: 12px;
}

/* ---------- the version ledger (a table, so it can be scanned) ---------- */

body.dsd #page-container .dsdm-fw-ledger {
	padding-bottom: var(--dsdh-pad) !important;
}
body.dsd .dsdm-fw__scroll {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--dsc-line);
	border-radius: var(--dsc-r-card);
	background: var(--dsc-surface);
}
body.dsd .dsdm-fw__table {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border-collapse: collapse;
	table-layout: auto;
	font-family: var(--dsc-font);
}
body.dsd .dsdm-fw__table caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
body.dsd .dsdm-fw__table thead th {
	padding: 14px 20px;
	border-bottom: 1px solid var(--dsc-line);
	font: 400 12px/1.4 var(--dsc-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	color: var(--dsc-muted);
	background: transparent;
}
body.dsd .dsdm-fw__table td,
body.dsd .dsdm-fw__table tbody th {
	padding: 14px 20px;
	border: 0;
	border-bottom: 1px solid var(--dsc-line);
	text-align: left;
	vertical-align: baseline;
	font-size: 15px;
	line-height: 1.55;
	color: var(--dsc-muted-long);
	background: transparent;
}
body.dsd .dsdm-fw__table tbody tr:last-child :is(td, th) {
	border-bottom: 0;
}
body.dsd .dsdm-fw__table tbody th {
	width: 1%;
	white-space: nowrap;
	font: 400 16px/1.55 var(--dsc-mono);
	color: var(--dsc-warn);
}
body.dsd .dsdm-fw__table td:nth-child(2) {
	width: 1%;
	white-space: nowrap;
	font-family: var(--dsc-mono);
	font-size: 14px;
	color: var(--dsc-text);
}
body.dsd .dsdm-fw__tag {
	margin-left: 12px;
	padding: 2px 8px;
	border: 1px solid var(--dsc-accent);
	border-radius: var(--dsc-r-chip);
	font: 400 12px/1.4 var(--dsc-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dsc-accent);
}
body.dsd .dsdm-fw__none {
	font: 400 13px/1.5 var(--dsc-mono);
	color: var(--dsc-muted);
}
body.dsd .dsdm-fw__scroll:focus-visible {
	outline: 2px solid var(--dsc-accent);
	outline-offset: 3px;
}

/* ---------- release posts: the Divi Loop, kept as it is; its cards take the site's surface ---------- */

body.dsd #page-container .dsdm-fw-posts {
	background: var(--dsc-bg) !important;
}
body.dsd #page-container .dsdh-row > .et_pb_column.dsdm-fw-loop {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px !important;
	align-items: stretch;
}
body.dsd #page-container .dsdm-fw-loop .et_pb_group {
	box-sizing: border-box;
	margin: 0 !important;
	padding: 24px !important;
	gap: 8px !important;
	background: var(--dsc-surface) !important;
	border: 1px solid var(--dsc-line) !important;
	border-radius: var(--dsc-r-card) !important;
	box-shadow: none !important;
}
body.dsd #page-container .dsdm-fw-loop .et_pb_group :is(p, .et_pb_text_inner) {
	font-family: var(--dsc-font) !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--dsc-muted-long) !important;
	margin: 0;
}
body.dsd #page-container .dsdm-fw-loop .et_pb_group .et_pb_text:first-of-type p,
body.dsd #page-container .dsdm-fw-loop .et_pb_group .et_pb_text:nth-last-of-type(2) p {
	font-family: var(--dsc-mono) !important;
	font-size: 12px !important;
	color: var(--dsc-muted) !important;
}
body.dsd #page-container .dsdm-fw-loop .et_pb_group h3,
body.dsd #page-container .dsdm-fw-loop .et_pb_group .et_pb_module_header {
	font-family: var(--dsc-font) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
	color: var(--dsc-text) !important;
}
body.dsd #page-container .dsdm-fw-loop .et_pb_group a {
	color: var(--dsc-link) !important;
	text-decoration: none;
}
body.dsd .dsdm-sample {
	font: 400 12px/1.4 var(--dsc-mono);
	color: var(--dsc-muted);
}
/* the structured data module prints nothing */
body.dsd #page-container .dsdm-ld-row {
	display: none !important;
}

/* ---------- responsive ---------- */

@media (max-width: 767px) {
	body.dsd #page-container .dsdm-fw-frame .dsdh-reading__n {
		font-size: 22px;
		white-space: nowrap;
	}
	body.dsd .dsdm-fw__table {
		min-width: 560px;
	}
	body.dsd .dsdm-fw__table thead th,
	body.dsd .dsdm-fw__table td,
	body.dsd .dsdm-fw__table tbody th {
		padding: 12px 14px;
	}
	body.dsd .dsdm-fw__table td:last-child {
		min-width: 240px;
	}
	body.dsd #page-container .dsdh-hero.dsdm-hero {
		padding: 24px 0 24px !important;
	}
	body.dsd #page-container .dsdm-fw-frame.dsdh-row--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.dsd #page-container .dsdm-fw-frame > .et_pb_column:nth-child(3) {
		border-left: 0;
	}
	body.dsd #page-container .dsdm-fw-frame > .et_pb_column:nth-child(n + 3) {
		border-top: 1px solid var(--dsc-line);
	}
	body.dsd #page-container .dsdh-row > .et_pb_column.dsdm-fw-loop {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 420px) {
	body.dsd #page-container .dsdm-fw-frame.dsdh-row--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.dsd #page-container .dsdm-fw-frame > .et_pb_column + .et_pb_column {
		border-top: 0;
	}
	body.dsd #page-container .dsdm-fw-frame > .et_pb_column:nth-child(2n) {
		border-left: 1px solid var(--dsc-line);
	}
	body.dsd #page-container .dsdm-fw-frame > .et_pb_column:nth-child(2n + 1) {
		border-left: 0;
	}
	body.dsd #page-container .dsdm-fw-frame > .et_pb_column:nth-child(n + 3) {
		border-top: 1px solid var(--dsc-line);
	}
}

/* releases with no notes: one compact list under the table, not a table row each */
body.dsd #page-container .dsdm-fw__bare {
	margin-top: 20px;
}
body.dsd #page-container .dsdm-fw__barek {
	margin: 0 0 10px;
	font-family: var(--dsc-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dsc-muted);
}
body.dsd #page-container .dsdm-fw__barelist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--dsc-muted);
}
body.dsd #page-container .dsdm-fw__barelist b {
	font-family: var(--dsc-mono);
	font-weight: 500;
	color: var(--dsc-text);
}