/* ==========================================================
   Layout
   ========================================================== */

html,
body{
	width:100%;
	height:100%;
}

body{
	display:flex;
	flex-direction:column;
	background:var(--paper);
	background-image: radial-gradient(rgba(0,0,0,0.15) 1px, transparent 0), radial-gradient(rgba(0,0,0,0.1) 1px, transparent 0);
	background-size: 3px 3px;
	background-position: 0 0, 1px 1px;
	color:var(--ink);
	overflow:hidden;
}

#app{
	display:flex;
	flex-direction:column;

	width:100%;
	height:100%;
}

#appHeader{

	height:var(--header-height);

	display:flex;
	align-items:center;
	justify-content:space-between;

	padding:0 var(--space-md);

	border-bottom:
		var(--border-width)
		solid
		var(--border);

	background:var(--paper);

	flex-shrink:0;
}

#pageTitle{
	font-size:var(--font-lg);
	font-weight:bold;
}

#appContent{

	flex:1;

	padding:var(--space-md);

	overflow-y:auto;

	padding-bottom:
		calc(
			var(--bottom-nav-height)
			+
			var(--space-md)
		);

}

.container{

	width:100%;
	max-width:768px;

	margin:0 auto;

}

.section{

	margin-bottom:var(--space-lg);

}

.page{

	display:flex;

	flex-direction:column;

	gap:var(--space-md);

}

.page-header{

	display:flex;

	align-items:center;

	justify-content:space-between;

	margin-bottom:var(--space-md);

}