/* ==========================================================
   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 4px;
	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:70px;
}

.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);
}