/**
 * WC Changelog Tab — customer-facing styles.
 *
 * Colour strategy:
 *
 * - The five change-type badges are SEMANTIC (green = added, red = removed …),
 *   so they are a fixed palette, not theme-derived. They carry their own solid
 *   background + text colour and are tuned to read on both light and dark pages.
 *   Override the custom properties below to retune them for a specific theme.
 *
 * - Everything else (borders, surfaces, hover, muted text, the "latest" accent)
 *   is built from `currentColor`, so it adapts to whatever text colour the theme
 *   places here — light text on a dark theme yields subtle light chrome, and
 *   vice versa. No `prefers-color-scheme` guesswork, no JS.
 */

.wc-changelog {
	/* Semantic badge palette — override per theme if desired. */
	--wcct-add: #1a7f37;
	--wcct-update: #bc4c00;
	--wcct-remove: #b42318;
	--wcct-fix: #e3b341;
	--wcct-fix-fg: #1f2328;
	--wcct-misc: #1a66c9;
	--wcct-badge-fg: #fff;

	/* Chrome — neutral fallbacks; upgraded to currentColor mixes below. */
	--wcct-border: rgba(128, 128, 128, 0.34);
	--wcct-border-strong: rgba(128, 128, 128, 0.55);
	--wcct-surface: rgba(128, 128, 128, 0.08);
	--wcct-surface-hover: rgba(128, 128, 128, 0.16);

	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 760px;
	color: inherit;
	font-size: 0.95rem;
	line-height: 1.55;
}

@supports ( color: color-mix( in srgb, currentColor 10%, transparent ) ) {
	.wc-changelog {
		--wcct-border: color-mix( in srgb, currentColor 22%, transparent );
		--wcct-border-strong: color-mix( in srgb, currentColor 45%, transparent );
		--wcct-surface: color-mix( in srgb, currentColor 6%, transparent );
		--wcct-surface-hover: color-mix( in srgb, currentColor 12%, transparent );
	}
}

/* ---------- Accordion item ---------- */

.wc-changelog__item {
	border: 1px solid var( --wcct-border );
	border-radius: 8px;
	background: var( --wcct-surface );
	overflow: hidden;
}

.wc-changelog__item.is-latest {
	border-color: var( --wcct-border-strong );
}

.wc-changelog__summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 16px;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	user-select: none;
}

/* Hide the native disclosure marker across browsers. */
.wc-changelog__summary::-webkit-details-marker {
	display: none;
}

.wc-changelog__summary::marker {
	content: "";
}

/* Custom chevron. */
.wc-changelog__summary::after {
	content: "";
	margin-left: auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.18s ease;
	opacity: 0.6;
}

.wc-changelog__item[open] > .wc-changelog__summary::after {
	transform: rotate( 225deg );
}

.wc-changelog__summary:hover {
	background: var( --wcct-surface-hover );
}

.wc-changelog__summary:focus-visible {
	outline: 2px solid var( --wcct-misc );
	outline-offset: -2px;
}

.wc-changelog__version {
	font-size: 1.02rem;
	letter-spacing: 0.01em;
}

.wc-changelog__date {
	font-weight: 400;
	font-size: 0.9rem;
	opacity: 0.7;
}

.wc-changelog__latest {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 2px 8px;
	border-radius: 999px;
	background: var( --wcct-misc );
	color: #fff;
}

/* ---------- Change list ---------- */

.wc-changelog__changes {
	margin: 0;
	padding: 6px 16px 16px;
	list-style: none;
}

.wc-changelog__change {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 6px 0;
}

.wc-changelog__change + .wc-changelog__change {
	border-top: 1px solid var( --wcct-border );
}

.wc-changelog__badge {
	flex: 0 0 auto;
	min-width: 74px;
	text-align: center;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 8px;
	border-radius: 4px;
	color: var( --wcct-badge-fg );
	background: var( --wcct-misc );
	margin-top: 2px;
}

.wc-changelog__change--add .wc-changelog__badge {
	background: var( --wcct-add );
}

.wc-changelog__change--update .wc-changelog__badge {
	background: var( --wcct-update );
}

.wc-changelog__change--remove .wc-changelog__badge {
	background: var( --wcct-remove );
}

.wc-changelog__change--fix .wc-changelog__badge {
	background: var( --wcct-fix );
	color: var( --wcct-fix-fg );
}

.wc-changelog__change--misc .wc-changelog__badge {
	background: var( --wcct-misc );
}

.wc-changelog__text {
	flex: 1 1 auto;
	word-break: break-word;
}

.wc-changelog__text a {
	text-decoration: underline;
}

/* ---------- Responsive ---------- */

@media ( max-width: 480px ) {
	.wc-changelog__change {
		flex-direction: column;
		gap: 4px;
	}

	.wc-changelog__badge {
		margin-top: 0;
	}
}

/* ---------- Motion ---------- */

@media ( prefers-reduced-motion: reduce ) {
	.wc-changelog__summary::after {
		transition: none;
	}
}