/* Copyright Epic Games, Inc. All Rights Reserved. */

/* theme -------------------------------------------------------------------- */

@media (prefers-color-scheme: light) {
	:root {
		--theme_g0:	#000;
		--theme_g4:	#fff;
		--theme_g1:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 45%);
		--theme_g2:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 80%);
		--theme_g3:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 96%);

		--theme_p0:	#069;
		--theme_p4:	hsl(210deg 40% 94%);
		--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
		--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
		--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);

		--theme_ln:	var(--theme_p0);
		--theme_er:	#fcc;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--theme_g0:	#ddd;
		--theme_g4:	#222;
		--theme_g1:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 35%);
		--theme_g2:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 65%);
		--theme_g3:	color-mix(in oklab, var(--theme_g0), var(--theme_g4) 88%);

		--theme_p0:	#479;
		--theme_p4:	#333;
		--theme_p1:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 35%);
		--theme_p2:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 60%);
		--theme_p3:	color-mix(in oklab, var(--theme_p0), var(--theme_p4) 85%);

		--theme_ln:	#feb;
		--theme_er:	#622;
	}
}

/* page --------------------------------------------------------------------- */

body, input {
	font-family:	consolas, monospace;
	font-size:		11pt;
}

body {
	overflow-y:			scroll;
	margin:				0;
	background-color:	var(--theme_g4);
	color:				var(--theme_g0);
}

pre {
	margin:				0;
}

input {
	color:				var(--theme_g0);
	background-color:	var(--theme_g3);
	border:				1px solid var(--theme_g2);
}

* {
	box-sizing: border-box;
}

#container {
	max-width:				130em;
	min-width:				80em;
	margin:					auto;

	> div {
		margin:				0.0em 2.2em 0.0em 2.2em;
		padding-top:		1.0em;
		padding-bottom:		1.5em;
	}
}

/* links -------------------------------------------------------------------- */

a {
	text-decoration:		unset;
}

.zen_action, a {
	cursor:					pointer;
	color:					var(--theme_ln);

	&:hover {
		text-decoration:	underline var(--theme_ln);
	}
}

/* sector ------------------------------------------------------------------- */

.zen_sector {
	h1, h2, h3 {
		white-space:		nowrap;
	}

	h1 {
		font-size:			1.5em;
	}

	h2 {
		font-size:			1.25em;
		margin-bottom:		0.5em;
	}

	h3 {
		font-size:			1.1em;
		margin:				0em;
		padding:			0.4em;
		background-color:	var(--theme_p4);
		border-left:		5px solid var(--theme_p2);
		font-weight:		normal;
	}

	.zen_section_header {
		display:			flex;
		align-items:		baseline;
		> h1, > h2, > h3 {
			margin-top:		0;
		}
		&:has(> h1) {
			border-bottom:	1px solid var(--theme_g2);
		}
	}

	.zen_view_nav {
		margin-left:		auto;
		display:			flex;
		gap:				0.7em;
	}

	margin-bottom:	3em;
	> *:not(h1) {
		margin-left:	2em;
	}
}


/* table -------------------------------------------------------------------- */

.zen_table {
	display:				grid;
	border:					1px solid var(--theme_g2);
	border-left-style:		none;
	margin-bottom:			1.2em;

	> div {
		display: contents;
	}

	> div:nth-of-type(odd) {
		background-color:	var(--theme_g3);
	}

	> div:first-of-type {
		font-weight:		bold;
		background-color:	var(--theme_p3);
	}

	> div:hover {
		background-color:	var(--theme_p4);
	}

	> hidden {
		visibility:			hidden;
		display:			none;
	}

	> div > div {
		padding:			0.3em;
		padding-left:		0.75em;
		padding-right:		0.75em;
		align-content:		center;
		border-left:		1px solid var(--theme_g2);
		overflow:			auto;
		overflow-wrap:		break-word;
		background-color:	inherit;
		white-space: 		pre-wrap;
	}
}

