/**
 * Guides on the website — the NerdSEQ Field Guide and any after it.
 *
 * The guide's HTML is written in its own project against a fixed set of
 * building blocks (its STYLE.md): .cover, .contents, .chapter, aside.try,
 * figure.screen and so on. print.css over there is how they look on paper;
 * this file is how the same blocks look on xor.eu. Loaded only on a page that
 * shows a guide (inc/guides.php).
 *
 * Every class the guide may use must be styled here. `npm run guide:import`
 * refuses a guide that uses a class this file has not been taught — add it
 * here, then to the import's list.
 */

/* ---------------------------------------------------------------- Symbols --
   ◀ ▶ ▲ ▼ are the module's arrow buttons and IBM Plex has none of them, nor
   → ✓ ① ★ ⚠ ♪. XOR Symbols (a renamed subset of DejaVu Sans, licence beside
   it) fills those code points only, as extra faces of the Plex family, so
   nothing else about the type changes. One face per weight, matching the
   theme's own faces exactly: Chrome picks a face by weight before it looks at
   unicode-range, so a symbol face declared as a weight *range* (600 900) lost
   to the theme's exact 600 and was never used — the arrows quietly came from
   whatever system font the visitor had. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../fonts/xor-symbols-400.woff2") format("woff2"); unicode-range: U+2190-21FF, U+2248, U+2460-2473, U+2500-257F, U+25A0-25FF, U+2605, U+266A, U+26A0, U+2713, U+2717; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/xor-symbols-400.woff2") format("woff2"); unicode-range: U+2190-21FF, U+2248, U+2460-2473, U+2500-257F, U+25A0-25FF, U+2605, U+266A, U+26A0, U+2713, U+2717; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("../fonts/xor-symbols-700.woff2") format("woff2"); unicode-range: U+2190-21FF, U+2248, U+2460-2473, U+2500-257F, U+25A0-25FF, U+2605, U+266A, U+26A0, U+2713, U+2717; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-display: swap; src: url("../fonts/xor-symbols-700.woff2") format("woff2"); unicode-range: U+2190-21FF, U+2248, U+2460-2473, U+2500-257F, U+25A0-25FF, U+2605, U+266A, U+26A0, U+2713, U+2717; }

/* --------------------------------------------------------------- The page --
   A page to read, so no motion: the scanlines and the rolling bar are off
   here, as in the shop. The vignette stays — static darkening, not flicker. */
body.xor-guide-page::before,
html:has(body.xor-guide-page)::before { display: none !important; }

.xor-guide {
	--g-gap: 1.1em;
	max-width: 860px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--wp--preset--color--contrast);
}
.xor-guide :where(p, ul, ol, dl, table, figure, aside, pre) { margin: 0 0 var(--g-gap); }
.xor-guide > * > :where(p, ul, ol, dl):not([class]) { max-width: 68ch; }
.xor-guide :where(h1, h2, h3, h4) { margin: 0; line-height: 1.2; }
.xor-guide :where([id]) { scroll-margin-top: 90px; }
/* The header wraps to two rows on a phone (~108px), so a chapter jumped to
   from the contents would land with its heading under it. */
@media (max-width: 781px) { .xor-guide :where([id]) { scroll-margin-top: 124px; } }
.xor-guide strong { color: #fff; font-weight: 600; }

/* Links inside the guide are green without the underline rule .xor-prose
   draws: a chapter is full of cross-references and the rules turn to noise. */
.xor-prose .xor-guide a:not(.wp-element-button) { border-bottom: 0; }
.xor-prose .xor-guide a:not(.wp-element-button):hover { text-decoration: underline; }

/* Buttons on the module, as printed on it. */
.xor-guide kbd {
	display: inline-block;
	font: 600 11.5px/1.6 var(--wp--preset--font-family--mono);
	letter-spacing: .03em;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--dim);
	border-bottom-width: 2px;
	border-radius: 3px;
	padding: 0 .45em;
	white-space: nowrap;
	vertical-align: .05em;
}
/* Something shown on the screen. */
.xor-guide code {
	font: 600 .93em/1 var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--green);
	background: var(--wp--preset--color--panel);
	padding: .12em .32em;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ Cover -- */

