/* whatever monospace the reader already has. */
:root {
	color-scheme: light dark;
	--fg: #1c1c1a;
	--ground: #fbfbf9;
	--quiet: #64645f;
	--hair: #d9d9d3;
	--shade: #f0f0eb;
	--href: #0a4ea3;
	--visited: #5b3a8c;
	--added: #17692c;
	--removed: #a3191d;
	--hl: #fff1a8;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg: #deded8;
		--ground: #141413;
		--quiet: #9a9a92;
		--hair: #33332f;
		--shade: #1f1f1d;
		--href: #86b3f2;
		--visited: #b9a0e6;
		--added: #74c48a;
		--removed: #f08b84;
		--hl: #4a4220;
	}
}

html {
	font: 15px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
	-webkit-text-size-adjust: 100%;
	font-variant-ligatures: none;
	text-size-adjust: 100%;
}

body {
	max-width: 112ch;
	margin: 0 auto;
	padding: 1rem 1.5ch 4rem;
	background: var(--ground);
	color: var(--fg);
}

::selection { background: var(--hl); color: var(--fg); }

a { color: var(--href); text-underline-offset: 0.2em; }
a:visited { color: var(--visited); }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.top { margin-bottom: 1.5rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--hair); }
.top a { color: inherit; font-weight: bold; text-decoration: none; }

h1 { font-size: 1.2rem; margin: 0 0 0.3rem; }
h1 a, h1 a:visited { color: inherit; text-decoration: none; }

.proj p { margin: 0.15rem 0; color: var(--quiet); }
.proj .clone code { color: var(--fg); }
.proj nav { display: flex; gap: 2ch; margin: 0.9rem 0 1.4rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--hair); }
.proj nav a[aria-current] { color: inherit; font-weight: bold; text-decoration: none; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: normal; color: var(--quiet); border-bottom: 1px solid var(--hair); }
th, td { padding: 0.12rem 2ch 0.12rem 0; vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:hover { background: var(--shade); }
td time, td code { white-space: nowrap; }
.n { text-align: right; white-space: nowrap; }
.plus { color: var(--added); }
.minus { color: var(--removed); }

.tip { color: var(--quiet); }

.readme { max-width: 80ch; margin-top: 1.6rem; padding-top: 0.2rem; border-top: 1px solid var(--hair); }
.readme h1 { margin-top: 1rem; }
.readme h2, .readme h3 { font-size: 1rem; margin: 1.6rem 0 0.4rem; }
.readme pre, .readme :not(pre) > code { background: var(--shade); }
.readme pre { padding: 0.6rem 1ch; }

pre { margin: 0 0 1.4rem; overflow-x: auto; tab-size: 4; }

.path span { color: var(--quiet); margin-left: 1ch; }

.src a { color: var(--quiet); text-decoration: none; user-select: none; }
.src a:hover { color: var(--fg); }
.src a:target { background: var(--hl); color: var(--fg); }

.commitinfo { color: var(--quiet); }
.msg { white-space: pre-wrap; font-weight: bold; }
.stat { width: auto; margin-bottom: 1.4rem; }

.diff b { font-weight: bold; }
.diff ins { color: var(--added); text-decoration: none; }
.diff del { color: var(--removed); text-decoration: none; }
.hunk { color: var(--visited); }

.nothere main { color: var(--quiet); }

@media (max-width: 40em) {
	html { font-size: 13px; }
	.proj nav { gap: 1.5ch; }
	.log .n { display: none; }
}