/* ==========================================
   PROFILE — ranking, milestones, achievements, referral, missions
   ========================================== */

/* Ranking self banner */
.ranking-self {
	text-align: center;
	padding: var(--space);
	margin-bottom: var(--space);
	background: rgba(var(--accent-rgb), 0.08);
	border: 1px solid rgba(var(--accent-rgb), 0.2);
	border-radius: var(--radius);
	color: var(--accent);
	font-size: var(--font-xl);
}

/*Milestone card*/
.milestone-list {
	display: flex;
	flex-direction: column;
	gap: calc(var(--space) * 0.5);
}
.milestone-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space);
	padding: calc(var(--space) * 0.5) var(--space);
	border-radius: var(--radius);
	background: rgba(var(--accent-rgb), 0.04);
	border: 1px solid rgba(var(--accent-rgb), 0.1);
}
.milestone-item--claimed {
	opacity: 0.6;
	border-left: 3px double rgba(var(--success-rgb), 0.6);
}
.milestone-item--ready {
	background: rgba(var(--accent-rgb), 0.12);
	border-color: rgba(var(--accent-rgb), 0.3);
	border-left: 3px solid var(--accent);
}

/*Milestone info block*/
.milestone-item__info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

/*Milestone progress bar*/
.milestone-item__bar {
	height: 3px;
	background: rgba(var(--accent-rgb), 0.15);
	border-radius: 2px;
	overflow: hidden;
	margin-top: 2px;
	width: 100%;
	max-width: 120px;
}
.milestone-item__bar-fill {
	height: 100%;
	width: var(--ms-pct, 0%);
	background: var(--accent);
	border-radius: 2px;
	transition: width 0.4s ease;
}

/*Milestone form inline*/
.milestone-form {
	display: inline;
}

/*Profile claimable milestones alert*/
.profile-milestone-alert {
	padding: 10px 16px;
	border-radius: var(--radius);
	background: rgba(var(--accent-rgb), 0.1);
	border: 1px solid rgba(var(--accent-rgb), 0.3);
	font-size: var(--font-text);
	margin-bottom: var(--space);
	font-weight: 500;
}

/*Achievements grid*/
.achievements-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: calc(var(--space) * 0.5);
}
.achievement-item {
	display: flex;
	align-items: center;
	gap: calc(var(--space) * 0.4);
	padding: calc(var(--space) * 0.5);
	border-radius: var(--radius);
	border: 1px solid rgba(var(--accent-rgb), 0.1);
	transition: opacity 0.2s;
}
.achievement-item--unlocked {
	background: rgba(var(--accent-rgb), 0.08);
	border-color: rgba(var(--accent-rgb), 0.25);
}
.achievement-item--locked {
	opacity: 0.45;
}
.achievement-item__icon {
	font-size: var(--font-130);
	flex-shrink: 0;
}
.achievement-item__label {
	font-size: var(--font-text);
}

@media (max-width: 900px) {
	.achievements-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Referral ── */
.referral-block {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.referral-code-display {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.referral-code {
	font-size: var(--font-2xl);
	font-weight: 700;
	letter-spacing: 0.15em;
	padding: 0.4rem 0.75rem;
	border-radius: var(--radius);
	background: rgba(var(--accent-rgb), 0.08);
	color: var(--accent);
}
.referral-list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--font-text);
}
.referral-list li {
	padding: 0.3rem 0;
	border-bottom: 1px solid var(--border);
}

/* ── Profile share ── */
.profile-share {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}
.profile-share .input {
	flex: 1;
}

@media (max-width: 900px) {
	.profile-share {
		flex-direction: column;
	}
}

/* Missions intro toggle */
.missions-intro-toggle {
	margin-bottom: 0.5rem;
}

/* ---- MISSIONS ---- */
.mi__mission-title {
	display: block;
	font-weight: 600;
}

.mi__mission-desc {
	display: block;
	font-size: var(--font-note);
	color: var(--muted);
	margin-top: 2px;
}

.mi__progress-wrap {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.mi__progress-bar {
	width: 100%;
	height: 6px;
	appearance: none;
	border: none;
	border-radius: 3px;
	background: rgba(var(--surface-rgb), .5);
}

.mi__progress-bar::-webkit-progress-bar {
	background: rgba(var(--surface-rgb), .5);
	border-radius: 3px;
}

.mi__progress-bar::-webkit-progress-value {
	background: var(--accent);
	border-radius: 3px;
}

.mi__progress-bar::-moz-progress-bar {
	background: var(--accent);
	border-radius: 3px;
}

.mi__progress-label {
	font-size: var(--font-note);
	color: var(--muted);
}