html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	background: var(--background);
	color: var(--foreground);
	font-display: swap;
}

body {
	font-family: 'Roboto', sans-serif;
}

.blur-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.main-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.4s ease;
}

	.main-image.loaded {
		opacity: 1;
	}

/* Filenames matter here beyond just correctness: Windows dev machines have a case-insensitive
   filesystem, so a lowercase URL against these PascalCase files (Roboto-Regular.woff2, etc.)
   resolved fine locally — but this app deploys to a case-sensitive Linux server (see
   DEPLOYMENT.md), where the old lowercase URLs 404'd on every request. That silently meant this
   app has never actually served its custom Roboto font in production; every visitor there got
   the plain 'sans-serif' fallback instead, invisibly, because a missing @font-face source just
   falls back rather than erroring. woff2-only now, no .ttf fallback source: woff2 already has
   effectively universal support among browsers that can run this app's ES modules/import maps
   in the first place (see _Layout.cshtml), so shipping a second, ~2x-larger TrueType copy of
   the same two weights bought nothing. The unused Roboto-*.ttf files under wwwroot/fonts were
   deleted along with this change. */
@font-face {
	font-family: 'Roboto';
	src: url('/fonts/Roboto-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('/fonts/Roboto-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------- */
.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: break-word;
}
/* ---------------------------------------------------------------- */
.btn-group {
	background-color: #f3f4f6;
	display: inline-flex;
	border-radius: 15px;
	padding: 3px;
	gap: 10px;
	margin-bottom: 10px;
	/*box-shadow: inset 0 2px 4px -1px rgba(0, 0, 0, 0.1), inset 0 2px 4px -1px rgba(0, 0, 0, 0.01);*/
	box-shadow: inset 0 1px 4px -1px rgba(0, 0, 0, 0.1), inset 0 1px 4px -1px rgba(0, 0, 0, 0.01);
	border: 1px solid rgba(0,0,0,0.1);
	min-width: 400px;
}

	.btn-group input[type="radio"] {
		display: none;
	}

	.btn-group label.btn-group-option {
		/*color: #9ca3af;*/
		color: rgba(0,0,0,0.4);
		width: 100px;
		text-align: center;
		position: relative;
		cursor: pointer;
		padding: 10px 16px;
		border-radius: 12px;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: break-word;
		transition: all .4s ease-in-out;
		border: 1px solid rgba(0,0,0,0);
	}

	.btn-group input[type="radio"]:checked + label.btn-group-option {
		background-color: #fff;
		/*box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.06);*/
		box-shadow: 0 2px 5px -1px rgba(163, 179, 255,.5), 0 2px 4px -1px rgba(163, 179, 255,0.2);
		color: #6A7282;
		border: 1px solid rgba(163, 179, 255,.85);
	}

/* ---------------------------------------------------------------- */
.checkbox-group {
	display: flex;
	flex-direction: row;
	gap: 10px;
	margin-bottom: 16px;
}

	.checkbox-group .checkbox-btn {
		flex: 1;
		background: #f3f4f6;
		padding: 14px;
		cursor: pointer;
		border-radius: 8px;
		position: relative;
		overflow: hidden;
	}

		.checkbox-group .checkbox-btn:hover {
			background: #e5e7eb;
		}

	.checkbox-group .checkbox-mark {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0,0,0,0.05);
		box-sizing: border-box;
		border: 2px solid rgba(255,255,255,1);
	}

	.checkbox-group input[type="radio"] {
		display: none;
	}

		.checkbox-group input[type="radio"]:checked + .checkbox-btn {
			background-color: #9810FA;
		}

	.checkbox-group input[type=radio]:checked + .checkbox-btn .checkbox-mark {
	}

		.checkbox-group input[type=radio]:checked + .checkbox-btn .checkbox-mark::before {
			content: "";
			display: block;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			background: #fff;
		}

	.checkbox-group input[type="radio"]:checked + .checkbox-btn label {
		color: #fff;
		font-weight: 700;
	}

	.checkbox-group label {
		color: #9ca3af;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		padding-left: 46px;
		padding-right: 10px;
		display: flex;
		align-items: center;
		cursor: pointer;
	}