html {
	font-family: sans-serif;
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	height: 100vh;
	margin: unset;
	padding: 0.5rem;
	/* layout of controls, results */
	display: flex;
	flex-flow: column;
	gap: 0.5rem;
}

header {
	/* layout of header, controls, msg box */
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	align-items: center;
}

header h1 {
	margin: unset;
	display: inline;
	font-size: 1.3rem;
}

nav {
	flex-grow: 1;

	display: flex;
	align-items: center;
	gap: 0.5rem;
	/* keep menu right-aligned on mobile */
	justify-content: space-between;
}

nav ol {
	margin: unset;
	padding-left: unset;
	display: flex;
	gap: 0.5rem;
}

nav ol > li {
	display: inline;
}

#controls {
	/* keep nav close to original size unless on own line */
	flex-grow: 999;
}

#swStatus::before {
	content: "Service Worker Status: ";
}

#status {
	font-style: italic;
	margin: unset;
}

#status.warn {
	background-color: yellow;
}

#status.error {
	background-color: orangered;
}

#location {
	width: 16ch;
}

div#results {
	flex: 1 1 auto;
	display: flex;
	flex-flow: column;
	gap: 0.5rem;
}

details#map-pane {
	flex: 0 0 auto; /* Closed state */
	/* Share height info to properly size contents */
	/* TODO: check if this size is reasonable on other systems */
	--summary-height: 1.25rem;
}

details#map-pane[open] {
	flex: 0.5 0 auto;
}

details#map-pane > summary {
	height: var(--summary-height);
}

#map {
	/* TODO: decide on better responsive minimum height */
	min-height: 200px;
	height: calc(100% - var(--summary-height));
}

table#table-pane {
	flex: 1 1 0;
	display: flex;
	flex-flow: column;
	height: 100%;
	min-height: 10rem; /* Allow shrinking below content size */
	width: 100%;
}

table#table-pane thead {
	position: sticky;
	flex: 0 0 auto;
}

table#table-pane tbody {
	overflow-y: auto;
	flex: 1 1 auto;
}

table#table-pane tr {
	width: 100%;
	display: table;
	table-layout: fixed;
}

/* horizontal layout */
@media (min-aspect-ratio: 1/1) {
	div#results {
		flex-flow: row;
		flex: 0 1 auto;
		min-height: 100px; /* allow shrinking */
		height: 100%; /* map fills screen if results don't */
	}

	#map {
		/* TODO: decide on better responsive minimum height */
		min-width: 200px;
	}

	/* TERRIBLE HACK:
	 * "float" when collapsed so that summary doesn't take up horizontal space.
	 * FIXME: on small narrow but still horizontal screens, overlaps with table header.
	 */
	#map-pane {
		z-index: 1;
		width: 0;
	}
	#map-pane[open] {
		width: auto;
	}
}

#about-pane ul {
	padding-left: 1rem;
}

#about-pane pre {
	white-space: pre-wrap;
}