/* toolbar ------------------------------------------------------------------ */

.zen_toolbar {
	display:			flex;
	margin-top:			0.5em;
	margin-bottom:		0.6em;

	> div {
		display:		flex;
		align-items:	center;
	}

	> div > .zen_toolbar_sep {
		color:			var(--theme_g2);
	}

	> div:last-child {
		margin-left:	auto;
	}

	> div > div {
		padding-right:	0.7em;
	}

	> div:last-child > :last-child {
		padding-right:	0;
	}

	&.zen_toolbar_inline {
		margin:			unset;
	}
}

/* legend toggle ------------------------------------------------------------ */

.legend_toggle {
	cursor:				pointer;
	user-select:		none;
	&:hover {
		text-decoration: underline;
	}
	&.legend_disabled {
		opacity:		0.3;
	}
}

.legend_scale_wrap {
	display:			inline-flex;
	flex-direction:		column;
	width:				6em;
	vertical-align:		middle;
	position:			relative;
	top:				2px;
}
.legend_scale {
	position:			relative;
	display:			flex;
	justify-content:	space-between;
	align-items:		center;
	width:				100%;
	padding:			0 0.2em;
	height:				1.1em;
	box-sizing:			border-box;
	border-radius:		2px;
	overflow:			hidden;
	.legend_scale_lo, .legend_scale_hi {
		font-size:		0.8em;
		text-shadow:	0 0 3px var(--theme_g4), 0 0 3px var(--theme_g4);
		position:		relative;
		z-index:		1;
	}
	&::after {
		content:		'';
		position:		absolute;
		top:			0;
		left:			var(--filter-pos, 100%);
		right:			0;
		height:			100%;
		background:		rgba(0, 0, 0, 0.65);
		pointer-events:	none;
	}
}
.legend_compression_slider {
	width:					100%;
	height:					6px;
	margin:					2px 0 -6px 0;
	padding:				0;
	cursor:					pointer;
	-webkit-appearance:		none;
	appearance:				none;
	background:				transparent;
	border:					none;
	outline:				none;
	&::-webkit-slider-runnable-track {
		background:			transparent;
		height:				6px;
		border:				none;
	}
	&::-webkit-slider-thumb {
		-webkit-appearance:	none;
		appearance:			none;
		width:				8px;
		height:				6px;
		background:			var(--theme_g0);
		clip-path:			polygon(50% 0%, 0% 100%, 100% 100%);
		cursor:				pointer;
		border:				none;
	}
	&::-moz-range-track {
		background:			transparent;
		height:				6px;
		border:				none;
	}
	&::-moz-range-thumb {
		width:				8px;
		height:				6px;
		background:			var(--theme_g0);
		border:				none;
		clip-path:			polygon(50% 0%, 0% 100%, 100% 100%);
		cursor:				pointer;
	}
}


/* modal -------------------------------------------------------------------- */

.zen_modal {
	position:					fixed;
	z-index:					1;
	top:						0;
	left:						0;
	width:						100%;
	height:						100%;
	display:					flex;
	justify-content:			center;
	align-items:				center;
	backdrop-filter:			blur(5px);

	.zen_modal_bg {
		position:				absolute;
		z-index:				-1;
		top:					0;
		left:					0;
		width:						100%;
		height:					100%;
		background:				var(--theme_g0);
		opacity:				0.4;
	}

	> div {
		border-radius:			0.5em;
		background-color:		var(--theme_g4);
		opacity:				1.0;
		width:					35em;
		padding:				0em 2em 2em 2em;
	}

	> div > div {
		text-align:				center;
	}

	.zen_modal_title {
		font-size:				1.2em;
		border-bottom:			1px solid var(--theme_g2);
		padding:				1.2em 0em 0.5em 0em;
		color:					var(--theme_g1);
	}

	.zen_modal_buttons {
		display:				flex;
		justify-content:		center;
		padding-bottom:			0em;

	> div {
			margin:				0em 1em 0em 1em;
			padding:			1em;
			align-content:		center;
			border-radius:		0.3em;
			background-color:	var(--theme_p3);
			width:				6em;
			cursor:				pointer;
		}

		> div:hover {
			background-color:	var(--theme_p4);
		}
	}

	.zen_modal_message {
		padding:				2em;
		min-height:				8em;
		align-content:			center;
	}
}

