/* Oregami.
 *
 * One stylesheet, no framework, no script. Light and dark are the reader's
 * setting and not the forge's opinion: every colour is a custom property and
 * the dark set is applied under prefers-color-scheme, so nothing has to be
 * toggled and nothing flashes.
 */

:root {
	--ink:			#1b1c1e;
	--ink-quiet:	#5c6066;
	--paper:		#ffffff;
	--paper-raised:	#f6f7f8;
	--rule:			#dfe2e5;
	--link:			#1c5d99;
	--accent:		#8a5a2b;
	--verified:		#2f7a3f;
	--unknown:		#9a6b13;
	--bare:			#767b81;
	--flag:			#8a3b2b;
	--code:			ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
	--body:			system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ink:			#e6e8ea;
		--ink-quiet:	#9aa0a6;
		--paper:		#15171a;
		--paper-raised:	#1d2024;
		--rule:			#2d3238;
		--link:			#7fb3e0;
		--accent:		#d3a06a;
		--verified:		#6cc286;
		--unknown:		#d6ab52;
		--bare:			#8b9199;
		--flag:			#e08b78;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin:				0;
	background:			var(--paper);
	color:				var(--ink);
	font-family:		var(--body);
	font-size:			16px;
	line-height:		1.55;
	-webkit-text-size-adjust: 100%;
}

a {
	color:				var(--link);
	text-decoration:	none;
}

a:hover {
	text-decoration:	underline;
}


/* The masthead, and the wordmark that lives in it. */

.masthead {
	border-bottom:		1px solid var(--rule);
	background:			var(--paper-raised);
}

.brand {
	display:			block;
	max-width:			62rem;
	margin:				0 auto;
	padding:			1.1rem 1.25rem 0.9rem;
}

.brand img {
	display:			block;
	height:				2.1rem;
	width:				auto;
	max-width:			100%;
}

.brand .on-dark		{ display: none; }
.brand .on-light	{ display: block; }

@media (prefers-color-scheme: dark) {
	.brand .on-dark		{ display: block; }
	.brand .on-light	{ display: none; }
}

.repo-bar {
	max-width:			62rem;
	margin:				0 auto;
	padding:			0 1.25rem;
	display:			flex;
	flex-wrap:			wrap;
	align-items:		baseline;
	gap:				0 1.25rem;
}

.repo-name {
	font-family:		var(--code);
	font-size:			1.05rem;
	color:				var(--ink);
}

.tabs {
	display:			flex;
	flex-wrap:			wrap;
	gap:				0 1rem;
}

.tabs a {
	display:			block;
	padding:			0.45rem 0 0.5rem;
	border-bottom:		2px solid transparent;
	color:				var(--ink-quiet);
	font-size:			0.94rem;
}

.tabs a.here {
	color:				var(--ink);
	border-bottom-color: var(--accent);
}


/* The body of a page. */

main {
	max-width:			62rem;
	margin:				0 auto;
	padding:			1.6rem 1.25rem 3rem;
}

h1 {
	font-size:			1.5rem;
	font-weight:		600;
	margin:				0 0 0.2rem;
}

h2 {
	font-size:			1.1rem;
	font-weight:		600;
	margin:				2rem 0 0.4rem;
	padding-bottom:		0.25rem;
	border-bottom:		1px solid var(--rule);
}

h2.mark, h2.unmarked {
	font-family:		var(--code);
	border-bottom-color: var(--accent);
}

h2.unmarked {
	font-family:		var(--body);
	font-style:			italic;
	color:				var(--ink-quiet);
}

h2.flagged {
	font-family:		var(--code);
	font-weight:		500;
}

p {
	margin:				0.5rem 0;
}

.tagline {
	color:				var(--ink-quiet);
	margin:				0 0 1.5rem;
}

.under, .facts, .aside, .nothing, .trail, .actions {
	color:				var(--ink-quiet);
	font-size:			0.92rem;
}

.aside {
	margin-top:			1.2rem;
}

.nothing {
	padding:			1rem 1.1rem;
	background:			var(--paper-raised);
	border:				1px solid var(--rule);
	border-radius:		4px;
}

.fault {
	color:				var(--flag);
	font-size:			0.92rem;
}

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

.trail {
	font-family:		var(--code);
	margin-bottom:		1rem;
}

.trail .sep {
	padding:			0 0.35rem;
	color:				var(--ink-quiet);
}

