/**
 * Ash & Ice Core — member stats on the Account page Wellness tab (AIC-013).
 *
 * Reuses auth.css's --ash-ice-auth-* tokens (loaded first) and, like
 * auth.css, is deliberately light-only (ADR-031). Brand palette is
 * charcoal and ice blue: ice is the only accent and is never used as
 * text on a light surface; ice-deep is for non-text marks only. No
 * state relies on colour alone — the template always prints the state
 * text. Selectors are prefixed with `.ash-ice-stats` where they must
 * beat auth.css's `.ash-ice-dashboard-card p` / `h3` rules.
 */

.ash-ice-stats {
	--ash-ice-stats-ink: #17181b;
	--ash-ice-stats-text: var(--ash-ice-auth-text, #17181b);
	--ash-ice-stats-muted: #5b6168;
	--ash-ice-stats-border: var(--ash-ice-auth-border, #e5e7eb);
	--ash-ice-stats-ice: #c9e6f0;
	--ash-ice-stats-ice-deep: #7fb3c7;
	--ash-ice-stats-track: #eef1f3;
	--ash-ice-stats-display: "Philosopher", Georgia, serif;
}

.ash-ice-dashboard-card.ash-ice-stats {
	padding: 24px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Screen-reader-only text (state prefixes on badges). */
.ash-ice-stats .ash-ice-stats-sr {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	white-space: nowrap;
}

.ash-ice-stats-eyebrow {
	display: block;
	margin-bottom: 6px;
	color: var(--ash-ice-stats-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ash-ice-stats .ash-ice-stats-title {
	margin: 0;
	color: var(--ash-ice-stats-text);
	font-family: var(--ash-ice-stats-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
}

.ash-ice-stats .ash-ice-stats-note {
	margin: 8px 0 0;
	color: var(--ash-ice-stats-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.ash-ice-stats-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}

.ash-ice-stats-count {
	color: var(--ash-ice-stats-muted);
	font-size: 0.8125rem;
}

/* Progress meter (tier and in-progress badges). */
.ash-ice-stats-meter {
	display: block;
	overflow: hidden;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: var(--ash-ice-stats-track);
}

.ash-ice-stats-meter__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--ash-ice-stats-ice-deep);
	transform-origin: left center;
	animation: ash-ice-stats-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ash-ice-stats-grow {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* Tier hero: the page's anchor — a charcoal card, tier in the display face. */
.ash-ice-dashboard-card.ash-ice-stats-hero {
	border-color: var(--ash-ice-stats-ink);
	background: var(--ash-ice-stats-ink);
	color: #ffffff;
}

.ash-ice-stats.ash-ice-stats-hero .ash-ice-stats-eyebrow {
	color: #aeb6bc;
}

.ash-ice-stats-hero .ash-ice-stats-hero__tier {
	margin: 0 0 16px;
	color: #ffffff;
	font-family: var(--ash-ice-stats-display);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.05;
}

.ash-ice-stats-hero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin-bottom: 8px;
	font-size: 0.9375rem;
}

.ash-ice-stats-hero__count {
	color: #ffffff;
	font-weight: 600;
}

.ash-ice-stats-hero__next {
	color: var(--ash-ice-stats-ice);
}

.ash-ice-stats-hero .ash-ice-stats-meter {
	height: 8px;
	background: rgba(255, 255, 255, 0.14);
}

.ash-ice-stats-hero .ash-ice-stats-meter__fill {
	background: var(--ash-ice-stats-ice);
}

.ash-ice-stats.ash-ice-stats-hero .ash-ice-stats-hero__remaining {
	margin: 10px 0 0;
	color: #d8dde1;
	font-size: 0.875rem;
}

.ash-ice-stats.ash-ice-stats-hero .ash-ice-stats-hero__since {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: #aeb6bc;
	font-size: 0.8125rem;
}

/* At a glance: three metrics, always one row. */
.ash-ice-stats-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.ash-ice-stats--unavailable .ash-ice-stats-tiles {
	grid-template-columns: minmax(0, 1fr);
}

.ash-ice-stats-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ash-ice-stats-tile + .ash-ice-stats-tile {
	padding-left: 12px;
	border-left: 1px solid var(--ash-ice-stats-border);
}

.ash-ice-stats-tile__value {
	color: var(--ash-ice-stats-text);
	font-family: var(--ash-ice-stats-display);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

.ash-ice-stats-tile__label {
	color: var(--ash-ice-stats-muted);
	font-size: 0.8125rem;
	line-height: 1.3;
}

.ash-ice-stats .ash-ice-stats-footnote {
	margin-top: 16px;
}

/* Weekly streak: one circle per Monday–Sunday week, this week last. */
.ash-ice-stats-streak__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}

.ash-ice-stats .ash-ice-stats-streak__current {
	margin: 0;
	color: var(--ash-ice-stats-text);
	font-family: var(--ash-ice-stats-display);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
}

.ash-ice-stats .ash-ice-stats-streak__best {
	margin: 0;
	color: var(--ash-ice-stats-muted);
	font-size: 0.875rem;
}

.ash-ice-stats-weeks {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 6px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.ash-ice-stats-week {
	box-sizing: border-box;
	justify-self: center;
	width: 100%;
	max-width: 22px;
	aspect-ratio: 1;
	margin: 0;
	border: 1.5px solid #d3d8dc;
	border-radius: 50%;
}

.ash-ice-stats-week--counted {
	border-color: var(--ash-ice-stats-ink);
	background: var(--ash-ice-stats-ink);
}

/* This week: ice ring — open (next action) or filled once it counts. */
.ash-ice-stats-week--current {
	border-color: var(--ash-ice-stats-ice-deep);
	box-shadow: 0 0 0 3px var(--ash-ice-stats-ice);
}

.ash-ice-stats-week--current.ash-ice-stats-week--counted {
	border-color: var(--ash-ice-stats-ink);
}

.ash-ice-stats-weeks__axis {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	color: var(--ash-ice-stats-muted);
	font-size: 0.75rem;
}

.ash-ice-stats .ash-ice-stats-streak__nudge {
	margin: 16px 0 0;
	color: var(--ash-ice-stats-text);
	font-size: 0.9375rem;
	font-weight: 600;
}

.ash-ice-stats-streak .ash-ice-stats-note {
	margin-top: 4px;
}

/* Badges: compact 3-up grid, earned filled, in progress outlined. */
/* Reset the theme's generic <section> padding and serif <h4>. */
.ash-ice-stats .ash-ice-stats-collection {
	margin: 20px 0 0;
	padding: 0;
}

.ash-ice-stats .ash-ice-stats-collection__label {
	margin: 0 0 12px;
	font-family: inherit;
	line-height: 1.3;
	color: var(--ash-ice-stats-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ash-ice-stats-badges {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 24px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ash-ice-stats-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
	margin: 0;
	text-align: center;
}

.ash-ice-stats-badge__medal {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	margin-bottom: 6px;
	border: 1.5px solid var(--ash-ice-stats-ice-deep);
	border-radius: 50%;
	background: #ffffff;
}

.ash-ice-stats-badge__medal svg {
	fill: none;
	stroke: var(--ash-ice-stats-muted);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ash-ice-stats-badge--earned .ash-ice-stats-badge__medal {
	border-color: var(--ash-ice-stats-ink);
	background: var(--ash-ice-stats-ink);
}

.ash-ice-stats-badge--earned .ash-ice-stats-badge__medal svg {
	stroke: var(--ash-ice-stats-ice);
}

.ash-ice-stats-badge--locked .ash-ice-stats-badge__medal {
	border-color: #d3d8dc;
	background: #fafbfb;
}

.ash-ice-stats-badge--locked .ash-ice-stats-badge__medal svg {
	stroke: #8a9096;
}

/* Recently earned: a quiet ice halo, nothing louder. */
.ash-ice-stats-badge--new .ash-ice-stats-badge__medal {
	box-shadow: 0 0 0 4px var(--ash-ice-stats-ice);
}

.ash-ice-stats-badge__new {
	display: inline-block;
	margin-right: 4px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--ash-ice-stats-ice);
	color: var(--ash-ice-stats-ink);
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 1px;
}

.ash-ice-stats-badge__name {
	max-width: 100%;
	color: var(--ash-ice-stats-text);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.ash-ice-stats-badge__detail {
	max-width: 100%;
	color: var(--ash-ice-stats-muted);
	font-size: 0.75rem;
	line-height: 1.4;
	text-wrap: balance;
}

.ash-ice-stats-badge .ash-ice-stats-meter {
	width: 64px;
	max-width: 100%;
	height: 4px;
	margin-top: 4px;
}

/*
 * Where supported, each badge spans four shared rows (icon, name,
 * detail, meter) so a two-line name or detail in one badge keeps its
 * neighbours' text and progress bars on the same lines — no fixed
 * heights. Older browsers keep the plain stacked column above.
 */
@supports (grid-template-rows: subgrid) {
	.ash-ice-stats-badge {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		align-content: start;
		justify-items: center;
		row-gap: 4px;
	}

	.ash-ice-stats-badge__medal {
		margin-bottom: 2px;
	}

	.ash-ice-stats-badge__name {
		align-self: start;
	}

	.ash-ice-stats-badge__detail {
		align-self: start;
	}
}

a.ash-ice-stats-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	margin-top: 24px;
	border: 1px solid var(--ash-ice-stats-border);
	border-radius: 10px;
	color: var(--ash-ice-stats-text);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

a.ash-ice-stats-more:hover {
	border-color: var(--ash-ice-stats-ink);
}

.ash-ice-stats a:focus-visible {
	outline: 2px solid var(--ash-ice-stats-ink);
	outline-offset: 2px;
}

.ash-ice-stats-closest {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 16px 0 0;
	padding: 12px 14px;
	border-left: 3px solid var(--ash-ice-stats-ice-deep);
	border-radius: 0 8px 8px 0;
	background: var(--ash-ice-stats-track);
	color: var(--ash-ice-stats-text);
	font-size: 0.875rem;
	line-height: 1.45;
}

.ash-ice-stats-closest__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 12px;
}

.ash-ice-stats-closest__head span {
	color: var(--ash-ice-stats-muted);
	font-size: 0.8125rem;
}

.ash-ice-stats-closest .ash-ice-stats-meter {
	background: #ffffff;
}

.ash-ice-stats .ash-ice-stats-back {
	margin: 0 0 12px;
	font-size: 0.875rem;
}

@media (min-width: 720px) {
	.ash-ice-stats--badges .ash-ice-stats-badges {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	/* Earned and Up next side by side; the 12 weeks stay a compact strip. */
	.ash-ice-stats-preview__grids {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}

	.ash-ice-stats-streak__head,
	.ash-ice-stats-weeks,
	.ash-ice-stats-weeks__axis {
		max-width: 420px;
	}
}

@media (max-width: 480px) {
	.ash-ice-dashboard-card.ash-ice-stats {
		padding: 20px 16px;
	}

	.ash-ice-stats-hero .ash-ice-stats-hero__tier {
		font-size: 2.25rem;
	}

	.ash-ice-stats-tile__value {
		font-size: 1.75rem;
	}

	.ash-ice-stats-weeks {
		gap: 4px;
	}
}

@media (max-width: 340px) {
	.ash-ice-stats-badges {
		gap: 16px 8px;
	}

	.ash-ice-stats-badge__medal {
		width: 44px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ash-ice-stats-meter__fill {
		animation: none;
	}
}