/**
 * The NerdSEQ manual, fitted into the site (inc/manuals.php).
 *
 * manual.css is the manual's own stylesheet, generated and scoped; this file
 * is the hand-written part: what changes because the manual sits inside a
 * page with a sticky header and a footer instead of filling a browser window
 * on its own. Loaded after manual.css, only on the manual page.
 */

/* A page to read, so no motion: scanlines and rolling bar off, as on the
   guides and in the shop. The vignette stays. */
body.xor-manual-page::before,
html:has(body.xor-manual-page)::before { display: none !important; }

/* Edge to edge: the manual has its own contents column and measure. */
.xor-manual-page main > .entry-content,
.xor-manual-page .wp-block-post-content { max-width: none; margin: 0; padding: 0; }
body.xor-manual-page .wp-site-blocks > main { margin-block-start: 0; }
.xor-manual { position: relative; font-family: var(--font-body); text-align: left; }
.xor-manual :where(h1, h2, h3, h4) { text-transform: none; }

/* Under the sticky header, not behind it. --xor-manual-top is the header's
   height, measured by manual.js; 74px until it has run. */
.xor-manual .toc {
	top: var(--xor-manual-top, 74px);
	height: calc(100vh - var(--xor-manual-top, 74px));
}
.xor-manual :where([id]) { scroll-margin-top: calc(var(--xor-manual-top, 74px) + 16px); }
@media screen {
	.xor-manual .topic { top: var(--xor-manual-top, 74px); z-index: 30; }
}
@media screen and (max-width: 980px) {
	.xor-manual .topic { bottom: auto; }
}
/* The cover filled a window of its own; here a header stands above it. */
.xor-manual .cover { min-height: calc(92vh - var(--xor-manual-top, 74px)); }


/* ---- the bar: languages, PDFs, theme ---- */
.xor-manual-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.4rem;
	padding: .55rem max(1rem, 2vw);
	background: #000;
	border-bottom: 1px solid #1f3828;
	font: 12px/1.5 var(--font-mono);
	color: #d3e9d8;
}
.xor-manual-bar__title { color: #fff; font-weight: 700; letter-spacing: .04em; }
.xor-manual-bar__langs { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: 0; padding: 0; list-style: none; }
.xor-manual-bar__langs a { color: #77a083; text-decoration: none; }
.xor-manual-bar__langs a:hover { color: #33ff66; }
.xor-manual-bar__langs [aria-current] { color: #33ff66; border-bottom: 1px solid #33ff66; }
.xor-manual-bar__pdfs { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.xor-manual-bar__pdf { color: #33ff66; text-decoration: none; white-space: nowrap; }
.xor-manual-bar__pdf:hover { text-decoration: underline; }
.xor-manual-bar__pdf span { color: #77a083; }
.xor-manual-bar__theme {
	margin-left: auto;
	font: inherit;
	color: #fff;
	background: none;
	border: 1px solid #3a5a44;
	padding: .15em .7em;
	cursor: pointer;
}
.xor-manual-bar__theme:hover { border-color: #33ff66; }
.xor-manual-bar :focus-visible { outline: 2px solid #33ff66; outline-offset: 2px; }
@media (max-width: 640px) {
	.xor-manual-bar__theme { margin-left: 0; }
}

/* ---- phones ----
   Three things in the manual are wider than a phone and pushed the whole
   page sideways: the mapping-row pictures (eight fixed screen cells), wide
   tables, cross-references that may not wrap and long URLs. Each
   scrolls inside itself instead, or wraps. (Worth fixing in the manual
   project too — the standalone HTML has the same overflow.) */
@media screen and (max-width: 640px) {
	.xor-manual .maprow { overflow-x: auto; max-width: 100%; }
	.xor-manual .maprow .c { font-size: .82rem; letter-spacing: .06em; }
	.xor-manual .chapter table { display: block; overflow-x: auto; max-width: 100%; }
	.xor-manual a.xref { white-space: normal; }
	.xor-manual .chapter :is(p, li, td) { overflow-wrap: anywhere; }
}

/* The light theme is for reading on white: the site's vignette (body::after,
   a static darkening of the corners) reads as grime on paper, so it goes. */
body.xor-manual-page:has(.xor-manual.is-light)::after { display: none; }

/* ---- printing ----
   The page is 276 screens of dark manual inside the site's header and
   footer; the light PDF is the print version. A printer gets one line that
   says so, with the address, and nothing else. */
.xor-manual-print { display: none; }
@media print {
	body.xor-manual-page { background: #fff !important; }
	body.xor-manual-page::before, body.xor-manual-page::after,
	html:has(body.xor-manual-page)::before { display: none !important; }
	body.xor-manual-page .wp-site-blocks > :not(main),
	.xor-manual > :not(.xor-manual-print) { display: none !important; }
	.xor-manual { background: #fff; }
	.xor-manual .xor-manual-print { display: block; margin: 0; padding: 0; color: #000; font: 12pt/1.5 "IBM Plex Sans", sans-serif; }
	.xor-manual .xor-manual-print a { color: #000; word-break: break-all; }
}