/* progress bar ------------------------------------------------------------- */

.zen_progressbar {
	position:				absolute;
	top:					0;
	left:					0;
	width:					100%;
	height:					0.5em;

	> div:first-of-type {
		/* label */
		padding:			0.3em;
		padding-top:		0.8em;
		background-color:	var(--theme_p4);
		width:				max-content;
		font-size:			0.8em;
	}

	> div:last-of-type {
		/* bar */
		position:			absolute;
		top:				0;
		left:				0;
		width:				0%;
		height:				100%;
		background-color:	var(--theme_p1);
	}

	> div:nth-of-type(2) {
		/* bg */
		position:			absolute;
		top:				0;
		left:				0;
		width:				100%;
		height:				100%;
		background-color:	var(--theme_p3);
	}
}

/* crumbs ------------------------------------------------------------------- */

#crumbs {
	display:			flex;
	position:			relative;
	top:				-1em;

	> div {
		padding-right:	0.5em;
	}

	> div:nth-child(odd)::after {
		content:		":";
		font-weight:	bolder;
		color:			var(--theme_p2);
	}
}

/* branding ----------------------------------------------------------------- */

#branding {
	font-size:			10pt;
	font-weight:		bolder;
	margin-bottom:		2.6em;
	position:			relative;

	#logo {
		width:			min-content;
		margin:			auto;
		user-select:	none;
		position:		relative;

		#go_home {
			width:		100%;
			height:		100%;
			position:	absolute;
			top:		0;
			left:		0;
		}
	}

	#logo:hover {
		filter:			drop-shadow(0 0.15em 0.1em var(--theme_p2));
	}

	#ue_logo {
		position:		absolute;
		top:			1em;
		right:			0;
		width:			5em;
		margin:			auto;
	}
}

/* error -------------------------------------------------------------------- */

#error {
	position:				fixed;
	bottom:					0;
	z-index:				1;
	color:					var(--theme_g0);
	background-color:		var(--theme_er);
	padding:				1.0em 2em 2em 2em;
	width:					100%;
	border-top:				1px solid var(--theme_g0);
	display:				flex;

	> div:nth-child(1) {
		font-size:			2.5em;
		font-weight:		bolder;
		font-family:		serif;
		transform:			rotate(-13deg);
		color:				var(--theme_p0);
	}

	> div:nth-child(2) {
		margin-left:		2em;
	}

	> div:nth-child(2) > pre:nth-child(2) {
		margin-top:			0.5em;
		font-size:			0.8em;
		color:				var(--theme_g1);
	}
}

/* stats -------------------------------------------------------------------- */

#stat .zen_proptable pre {
	float:			left;
	min-width:		15%;
}

/* start -------------------------------------------------------------------- */

#start {
	.dropall {
		text-align:	right;
		font-size:	0.85em;
		margin:		-0.5em 0 0.5em 0;
	}
	#version {
		color:		var(--theme_g1);
		text-align: center;
		font-size:	0.85em;
	}
}

/* entry -------------------------------------------------------------------- */

#entry {
	#datatable > div {
		> div:nth-child(3), > div:nth-child(4) {
			text-align: right;
		}
	}
	h3:has(.zen_minigraph_toggle) {
		display:			flex;
		align-items:		center;
	}
	.zen_minigraph_toggle {
		display:			flex;
		gap:				1em;
		margin-left:		auto;
		font-size:			0.9em;
		.active {
			font-weight:	bold;
			text-decoration: underline;
		}
	}
}

