.vo-log {
	container-type: inline-size;
}

.vo-log__weeks {
	display: grid;
	gap: var(--space-32);
}

.vo-log__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-10);
	min-width: 0;
}

.vo-log__empty {
	margin: 0;
	color: var(--color-muted-foreground);
}

.vo-logweek {
	--vo-logweek-cell: rgba(20, 19, 30, 0.14);
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	min-width: 0;
	padding: 18px 18px var(--space-16);
	border-radius: 20px;
	background-color: var(--color-sub);
	color: var(--color-on-sub);
}

.vo-logweek.is-live {
	--vo-logweek-cell: rgba(23, 18, 10, 0.12);
	background-color: var(--color-primary);
	color: var(--color-primary-foreground);
}

.vo-logweek__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-10);
	min-height: 24px;
}

.vo-logweek__range {
	display: flex;
	gap: var(--space-6);
	margin: 0;
	font-size: var(--font-size-3xs);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.vo-logweek__flag {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--space-6);
	height: 24px;
	padding: 0 var(--space-10);
	border-radius: var(--radius-full);
	background-color: var(--vo-logweek-cell);
	font-size: var(--font-size-3xs);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	white-space: nowrap;
}

.vo-logweek__flag--live {
	background-color: var(--color-primary-foreground);
	color: var(--color-primary);
}

.vo-logweek__flag--live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--radius-full);
	background-color: currentColor;
}

.vo-logweek__name {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.3em;
	margin: 0;
	font-size: 1.75rem;
	font-weight: var(--font-weight-extrabold);
	line-height: 1.1;
	letter-spacing: 0.01em;
}

.vo-logweek__lead {
	margin: 0;
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-bold);
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.vo-logweek__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
	margin: auto 0 0;
}

.vo-logweek__stat {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: var(--space-4);
	min-width: 0;
	padding: 9px var(--space-10);
	border-radius: var(--space-12);
	background-color: var(--vo-logweek-cell);
}

.vo-logweek__stat-label {
	overflow: hidden;
	font-size: 10px;
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vo-logweek__stat-value {
	margin: 0;
	font-size: 1.125rem;
	font-weight: var(--font-weight-extrabold);
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.vo-logweek__stat-unit {
	margin: 0 1px;
	font-size: var(--font-size-3xs);
}

@container (min-width: 600px) {
	.vo-log__weeks {
		gap: 40px;
	}

	.vo-log__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-16);
	}

	.vo-logweek {
		gap: 14px;
		padding: 26px var(--space-24) var(--space-24);
		border-radius: 24px;
	}

	.vo-logweek__range,
	.vo-logweek__flag {
		font-size: var(--font-size-2xs);
	}

	.vo-logweek__name {
		flex-direction: column;
		font-size: 2.5rem;
		line-height: 1.08;
	}

	.vo-logweek__lead {
		font-size: var(--font-size-xs);
		line-height: 1.75;
	}

	.vo-logweek__stat {
		gap: 5px;
		padding: var(--space-12);
		border-radius: 14px;
	}

	.vo-logweek__stat-value {
		font-size: 1.5rem;
	}
}

@container (min-width: 960px) {
	.vo-log__weeks {
		gap: var(--space-48);
	}

	.vo-log__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}