/*
 * "Was this guide helpful?" result (assets/js/helpful.js, inc/helpful.php): after a vote the Yes / No buttons give
 * way to the share of Yes and No as thin bars and the vote count. Colours are the design tokens (dark and light are
 * swapped by tokens.css); the bars grow with transform only and stay still with prefers-reduced-motion.
 */
.wc-hf-box {
	--wc-hf-text: var(--tZYQMwj, #F5F5F7);
	--wc-hf-mute: var(--tT6XaDa, #86868B);
	--wc-hf-track: var(--tDHjtAG, rgba(255, 255, 255, 0.11));
	--wc-hf-yes: var(--wc-up, #30D158);
	--wc-hf-err: var(--wc-dn, #FF453A);
}
.wc-hf-lab { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wc-hf-sum { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--wc-hf-mute); }
.wc-hf-sum b { font-weight: 600; color: var(--wc-hf-text); font-variant-numeric: tabular-nums; }
.wc-hf-err { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--wc-hf-err); }
.wc-hf-box button:focus-visible { outline: 2px solid var(--wc-hf-text); outline-offset: 2px; }
.wc-hf-box button:disabled { opacity: 0.55; cursor: progress; }

.wc-hf-res {
	display: grid;
	gap: 8px;
	flex: 1 1 240px;
	max-width: 320px;
	min-width: 0;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.wc-hf-res.is-in { opacity: 1; transform: none; }
.wc-hf-res:focus { outline: none; }
.wc-hf-row {
	position: relative;
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) 40px;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	line-height: 1.2;
	color: var(--wc-hf-mute);
}
.wc-hf-k { font-weight: 500; }
.wc-hf-row.is-mine .wc-hf-k { font-weight: 600; color: var(--wc-hf-text); }
.wc-hf-v { text-align: right; font-weight: 600; color: var(--wc-hf-text); font-variant-numeric: tabular-nums; }
.wc-hf-track { display: block; height: 4px; border-radius: 2px; background: var(--wc-hf-track); overflow: hidden; }
.wc-hf-fill {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wc-hf-fill.wc-hf-yes { background: var(--wc-hf-yes); }
.wc-hf-fill.wc-hf-no { background: var(--wc-hf-mute); }

@media (prefers-reduced-motion: reduce) {
	.wc-hf-res, .wc-hf-fill { transition: none; }
	.wc-hf-res { transform: none; }
}