* {
	box-sizing: border-box;
}

:root {
	--font: Overpass, Arial, sans-serif;

	--col-red-1-7f: #9b21217f;
	--col-yellow-1-7f: #6b48167f;
	--col-red-3-7f: #cf51517f;
	--col-yellow-3-7f: #c791477f;

	--col-green-0-7f: #0316117f;
	--col-green-0-af: #031611af;
	--col-green-0-cf: #031611cf;
	--col-green-0_5-df: #08261fdf;
	--col-green-1-7f: #0f382e7f;
	--col-green-1_5-3f: #123f343f;
	--col-green-2-cf: #2a6a52cf;
	--col-green-2-af: #2a6a52af;
	--col-green-2-7f: #2a6a527f;
	--col-green-3-7f: #54ad8c7f;
	--col-green-3-af: #54ad8caf;

	--panel-section-padding-horizontal: 1em;
	--panel-section-padding: .5em var(--panel-section-padding-horizontal);

	--input-border-radius: 8px;
	--error-flash-color: var(--col-red-1-7f);

	--separator-height: 1px;

	--overlay-box-shadow: 0 5px 8px var(--col-green-2-7f);
}

body,
h1,
h2,
h3 {
	margin: 0;
	font-weight: 600;
}

button {
	background: none;
}

.inactive {
	opacity: .75;
}

.disabled {
	opacity: .5;
	pointer-events: none;
}

.hidden {
	display: none;
}

.transparent {
	opacity: 0;
}

::selection {
	background: #ffffff3f;
}

main {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;

	min-width: 70em;
	min-height: 60em;

	font-family: var(--font);
	font-weight: 400;
	font-size: 11px;
	line-height: 1;

	color: #333;

	display: grid;
}

main > workspace- {
	grid-row: 1;
	grid-column: 1;

	display: grid;
	padding: 1em;

	background: linear-gradient(105deg, var(--col-green-3-7f), var(--col-green-3-af), var(--col-green-3-7f));
}

main > workspace- > * {
	grid-row: 1;
	grid-column: 1;
}

main > workspace- > .section {
	margin: 1em;
	overflow: hidden;

	box-shadow: var(--overlay-box-shadow);
	border-radius: 2em;
}

