/*
 * Copyright (c) 2026 Dick Olsson <hi@senzilla.io>
 *
 * Permission to use, copy, modify, and distribute this software for any
 * purpose with or without fee is hereby granted, provided that the above
 * copyright notice and this permission notice appear in all copies.
 *
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 */

:root {
	color-scheme: light dark;
	--bg: #bfbfbf;
	--fg: #000000;
	--muted: #444444;
	--link: #0000ee;
	--visited: #551a8b;
	--active: #ff0000;
	--shadow: #6f6f6f;
	--highlight: #ffffff;
	--term-bg: var(--highlight);
	--term-fg: var(--fg);
	--wm-border: #708090;
	--wm-title-bg: #22aa99;
	--wm-title-fg: #d9d9d9;
	--latin: "Times New Roman", Times;
	--mono: Courier, "Courier New", monospace;
	--wm-face: Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #26292c;
		--fg: #e8e8e8;
		--muted: #a0a0aa;
		--link: #8ab4f8;
		--visited: #c58af9;
		--active: #ff7b72;
		--shadow: #0e0f10;
		--highlight: #4a4f54;
		--term-bg: #1a1c1e;
		--term-fg: #c8c8c8;
	}
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* An element that names its language takes the face and the line
   height of that language, and its children inherit them. The html
   element names the language of the page. A rule in :where() has no
   weight, so the rule of an element wins: the code face, and the line
   height of a heading and of a pre block. No other rule sets a face or
   a line height. */

:where([lang]) {
	font-family: var(--latin), serif;
	line-height: 1.55;
}

/* Han text takes its stack after the Latin face, so Latin text keeps
   its face. Each tag of zh takes the simplified form, and the next rule
   gives the traditional form to the script Hant, and to the regions TW,
   HK and MO. A Han face has no italic, and the browser must not slant
   it. */

:where([lang]:lang(zh)) {
	font-family: var(--latin), "Songti SC", "Noto Serif CJK SC", SimSun, serif;
	font-synthesis-style: none;
	line-height: 1.8;
}

:where([lang]:lang(zh-Hant), [lang]:lang(zh-TW), [lang]:lang(zh-HK),
    [lang]:lang(zh-MO)) {
	font-family: var(--latin), "Songti TC", "Noto Serif CJK TC", PMingLiU, serif;
}

/* Selectors 4 matches a :lang() range by extended filtering, so zh-TW
   also matches zh-Hans-TW and zh-Latn-TW in WebKit and Firefox. The
   script Hans names the simplified form, so the next rule gives it
   back. The script Latn names Latin text, so the last rule gives it
   the Latin face and line height in each region. */

:where([lang]:lang(zh-Hans)) {
	font-family: var(--latin), "Songti SC", "Noto Serif CJK SC", SimSun, serif;
}

:where([lang]:lang(zh-Latn)) {
	font-family: var(--latin), serif;
	line-height: 1.55;
}

/* Han text marks its emphasis with dots below, not with an italic.
   mandoc(1) writes the Em macro of mdoc(7) as an i of the class Em.
   The script Latn names Latin text, so each filtering gives it the
   italic and no dots. */

em:lang(zh):not(:lang(zh-Latn)),
.Em:lang(zh):not(:lang(zh-Latn)) {
	font-style: normal;
	text-emphasis: dot;
	text-emphasis-position: under right;
}

/* mandoc(1) writes \fI of man(7) as a bare i, and pod2man(1) writes
   I<> as \fI. A bare i marks what the reader substitutes, so it keeps
   its italic and takes the dots. Han text in it stays upright, because
   the rule of zh above stops a synthetic italic. */

i:lang(zh):not(:lang(zh-Latn)) {
	text-emphasis: dot;
	text-emphasis-position: under right;
}

/* The bitmap fonts of X11 had no kerning and no ligatures. The
   contextual forms stay, because some scripts need them. */

