paper-material.apple-fitness-log-wrapper-wrapper{
	border-radius:25px;
	padding:24px;
	
	.elemental-descriptor{
		margin-bottom:16px;
	}
}

.apple-fitness-log-wrapper{
	--colour-move:#FF2D55;
	--colour-exercise:#A3F900;
	--colour-stand:#04C7DD;
	
	display:flex;
	gap:24px;
	align-items:center;
	
	@media all and (max-width:700px){
		align-items:start;
		gap:36px;
	}
	
	@media all and (max-width:400px){
		flex-direction:column;
		gap:24px;
	}
}

apple-fitness-log{
	--size:150px;
	
	width:var(--size);
	aspect-ratio:1;
	
	position:relative;
	
	*, *:before, *:after{
		display:block;
		aspect-ratio:1;
		position:absolute;
		clip-path:circle(50%);
	}
	
	*:before{
		content:'';
		opacity:0.2;
		left:0;
		top:0;
	}
	
	*:after{
		content:'';
		background-color:#FFF;
		left:calc(var(--size) * 0.2 / 2);
		top:calc(var(--size) * 0.2 / 2);
	}
	
	move{
		width:calc(var(--size) * 1);
		top:0;
		left:0;
		z-index:2;
		background:conic-gradient(var(--colour-move) 0, var(--colour-move) var(--ratio), transparent var(--ratio));
	}
	
		move:before{
			background-color:var(--colour-move);
			width:var(--size);
			z-index:1;
		}
		
		move:after{
			background-color:#FFF;
			width:calc(var(--size) * 0.8);
			z-index:3;
		}
	
	exercise{
		width:calc(var(--size) * 0.75);
		left:calc(var(--size) * 0.25 / 2);
		top:calc(var(--size) * 0.25 / 2);
		z-index:4;
		background:conic-gradient(var(--colour-exercise) 0, var(--colour-exercise) var(--ratio), transparent var(--ratio));
	}
		
		exercise:before{
			background-color:var(--colour-exercise);
			width:calc(var(--size) * 0.75);
			z-index:3;
		}
		
		exercise:after{
			background-color:#FFF;
			width:calc(var(--size) * 0.55);
			z-index:5;
		}
		
	stand{
		width:calc(var(--size) * 0.50);
		left:calc(var(--size) * 0.5 / 2);
		top:calc(var(--size) * 0.5 / 2);
		z-index:6;
		background:conic-gradient(var(--colour-stand) 0, var(--colour-stand) var(--ratio), transparent var(--ratio));
	}
		
		stand:before{
			background-color:var(--colour-stand);
			width:calc(var(--size) * 0.50);
			z-index:5;
		}
		
		stand:after{
			width:calc(var(--size) * 0.3);
			z-index:7;
		}
}

.apple-fitness-log-wrapper > div{
	display:flex;
	gap:36px;
	column-rule:2px solid #CCC;
	
	@media all and (max-width:700px){
		flex-direction:column;
	}
	
	.statistics h3{
		margin:0;
		text-transform:uppercase;
		letter-spacing:3px;
	}
	
	.statistics.move h3{
		color:var(--colour-move);
	}
	
	.statistics.exercise h3{
		color:var(--colour-exercise);
	}
	
	.statistics.stand h3{
		color:var(--colour-stand);
	}
	
	.statistics > div{
		font-size:2rem;
		white-space:nowrap;
	}
	
		.statistics > div span{
			font-size:0.8rem;
			display:block;
			margin-top:-4px;
			text-transform:uppercase;
		}
}