strong {
	font-weight: bold;
}

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 {
	--color-dark-green: #050;
	background-color: #fff;
	border: 2px solid var(--color-dark-green);
	color: #333;
	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: #ffe680;;
		color: #333;
		padding: 0em 0.6em;
		border-radius: 0.3em;
		strong {
			font-weight: bold;
		}
	}
	&>div.replies {
		margin-left: 1em;
	}
	&>footer>a {
		font-size: 0.8em;
	}
}
/* Only for top-level messages */
board-board>section.messages>div.Message>section.message {
	background-color: var(--color-dark-green);
	color: white;
}

board-list:not(.admin) .admin {
	display: none;
}
board-list:not(.poster) .poster {
	display: none;
}
div.Message>footer>a[data-set="hidereplies"] {
	flex-grow: 1;
}
div.Message.hidereplies>footer>a>.hidereplies_hide {
	display: none;
}
div.Message:not(.hidereplies)>footer>a>.hidereplies_show {
	display: none;
}
div.Message.hidereplies>.replies {
	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;
	}
}