/*
 * The manual, styled to match the Raily site and the app itself.
 *
 * The custom properties below are the ones website/enigon.com/resources/raily5.css defines, copied
 * because the two are published to different hosts. They should end up in one shared file -- until
 * they do, a colour changed there has to be changed here.
 */

:root {
	--default-background-color: #fff;
	--default-foreground-color: #000;
	--panel-background-color: #f5f5f5;
	--link-color: darkblue;
	--link-hover-color: blue;
	--separator-color: #ccc;
	--inactive-color: #666;
	--raily-red: #d20000;
	--paper: #f8f8e0;
	--page-measure: 760px;

	--tip-color: #00a67d;
	--note-color: #448aff;
	--warning-color: #ff9100;
	--important-color: #d20000;
}

@media (prefers-color-scheme: dark) {
	:root {
		--default-background-color: #3c3f41;
		--default-foreground-color: #bbb;
		--panel-background-color: #2a2a2a;
		--link-color: #7fb0ff;
		--link-hover-color: #a8caff;
		--separator-color: #555;
		--inactive-color: #999;
		--paper: #34372f;
	}
}

body.manual {
	margin: 0;
	font-family: sans-serif;
	line-height: 1.6;
	color: var(--default-foreground-color);
	background: var(--default-background-color);
}

body.manual a { color: var(--link-color); }
body.manual a:hover { color: var(--link-hover-color); }

/* --- the bar ------------------------------------------------------------ */

.manualbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 20px;
	border-bottom: 1px solid var(--separator-color);
	background: var(--panel-background-color);
	position: sticky;
	top: 0;
	z-index: 2;
}

.manualbar .brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: bold;
	text-decoration: none;
	color: var(--default-foreground-color);
}

/* The language selector, styled to match the one in the app's own menu bar and on the raily.ch/
   enigon.com pages (see website/enigon.com/resources/raily5.css, `details.languageselector`) —
   a bordered chip with the globe icon and the current language code, opening a dropdown below it.
   `site.json`'s `languageSelectorInHeader` routes it here instead of into the sidebar nav. */
