:root {
	color-scheme: dark;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
	max-width: 900px;
	margin: 28px auto 60px;
	padding: 0 20px;
	background: #111;
	color: #eee;
}

h1 {
	margin-bottom: 2px;
}

h2 {
	margin-top: 34px;
}

small {
	color: #aaa;
}

.project {
	margin: 14px 0;
}

.row {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.bar {
	height: 18px;
	background: #333;
	border-radius: 5px;
	overflow: hidden;
	margin-top: 5px;
}

.fill {
	height: 100%;
	background: #69c;
}

.done .fill {
	background: #6b8;
}

details.tasks {
	margin: 5px 0 0 12px;
	color: #aaa;
	font-size: 0.86rem;
}

details.tasks summary {
	cursor: pointer;
	user-select: none;
}

details.tasks ul {
	margin: 6px 0 10px 20px;
	padding: 0;
}

details.tasks li {
	margin: 3px 0;
}

.compact .project {
	margin: 7px 0;
}

.compact .bar {
	height: 8px;
}

.backlog-item,
.done-item {
	margin: 5px 0;
	font-size: 0.9rem;
	color: #bbb;
}

#backlog-section,
#done-section {
	margin-top: 38px;
}

.project,
.simple-item {
	cursor: grab;
}

.project:active,
.simple-item:active {
	cursor: grabbing;
}

.dragging {
	opacity: 0.35;
}