/* ElevenCode changelog: one card per release, newest first, each with its version, date and
   highlights. The version and the date share a line from 560 px and stack below it; a label
   never wraps, and the highlights stay a readable measure at every width. */

.changelog__head-intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-block-end: var(--space-10);
}

.changelog__title {
	margin-block: var(--space-2) 0;
}

.changelog__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-block-start: var(--space-2);
	font-size: var(--text-sm);
	white-space: nowrap;
}

.changelog__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.changelog__entry {
	padding: var(--space-5);
}

.changelog__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-block-end: var(--space-3);
}

.changelog__version {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	white-space: nowrap;
}

.changelog__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-sm);
	white-space: nowrap;
}

.changelog__confirm {
	font-style: italic;
}

.changelog__highlights {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	padding-inline-start: var(--space-4);
	color: var(--text);
	font-size: var(--text-md);
}

@media (min-width: 560px) {
	.changelog__head {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-3);
	}
}

.changelog__platforms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin-block-end: var(--space-3);
	font-size: var(--text-sm);
}

.changelog__platforms-label {
	color: var(--text-secondary);
}

.changelog__platforms ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.changelog__platform {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 4px 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text);
	white-space: nowrap;
}

.changelog__platform--coming-soon {
	color: var(--text-secondary);
}

.changelog__platform-state {
	color: var(--text-secondary);
}

.changelog__platform-state::before {
	content: "·";
	margin-inline-end: var(--space-1);
}

.os-logo {
	width: 14px;
	height: 14px;
	flex: none;
	fill: currentColor;
}