/* Market donut chart (inc/pie.php). */

/* Market chart: animated donut (inc/pie.php, pie.js). Sizes use container units so labels scale with the chart. */
:is(.pm-home, .pm-rebuilt) .pmh-pie {
	position: relative; max-width: 540px; width: 100%; margin: 0 auto; padding: 28px; border-radius: 36px;
	background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, var(--pm-tint) 70%); border: 1px solid var(--pm-line);
}
:is(.pm-home, .pm-rebuilt) .pmh-pie-in { position: relative; aspect-ratio: 1; container-type: inline-size; font-family: var(--pm-font); }
:is(.pm-home, .pm-rebuilt) .pmh-pie-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 24px 30px rgba(0,64,110,.18)); }
:is(.pm-home, .pm-rebuilt) .pmh-pie-track { fill: none; stroke: var(--pm-line); stroke-width: 156; opacity: .45; }
:is(.pm-home, .pm-rebuilt) .pmh-seg {
	fill: none; stroke-width: 156; stroke-dasharray: 100 100; stroke-dashoffset: 0; cursor: default;
	transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) calc(var(--i) * .18s), transform .45s var(--pm-ease), filter .3s ease;
}
:is(.pm-home, .pm-rebuilt) .pmh-seg:hover { transform: translate(var(--dx), var(--dy)); filter: brightness(1.08); }
:is(.pm-home, .pm-rebuilt) .pmh-pie-orbit { fill: none; stroke: rgba(0,64,110,.22); stroke-width: 1.5; stroke-dasharray: 3 7; transform-origin: 220px 220px; animation: pmh-orbit 24s linear infinite; }
@keyframes pmh-orbit { to { transform: rotate(360deg); } }
:is(.pm-home, .pm-rebuilt) .pmh-pie-core {
	position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #F3F7FA 45%, #D7E1EA 100%);
	box-shadow: 0 0 0 5px rgba(255,255,255,.9), 0 18px 34px -12px rgba(0,64,110,.45), inset 0 -6px 14px rgba(0,64,110,.12);
	transition: transform .6s var(--pm-ease) .5s;
}
:is(.pm-home, .pm-rebuilt) .pmh-pie-core span { position: absolute; inset: 14%; border-radius: 50%; background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,0) 60%); }
:is(.pm-home, .pm-rebuilt) .pmh-stat {
	position: absolute; width: 34%; transform: translate(-50%, -50%); text-align: center; color: var(--pm-white); pointer-events: none;
	transition: opacity .6s ease calc(.5s + var(--i) * .18s), transform .6s var(--pm-ease) calc(.5s + var(--i) * .18s);
}
:is(.pm-home, .pm-rebuilt) .pmh-stat p { margin: 0; line-height: 1.05; }
:is(.pm-home, .pm-rebuilt) .pmh-stat p + p { margin-top: 2.6cqw; }
:is(.pm-home, .pm-rebuilt) .pmh-stat b { display: block; font-size: 8.4cqw; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
:is(.pm-home, .pm-rebuilt) .pmh-stat span { display: block; margin-top: .6cqw; font-size: max(11px, 3.2cqw); font-weight: 500; line-height: 1.2; }
:is(.pm-home, .pm-rebuilt) .pmh-stat small { display: block; margin-top: .6cqw; font-size: max(9px, 2.2cqw); opacity: .85; }
/* Each label sits on its segment's centroid (ring is r 58–214 of 440) */
:is(.pm-home, .pm-rebuilt) .pmh-stat--tl { left: 28.5%; top: 29%; }
:is(.pm-home, .pm-rebuilt) .pmh-stat--tl b { font-size: 7.4cqw; }
:is(.pm-home, .pm-rebuilt) .pmh-stat--tr { left: 71.5%; top: 28.5%; }
:is(.pm-home, .pm-rebuilt) .pmh-stat--br { left: 71.5%; top: 71%; }
:is(.pm-home, .pm-rebuilt) .pmh-stat--bl { left: 28.5%; top: 71%; }
:is(.pm-home, .pm-rebuilt) .pmh-stat--tr { text-shadow: 0 1px 10px rgba(0,64,110,.3); }
/* Before the chart scrolls into view (JS adds .is-armed, then .is-in) */
:is(.pm-home, .pm-rebuilt) .pmh-pie.is-armed:not(.is-in) .pmh-seg { stroke-dashoffset: 100; }
:is(.pm-home, .pm-rebuilt) .pmh-pie.is-armed:not(.is-in) .pmh-stat { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
:is(.pm-home, .pm-rebuilt) .pmh-pie.is-armed:not(.is-in) .pmh-pie-core { transform: translate(-50%, -50%) scale(.6); }

@media (max-width: 640px) {
	:is(.pm-home, .pm-rebuilt) .pmh-pie { padding: 14px; border-radius: 26px; }
	:is(.pm-home, .pm-rebuilt) .pmh-stat span { font-size: max(10px, 3.2cqw); }
	:is(.pm-home, .pm-rebuilt) .pmh-stat--tl { left: 27%; top: 25.5%; }
	:is(.pm-home, .pm-rebuilt) .pmh-stat--tl p + p { margin-top: 1.6cqw; }
}
@media (prefers-reduced-motion: reduce) {
	:is(.pm-home, .pm-rebuilt) .pmh-pie-orbit { animation: none !important; }
	:is(.pm-home, .pm-rebuilt) .pmh-pie * { transition: none !important; }
}