.actions {
	margin:				0.8rem 0 1.2rem;
}


/* The repository list. */

.repos {
	list-style:			none;
	margin:				0;
	padding:			0;
}

.repo {
	padding:			1rem 0;
	border-top:			1px solid var(--rule);
}

.repo .name {
	font-family:		var(--code);
	font-size:			1.1rem;
}

.repo .about {
	margin:				0.2rem 0 0.35rem;
}


/* Tables. Wide ones scroll inside themselves rather than pushing the page. */

.scroll {
	overflow-x:			auto;
	margin:				0.6rem 0 1rem;
}

table {
	width:				100%;
	border-collapse:	collapse;
	font-size:			0.94rem;
}

th {
	text-align:			left;
	font-weight:		600;
	font-size:			0.85rem;
	text-transform:		uppercase;
	letter-spacing:		0.03em;
	color:				var(--ink-quiet);
	border-bottom:		1px solid var(--rule);
	padding:			0.3rem 0.7rem 0.3rem 0;
	white-space:		nowrap;
}

td {
	border-bottom:		1px solid var(--rule);
	padding:			0.35rem 0.7rem 0.35rem 0;
	vertical-align:		top;
}

/* The last column takes the slack, so the ones before it sit at the width of
 * what they hold rather than being spread evenly across the page. */
th:last-child, td:last-child {
	width:				100%;
	padding-right:		0;
}

.listing td:first-child, .runs td:nth-child(3), .log td:nth-child(2),
.marks td:nth-child(3), .clashes td {
	font-family:		var(--code);
}

.listing .dir::after {
	content:			"";
}

.listing td:nth-child(2), .runs td:first-child {
	white-space:		nowrap;
	color:				var(--ink-quiet);
}

.op {
	font-family:		var(--code);
	color:				var(--ink-quiet);
}

/* A replica identifier is minted at random and is long; wrapping it in the
 * middle turns one name into what reads as two. */
.who {
	white-space:		nowrap;
}


/* Provenance marks. */

.prov {
	font-family:		var(--code);
	font-weight:		700;
	cursor:				help;
}

.prov-verified	{ color: var(--verified); }
.prov-unknown	{ color: var(--unknown); }
.prov-bare		{ color: var(--bare); }


/* A file's contents, as numbered lines. */

table.code {
	border:				1px solid var(--rule);
	border-radius:		4px;
	font-family:		var(--code);
	font-size:			0.88rem;
	line-height:		1.45;
	margin:				0.8rem 0 1.4rem;
	width:				100%;
	border-collapse:	collapse;
}

table.code td {
	border:				none;
	padding:			0 0.8rem;
}

table.code .ln {
	width:				1%;
	text-align:			right;
	user-select:		none;
	background:			var(--paper-raised);
	border-right:		1px solid var(--rule);
}

table.code .ln a {
	color:				var(--ink-quiet);
}

table.code .line {
	white-space:		pre-wrap;
	word-break:			break-word;
}

table.code .line.empty {
	color:				var(--ink-quiet);
	font-style:			italic;
}

table.code tr:target {
	background:			var(--paper-raised);
}

code {
	font-family:		var(--code);
	font-size:			0.88rem;
	word-break:			break-all;
}


/* Flags, and notes. */

.flags, .notes {
	list-style:			none;
	margin:				0.4rem 0 1rem;
	padding:			0;
}

/* The word and the sentence are two columns, so a sentence that wraps stays in
 * its own column instead of running back under the word. */
.flags li {
	display:			flex;
	gap:				0.6rem;
	padding:			0.3rem 0;
	border-bottom:		1px solid var(--rule);
	font-size:			0.94rem;
}

.flag-word {
	flex:				0 0 6rem;
	font-family:		var(--code);
	color:				var(--flag);
}

.notes li.note, .notes > li {
	padding:			0.8rem 0;
	border-bottom:		1px solid var(--rule);
}

.note-text {
	white-space:		pre-wrap;
	margin:				0 0 0.3rem;
}

.note-where {
	list-style:			none;
	margin:				0.2rem 0 0;
	padding:			0;
	font-size:			0.9rem;
}

.note-where.dead {
	color:				var(--ink-quiet);
	font-size:			0.9rem;
}


