/*
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Globals
*
* [1a]
*   Size hack to set default font size to 10px rather than 16.
*   Makes 1rem the equivelent of 10px. (2.4rem = 24px, etc).
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

:root {
	font-size: 62.5%; /* [1a] */

	/* Main colors */
	--GreenBG: oklch(44.4% 0.04 133);
	--DarkGreenBG: oklch(38.2% 0.03 131);
	--Yellow: oklch(76.6% 0.12 101);

	/* Borders */
	--BorderBright: oklch(60% 0 90);
	--BorderDark: oklch(29.15% 0.02 129);
	--Border: 1px solid var(--BorderDark); /* Default to dark */

	/* Text */
	--OffWhite: oklch(98.75% 0.01 68);
}

/* 
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Base page styles
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

body {
	font-family: 'Courier New', monospace;
	font-size: 1.4rem;
	background-color: var(--GreenBG);
	color: var(--OffWhite);
	display: flex;
	flex-direction: column;
}

::selection {
	background-color: var(--OffWhite);
	color: var(--DarkGreenBG);
}

/* 
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Header
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

header {
	font-size: 2.4rem;
	padding: 15px 0 0 30px;
}

/*
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Main
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

main {
	display: grid;
	grid-template-columns: 300px 1fr;
	grid-template-rows: 145px auto;
	gap: 15px;
	width: 1200px;
	height: 900px;
	margin: auto;
	overflow: hidden;

	& > :first-child {
		grid-column: 1 / -1;
		font-size: 2rem;
	}

	fieldset {
		background-color: var(--DarkGreenBG);
		border: var(--Border);
		border-bottom-color: var(--BorderBright);
		border-right-color: var(--BorderBright);
		height: 100%;

		legend {
			padding: 0 4px;
			margin-left: 15px;
			user-select: none;
			font-size: 2.4rem;
			color: var(--Yellow);
			text-shadow: -1px 1px 1px black;
		}
	}
}

/*
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Information
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

ul {
	padding: 0 15px;
	inset: 10px;
}

li {
	font-size: 1.4rem;
	white-space: nowrap;
	display: flex;

	strong {
		width: 110px;
	}

	/* Span has input from JS */
	span {
		letter-spacing: -1px;
		word-spacing: -5px;
	}

	/* If the tree is not balanced, change text to red */
	span[data-value='false'] {
		color: #ff6b6b;
	}
}

/*
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Input
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

#input {
	display: flex;
	flex-direction: column;
	gap: 25px;

	div {
		display: flex;
		height: 30px;
		gap: 7px;
		padding: 0 6px;

		&:first-of-type {
			flex-direction: column;
			margin-bottom: 50px;
		}

		input {
			width: 100%;
			font-size: 2rem;
			padding-left: 8px;
			color: var(--OffWhite);
			border: var(--Border);
			background-color: var(--GreenBG);

			&:focus {
				outline: none;
				border: 1px solid var(--Yellow);
				box-shadow: 0 0 3px black;
			}
		}

		/* Hide the arrows out of the input=number */
		/* For Chrome, Safari, Edge, and Opera (WebKit browsers) */
		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0; /* Important for removing any leftover space */
		}

		/* For Firefox */
		input[type='number'] {
			-moz-appearance: textfield;
		}

		button {
			width: 75px;
		}
	}

	button {
		cursor: pointer;
		background-color: var(--Yellow);
		border: 1px solid var(--BorderBright);

		&:hover {
			border: var(--Border);
		}
	}

	#balance-btn {
		width: 100%;
	}

	& > :last-child {
		margin-top: auto;
		padding: 10px 20px;
		border: none;
		border-top: 1px solid var(--BorderBright);
	}
}

/*
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Output
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

#output {
	overflow: auto;
}

#tree-output {
	line-height: 1.2;
	padding: 0 50px;
	/* white-space necessary for proper layout of tree  */
	white-space: pre-wrap;
}

/*
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Footer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

footer {
	padding: 0 0 10px 10px;
	font-size: 2rem;
	margin-top: auto;
}