:root {
	--color-blue: #2b78e4; /* TODO probably unused */

	--color-accent-1: #f37735;
	--color-background: #09090a;
	--color-accent-2: #20261f;
	--color-accent-3: #a3905c;

	--color-bg-dark-1: #09090a;
	--color-bg-dark-2: #1f1f22;

	--color-fg-dark-1: #737373;
	--color-fg-dark-2: #444;

	--color-bg-light-1: white;
	--color-bg-light-2: #eaeaea;
	--color-fg-light-1: #eaeaea;

	--color-border-light: #aaa;
	--color-border-dark: #3b3b40;

	--color-muted-light: #a8a8a8;
	--color-muted-dark: #666;
}
* {
	box-sizing: border-box;
}
html {
	font-family: 'Open Sans', sans-serif;
	font-optical-sizing: auto;
	font-variation-settings: "wdth" 100;
}
body.--dark, main.--dark, up-drawer.--dark up-drawer-box, up-modal.--dark up-modal-box, up-popup.--dark {
	background-color: var(--color-bg-dark-1);
	color: white;
}
body {
	margin: 0;
	display: flex;
	min-height: 100vh;
}
body > * {
		flex-grow: 1;
	}
a, a:visited, a:active {
	color: var(--color-accent-1);
}
input, button, textarea {
	font-size: inherit;
	font-family: inherit;
}
.icon {
	height: 1.5em;
	vertical-align: -0.4em;
}
div:has(> #__POSTHOG_TOOLBAR__), [class^="PostHogSurvey-"] {
	position: absolute;
}
.--muted {
	color: var(--color-muted-light);
}
.--dark h1, .--dark h2, .--dark h3, .--dark h4, .--dark h5, .--dark h6 {
		color: var(--color-accent-1);
	}
.--dark .--muted {
		color: var(--color-muted-dark);
	}
.button {
	display: inline-block;
	background-color: white;
	border: 1px solid #292929;
	padding: 0.35em 1em;
	border-radius: 0.5em;
	color: #292929;
	cursor: pointer;
}
a.button, a:visited.button, a:active.button {
		color: #292929;
		text-decoration: none;
	}
.button:hover {
		background-color: #f6f6f6;
	}
.--dark .button {
		border: none;
	}
.button--neutral {
	background: none;
	color: inherit;
}
a.button--neutral, a:visited.button--neutral, a:active.button--neutral {
		color: inherit;
	}
.--dark .button--neutral {
		border: 1px solid white;
	}
.--dark .button--neutral:hover {
			background-color: var(--color-bg-dark-2);
		}
.button--primary {
	border-color: var(--color-accent-1);
	background-color: var(--color-accent-1);
	color: white;
}
a.button--primary, a:visited.button--primary, a:active.button--primary {
		color: white;
	}
.button--primary:hover, a.button--primary:hover {
		background-color: #f68246;
	}
.button--large {
	padding: 0.75em 1.25em;
}
input {
	padding: 0.85em 0.75em;
	font-family: inherit;
	font-size: inherit;
	border-radius: 0.35em;
	border: 1px solid gray;
}
.--dark input {
		background-color: var(--color-bg-dark-2);
		color: white;
		border-color: var(--color-border-dark);
	}
input:focus {
		outline: none;
		border-color: var(--color-accent-1);
	}
up-drawer[size=medium] up-drawer-box {
	width: 30em;
}
main.--narrow {
	max-width: 40em;
	margin: 0 auto;
}
nav + main {
	padding: 0 1em;
}
nav + main:has(> div#map) {
	padding: 0;
}
.card {
	background-color: var(--color-bg-dark-2);
	border: 1px solid var(--color-border-dark);
	border-radius: 1em;
	padding: 1em;
}
.card_title {
	font-weight: bold;
}
.card_header {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}
.card_item {
	margin: 0.5em 0;
}
.card_item_icon {
	margin-right: 0.5em;
	color: var(--color-accent-3);
}
form {
	max-width: 30em;
	margin: 0 auto;
}
form > h1, form > h2 {
		margin: 0.25em 0;
	}
form > h1 {
		font-size: 1.2em;
		text-align: center;
	}
.hackform > label, .hackform .hackform_label {
		display: block;
		margin: 0.75em 0;
		color: gray;
	}
.hackform > label > input, .hackform .hackform_label > input {
			color: white;
		}
.hackform > fieldset {
		display: block;
		border: none;
		padding: 0;
	}
.hackform > label > span, .hackform .hackform_label > span, .hackform > fieldset > label {
		display: block;
		margin-bottom: 0.25em;
	}
.hackform input {
		width: 100%;
	}
input[disabled], .hackform label > input[disabled] {
	color: var(--color-fg-dark-1);
	cursor: not-allowed;
}
.radiobutton {
	display: inline-block;
	border: 1px solid var(--color-border-dark);
	border-radius: 0.5em;
	padding: 0.85em;
	color: white;
	background-color: var(--color-bg-dark-2);
}
.radiobutton:has(input:checked) {
		border-color: var(--color-accent-1);
		color: var(--color-accent-1);
	}
.radiobutton input {
		display: none;
	}
.modal-title > .icon {
		color: var(--color-accent-1);
	}
.modal-name {
	font-size: 2.5em;
	font-weight: normal;
}
.modal-name, .--dark .modal-name {
		color: inherit;
	}
