/* The game guide (guide.php): a menu on the left, the page on the right;
   on phones the menu comes after the page. Works with the old and the new look. */

.guide-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
}

.guide-menu {
	flex: 1 1 180px;
	max-width: 220px;
	font-size: 13px;
	line-height: 1.5;
	border-right: 1px solid #4a3b1e;
	padding-right: 16px;
}

.guide-page {
	flex: 999 1 420px;
	min-width: 0;
	line-height: 1.6;
}

.guide-menu-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 8px;
}

.content .guide-menu-title a {
	text-decoration: none;
}

.guide-menu h1,
.guide-menu h2 {
	font-size: 14px;
	margin: 14px 0 4px 0;
	color: #d9b55a;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.guide-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.guide-menu li {
	margin: 2px 0;
}

.content .guide-menu a {
	text-decoration: none;
}

.content .guide-menu a:hover {
	text-decoration: underline;
}

.guide-page h1 { font-size: 26px; margin: 0 0 14px 0; }
.guide-page h2 { font-size: 21px; margin: 24px 0 10px 0; }
.guide-page h3 { font-size: 18px; margin: 20px 0 8px 0; }
.guide-page h4,
.guide-page h5 { font-size: 16px; margin: 16px 0 6px 0; }

.guide-page h1,
.guide-page h2,
.guide-page h3,
.guide-page h4,
.guide-page h5 {
	color: #d9b55a;
}

.content .guide-page p {
	text-align: left;
	margin: 0 0 12px 0;
}

.guide-page ul,
.guide-page ol {
	margin: 0 0 12px 0;
	padding-left: 24px;
}

.guide-page li {
	margin: 3px 0;
}

.guide-table {
	border-collapse: collapse;
	margin: 0 0 14px 0;
	max-width: 100%;
}

.guide-table th,
.guide-table td {
	border: 1px solid #4a3b1e;
	padding: 4px 8px;
	text-align: left;
	vertical-align: top;
}

.guide-table th {
	background-color: #21170d;
	color: #d9b55a;
}

.guide-code {
	background-color: #0b0805;
	border: 1px solid #4a3b1e;
	border-radius: 6px;
	padding: 10px;
	overflow-x: auto;
	white-space: pre-wrap;
	font-size: 13px;
}

.guide-image {
	max-width: 100%;
	height: auto;
}

/* links to pages nobody has written yet */
.guide-missing {
	color: #8f8466;
	border-bottom: 1px dotted #8f8466;
	cursor: help;
}

@media (max-width: 820px) {
	.guide-layout {
		flex-direction: column-reverse;
	}

	/* the page as wide as the screen: a wide table scrolls in its own box */
	.guide-page {
		width: 100%;
		flex-basis: auto;
	}

	.guide-menu {
		max-width: none;
		width: 100%;
		border-right: 0;
		border-top: 1px solid #4a3b1e;
		padding: 12px 0 0 0;
		font-size: 15px;
	}

	.guide-menu ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2px 12px;
	}

	.guide-menu li a {
		display: block;
		padding: 6px 0;
	}
}

/* the new look: its fonts */
.ui-fantasy .guide-menu,
.ui-fantasy .guide-page {
	font-size: 17px;
}

.ui-fantasy .guide-menu-title,
.ui-fantasy .guide-menu h1,
.ui-fantasy .guide-menu h2 {
	font-family: var(--tk-title);
}

.ui-fantasy .guide-menu {
	font-size: 16px;
}

/* the units of every race (wiki:military, includes/guideMilitary.php) */
.guide-scroll {
	overflow-x: auto;
	margin: 0 0 10px 0;
}

.guide-scroll .guide-table {
	margin: 0;
}

.guide-units td:nth-child(n+3):nth-child(-n+4) {
	text-align: center;
}

.guide-units td:nth-child(5),
.guide-units td:nth-child(6) {
	white-space: nowrap;
}

.guide-page h3[id] {
	scroll-margin-top: 12px;
}

