/* The site's menu strip, for the hosts whose pages this site does not generate:
   the documentation (htmldoc.php) and the blog (a Jekyll include). Only the nav, so
   that doc.css and the blog's own theme keep owning everything else.

   Every var() carries a literal fallback, which is what makes one file serve
   both: the documentation defines these tokens, dark mode included, and the
   blog defines none of them and gets the light palette. An undefined var() with
   no fallback would resolve to the property's initial value, not to the literal
   declaration above it. */

.sitenav {
	max-width: 68rem;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: #000;
	background: var(--hairline, #000);
}

/* Tabs are blocks first: a browser without flexbox stacks them, still legible. */
.sitenav a, .sitenav .current {
	flex: 1 1 8rem;
	display: block;
	line-height: 1.2;
	padding: .3rem .5rem;
	text-align: center;
	font-family: "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, "Trebuchet MS", sans-serif;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	background: #99c;
	background: var(--accent, #99c);
	color: #111;
	color: var(--ink, #111);
}

.sitenav a:hover { background: var(--chip, #dde); color: var(--ink, #111); }
.sitenav .current { background: #ccd; background: var(--panel, #ccd); }

@media (prefers-color-scheme: dark) {
	/* Only for a host that has no palette of its own; where one exists its own
	   dark values come through the var()s above. */
	.sitenav { background: var(--hairline, #171a2b); }
}