/* Reserve a bit of space below nav if a fixed mini-player appears */
@media (min-width: 640px){
	body { scroll-margin-top: 96px; }
}
#main{ padding: 10px; display: flex; flex-direction: row; gap: 0; }
#main #left{ width: 50%; }
#main #right{ width: 50%; text-align: right; }

#footer{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	color: var(--text-muted);
	padding: 8px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	white-space: nowrap; /* do not wrap footer content */
}

.block{ border: 1px solid var(--border); background: var(--surface-2); color: var(--text); margin: 10px 0; padding: 12px; text-decoration: none; display: flex; flex-direction: row; width: 100%; align-items: center; gap: 12px; border-radius: 8px; overflow: hidden; }
.status{ width: 16px; height: 16px; background: #0c1220; border: 1px solid var(--border); border-radius: 4px; }

input[type="text"], input[type="email"], input[type="password"], input[type="url"], select, textarea{
	border: 1px solid var(--border);
	background: #0b1220;
	height: 32px;
	padding: 8px 10px;
	color: var(--text);
	border-radius: 6px;
}

/* Do not allow resizing of textareas */
textarea{ resize: none; }

/* Responsive: stack main content on small screens */
@media (max-width: 720px){
	#main{ flex-direction: column; }
	#main #left, #main #right{ width: 100%; text-align: left; }
	.block{ flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Fixed mini-player affordances */
/* Ensure anchor jumps and in-page links account for the fixed player */
html{ scroll-padding-top: 120px; }