/**
 * kd-better-unite.css
 *
 * STRUCTURAL styles only — layout, sizing, animation. Every colour/font
 * reads a --kd-bu-* variable with an org-token fallback and, beneath that,
 * a plain hex/keyword fallback, e.g.:
 *
 *   background: var(--kd-bu-fill, var(--kd-color-accent, #FFDE17));
 *
 * A theme skins this plugin entirely by setting --kd-bu-* custom properties
 * (or by already defining the --kd-color-* / --kd-font-* org tokens this
 * falls back to) — zero plugin CSS edits needed per client.
 *
 * No @font-face here (this plugin's predecessor bundled Helvetica Neue
 * OTF/TTC files; dropped for v1 — see readme.md).
 */

/* =============================================================================
   BASE — inherit theme fonts
   ============================================================================= */

.kd-bu-progress,
.kd-bu-leaderboard,
.kd-bu-stats {
	font-family: var(--kd-bu-font-body, var(--kd-font-body, inherit));
}

.kd-bu-leaderboard__name,
.kd-bu-leaderboard__amount,
.kd-bu-stats__value,
.kd-bu-stats__label {
	font-family: var(--kd-bu-font-heading, var(--kd-font-heading, inherit));
}

/* =============================================================================
   ERROR / EMPTY STATES
   ============================================================================= */

