boards-quilter {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	/*border: 1px solid red;*/
}

board-list {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
}

board-list>.boardlist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15em,1fr));
	gap: 1em;
}

board-board {
	background-color: #efefef;
	border-radius: 1em;
	display: flex;
	padding: 1em;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;

	&>header {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1em;
		font-weight: bold;
	}
	&>section.messages {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		gap: 2em;
	}
	&>footer>a>svg {
		width: 2em;
	}
}

board-board .Message {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	border-bottom: 1px solid #ccc;
	&>header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		font-size: 0.8em;
	}
	&>section.message {
		font-size: 0.8em;
		background-color: #fffff8;
		padding: 0.6em;
	}
	&>div.replies {
		margin-left: 1em;
	}
	&>footer>a {
		font-size: 0.8em;
	}
}
board-list:not(.admin) .admin {
	display: none;
}
board-list:not(.poster) .poster {
	display: none;
}

board-board>footer, board-board .Message>footer {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	gap: 1em;
	align-items: baseline;

	&>a>svg {
		width: 1.5em;
		g {
			fill: none;
			stroke-width: 1;
			stroke: currentColor;
		}
	}
}

dialog.board-post {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	gap: 1em;

	&:open {
		border: 1px solid #333;
		border-radius: 0.6em;
	}
	&>label {
		display: grid;
		grid-template-columns: 5em 1fr;
	}

	&>.buttons {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}
}