.tk-material-composition {
	--tk-material-border: #d9dee5;
	--tk-material-text: #242933;
	--tk-material-muted: #4b5563;
	box-sizing: border-box;
	max-width: 42rem;
	margin: 1.25rem 0;
	padding: 1rem;
	border: 1px solid var(--tk-material-border);
	border-radius: 0.75rem;
	background: #fff;
	color: var(--tk-material-text);
}

.tk-material-composition[hidden] { display: none !important; }

.tk-material-composition__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.9rem;
}

.tk-material-composition__heading h3 {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.35;
}

.tk-material-composition__total {
	flex: 0 0 auto;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
	background: #f1f4f7;
	color: var(--tk-material-muted);
	font-size: 0.8rem;
	font-weight: 600;
}

.tk-material-composition__rows,
.tk-material-composition__rating-rows {
	display: grid;
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tk-material-composition__row {
	display: grid;
	grid-template-columns: minmax(6.5rem, 1fr) auto 3.25rem;
	align-items: center;
	gap: 0.75rem;
	min-height: 1.65rem;
}

.tk-material-composition__name { font-size: 0.92rem; }

.tk-material-composition__scale {
	display: flex;
	align-items: center;
	gap: clamp(0.12rem, 0.6vw, 0.35rem);
}

.tk-material-ball {
	display: block;
	flex: 0 0 auto;
	width: clamp(1rem, 2.5vw, 1.45rem);
	height: auto;
}

.tk-material-composition__group--ratings { margin-top: 1.1rem; }
.tk-material-composition__subheading { margin: 0 0 0.65rem; font-size: 0.98rem; }

.tk-material-composition__value {
	text-align: right;
	font-size: 0.92rem;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
	.tk-material-composition { padding: 0.85rem; }
	.tk-material-composition__row {
		grid-template-columns: 5.25rem minmax(0, 1fr) 2.6rem;
		gap: 0.4rem;
	}
	.tk-material-composition__scale { justify-content: space-between; }
	.tk-material-ball { width: clamp(0.85rem, 4vw, 1.15rem); }
}