/* biome-ignore-all lint/style/noDescendingSpecificity: moved as is from index.html, where the cascade order is deliberate */
/* The glowing line charts (chart.js draws them): the payouts line in gold on
   the home page, and the burn line in ember red on the home page and the
   Altar, with its top three burners wearing medals. */
.surge {
	margin: 0;
	display: grid;
	gap: 10px;
	padding: 20px 20px 16px;
	border-radius: 24px;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(224, 179, 90, 0.14), transparent 60%), var(--card);
	overflow: hidden;
}
.surge-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}
.surge-k {
	font-size: 15px;
	color: var(--soft);
}
.surge-v {
	font: 700 clamp(28px, 8vw, 36px) / 1.1 var(--sans, Figtree, system-ui, sans-serif);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--gold-hi);
}
.surge-v small {
	margin-left: 6px;
	font: 500 14px var(--sans, Figtree, system-ui, sans-serif);
	letter-spacing: 0;
	color: var(--soft);
}
.surge-plot {
	position: relative;
	height: 150px;
	margin-right: 12px;
}
.surge-plot svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.surge-plot .area {
	fill: url(#surge-fill);
	stroke: none;
	opacity: 0;
	transition: opacity 1.2s 0.5s;
}
.surge-plot .glow {
	fill: none;
	stroke: var(--gold-hi);
	stroke-width: 7;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.35;
	filter: blur(6px);
}
.surge-plot .line {
	fill: none;
	stroke: url(#surge-stroke);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.surge-plot .grid {
	stroke: rgba(224, 179, 90, 0.1);
	stroke-width: 1;
	stroke-dasharray: 2 5;
}
.surge-plot .line,
.surge-plot .glow {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.surge.drawn .line,
.surge.drawn .glow {
	stroke-dashoffset: 0;
}
.surge.drawn .area {
	opacity: 1;
}
.surge.drawn .glow {
	animation: breathe 2.8s ease-in-out 1.8s infinite alternate;
}
.surge-dot {
	position: absolute;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: #fff4d6;
	box-shadow:
		0 0 0 3px rgba(243, 207, 133, 0.35),
		0 0 18px 4px rgba(243, 207, 133, 0.7);
	opacity: 0;
	transition: opacity 0.4s 1.6s;
}
.surge-dot::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid var(--gold-hi);
	opacity: 0;
}
.surge.drawn .surge-dot {
	opacity: 1;
}
.surge.drawn .surge-dot::after {
	animation: ping 2s cubic-bezier(0, 0, 0.2, 1) 1.8s infinite;
}
@keyframes ping {
	0% {
		transform: scale(0.6);
		opacity: 0.9;
	}
	100% {
		transform: scale(2.8);
		opacity: 0;
	}
}
@keyframes breathe {
	from {
		opacity: 0.2;
	}
	to {
		opacity: 0.55;
	}
}
.surge-x {
	display: flex;
	justify-content: space-between;
	font: 400 12px var(--mono, ui-monospace, Menlo, monospace);
	letter-spacing: 0.06em;
	color: var(--dim);
}
.surge-x span:last-child {
	color: var(--gold-hi);
}
.surge figcaption {
	font-size: 15px;
	line-height: 1.5;
	color: var(--soft);
	text-wrap: pretty;
}
.burnline {
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(232, 90, 58, 0.16), transparent 60%), var(--card);
}
.burnline .surge-v {
	color: #ff9a7a;
}
.burnline .surge-plot .area {
	fill: url(#burn-fill);
}
.burnline .surge-plot .line {
	stroke: url(#burn-stroke);
}
.burnline .surge-plot .glow {
	stroke: #ff7a52;
}
.burnline .surge-plot .grid {
	stroke: rgba(232, 90, 58, 0.12);
}
.burnline .surge-dot {
	background: #ffe1d2;
	box-shadow:
		0 0 0 3px rgba(255, 122, 82, 0.35),
		0 0 18px 4px rgba(255, 110, 70, 0.7);
}
.burnline .surge-dot::after {
	border-color: #ff9a7a;
}
.burnline .surge-x span:last-child {
	color: #ff9a7a;
}
.burners {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	display: grid;
}
.burners li {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	border-top: 1px solid rgba(232, 90, 58, 0.12);
	font-size: 15px;
}
.burners .medal {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font: 700 12px var(--sans, Figtree, system-ui, sans-serif);
	color: #1a1206;
}
.burners li:nth-child(1) .medal {
	background: radial-gradient(circle at 35% 30%, #fff1c2, #e0b35a 55%, #a8741f);
}
.burners li:nth-child(2) .medal {
	background: radial-gradient(circle at 35% 30%, #ffffff, #c9ccd2 55%, #8a8f99);
}
.burners li:nth-child(3) .medal {
	background: radial-gradient(circle at 35% 30%, #ffd9b8, #c98a4b 55%, #8a5427);
}
.burners .who {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text);
	font-weight: 600;
}
.burners .amt {
	color: #ff9a7a;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}
/* The payouts line's podium is gold, the burn line's ember. */
.surge:not(.burnline) .burners li {
	border-top-color: rgba(224, 179, 90, 0.12);
}
.surge:not(.burnline) .burners .amt {
	color: var(--gold-hi, #f3cf85);
}

/* The sales scatter (chart.js drawScatter, on /sales/): tier-colored dots
   over time on a log scale, the running median as a glowing gold line, the
   reveal as a dashed mark. */
.scatter svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.scatter .grid {
	stroke: rgba(224, 179, 90, 0.1);
	stroke-width: 1;
}
.scatter .tick {
	font: 400 11px var(--mono, "IBM Plex Mono", ui-monospace, monospace);
	fill: var(--dim, #a79a82);
}
.scatter .mark {
	stroke: rgba(243, 207, 133, 0.55);
	stroke-width: 1;
	stroke-dasharray: 3 4;
}
.scatter .mark-t {
	font: 400 11px var(--mono, "IBM Plex Mono", ui-monospace, monospace);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	fill: var(--gold, #e0b35a);
}
.scatter .sc-glow {
	fill: none;
	stroke: #f3cf85;
	stroke-width: 6;
	opacity: 0.25;
	filter: blur(4px);
}
.scatter .sc-line {
	fill: none;
	stroke: #f3cf85;
	stroke-width: 2;
	stroke-linecap: round;
}
.scatter .sc-dot {
	stroke: rgba(5, 4, 3, 0.7);
	stroke-width: 1;
	opacity: 0.85;
	cursor: pointer;
	transition:
		opacity 0.2s,
		r 0.2s;
}
@media (hover: hover) {
	.scatter .sc-dot:hover {
		opacity: 1;
		stroke: #fff4d6;
		stroke-width: 2;
	}
}