/* 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;
		width:				100%;
		border-bottom:		1px solid var(--theme_g2);
	}

	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;
	}

	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;
	}
}

/* expandable cell ---------------------------------------------------------- */

.zen_expand_icon {
	cursor:                 pointer;
	margin-right:           0.5em;
	color:                  var(--theme_g1);
	font-weight:            bold;
	user-select:            none;
}

.zen_expand_icon:hover {
	color:                  var(--theme_ln);
}

.zen_data_text {
	user-select:            text;
}

/* 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;
	}
}


/* 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;
		display:		flex;
		align-items:	center;
		gap:			0.8em;

		#zen_icon {
			width:		3em;
			height:		3em;
		}

		#zen_text {
			font-size:	2em;
			font-weight:	bold;
			letter-spacing:	0.05em;
		}

		#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));
	}

	#epic_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;
		}
	}
}

/* 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%;
		}
	}
}