/* minigraph (shared by entry + artifactdeps) ------------------------------- */

.zen_minigraph {
	position:			relative;
	display:			flex;
	height:				20em;
	canvas {
		flex:			1;
		min-width:		0;
		border:			1px solid var(--theme_g2);
		cursor:			grab;
	}
	canvas:active {
		cursor:			grabbing;
	}
	.minigraph_splitter {
		width:						4px;
		cursor:						col-resize;
		background-color:			var(--theme_g2);
		flex-shrink:				0;
		&:hover, &.active {
			background-color:		var(--theme_p1);
		}
	}
	.minigraph_props {
		width:						18em;
		flex-shrink:				0;
		border:						1px solid var(--theme_g2);
		border-left:				none;
		padding:					0.5em 0.6em;
		font-size:					0.85em;
		overflow-y:					auto;
		.minigraph_props_empty {
			color:					var(--theme_g1);
			padding:				1em 0;
			text-align:				center;
		}
		.minigraph_props_row {
			display:				flex;
			padding:				0.15em 0;
		}
		.minigraph_props_label {
			color:					var(--theme_g1);
			min-width:				8em;
		}
		.minigraph_props_row > span:last-child {
			overflow:				hidden;
			text-overflow:			ellipsis;
			white-space:			nowrap;
		}
	}
}
.minigraph_legend {
	display:					flex;
	gap:						1.5em;
	margin-top:					0.5em;
	font-size:					0.85em;
	> div {
		display:				flex;
		align-items:			center;
		gap:					0.3em;
	}
	.legend_swatch {
		width:					1.5em;
		height:					0.3em;
		display:				inline-block;
	}
}

/* tree --------------------------------------------------------------------- */

#tree {
	#tree_root > ul {
		margin-left:			0em;
	}
	ul {
		list-style-type:		none;
		padding-left:			0;
		margin-left:			1em;
	}
	li > div {
		display:				flex;
		border-bottom:			1px solid transparent;
		padding-left:			0.3em;
		padding-right:			0.3em;
	}
	li > div > div[active] {
		text-transform:			uppercase;
	}
	li > div > div:nth-last-child(3) {
		margin-left:			auto;
	}
	li > div > div:nth-last-child(-n + 3) {
		font-size:				0.8em;
		width:					10em;
		text-align:				right;
	}
	li > div > div:nth-last-child(1) {
		width:					6em;
	}
	li > div:hover {
		background-color:		var(--theme_p4);
		border-bottom:			1px solid var(--theme_g2);
	}
	li a {
		font-weight:			bolder;
	}
	li::marker {
		content:				"+";
		color:					var(--theme_g1);
	}
	li[expanded]::marker {
		content:				"-";
	}
	li[leaf]::marker {
		content:				"|";
	}
	li:last-child::marker {
		content:				"\\";
	}
}

/* map ---------------------------------------------------------------------- */

html:has(#map) {
	height: 100%;
	body, #container, #map {
		height:					100%;
	}
}
#map {
	#treemap {
		position:				relative;
		canvas {
			width:				100%;
		}
	}
}

/* graph -------------------------------------------------------------------- */

