index.css

body {
	font-family: sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
}

main {
	display: flex;
	flex-direction: column;
}

h1 {
	text-align: center;
	font-size: 800%;
	margin: .2em 0;
}

li {
	margin: .5em 0;
}

li:last-child {
	text-decoration: line-through;
	opacity: 0.5;
}

table {
	margin-top: 2em;
	border-collapse: collapse;

	thead {
		border-bottom: 3px double black;
		td:nth-child(2) { text-align: center; }
	}

	tbody {
		margin-top: 1em;

		td:nth-child(1)::after {
			content: " 🠚";
		}

		td:nth-child(3)::before {
			content: "🠚 ";
		}

		tr:nth-child(even) {
			background-color: #eee;
		}
	}

	td {
		padding: 4px 2px;
		&:nth-child(1) {
			text-align: left;
			word-break: break-all;
		}
		&:nth-child(3) {
			text-align: right;
			word-break: break-all;
		}

		p {
			white-space: nowrap;
		}

		&.inactive {
			opacity: 0.5;
		}

		[name=delete] { color: red; }
	}
}

dialog {
	&:has([name=message-types-mode] [value=all]:checked) [name=message-types] { display: none; }

	.message-types {
		display: flex;
		align-items: flex-end;
	}

	.message-types label { white-space: nowrap; }

	[type=submit] {
		font-weight: bold;
	}

	footer {
		display: flex;
		gap: 8px;
	}
}

main > footer {
	margin-top: 5em;
	border-top: 1px solid gray;
	padding-top: 1em;
	text-align: center;
	font-size: 70%;
}