.manualbar details.languageselector {
	position: relative;
	font-size: 0.9em;
}
.manualbar details.languageselector summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	border: 1px solid var(--separator-color);
	border-radius: 4px;
	color: var(--default-foreground-color);
	cursor: pointer;
	list-style: none;
	text-transform: uppercase;
}
.manualbar details.languageselector summary::-webkit-details-marker { display: none; }
.manualbar details.languageselector summary svg { width: 15px; height: 15px; }
.manualbar details.languageselector:not([open]) > ul { display: none; }
.manualbar details.languageselector ul {
	position: absolute;
	right: 0;
	z-index: 3;
	margin: 4px 0 0;
	padding: 4px 0;
	min-width: 9em;
	list-style: none;
	background: var(--default-background-color);
	border: 1px solid var(--separator-color);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.manualbar details.languageselector li { padding: 0; }
.manualbar details.languageselector li a {
	display: block;
	padding: 7px 14px;
	color: var(--default-foreground-color);
	text-decoration: none;
	white-space: nowrap;
}
.manualbar details.languageselector li a[href]:hover {
	background: var(--panel-background-color);
	color: var(--link-hover-color);
}
.manualbar details.languageselector li.current a { font-weight: bold; }
.manualbar details.languageselector li a.untranslated { color: var(--inactive-color); }

/* --- search -------------------------------------------------------------- */

.manualbar .search { position: relative; margin-left: auto; }

.manualbar .search input {
	width: 14em;
	padding: 4px 8px;
	border: 1px solid var(--separator-color);
	border-radius: 4px;
	background: var(--default-background-color);
	color: var(--default-foreground-color);
	font: inherit;
	font-size: 0.9em;
}

/* Absolute so the results hang over the page instead of pushing the bar taller as you type. */
.manualbar .search ul {
	position: absolute;
	right: 0;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	min-width: 20em;
	max-height: 60vh;
	overflow-y: auto;
	background: var(--default-background-color);
	border: 1px solid var(--separator-color);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.manualbar .search ul:empty { display: none; }
.manualbar .search li a { display: block; padding: 6px 10px; text-decoration: none; }
.manualbar .search li a:hover { background: var(--panel-background-color); }
.manualbar .search li.searchempty { padding: 6px 10px; color: var(--inactive-color); }

/* --- the two columns ---------------------------------------------------- */

.manuallayout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.manuallayout > nav {
	flex: 0 0 260px;
	position: sticky;
	top: 45px;
	max-height: calc(100vh - 45px);
	overflow-y: auto;
	padding: 20px 0;
}

.manuallayout main {
	flex: 1 1 auto;
	min-width: 0;
	max-width: var(--page-measure);
	padding: 20px 0 60px;
}

/* --- the chapter list --------------------------------------------------- */

/*
 * Chapters are headings, not links -- sitegen renders a label-only section as a <span> -- so the
 * list reads as one thing all the way down instead of mixing links and non-links.
 */
.manuallayout nav ul { list-style: none; margin: 0; padding: 0; }

.manuallayout nav .menu > ul > li { margin: 14px 0 4px; padding-left: 1em; }

/* The open chapter's pages, nested inside its own list item. */
.manuallayout nav .menu .submenu { margin: 4px 0 0; padding: 0; }

/* A chapter heading, whether it folds its pages away or stands alone. */
.manuallayout nav .menu > ul > li.section > span,
.manuallayout nav .menu > ul > li.section summary {
	display: block;
	font-weight: bold;
	font-size: 0.95em;
	letter-spacing: 0.02em;
	color: var(--inactive-color);
	cursor: pointer;
	list-style: none;
}

/* The default disclosure triangle, replaced by one that points the way it turns. */
.manuallayout nav .menu summary::-webkit-details-marker { display: none; }

.manuallayout nav .menu summary::before {
	content: '▸';
	display: inline-block;
	width: 1em;
	margin-left: -1em;
	color: var(--inactive-color);
	transition: transform 0.1s;
}

.manuallayout nav .menu details[open] > summary::before { transform: rotate(90deg); }

.manuallayout nav .menu > ul > li.current > span,
.manuallayout nav .menu > ul > li.current > a,
.manuallayout nav .menu > ul > li.current summary { color: var(--raily-red); }

.manuallayout nav .menu > ul > li.current summary::before { color: var(--raily-red); }

.manuallayout nav .menu a { text-decoration: none; }

/* The pages of the open chapter. */
.manuallayout nav .submenu { margin: 4px 0 0; }

.manuallayout nav .submenu li a {
	display: block;
	padding: 3px 0 3px 12px;
	border-left: 2px solid var(--separator-color);
	text-decoration: none;
}

.manuallayout nav .submenu li a:hover { border-left-color: var(--link-hover-color); }

.manuallayout nav .submenu li.current a {
	border-left-color: var(--raily-red);
	font-weight: bold;
}

/* A language this page does not exist in: reachable, but visibly not the same page. */
.untranslated { color: var(--inactive-color); font-style: italic; }

/* --- the page's own outline --------------------------------------------- */

.toc {
	flex: 0 0 200px;
	position: sticky;
	top: 45px;
	max-height: calc(100vh - 45px);
	overflow-y: auto;
	padding: 20px 0;
	font-size: 0.9em;
}

.toc .toctitle {
	font-weight: bold;
	color: var(--inactive-color);
	margin-bottom: 6px;
}

.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 3px 0; }
.toc li.level3 { padding-left: 12px; }
.toc a { text-decoration: none; }

/* Below this the two side columns stop fitting; the outline is the one to go, since the page it
   describes is right there. */
@media (max-width: 1150px) {
	.toc { display: none; }
}

/* --- content ------------------------------------------------------------ */

body.manual main h1 { font-size: 1.9em; margin: 0 0 0.6em; font-weight: normal; }
body.manual main h2 { font-size: 1.35em; margin: 1.8em 0 0.4em; font-weight: normal; }
body.manual main h3 { font-size: 1.1em; margin: 1.4em 0 0.3em; }

body.manual main img { max-width: 100%; height: auto; }

/* An image's caption: the italic line the manual writes on the line after the image, which lands in
   the same paragraph. Matched as "the em right after an img" -- an em anywhere else is emphasis. */
body.manual main p > img + em {
	display: block;
	margin-top: 0.3em;
	color: var(--inactive-color);
	font-size: 0.9em;
}

body.manual main table {
	border-collapse: collapse;
	margin: 1em 0;
	width: 100%;
}

body.manual main th, body.manual main td {
	border: 1px solid var(--separator-color);
	padding: 6px 10px;
	text-align: left;
	vertical-align: top;
}

body.manual main th { background: var(--panel-background-color); }

body.manual main kbd {
	display: inline-block;
	padding: 1px 5px;
	border: 1px solid var(--separator-color);
	border-bottom-width: 2px;
	border-radius: 4px;
	background: var(--panel-background-color);
	font-family: inherit;
	font-size: 0.9em;
}

body.manual main code {
	padding: 1px 4px;
	border-radius: 3px;
	background: var(--panel-background-color);
	font-size: 0.9em;
}

/* --- admonitions -------------------------------------------------------- */

/*
 * A left rule in the flavour's colour rather than a filled box: the manual puts several of these on
 * a page and a page of coloured blocks stops reading as prose with asides in it.
 */
.admonition {
	margin: 1.2em 0;
	padding: 0.6em 1em;
	border-left: 4px solid var(--separator-color);
	background: var(--panel-background-color);
	border-radius: 0 4px 4px 0;
}

.admonition > :first-child { margin-top: 0; }
.admonition > :last-child { margin-bottom: 0; }

.admonition-title { font-weight: bold; }

.admonition.tip { border-left-color: var(--tip-color); }
.admonition.note { border-left-color: var(--note-color); }
.admonition.warning { border-left-color: var(--warning-color); }
.admonition.important { border-left-color: var(--important-color); }

.admonition.tip .admonition-title { color: var(--tip-color); }
.admonition.note .admonition-title { color: var(--note-color); }
.admonition.warning .admonition-title { color: var(--warning-color); }
.admonition.important .admonition-title { color: var(--important-color); }

/* --- narrow screens ----------------------------------------------------- */

@media (max-width: 900px) {
	.manuallayout { display: block; }
	.manuallayout > nav {
		position: static;
		max-height: none;
		flex: none;
		border-bottom: 1px solid var(--separator-color);
	}
}

/* --- paper ---------------------------------------------------------------- */

@page { size: A4; margin: 18mm 18mm 20mm; }

@media print {
	/* .screen-only marks prose about the web page itself, like the search field, which paper lacks. */
	.manualbar, .manuallayout > nav, .toc, .screen-only { display: none; }
	.manuallayout { display: block; max-width: none; padding: 0; }
	body.manual main { max-width: none; padding: 0; }
	body.manual { font-size: 10.5pt; line-height: 1.45; }
	body.manual a { text-decoration: none; }

	body.manual main h1, body.manual main h2, body.manual main h3, body.manual main h4 { break-after: avoid; }
	body.manual main table, body.manual main pre, .admonition { break-inside: avoid; }
	/* An image and the caption under it share one paragraph; a screenshot taller than this would
	   push whole half-pages of white ahead of it. */
	body.manual main p:has(> img) { break-inside: avoid; }
	body.manual main img { max-height: 110mm; width: auto; }
}

/* --- the whole manual in one document, for print ------------------------ */

body.book .booktitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 230mm;
	text-align: center;
}

body.book .booktitle h1 { font-size: 2.6em; margin: 0.6em 0 0.2em; }
body.book .booktitle p { color: var(--inactive-color); }

body.book .bookcontents { break-before: page; }
body.book .bookcontents ol { list-style: none; padding-left: 0; }
body.book .bookcontents ol ol { padding-left: 1.5em; margin-bottom: 0.6em; }
body.book .bookcontents li.part > a { font-weight: bold; }

/* A part title stands alone on its page, as the divider in front of its chapters. */
body.book main h1.part {
	break-before: page;
	padding-top: 80mm;
	text-align: center;
	font-size: 2.2em;
}

body.book .chapter { break-before: page; }

/* --- the root language switch ------------------------------------------- */

body.langswitch { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

body.langswitch .picker {
	max-width: 24em;
	padding: 2em;
	text-align: center;
	border: 1px solid var(--separator-color);
	border-radius: 6px;
	background: var(--panel-background-color);
}

body.langswitch h1 { margin-top: 0; font-weight: normal; }

body.langswitch nav { margin-top: 1.5em; display: flex; gap: 1.5em; justify-content: center; }