html:has(#graph), html:has(#graph-debug-playground) {
	height: 100%;
	body, #container, #graph, #graph-debug-playground {
		height:						100%;
	}
}
#graph, #graph-debug-playground {
	#graph_view {
		position:					relative;
		display:					flex;
		gap:						0;
		canvas {
			flex:					1;
			min-width:				0;
			border:					1px solid var(--theme_g2);
			cursor:					grab;
		}
		canvas:active {
			cursor:					grabbing;
		}
	}
	#graph_splitter {
		width:						4px;
		cursor:						col-resize;
		background-color:			var(--theme_g2);
		flex-shrink:				0;
		&:hover, &.active {
			background-color:		var(--theme_p1);
		}
	}
	#graph_entries {
		width:						22em;
		flex-shrink:				0;
		border:						1px solid var(--theme_g2);
		border-left:				none;
		display:					flex;
		flex-direction:				column;
		overflow:					hidden;
		> input {
			width:					100%;
			border:					none;
			border-bottom:			1px solid var(--theme_g2);
			padding:				0.4em 0.6em;
			font-size:				0.9em;
		}
		#graph_entries_list {
			overflow-y:				auto;
			flex:					1;
			> div {
				padding:			0.2em 0.6em;
				cursor:				pointer;
				font-size:			0.85em;
				white-space:		nowrap;
				overflow:			hidden;
				text-overflow:		ellipsis;
			}
			> div:hover {
				background-color:	var(--theme_p4);
			}
			.graph_entry_dir {
				font-weight:		bold;
			}
			.graph_entry_leaf {
				color:				var(--theme_ln);
			}
			.graph_entry_active {
				color:				var(--theme_p0);
			}
			.graph_entries_more {
				color:				var(--theme_g1);
				cursor:				default;
			}
		}
		#graph_props {
			border-top:				1px solid var(--theme_g2);
			padding:				0.5em 0.6em;
			font-size:				0.85em;
			overflow-y:				auto;
			min-height:				6em;
			.graph_props_empty {
				color:				var(--theme_g1);
				padding:			1em 0;
				text-align:			center;
			}
			.graph_props_row {
				display:			flex;
				padding:			0.15em 0;
			}
			.graph_props_label {
				color:				var(--theme_g1);
				min-width:			8em;
			}
			.graph_props_row > span:last-child {
				overflow:			hidden;
				text-overflow:		ellipsis;
				white-space:		nowrap;
			}
		}
	}
	#graph_search_results {
		position:					absolute;
		z-index:					1;
		background-color:			var(--theme_g4);
		border:						1px solid var(--theme_g2);
		max-height:					20em;
		overflow-y:					auto;
		width:						30em;
		> div {
			padding:				0.3em 0.75em;
			cursor:					pointer;
		}
		> div:hover {
			background-color:		var(--theme_p4);
		}
	}
	#graph_legend {
		display:					flex;
		align-items:				flex-start;
		gap:						1.5em;
		margin-top:					0.5em;
		font-size:					0.85em;
		> div {
			display:				flex;
			align-items:			center;
			gap:					0.3em;
		}
		.legend_swatch {
			width:					1.5em;
			height:					0.3em;
			display:				inline-block;
		}
		.legend_pill {
			cursor:				pointer;
			user-select:		none;
			padding:			0.1em 0.5em;
			border-radius:		0.6em;
			border:				1px solid var(--theme_g2);
			color:				var(--theme_g1);
			font-size:			0.9em;
			&:hover {
				border-color:	var(--theme_p1);
				color:			var(--theme_g0);
			}
			&.active {
				background-color: var(--theme_p0);
				border-color:	var(--theme_p0);
				color:			var(--theme_g4);
			}
		}
		#graph_readme {
			margin-left:			auto;
			position:				relative;
			.graph_readme_toggle {
				cursor:				pointer;
				color:				var(--theme_g1);
				user-select:		none;
				&:hover {
					color:			var(--theme_g0);
				}
			}
			.graph_readme_body {
				display:			none;
				position:			absolute;
				right:				0;
				bottom:				1.6em;
				width:				max-content;
				background-color:	var(--theme_g3);
				border:				1px solid var(--theme_g2);
				border-radius:		6px;
				box-shadow:			2px 4px 12px rgba(0,0,0,0.3);
				padding:			0.6em 0.8em;
				color:				var(--theme_g1);
				line-height:		1.5;
				z-index:			100;
				b {
					color:			var(--theme_g0);
					font-weight:	normal;
				}
				p {
					margin:			0.3em 0;
				}
			}
			&.open .graph_readme_body {
				display:			block;
			}
		}
	}
}

/* graph breadcrumb --------------------------------------------------------- */

