:root {
	color-scheme: light dark;
	--bg0: #fffef7;
	--bg1: #f5f8ef;
	--bg2: #f5f2e8;
	--bgwarn: #fd7;
	--bgerr: #b42;
	--fgerr: #fce;
	--not-loaded: #dcb;
	--bg0-odd: #f8f4f1;
	--bg1-odd: #f0e6fa;
	--bg-click: #fbb;
	--fg0: #222;
	--fg1: #245;
	--fg-a: #11f;
	--fg-a-v: #529;
	--fg-a-a: #c16;
	--fg-weak: #988890;
	--fg-weakish: #79736c;
	--checkmark: #193;
	--border0: #e4e1d0;
	--border1: #e7e5d6;
	--border2: #aad;
	--max-height: 300px;
	--ansi-0: #000;
	--ansi-1: #c00;
	--ansi-2: #080;
	--ansi-3: #ca0;
	--ansi-4: #33f;
	--ansi-5: #b1d;
	--ansi-6: #0aa;
	--ansi-7: #ddd;
	--ansi-8: #555;
	--ansi-9: #f22;
	--ansi-10: #0c0;
	--ansi-11: #fe2;
	--ansi-12: #67f;
	--ansi-13: #e3f;
	--ansi-14: #1cd;
	--ansi-15: #fff;
	--ansi-invert-fg: #f5f8ef;
	--ansi-invert-bg: #245;

	--graphnode-job-default: #8ae;
	--graphnode-job-top: #cef;
	--graphnode-ds-default: #c8c;
	--graphnode-ds-top: #fcf;
	--graphnode-highlight: #ef8;
	--graphnode-highlight2: #cf8;
	--graphnode-nourdlist: #3c8;
	--graphnode-inanotherurdlist: #ccc;
	--graphnode-atmaxdepth: #c52;
	--graph-fg: #222;
	--graph-edge: #222;
	--graph-subjobedge: #aea;
	--graph-edgetext: #248;
	--graph-edgefontsize: 9px;

	--graphpopup-notice: #c64;
	--graphpopup-bg: #fff;
	--graphpopup-border: #000;
	--graphpopup-shadow: #7ac;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg0: #3a2b1a;
		--bg1: #3f3425;
		--bg2: #493724;
		--bgwarn: #a41;
		--not-loaded: #654;
		--bg0-odd: #4e3d2f;
		--bg1-odd: #4b396a;
		--bg-click: #944;
		--fg0: #ddc;
		--fg1: #cde;
		--fg-a: #8cf;
		--fg-a-v: #caf;
		--fg-a-a: #f9b;
		--fg-weak: #877;
		--fg-weakish: #988;
		--checkmark: #9eb;
		--border0: #764;
		--border1: #875;
		--border2: #549;
		--ansi-0: #000;
		--ansi-1: #e00;
		--ansi-2: #1b1;
		--ansi-3: #cb0;
		--ansi-4: #34f;
		--ansi-5: #b2d;
		--ansi-6: #1bb;
		--ansi-7: #ddd;
		--ansi-8: #555;
		--ansi-9: #f34;
		--ansi-10: #1e1;
		--ansi-12: #77f;
		--ansi-13: #e7f;
		--ansi-14: #2de;
		--ansi-15: #fff;
		--ansi-invert-fg: #3a2b1a;
		--ansi-invert-bg: #cde;

		--graphnode-job-default: #57f;
		--graphnode-job-top: #13e;
		--graphnode-ds-default: #83a;
		--graphnode-ds-top: #628;
		--graphnode-highlight: #381;
		--graphnode-highlight2: #592;
		--graphnode-nourdlist: #286;
		--graphnode-inanotherurdlist: #555;
		--graphnode-atmaxdepth: #b41;
		--graph-fg: #ddc;
		--graph-edge: #ddc;
		--graph-subjobedge: #595;
		--graph-edgetext: #7cf;

		--graphpopup-notice: #f64;
		--graphpopup-bg: #222;
		--graphpopup-border: #125;
		--graphpopup-shadow: #27a;
	}
}

body {
	background: var(--bg0);
	color: var(--fg0);
	margin: 8px;
}
a:link { color: var(--fg-a); }
a:visited { color: var(--fg-a-v); }
a:active { color: var(--fg-a-a); }
input {
	-webkit-appearance: none;
	appearance: none;
	background: var(--bg1);
	color: var(--fg0);
	border-color: var(--border1);
	border-radius: 5px;
	padding: 3px 1em;
}
input:focus {
	background: var(--bg2);
}
input[type="checkbox"] {
	position: relative;
	padding: 0;
	width: 1.2em;
	height: 1.2em;
	vertical-align: -0.22em;
	border: 1px solid var(--border2);
	color: var(--checkmark);
}
input[type="checkbox"]::before {
	content: "✔";
	position: absolute;
	top: -0.1em;
	left: 0.05em;
	font-size: 1.15em;
	visibility: hidden;
}
input[type="checkbox"]:checked::before {
	visibility: visible;
}
input[type="submit"] {
	margin-bottom: 1em;
}
input:disabled {
	opacity: 0.5;
}