workspace- > overlays- {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Loading screen */

loading-screen {
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	background: #fff;

	transition: opacity 1s ease;
}

loading-screen logo- {
	width: 60%;
	min-width: 600px;
	margin: 6em 0;
	display: flex;
	justify-content: center;
}

loading-screen logo- img {
	width: 100%;
}

loading-screen loading-spinner {
	display: grid;

	transition: opacity .2s ease;
}

loading-screen loading-spinner > * {
	grid-column: 1;
	grid-row: 1;

	margin: auto;
}

loading-screen loading-spinner loading-square.large {
	width: 8em;
	height: 8em;

	border: 1em solid var(--col-green-3-7f);

	animation: spin-cw 3s infinite linear;
}

loading-screen loading-spinner loading-square.small {
	width: 6em;
	height: 6em;

	border: 1.5em solid var(--col-green-3-af);

	animation: spin-ccw 6s infinite linear;
}

loading-screen noscript {
	font-size: 4em;
	font-weight: 800;
	color: var(--col-green-2-af);
}

loading-screen ::selection {
	background: var(--col-green-2-7f);
	color: #fff;
}

@keyframes spin-cw {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes spin-ccw {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(-360deg);
	}
}

viewport- {
	position: relative;
	/* center contents */
	display: grid;

	overflow: hidden;

	background: #fff;
}

viewport- > * {
	grid-row: 1;
	grid-column: 1;
	position: absolute;
}

viewport- > overlays- {
	margin: 4em;
}

overlays- {
	pointer-events: none;

	position: relative;

	color: #ffffffdf;
}

overlays- [name="bottom-row"] {
	bottom: 0;

	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

overlays- > * {
	position: absolute;
}

overlays- > panels- {
	top: 0;

	width: 100%;
	display: flex;
	align-items: start;
}

overlays- > panels- > * + .panel {
	margin-left: 12px;
}

/* Context menus */

overlays- > context-menus {
	position: relative;
}

overlays- .panel,
overlays- context-menu {
	display: flex;
	flex-direction: column;
	overflow: auto;

	pointer-events: initial;

	box-shadow: var(--overlay-box-shadow);

	letter-spacing: .05em;
}

overlays- context-menu {
	align-items: center;
	position: absolute;
	min-width: 140px;

	border-radius: 1em;

	background: var(--col-green-0_5-df);
	
	--error-flash-color: var(--col-red-3-7f);
}

overlays- context-menu label {
	margin: .5em 0;

	border-bottom: solid var(--separator-height) #ffffff7f;
}

overlays- context-menu button.row-item {
	display: flex;
	align-items: center;
	width: 100%;
	height: 2em;
	padding: 0 1em;
	position: relative;
	overflow: hidden;
	white-space: nowrap;

	cursor: default;

	font-size: 1.1em;
	text-align: initial;
}

overlays- context-menu button.row-item > :first-child {
	flex-grow: 1;
}

overlays- context-menu separator- {
	height: var(--separator-height);
	width: 90%;

	margin: .5em 0;

	background: #fff;
}

overlays- context-menu .submenu-switch:after,
overlays- context-menu .sad:after {
	font-size: 2em;
	line-height: 1;

	opacity: .6;
}

overlays- context-menu .submenu-switch:after {
	content: "⋯";
}

overlays- context-menu .sad:after {
	content: ":(";
}

overlays- context-menu .sad {
	opacity: .5;
	pointer-events: none;
}

overlays- h2,
overlays- h3 {
	cursor: default;

	color: #fff;
	letter-spacing: .1em;
}

overlays- h2 {
	font-size: 1.25em;
}

overlays- h3 {
	font-size: 1.2em;
}

overlays- form.horizontal {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

/* Inputs and labels */

overlays- input,
overlays- button {
	border: 0;

	font-size: 1.2em;
	text-align: center;
	font-family: var(--font);
	color: inherit;
}

overlays- input {
	margin: 0;
	width: 100%; /* Inputs automatically have a fixed size */
}

/* Text inputs */

overlays- input:not([type]),
overlays- input[type=""],
overlays- input[type="text"],
overlays- input[type="number"] {
	border-radius: var(--input-border-radius);
	outline: 0;
	box-shadow: 0 2px 12px -4px var(--col-green-0-7f) inset;
}

overlays- .panel input:not([type]):not(.erroneous),
overlays- .panel input[type=""]:not(.erroneous),
overlays- .panel input[type="text"]:not(.erroneous),
overlays- .panel input[type="number"]:not(.erroneous) {
	background: var(--col-green-1-7f);
}

overlays- .panel input.erroneous {
	background: var(--col-yellow-1-7f);
}

overlays- context-menu input:not([type]):not(.erroneous),
overlays- context-menu input[type=""]:not(.erroneous),
overlays- context-menu input[type="text"]:not(.erroneous),
overlays- context-menu input[type="number"]:not(.erroneous) {
	background: var(--col-green-3-7f);
}

overlays- context-menu input.erroneous {
	background: var(--col-yellow-3-7f);
}

overlays- input.error-flash {
	animation: error-flash 1s linear;
}

@keyframes error-flash {
	0% {
		background: var(--error-flash-color);
	}
	50% {
		background: var(--error-flash-color);
	}
}

/* Buttons */

overlays- button,
overlays- ul.bars > li {
	color: #fff;
}

overlays- input[type="color"] {
	width: 3em;
}

overlays- button,
overlays- input[type="color"],
overlays- ul.bars > li.button {
	user-select: none;
}

overlays- .panel button,
overlays- input[type="color"] {
	border-radius: var(--input-border-radius);
}

overlays- .panel button,
overlays- input[type="color"],
overlays- ul.bars > li {
	box-shadow: 0 -4px 12px -8px var(--col-green-0-7f) inset;
}

overlays- .panel button,
overlays- input[type="color"],
overlays- ul.bars > li {
	background: var(--col-green-1-7f);
}

overlays- button:hover,
overlays- input[type="color"]:hover,
overlays- ul.bars > li.button:hover {
	background: var(--col-green-2-7f);
}

overlays- button:active,
overlays- input[type="color"]:active,
overlays- ul.bars > li.button:active {
	background: var(--col-green-0-7f);
}

overlays- label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* Input blocks */

overlays- input-block {
	display: flex;
	flex-direction: column;
}

overlays- input-block > * + label {
	margin-top: .25em;
}

/* Tooltips */

overlays- [title]:not([title=""]) {
	cursor: help;

	text-decoration: underline dotted;
}

/* Bar lists */

overlays- ul.bars {
	min-height: 2em;
	overflow-y: auto;
	padding: 0;
	margin: 0;

	list-style: none;
}

overlays- ul.bars:empty {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--col-green-0-7f);
}

overlays- ul.bars:empty:after {
	content: attr(data-empty-text);

	text-align: center;
	font-style: italic;
	letter-spacing: .2em;

	opacity: .5;
}

overlays- ul.bars > li {
	display: flex;
	align-items: center;
	height: 2.5em;
	padding: 0 1em;
	position: relative;
	overflow: hidden;
	white-space: nowrap;

	cursor: default;
}

overlays- ul.bars > li.highlighted,
overlays- ul.bars > li.highlighted:hover,
overlays- ul.bars > li.highlighted:active {
	background: var(--col-green-0-af);
}

overlays- ul.bars > li > :first-child {
	flex-grow: 1;
}

overlays- ul.bars > li:nth-child(n + 2):before {
	content: " ";
	
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
	width: calc(100% - 20px);
	height: var(--separator-height);

	background: #ffffff7f;
}

/* Toolbar */

overlays- toolbar- {
	height: min-content;
	margin-top: auto;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
}

overlays- toolbar- toolbar-column {
	display: flex;
	flex-direction: column;
}

overlays- toolbar- toolbar-section {
	display: flex;
	flex-direction: column-reverse;
	margin: .5em .5em;
}

overlays- toolbar- toolbar-section toolbar-button-rack {
	display: flex;
	height: 100%;

	overflow: hidden;

	border-radius: 1em;

	pointer-events: initial;

	background: var(--col-green-0_5-df);
	box-shadow: var(--overlay-box-shadow);
}

overlays- toolbar- toolbar-section label {
	min-height: 1em;
	margin-bottom: .25em;

	font-style: italic;
	font-weight: 800;
	white-space: break-word;

	color: #0000007f;
}

overlays- toolbar- button {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 4em;
	height: 4em;
	padding: .5em;
}

overlays- toolbar- button.highlighted,
overlays- toolbar- button.highlighted:hover,
overlays- toolbar- button.highlighted:active {
	background: var(--col-green-0-af);
}

overlays- toolbar- button.subhighlighted,
overlays- toolbar- button.subhighlighted:hover,
overlays- toolbar- button.subhighlighted:active {
	background: var(--col-green-2-7f);
}

overlays- toolbar- button.subhighlighted-pulse {
	animation: subhighlighted-pulse .5s linear;
}


@keyframes subhighlighted-pulse {
	0% {
		background: var(--col-green-2-7f);
	}

	50% {
		background: var(--col-green-2-7f);
	}
}

overlays- toolbar- button + button:before {
	content: " ";
	
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: var(--separator-height);
	height: calc(100% - 8px);

	background: #ffffff7f;
}

overlays- toolbar- separator- {
	align-self: stretch;
	padding-right: var(--separator-height); /* `width` will not work when the parent has `overflow: auto` */

	margin: 0 1em;

	background: #0000003f;
}

/* Transform widget */

overlays- transform-widget {
	padding: .5em;
	display: flex;
	flex-direction: column;
	align-items: center;

	background: #ffffff7f;
	border-radius: 1em;

	transition: opacity .2s ease;
}

overlays- transform-widget > * + * {
	margin-top: 1em;
}

overlays- transform-widget.unused {
	opacity: 0;
}

overlays- axis-highlighter {
	display: flex;
	justify-content: space-evenly;

	font-size: 3em;
	font-weight: 500;
	/* font-style: italic; */
	text-align: center;
}

overlays- axis-highlighter [name] {
	width: 2em;

	color: #777;
	opacity: .3;

	transition: all .3s ease;
}

overlays- axis-highlighter [name].highlighted {
	font-weight: 900;
	/* font-style: initial; */
	opacity: 1;
}

overlays- axis-highlighter [name="X"].highlighted {
	color: #ff4d4d;
}

overlays- axis-highlighter [name="Y"].highlighted {
	color: #8dd941;
}

overlays- axis-highlighter [name="Z"].highlighted {
	color: #2bd9d9;
}

overlays- axis-highlighter [name="W"].highlighted {
	color: #a767e6;
}

/* Vector editor */

overlays- vector-editor > form {
	display: grid;
	
	grid-template-columns: auto auto;
	gap: 4px;
}

/* Rotor editor */

overlays- rotor-editor > form {
	display: grid;
	
	grid-template-columns: repeat(3, auto);
	grid-template-rows: auto repeat(4, auto);
	gap: 4px;
}

overlays- rotor-editor angle-editor,
overlays- rotor-editor angle-editor input {
	font-size: 1.2em;
}

overlays- rotor-editor angle-editor {
	margin: 1em 0;
}

overlays- rotor-editor angle-editor input {
	width: 4em;
}

overlays- rotor-editor angle-editor,
overlays- rotor-editor .fill-row {
	grid-column: 1 / -1;
}

/* Angle editor */

overlays- angle-editor input {
	margin: 0 .25em;

	text-align: right;
}
overlays- angle-editor form {
	display: flex;
	justify-content: center;
}

/* Panel layout */

overlays- .panel {
	width: 240px;

	border-radius: 1em;

	background: var(--col-green-2-cf);
}

overlays- .panel > *:not(:empty) {
	padding: var(--panel-section-padding);
}

overlays- .panel > h2 {
	box-shadow: 0 2px 16px var(--col-green-1-7f);

	background: var(--col-green-0-7f);
}

overlays- .panel > .panel-content {
	max-height: 250px;
	overflow: auto;
}

overlays- .panel > .panel-content * + h3 {
	padding: 0;

	margin-top: 1em;
}

overlays- .panel > .panel-content .panel-content {
	padding: var(--panel-section-padding);
	/* Align to edges of outer panel */
	position: relative;
	left: calc(-1 * var(--panel-section-padding-horizontal));
	width: calc(100% + 2 * var(--panel-section-padding-horizontal));

	background: var(--col-green-1_5-3f);
}

overlays- .panel ul.bars {
	max-height: 200px;

	border-radius: var(--input-border-radius);
}

overlays- .panel button {
	margin: .5em 0;
}

main > menu-bar {
	height: 3em;

	background: #668b8f;
}

svg.defs {
	display: none;
}