/* mm-stat-card
   Outcome stat cards. Big number on the left, label on the right.
   Border-left and number both cycle through the 7-color constellation
   palette on a 6s rhythm, offset 2s per card.
   Designed in vertical stacks of three.

   Also exports two standalone helpers used outside of .mm-stat-card:
     .mm-stat-num    big static accent-color number (56px)
     .mm-stat-label  small uppercase label below it */

.mm-stat-num {
	font-size: 56px;
	font-weight: 700;
	color: var(--mm-accent);
	line-height: 1;
	letter-spacing: -0.02em;
}
.mm-stat-label {
	font-size: 13px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(245, 242, 236, 0.6);
	margin-top: 8px;
}

.mm-stat-card {
	display: grid;
	grid-template-columns: 90px 1fr;
	align-items: center;
	column-gap: 22px;
	padding: 22px 28px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-left: 3px solid var(--mm-accent);
	background: rgba(255, 255, 255, 0.02);
	margin-bottom: 14px;
}

.mm-stat-card .mm-stat-num {
	font-size: 32px;
	font-weight: 700;
	text-align: center;
	color: var(--mm-accent);
	letter-spacing: -0.02em;
	line-height: 1;
	animation: mmStatCardNumTwinkle 6s linear infinite;
}

.mm-stat-card .mm-stat-label {
	text-align: left;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.4;
}

.mm-stat-card:nth-of-type(1) { animation: mmStatCardBorderTwinkle 6s linear infinite; animation-delay: 0s;  }
.mm-stat-card:nth-of-type(2) { animation: mmStatCardBorderTwinkle 6s linear infinite; animation-delay: -2s; }
.mm-stat-card:nth-of-type(3) { animation: mmStatCardBorderTwinkle 6s linear infinite; animation-delay: -4s; }
.mm-stat-card:nth-of-type(1) .mm-stat-num { animation-delay: 0s;  }
.mm-stat-card:nth-of-type(2) .mm-stat-num { animation-delay: -2s; }
.mm-stat-card:nth-of-type(3) .mm-stat-num { animation-delay: -4s; }

@keyframes mmStatCardNumTwinkle {
	0%   { color: var(--mm-accent); }
	14%  { color: var(--mm-pal-violet); }
	28%  { color: var(--mm-pal-amber-1); }
	42%  { color: var(--mm-pal-mint); }
	57%  { color: var(--mm-pal-rose); }
	71%  { color: var(--mm-pal-lime); }
	85%  { color: var(--mm-pal-amber-2); }
	100% { color: var(--mm-accent); }
}

@keyframes mmStatCardBorderTwinkle {
	0%   { border-left-color: var(--mm-accent); }
	14%  { border-left-color: var(--mm-pal-violet); }
	28%  { border-left-color: var(--mm-pal-amber-1); }
	42%  { border-left-color: var(--mm-pal-mint); }
	57%  { border-left-color: var(--mm-pal-rose); }
	71%  { border-left-color: var(--mm-pal-lime); }
	85%  { border-left-color: var(--mm-pal-amber-2); }
	100% { border-left-color: var(--mm-accent); }
}

@media (prefers-reduced-motion: reduce) {
	.mm-stat-card,
	.mm-stat-card .mm-stat-num { animation: none; }
	.mm-stat-card { border-left-color: var(--mm-accent); }
	.mm-stat-card .mm-stat-num { color: var(--mm-accent); }
}