/*
 * Progressive-enhancement styling for innerg-core's Profile_Widget stat
 * strip and achievement badges (see assets/js/profile-stats.js). Colors
 * match the real, live innerg-core/assets/widgets/profile.css exactly:
 * the stat strip sits on .innerg-profile__header-band's dark background
 * (var(--brand-dark)) with white/translucent-white text, while the
 * achievements grid sits on the normal light var(--background).
 */

/* ---- Stat strip: ring + count-up ---- */

.innerg-profile__stat.innerg-mt-stat--charted {
	flex-direction: row;
	align-items: center;
	gap: 0.85rem;
}

.innerg-mt-stat-visual {
	flex: 0 0 auto;
	inline-size: 2.5rem;
	block-size: 2.5rem;
}

.innerg-mt-stat-ring {
	inline-size: 100%;
	block-size: 100%;
	transform: rotate(-90deg);
}

.innerg-mt-stat-ring__track {
	fill: none;
	stroke: rgb(255 255 255 / 15%);
	stroke-width: 3;
}

.innerg-mt-stat-ring__fill {
	fill: none;
	stroke: var(--accent);
	stroke-width: 3;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Weekly-streak dot track (own row directly under the stat strip) ---- */

.innerg-mt-streak-track {
	background: var(--brand-dark, #2b291a);
	max-width: 80rem;
	margin-inline: auto;
	padding: 0 1.5rem 1.25rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.innerg-mt-streak-track__label {
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 40%);
}

.innerg-mt-streak-track__dots {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.innerg-mt-streak-track__dot {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: rgb(255 255 255 / 15%);
}

.innerg-mt-streak-track__dot.is-filled {
	background: var(--accent);
	transform: scale(0);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.innerg-mt-streak-track__dot.is-filled.is-visible {
	transform: scale(1);
}

.innerg-mt-streak-track__overflow {
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--accent);
	margin-inline-start: 0.25rem;
}

/* ---- Achievement badge entrance ---- */

.innerg-profile__badge.innerg-mt-badge--animated {
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.innerg-profile__badge.innerg-mt-badge--animated.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.innerg-profile__badge-icon.is-earned {
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.innerg-profile__badge.innerg-mt-badge--animated.is-visible .innerg-profile__badge-icon.is-earned {
	transform: scale(1.08);
}

@media (max-width: 480px) {
	.innerg-mt-stat-visual {
		inline-size: 2rem;
		block-size: 2rem;
	}

	.innerg-profile__stat.innerg-mt-stat--charted {
		gap: 0.6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.innerg-mt-stat-ring__fill,
	.innerg-mt-streak-track__dot.is-filled,
	.innerg-profile__badge.innerg-mt-badge--animated,
	.innerg-profile__badge-icon.is-earned {
		transition: none !important;
	}

	.innerg-mt-streak-track__dot.is-filled {
		transform: scale(1);
	}

	.innerg-profile__badge.innerg-mt-badge--animated {
		opacity: 1;
		transform: none;
	}
}

/*
 * ---- Empty "Active Plan" state (Membership & Credits tab, 2026-08-21) ----
 * innerg-core's render_membership() now gates the real plan-card markup on
 * !empty($membership['plan_name']) and renders this empty-state block
 * instead when there's no active membership -- .innerg-profile__plan-card
 * is kept as the base class so the dark var(--brand-dark) card background
 * and 2.5rem padding already defined in innerg-core's own profile.css
 * apply unchanged; only the empty-specific inner layout is new here.
 */
.innerg-profile__plan-card--empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.65rem;
}

.innerg-profile__plan-empty-title {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--background, #fff);
}

.innerg-profile__plan-empty-desc {
	margin: 0 0 0.5rem;
	max-width: 32rem;
	color: color-mix(in srgb, var(--background, #fff) 72%, transparent);
	font-size: 0.92rem;
	line-height: 1.5;
}