.guide-page .guide-unit-info {
	font-size: 0.9em;
	opacity: 0.9;
}

/* the quick reference (wiki:reference, includes/guideReference.php) */
.ref .good { color: #8fd18f; }
.ref .bad { color: #e08a7a; }

.ref-bar {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	padding: 8px 0;
	margin: 0 0 10px 0;
	background-color: #120d08;
	border-bottom: 1px solid #4a3b1e;
}

.content .ref-bar a {
	padding: 3px 10px;
	border: 1px solid #7a6331;
	border-radius: 14px;
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
}

.content .ref-bar a:hover {
	background-color: #2a1f12;
}

.ref-filter {
	flex: 1 1 160px;
	min-width: 0;
	padding: 4px 8px;
	background-color: #0b0805;
	color: #eadfc4;
	border: 1px solid #7a6331;
	border-radius: 6px;
	font-size: 14px;
}

.ref-section {
	scroll-margin-top: 56px;
}

.ref .ref-yours {
	background-color: rgba(217, 181, 90, 0.14);
}

.ref th.ref-yours {
	color: #fff2c4;
}

.ref-races td:nth-child(n+2),
.ref-races th:nth-child(n+2),
.ref-units td:nth-child(n+4):nth-child(-n+9) {
	text-align: center;
	white-space: nowrap;
}

.ref-sort thead th {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.ref-sort thead th.sorted[data-down="1"]::after { content: " ▼"; font-size: 10px; }
.ref-sort thead th.sorted[data-down="0"]::after { content: " ▲"; font-size: 10px; }

.ref-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.guide-page .ref-chips button {
	font-weight: normal;
	letter-spacing: 0;
	padding: 3px 12px;
	background: #1a130b;
	box-shadow: none;
	text-shadow: none;
	min-height: 0;
	color: #eadfc4;
	border: 1px solid #4a3b1e;
	border-radius: 14px;
	cursor: pointer;
	font: inherit;
	font-size: 13px;
}

.guide-page .ref-chips button.on {
	background: #d9b55a;
	color: #17110b;
	border-color: #d9b55a;
}

.ref-seasons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin: 0 0 14px 0;
}

.ref-season {
	padding: 8px 12px;
	border: 1px solid #4a3b1e;
	border-radius: 8px;
}

.ref-season.ref-yours {
	border-color: #d9b55a;
}

.guide-page .ref-season h3 {
	margin: 0 0 4px 0;
}

.ref-season ul {
	margin: 0;
	padding-left: 18px;
}

.ref-now {
	font-size: 12px;
	color: #d9b55a;
	font-weight: bold;
}

.content .ref-me {
	font-size: 14px;
}

.ref-race-cards {
	display: none;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin: 0 0 14px 0;
}

.ref-race-card {
	padding: 8px 12px;
	border: 1px solid #4a3b1e;
	border-radius: 8px;
}

.ref-race-card.ref-yours {
	border-color: #d9b55a;
}

.guide-page .ref-race-card h3 {
	margin: 0 0 4px 0;
}

.ref-race-card ul {
	margin: 0;
	padding-left: 18px;
	font-size: 14px;
}

@media (max-width: 700px) {
	.ref .guide-scroll:has(.ref-races) { display: none; }
	.ref-race-cards { display: grid; }
	.ref-bar { gap: 4px; }
	.content .ref-bar a { padding: 2px 8px; font-size: 12px; }
}

.guide-page .ref-chips button:hover {
	background: #2a1f12;
}

.guide-page .ref-chips button.on:hover {
	background: #e6c46c;
}

.ref-units td:nth-child(-n+3) {
	white-space: nowrap;
}

/* the guide's first page: the quick reference alone, the old guide a link at the end */
.guide-single {
	max-width: 1000px;
	margin: 0 auto;
}

.content .guide-old-link {
	margin-top: 24px;
	padding-top: 12px;
	border-top: 1px solid #4a3b1e;
}