#Map /* Map with overlay elements */
{
	width: 100%; height: 100%;
	position: relative;
	
	--overlay-background: rgba(0, 0, 0, 0.1);
	
	.Map /* the div composed by leaflet */
	{
		width: 100%; height: 100%;
		z-index: 1;
	}
	
	.Overlay /* full-sized container for overlay elements */
	{
		width: 100%; height: 100%;
		position: absolute;
		top: 0; left: 0;
		z-index: 2;
		pointer-events: none; /* must not hide leaflet map interaction */

		/* container for buttons */
		
		nav
		{
			display: flex;
			row-gap: var(--gap);
			column-gap: var(--gap);
			padding: var(--gap);

			button { pointer-events: auto; }
		}
		
		/* transient messages and info elements */
		
		output
		{
			width: fit-content;
			background-color: var(--background-color);
			border: 1px solid var(--border-color);
			border-radius: 5px;
			user-select: none;
			text-wrap-mode: nowrap;
			overflow: hidden;
			padding: 2px 4px;
			
			img { vertical-align: middle; }

			small { font-size: 80%; }

			.Val
			{
				display: inline-block; /* otherwise a min-width cannot be set */
				text-align: right;
				font-family: Consolas, monospace;
				font-weight: bold;
			}

			.Unit
			{
				display: inline-block;
				font-size: 60%;
			}
		}
		
		output.TransInfo /* temporary text information */
		{
			position: absolute;
			top: 25%; left: 50%;
			transform: translate(-50%, -50%);
			max-width: calc(100% - 2 * var(--gap));
			text-overflow: ellipsis;
			display: none; /* initial state  */
		}
		
		/* sub layout */

		--nav-size: calc(var(--button-size) + 2 * var(--gap));
		
		display: flex;
		flex-direction: column;

		.Info
		{
			flex: 0 1 auto;
			display: none; /* avoids a flicker at page load, because initial state is off */
		}
		
		.Trans
		{
			flex: 1 1 auto;
			position: relative;
			overflow: hidden; /* for nav buttons when screen size becomes extremely small */

			/* sub layout */

			display: flex;
			flex-direction: column;

			.DynamicView
			{
				flex: 1 1 auto;
				position: relative;
				
				img.Cursor
				{
					position: absolute;
					top: 50%; left: 50%;
					transform: translate(-50%, -50%);
					display: none;
				}
			}
			
			.Profile
			{
				flex: 0 1 auto;
				max-height: 30vh;
				width: 100%;
				display: none; /* initial state */
			}
			
			/* absolutely positioned, transient overlays */
			
			nav
			{
				z-index: 1;
				position: absolute;
				bottom: 0; right: 0;
				max-height: 100%;
				width: min-content;
				flex-direction: column-reverse;
				flex-wrap: wrap-reverse;
				padding-bottom: 0;
				
				button { display: none; } /* initial state  */
			}

		}

		.Footer
		{
			flex: 0 1 auto;
			overflow: hidden; /* no scroll bar when viewport gets extremely small */
			display: flex;
			flex-direction: row;
			
			.Swipe
			{
				flex: 1 1 auto;
			}

			nav
			{
				flex: 0 1 auto;
				flex-direction: row-reverse;
			}
		}
	}
}