/* ============================================================
 * mypage-stats.css
 *
 * マイページの「承認欲求枠」スタイル:
 *  1. .mypage__follower-pill        — プロフィールヘッダー左上のフォロワー数バッジ
 *  2. .mypage__engagement-strip     — タブ直前の「あなたへの反応」帯
 *
 * 配色は variables.css のトークンのみを使用する。
 * ============================================================ */

/* -------- 1. フォロワーピル（プロフィールヘッダー左上） -------- */

.mypage__follower-pill {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 4px var(--space-3);
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--color-main) 12%, var(--color-base-1));
	color: var(--color-accent-2);
	font-size: var(--font-size-xs);
	line-height: 1.2;
	box-shadow: var(--shadow-sm);
	z-index: 2;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.mypage__follower-pill-icon {
	color: var(--color-main);
}

.mypage__follower-pill-value {
	font-weight: 700;
	font-size: var(--font-size-sm);
	color: var(--color-text-primary);
}

.mypage__follower-pill-label {
	color: var(--color-text-secondary);
}

/* -------- 1b. フォロワーピル（公開プロフィール・インライン版） -------- */
/* author.php では絶対配置せず profile-header__info 内に通常フローで配置する */

.profile-follower-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 4px var(--space-3);
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--color-main) 12%, var(--color-base-1));
	color: var(--color-accent-2);
	font-size: var(--font-size-xs);
	line-height: 1.2;
	box-shadow: var(--shadow-sm);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--space-1);
}

/* -------- 2. エンゲージメント帯（タブ直前） -------- */

.mypage__engagement-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
	margin: calc(var(--space-4) * -1) auto var(--space-5);
	padding: var(--space-3) var(--space-4);
	max-width: 720px;
	border-radius: var(--radius-md);
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--color-main) 10%, var(--color-base-1)) 0%,
		color-mix(in srgb, var(--color-accent-1) 6%, var(--color-base-1)) 100%
	);
	border: 1px solid color-mix(in srgb, var(--color-main) 18%, transparent);
	font-size: var(--font-size-sm);
	color: var(--color-text-primary);
}

.mypage__engagement-strip--empty {
	background: var(--color-base-2);
	border-color: var(--color-border);
	color: var(--color-text-secondary);
}

.mypage__engagement-lead {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 700;
	color: var(--color-accent-2);
}

.mypage__engagement-strip--empty .mypage__engagement-lead {
	color: var(--color-text-secondary);
	font-weight: 600;
}

.mypage__engagement-lead-icon {
	color: var(--color-main);
	flex-shrink: 0;
}

.mypage__engagement-strip--empty .mypage__engagement-lead-icon {
	color: var(--color-text-secondary);
}

.mypage__engagement-total {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	margin-inline-start: auto;
	font-variant-numeric: tabular-nums;
}

.mypage__engagement-total-label {
	font-size: var(--font-size-xs);
	color: var(--color-text-secondary);
	letter-spacing: 0.04em;
}

.mypage__engagement-total-value {
	font-size: var(--font-size-xl);
	font-weight: 800;
	color: var(--color-accent-2);
	line-height: 1;
}

.mypage__engagement-breakdown {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mypage__engagement-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px var(--space-2);
	border-radius: var(--radius-full);
	background: var(--color-base-1);
	border: 1px solid var(--color-border);
	font-variant-numeric: tabular-nums;
	font-size: var(--font-size-xs);
	font-weight: 600;
	color: var(--color-text-primary);
	line-height: 1.4;
}

.mypage__engagement-pill svg {
	flex-shrink: 0;
}

/* 共通リアクションアイコン（template-parts/ui/reaction-icon.php）をピル内で正しく表示 */
.mypage__engagement-pill .reaction-btn__icon-svg {
	display: inline-flex;
	width: 14px;
	height: 14px;
	color: inherit;
}

.mypage__engagement-pill .reaction-btn__icon-svg svg {
	width: 100%;
	height: 100%;
	display: block;
}

.mypage__engagement-pill .reaction-btn__icon-svg svg path {
	fill: currentColor;
}

.mypage__engagement-pill--like svg {
	color: var(--color-error);
}

.mypage__engagement-pill--empathy svg {
	color: var(--color-main);
}

.mypage__engagement-pill--learn svg {
	color: var(--color-accent-1);
}

.mypage__engagement-pill-label {
	color: var(--color-text-secondary);
	font-weight: 600;
}

.mypage__engagement-pill-num {
	color: var(--color-text-primary);
}

.mypage__engagement-empty {
	margin-inline-start: auto;
	font-size: var(--font-size-xs);
	color: var(--color-text-secondary);
}

/* -------- レスポンシブ調整 -------- */

@media (max-width: 480px) {
	.mypage__engagement-strip {
		gap: var(--space-2) var(--space-3);
		padding: var(--space-3);
	}
	.mypage__engagement-total {
		margin-inline-start: 0;
	}
	.mypage__engagement-breakdown {
		flex-basis: 100%;
		justify-content: flex-start;
	}
}

@media (min-width: 769px) {
	.mypage__follower-pill {
		top: var(--space-4);
		left: var(--space-4);
	}
}