.navbar {
	flex: 0 0 17em;

	z-index: 10;
	padding: 1em;
	background-color: #09090a;
	color: white;
	box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.75);
	border-right: 1px solid var(--color-border-dark);

	display: flex;
	flex-flow: column nowrap;

	transition: flex-basis 0.2s ease-in-out;
}
.navbar_separator {
	border: none;
	margin: 1em 0;
}
.navbar > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.navbar_brand {
	display: block;
	height: 2.8rem;
	margin: 0 auto;
}
.navbar_item {
	height: 3em;
	position: relative;
	margin: 0.75em 0;
	padding: 0 0.75em;

	display: flex;
	align-items: center;
	gap: 1em;

	border-radius: 0.5em;
	color: inherit;

}
.navbar_item:hover {
		background-color: #141416;
		cursor: pointer;
	}
.navbar_item > a {
		flex-grow: 1;
		align-self: stretch;

		display: flex;
		align-items: center;
		gap: 1em;

		color: inherit;
		text-decoration: none;
	}
.navbar_item_icon {
		height: 1.5em;
		color: var(--color-accent-1);
	}
.navbar_item--isActive {
	background-color: #141416;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 4px solid var(--color-accent-1);
}
.navbar_item--isActive:hover {
		background-color: #18181a;
	}
.navbar_item_dot {
	position: absolute;
	right: 1em;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background-color: var(--color-accent-1);
}
.notification {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	padding: 0.75em;
	gap: 1em;
	border-radius: 0.5em;
}
.notification:hover {
		background-color: var(--color-bg-light-2);
		cursor: pointer;
	}
a.notification {
		color: inherit;
		text-decoration: none;
	}
.notification_icon {
	color: var(--color-accent-1);
}
.notification_text {
	flex-grow: 1;
	font-size: 87.5%;
}
.notification_unread-dot {
	background-color: var(--color-accent-1);
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	flex-shrink: 0;
}
.notifications--empty {
	color: var(--color-muted-light);
}
.notifications--empty > .icon {
		display: block;
		margin: 0 auto;
		height: 3em;
		aspect-ratio: 1 / 1;
	}
table {
	width: 100%;
	border-collapse: collapse;

	--color-border: var(--color-border-light);
}
.--dark table {
		--color-border: var(--color-border-dark);
	}
td, th {
	padding: 0.5em;
	border-top: 1px solid var(--color-border);
}
thead > tr > th {
	border-top: none;
}
th {
	color: var(--color-fg-dark-1);
	text-align: left;
	text-transform: uppercase;
	font-size: 0.75em;
}
tbody > tr:last-of-type > td {
	border-bottom: 1px solid var(--color-border);
}
thead > tr > th, tbody > tr:nth-of-type(2n) > td {
	background-color: #eee;
}
.--dark thead > tr > th, .--dark tbody > tr:nth-of-type(2n) > td {
		background: none;
	}
.callout {
	background-color: #eee;
	border: 1px solid #666;
	padding: 0.75em;
	margin: 0.5em 0;

	display: grid;
	grid-template-columns: 1.5em auto;
	align-items: center;
	gap: 0.5em;
}
.callout > .icon {
		grid-column: 1 / 2;
	}
.callout > * {
		grid-column: 2 / 3;
		line-height: 1.5;
	}
.--dark .callout {
		background-color: #333;
	}
.callout.info {
		background-color: #e4f9ff;
		border-color: #0dbaff;
		color: #013c53;

		/** TODO: dark */
	}
.callout.warning {
		background-color: #fff6e5;
		border-color: #f19e00;
		color: #4e3200;
	}
.--dark .callout.warning {
			background-color: #3c2601;
			border-color: #f19e00;
			color: #dcccaf;
		}
.callout.error {
		background-color: #ffeeee;
		border-color: #ef1111;
		color: #370000;
	}
.--dark .callout.error {
			background-color: #330000;
			border-color: #ef1111;
			color: #fbdbdb;
		}
.callout.success {
		background-color: #f7fff1;
		border-color: #5ed00f;
		color: #193e00;

		/** TODO: dark */
	}
#map {
	height: 100vh;
}
.map-control {
	margin: 10px 0 0 10px;
	pointer-events: all;
}
.mob_screen-cover {
	display: none;
}
.navbar_mobile-display {
	display: none;
}
@media screen and (max-width: 800px) { /* Keep in sync with script.js. */
	:root {
		font-size: 14px;
	}

	body {
		flex-flow: column-reverse nowrap;
		max-height: 100vh;
	}

	.navbar + main {
		flex-grow: 1;
		position: relative;
		padding-bottom: 3em;
		overflow: scroll;
	}
	nav + main:has(> div#map) {
		display: flex;
		flex-direction: column;
	}
	nav.box-shadow {
		box-shadow: none;
	}
	div#map {
		flex-grow: 1;
		height: auto;
	}
	#map {
		height: 100%;
	}

	.navbar {
		//position: fixed;
		//bottom: 0;
		width: 100vw;
		flex-basis: 4em;
		padding: 0 1em;
	}
		.navbar > ul {
			display: flex;
			flex-flow: row nowrap;
		}
	.navbar_item {
		flex-grow: 1;
	}
		.navbar_item, .navbar_item > a {
			justify-content: center;
		}
	.navbar_item--isActive {
		border: none;
		border-radius: 0.5em;
	}
	.navbar_item_icon {
		color: var(--color-fg-dark-1);
	}
	.navbar_item--isActive .navbar_item_icon {
		color: var(--color-accent-1);
	}
	.navbar_item_name {
		display: none;
	}
	.navbar_brand, .navbar_separator {
		display: none;
	}

	.--hide-mobile {
		display: none;
	}

	div.table-wrapper {
		max-width: 100%;
		overflow-x: scroll;
	}
}
@supports (height: 100dvh) {
	@media screen and (max-width: 800px) {
		body {
			min-height: 100dvh;
			max-height: 100dvh;
		}
	}
}