body {
	background: var(--bg);
	color: var(--fg);
	font-kerning: none;
	font-size: 17px;
	font-variant-ligatures: no-common-ligatures;
	margin-block: 1.75em;
	margin-inline: 1.5em;
	max-width: 42em;
}

hr {
	border: 0;
	border-block-start: 1px solid var(--shadow);
	border-block-end: 1px solid var(--highlight);
	margin-block: 1.25em;
	margin-inline: 0;
}

/* X11 drew an underline straight through the descenders */

a:link,
a:visited {
	color: var(--link);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

/* Mosaic framed a linked image in the link color */

a img {
	border: 2px solid;
}

a:visited {
	color: var(--visited);
}

/* Netscape 1.x showed a pressed link in red, and Windows 3.1 drew
   the keyboard focus as a dotted box */

a:active {
	color: var(--active);
}

:focus-visible {
	outline: 1px dotted;
}

/* The chrome carries no class, so the selector names the element. The
   banner link starts the line, and the list of the languages ends it,
   on one baseline. A narrow viewport puts the list below the link. */

body > header {
	align-items: baseline;
	column-gap: 1em;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-block-end: 0.2em;
}

body > header > a {
	font-size: 2em;
	font-weight: bold;
}

/* The list of the languages and the nav list, each on one line */

body > header ul,
nav ul {
	font-size: 0.95em;
	list-style: none;
	margin: 0;
	padding: 0;
}

body > header li,
nav li {
	display: inline;
}

/* Each separator and each bracket is text, with one word space. The
   line break between two items of the markup gives the space before a
   separator. A space after a hex escape is part of the escape, so the
   escape \20 writes the space after the dot. */

body > header li + li::before {
	content: "\00b7\20";
}

/* The nav list in a pair of brackets, with a bar between two items */

nav ul::before {
	content: "[ ";
}

nav ul::after {
	content: " ]";
}

nav li + li::before {
	content: "| ";
}

/* The current link in the text color, with no underline and no bold */

a[aria-current="page"]:link,
a[aria-current="page"]:visited {
	color: var(--fg);
	font-weight: normal;
	text-decoration: none;
}

/* The rule of 1994 above the main part and above the footer */

main,
footer {
	border-block-start: 1px solid var(--shadow);
	box-shadow: inset 0 1px var(--highlight);
	margin-block-start: 1.25em;
	padding-block-start: 0.6em;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 1.2;
	margin-block: 1.5em 0.6em;
}

h1 {
	font-size: 1.75em;
}

/* The rule of a 1994 hr: a dark line over a light line */

h2 {
	border-block-start: 1px solid var(--shadow);
	box-shadow: inset 0 1px var(--highlight);
	font-size: 1.35em;
	padding-block-start: 0.6em;
}

h3 { font-size: 1.1em; }
h4 { font-size: 1em; }

p, li, dd, dt {
	margin-block: 0.5em;
}

dt { font-weight: bold; }
dd { margin-inline-start: 2em; }

table { border-collapse: collapse; }

code, pre, tt, kbd, samp, var {
	font-family: var(--mono);
	font-size: 0.92em;
}

/* An xterm in the default frame of twm(1), the window manager of
   X11R6: a slategrey border, and a teal title bar with the iconify
   dot, the title, the stipple and the resize corners. The light
   scheme shows the black on white of the default xterm. twm knows no
   rtl, so the title bar keeps the order of X11 on each page. A long
   line wraps at the edge, as in xterm, so the block never scrolls and
   the title bar stays in view. */

pre {
	background: var(--term-bg);
	border: 2px solid var(--wm-border);
	color: var(--term-fg);
	line-height: 1.4;
	overflow-wrap: anywhere;
	padding-block: calc(22px + 0.7em) 0.7em;
	padding-inline: 0.9em;
	position: relative;
	white-space: pre-wrap;
}

pre::before,
pre::after {
	border-block-end: 2px solid var(--wm-border);
	direction: ltr;
	inset-block-start: 0;
	inset-inline-start: 0;
	position: absolute;
}

/* The title, after the iconify button: a dot in a box with a border
   of 1px. The second content hides the title from a screen reader. */

pre::before {
	align-items: center;
	background:
	    radial-gradient(circle, var(--wm-title-fg) 4.5px, transparent 4.5px)
	    4px 4px / 12px 12px no-repeat,
	    linear-gradient(var(--wm-title-bg), var(--wm-title-bg))
	    4px 4px / 12px 12px no-repeat,
	    linear-gradient(var(--wm-title-fg), var(--wm-title-fg))
	    3px 3px / 14px 14px no-repeat,
	    var(--wm-title-bg);
	block-size: 20px;
	color: var(--wm-title-fg);
	content: "xterm";
	content: "xterm" / "";
	display: flex;
	font-family: var(--wm-face);
	font-size: 12px;
	font-weight: bold;
	padding-inline: 26px 8px;
	z-index: 1;
}

/* The bar under the title: the even stipple of twm, then the resize
   button, two nested corners in a box with a border of 1px */

pre::after {
	background:
	    linear-gradient(var(--wm-title-fg), var(--wm-title-fg))
	    right 11px top 4px / 1px 5px no-repeat,
	    linear-gradient(var(--wm-title-fg), var(--wm-title-fg))
	    right 11px top 8px / 5px 1px no-repeat,
	    linear-gradient(var(--wm-title-fg), var(--wm-title-fg))
	    right 7px top 4px / 1px 9px no-repeat,
	    linear-gradient(var(--wm-title-fg), var(--wm-title-fg))
	    right 7px top 12px / 9px 1px no-repeat,
	    linear-gradient(var(--wm-title-bg), var(--wm-title-bg))
	    right 4px top 4px / 12px 12px no-repeat,
	    linear-gradient(var(--wm-title-fg), var(--wm-title-fg))
	    right 3px top 3px / 14px 14px no-repeat,
	    conic-gradient(var(--wm-title-fg) 25%, var(--wm-title-bg) 0 50%,
	    var(--wm-title-fg) 0 75%, var(--wm-title-bg) 0)
	    0 0 / 2px 2px content-box,
	    linear-gradient(var(--wm-title-bg), var(--wm-title-bg)) padding-box;
	block-size: 16px;
	content: "";
	inset-inline-end: 0;
	padding-block: 2px;
	padding-inline-end: 26px;
}

pre code {
	font-size: 1em;
}

/* xterm shows a selection in reverse video */

pre::selection,
pre ::selection {
	background-color: var(--term-fg);
	color: var(--term-bg);
}

footer {
	color: var(--muted);
	font-size: 0.9em;
	font-style: italic;
}


/* Manual pages: mandoc(1) emits its own class names. A section
   heading takes no rule, and it sits flush with the banner. */

h2.Sh {
	border: 0;
	box-shadow: none;
	font-size: 1.2em;
	margin-block-start: 1.6em;
	margin-inline-start: calc(-3.5em / 1.2);
	padding: 0;
}

h3.Ss {
	font-size: 1.05em;
	margin-inline-start: calc(-1.75em / 1.05);
}

a.permalink:link,
a.permalink:visited {
	color: inherit;
	text-decoration: none;
}

.manual-text {
	margin-inline-start: 3.5em;
}

.manual-text > br:first-child {
	display: none;
}

table.Nm td {
	vertical-align: top;
}

table.Nm td:first-child {
	padding-inline-end: 0.4em;
	white-space: nowrap;
}

.Bd-indent {
	margin-inline-start: 2em;
}

.Nm, .Cm, .Fl, .Ic, .Fn, .Dv, .Er, .Ev {
	font-weight: bold;
}

.Ar, .Va, .Pa {
	font-family: var(--mono);
	font-style: italic;
}

.Em {
	font-style: italic;
}

@media (max-width: 40em) {
	.manual-text { margin-inline-start: 0; }
	h2.Sh, h3.Ss { margin-inline-start: 0; }
}