body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--text-sm);
	margin: 0;
	display: flex;
	height: 100vh;
	width: 100vw;
	overflow: hidden;

	@media (width < 40rem) { flex-direction: column-reverse }
}

body.hw-native {
	.modal { padding-bottom: var(--ios-tabbar-spacing) }
	#content { padding-bottom: calc(2 * var(--ios-tabbar-spacing)) }
	#message-form { padding-bottom: var(--ios-tabbar-spacing) }
}

#nav {
	display: flex;
	@media (width < 40rem) { display: none }

	flex-direction: column;
	flex-basis: var(--nav-width);
	flex-shrink: 0;
	justify-content: space-between;

	.logo {
		padding: calc(6 * var(--spacing));
		border-bottom: 1px solid var(--color-neutral-200);

		img { height: calc(8 * var(--spacing)) }
	}

	> ul {
		padding: calc(4 * var(--spacing));
		flex-grow: 1;
	}

	li {
		display: flex;
		align-items: center;
		padding: calc(2 * var(--spacing)) calc(3 * var(--spacing));
		border-radius: var(--radius-lg);
		font-size: var(--text-sm);
		font-weight: var(--font-weight-medium);
		height: calc(12 * var(--spacing));
		color: var(--bg-color-xdark);

		> a {
			display: flex;
			align-items: center;
			gap: calc(3 * var(--spacing));
			width: 100%;
			height: 100%;

			> svg {
				width: calc(5 * var(--spacing));
				height: calc(5 * var(--spacing));
				margin-right: calc(3 * var(--spacing));
			}
		}

		&.current {
			background-color: var(--bg-color-light);
			color: var(--text-color);
		}
	}

	.auth-user {
		padding: calc(4 * var(--spacing));
		border-top: 1px solid var(--color-neutral-200);
	}
}

#nav-project {
	display: block;
	@media (width < 40rem) { display: none }

	margin-bottom: calc(6 * var(--spacing));

	.breadcrumbs {
		display: flex;
		align-items: center;
		gap: calc(1.5 * var(--spacing));

		a { text-decoration: underline }
	}

	.breadcrumb-separator {
		width: calc(4 * var(--spacing));
		height: calc(4 * var(--spacing));
	}

	header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: calc(6 * var(--spacing));

		h1 { font-size: var(--text-xl) }
	}
}

#nav-project-mobile {
	display: none;
	@media (width < 40rem) { display: flex }

	background-color: white;
	flex-direction: column;

	.project-select {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: calc(2 * var(--spacing)) calc(4 * var(--spacing));
		border-bottom: 1px solid var(--color-neutral-200);

		input { background-color: white }
	}

	> ul {
		flex: 1;
		display: flex;
		border-bottom: 1px solid var(--color-neutral-200);
	}

	li {
		font-size: var(--text-xs);
		color: var(--bg-color-xdark);
		flex: 1;

		> a {
			display: flex;
			flex-direction: column;
			gap: calc(1 * var(--spacing));
			align-items: center;
			padding: calc(3 * var(--spacing)) 0;

			svg {
				width: calc(5 * var(--spacing));
				height: calc(5 * var(--spacing));
			}
		}

		&.current {
			border-bottom: 2px solid black;
			color: var(--text-color);
		}
	}
}

#main {
	background-color: var(--bg-color);
	flex-grow: 1;
	overflow-y: scroll;
	overflow-x: hidden;
}

#content {
	padding: calc(6 * var(--spacing));

	@media (width < 40rem) { padding: calc(4 * var(--spacing)) }

	&.hw-native { background: white }
}