main.history-page {
	.history-list {
		display: grid;
		gap: var(--space-3);
	}

	.history-item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--space-3);
		align-items: start;
		padding: var(--space-4);
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		background: var(--color-surface-subtle);
		color: inherit;
		text-decoration: none;
	}

	.history-item-main,
	.history-item-side {
		display: grid;
		gap: var(--space-2);
	}

	.history-item-side {
		justify-items: end;
		text-align: right;
	}

	.history-item-title,
	.history-item-value,
	.history-item-preview {
		margin-bottom: 0;
	}

	.history-item-preview {
		color: var(--color-muted);
	}

	.badge-row {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	.badge {
		display: inline-flex;
		align-items: center;
		padding: 0.2rem 0.55rem;
		border-radius: 999px;
		border: 1px solid var(--color-border);
		font-size: 0.8rem;
		line-height: 1.2;
	}

	.badge--submitted {
		background: var(--color-success-surface);
		border-color: var(--color-success-border);
		color: var(--color-success-text);
	}

	.badge--draft {
		background: var(--color-info-surface);
		border-color: var(--color-info-border);
		color: var(--color-info-text);
	}

	.badge--target {
		background: var(--color-warning-surface);
		border-color: var(--color-warning-border);
		color: var(--color-warning-text);
	}

	.badge--muted {
		background: var(--color-surface-muted);
		color: var(--color-muted);
	}
}

main.streaks-page {
	.trend-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
		gap: var(--space-3);
	}
}

main.stats-page {
	.stats-detail-list {
		display: grid;
		gap: var(--space-3);
	}

	.stats-detail-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--space-3);
		padding-top: var(--space-3);
		border-top: 1px solid var(--color-border);
	}

	.stats-detail-row:first-child {
		border-top: 0;
		padding-top: 0;
	}
}

@media (max-width: 700px) {
	main.history-page {
		.history-item {
			grid-template-columns: 1fr;
		}

		.history-item-side {
			justify-items: start;
			text-align: left;
		}
	}
}