#main-link {
	position: absolute;
	top: 1.7em;
	right: 0.4em;
	z-index: 2;
}
.error, input:focus.error {
	background: var(--bgerr);
	color: var(--fgerr);
}
.warning {
	background: var(--bgwarn);
	font-weight: bold;
	padding: 3px;
}
.unknown {
	background: var(--bgwarn);
}

#header {
	float: left;
}
#path {
	font-family: monospace;
	font-size: 75%;
	color: var(--fg-weakish);
}
#missing {
	visibility: hidden;
}
#missing.error {
	visibility: visible;
	font-size: 175%;
	position: fixed;
	width: fit-content;
	top: 6em;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0.5em;
	z-index: 1;
}
#waiting {
	pointer-events: none;
	position: fixed;
	left: 0;
	top: 5em;
	width: 100%;
	z-index: 1;
}
#restart {
	font-size: 100%;
	margin-left: 1em;
}
#ax-version {
	pointer-events: none;
	color: var(--fg-weak);
	position: fixed;
	top: 0;
	right: 0;
	border-left: 0.1em solid var(--border0);
	border-bottom: 0.1em solid var(--border0);
	padding: 0.2em 0.4em;
}
#status {
	background: var(--bg1);
	border: 2px solid var(--border1);
	padding: 2px 0.5em;
	float: left;
	clear: left;
	min-width: 60%;
}
#bonus-info {
	float: right;
	margin: 1.25em 0 1em;
}
#bonus-info ul {
	list-style-type: none;
	display: table;
	margin: 0.4em 0;
	padding: 0.4em 0;
	text-align: right;
	width: 100%;
	border-top: 1px solid var(--border1);
	border-bottom: 1px solid var(--border1);
}
#workdirs {
	margin-left: auto;
	margin-right: 0;
	text-align: right;
}
#workdirs td {
	padding-right: 1em;
}
#dirs {
	clear: both;
}
#dirs ul {
	list-style-type: "\1F4C1";
}
#dirs a {
	padding-left: 0.3em;
	font-family: monospace;
	font-size: 150%;
}
.textfile {
	max-height: var(--max-height);
	overflow: auto;
	background: var(--bg1);
	color: var(--fg1);
	border: 2px solid var(--border1);
	padding-left: 1em;
	padding-right: 1em;
}
.textfile pre, #output pre {
	min-width: fit-content;
	padding-left: 0.5em;
	margin-left: -0.5em;
	line-height: 1.25em;
	background-image: repeating-linear-gradient(top, var(--bg1-odd) 0, var(--bg1-odd) 1.25em, var(--bg1) 1.25em, var(--bg1) 2.5em);
	background-image: -webkit-repeating-linear-gradient(top, var(--bg1-odd) 0, var(--bg1-odd) 1.25em, var(--bg1) 1.25em, var(--bg1) 2.5em);
}
.result {
	clear: both;
	overflow: hidden;
	animation: result 0.25s forwards linear;
}
.result .method {
	font-size: 95%;
}
@keyframes result {
	0% {
		transform: scale(0.5);
		opacity: 0.2;
		max-height: 1px;
	}
	99% {
		max-height: var(--max-height);
	}
	100% {
		transform: none;
		opacity: 1;
		max-height: none;
		overflow: visible;
		border-top: 2px solid var(--border2);
		padding-top: 10px;
		margin-bottom: 22px;
	}
}
.result > input[type="submit"] {
	float: right;
	margin: -3px 0 3px 0.5em;
	min-width: 6em;
}
.result > div {
	clear: both;
}
.hidden {
	overflow: hidden;
	animation: hidden 0.3s forwards linear;
}
@keyframes hidden {
	0% {
		max-height: var(--max-height);
	}
	100% {
		transform: scale(0.5);
		opacity: 0.2;
		max-height: 1px;
		display: inline-table;
		visibility: collapse;
		border: 0;
		padding: 0;
		margin: 0;
	}
}
#show-all {
	float: right;
}
.clickme {
	text-align: center;
	font-size: 120%;
	padding: 15px;
	background: var(--bg-click);
}
video, embed {
	display: block;
	max-height: var(--max-height);
	width: 100%;
}
embed {
	height: var(--max-height);
}
img {
	display: block;
	max-height: var(--max-height);
}
.result > div.full > img {
	max-height: inherit;
}
.result > div.big > * {
	max-height: 95vh;
}
.result > div.big > embed, .result > div.big > video {
	height: 95vh;
}
form {
	display: inline;
}

.box {
	background: var(--bg1);
	box-shadow: 0 0 3px 4px var(--border1) inset;
	padding: 1em;
	padding-left: 1em;
}
.box .box {
	background: var(--bg2);
}

#output pre, .box table {
	padding-left: 2em;
}
#other-params {
	margin-top: 1em;
}
#other-params table {
	padding-left: 0;
}
.prevnext h1 {
	display: inline-block;
}
.prevnext a {
	padding-right: 0.5em;
}

