@layer theme, base, components, utilities;

@layer components {
	.ml-changelog {
		position: relative;
		font-family: var(--font-sans);
		color: var(--text);
		display: flex;
		flex-direction: column;
		gap: var(--space-12);
		padding-inline-start: var(--space-8);
	}

	/* Continuous vertical timeline connector line */
	.ml-changelog::before {
		content: "";
		position: absolute;
		inset-inline-start: 0.4375rem;
		inset-block-start: var(--space-2);
		inset-block-end: var(--space-2);
		inline-size: 1px;
		background: var(--border);
	}

	/* ─── Release Block ────────────────────────────────────── */
	.ml-changelog-release {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--space-6);
		content-visibility: auto;
		contain-intrinsic-block-size: auto 40rem;
	}

	.ml-changelog-release-node {
		position: absolute;
		inset-inline-start: calc(var(--space-8) * -1 + 0.125rem);
		inset-block-start: 0.1875rem;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
	}

	.ml-changelog-release-dot {
		width: 0.75rem;
		height: 0.75rem;
		border-radius: var(--radius-pill);
		background: var(--background);
		border: 2px solid var(--accent);
		box-shadow: 0 0 0 3px var(--accent-soft);
	}

	.ml-changelog-release-content {
		display: flex;
		flex-direction: column;
		gap: var(--space-6);
		min-width: 0;
	}

	/* ─── Release Header ───────────────────────────────────── */
	.ml-changelog-release-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--space-3);
		padding-bottom: var(--space-3);
		border-bottom: 1px solid var(--border);
	}

	.ml-changelog-release-title-row {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		flex-wrap: wrap;
	}

	.ml-changelog-release-version {
		font-family: var(--font-mono);
		font-size: var(--text-xl);
		font-weight: 700;
		color: var(--text);
		line-height: 1.2;
		letter-spacing: -0.02em;
		scroll-margin-top: 5rem;
	}

	.ml-changelog-release-link {
		color: inherit;
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		gap: var(--space-1-5);
		transition: color var(--duration-fast) var(--ease-out);
	}

	.ml-changelog-release-link:hover {
		color: var(--accent);
	}

	.ml-changelog-release-date {
		display: inline-flex;
		align-items: center;
		font-family: var(--font-mono);
		font-size: var(--text-xs);
		color: var(--text-muted);
		background: var(--surface-2);
		border: 1px solid var(--border);
		border-radius: var(--radius-pill);
		padding: 0.125rem 0.625rem;
		line-height: 1.4;
	}

	.ml-changelog-release-github-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		font-family: var(--font-mono);
		font-size: var(--text-2xs);
		color: var(--text-muted);
		text-decoration: none;
		border: 1px solid var(--border);
		border-radius: var(--radius-sm);
		padding: 0.25rem 0.625rem;
		background: var(--surface);
		transition:
			color var(--duration-fast) var(--ease-out),
			border-color var(--duration-fast) var(--ease-out),
			background var(--duration-fast) var(--ease-out);
	}

	.ml-changelog-release-github-btn:hover {
		color: var(--text);
		border-color: var(--border-strong);
		background: var(--surface-2);
	}

	/* ─── Commit Groups ────────────────────────────────────── */
	.ml-changelog-group {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.ml-changelog-group-head {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.ml-changelog-group-title {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1-5);
		font-family: var(--font-mono);
		font-size: var(--text-2xs);
		letter-spacing: var(--tracking-meta);
		text-transform: uppercase;
		color: var(--text-secondary);
		font-weight: 700;
	}

	.ml-changelog-group-count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-mono);
		font-size: var(--text-3xs);
		color: var(--text-muted);
		background: var(--surface-2);
		border: 1px solid var(--border);
		border-radius: var(--radius-pill);
		padding: 0.0625rem 0.375rem;
		min-width: 1.125rem;
		font-weight: 500;
	}

	.ml-changelog-commits {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	/* ─── Commit Item Card ─────────────────────────────────── */
	.ml-changelog-commit-item {
		display: flex;
		flex-direction: column;
		gap: var(--space-1-5);
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius-md);
		background: var(--surface);
		border: 1px solid var(--border);
		transition:
			border-color var(--duration-fast) var(--ease-out),
			box-shadow var(--duration-fast) var(--ease-out),
			background var(--duration-fast) var(--ease-out);
	}

	.ml-changelog-commit-item:hover {
		border-color: var(--border-strong);
		box-shadow: var(--shadow-xs);
	}

	.ml-changelog-commit-row {
		display: flex;
		align-items: baseline;
		gap: var(--space-2);
		flex-wrap: wrap;
	}

	/* Monospace scope tags */
	.ml-changelog-commit-scope {
		font-family: var(--font-mono);
		font-weight: 600;
		font-size: 0.625rem;
		color: var(--accent);
		background: var(--accent-soft);
		padding: 0.0625rem 0.375rem;
		border-radius: var(--radius-xs);
		border: 1px solid transparent;
		letter-spacing: 0.04em;
		text-transform: lowercase;
		flex-shrink: 0;
	}

	.ml-changelog-commit-message {
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		color: var(--text);
		line-height: var(--leading-normal);
		min-width: 0;
		flex: 1;
		text-wrap: pretty;
	}

	.ml-changelog-inline-code {
		display: inline;
		font-family: var(--font-mono);
		font-size: var(--text-xs);
		color: var(--text);
		background: var(--surface-2);
		border: 1px solid var(--border);
		border-radius: var(--radius-xs);
		padding: 0.0625rem 0.3125rem;
		margin: 0 0.125rem;
	}

	/* Meta row - SHA, PR, author */
	.ml-changelog-commit-meta {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-2);
		font-size: var(--text-2xs);
		font-family: var(--font-mono);
		color: var(--text-muted);
	}

	.ml-changelog-commit-link {
		font-family: var(--font-mono);
		color: var(--text-muted);
		text-decoration: none;
		transition: color var(--duration-fast) var(--ease-out);
	}

	.ml-changelog-commit-link:hover {
		color: var(--accent);
	}

	.ml-changelog-commit-author {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		color: var(--text-muted);
		text-decoration: none;
		transition: color var(--duration-fast) var(--ease-out);
	}

	.ml-changelog-commit-author:hover {
		color: var(--accent);
	}

	/* Truncation overflow count */
	.ml-changelog-more {
		margin-top: var(--space-1);
		font-family: var(--font-mono);
		font-size: var(--text-2xs);
		color: var(--text-muted);
		letter-spacing: var(--tracking-wide);
	}

	@media (max-width: 640px) {
		.ml-changelog {
			padding-inline-start: var(--space-6);
		}

		.ml-changelog-release-node {
			inset-inline-start: calc(var(--space-6) * -1 + 0.125rem);
		}
	}
}