/**
 * SVT score ring — one sheet for every template.
 *
 * Edit tokens / ticks / fill here. Catalog, product header, brand legend,
 * compare cards, tab badges, homepage, sidebar, and VS dials all read this file.
 *
 * Tick counts are set by the mask filename below and by nothing else.
 * There is no tick-count token: there was one, nothing read it, and it
 * agreed with the filenames by hand. To change a count, change the mask.
 *
 *   ring-ticks-32.svg   32   the default — tab badges, homepage, catalog
 *                            cards, product header, compare table, brand
 *                            legend, VS headline dials, compare cards >=900px
 *   ring-ticks-16.svg   16   the 36px surfaces only — compare cards <900px,
 *                            catalog cards <767px
 *   ring-ticks-12.svg   12   .svt-minidial (46px)
 *
 * Fill is brass (--svt-ring-fill) except VS sides (--a / --b, theme blue on B).
 * Empty remainder is sage/grey. Never orange at low opacity.
 * No glow, pulse, filter, or drop-shadow on any ring.
 */

:root {
	--svt-ring-sz: 50px;
	/* Same stroke as the 96px Usability badge (6 / 96). Floor 4px so small cards still read. */
	--svt-ring-ratio: 0.0625;
	--svt-ring-min: 4px;
	--svt-ring-fill: var(--svt-brass, #C8842B);
	/* Darker than washed remainder-green so empty ticks hold weight on beige. */
	--svt-ring-empty: color-mix(in srgb, var(--svt-ink, #26231E) 12%, var(--svt-remainder-green, #d5d8ce));
	--svt-ring-now: 0%;
	--svt-ring-tick: var(--svt-page, #F2EEE6);
}

.svt-score-ring,
.svt-loop-circle .radial-progress,
.svtvs .svtdial {
	--sz: var(--svt-ring-sz);
	--ring: max(var(--svt-ring-min, 4px), calc(var(--sz) * var(--svt-ring-ratio, 0.0625)));
	--svt-ring-fill: var(--svt-brass, #C8842B);
	--svt-ring-empty: color-mix(in srgb, var(--svt-ink, #26231E) 12%, var(--svt-remainder-green, #d5d8ce));
	--svt-ring-tick: var(--svt-page, #F2EEE6);
	position: relative;
	overflow: visible;
	box-sizing: border-box;
	aspect-ratio: 1;
	border-radius: 50%;
	width: var(--sz);
	height: var(--sz);
	padding: 0;
	border: none;
	background-image: none !important;
	/* Empty is painted on .arc with the same mask as fill -- not a full sage disc. */
	background-color: transparent !important;
	filter: none !important;
	-webkit-filter: none !important;
	box-shadow: none !important;
}

/* ---- sizes / tick density ------------------------------------------- */

.svt-score-badge.is-ring .svt-score-ring,
.svt-score-badge.is-ring .radial-progress {
	--svt-ring-sz: 96px;
	--sz: 96px;
}

/* Homepage teaching cards -- same 32-tick paint as the 96px Usability control. */
.svt-home-ring .svt-score-ring,
.svt-home-ring .radial-progress {
	--svt-ring-sz: 96px;
	--sz: 96px;
	--svt-ring-tick: var(--h-card, var(--svt-card, #FFFFFF));
	width: 96px !important;
	height: 96px !important;
}

@media (max-width: 768px) {
	.svt-home-ring .svt-score-ring,
	.svt-home-ring .radial-progress {
		--svt-ring-sz: 88px;
		--sz: 88px;
		width: 88px !important;
		height: 88px !important;
	}
}

.svt-loop-scores .svt-score-ring,
.svt-loop-scores .radial-progress,
.woocommerce .products .svt-loop-scores .radial-progress,
.woocommerce .products.grid_woo .product .svt-loop-scores .radial-progress {
	--svt-ring-sz: 50px;
	--sz: 50px;
}

.woocommerce .products .svt-loop-scores .radial-progress:not(.is-unscored),
.woocommerce .products.grid_woo .product .svt-loop-scores .radial-progress:not(.is-unscored),
.woocommerce .products .svt-loop-scores .radial-progress.is-green-in:not(.is-unscored) {
	background-color: transparent !important;
}

.single-product .svt-product-scores-row .svt-score-ring,
.single-product .svt-product-scores-row .radial-progress {
	--svt-ring-sz: var(--svt-ring, 70px);
	--sz: var(--svt-ring, 70px);
}

@media (max-width: 768px) {
	.single-product .svt-product-scores-row .svt-score-ring,
	.single-product .svt-product-scores-row .radial-progress {
		--svt-ring-sz: 54px;
		--sz: 54px;
		width: 54px !important;
		height: 54px !important;
	}
}

.table_view_charts .svt-compare-header-scores .svt-score-ring,
.table_view_charts .svt-compare-header-scores .radial-progress {
	--svt-ring-sz: 50px;
}

.svt-cmp .svt-loop-scores .svt-score-ring,
.svt-cmp .svt-loop-scores .radial-progress {
	--svt-ring-sz: 36px;
	--sz: 36px;
	width: var(--sz) !important;
	height: var(--sz) !important;
}

.svt-cmp .svt-loop-scores .radial-progress:not(.is-unscored),
.svt-cmp .svt-loop-scores .radial-progress.is-green-in:not(.is-unscored) {
	background-color: transparent !important;
}

@media (min-width: 900px) {
	.svt-cmp .svt-loop-scores .svt-score-ring,
	.svt-cmp .svt-loop-scores .radial-progress {
		--svt-ring-sz: 50px;
		--sz: 50px;
	}
}

.svt-score-legend .svt-score-ring,
.svt-score-legend .radial-progress,
.svt-score-legend-slot--sidebar .svt-loop-scores .svt-score-ring,
.svt-score-legend-slot--sidebar .svt-loop-scores .radial-progress {
	--svt-ring-sz: 64px;
	--sz: 64px;
	width: 64px !important;
	height: 64px !important;
}

@media (max-width: 767px) {
	.svt-archive-footer-bar .svt-score-legend .svt-loop-scores .svt-score-ring,
	.svt-archive-footer-bar .svt-score-legend .svt-loop-scores .radial-progress {
		--svt-ring-sz: 56px;
		--sz: 56px;
		width: 56px !important;
		height: 56px !important;
	}
}

.svtvs .svtdial {
	--svt-ring-sz: 116px;
	--sz: var(--svt-ring-sz);
	--svt-ring-fill: var(--a, var(--svt-brass));
}

.svtvs .svtdial--b,
.svtvs .ring--b.svtdial {
	--svt-ring-fill: var(--b, var(--svt-click, #4974C4));
}

.svtvs .svtdial.svt-minidial {
	--svt-ring-sz: 46px;
}

.woocommerce .products .svt-loop-scores .radial-progress,
.woocommerce .products.grid_woo .product .svt-loop-scores .radial-progress {
	width: var(--sz) !important;
	height: var(--sz) !important;
}

@media (max-width: 767px) {
	.woocommerce .products.grid_woo .product .svt-loop-scores .svt-score-ring,
	.woocommerce .products.grid_woo .product .svt-loop-scores .radial-progress {
		--svt-ring-sz: 36px;
		--sz: 36px;
	}

	.svtvs .svtdial:not(.svt-minidial) {
		--svt-ring-sz: var(--svtvs-dial, 96px);
		--sz: var(--svt-ring-sz);
	}
}

/* ---- glow fully gone ------------------------------------------------ */

.svt-loop-circle,
.svt-loop-circle .radial-progress,
.svt-score-ring,
.svt-score-ring .arc,
.svt-score-ring .seg,
.svt-score-badge.is-ring,
.svt-score-badge.is-ring .svt-loop-circle,
.svt-score-badge.is-ring .radial-progress,
.svtvs .svtdial,
.svtvs .svtdial .arc,
.svtvs .svtdial .seg {
	filter: none !important;
	-webkit-filter: none !important;
	box-shadow: none !important;
}

.svt-loop-circle .radial-progress::before,
.svt-loop-circle .radial-progress::after,
.svt-loop-circle::before,
.svt-loop-circle::after,
.svt-score-ring::before,
.svt-score-ring::after,
.svt-score-badge.is-ring .radial-progress::before,
.svt-score-badge.is-ring .radial-progress::after,
.svtvs .svtdial::before,
.svtvs .svtdial::after {
	content: none !important;
	display: none !important;
	animation: none !important;
	filter: none !important;
	-webkit-filter: none !important;
	box-shadow: none !important;
	background: none !important;
	opacity: 0 !important;
}

/* ---- Rehub circle stays in the DOM for JS; paint lives on .arc ------ */

.svt-score-ring .circle,
.svt-loop-circle .radial-progress .circle,
.svtvs .svtdial .circle {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/*
 * Ring band is sized from the painted box (closest-side), not --sz.
 * Pixel --sz masks go off-center when width/height disagree with the token.
 */
.svt-score-ring,
.svt-loop-circle .radial-progress,
.svtvs .svtdial {
	--svt-ring-band: radial-gradient(
		circle closest-side at 50% 50%,
		transparent calc(100% - var(--ring)),
		#000 calc(100% - var(--ring))
	);
}

/* ---- fill: brass (or VS side color) from 12 o clock ----------------- */

.svt-score-ring .arc,
.svt-loop-circle .radial-progress .arc,
.svtvs .svtdial .arc {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
	/* Fill and empty share this mask -- same radii, same stroke. */
	background: conic-gradient(
		from 0deg,
		var(--svt-ring-fill) 0 var(--svt-ring-now, 0%),
		var(--svt-ring-empty) var(--svt-ring-now, 0%) 100%
	);
	-webkit-mask-image: var(--svt-ring-band);
	mask-image: var(--svt-ring-band);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	filter: none !important;
	box-shadow: none !important;
}

.svt-score-ring.is-unscored .arc,
.svt-loop-circle .radial-progress.is-unscored .arc,
.svt-score-badge.is-ring.is-unscored .arc {
	background: none;
}

/* Dark core is inset from the box edge — same gap on every side. */
.svt-score-ring .inset,
.svt-loop-circle .radial-progress .inset,
.svtvs .svtdial .inset,
.single-product .svt-product-scores-row .radial-progress .inset,
.woocommerce .products .svt-loop-scores .radial-progress .inset,
.woocommerce .products.grid_woo .product .svt-loop-scores .radial-progress .inset,
.svt-cmp .svt-loop-scores .radial-progress .inset,
.table_view_charts .svt-compare-header-scores .radial-progress .inset,
.svt-score-legend .radial-progress .inset {
	position: absolute;
	inset: var(--ring) !important;
	z-index: 3;
	overflow: visible;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	background: var(--svt-ink, #26231E) !important;
	background-color: var(--svt-ink, #26231E) !important;
	box-shadow: none !important;
	border-radius: 50%;
}

.svt-score-ring .inset .percentage,
.svt-loop-circle .radial-progress .inset .percentage,
.svtvs .svtdial .inset .percentage,
.svt-score-legend .radial-progress .inset .percentage,
.single-product .svt-product-scores-row .radial-progress .inset .percentage,
.svt-score-badge.is-ring .radial-progress .inset .percentage,
.svt-loop-scores .radial-progress .inset .percentage,
.svt-cmp .svt-loop-scores .radial-progress .inset .percentage,
.table_view_charts .svt-compare-header-scores .radial-progress .inset .percentage {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	transform: none !important;
	line-height: 1 !important;
	width: auto !important;
	max-width: 100%;
	overflow: visible !important;
	white-space: nowrap;
	box-sizing: border-box;
	text-align: center;
	background: none !important;
	color: #fff !important;
	font-size: calc(var(--sz, 50px) * 0.42);
	font-weight: 700;
}

.svt-score-legend .radial-progress .inset {
	background: var(--svt-ink, #26231E) !important;
	background-color: var(--svt-ink, #26231E) !important;
}
.svt-score-legend .radial-progress .inset .percentage {
	font-size: calc(var(--sz, 64px) * 0.42);
	font-weight: 700;
}

.single-product .svt-product-scores-row .radial-progress .inset .percentage,
.svt-score-badge.is-ring .radial-progress .inset .percentage,
.svt-score-badge.is-ring .svt-score-num,
.svt-home-ring .radial-progress .inset .percentage,
.svt-score-legend .radial-progress .inset .percentage {
	width: 100% !important;
	max-width: 100%;
	text-align: center;
	font-size: calc(var(--sz, 96px) * 0.42) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	padding: 0 !important;
}

.svt-cmp .svt-loop-circle .radial-progress,
.svt-cmp .svt-score-ring {
	--svt-ring-tick: var(--svt-card, #FFFFFF);
}
.woocommerce .products .svt-loop-scores .radial-progress {
	--svt-ring-tick: var(--svt-card, #FFFFFF);
}
.single-product .svt-product-scores-row .radial-progress,
.svt-score-badge.is-ring .radial-progress,
.svt-score-legend .radial-progress {
	--svt-ring-tick: var(--svt-page, #F2EEE6);
}

/*
 * Ticks: SVG rays that scale with the disc (same 32-count as the 96px control).
 * Only the 36px surfaces stay at 16 so the cuts do not swallow the band.
 */
.svt-score-ring .seg,
.svt-loop-circle .radial-progress .seg,
.svtvs .svtdial .seg {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	z-index: 2;
	background: var(--svt-ring-tick, var(--svt-page, #F2EEE6)) !important;
	-webkit-mask-image: url("../svt-kit/icons/ring-ticks-32.svg?v=2");
	mask-image: url("../svt-kit/icons/ring-ticks-32.svg?v=2");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	filter: none !important;
	box-shadow: none !important;
}

.svt-score-badge.is-ring .seg,
.svt-home-ring .seg,
.single-product .svt-product-scores-row .seg,
.svt-loop-scores .seg,
.svt-score-legend .seg,
.table_view_charts .svt-compare-header-scores .seg,
.svtvs .svtdial:not(.svt-minidial) .seg {
	-webkit-mask-image: url("../svt-kit/icons/ring-ticks-32.svg?v=2");
	mask-image: url("../svt-kit/icons/ring-ticks-32.svg?v=2");
}

.svt-cmp .seg {
	-webkit-mask-image: url("../svt-kit/icons/ring-ticks-16.svg?v=2");
	mask-image: url("../svt-kit/icons/ring-ticks-16.svg?v=2");
}

@media (min-width: 900px) {
	.svt-cmp .seg {
		-webkit-mask-image: url("../svt-kit/icons/ring-ticks-32.svg?v=2");
		mask-image: url("../svt-kit/icons/ring-ticks-32.svg?v=2");
	}
}

@media (max-width: 767px) {
	.woocommerce .products.grid_woo .product .svt-loop-scores .seg {
		-webkit-mask-image: url("../svt-kit/icons/ring-ticks-16.svg?v=2");
		mask-image: url("../svt-kit/icons/ring-ticks-16.svg?v=2");
	}
}

.svtvs .svtdial.svt-minidial .seg {
	-webkit-mask-image: url("../svt-kit/icons/ring-ticks-12.svg?v=2");
	mask-image: url("../svt-kit/icons/ring-ticks-12.svg?v=2");
}

.svt-score-ring.is-unscored,
.svt-loop-circle .radial-progress.is-unscored,
.svt-score-badge.is-ring.is-unscored .radial-progress {
	background-color: color-mix(in srgb, var(--svt-added, #3B6633) 22%, var(--svt-hairline, #E5E1D8)) !important;
}

.svt-score-ring.is-unscored .inset,
.svt-loop-circle .radial-progress.is-unscored .inset,
.svt-score-badge.is-ring.is-unscored .inset {
	background: var(--svt-page, #F2EEE6) !important;
	background-color: var(--svt-page, #F2EEE6) !important;
}

.svt-score-ring.is-unscored .inset .percentage,
.svt-loop-circle .radial-progress.is-unscored .inset .percentage,
.svt-score-badge.is-ring.is-unscored .inset .percentage {
	color: var(--svt-ink, #26231E) !important;
}