th {
	text-align: left;
}
.ds-table {
	margin: 0 0 0.5em 1.5em;
	border: 1px solid var(--border0);
}
.ds-table td, .ds-table th {
	padding: 2px 0.5em;
}
.ds-table td ~ td, .ds-table th ~ th { /* Not leftmost one */
	border-left: 1px solid var(--border1);
}
.ds-table tbody tr:nth-child(odd) {
	background: var(--bg0-odd);
}
input[type="number"] {
	width: 8em;
}
td.not-loaded {
	background: var(--not-loaded);
}

.method-table {
	border-collapse: collapse;
	border-top: 1px solid var(--border1);
}
.method-table tbody td {
	vertical-align: top;
	padding: 3px 0.3em;
}
.method-table tbody td:last-child {
	width: 100%;
}
.method-table tbody tr {
	border-bottom: 1px solid var(--border1);
}
.method-table tbody tr:nth-child(odd) {
	background: var(--bg0-odd);
}

.urd-table {
	border: 1px solid var(--border0);
}
.urd-table tbody td {
	vertical-align: top;
	padding: 0.3em 0.5em;
	border-bottom: 1px solid var(--border1);
}
.urd-table tbody tr:last-child td {
	border-bottom: 0;
}
.urd-table ol {
	list-style-position: inside;
	padding: 0;
	margin: 0.3em 0 0 2em;
}
.urd-table ol:first-child {
	margin: 0;
}
.urd-table li::marker {
	color: var(--fg-weak);
}

ul.urdlist > li > a:first-child {
	margin-right: 1em;
}

table.job-table {
	border-spacing: 0 2px;
	clear: both;
}
table.job-table td:nth-child(2), table.job-table th:nth-child(2) {
	padding: 0 1em;
	min-width: 13em;
}
table.job-table th {
	cursor: pointer;
}
table.job-table td:last-child {
	color: var(--fg-weak);
}
table.job-table tr.filtered {
	visibility: collapse;
}
table.job-table tr.error {
	visibility: visible;
}
.filter {
	position: fixed;
	top: 0;
	right: 0;
	border-left: 1px solid var(--border2);
	border-bottom: 1px solid var(--border2);
	padding: 2em 1em 1em;
}
@media (max-width: 60em) {
	.workdir > h1 {
		float: left;
	}
	.filter {
		position: relative;
		float: right;
		margin: -8px -8px 0 0;
	}
}
.filter h1 {
	margin: 0 0 0.5em;
	font-size: 130%;
	font-weight: lighter;
}
.filter input[type="text"] {
	width: 11em;
}
.filter tbody td {
	padding-right: 0.3em;
}
table.job-table tr.unfinished {
	background: var(--bgwarn);
}
table.job-table tr.old {
	background: var(--bg2);
}

#status-stacks td {
	padding: 1px;
}
.output {
	background: var(--bg1);
	border: 2px solid var(--border1);
	margin-left: 4em;
	padding: 4px;
}
.output pre {
	font-family: monospace;
	margin-left: 2em;
}

.spinner {
	pointer-events: none;
	margin: 5px auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 8px solid;
	border-color: transparent red transparent green;
	animation: spinner 3s ease-in-out infinite;
}
@keyframes spinner {
	50% { transform: rotate(360deg); }
}
td .spinner {
	position: absolute;
	margin: 0;
}

.ansi-bold {
	font-weight: bold;
}
.ansi-faint {
	font-weight: lighter;
	opacity: 0.75;
}
.ansi-italic {
	font-style: italic;
}
.ansi-underline {
	text-decoration: underline;
}
@keyframes ansi-blink {
	0%   { opacity: 1; }
	50%  { opacity: 1; }
	60%  { opacity: 0.4; }
	100% { opacity: 0.4; }
}
@keyframes ansi-blink-faint {
	0%   { opacity: 0.75; }
	50%  { opacity: 0.75; }
	60%  { opacity: 0.3; }
	100% { opacity: 0.3; }
}
.ansi-blink-slow {
	animation: ansi-blink 1.6s linear alternate infinite;
}
.ansi-blink-fast {
	animation: ansi-blink 0.4s linear alternate infinite;
}
.ansi-blink-slow.ansi-faint, .ansi-blink-fast.ansi-faint {
	animation-name: ansi-blink-faint;
}
.ansi-hide {
	opacity: 0;
}
.ansi-strike {
	text-decoration: line-through;
}
canvas {
	display: block;
}

#graph {
	height: 400px;
}
#graphpopup {
	background: var(--graphpopup-bg);
	position: absolute;
	display: none;
	border: 2px solid var(--graphpopup-border);
	box-shadow: 0 0 3px 4px var(--graphpopup-shadow) inset;
}
#graphpopup td {
	list-style-type:none;
	margin: 0;
	padding: 10px;
	padding-bottom: 0.1em;
}
#graphpopup h1 {
	font-size: 1.05em;
	margin-bottom:  0em;
}
.gp-notice {
	color: var(--graphpopup-notice);
}
#gp-method {
	font-style: italic;
	font-weight: bold;
	text-align: center;
}
#gp-timestamp {
	text-align: center;
}
#gp-help {
	float: right;
}
