/* PowerPack Extra: registration join-reason helper UI.
 * Presentation is external so strict CSP does not require style-src 'unsafe-inline'. */
.ppxJoinDesc {
	position: relative;
	margin: 0 0 .25rem 0;
	padding-inline-end: 6rem;
}

.ppxJoinWrap {
	position: absolute;
	inset-inline-end: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	white-space: nowrap;
	z-index: 1;
	font-size: inherit;
}

.ppxJoinHelp {
	opacity: .8;
	font-size: inherit;
}

.ppxJoinCounter {
	font-size: inherit;
}

.ppxJoinCounter--valid {
	color: #10b981;
}

.ppxJoinCounter--invalid {
	color: #ef4444;
}

/* Keep the helper line and its live counter fully inside the field on small
 * screens: drop the reserved end gutter and let the counter wrap onto its own
 * line instead of overlapping the description or escaping the viewport. */
@media (max-width: 480px) {
	.ppxJoinDesc {
		padding-inline-end: 0;
	}

	.ppxJoinWrap {
		position: static;
		inset: auto;
		top: auto;
		transform: none;
		display: flex;
		width: 100%;
		justify-content: flex-end;
		margin-block-start: .15rem;
	}
}