.ppxHeaderBadgeRow.catchupWhatsNewRow {
	gap: clamp(0.45rem, 0.85vw, 0.72rem);
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
}

.catchupWhatsNewMount {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-width: 0;
	max-width: none;
	background: transparent;
	box-shadow: none;
	outline: none;
}

.ppxHeaderBadgeRow.catchupWhatsNewRow > .ipsSearchPseudo,
.ppxHeaderBadgeRow.catchupWhatsNewRow > button[commandfor='ipsSearchDialog'] {
	flex: 1 1 15rem;
	width: auto;
	max-width: clamp(13rem, 20vw, 16rem);
	min-width: clamp(10.75rem, 15vw, 12.25rem);
}

.catchupWhatsNewButton {
	--catchup-whats-new-accent: #15803d;
	--catchup-whats-new-bg-start: color-mix(in srgb, var(--catchup-whats-new-accent) 86%, #ffffff 14%);
	--catchup-whats-new-bg-end: color-mix(in srgb, var(--catchup-whats-new-accent) 68%, #0f172a 32%);
	--catchup-whats-new-border: color-mix(in srgb, var(--catchup-whats-new-accent) 78%, transparent);
	--catchup-whats-new-shadow: color-mix(in srgb, var(--catchup-whats-new-accent) 28%, transparent);
	--catchup-whats-new-text: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	gap: 0.32rem;
	width: auto;
	min-width: 0;
	min-height: 2.3rem;
	padding: 0.34rem 0.64rem;
	border-radius: 999px;
	border: 1px solid var(--catchup-whats-new-border);
	background: linear-gradient(135deg, var(--catchup-whats-new-bg-start) 0%, var(--catchup-whats-new-bg-end) 100%);
	box-shadow: 0 8px 18px var(--catchup-whats-new-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.14);
	color: var(--catchup-whats-new-text);
	text-decoration: none;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
	overflow: visible;
	white-space: nowrap;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.catchupWhatsNewButton:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 24px color-mix(in srgb, var(--catchup-whats-new-accent) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	border-color: color-mix(in srgb, #ffffff 18%, var(--catchup-whats-new-accent) 82%);
	color: var(--catchup-whats-new-text);
	text-decoration: none;
}

.catchupWhatsNewButton:focus-visible {
	outline: 2px solid var(--catchup-whats-new-accent);
	outline-offset: 2px;
	color: var(--catchup-whats-new-text);
	text-decoration: none;
}

.catchupWhatsNewButton__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 0.68rem;
	flex: 0 0 auto;
}

.catchupWhatsNewButton__label {
	display: inline-block;
	min-width: max-content;
	flex-shrink: 0;
	overflow: visible;
	text-overflow: clip;
	white-space: nowrap;
}

html[data-ips-scheme='dark'] .catchupWhatsNewButton {
	--catchup-whats-new-accent: #22c55e;
	--catchup-whats-new-bg-start: color-mix(in srgb, var(--catchup-whats-new-accent) 40%, #0f172a 60%);
	--catchup-whats-new-bg-end: color-mix(in srgb, var(--catchup-whats-new-accent) 22%, #020617 78%);
	--catchup-whats-new-border: color-mix(in srgb, var(--catchup-whats-new-accent) 34%, #101827 66%);
	--catchup-whats-new-shadow: color-mix(in srgb, var(--catchup-whats-new-accent) 20%, transparent);
}

html[data-ips-scheme='dark'] .catchupWhatsNewButton__icon {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
	.catchupWhatsNewMount {
		min-width: 0;
	}

	.ppxHeaderBadgeRow.catchupWhatsNewRow > .ipsSearchPseudo,
	.ppxHeaderBadgeRow.catchupWhatsNewRow > button[commandfor='ipsSearchDialog'] {
		flex-basis: 12.5rem;
		max-width: 13.5rem;
		min-width: 10.25rem;
	}
}

@media (max-width: 680px) {
	.catchupWhatsNewMount {
		flex: 0 1 100%;
		max-width: none;
		min-width: 0;
	}

	.catchupWhatsNewButton {
		width: 100%;
		min-width: 0;
	}

	.catchupWhatsNewButton__label {
		min-width: 0;
	}
}

/* Catch Up: Needs Reply badge (small, consistent, theme-aware)
   - Uses CSS variables set inline from PHP for dynamic colour values
   - Sizing and spacing controlled here for consistency across pages
*/
.catchupNeedsReplyBadge {
	--catchup-needs-reply-bg: #3b82f6;
	--catchup-needs-reply-color: #ffffff;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.12rem 0.44rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--catchup-needs-reply-bg) 78%, rgba(15, 23, 42, 0.06));
	background: var(--catchup-needs-reply-bg);
	color: var(--catchup-needs-reply-color);
	text-decoration: none;
	vertical-align: middle;
}

.catchupNeedsReplyBadge.ipsBadge--icon {
	padding: 0.12rem;
	height: 1.3rem;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.catchupNeedsReplyBadge.ipsBadge--small {
	font-size: 0.68rem;
	padding: 0.08rem 0.36rem;
}

html[data-ips-scheme='dark'] .catchupNeedsReplyBadge {
	border-color: color-mix(in srgb, var(--catchup-needs-reply-bg) 64%, rgba(255,255,255,0.06));
}