.kd-bu-error,
.kd-bu-leaderboard__empty {
	color: var(--kd-bu-muted, var(--kd-color-neutral-500, #666));
	font-size: 16px;
	margin: 0;
	padding: 12px 0;
}

/* =============================================================================
   BAR GROW ANIMATION — shared by progress bar + leaderboard fills
   ============================================================================= */

@keyframes kd-bu-grow {
	from {
		width: 0;
	}
	to {
		width: var(--kd-bu-percent, 0%);
	}
}

/* =============================================================================
   PROGRESS BAR
   ============================================================================= */

.kd-bu-progress {
	display: flex;
	flex-direction: column;
	/* Comp default width = one Figma card (392px, --kd-card-w) — the bar is
	   a fixed-width element that sits inline in a hero, not a full-column
	   stretch. width:100% + max-width lets it shrink on narrow viewports
	   (≤392px) while still capping on anything wider; .alignwide/.alignfull
	   below release the cap for a block explicitly set to stretch. */
	width: 100%;
	max-width: var(--kd-bu-width, var(--kd-card-w, 24.5rem));
}

/* supports.align: the align class lands on the block's OUTER wrapper
   (get_block_wrapper_attributes(), see render.php), one level above
   .kd-bu-progress — not on .kd-bu-progress itself. */
.alignwide > .kd-bu-progress,
.alignfull > .kd-bu-progress {
	max-width: none;
}

.kd-bu-progress__track {
	position: relative; /* containing block for .kd-bu-progress__marker */
	order: 1;
	margin: 0;
	padding: 0;
	min-height: 36px;
	height: var(--kd-bu-track-h, 68px);
	border-radius: 100px;
	border: var(--kd-bu-track-border-w, 4px) solid
		var(--kd-bu-track-border, var(--kd-color-body, #000));
	/* Comp: unfilled track is transparent (rgba(255,222,23,0) in the Figma
	   fill) — it shows whatever band/hero background sits behind the bar,
	   not a solid neutral fill. */
	background-color: var(--kd-bu-track-bg, transparent);
	overflow: hidden;
}

@media screen and (max-width: 768px) {
	.kd-bu-progress__track {
		height: var(--kd-bu-track-h-mobile, 40px);
	}
}

.kd-bu-progress__fill {
	height: 100%;
	width: 0%;
	border-radius: 100px;
	background: var(--kd-bu-fill, var(--kd-color-accent, #ffde17));
}

.kd-bu-progress__fill.kd-bu-animate {
	animation: kd-bu-grow 1.2s ease-out forwards;
}

.kd-bu-progress[data-type="ducks"] .kd-bu-progress__fill {
	background: var(--kd-bu-fill-ducks, var(--kd-color-secondary, #746db0));
}

.kd-bu-progress__labels {
	order: 2;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	width: 100%;
	margin-top: 8px;
	padding: 0;
	/* Comp (Style Guide 2007:10 / 10:337,10:339,10:336,10:338): 17px medium,
	   not the 18px/700 this shipped with. */
	font-size: var(--kd-bu-label-size, 1.0625rem);
	font-weight: 500;
	color: var(--kd-bu-ink, var(--kd-color-body, #000));
}

.kd-bu-progress__label {
	/* Comp doesn't bold the "Raised:"/"Goal:" prefix — same weight as the
	   value next to it. */
	font-weight: 500;
}

.kd-bu-progress__value,
.kd-bu-progress__goal {
	color: var(--kd-bu-ink, var(--kd-color-body, #000));
	margin: 0;
	padding: 0;
	line-height: 1.2;
}

.kd-bu-progress__value var,
.kd-bu-progress__goal var {
	/* <var> carries a UA-stylesheet italic by default in every browser —
	   the comp text is upright. */
	font-style: normal;
}

@media screen and (max-width: 767px) {
	.kd-bu-progress__labels {
		flex-direction: column;
		font-size: 16px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.kd-bu-progress__labels {
		font-size: 20px;
	}
}

/* Marker — fixed end-cap at the track's right edge by default (comp: the
   52px circle sits at the end of an EMPTY track, Figma 10:344/10:343), not
   a rider that only appears once the fill reaches it. A plain circle
   unless --kd-bu-marker-image-duck (duck silhouette, ships at
   assets/img/duck-marker.svg) or the ::before currency glyph is showing. */
.kd-bu-progress__marker {
	position: absolute;
	top: 50%;
	right: var(--kd-bu-marker-offset, 4px);
	transform: translateY(-50%);
	height: var(--kd-bu-marker-size, 52px);
	width: var(--kd-bu-marker-size, 52px);
	border-radius: 50%;
	z-index: 1; /* paint over the fill's leading edge */
	/* Dollars: yellow circle (comp) — same source as the fill itself. */
	background-color: var(
		--kd-bu-marker-bg,
		var(--kd-bu-fill, var(--kd-color-accent, #ffde17))
	);
}

.kd-bu-progress[data-type="ducks"] .kd-bu-progress__marker {
	/* Ducks: purple circle (comp) — same source as the ducks fill. */
	background-color: var(
		--kd-bu-marker-bg-ducks,
		var(--kd-bu-fill-ducks, var(--kd-color-secondary, #746db0))
	);
}

@media screen and (max-width: 768px) {
	.kd-bu-progress__marker {
		height: var(--kd-bu-marker-size-mobile, 42px);
		width: var(--kd-bu-marker-size-mobile, 42px);
	}
}

/* Rider mode — BU1's original behaviour (marker rides the fill's moving
   edge instead of sitting fixed at the track's end). Opt in via
   KD_BU_Render::render_progress_bar()'s marker_mode => 'rider' arg, which
   adds this modifier class to .kd-bu-progress (same pattern as
   .kd-bu-leaderboard--podium for layout switching) — not wired to a block
   attribute in BU2. --kd-bu-percent is set on .kd-bu-progress__track (see
   render_progress_bar()), so both .kd-bu-progress__fill's width and this
   position: calc() read the same inherited value. */
.kd-bu-progress--marker-rider .kd-bu-progress__marker {
	right: calc(
		100% - var(--kd-bu-percent, 0%) - (var(--kd-bu-marker-size, 52px) / 2)
	);
}

@media screen and (max-width: 768px) {
	.kd-bu-progress--marker-rider .kd-bu-progress__marker {
		right: calc(
			100% - var(--kd-bu-percent, 0%) -
				(var(--kd-bu-marker-size-mobile, 42px) / 2)
		);
	}
}

/* The duck icon lives on its own ::before layer, NOT as a background-image
   on .kd-bu-progress__marker itself: CSS filter applies to an element's
   entire rendered output, so putting the icon + invert(1) directly on the
   marker would also invert the type-based background-color set above
   (yellow/purple → an unintended olive/green) instead of only recolouring
   the black-by-default SVG (fill="currentColor", which resolves to black
   in an externally-referenced background-image context) to white. */
.kd-bu-progress__marker--duck::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(
		--kd-bu-marker-image-duck,
		url("../img/duck-marker.svg")
	);
	background-size: 60%;
	background-position: center;
	background-repeat: no-repeat;
	filter: var(--kd-bu-marker-image-duck-filter, invert(1));
}

.kd-bu-progress__marker--currency::before {
	content: var(--kd-bu-marker-glyph, "$");
	/* Same size-agnostic centring as the duck variant above (position:
	   absolute + flex) instead of a line-height literal — line-height
	   pinned to --kd-bu-marker-size (52px) left the glyph ~5px low inside
	   the 42px mobile marker and let ink cross the track's overflow:hidden
	   edge. */
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	/* DL5 (design-deltas-2026-09-11): comp's $ text node grew 16×30 → 18×36
	   (Figma 10:345/10:346). 23px is the fallback-font-stack size (Helvetica
	   Neue/Helvetica/Arial — this plugin ships no @font-face) whose glyph
	   ink height matches the comp's ~26px ink height; width won't match
	   1:1 across font stacks. Retune via --kd-bu-marker-glyph-size per theme. */
	font-size: var(--kd-bu-marker-glyph-size, 23px);
	/* Dollars: black $ on the yellow circle (comp). */
	color: var(--kd-bu-marker-fg, var(--kd-color-body, #000));
	font-weight: 700;
}

.kd-bu-progress[data-type="ducks"] .kd-bu-progress__marker--currency::before {
	/* Ducks: white $ on the purple circle (comp). */
	color: var(--kd-bu-marker-fg-ducks, var(--kd-color-base, #fff));
}

/* =============================================================================
   LEADERBOARD
   BU3 (2027 apply-system row, D10): last year's widget screenshot pasted
   into the comp (Figma 10:370, undesigned — see the vault's
   figma-analysis-2026-09.md §5.1) re-specified against this plugin's token
   contract — 128px avatar disc, DynaPuff caps name, bold amount + muted
   percent, a 12px yellow bar, 1px neutral-300 dividers. The white panel
   (bg/radius/padding) is the theme's S2 wrapper pattern, not this block —
   .kd-bu-leaderboard below only sets a plain fallback panel for contexts
   that render it with no wrapper at all (e.g. the bare shortcode).
   ============================================================================= */

.kd-bu-leaderboard {
	background: var(--kd-bu-panel-bg, var(--kd-color-base, #fff));
	border-radius: var(--kd-bu-panel-radius, 20px);
	padding: var(--kd-bu-panel-padding, 24px);
}

.kd-bu-leaderboard__list {
	display: flex;
	flex-direction: column;
}

.kd-bu-leaderboard__entry {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px 4px;
	border-bottom: 1px solid
		var(--kd-bu-divider, var(--kd-color-neutral-300, #ccc));
	text-decoration: none;
	color: inherit;
	border-radius: 8px;
	transition: background 0.15s ease;
}

.kd-bu-leaderboard__entry:hover {
	background: var(--kd-bu-entry-hover, rgba(0, 0, 0, 0.04));
}

.kd-bu-leaderboard__entry:focus-visible {
	/* Ink, not the yellow fill token — the fill reads ~1.34:1 on the white
	   panel (fails WCAG 2.4.7's 3:1 non-text-contrast minimum). Round-1
	   design-diff fix. */
	outline: 3px solid var(--kd-bu-ink, var(--kd-color-contrast, #1c1355));
	outline-offset: 2px;
	background: var(--kd-bu-entry-hover, rgba(0, 0, 0, 0.04));
}

.kd-bu-leaderboard__list > .kd-bu-leaderboard__entry:last-child {
	border-bottom: none;
}

/* Rank number — the apply-system row design has no visible rank badge
   (avatar + name + amount + bar only, per the 10:370 comp screenshot), so
   the list layout hides it via the override hook the shared contract
   already documents (KD_BU_Render's DOM-contract docblock); podium hides
   its own copy separately below. A theme wanting numbered list rows can
   re-show it with `.kd-bu-leaderboard--list .kd-bu-leaderboard__rank { display: flex; }`. */
.kd-bu-leaderboard--list .kd-bu-leaderboard__rank {
	display: none;
}

.kd-bu-leaderboard__rank {
	font-size: 12px;
	font-weight: 700;
	color: var(--kd-bu-muted, var(--kd-color-neutral-500, #bbb));
	min-width: 20px;
	text-align: center;
	flex-shrink: 0;
}

.kd-bu-leaderboard__avatar {
	width: var(--kd-bu-avatar-size, 128px);
	height: var(--kd-bu-avatar-size, 128px);
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background-color: var(--kd-bu-avatar-bg, var(--kd-color-accent, #ffde17));
	display: flex;
	align-items: center;
	justify-content: center;
}

.kd-bu-leaderboard__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kd-bu-leaderboard__avatar-fallback {
	padding: 28px;
	object-fit: contain;
}

.kd-bu-leaderboard__info {
	flex: 1;
	min-width: 0;
}

.kd-bu-leaderboard__name {
	font-family: var(--kd-bu-font-heading, var(--kd-font-heading, inherit));
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--kd-bu-ink, var(--kd-color-body, #1a1a1a));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 6px;
}

.kd-bu-leaderboard__amount {
	font-size: 24px;
	font-weight: 700;
	color: var(--kd-bu-ink, var(--kd-color-body, #1a1a1a));
	margin-bottom: 10px;
}

.kd-bu-leaderboard__pct {
	font-weight: 600;
	color: var(--kd-bu-muted, var(--kd-color-neutral-500, #888));
	font-size: 16px;
	margin-left: 4px;
}

.kd-bu-leaderboard__track {
	height: 12px;
	background: var(--kd-bu-track-bg, var(--kd-color-neutral-100, #e0e0e0));
	border-radius: 6px;
	overflow: hidden;
}

.kd-bu-leaderboard__fill {
	height: 100%;
	width: 0%;
	background-color: var(--kd-bu-fill, var(--kd-color-accent, #ffde17));
	border-radius: 6px;
}

.kd-bu-leaderboard__fill.kd-bu-animate {
	animation: kd-bu-grow 0.8s ease-out forwards;
}

@media screen and (max-width: 768px) {
	.kd-bu-leaderboard__avatar {
		width: var(--kd-bu-avatar-size-mobile, 72px);
		height: var(--kd-bu-avatar-size-mobile, 72px);
	}

	.kd-bu-leaderboard__avatar-fallback {
		padding: 16px;
	}

	.kd-bu-leaderboard__entry {
		gap: 16px;
		padding: 16px 4px;
	}

	.kd-bu-leaderboard__name {
		font-size: 18px;
		margin-bottom: 4px;
	}

	.kd-bu-leaderboard__amount {
		font-size: 18px;
		margin-bottom: 6px;
	}

	.kd-bu-leaderboard__pct {
		font-size: 13px;
	}
}

/* =============================================================================
   LEADERBOARD — podium layout (top 3 highlighted, full list below)
   ============================================================================= */

.kd-bu-leaderboard--podium .kd-bu-leaderboard__podium {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}

@media screen and (max-width: 600px) {
	.kd-bu-leaderboard--podium .kd-bu-leaderboard__podium {
		grid-template-columns: 1fr;
	}
}

.kd-bu-leaderboard__entry--podium {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	border-bottom: none;
	border-radius: var(--kd-bu-podium-card-radius, 14px);
	padding: 20px 16px;
}

.kd-bu-leaderboard__entry--rank-1 {
	background: var(--kd-bu-podium-1-bg, var(--kd-color-neutral-100, #fffae6));
}
.kd-bu-leaderboard__entry--rank-2 {
	background: var(--kd-bu-podium-2-bg, var(--kd-color-neutral-100, #f5f5f5));
}
.kd-bu-leaderboard__entry--rank-3 {
	background: var(--kd-bu-podium-3-bg, var(--kd-color-neutral-100, #fdf3ec));
}

.kd-bu-leaderboard__entry--podium .kd-bu-leaderboard__rank {
	display: none;
}

.kd-bu-leaderboard__entry--podium .kd-bu-leaderboard__avatar {
	width: 84px;
	height: 84px;
}

.kd-bu-leaderboard__entry--podium .kd-bu-leaderboard__name {
	white-space: normal;
}

/* =============================================================================
   STATS
   ============================================================================= */

.kd-bu-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

@media screen and (max-width: 767px) {
	.kd-bu-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

.kd-bu-stats__card {
	background-color: var(--kd-bu-panel-bg, var(--kd-color-base, #fff));
	border: var(--kd-bu-track-border-w, 4px) solid
		var(--kd-bu-track-border, var(--kd-color-body, #000));
	border-radius: 12px;
	padding: 20px 16px;
	text-align: center;
}

.kd-bu-stats__value {
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1;
	color: var(--kd-bu-fill-ducks, var(--kd-color-secondary, #746db0));
	margin-bottom: 8px;
}

.kd-bu-stats__label {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--kd-bu-ink, var(--kd-color-contrast, #1a1a1a));
}