.xor-guide .cover .kicker {
	font-size: 11px;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
	margin-bottom: .6em;
}
.xor-guide .cover h1 {
	font-size: var(--wp--preset--font-size--display);
	letter-spacing: -.03em;
	line-height: 1;
	text-shadow: 0 0 7px rgba(51, 255, 102, .4);   /* .xor-glow */
}
.xor-guide .cover .subtitle {
	font-size: 22px;
	color: var(--wp--preset--color--muted);
	margin: .3em 0 1.2em;
}
.xor-guide .cover > p:not([class]) { font-size: 18px; line-height: 1.7; max-width: 62ch; }
.xor-guide .cover .version {
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--wp--preset--color--amber);
	margin-bottom: .3em;
}
.xor-guide .cover .credit { font-size: 13px; color: var(--wp--preset--color--muted); max-width: 68ch; }

/* The PDF downloads (added by inc/guides.php, not part of the guide file). */
.xor-guide__pdfs { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6em 0 0 !important; }
.xor-prose .xor-guide a.xor-guide__pdf {
	display: inline-flex;
	flex-direction: column;
	padding: .65rem 1.1rem;
	border: 1px solid var(--wp--preset--color--green-dim);
	color: var(--wp--preset--color--green);
	line-height: 1.4;
	text-decoration: none;
}
.xor-prose .xor-guide a.xor-guide__pdf:hover { background: var(--wp--preset--color--green); border-color: var(--wp--preset--color--green); color: #03110a; text-decoration: none; }
.xor-guide__pdf-label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.xor-guide__pdf-facts { font-size: 11.5px; opacity: .75; }

.xor-guide .facts {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin: 2.2em 0 0;
	max-width: none;
}
.xor-guide .facts li {
	border-top: 1px solid var(--wp--preset--color--green-dim);
	padding-top: .6em;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.xor-guide .facts b {
	display: block;
	font-size: 30px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

/* --------------------------------------------------------------- Contents -- */

.xor-guide .contents {
	margin: 2.6em 0 0;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base-2);
}
.xor-guide .contents h2 {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
	background: var(--wp--preset--color--panel);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 9px 14px;
}
.xor-guide .contents ol {
	list-style: none;
	margin: 0;
	padding: 12px 14px;
	columns: 2 260px;
	column-gap: 28px;
	max-width: none;
}
.xor-guide .contents li { break-inside: avoid; margin: 0 0 .25em; font-size: 14px; line-height: 1.6; }
.xor-prose .xor-guide .contents a { color: var(--wp--preset--color--contrast); }
.xor-prose .xor-guide .contents a:hover { color: var(--wp--preset--color--green); text-decoration: none; }
.xor-guide .contents .num { display: inline-block; width: 2.4em; color: var(--wp--preset--color--green); font-weight: 600; }
.xor-guide .contents .hint {
	margin: 0;
	padding: 9px 14px;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 13px;
	color: var(--wp--preset--color--amber);
}

/* --------------------------------------------------------------- Chapters -- */

.xor-guide .chapter {
	margin-top: var(--wp--preset--spacing--70, 5rem);
}
.xor-guide .chapter > h2 {
	font-size: var(--wp--preset--font-size--x-large);
	padding-bottom: .45em;
	border-bottom: 1px solid var(--wp--preset--color--green-dim);
	margin-bottom: .6em;
}
.xor-guide .chapter > h2 .num { color: var(--wp--preset--color--green); margin-right: .5em; }
.xor-guide .lede {
	font-size: 17px;
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	max-width: 62ch;
	margin-bottom: 1.4em;
}
.xor-guide .chapter h3 {
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
	margin: 2.2em 0 .6em;
}
.xor-guide__top { margin: 1.6em 0 0 !important; font-size: 12px; text-align: right; max-width: none !important; }
.xor-prose .xor-guide .xor-guide__top a { color: var(--wp--preset--color--muted); }

/* ------------------------------------------------------------------ Lists -- */

.xor-guide ul, .xor-guide ol { padding-left: 1.2em; }
.xor-guide li { margin-bottom: .35em; }
.xor-guide li::marker { color: var(--wp--preset--color--green-dim); }

/* ----------------------------------------------------------------- Tables -- */

.xor-guide table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	line-height: 1.55;
	display: block;          /* scrolls sideways on a phone instead of widening the page */
	overflow-x: auto;
}
.xor-guide table > :is(thead, tbody, caption) { display: revert; }
@supports (display: table) {
	@media (min-width: 700px) { .xor-guide table { display: table; } }
}
.xor-guide th, .xor-guide td {
	text-align: left;
	vertical-align: top;
	padding: 7px 14px 7px 0;
	border: 0;
	border-bottom: 1px solid rgba(21, 58, 34, .8);
}
.xor-guide thead th {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
	border-bottom: 1px solid var(--wp--preset--color--green-dim);
}
.xor-guide tbody th { color: #fff; font-weight: 600; white-space: nowrap; }
.xor-guide caption { caption-side: bottom; text-align: left; font-size: 12.5px; color: var(--wp--preset--color--muted); padding-top: .5em; }

/* ------------------------------------------------------------------ Notes -- */

.xor-guide aside {
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--green);
	background: var(--wp--preset--color--base-2);
	padding: 14px 18px;
	margin: 1.6em 0;
	font-size: 14px;
	line-height: 1.75;
}
.xor-guide aside::before {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
	margin-bottom: .6em;
}
.xor-guide aside > h4 { font-size: 15px; color: #fff; margin: -.2em 0 .5em; }
.xor-guide aside > :last-child { margin-bottom: 0; }
.xor-guide aside > p { max-width: none; }

.xor-guide aside.try::before      { content: "▶  Try this"; }
.xor-guide aside.mistake          { border-left-color: var(--wp--preset--color--amber); }
.xor-guide aside.mistake::before  { content: "⚠  Common mistake"; color: var(--wp--preset--color--amber); }
.xor-guide aside.practice         { background: transparent; border-left-color: var(--wp--preset--color--green-dim); }
.xor-guide aside.practice::before { content: "♪  In practice"; color: var(--wp--preset--color--muted); }

.xor-guide ol.steps { list-style: none; counter-reset: step; padding-left: 2em; }
.xor-guide ol.steps > li { counter-increment: step; position: relative; }
.xor-guide ol.steps > li::before {
	content: counter(step);
	position: absolute;
	left: -2em;
	top: .3em;
	width: 1.45em;
	height: 1.45em;
	border: 1px solid var(--wp--preset--color--green-dim);
	border-radius: 50%;
	color: var(--wp--preset--color--green);
	font-size: 11px;
	line-height: 1.35em;
	text-align: center;
	font-weight: 600;
}
.xor-guide aside.mistake ol.steps > li::before { color: var(--wp--preset--color--amber); border-color: var(--wp--preset--color--amber); }

/* ------------------------------------------------------------------ Chain -- */

.xor-guide ol.chain {
	list-style: none;
	padding: 0;
	display: flex;
	gap: 26px;
	margin: 1.6em 0;
	max-width: none;
}
.xor-guide ol.chain > li {
	flex: 1 1 0;
	position: relative;
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-top: 2px solid var(--wp--preset--color--green);
	background: var(--wp--preset--color--base-2);
	padding: 10px 12px;
	text-align: center;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}
.xor-guide ol.chain > li + li::before {
	content: "▶";
	position: absolute;
	left: -19px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 11px;
	color: var(--wp--preset--color--green);
}
.xor-guide ol.chain > li > b {
	display: block;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin-bottom: .3em;
}

/* ------------------------------------------------------------------ Cards -- */

.xor-guide .cards {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 1.2em 0 1.6em;
	max-width: none;
}
.xor-guide .cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xor-guide .cards > li {
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	background: linear-gradient(170deg, var(--wp--preset--color--panel), var(--wp--preset--color--base-2));
	padding: 12px 14px;
	font-size: 13.5px;
	line-height: 1.6;
}
.xor-guide .cards > li > h4 {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber);   /* .xor-card__kicker */
	margin-bottom: .5em;
}
.xor-guide .cards > li > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- Missions -- */

.xor-guide ol.missions {
	list-style: none;
	padding: 0;
	counter-reset: mission;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	max-width: none;
}
.xor-guide ol.missions > li {
	counter-increment: mission;
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-top: 2px solid var(--wp--preset--color--green);
	background: var(--wp--preset--color--base-2);
	padding: 12px 14px;
	font-size: 13.5px;
	line-height: 1.6;
}
.xor-guide ol.missions > li > h4 {
	display: flex;
	gap: 8px;
	align-items: baseline;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: .5em;
}
.xor-guide ol.missions > li > h4::before { content: "□ " counter(mission); color: var(--wp--preset--color--green); white-space: nowrap; }
.xor-guide ol.missions .time { margin-left: auto; color: var(--wp--preset--color--muted); font-weight: 400; white-space: nowrap; }
.xor-guide ol.missions .result { color: var(--wp--preset--color--green); margin: .5em 0 0; }
.xor-guide ol.missions .result::before { content: "✓ "; }
.xor-guide ol.missions > li > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Screens --
   The module's display, as text. Already the site's own look — phosphor on
   black — so this is the one block that barely changes from the PDF. */

.xor-guide figure.screen { margin: 1.4em 0; max-width: 100%; }
.xor-guide figure.screen pre {
	margin: 0;
	background: #000;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
	font: 600 13px/1.75 var(--wp--preset--font-family--mono);
	padding: 12px 16px;
	white-space: pre;
	overflow-x: auto;
	box-shadow: 0 0 42px -22px rgba(51, 255, 102, .35);
}
.xor-guide figure.screen .hd {
	display: inline-block;
	min-width: 100%;
	color: var(--wp--preset--color--green);
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin-bottom: 2px;
	text-shadow: 0 0 6px rgba(51, 255, 102, .35);
}
.xor-guide figure.screen .rn { color: var(--wp--preset--color--dim); }
.xor-guide figure.screen mark { background: none; color: var(--wp--preset--color--amber); }
.xor-guide figure.screen .c  { color: var(--wp--preset--color--muted); font-weight: 400; }
.xor-guide figcaption { font-size: 12.5px; line-height: 1.6; color: var(--wp--preset--color--muted); margin-top: .5em; }

.xor-guide .side { display: flex; gap: 22px; align-items: flex-start; margin: 1.4em 0; }
.xor-guide .side > figure { flex: 0 0 auto; margin: 0; max-width: 58%; }
.xor-guide .side > :not(figure) { flex: 1 1 0; margin: 0; font-size: 14px; line-height: 1.7; }

.xor-guide dl > div { margin: 0 0 .55em; }
.xor-guide dt { display: inline; font-weight: 700; color: var(--wp--preset--color--green); }
.xor-guide dt::after { content: "  "; white-space: pre; }
.xor-guide dd { display: inline; margin: 0; }

/* ------------------------------------------------------------ Small print -- */

.xor-guide .small { font-size: 12.5px; color: var(--wp--preset--color--muted); }
.xor-guide hr { border: 0; border-top: 1px solid var(--wp--preset--color--line); margin: 2em 0; }

/* ----------------------------------------------------------------- Narrow -- */

@media (max-width: 700px) {
	.xor-guide { font-size: 14.5px; }
	.xor-guide ol.chain { flex-direction: column; gap: 22px; }
	.xor-guide ol.chain > li + li::before { content: "▼"; left: 50%; top: -17px; transform: translateX(-50%); }
	.xor-guide .cards,
	.xor-guide .cards.three,
	.xor-guide ol.missions { grid-template-columns: minmax(0, 1fr); }
	.xor-guide .side { flex-direction: column; }
	.xor-guide .side > figure { max-width: 100%; }
	.xor-guide figure.screen pre { font-size: 12px; padding: 10px 12px; }
	.xor-guide .facts b { font-size: 24px; }
}