.graph_breadcrumb {
	display:				flex;
	flex-wrap:				wrap;
	align-items:			center;
	gap:					0;
	font:					11px consolas, monospace;
	padding:				0.3em 0;
	min-height:				1.4em;
	.graph_breadcrumb_seg {
		padding:			0.15em 0.4em;
		cursor:				pointer;
		color:				var(--theme_ln);
		border-radius:		3px;
		white-space:		nowrap;
		&:hover {
			background-color: var(--theme_p4);
			color:			var(--theme_g0);
		}
		&.active {
			color:			var(--theme_g0);
			font-weight:	bold;
		}
	}
	.graph_breadcrumb_sep {
		color:				var(--theme_g1);
		padding:			0 0.1em;
		user-select:		none;
	}
}

/* graph search overlay ----------------------------------------------------- */

.graph_search_overlay {
	position:					absolute;
	top:						8px;
	display:					flex;
	align-items:				center;
	gap:						4px;
	background-color:			var(--theme_g3);
	border:						1px solid var(--theme_g2);
	border-radius:				6px;
	padding:					4px 8px;
	font:						11px consolas, monospace;
	z-index:					100;
	box-shadow:					2px 4px 12px rgba(0,0,0,0.3);
	input {
		background:				transparent;
		border:					none;
		color:					var(--theme_g0);
		font:					inherit;
		flex:					1;
		min-width:				0;
		outline:				none;
		&::placeholder {
			color:				var(--theme_g1);
		}
	}
	.graph_search_count {
		color:					var(--theme_g1);
		white-space:			nowrap;
		min-width:				4em;
		text-align:				right;
	}
	button {
		background:				none;
		border:					none;
		color:					var(--theme_g1);
		cursor:					pointer;
		padding:				0 2px;
		font:					inherit;
		line-height:			1;
		&:hover {
			color:				var(--theme_g0);
		}
	}
}

/* loading overlay --------------------------------------------------------- */

#graph-debug-playground .graph_loading {
	position:						absolute;
	top:							50%;
	left:							50%;
	transform:						translate(-50%, -50%);
	color:							var(--theme_g1);
	font:							11px consolas, monospace;
	z-index:						100;
	pointer-events:					none;
}

/* stress overlay ----------------------------------------------------------- */

#graph-debug-playground #stress_overlay {
	position:						absolute;
	top:							8px;
	left:							8px;
	z-index:						500;
	background-color:				rgba(0, 0, 0, 0.8);
	color:							#4f4;
	font:							11px consolas, monospace;
	padding:						8px 12px;
	border-radius:					6px;
	pointer-events:					none;
	max-height:						50%;
	overflow-y:						auto;
	white-space:					pre;
	.stress_current {
		color:						#ff4;
	}
	.stress_pass {
		color:						#4f4;
	}
	.stress_fail {
		color:						#f44;
	}
	.stress_summary {
		color:						#fff;
		border-top:					1px solid rgba(255, 255, 255, 0.3);
		margin-top:					4px;
		padding-top:				4px;
	}
}

/* graph context menu ------------------------------------------------------ */

.graph_ctxmenu {
	position:						absolute;
	z-index:						1000;
	background-color:				var(--theme_g3);
	border:							1px solid var(--theme_g2);
	border-radius:					6px;
	box-shadow:						2px 4px 12px rgba(0,0,0,0.3);
	padding:						4px 0;
	font:							11px consolas, monospace;
	user-select:					none;
	.graph_ctxmenu_item {
		padding:					6px 14px;
		cursor:						pointer;
		white-space:				nowrap;
		color:						var(--theme_g0);
		&:hover {
			background-color:		var(--theme_p3);
		}
	}
	.graph_ctxmenu_disabled {
		padding:					6px 14px;
		white-space:				nowrap;
		color:						var(--theme_g1);
		opacity:					0.4;
		pointer-events:				none;
	}
}