/* Coding problems section (coding_*.html templates). Plain CSS on top of
   style.min.css, so no Sass rebuild is needed. Colours are muted slate tones
   that sit with the theme's dark-slate navbar. */

/* Category tags */
.tag.coding-topic {
	background-color: #edf1f5;
	color: #3d5368;
	border: 1px solid #dbe3ea;
}

a.tag.coding-topic:hover {
	background-color: #e1e8ef;
	color: #263646;
	text-decoration: none;
}

/* Difficulty tags */
.tag.coding-easy {
	background-color: #e8f3ec;
	color: #2e6b47;
}

.tag.coding-medium {
	background-color: #f8f0de;
	color: #8a5d12;
}

.tag.coding-hard {
	background-color: #f8e8e8;
	color: #a23d3d;
}

/* The theme gives every table in a post a 25px margin, which overflows the
   full-width table on the home page and adds a horizontal scrollbar. */
.message-body table.coding-table {
	margin: 0 !important;
}

/* The theme shows numbered lists with bullets; keep the numbers on problem pages. */
.message-body ol {
	list-style-type: decimal;
}

/* Figures drawn as inline SVG in a problem's Markdown; see problem 105's tree. */
.coding-figure svg {
	display: block;
	margin: 0 auto;
	max-width: 100%;
}

.coding-tree .edge {
	stroke: #3d5368;
	stroke-width: 2;
}

.coding-tree .node circle {
	fill: #fff;
	stroke: #3d5368;
	stroke-width: 2;
}

.coding-tree .node text {
	fill: #263646;
	font-size: 17px;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: central;
}

/* Letter or number grids; see problem 79. Add "hl" to a cell to highlight it. */
.coding-grid .cell rect {
	fill: #fff;
	stroke: #263646;
	stroke-width: 2;
}

.coding-grid .cell.hl rect {
	fill: #e5a63c;
}

.coding-grid .cell text {
	fill: #263646;
	font-size: 26px;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: central;
}

/* Larger number boards with colored groups, empty cells and drop arrows; see problem 723.
   Add "blue", "orange" or "green" to a cell to color it, or "empty" for an empty cell. */
.coding-board .cell rect {
	fill: #fff;
	stroke: #c5cdd6;
	stroke-width: 1;
}

.coding-board .cell.empty rect {
	fill: #eef2f6;
}

.coding-board .cell.blue rect {
	fill: #d3dcf0;
}

.coding-board .cell.orange rect {
	fill: #fadccb;
}

.coding-board .cell.green rect {
	fill: #cfe5c4;
}

.coding-board .cell text {
	fill: #263646;
	font-size: 15px;
	text-anchor: middle;
	dominant-baseline: central;
}

.coding-board .cell.empty text {
	fill: #8494a5;
}

.coding-board .border,
.coding-board .group {
	fill: none;
	stroke: #263646;
	stroke-width: 2;
	stroke-linecap: square;
}

.coding-board .arrow {
	fill: #e8706a;
	stroke: #b03a34;
	stroke-width: 1;
	stroke-linejoin: round;
}

.coding-board .index,
.coding-board .label {
	fill: #263646;
	font-size: 15px;
	text-anchor: middle;
}

.coding-board .index {
	font-weight: 700;
	dominant-baseline: central;
}

/* Tilings drawn as tiles with a dot in every square; see problem 790.
   Add "blue", "orange", "green" or "purple" to a tile to color it. */
.coding-tiles .tile .shape {
	fill: #fff;
	stroke: #263646;
	stroke-width: 2;
	stroke-linejoin: round;
}

.coding-tiles .tile.blue .shape {
	fill: #d3dcf0;
}

.coding-tiles .tile.orange .shape {
	fill: #fadccb;
}

.coding-tiles .tile.green .shape {
	fill: #cfe5c4;
}

.coding-tiles .tile.purple .shape {
	fill: #e2d8ec;
}

.coding-tiles .tile .seam {
	fill: none;
	stroke: #263646;
	stroke-width: 1.5;
}

.coding-tiles .tile .dot {
	fill: #1a1a1a;
}

.coding-tiles .label {
	fill: #263646;
	font-size: 17px;
	font-weight: 700;
	text-anchor: middle;
}

/* Sidebar listing every problem on problem pages */
.coding-sidebar .menu-label a {
	color: inherit;
}

.coding-sidebar .menu-list a {
	color: #3d5368;
	font-size: 0.9rem;
	border-radius: 4px;
}

.coding-sidebar .menu-list a:hover {
	background-color: #f2f5f8;
	color: #263646;
}

.coding-sidebar .menu-list a.is-active {
	background-color: #e1e8ef;
	color: #263646;
	font-weight: 600;
}

/* Tablet and up: sidebar on the left, sticky, scrolling on its own.
   On mobile it stacks below the problem instead. */
@media screen and (min-width: 769px) {
	/* Flex items default to min-width: auto, so a long line in a code block
	   would widen the problem column past the screen. Let it shrink; the
	   code block then scrolls on its own. */
	.coding-layout > .column {
		min-width: 0;
	}

	.coding-layout .coding-sidebar {
		order: -1;
	}

	.coding-sidebar .menu {
		position: sticky;
		top: 1.5rem;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
	}
}