/* Proposals.
 *
 * The state colours are aliases of the provenance palette rather than a second
 * set of their own. A custom property that points at another follows it into
 * dark, so the two sets cannot drift apart the way two sets of literals would.
 * Declined is the quiet grey and not a red: it is an answer, not a fault.
 */

:root {
	--state-open:		var(--accent);
	--state-accepted:	var(--unknown);
	--state-declined:	var(--bare);
	--state-done:		var(--verified);
}

.state {
	font-family:		var(--code);
	font-size:			0.85rem;
	white-space:		nowrap;
}

.state-open		{ color: var(--state-open); }
.state-accepted	{ color: var(--state-accepted); }
.state-declined	{ color: var(--state-declined); }
.state-done		{ color: var(--state-done); }

.proposals td:nth-child(2) {
	font-family:		var(--code);
	color:				var(--ink-quiet);
}

/* The slack goes to the title, not to the last column. Every other table here
 * ends with the column holding the content; this one ends with a count, and
 * leaving the general rule to it squeezes the titles to one word a line. */
.proposals th:nth-child(3), .proposals td:nth-child(3) {
	width:				100%;
}

.proposals th:last-child, .proposals td:last-child {
	width:				auto;
	white-space:		nowrap;
}

/* What somebody typed, drawn as they typed it. There is no markup in a proposal
 * and no renderer for one: the line breaks are honoured and nothing else is
 * interpreted, which is the same posture the note view takes. */
.said {
	white-space:		pre-wrap;
	margin:				0.6rem 0 1.2rem;
	padding:			0.7rem 0.9rem;
	background:			var(--paper-raised);
	border-left:		3px solid var(--rule);
	border-radius:		2px;
}

.replies {
	list-style:			none;
	margin:				0.4rem 0 1.4rem;
	padding:			0;
}

.replies .reply {
	padding-top:		0.4rem;
	border-top:			1px solid var(--rule);
}

.replies .reply .facts {
	margin:				0;
}

.replies .reply .said {
	margin:				0.3rem 0 0.9rem;
}


/* The forms. The only place this forge takes anything from a reader.
 *
 * Every control is given its colours explicitly. A browser's own control colours
 * follow the operating system's setting rather than the page's, so a field left
 * to the default is the one element that reads white on white when a reader has
 * asked for light and the system has not.
 */

form.write {
	margin:				1.6rem 0 0;
	padding:			1rem 0 0;
	border-top:			1px solid var(--rule);
	max-width:			44rem;
}

form.write h2 {
	margin-top:			0;
}

form.write p {
	margin:				0 0 0.8rem;
}

form.write label {
	display:			block;
	margin-bottom:		0.25rem;
	font-size:			0.85rem;
	text-transform:		uppercase;
	letter-spacing:		0.03em;
	color:				var(--ink-quiet);
}

form.write input,
form.write textarea,
form.write select {
	width:				100%;
	font-family:		var(--body);
	font-size:			1rem;
	color:				var(--ink);
	background:			var(--paper-raised);
	border:				1px solid var(--rule);
	border-radius:		3px;
	padding:			0.45rem 0.6rem;
}

form.write textarea {
	resize:				vertical;
	line-height:		1.5;
}

form.write input:focus,
form.write textarea:focus,
form.write select:focus {
	outline:			2px solid var(--link);
	outline-offset:		1px;
}

form.write button {
	font-family:		var(--body);
	font-size:			0.95rem;
	color:				var(--paper);
	background:			var(--link);
	border:				1px solid var(--link);
	border-radius:		3px;
	padding:			0.45rem 1.1rem;
	cursor:				pointer;
}

form.write button:hover {
	background:			var(--ink);
	border-color:		var(--ink);
}


/* The foot of the page. */

footer {
	border-top:			1px solid var(--rule);
	background:			var(--paper-raised);
}

footer p {
	max-width:			62rem;
	margin:				0 auto;
	padding:			1rem 1.25rem;
	color:				var(--ink-quiet);
	font-size:			0.85rem;
}

@media (max-width: 40rem) {
	body	{ font-size: 15px; }
	main	{ padding: 1.2rem 0.9rem 2.4rem; }
	.brand	{ padding: 0.9rem 0.9rem 0.7rem; }
	.brand img { height: 1.7rem; }
	.repo-bar, footer p { padding-left: 0.9rem; padding-right: 0.9rem; }
	.flags li { display: block; }
	.flag-word { display: block; }
}