/**
 * Releases block (.pp-log design): version in mono, then the note, then "Full changelog".
 * Colours come from the theme tokens, so dark mode and child-theme palettes follow.
 */
.atl-releases {
	--atl-releases-line: var(--line, var(--wp--preset--color--line, currentColor));
	--atl-releases-muted: var(--muted, var(--wp--preset--color--muted, inherit));
	--atl-releases-ink: var(--ink, var(--wp--preset--color--contrast, inherit));
	--atl-releases-mono: var(--font-mono, var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace));
}

.atl-releases__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.atl-releases__item {
	display: flex;
	gap: 16px;
	align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid var(--atl-releases-line);
}

.atl-releases__version {
	flex: none;
	width: 72px;
	font: 600 13px/1.4 var(--atl-releases-mono);
	color: var(--atl-releases-muted);
	overflow-wrap: anywhere;
}

.atl-releases__note,
.atl-releases__meta {
	margin: 0;
	min-width: 0;
}

.atl-releases__product {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 8px;
	font-weight: 600;
	font-size: 0.875em;
	color: var(--atl-releases-ink);
	white-space: nowrap;
}

/* Product colour dot; decoration only, the name is always written out. */
.atl-releases__product::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--p, var(--atl-releases-muted));
}

.atl-releases__more {
	display: inline-block;
	margin-top: 16px;
	font-weight: 600;
}

.atl-releases__more:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

.atl-releases__empty {
	margin: 0;
	color: var(--atl-releases-muted);
}

/* Full changelog */
.atl-releases--full .atl-releases__year + .atl-releases__year {
	margin-top: var(--wp--preset--spacing--70, 48px);
}

.atl-releases__year-title {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--large, 1.5rem);
}

.atl-releases--full .atl-releases__item {
	gap: 24px;
	padding: 20px 0;
	scroll-margin-top: 96px;
}

.atl-releases--full .atl-releases__version {
	width: 96px;
	font-size: 14px;
	color: var(--atl-releases-ink);
}

.atl-releases__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.atl-releases__meta {
	font-size: 14px;
	color: var(--atl-releases-muted);
}

.atl-releases__notes > :first-child {
	margin-top: 0;
}

.atl-releases__notes > :last-child {
	margin-bottom: 0;
}

.atl-releases__item:target {
	background: color-mix(in srgb, var(--brand, var(--wp--preset--color--brand, currentColor)) 8%, transparent);
	box-shadow: inset 3px 0 0 var(--brand, var(--wp--preset--color--brand, currentColor));
	padding-left: 12px;
}

@media (max-width: 600px) {
	.atl-releases--full .atl-releases__item {
		flex-direction: column;
		gap: 8px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.atl-releases__item:target {
		transition: background-color 0.3s ease-out;
	}
}

@media (forced-colors: active) {
	.atl-releases__item {
		border-bottom-color: CanvasText;
	}

	.atl-releases__product::before {
		background: CanvasText;
		forced-color-adjust: none;
	}

	.atl-releases__item:target {
		outline: 2px solid Highlight;
		box-shadow: none;
	}
}