/* Global */
:root {
	--white: #ffffff;
	--lighter-grey: #c6c6c6;
	--light-grey: #f8f8f8;
	--grey: #414141;
	--dark-grey: #2f2f2f;
	--darker-grey: #292929;
	--border-grey: #222222;
	--meta-grey: #a0a0a0;
	--secondary-grey: #717171;
	--translate-grey: #545454;
	--shadow-grey: rgba(0, 0, 0, 0.5);
	--yellow: #e5ca5f;
	--light-yellow: #fbf15f;
	--dark-yellow: #cdb454;
	--light-blue: #7ed3f6;
	--lighter-blue: #94e0ff;
	--green: #6eb660;
	--light-green: #8ecf8e;
	--red: #af404a;
	--darker-red: #8f303a;
	--light-red: #ff707d;
	--lighter-red: #ff8c97;
	--orange: #FFB380;
	--light-orange: #FFD1AD;
}

html, body, .container {
	height: 100%;
}

body {
	background-image: url(../images/background.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	font-family: 'Roboto Condensed', sans-serif;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	color: var(--light-grey);
}

main {
	flex: 1;
}

/* Default dark panel behind page content. :where() keeps specificity at 0 so
   any class override on the container (.create_edit grey, .login-register
   transparent, etc.) wins without needing !important. */
:where(main > .container, main > .container-fluid) {
	background-color: var(--dark-grey);
}

/* Reusable narrow page wrapper. Caps a top-level page (or an embedded
   surface) at a comfortable reading width and centers it. Apply alongside
   `.container` so Bootstrap's responsive width kicks in below the cap. */
.compact-page {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

a {
	text-decoration: underline;
	color: var(--yellow);
}

	a:hover {
		color: var(--light-yellow);
	}

.darkerGreyBg {
	background-color: var(--darker-grey);
}

.text-muted {
	color: var(--meta-grey) !important;
}

.form-text {
	color: var(--meta-grey);
}

.metaGreyColor {
	color: var(--meta-grey);
}

.modal-header, .modal-footer {
	border: none;
}

.img-aspect-ratio {
	height: 100%;
	object-fit: cover;
}

textarea {
	color: var(--light-grey);
	border: none;
	background-color: var(--dark-grey);
}

	textarea:focus {
		color: var(--light-grey);
		background-color: var(--grey);
	}

h1 {
	font-weight: 700;
	color: var(--yellow);
}

h2 {
	color: var(--lighter-grey);
	font-size: 30px;
	font-weight: 700;
}

h3 {
	background: none;
	font-size: 24px;
	font-weight: 700;
}

h4 {
	background: none;
	font-size: 20px;
	font-weight: 700;
}

h5 {
	background: none;
	font-size: 18px;
	font-weight: 700;
}

h6 {
	background: none;
	font-size: 16px;
	font-weight: 700;
}

/* Button Styles */
.btn {
	color: var(--yellow);
	background: var(--border-grey);
	text-transform: uppercase;
	border: none !important;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.8em;
}

	.btn svg {
		width: auto;
		height: 26px;
	}

	.btn:hover {
		border: none !important;
		color: var(--light-yellow);
		background: var(--darker-grey);
	}

	.btn:focus {
		box-shadow: none;
	}

.btn-warning {
	background-color: var(--yellow);
	color: var(--border-grey);
	font-weight: 700;
	text-transform: uppercase;
}

	.btn-warning:hover,
	.btn-warning:active,
	.btn-warning:focus {
		color: var(--border-grey);
		background-color: var(--light-yellow);
	}

.btn-primary {
	background-color: var(--light-blue);
	color: var(--border-grey);
}

	.btn-primary:hover,
	.btn-primary:active,
	.btn-primary:focus {
		background-color: var(--lighter-blue);
		color: var(--border-grey);
	}

	.btn-primary:disabled {
		background-color: var(--light-blue);
		color: var(--border-grey);
		cursor: not-allowed;
	}

.btn-success {
	background-color: var(--green);
	color: var(--border-grey);
}

	.btn-success:hover,
	.btn-success:active,
	.btn-success:focus {
		background-color: var(--light-green);
		color: var(--border-grey);
	}

.btn-danger {
	background-color: var(--red);
	color: var(--light-grey);
}

	.btn-danger:hover {
		background-color: var(--light-red);
		color: var(--light-grey);
	}

	.btn-danger svg {
		fill: currentColor;
	}

.btn-outline-secondary {
	border: 1px solid var(--meta-grey);
}

.btn-secondary {
	background-color: var(--border-grey);
	color: var(--yellow);
}

	.btn-secondary:hover {
		background-color: var(--grey);
		color: var(--yellow);
	}

.btn-yellow-icon {
	background: none;
}

	.btn-yellow-icon svg {
		width: auto;
		height: 21px;
	}

		.btn-yellow-icon svg path {
			fill: var(--yellow);
		}

			.btn-yellow-icon svg path:hover {
				fill: var(--light-yellow);
			}

.text-success {
   color: #18d276 !important;
}

.version svg path {
	fill: var(--yellow);
}

.version:hover svg path {
	fill: var(--light-yellow);
}

.btn.light-svg, .btn.dark-svg, .btn.yellow-svg {
	background: none;
}

	.btn.dark-svg svg path {
		fill: var(--border-grey);
	}

	.btn.light-svg svg path {
		fill: var(--light-grey);
	}

	.btn.yellow-svg svg path {
		fill: var(--yellow);
	}

.alert-info {
	background-color: var(--border-grey);
	color: var(--light-grey);
	border: none;
	border-radius: 10px;
}

	.alert-info code {
		background-color: var(--dark-grey);
		color: var(--yellow);
		cursor: pointer;
		padding: .5em;
	}

		.alert-info code svg {
			width: 15px;
			height: auto;
			fill: currentColor;
		}

		.alert-info code:hover {
			background-color: var(--grey);
		}

.form-select, .form-control {
	background-color: var(--grey);
	border: none;
	color: var(--yellow);
	font-weight: 700;
	cursor: pointer;
}

.form-select {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16"><path fill="none" stroke="%23e5ca5f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m2 5 6 6 6-6"/></svg>');
	text-transform: uppercase;
}

	.form-select:hover {
		background-color: var(--border-grey);
	}

	.form-select:focus {
		box-shadow: none;
	}

.form-control {
	cursor: text;
}

	.form-control::placeholder {
		color: var(--meta-grey);
	}

	.form-control:focus {
		color: var(--yellow);
		background-color: var(--border-grey);
		box-shadow: none;
	}

.table > :not(caption) > * > * {
	color: white !important;
	background-color: inherit !important;
}

/* Tooltip Code */
.tooltip-inner {
	background-color: var(--yellow) !important;
	color: var(--border-grey) !important;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	line-height: 1.1 !important;
}

.tooltip-arrow::before {
	border-top-color: var(--yellow) !important;
}

/* Header and Navigation */
nav {
	background-color: var(--grey);
	border-bottom: 1px solid var(--border-grey);
	box-shadow: 0 5px 5px 0 var(--shadow-grey);
}

.nav-link, .dropdown-toggle {
	display: flex;
	align-items: center;
	background-color: var(--dark-grey);
	font-weight: 700;
	border-radius: 3px;
	text-transform: uppercase;
	font-size: 15px;
	position: relative;
	color: var(--lighter-grey);
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

	/* Tighten the global p-3 / gap-2 utilities on top-level navbar items so the buttons
	   read as a row of tabs rather than oversized blocks, but keep enough vertical
	   weight to feel substantial. */
	.navbar .navbar-nav > .nav-item > .nav-link {
		padding: 12px 16px !important;
		gap: 8px !important;
	}

	/* Below lg (navbar collapses): keep the hamburger fixed-width on the left and cap the
	   logo's height so its intrinsic width can't push the toggler onto a new row. The
	   image scales proportionally, so capping height gives a predictable narrow width.
	   Container wrap stays on (Bootstrap default) so the expanded collapse panel can drop
	   to its own full-width row below toggler + brand. */
	@media (max-width: 991.98px) {
		.navbar .navbar-toggler {
			flex-shrink: 0;
			margin-right: 10px;
		}

		.navbar .navbar-brand {
			margin-right: 0;
			min-width: 0;
		}

		.navbar .navbar-brand img {
			max-height: 44px;
			width: auto;
			max-width: 100%;
		}
	}

	/* Logged-in avatar variant: the trigger holds the user's circular profile picture
	   plus an optional notification badge. Treat it as a borderless avatar control
	   rather than a tab - no background, no underline indicator, the avatar IS the
	   button. Selector deliberately mirrors the tab-padding rule above (and adds the
	   marker class) so it wins on specificity, not just !important. */
	.navbar .navbar-nav > .nav-item > .nav-link.nav-link-avatar {
		padding: 0 !important;
		background-color: transparent !important;
		gap: 6px !important;
	}

		.navbar .navbar-nav > .nav-item > .nav-link.nav-link-avatar:hover {
			background-color: transparent !important;
		}

		.navbar .navbar-nav > .nav-item > .nav-link.nav-link-avatar::after {
			display: none;
		}

	.nav-link:hover, .dropdown-toggle:hover {
		background-color: var(--darker-grey)
	}

	.nav-link::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 4px;
		z-index: 1;
		bottom: 0;
		left: 0;
		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
	}

	.nav-link svg {
		display: block;
		height: 26px;
		width: auto;
		fill: currentColor;
		vertical-align: middle;
	}

	.nav-link:hover,
	.nav-link.current {
		color: var(--white) !important;
	}

		.nav-link:hover::after,
		.nav-link.current::after {
			background-color: var(--white) !important;
		}

	.nav-link.blueprints {
		color: var(--light-blue) !important;
	}

		.nav-link.blueprints:hover::after,
		.nav-link.blueprints.current::after {
			background-color: var(--light-blue) !important;
		}

	.nav-link.maps {
		color: var(--yellow) !important;
	}

		.nav-link.maps:hover::after,
		.nav-link.maps.current::after {
			background-color: var(--yellow) !important;
		}

	.nav-link.mods {
		color: var(--green) !important;
	}

		.nav-link.mods:hover::after,
		.nav-link.mods.current::after {
			background-color: var(--green) !important;
		}

	.nav-link.translate {
		color: var(--orange) !important;
	}

		.nav-link.translate:hover::after,
		.nav-link.translate.current::after {
			background-color: var(--orange) !important;
		}

.dropdown-menu {
	background: var(--dark-grey);
}

	.dropdown-menu svg {
		fill: var(--yellow);
	}

.dropdown-toggle {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
}

	.dropdown-toggle:hover {
		color: var(--white);
	}

.badge {
	background: var(--red);
}

/*  Blueprints, Maps, and Mods Index Page */
.listings {
	color: var(--light-grey);
	background-color: var(--dark-grey);
	font-weight: 400;
	min-height: 90vh;
	display: flex;
	flex-direction: column;
}

	/* Mods page nests .thumbnails under form > row > col-lg-10. Pass the
	   available height down so the .bottom_buttons row can stick to the
	   bottom even when there are only a few cards. */
	.listings > form,
	.listings > form > .row.g-0,
	.listings > form > .row.g-0 > [class*="col-lg-"]:not(.mod-sidebar) {
		flex: 1 1 auto;
	}

	.listings > form,
	.listings > form > .row.g-0 > [class*="col-lg-"]:not(.mod-sidebar) {
		display: flex;
		flex-direction: column;
	}

	.listings .thumbnails {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}

		.listings .thumbnails > .bottom_buttons {
			margin-top: auto;
		}

	.listings svg {
		width: auto;
		height: 21px;
		fill: currentColor;
	}

	.listings h1 {
		font-size: 36px;
		font-weight: 700;
		color: var(--yellow);
	}

	.listings h2 {
		font-size: 24px;
		color: var(--yellow);
	}

	.listings p {
		font-weight: 400;
	}

.search_tags a {
	background: var(--border-grey);
	border-radius: 20px;
	text-decoration: none;
}

	.search_tags a svg {
		fill: currentColor;
		height: 15px;
		width: auto;
	}

/* Blueprints, Maps, and Mods Index Thumbnails */
.modal-content {
	background-color: var(--border-grey);
	border: 3px solid var(--yellow);
}

.modal-header {
	color: var(--white);
}

.report_button {
	background: none;
	border: none;
	color: var(--yellow);
}

	.report_button svg {
		width: 20px;
		height: auto;
	}

.thumbnails {
	text-align: center;
	color: var(--light-grey);
	background-color: var(--dark-grey);
}

	.thumbnails .stats svg {
		width: 18px;
		height: 18px;
		margin-right: 0.5em;
		fill: currentColor;
	}

	.thumbnails .card {
		color: var(--white);
		border: none;
		border-radius: 10px;
		background-color: var(--grey);
		overflow: hidden;
		position: relative;
	}

		.thumbnails .card:hover {
			box-shadow: 0 4px 8px rgba(0,0,0,0.1);
			transition: box-shadow 0.3s ease-in-out;
		}

			.thumbnails .card:hover .overlay {
				opacity: 1;
			}

	.thumbnails .card-img-top {
		object-fit: cover;
		border-bottom: 4px solid var(--yellow);
	}

	.thumbnails .overlay {
		background-color: rgba(0, 0, 0, 0.7);
		text-transform: initial;
		color: var(--light-grey);
		opacity: 0;
		transition: opacity 0.15s ease-in-out;
	}

	.thumbnails .card-title {
		color: var(--light-grey);
		font-weight: 700;
	}

	.thumbnails .card-text {
		font-size: 14px;
		color: var(--lighter-grey);
	}

	.thumbnails .stats {
		color: var(--meta-grey);
		background-color: var(--border-grey);
		font-size: 0.75em;
	}



		.thumbnails .stats p svg {
			margin-right: 0.25em;
		}

	/* Horizontal mod card layout. Title is hoisted out of card-body so the same
	   grid can re-arrange to title-on-top on xs without a separate template. */
	.thumbnails .mod-card-content {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"icon title"
			"icon body";
	}

		.thumbnails .mod-card-content .mod-card-icon {
			grid-area: icon;
		}

		.thumbnails .mod-card-content .mod-card-title {
			grid-area: title;
			margin: 0.5rem 1rem 0 0;
		}

		.thumbnails .mod-card-content .card-body {
			grid-area: body;
		}

	.thumbnails .mod-card {
		text-align: left;
		height: 210px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.3);
		transition: box-shadow 0.2s ease;
	}

		.thumbnails .mod-card:hover {
			outline: 1px solid var(--meta-grey);
		}

		.thumbnails .mod-card .stats {
			box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
		}

	.thumbnails .mod-card-icon img {
		width: 128px;
		height: auto;
		aspect-ratio: 1;
		border-radius: 6px;
		object-fit: cover;
		margin: 10px;
	}

	.thumbnails .mod-card-placeholder {
		opacity: 0.5;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 128px;
		height: 128px;
		margin: 10px;
		padding: 24px;
	}

		.thumbnails .mod-card-placeholder svg {
			width: 100%;
			height: 100%;
		}

	/* Below lg (sidebar collapses to a toggle): title spans full width on top
	   of the icon + body row, thumbnail shrinks, and card height becomes auto
	   so longer descriptions can breathe. */
	@media (max-width: 991.98px) {
		.thumbnails .mod-card {
			height: auto;
			min-height: 220px;
		}

		.thumbnails .mod-card-content {
			grid-template-areas:
				"title title"
				"icon  body";
		}

		.thumbnails .mod-card-content .mod-card-title {
			margin: 0.5rem 0.75rem 0.25rem 0.75rem;
		}

		.thumbnails .mod-card-icon img {
			width: 96px;
			margin: 8px;
		}

		.thumbnails .mod-card-placeholder {
			width: 96px;
			height: 96px;
			margin: 8px;
			padding: 12px;
		}
	}

	.thumbnails .bottom_buttons button {
		background-color: var(--yellow);
		color: var(--border-grey);
		font-weight: 700;
		text-transform: uppercase;
		border: none;
		border-radius: 2px;
	}

		.thumbnails .bottom_buttons button:hover {
			background-color: var(--light-yellow);
		}

	.thumbnails .bottom_buttons #backToTop {
		background-color: var(--grey);
		color: var(--yellow);
	}

		.thumbnails .bottom_buttons #backToTop:hover {
			background-color: var(--border-grey);
		}

/* Detailed View for Blueprints, Maps and Mods */
.detailed_view {
	background-color: var(--dark-grey);
	color: var(--light-grey);
}

	.detailed_view h2 {
		border-radius: 10px;
		font-size: 16px;
		font-weight: 700;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		background-color: var(--border-grey);
		color: var(--meta-grey);
	}

.detail-buttons button,
.detail-buttons a {
	height: 44px;
	display: flex;
	justify-content: center;
}

.vote_buttons a.active svg path {
	fill: var(--border-grey);
}

.vote_buttons a:first-of-type {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-right: 0.15em;
}

.vote_buttons a:last-of-type {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.detailed_view .meta {
	font-size: 16px;
	font-weight: 700;
}

	.detailed_view .meta strong {
		font-size: 10px;
		color: var(--meta-grey);
	}

.detailed_view table {
	color: var(--white);
	background-color: var(--dark-grey) !important;
}

	.detailed_view table svg {
		height: 16px;
		width: auto;
		fill: currentColor;
		vertical-align: middle;
	}

	.detailed_view table thead {
		font-size: 12px;
		color: var(--meta-grey);
		background: var(--border-grey);
	}

	.detailed_view table tr:nth-of-type(2n) {
		background-color: var(--darker-grey);
	}

	.detailed_view table td,
	.detailed_view table th {
		border: none;
		border-right: 2px solid var(--grey);
	}

		.detailed_view table th:last-of-type,
		.detailed_view table td:last-of-type {
			border-right: none;
		}

	.detailed_view table tr:hover {
		background-color: var(--grey);
	}

.detailed_view .comment:last-of-type {
	margin-bottom: 0 !important;
}

.detailed_view .text-muted {
	color: var(--meta-grey) !important;
}

.detailed_view .addComment {
	background-color: var(--border-grey);
	color: var(--light-grey);
	font-weight: 700;
	font-size: 16px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	text-transform: uppercase;
}

	.detailed_view .addComment:hover {
		color: var(--border-grey);
		background-color: var(--yellow);
	}

.detailed_view #comment_form {
	display: none;
}

.detailed_view textarea,
.detailed_view textarea:focus {
	border: 1px solid transparent;
	outline: none;
	font-family: 'Roboto', sans-serif;
	color: var(--light-grey);
	resize: none;
	background-color: var(--grey);
	border-radius: 0;
	box-shadow: none;
	width: 100%;
	padding: .5em;
	font-family: 'Roboto Condensed', sans-serif;
}

.detailed_view .time-ago,
.detailed_view .edited-time,
.detailed_view .char-count {
	color: var(--meta-grey);
	font-size: 12px;
}

.detailed_view .char-count {
	margin: 0.5em 0
}

/* Gallery CSS */
.gallery {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}

	.gallery:focus {
		outline: none;
	}

	.gallery .main_image {
		background-color: var(--darker-grey);
		position: relative;
		margin-bottom: 15px;
		width: 100%;
		border-radius: 5px;
		box-shadow: 1px 1px 5px black;
		height: 0;
		padding-bottom: 56.25%;
		overflow: hidden;
	}

		.gallery .main_image img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			border-radius: 5px;
			cursor: zoom-in;
			transition: opacity 300ms ease-in-out;
		}

		.gallery .main_image .img_holder {
			width: 100%;
			height: 100%;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
		}

.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	display: none;
	width: 36px;
	height: 36px;
	border: 4px solid var(--border-grey);
	border-left-color: var(--yellow);
	border-radius: 50%;
	animation: spin 1s ease infinite;
	margin: -18px 0 0 -18px;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.gallery .main_arrow {
	position: absolute;
	height: 100%;
	display: none;
	padding: 0 10px;
	display: flex;
	align-items: center;
	filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
}

	.gallery .main_arrow.left {
		left: 0;
	}

	.gallery .main_arrow.right {
		right: 0;
	}

	.gallery .main_arrow svg {
		height: 35px;
		width: auto;
	}

		.gallery .main_arrow svg path {
			fill: var(--white);
			transition: fill 0.3s ease;
		}

		.gallery .main_arrow:hover svg path {
			fill: var(--yellow);
		}

.gallery .thumb_arrow {
	transition: opacity 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	position: absolute;
	height: 100%;
	width: 60px;
	cursor: pointer;
}

	.gallery .thumb_arrow.left {
		left: 0;
		background: linear-gradient(90deg, var(--dark-grey) 0, transparent);
	}

	.gallery .thumb_arrow.right {
		right: 0;
		background: linear-gradient(270deg, var(--dark-grey) 0, transparent);
	}

	.gallery .thumb_arrow svg {
		padding: 0 20px;
		height: 20px;
		width: auto;
		filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
	}

		.gallery .thumb_arrow svg path {
			fill: var(--white);
			transition: fill 100ms ease-in-out;
		}

	.gallery .thumb_arrow:hover svg path {
		fill: var(--yellow);
	}

.gallery .thumbnail_container {
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 5px;
	overflow: hidden;
}

.gallery .thumbnails {
	display: flex;
	overflow-x: hidden;
	scroll-behavior: smooth;
	gap: 10px;
}

	.gallery .thumbnails img {
		width: 192px;
		height: 108px;
		object-fit: cover;
		flex-shrink: 0;
		border: 2px solid transparent;
		cursor: pointer;
		border-radius: 5px;
		transition: border 0.1s ease-in-out;
	}

		.gallery .thumbnails img:hover {
			border: 2px solid var(--white);
		}

	.gallery .thumbnails .active {
		border: 2px solid var(--yellow);
	}

.imageModal {
	display: none;
	position: fixed;
	z-index: 100;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 9999;
}

	.imageModal img {
		margin: auto;
		display: block;
		max-width: 90vw;
		max-height: 90vh;
		width: auto;
		height: auto;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		border-radius: 8px;
		cursor: zoom-out;
	}

/* Fade-out effect */
.fade-out {
	animation: fadeOutAnimation 300ms ease-in-out forwards;
}

/* Fade-in effect */
.fade-in {
	animation: fadeInAnimation 300ms ease-in-out forwards;
}

@keyframes fadeOutAnimation {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

#caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
}

.close {
	color: var(--yellow);
	background: none;
	border: none;
	outline: none;
	font-size: 24px;
	position: absolute;
	top: 30px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
	cursor: pointer;
	z-index: 9999;
}

	.close:hover,
	.close:focus {
		color: #bbb;
		text-decoration: none;
		cursor: pointer;
	}

/* Markdown Description Adjustments */
.description {
	overflow-x: auto;
}

	.description h2 {
		background: none;
		font-size: 30px;
		color: var(--lighter-grey);
	}

	.description table {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 2em;
		border: 4px solid var(--border-grey);
	}

		.description table th,
		.description table td {
			padding: 0.5em;
		}

		.description table th {
			white-space: nowrap;
			background-color: var(--border-grey);
		}

		.description table tr {
			background-color: var(--dark-grey);
		}

			.description table tr:nth-of-type(2n) {
				background-color: var(--darker-grey);
			}

			.description table tr:hover {
				background-color: var(--grey);
			}

	.description blockquote {
		background: var(--dark-grey);
		border-left: 5px solid var(--yellow);
		padding: 0.5em;
		margin-bottom: 1em;
	}

		.description blockquote p {
			margin: 0;
		}

	.description img {
		max-width: 100%;
		height: auto;
		border-radius: 4px;
		cursor: zoom-in;
	}
	.description img[data-align="center"] {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.description img[data-align="left"] {
		float: left;
		margin-right: 16px;
		margin-bottom: 8px;
	}
	.description img[data-align="right"] {
		float: right;
		margin-left: 16px;
		margin-bottom: 8px;
	}

/* Create Edit */
.create_edit {
	background-color: var(--grey);
	color: var(--light-grey);
}

	.create_edit .form-select,
	.create_edit .form-control {
		background-color: var(--dark-grey);
	}

#drop_zone {
	background-color: var(--dark-grey);
	box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.3);
	border-radius: 3px;
	text-align: center;
	font-weight: 700;
	text-transform: uppercase;
}

	#drop_zone svg {
		width: 64px;
		height: auto;
		fill: var(--meta-grey);
	}

.d-contents {
	display: contents;
}

/* Mod upload card - used by Mod/Create, Mod/AddVersion, and the AddVersion modal in Mod/Detail. */
.mv2-upload-card {
	background: var(--grey);
	border-radius: 6px;
	padding: 1.5rem;
}

	.mv2-upload-card h2 {
		font-size: 1.4rem;
		margin: 0 0 .5rem;
	}

	.mv2-upload-card .lead-small {
		color: var(--lighter-grey);
		font-size: .9rem;
		margin-bottom: 1rem;
	}

.mv2-policy-banner {
	font-size: .9rem;
	margin: 0 0 .85rem;
	padding: .55rem .85rem;
	border-left: 3px solid var(--yellow);
	background: rgba(229, 202, 95, 0.06);
	border-radius: 0 4px 4px 0;
}

.mv2-drop-zone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 22px 18px;
	background-color: var(--dark-grey);
	border: 2px dashed var(--grey);
	border-radius: 4px;
	color: var(--meta-grey);
	text-align: center;
	transition: border-color .15s ease, background-color .15s ease;
}

	.mv2-drop-zone svg {
		width: 32px;
		height: 32px;
		fill: var(--meta-grey);
		flex-shrink: 0;
	}

	.mv2-drop-zone.dragover {
		border-color: var(--yellow);
		background-color: rgba(229, 202, 95, 0.08);
	}

	.mv2-drop-zone .mv2-drop-text {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.mv2-drop-zone .file-name-display {
		color: var(--light-grey);
		font-weight: 600;
	}

	.mv2-drop-zone .file-meta {
		display: block;
		color: var(--meta-grey);
		font-size: .8rem;
		font-weight: normal;
		margin-top: 2px;
	}

.mv2-drop-zone--success {
	border-color: var(--green);
	background-color: rgba(110, 182, 96, 0.08);
	border-style: solid;
}

	.mv2-drop-zone--success svg {
		fill: var(--green);
	}

.mv2-drop-zone--error {
	border-color: var(--red);
	background-color: rgba(175, 64, 74, 0.08);
}

	.mv2-drop-zone--error svg {
		fill: var(--red);
	}

.mv2-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 4px;
	font-size: .9rem;
	margin: .85rem 0;
	line-height: 1.45;
}

	.mv2-alert .mv2-alert-icon {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
		margin-top: 2px;
	}

	.mv2-alert .mv2-alert-title {
		font-weight: 700;
		display: block;
		margin-bottom: 1px;
	}

.mv2-alert--error {
	background: rgba(175, 64, 74, 0.18);
	border: 1px solid rgba(175, 64, 74, 0.55);
	color: var(--light-red);
}

	.mv2-alert--error .mv2-alert-icon {
		fill: var(--light-red);
	}

.mv2-alert--warning {
	background: rgba(255, 179, 128, 0.12);
	border: 1px solid rgba(255, 179, 128, 0.45);
	color: var(--light-orange);
}

	.mv2-alert--warning .mv2-alert-icon {
		fill: var(--orange);
	}

/* Attachment panel: collapsed by default, expands on click. Visually fused to the bottom
   of the Tiptap editor in the reply / new-topic composers. */
.tiptap-editor-area:has(+ .forum-attachment-panel) {
	border-radius: 6px 6px 0 0;
}

.forum-attachment-panel {
	border: 1px solid var(--border-grey, #222);
	border-top: 0;
	border-radius: 0 0 6px 6px;
	background: var(--darker-grey, #292929);
	font-size: 13px;
}

.forum-attachment-summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	cursor: pointer;
	color: var(--meta-grey, #999);
	list-style: none;
	user-select: none;
}

	.forum-attachment-summary::-webkit-details-marker {
		display: none;
	}

	.forum-attachment-summary::after {
		content: '';
		margin-left: auto;
		width: 0;
		height: 0;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 5px solid currentColor;
		transition: transform 0.15s ease;
	}

	.forum-attachment-panel[open] .forum-attachment-summary::after {
		transform: rotate(180deg);
	}

	.forum-attachment-summary:hover {
		color: var(--light-grey, #f8f8f8);
	}

	.forum-attachment-summary svg {
		flex-shrink: 0;
	}

.forum-attachment-count:empty {
	display: none;
}

.forum-attachment-count {
	color: var(--bs-warning, #ffc107);
	font-weight: 600;
}

.forum-attachment-body {
	padding: 10px 12px 12px;
	border-top: 1px solid var(--grey, #414141);
}

.forum-attachment-dropzone {
	border: 2px dashed var(--grey, #414141);
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.15);
	padding: 10px 12px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	min-height: 70px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

	.forum-attachment-dropzone.dragover {
		border-color: var(--bs-primary, #0d6efd);
		background-color: rgba(13, 110, 253, 0.08);
	}

.forum-attachment-dropzone-prompt {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--meta-grey, #999);
	flex: 1;
	min-height: 50px;
}

	.forum-attachment-dropzone-prompt svg {
		width: 32px;
		height: auto;
		fill: var(--meta-grey, #999);
		flex-shrink: 0;
		transition: width 0.15s ease;
	}

	/* Compact prompt: shown below the file list once anything has been selected. */
	.forum-attachment-dropzone-prompt.compact {
		min-height: 0;
		font-size: 12px;
		gap: 8px;
	}

		.forum-attachment-dropzone-prompt.compact svg {
			width: 20px;
		}

.forum-attachment-list {
	margin: 0;
}

	.forum-attachment-list li {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 2px 0;
	}

	.forum-attachment-list li .file-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

.forum-attachment-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

/* Rendered attachments under a forum post body. Images render as a compact thumbnail
   strip that opens the shared imageModal lightbox on click; non-image files render as
   small download chips with extension + truncated name + size. A divider separates
   the attachments from the post content above. */
.forum-post-attachments {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--grey, #414141);
}

.forum-post-attachment-images {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.forum-post-attachment-thumb {
	display: block;
	border-radius: 3px;
	overflow: hidden;
	cursor: zoom-in;
	flex-shrink: 0;
	line-height: 0;
}

	.forum-post-attachment-thumb img {
		display: block;
		width: 120px;
		height: 68px;
		object-fit: cover;
		transition: opacity 0.15s ease;
	}

	.forum-post-attachment-thumb:hover img {
		opacity: 0.85;
	}

.forum-post-attachment-files {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.forum-post-attachment-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	max-width: 320px;
	background: var(--darker-grey, #292929);
	border: 1px solid var(--grey, #414141);
	border-radius: 4px;
	font-size: 12px;
	color: var(--light-grey, #f8f8f8);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

	.forum-post-attachment-chip:hover {
		background: var(--grey, #414141);
		border-color: var(--yellow, #e5ca5f);
		color: var(--light-grey, #f8f8f8);
		text-decoration: none;
	}

	.forum-post-attachment-chip-icon {
		color: var(--meta-grey, #a0a0a0);
		flex-shrink: 0;
		transition: color 0.15s ease;
	}

	.forum-post-attachment-chip:hover .forum-post-attachment-chip-icon {
		color: var(--yellow, #e5ca5f);
	}

	.forum-post-attachment-chip-ext {
		font-weight: 700;
		color: var(--yellow, #e5ca5f);
		letter-spacing: 0.03em;
		flex-shrink: 0;
	}

	.forum-post-attachment-chip-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	.forum-post-attachment-chip-size {
		color: var(--meta-grey, #a0a0a0);
		flex-shrink: 0;
	}

.forum-post-attachment-hidden {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

	.forum-post-attachment-hidden svg {
		flex-shrink: 0;
	}

/* Edit-mode attachment rows. Images wrap in a row of clickable thumbnails; files stack
   as a column of file chips. Both toggle a "marked for removal" state (red X overlay)
   on click. A single panel-level dropdown sets the access for everything. */
.forum-edit-attachments {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 12px;
	background: var(--darker-grey, #292929);
	border: 1px solid var(--grey, #414141);
	border-radius: 4px;
}

.forum-edit-attachment-images {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.forum-edit-attachment-files {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.forum-edit-attachment {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.forum-edit-attachment-target {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: var(--dark-grey, #2f2f2f);
	border: 1px solid var(--grey, #414141);
	border-radius: 4px;
	color: var(--light-grey, #f8f8f8);
	font-size: 12px;
	cursor: pointer;
	position: relative;
	max-width: 320px;
	overflow: hidden;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}

	/* Image-variant target: tight padding so the click box hugs the thumbnail. */
	.forum-edit-attachment-target-image {
		padding: 0;
		max-width: none;
		line-height: 0;
	}

	.forum-edit-attachment-target img {
		display: block;
		width: 120px;
		height: 68px;
		object-fit: cover;
	}

	.forum-edit-attachment-icon {
		color: var(--meta-grey, #a0a0a0);
		flex-shrink: 0;
	}

	.forum-edit-attachment-ext {
		font-weight: 700;
		color: var(--yellow, #e5ca5f);
		letter-spacing: 0.03em;
		flex-shrink: 0;
	}

	.forum-edit-attachment-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	.forum-edit-attachment-size {
		color: var(--meta-grey, #a0a0a0);
		flex-shrink: 0;
	}

	.forum-edit-attachment-x {
		position: absolute;
		top: 2px;
		right: 4px;
		font-size: 18px;
		line-height: 1;
		color: var(--bs-danger, #dc3545);
		opacity: 0;
		transition: opacity 0.15s ease;
		pointer-events: none;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
	}

	.forum-edit-attachment-target:hover {
		border-color: var(--bs-danger, #dc3545);
	}

	.forum-edit-attachment-target:hover .forum-edit-attachment-x {
		opacity: 1;
	}

/* Marked-for-removal state: dim the row and pin the X. */
.forum-edit-attachment[data-marked] .forum-edit-attachment-target {
	opacity: 0.5;
	border-color: var(--bs-danger, #dc3545);
	border-style: dashed;
}

	.forum-edit-attachment[data-marked] .forum-edit-attachment-target img,
	.forum-edit-attachment[data-marked] .forum-edit-attachment-name,
	.forum-edit-attachment[data-marked] .forum-edit-attachment-ext {
		text-decoration: line-through;
	}

	.forum-edit-attachment[data-marked] .forum-edit-attachment-x {
		opacity: 1;
	}

	.forum-edit-attachment[data-marked] [data-attachment-access] {
		opacity: 0.4;
		pointer-events: none;
	}

#image_container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	transition: all 0.5s ease;
}

	#image_container .image_wrapper.main {
		border: 2px solid var(--yellow);
	}

	#image_container .image_wrapper {
		display: flex;
		position: relative;
		width: 100%;
		border-radius: 5px;
		border: 2px solid transparent;
		opacity: 1;
		transition: opacity 0.3s ease-in-out;
	}

		#image_container .image_wrapper img {
			width: 100%;
			height: auto;
			display: block;
			border-radius: 5px;
		}

		#image_container .image_wrapper:hover img {
			opacity: 0.6;
			cursor: grab;
		}

		#image_container .image_wrapper .image_number {
			position: absolute;
			left: 15px;
			top: 10px;
			font-weight: 700;
			font-size: 25px;
			color: var(--white);
			cursor: default;
			text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 5px;
		}

		#image_container .image_wrapper .drag_icon {
			position: absolute;
			left: 50%;
			bottom: 50%;
			transform: translate(-50%, 50%);
			cursor: grab;
			opacity: 0;
			transition: opacity 0.3s ease-in-out;
		}

		#image_container .image_wrapper:hover .drag_icon, #image_container .image_wrapper:hover .delete_image {
			opacity: 1;
		}

	#image_container svg {
		height: 55px;
		width: auto;
	}

	#image_container .image_wrapper .delete_image {
		position: absolute;
		bottom: 5px;
		right: 15px;
		cursor: pointer;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
	}

.create_edit input:not([type="checkbox"]):not([type="radio"]),
.create_edit textarea {
	width: 100%;
	background-color: var(--dark-grey);
	border: none;
	border-radius: 3px;
	box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.3);
	color: var(--light-grey);
	padding: 10px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
}

	.create_edit input:not([type="checkbox"]):not([type="radio"]):focus,
	.create_edit textarea:focus {
		color: var(--light-grey);
		background-color: var(--dark-grey);
	}

.editor-toolbar .table {
	width: initial;
}

.CodeMirror-cursor {
	border-left: solid 2px var(--light-grey) !important;
}

/* Login Page */
.login-register {
	background: none;
	/* .listings (used by index pages) sets display:flex; flex-direction:column.
	   The auth pages don't want that. TokenSent/TokenError use plain block.
	   Login/Register/CreateAccount add their own .d-flex utility (!important)
	   which forces flex back on, but we still need to override flex-direction
	   so it behaves as a row-direction flex (with justify-content-center centering
	   the card horizontally and align-items-start putting it at the top). */
	display: block;
	flex-direction: row;
}

.card.login {
	background: var(--grey);
	border-radius: 0.5rem;
	border: none;
}

	.card.login input:not([type="checkbox"]):not([type="radio"]) {
		background: var(--dark-grey);
		border: none;
		color: var(--light-grey);
	}

		.card.login input:not([type="checkbox"]):not([type="radio"]):focus {
			color: var(--yellow);
			background: var(--dark-grey);
		}

	.card.login .input-group-text {
		background: var(--dark-grey);
		border: none;
		color: var(--yellow);
	}

		.card.login .input-group-text svg path {
			fill: currentColor;
		}

	.card.login .card-body {
		color: var(--lighter-grey);
	}

/* Account Page */
.accountPage .card {
	background: var(--border-grey);
	color: var(--white);
}

.accountPage .card-header {
	color: var(--border-grey);
	background: var(--yellow);
}

.accountPage .form-check {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

	.accountPage .form-check label {
		width: 100%;
		border: 1px solid var(--meta-grey);
	}

		.accountPage .form-check label:hover {
			background: var(--yellow);
			color: var(--border-grey);
		}

	.accountPage .form-check label, .accountPage .form-check input {
		cursor: pointer;
	}

.accountPage .form-check-input:checked + .form-check-label {
	color: var(--border-grey);
	background-color: var(--yellow);
}

.accountAvatarImage {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--yellow);
}

.navAvatarImage {
	width: 50px;
	height: 50px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--grey);
	color: var(--yellow);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	vertical-align: middle;
	border: 2px solid var(--meta-grey, #a0a0a0);
	transition: border-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.navbar .nav-link-avatar:hover .navAvatarImage,
.navbar .nav-item.dropdown.show > .nav-link-avatar .navAvatarImage {
	border-color: var(--yellow);
}

/* Notification badge on the avatar dropdown (admin/mod report count) - pokes
   outside the borderless avatar so it reads as an attached pill rather than
   sitting on top of the photo. */
.navbar .nav-link-avatar .badge {
	position: absolute;
	top: -4px;
	right: -8px;
	z-index: 2;
	background: var(--bs-danger, #dc3545);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 10px;
	border: 2px solid var(--darker-grey, #292929);
	line-height: 1.2;
	min-width: 18px;
	text-align: center;
	pointer-events: none;
}

/* Bell button - match the height of the labelled nav tabs by using the same
   icon size as them. Override the navbar's 16px horizontal padding so the
   icon-only button reads as a square button, not a wide pill with empty
   space on either side of the bell. */
.navbar .navbar-nav > .nav-item > .nav-link.nav-link-bell {
	position: relative;
	padding: 12px !important;
}

/* Bell badge anchored just off the icon's top-right corner. The button is now
   tight to the bell so absolute-positioning relative to the button puts the
   badge right next to the icon. */
.navbar .nav-link-bell .badge {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	background: var(--bs-danger, #dc3545);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 10px;
	line-height: 1.2;
	min-width: 16px;
	text-align: center;
	pointer-events: none;
}

/* Notifications page - re-uses .forum-page-header + .forum-category for the
   page chrome so it sits in the same visual family as the forum. The unread
   group renders as a bordered card; the read/archive group is a quiet text
   toggle (no card, no accent header) since it's history, not signal. */
.notification-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 36px 12px 16px;
	border-bottom: 1px solid var(--grey);
	color: var(--lighter-grey);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

	.notification-row:last-child {
		border-bottom: none;
		border-radius: 0 0 6px 6px;
	}

	/* Chevron at the right edge that fades + slides in on hover/focus - the
	   classic "this row navigates somewhere" cue that the static cursor:pointer
	   alone wasn't carrying. */
	.notification-row::after {
		content: '›';
		position: absolute;
		right: 14px;
		top: 50%;
		transform: translateY(-50%) translateX(-4px);
		color: var(--yellow);
		font-size: 22px;
		font-weight: 700;
		line-height: 1;
		opacity: 0;
		transition: opacity 0.12s ease, transform 0.12s ease;
		pointer-events: none;
	}

	.notification-row:hover,
	.notification-row:focus-visible {
		background: rgba(229, 202, 95, 0.10);
		color: var(--lighter-grey);
		text-decoration: none;
		outline: none;
	}

		.notification-row:hover::after,
		.notification-row:focus-visible::after {
			opacity: 1;
			transform: translateY(-50%) translateX(0);
		}

	.notification-row:focus-visible {
		box-shadow: inset 0 0 0 2px var(--yellow);
	}

	.notification-row:active {
		background: rgba(229, 202, 95, 0.16);
	}

	/* Yellow accent stripe on unread rows mirrors the forum's unread treatment;
	   the row is also bolder so it carries more weight in the list. */
	.notification-row.is-unread {
		border-left: 3px solid var(--yellow);
		padding-left: 13px;
		background: rgba(229, 202, 95, 0.04);
	}

		.notification-row.is-unread .notification-headline {
			font-weight: 600;
			color: var(--white);
		}

	.notification-row.is-read .notification-headline {
		color: var(--meta-grey);
	}

	/* Headline shifts to yellow on hover for both states - the same affordance
	   that links carry across the site, so users read it as "click to go". Placed
	   after the is-read / is-unread headline overrides so it wins on source order. */
	.notification-row:hover .notification-headline,
	.notification-row:focus-visible .notification-headline {
		color: var(--light-yellow);
	}

.notification-main {
	flex: 1 1 auto;
	min-width: 0;
}

.notification-headline {
	font-size: 14px;
	line-height: 1.35;
	word-break: break-word;
}

.notification-meta {
	margin-top: 2px;
	font-size: 12px;
	color: var(--meta-grey);
}

.notification-new-badge {
	flex-shrink: 0;
	background: var(--yellow);
	color: var(--border-grey);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 10px;
	border-radius: 999px;
}

/* Inline pill on the headline that flags rows carrying a developer reply. Green to read as
   "noteworthy/official" without competing with the bright yellow "New" badge on the right. */
.notification-dev-badge {
	display: inline-block;
	background: var(--bs-success, #198754);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 2px 8px;
	border-radius: 999px;
	margin-right: 6px;
	vertical-align: middle;
}

/* Type icon at the left of every notification row. Sized to match the headline so it doesn't
   push the row taller; muted on read rows, highlighted on unread. The SVGs come straight from
   SvgConstants; fill: currentColor lets the row state recolor them. */
.notification-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--meta-grey);
	margin-top: 2px;
}
.notification-icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
.notification-row.is-unread .notification-icon {
	color: var(--yellow);
}

.notifications-read {
	margin-top: 18px;
}

.notifications-read-summary {
	cursor: pointer;
	list-style: none;
	user-select: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	color: var(--meta-grey);
	font-size: 13px;
}

	/* Hide the default disclosure marker - we render our own rotating arrow
	   inside .notifications-disclosure so we get full control of size + color. */
	.notifications-read-summary::-webkit-details-marker {
		display: none;
	}

	.notifications-read-summary:hover {
		color: var(--lighter-grey);
	}

.notifications-disclosure {
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid currentColor;
	transition: transform 0.15s ease;
}

.notifications-read[open] .notifications-disclosure {
	transform: rotate(90deg);
}

.notifications-read-body {
	margin-top: 8px;
	background: var(--dark-grey);
	border: 1px solid var(--grey);
	border-radius: 6px;
	overflow: hidden;
}

/* Notifications popup - the dropdown that opens from the bell. Re-uses .notification-row
   from the full page for each row so the styling stays in sync; only the wrapper and the
   compact-row padding overrides live here. */
.notifications-popup {
	width: 380px;
	max-width: 92vw;
	padding: 0;
	background: var(--dark-grey);
	border: 1px solid var(--grey);
	border-radius: 6px;
	overflow: hidden;
	color: var(--lighter-grey);
}

.notifications-popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--grey);
	background: rgba(0, 0, 0, 0.15);
}

.notifications-popup-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--meta-grey);
}

.notifications-popup-unread-badge {
	background: var(--bs-danger, #dc3545);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 8px;
	border-radius: 10px;
}

.notifications-popup-list {
	max-height: 60vh;
	overflow-y: auto;
}

	/* Tighter padding than the full-page rows: the popup needs to fit 5 rows without
	   forcing a scroll on a typical viewport. */
	.notifications-popup-list .notification-row {
		padding: 10px 30px 10px 14px;
	}

	.notifications-popup-list .notification-row.is-unread {
		padding-left: 11px;
	}

	/* Clamp long headlines to two lines so a chatty topic title doesn't blow up a row. */
	.notifications-popup-list .notification-headline {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

.notifications-popup-empty,
.notifications-popup-loading {
	padding: 28px 16px;
	text-align: center;
	color: var(--meta-grey);
	font-size: 13px;
}

.notifications-popup-footer {
	display: block;
	padding: 10px 14px;
	text-align: center;
	border-top: 1px solid var(--grey);
	background: rgba(229, 202, 95, 0.05);
	color: var(--yellow);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.12s ease, color 0.12s ease;
}

	.notifications-popup-footer:hover,
	.notifications-popup-footer:focus-visible {
		background: rgba(229, 202, 95, 0.14);
		color: var(--light-yellow);
		text-decoration: none;
		outline: none;
	}

img.navAvatarImage {
	object-fit: cover;
}

.accountAvatarOverlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1040;
}

.accountAvatarModal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--border-grey);
	color: var(--white);
	padding: 24px;
	border-radius: 8px;
	z-index: 1050;
	min-width: 320px;
	max-width: 480px;
	width: 90%;
}

.accountAvatarForm {
	width: 100%;
}

/* Footer */
footer.mv2-footer {
	color: var(--lighter-grey);
	background-color: var(--border-grey);
	padding: 2rem 0 1.5rem;
	box-shadow: 0 -5px 5px 0 rgba(0, 0, 0, 0.5);
}

footer.mv2-footer a {
	color: var(--lighter-grey);
	text-decoration: none;
}

footer.mv2-footer a:hover {
	color: var(--yellow);
}

.mv2-footer .footer-tagline {
	color: var(--meta-grey);
	font-size: .9rem;
	margin: 0;
}

.mv2-footer .footer-tagline em {
	color: var(--yellow);
	font-style: normal;
}

.mv2-footer .footer-copyright {
	color: var(--secondary-grey);
	font-size: .8rem;
	margin: 0;
}

.mv2-footer hr.footer-rule {
	border-color: #3a3a3a;
	margin: 1.25rem 0;
}

.mv2-footer .footer-logo img {
	max-height: 56px;
	width: auto;
}

.mv2-footer .footer-link-rows {
	display: flex;
	flex-direction: column;
}

.mv2-footer .footer-inline-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: .5rem 1rem;
	margin-bottom: .35rem;
}

.mv2-footer .footer-inline-links {
	text-align: center;
	line-height: 1.9;
}

.mv2-footer .footer-inline-links a {
	display: inline-block;
	padding: 0 .35rem;
	white-space: nowrap;
}

.mv2-footer .footer-inline-links a:not(:last-child)::after {
	content: '·';
	margin-left: .7rem;
	color: var(--secondary-grey);
	pointer-events: none;
}

/* Below md, flip the two link rows into two side-by-side vertical columns. */
@media (max-width: 768px) {
	.mv2-footer .footer-link-rows {
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		gap: 0 1.5rem;
		margin-bottom: .75rem;
	}

	.mv2-footer .footer-link-rows > .footer-inline-row {
		flex: 1 1 0;
		margin-bottom: 0;
	}

	.mv2-footer .footer-inline-links {
		line-height: 1.6;
	}

	.mv2-footer .footer-inline-links a {
		display: block;
		padding: .2rem .5rem;
		white-space: normal;
	}

	.mv2-footer .footer-inline-links a:not(:last-child)::after {
		content: '';
		margin: 0;
	}
}

.dev-only {
	color: var(--light-grey);
	background-color: var(--grey);
	padding: 20px;
}

	.dev-only h2 {
		padding-top: 20px;
	}

	.dev-only h3 {
		padding-top: 10px;
	}


/* Translate Styles */
.translateContainer {
	background-color: var(--dark-grey);
}

	.translateContainer h2 {
		color: var(--white);
		font-weight: 400;
	}

.translateContent {
	background-color: var(--grey);
	height: 100%;
}

	.translateContent .card {
		color: var(--white);
		background: var(--translate-grey);
	}

	.translateContent .text-muted {
		color: var(--light-grey) !important;
	}

	.translateContent .form-text {
		color: var(--light-grey);
	}

	.translateContent .accordion-item {
		border: none;
	}

	.translateContent .accordion-button {
		background-color: var(--grey);
		color: var(--white);
	}

		.translateContent .accordion-button:focus {
			box-shadow: none;
		}

	.translateContent .accordion-body {
		color: white;
		background: var(--dark-grey);
	}
/* Translate Breadcrumbs */
.breadcrumb {
	background-color: var(--grey);
	border: 1px solid var(--dark-grey);
	border-radius: 5px;
}

	.breadcrumb span {
		color: var(--lighter-grey);
		font-weight: 400;
		font-size: 14px;
	}

	.breadcrumb a {
		color: var(--yellow);
		font-weight: 700;
		-webkit-text-decoration: none;
		text-decoration: none;
	}

		.breadcrumb a:hover {
			color: var(--light-yellow);
			text-decoration: underline;
		}

.breadcrumb-item.active {
	color: var(--light-grey);
}

	.breadcrumb-item.active a {
		color: var(--light-grey);
	}

		.breadcrumb-item.active a:hover {
			color: var(--light-grey);
		}

/* Translate Buttons */
.btn-3d {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	text-decoration: none;
	text-transform: uppercase;
	border: 2px solid transparent;
	position: relative;
	box-shadow: 0px 4px 0px;
	transition: transform 0.1s ease;
	font-weight: 700;
}

	.btn-3d:active {
		transform: translateY(3px);
	}

	.btn-3d svg path {
		fill: currentColor;
	}

.btn-translatePrimary {
	color: var(--dark-grey) !important;
	background-color: var(--yellow);
	border-color: #A39046;
	box-shadow: 0px 4px 0px #776A37;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

	.btn-translatePrimary:hover {
		background-color: var(--light-yellow);
	}

	.btn-translatePrimary:active {
		box-shadow: 0px 1px 0px #776A37;
	}

	.btn-translatePrimary.btn:disabled {
		cursor: not-allowed;
		pointer-events: initial;
		color: var(--light-grey) !important;
		background-color: var(--border-grey);
		box-shadow: 0px 4px 0px #717171;
	}

.btn-translateSecondary {
	color: var(--white) !important;
	background-color: var(--secondary-grey);
	border-color: #3c3c3c;
	box-shadow: 0px 4px 0px #3c3c3c;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

	.btn-translateSecondary:hover {
		background-color: #7d7d7d;
	}

	.btn-translateSecondary:active {
		box-shadow: 0px 1px 0px #242424;
	}

.btn-translateAdmin {
	color: var(--dark-grey) !important;
	background-color: var(--light-blue);
	border-color: #4F849A;
	box-shadow: 0px 4px 0px #366071;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

	.btn-translateAdmin:hover {
		background-color: var(--lighter-blue);
	}

	.btn-translateAdmin:active {
		box-shadow: 0px 1px 0px #366071;
	}

.btn-translateWarning {
	color: var(--white);
	background-color: var(--red);
	border-color: var(--darker-red);
	box-shadow: 0px 4px 0px var(--darker-red);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.translateContainer .dropdown-menu {
	inset: -7px auto auto 0px !important;
	background-color: var(--secondary-grey);
	border: 2px solid var(--dark-grey);
}

.translateContainer .dropdown-item {
	color: var(--white);
	background-color: var(--secondary-grey);
}

	.translateContainer .dropdown-item:hover {
		color: var(--white);
		background-color: var(--grey);
	}

/* Text Colors */
.t-total {
	color: var(--white);
}

a.t-total:hover {
	color: var(--light-grey);
}

.t-translated {
	color: var(--green);
}

a.t-translated:hover {
	color: var(--light-green);
}

.t-review {
    color: var(--yellow);
}

a.t-review:hover { 
    color: var(--light-yellow);
}

.t-votes {  
    color: var(--orange);
}

a.t-votes:hover {
    color: var(--light-orange);
}

.t-source-changed {
	color: var(--light-blue);
}

a.t-source-changed:hover {
	color: var(--lighter-blue);
}

.t-untranslated {
	color: var(--light-red);
}

a.t-untranslated:hover {
	color: var(--lighter-red);
}

.svg-power {
	color: var(--light-blue);
}

/* Background Colors */
.bg-total {
	background-color: var(--light-grey);
}

.bg-translated {
	background-color: var(--green);
}

a.bg-translated:hover {
	background-color: var(--light-green);
}

.bg-review {
    background-color: var(--yellow);
}

a.bg-review:hover {
    background-color: var(--light-yellow);
}

.bg-source-changed {
	background-color: var(--light-blue);
}

a.source-changed:hover {
	background-color: var(--lighter-blue);
}

.bg-votes {
    background-color: var(--orange);   
}

a.bg-votes:hover {
    background-color: var(--light-orange);
}

.bg-untranslated {
	background-color: var(--light-red);
}

a.bg-untranslated:hover {
	background-color: var(--lighter-red);
}

.bg-power {
	background-color: var(--light-blue);
}

.bg-modified {
	background-color: var(--translate-grey);
}

.bg-viewed {
	background-color: var(--lighter-grey);
}

.bg-rejected {
	background-color: var(--red);
}

a.bg-rejected:hover {
	background-color: var(--darker-red);
}

.bg-suggestion {
	background-color: var(--orange);
}

a.bg-suggestion:hover {
	background-color: var(--light-orange);
}

/* Projects Page */
.alert-warning a {
	color: var(--border-grey);
	font-weight: 700;
}

.projectListing, .languageListing {
	background-color: var(--translate-grey);
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
}

.projectDetails, .languageDetails {
	font-weight: 400;
}

	.projectDetails a, .languageDetails a {
		font-weight: 700;
		text-decoration: none;
	}

	.languageDetails h2 a span svg {
		height: 1em;
		width: auto;
		fill: currentColor;
		vertical-align: middle;
	}

.projectBar .progress, .languageBar .progress {
	height: 35px;
	background-color: var(--dark-grey);
}

.progress-bar {
	color: var(--border-grey);
	font-weight: 700;
}

.projectPercent, .languagePercent {
	text-align: right;
	font-size: 32px;
	color: var(--yellow);
	font-weight: 700;
}

.projectListing h2, .languageListing h2 {
	font-size: 1.25rem;
	margin: 0;
}

.info-group div {
	font-size: 1rem;
}

.translateContent code {
	color: var(--yellow);
}

@media (max-width: 576px) {
	.projectPercent {
		font-size: 1rem;
	}

	.projectTranslate {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
	}
}

/* Languages Page */
.languageBar .progress {
	height: 15px;
}

.infoIcon, .pinIcon {
	background: var(--grey);
}

	.pinIcon svg, .infoIcon svg {
		fill: var(--meta-grey);
	}

	.infoIcon:hover {
		background: var(--light-blue);
	}

		.infoIcon:hover svg {
			fill: var(--dark-grey);
		}

	.pinIcon:hover svg {
		fill: var(--light-grey);
	}

	.pinIcon.pinned:hover svg {
		fill: var(--yellow);
	}

/* Language Settings Page */
.moderator-form .search-results {
	position: relative;
	margin-top: .5rem;
	max-height: 200px;
	overflow-y: auto;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	z-index: 1000;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.moderator-management .dropdown-item {
	padding: 8px 12px;
	cursor: pointer;
}

.accordion-button:not(.collapsed)::after {
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white" class="bi bi-chevron-down"%3E%3Cpath fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"%3E%3C/path%3E%3C/svg%3E');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.accordion-button.collapsed::after {
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white" class="bi bi-chevron-down"%3E%3Cpath fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"%3E%3C/path%3E%3C/svg%3E');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.search-results {
	background: #484848;
	border-radius: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.search-result:hover {
	background-color: #7b7b7b;
}

.form-check-input:checked[type="checkbox"] {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23222' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
}

.form-check-input:checked {
	background-color: var(--yellow);
	border-color: var(--yellow);
}

.form-check-input:focus {
	border-color: var(--yellow);
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(253, 249, 13, 0.25);
}

.language-toggle {
	background-color: var(--border-grey);
	transition: background-color 0.2s ease;
	cursor: pointer;
	user-select: none;
}

	.language-toggle:hover {
		background-color: #454545;
	}

	.language-toggle.enabled {
		color: var(--border-grey);
		background-color: var(--yellow);
	}

		.language-toggle.enabled:hover {
			background-color: var(--light-yellow);
		}

.pluralForms .list-group-item {
	color: var(--white);
	background: var(--border-grey);
	border: 1px solid var(--dark-grey);
}

/* Strings Page */
.translateStringsTable {
	background: var(--translate-grey);
}

	.translateStringsTable th,
	.translateStringsTable tr,
	.translateStringsTable td {
		border: none;
	}

	.translateStringsTable tbody tr {
		background-color: #3B3B3B;
	}

		.translateStringsTable tbody tr:nth-of-type(2n) {
			background-color: var(--grey);
		}

		.translateStringsTable tbody tr:hover {
			background-color: var(--dark-grey);
			cursor: pointer;
		}

	.translateStringsTable tbody td {
		border: 3px solid var(--translate-grey);
		font-weight: 400;
		vertical-align: middle;
	}

	.translateStringsTable th {
		font-size: 12px;
		text-transform: uppercase;
		cursor: default;
	}

	.translateStringsTable tbody tr:first-child {
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
	}

	.translateStringsTable .pluralLabel,
	.translateStringsTable .sourceString,
	.translateStringsTable .suggestionText {
		background: none;
		font-weight: 400;
		color: var(--white);
		padding: 0.375rem 0;
	}

	.translateStringsTable label {
		font-weight: 700;
	}

.form-control.translateInput {
	color: var(--white);
	box-shadow: 0px 4px 0px #242424;
}

.stringSearch {
	border: none;
	background: var(--secondary-grey);
	color: var(--white);
	border-top-right-radius: 0.375rem;
	border-bottom-right-radius: 0.375rem;
	box-shadow: 0px 4px 0px #242424;
}

	.stringSearch:hover {
		background: #7d7d7d;
	}

.translateContent nav {
	box-shadow: none;
	border: none;
}

.status-icon {
	border-radius: 25%;
	padding: 0.25em;
}

.status-icon svg {
	width: 1.75em;
	height: 1.75em;
	fill: var(--dark-grey);
	color: var(--dark-grey);
}

/* Translate Page */
.translateForm {
	background-color: var(--translate-grey);
	overflow: hidden;
	position: relative;
}

	.translateForm.highlight {
		border: 2px solid var(--yellow);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	}

	.translateForm h2 {
		color: var(--white);
		font-size: 1.4rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid #666;
		margin-bottom: 1.5rem;
	}

		.translateForm h2 strong {
			color: var(--yellow);
		}

	.translateForm .translateLabel {
		color: var(--white);
		font-size: 0.85rem;
		text-transform: uppercase;
	}

		.translateForm .translateLabel a {
			font-weight: 700;
			text-decoration: none;
		}

			.translateForm .translateLabel a:hover {
				text-decoration: underline;
			}

.suggestionText {
	background-color: var(--border-grey);
	cursor: pointer;
}

.pluralLabel {
	color: var(--border-grey);
	background: var(--border-grey);
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	font-weight: 700;
	font-size: 12px;
}

	.pluralLabel label, .votingPluralLabel {
		color: var(--darker-grey);
		font-size: 10px;
		background-color: var(--lighter-grey);
		text-transform: uppercase;
		min-width: 60px;
		text-align: center;
	}

.pluralSuggestion,
.sourceString.plural,
.suggestionText.plural {
	border-radius: 0;
	border-top-right-radius: 0.375rem;
	border-bottom-right-radius: 0.375rem;
}

.pluralLabel + div, .pluralLabel + textarea {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.sourceString {
	background-color: var(--border-grey);
	color: var(--white);
	font-weight: 700;
}

	.sourceString:focus {
		color: var(--white);
		background-color: var(--grey);
	}

.translateContext {
	background-color: #686652;
	color: #fff;
	font-weight: 400;
	font-style: italic;
}

.translateSuggestion {
	font-weight: 400;
	color: var(--white);
}

.translateForm .suggestionVote {
	background-color: var(--grey);
	border: 1px solid #666;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}

	.translateForm .suggestionVote:hover {
		background-color: #4a4a4a;
		border-color: var(--yellow);
	}

.suggestionVote.selected {
	background-color: var(--grey);
	border-color: var(--yellow);
}

.suggestionVote input {
	background-color: var(--dark-grey);
	border: 1px solid var(--lighter-grey);
}

	.suggestionVote input:checked[type="radio"] {
		background-color: var(--yellow);
		border: 1px solid #E5CA5F;
		box-shadow: none;
		--bs-form-check-bg: #E5CA5F;
		color: var(--yellow);
		--bs-form-check-bg-image: none;
	}

.suggestionVote .tag {
	background-color: var(--lighter-grey);
	color: var(--border-grey);
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 700;
}

	.suggestionVote .tag.source-changed-tag {
		background-color: var(--light-blue);
	}

	.suggestionVote .tag.newSuggestion {
		background-color: #6EB660;
	}

.suggestions .form-control {
	color: var(--white);
	font-weight: 400;
}

.submitVoteButton.disabled {
	background-color: #ccc;
	color: #666;
	cursor: not-allowed;
	opacity: 0.7;
	box-shadow: 0px 4px 0px #777;
	border-color: #A2A2A2;
}

.translateForm .imageContext {
	background-color: var(--grey);
	border-radius: 0.5rem;
}

.translateForm .imageModalLink img {
	border: 2px solid #414141;
	transition: all 0.2s ease-in-out;
}

.translateForm .imageModalLink:hover img {
	border-color: var(--yellow);
	transform: scale(1.02);
}

.translateImageContextModal .modal-header {
	color: var(--white);
}

.imageModalLink img {
	border: 2px solid transparent;
}

.imageModalLink:hover img {
	border: 2px solid var(--yellow);
}

/* Diff highlighting styles */
.diff-highlight del {
    background-color: rgba(255, 0, 0, 0.2);
    text-decoration: line-through;
}

.diff-highlight ins {
    background-color: rgba(0, 255, 0, 0.2);
    text-decoration: none;
}

.sourceString.diff-highlight {
	color: var(--meta-grey);
	font-weight: 400;
    background-color: var(--border-grey);
}

/* Tabs styling */
.translateTabs {
	background-color: var(--dark-grey);
}

.tabLink {
	padding: 0.5rem 1rem;
	text-decoration: none;
	margin-bottom: -1px;
	font-weight: 700;
	border-right: 2px solid #414141;
}

.translateTabs > a:first-of-type {
	border-top-left-radius: 0.375rem;
}

.tabLink.active {
	background-color: var(--translate-grey);
	border-right: 2px solid var(--dark-grey);
}

/* Content styling */
.tabContent {
	display: none;
}

	.tabContent.active {
		display: block;
	}

/* Table styling */
.translateForm table thead {
	background-color: var(--translate-grey);
}

.translateForm table tbody {
	background-color: var(--grey);
}

.translateForm table th {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	padding: 0.5rem;
}

.translateForm table td {
	border-right: 2px solid #545454;
	font-weight: 400;
	padding: 0.5rem;
}

	.translateForm table td:last-of-type {
		border-right: none;
	}

.translateForm table tr {
    border-bottom: 2px solid var(--translate-grey);
}

    .translateForm table tr:hover {
        background-color: var(--dark-grey);
    }

.translateForm table thead tr:hover {
    background-color: var(--translate-grey);
}

.translateForm table tr:last-of-type {
    border-bottom: none;
}

.translateForm td span {
	font-size: 12px;
	color: var(--dark-grey);
	border-radius: 20px;
	text-decoration: none;
	padding: 0.35em 1em;
	text-transform: uppercase;
	font-weight: 700;
}

/* Translation History */
.historyListing a, .historyListing span {
	font-weight: 700;
	text-decoration: none;
}

	.historyListing a:hover {
		text-decoration: underline;
	}

.historyTranslation {
	font-weight: 400;
	background-color: var(--grey);
	font-size: 1.2em;
}

/* ═══════════════════════════════════════════════════════════════════════
   mv2-* component styles - reusable across the site
   Class names are mv2- prefixed to avoid collisions with Bootstrap/legacy
   ═══════════════════════════════════════════════════════════════════════ */

/* Header card */
.mv2-header {
	border: 1px solid var(--grey);
	overflow: hidden;
}

.mv2-header-inner {
	min-height: 144px;
}

.mv2-thumb {
	width: 148px;
	flex-shrink: 0;
	overflow: hidden;
	background: var(--darker-grey);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 8px;
}

	.mv2-thumb img {
		width: 100%;
		aspect-ratio: 1;
		object-fit: cover;
		border-radius: 6px;
		display: block;
	}

	.mv2-thumb svg {
		width: 60px;
		height: 60px;
	}

.mv2-header-meta {
	background: var(--dark-grey);
	border-right: 1px solid var(--grey);
	min-width: 260px;
}

.mv2-header-center {
	background: var(--darker-grey);
	display: flex;
	flex-direction: column;
}

/* Info pills - reusable badge for metadata */
.info-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--grey);
	color: var(--lighter-grey);
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 4px;
	white-space: nowrap;
}

	.info-pill svg {
		width: 13px;
		height: 13px;
		fill: var(--meta-grey);
		flex-shrink: 0;
	}

	.info-pill a,
	a.info-pill {
		color: var(--yellow);
		text-decoration: underline;
	}

	.info-pill a:hover,
	a.info-pill:hover {
		color: var(--light-yellow);
	}

.mod-tag {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 4px;
	white-space: nowrap;
	text-decoration: none;
	background: var(--dark-grey);
	color: var(--lighter-grey);
}

	.mod-tag:hover {
		background: var(--grey);
		color: var(--white);
	}

.mod-tags-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	background: var(--darker-grey);
	padding: 8px 12px;
	border-radius: 6px;
}

.mv2-tag-icon {
	display: inline-flex;
	align-items: center;
}

	.mv2-tag-icon svg {
		width: 16px;
		height: 16px;
		fill: var(--meta-grey);
	}

/* Tag multiselect */
.mv2-multiselect {
	position: relative;
	background: var(--dark-grey);
	border: 1px solid var(--border-grey);
	border-radius: 6px;
	padding: 6px 8px;
	cursor: text;
}

	.mv2-multiselect-selected {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

	.mv2-multiselect-tag {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		background: var(--grey);
		color: var(--lighter-grey);
		font-size: 12px;
		font-weight: 600;
		padding: 2px 8px;
		border-radius: 4px;
	}

		.mv2-multiselect-tag button {
			background: none;
			border: none;
			color: var(--meta-grey);
			font-size: 14px;
			padding: 0;
			cursor: pointer;
			line-height: 1;
		}

			.mv2-multiselect-tag button:hover {
				color: var(--lighter-grey);
			}

	.mv2-multiselect-input {
		background: transparent;
		border: none;
		outline: none;
		color: var(--lighter-grey);
		font-size: 13px;
		padding: 4px 0;
		width: 100%;
		min-width: 80px;
	}

	.mv2-multiselect-dropdown {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--dark-grey);
		border: 1px solid var(--border-grey);
		border-radius: 0 0 6px 6px;
		max-height: 200px;
		overflow-y: auto;
		z-index: 10;
	}

	.mv2-multiselect-option {
		padding: 6px 12px;
		font-size: 13px;
		cursor: pointer;
		color: var(--lighter-grey);
	}

		.mv2-multiselect-option:hover {
			background: var(--grey);
		}

		.mv2-multiselect-option.selected {
			background: var(--grey);
			color: var(--yellow);
		}

			.mv2-multiselect-option.selected::after {
				content: " \2713";
			}

.mod-card-tag {
	font-size: 11px;
	font-weight: 600;
	color: var(--meta-grey);
	background: var(--border-grey);
	padding: 2px 7px;
	border-radius: 3px;
}

	.listings .mod-card-game-version {
		display: inline-flex;
		align-items: center;
		gap: 4px;
	}

		.listings .mod-card-game-version svg {
			width: 14px;
			height: 14px;
		}

/* Filter toggle (xs only) - Bootstrap flips aria-expanded on click; we use it
   to swap the button label between "Show filters" and "Hide filters". */
.mod-filter-toggle .mod-filter-toggle-when-expanded {
	display: none;
}

.mod-filter-toggle[aria-expanded="true"] .mod-filter-toggle-when-collapsed {
	display: none;
}

.mod-filter-toggle[aria-expanded="true"] .mod-filter-toggle-when-expanded {
	display: inline;
}

/* Mod sidebar */
.mod-sidebar {
	background-color: var(--darker-grey);
	border-right: 1px solid var(--border-grey);
	min-height: calc(90vh - 2rem);
}

.mod-sidebar-inner {
	position: sticky;
	top: 16px;
	padding: 16px;
}

.mod-sidebar-section {
	margin-bottom: 20px;
}

	.mod-sidebar-section h6 {
		color: var(--yellow);
		text-transform: uppercase;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 1px;
		margin-bottom: 8px;
		padding-bottom: 4px;
		border-bottom: 1px solid var(--border-grey);
	}

.mod-sidebar-actions svg {
	width: 16px;
	height: 16px;
}

.mod-tag-filter-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 0;
	font-size: 13px;
	color: var(--lighter-grey);
	cursor: pointer;
}

	.mod-tag-filter-item:hover {
		color: #fff;
	}

	.mod-tag-filter-item input[type="checkbox"] {
		accent-color: var(--yellow);
	}

/* Custom checkboxes for mod sidebar */
.mod-filter-check {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
	font-size: 13px;
	color: var(--lighter-grey);
	cursor: pointer;
}

	.mod-filter-check:hover {
		color: #fff;
	}

	.mod-filter-check input[type="checkbox"] {
		display: none;
	}

	.mod-filter-check-box {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
		border: 2px solid var(--meta-grey);
		border-radius: 3px;
		position: relative;
		transition: all 0.15s ease;
	}

	.mod-filter-check:hover .mod-filter-check-box {
		border-color: var(--lighter-grey);
	}

	.mod-filter-check input:checked + .mod-filter-check-box {
		background: var(--yellow);
		border-color: var(--yellow);
	}

	.mod-filter-check input:checked + .mod-filter-check-box::after {
		content: '';
		position: absolute;
		left: 3px;
		top: 0px;
		width: 6px;
		height: 10px;
		border: solid var(--border-grey);
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
	}


/* Dev state colors: 1=Beta, 2=Stable, 3=Deprecated, 4=Abandoned */
.info-pill-devstate-1 { background: #2a6496; color: #b8daff; }
.info-pill-devstate-2 { background: #1e6e3e; color: #a3e4bc; }
.info-pill-devstate-3 { background: #7a5a00; color: #ffe08a; }
.info-pill-devstate-4 { background: #6e2020; color: #f5b7b7; }

.info-pill-warning { background: #b8732a; color: #f6f6f6; }
/* Subtle warning variant: standard grey pill with orange text only.
   Use when the message is a soft signal (e.g. "No source") rather than a status banner. */
.info-pill-text-warning { color: #e89a4a; }

.mod-card-devstate-1 { background: #2a6496; color: #b8daff; }
.mod-card-devstate-2 { background: #1e6e3e; color: #a3e4bc; }
.mod-card-devstate-3 { background: #7a5a00; color: #ffe08a; }
.mod-card-devstate-4 { background: #6e2020; color: #f5b7b7; }
.mod-card-library { background: #5b3f9e; color: #ece1ff; }

.mv2-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.mv2-filter-pill {
	padding: 3px 10px;
	border-radius: 12px;
	border: 1px solid var(--grey);
	background: transparent;
	color: var(--lighter-grey);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

	.mv2-filter-pill:not(.mv2-filter-pill-active):hover {
		border-color: var(--yellow);
		color: var(--yellow);
	}

	.mv2-filter-pill.mv2-filter-pill-active {
		border-color: transparent;
	}

/* Meta bar (Option B) */
.mv2-meta-bar {
	background: var(--dark-grey);
	border-top: 1px solid var(--grey);
	font-size: 13px;
	color: var(--lighter-grey);
}

	.mv2-meta-item {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		white-space: nowrap;
	}

	.mv2-meta-item svg {
		width: 13px;
		height: 13px;
		fill: var(--meta-grey);
	}

/* Meta text line (Option C) */
.mv2-meta-line {
	font-size: 13px;
	color: var(--meta-grey);
	border-top: 1px solid var(--grey);
}

	.mv2-meta-line a {
		color: var(--yellow);
	}

/* Right-side actions column (Option C/D) */
.mv2-right-actions .detail-buttons {
	min-width: 140px;
}

/* Compound buttons (action + count) */
.mv2-compound-btn {
	display: inline-flex;
	align-items: stretch;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--grey);
}

.mv2-compound-action {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--border-grey);
	cursor: pointer;
	white-space: nowrap;
}

	.mv2-compound-action svg {
		width: 20px;
		height: 20px;
	}

	.mv2-compound-action:hover {
		filter: brightness(1.1);
	}

.mv2-compound-count {
	display: flex;
	align-items: center;
	padding: 6px 12px;
	background: var(--grey);
	color: var(--light-grey);
	font-size: 13px;
	font-weight: 700;
	border-left: 1px solid var(--border-grey);
	white-space: nowrap;
}

/* Small compound variant (bottom bar) */
.mv2-compound-sm .mv2-compound-action {
	padding: 3px 8px;
}

	.mv2-compound-sm .mv2-compound-action svg {
		width: 18px;
		height: 18px;
	}

.mv2-compound-sm .mv2-compound-count {
	padding: 3px 8px;
	font-size: 12px;
}

/* Vote icons inside compound */
.mv2-compound-vote {
	display: flex;
	align-items: center;
	padding: 0 6px;
	cursor: pointer;
}

	.mv2-compound-vote svg {
		width: 18px;
		height: 18px;
	}

	.mv2-compound-vote + .mv2-compound-vote {
		border-left: 1px solid rgba(0, 0, 0, 0.3);
	}

/* Prevent compound action from hovering as a block when it contains vote children.
   Suppresses both the brightness filter (mv2-compound-action:hover) and the bg colour
   shift inherited from .btn-warning:hover, so only the individual vote child being
   hovered visually reacts. */
.mv2-compound-action.vote_buttons:hover {
	filter: none;
	background-color: var(--yellow);
}

/* For vote rows, hand the parent's vertical padding to the children so each half owns
   the full height of the button. Without this, the parent's padding creates yellow
   strips above/below the children that a child :hover bg can't paint.
   Also stretch each child to the parent's full height (the wrapper enforces height
   parity with the count chip via align-items: stretch) and split width 50/50 so up
   and down halves are visually identical regardless of icon glyph proportions. */
.mv2-compound-action.vote_buttons {
	padding: 0;
	gap: 0;
}
.mv2-compound-action.vote_buttons .mv2-compound-vote {
	align-self: stretch;
	flex: 1 1 0;
	justify-content: center;
	padding: 6px 10px;
}
.mv2-compound-sm .mv2-compound-action.vote_buttons .mv2-compound-vote {
	padding: 3px 8px;
}

/* Hover hint for the individual vote: brighten just that half to light-yellow, so the
   user sees which side they're about to click without the whole button glowing. */
.mv2-compound-vote:hover {
	background-color: var(--light-yellow);
}

	.mv2-header-center h1 {
		font-size: 1.5rem;
		line-height: 1.2;
	}

.mv2-short-desc {
	color: var(--lighter-grey);
	font-size: 14px;
	line-height: 1.5;
	max-height: 4.5em;
	overflow: hidden;
}

/* Info tab links - wrapper div handles border-radius */
.mv2-links-wrap {
	border: 1px solid var(--grey);
	border-radius: 6px;
	overflow: hidden;
	background: var(--darker-grey);
}

.mv2-links-table {
	border-collapse: collapse;
	font-size: 14px;
	width: 100%;
	background: none !important;
}

	.mv2-links-table td {
		padding: 8px 14px;
		border: none !important;
		border-bottom: 1px solid var(--grey) !important;
	}

	.mv2-links-table tr:last-child td {
		border-bottom: none !important;
	}

	.mv2-links-table tr:hover,
	.mv2-links-table tr:nth-of-type(2n) {
		background: none !important;
	}

	.mv2-links-table td:first-child {
		color: var(--meta-grey);
		font-weight: 700;
		white-space: nowrap;
		vertical-align: top;
		width: 1%;
		border-right: 1px solid var(--grey) !important;
	}

	.mv2-links-table a {
		word-break: break-all;
	}

.mv2-edit-links-btn {
	font-size: 13px;
	color: var(--meta-grey);
	text-decoration: none;
}

	.mv2-edit-links-btn:hover {
		color: var(--lighter-grey);
	}

	.mv2-edit-links-btn svg {
		width: 14px;
		height: 14px;
		fill: currentColor;
		vertical-align: -1px;
	}

/* Meta info table (right sidebar in header) */
.mv2-meta-table {
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
}

	.mv2-meta-table td {
		padding: 5px 10px;
		border-bottom: 1px solid var(--grey);
	}

	.mv2-meta-table tr:nth-child(even) td {
		background: rgba(0, 0, 0, 0.15);
	}

	.mv2-meta-table tr:last-child td {
		border-bottom: none;
	}

	.mv2-meta-table td:first-child {
		color: var(--meta-grey);
		font-weight: 700;
		white-space: nowrap;
		width: 1%;
	}

	.mv2-meta-table td:last-child {
		color: var(--light-grey);
	}

	.mv2-meta-table a {
		color: var(--yellow);
	}

/* Action row */
.mv2-action-row .detail-buttons,
.mv2-action-row .btn {
	height: 42px;
	display: flex;
	justify-content: center;
}

.mv2-stats-divider {
	width: 1px;
	height: 28px;
	background: var(--grey);
	margin: 0 6px;
}

/* Stats bar (icon + number) */
.mv2-stats {
	font-size: 15px;
	color: var(--lighter-grey);
	align-items: center;
}

	.mv2-stats span {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	.mv2-stats svg {
		width: 18px;
		height: 18px;
		fill: var(--meta-grey);
		flex-shrink: 0;
	}

/* Links bar */
.mv2-links {
	font-size: 14px;
	border: 1px solid var(--grey);
}

	.mv2-links strong {
		color: var(--meta-grey);
	}

/* ── Tabs ─────────────────────────────────────────────────────────── */
.mv2-tabs {
	border-bottom: 2px solid var(--grey);
	gap: 2px;
}

	.mv2-tabs .nav-link {
		color: var(--lighter-grey);
		background: var(--darker-grey);
		border: 1px solid var(--grey);
		border-bottom: none;
		border-radius: 6px 6px 0 0;
		padding: 8px 16px;
		font-weight: 700;
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: 0.3px;
		transition: background 0.15s, color 0.15s;
		text-decoration: none;
	}

		.mv2-tabs .nav-link::after {
			display: none;
		}

		.mv2-tabs .nav-link svg {
			width: 14px;
			height: 14px;
			fill: currentColor;
			vertical-align: -1px;
			margin-right: 3px;
		}

		.mv2-tabs .nav-link:hover {
			color: var(--yellow);
			background: var(--grey);
		}

		.mv2-tabs .nav-link.active {
			color: var(--yellow);
			background: var(--dark-grey);
			border-color: var(--grey);
			border-bottom: 2px solid var(--dark-grey);
			margin-bottom: -2px;
		}

		.mv2-tabs .nav-link.mv2-tab-empty:not(.active) {
			opacity: 0.7;
		}

.mv2-badge {
	display: inline-block;
	background: var(--grey);
	color: var(--lighter-grey);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 10px;
	margin-left: 6px;
	vertical-align: middle;
	min-width: 20px;
	text-align: center;
}

	.mv2-tabs .nav-link.active .mv2-badge {
		background: var(--yellow);
		color: var(--border-grey);
	}

.mv2-tab-content {
	border: 1px solid var(--grey);
	border-top: none;
	border-radius: 0 0 6px 6px;
	padding: 20px;
}


/* How to install link */
.mv2-how-to-install {
	font-size: 13px;
	color: var(--meta-grey);
	text-decoration: none;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 4px;
}

	.mv2-how-to-install svg {
		width: 14px;
		height: 14px;
		fill: currentColor;
	}

	.mv2-how-to-install:hover {
		color: var(--lighter-grey);
	}

.mv2-file-size {
	font-size: 13px;
	color: var(--meta-grey);
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

	.mv2-file-size svg {
		width: 14px;
		height: 14px;
		fill: currentColor;
	}

/* Save-game compatibility glyphs - inline ✓/✗ next to "Add" / "Remove" */
.mv2-save-ok { color: var(--green); font-weight: 700; }
.mv2-save-no { color: var(--red); font-weight: 700; }

/* Meta-bar divider & subdued label */
.mv2-meta-vr { opacity: 0.35; align-self: stretch; }
.mv2-meta-label { color: var(--meta-grey); }
.mv2-save-sep { color: var(--meta-grey); opacity: 0.6; margin: 0 2px; }
.mv2-save-compat { cursor: help; }
.mv2-save-compat:focus { outline: none; }
.mv2-save-compat-note { color: var(--meta-grey); font-size: 12px; }

/* Bootstrap popover skin - dark theme matching the rest of the UI. */
.popover {
	background: var(--darker-grey);
	border: 1px solid var(--grey);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
	max-width: 360px;
	font-family: inherit;
}

	.popover .popover-header {
		background: var(--grey);
		color: var(--white);
		border-bottom: 1px solid var(--border-grey);
		font-size: 13px;
		font-weight: 600;
	}

	.popover .popover-body {
		color: var(--lighter-grey);
		font-size: 13px;
		line-height: 1.5;
	}

	.popover .popover-arrow::before { border-top-color: var(--grey); border-bottom-color: var(--grey); }
	.popover .popover-arrow::after  { border-top-color: var(--darker-grey); border-bottom-color: var(--grey); }

	.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before  { border-left-color: var(--grey); }
	.bs-popover-start > .popover-arrow::after,  .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after   { border-left-color: var(--darker-grey); }
	.bs-popover-end > .popover-arrow::before,   .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before { border-right-color: var(--grey); }
	.bs-popover-end > .popover-arrow::after,    .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after  { border-right-color: var(--darker-grey); }

/* Small, low-key "report this mod" link at the bottom of the detail page */
.mv2-report-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--meta-grey);
	text-decoration: none;
}
	.mv2-report-link:hover { color: var(--yellow); }
	.mv2-report-link svg {
		width: 12px;
		height: 12px;
		fill: currentColor;
	}

/* Responsive: stack header on medium and below */
@media (max-width: 991px) {
	.mv2-header-inner {
		flex-direction: column;
	}

	.mv2-thumb {
		width: 100%;
		min-height: auto;
		max-height: 200px;
	}

	.mv2-header-meta {
		border-right: none;
		border-top: 1px solid var(--grey);
		min-width: unset;
	}

	.mv2-right-actions .detail-buttons {
		min-width: unset;
	}
}

/* Edit modal - two-pane layout */
.mv2-edit-modal {
	background: var(--dark-grey);
	color: var(--light-grey);
	min-height: 500px;
}

	.mv2-edit-modal .modal-header {
		background: var(--border-grey);
		border-bottom: 1px solid var(--grey);
	}

	.mv2-edit-modal .modal-title {
		color: var(--yellow);
		font-weight: 700;
	}

.mv2-edit-layout {
	min-height: 460px;
}

.mv2-edit-menu {
	width: 180px;
	flex-shrink: 0;
	background: var(--darker-grey);
	border-right: 1px solid var(--grey);
	padding: 8px 0;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	/* Stretched (flex default) so the dark column reaches the bottom of the
	   layout. Sticky still keeps the items pinned to the top of the viewport
	   while the page scrolls. */
}

.mv2-edit-menu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	color: var(--lighter-grey);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	border-left: 3px solid transparent;
	transition: background 0.1s, border-color 0.1s;
}

	.mv2-edit-menu-item svg {
		width: 16px;
		height: 16px;
		fill: currentColor;
		flex-shrink: 0;
	}

	.mv2-edit-menu-item:hover {
		background: var(--grey);
		color: var(--light-grey);
	}

	.mv2-edit-menu-item.active {
		background: var(--dark-grey);
		color: var(--yellow);
		border-left-color: var(--yellow);
	}

	.mv2-edit-menu-item.mv2-edit-menu-danger {
		margin-top: 8px;
		border-top: 1px solid var(--grey);
	}

		.mv2-edit-menu-item.mv2-edit-menu-danger:hover {
			color: var(--light-red);
		}

		.mv2-edit-menu-item.mv2-edit-menu-danger.active {
			color: var(--red);
			border-left-color: var(--red);
		}

.mv2-edit-content {
	padding: 24px;
}

.mv2-danger-zone {
	border: 1px solid var(--red);
	background: rgba(175, 64, 74, 0.1);
}

/* License picker - flat table */
.mv2-license-table {
	--bs-border-color: var(--grey);
	--bs-table-hover-bg: rgba(253, 249, 13, 0.06);
	--bs-table-hover-color: inherit;
}

.mv2-license-table thead th {
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--lighter-grey);
	font-weight: 700;
	border-bottom: 1px solid var(--grey);
}

.mv2-license-table tbody tr.mv2-license-row {
	cursor: pointer;
}

	.mv2-license-table tbody tr.mv2-license-row.table-active {
		--bs-table-active-bg: rgba(253, 249, 13, 0.14);
		--bs-table-active-color: inherit;
	}

	.mv2-license-table tbody tr.mv2-license-row.table-active td:first-child {
		box-shadow: inset 4px 0 0 var(--yellow);
	}

	.mv2-license-table tbody tr.mv2-license-row.mv2-license-row-disabled {
		cursor: not-allowed;
		opacity: 0.4;
	}

		/* Cancel Bootstrap's table-hover tint at the cell level - the .table-hover
		   rule sets --bs-table-bg-state on each <td>, so a row-level override is
		   shadowed. */
		.mv2-license-table tbody tr.mv2-license-row.mv2-license-row-disabled:hover > * {
			--bs-table-bg-state: transparent;
		}

		.mv2-license-table tbody tr.mv2-license-row.mv2-license-row-disabled .mv2-license-title {
			pointer-events: none;
		}

/* License picker - "uses CoI internals" Yes/No card-button radios */
.mv2-uci-options {
	display: inline-flex;
	gap: 8px;
}

.mv2-uci-option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 72px;
	padding: 6px 18px;
	border: 1px solid var(--grey);
	border-radius: 4px;
	background: var(--darker-grey);
	color: var(--light-grey);
	font-weight: 700;
	cursor: pointer;
	margin-bottom: 0;
	transition: border-color 0.1s, background 0.1s, color 0.1s;
}

	.mv2-uci-option:hover {
		border-color: var(--lighter-grey);
		color: var(--white);
	}

	.mv2-uci-option input[type="radio"] {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	.mv2-uci-option:has(input:checked) {
		border-color: var(--yellow);
		background: rgba(253, 249, 13, 0.10);
		color: var(--yellow);
	}

.mv2-license-table .mv2-license-check-col {
	width: 32px;
	padding-left: 12px;
	padding-right: 0;
}

	.mv2-license-table .mv2-license-check-col svg {
		width: 14px;
		height: 14px;
		fill: var(--yellow);
		visibility: hidden;
	}

	.mv2-license-row.table-active .mv2-license-check-col svg {
		visibility: visible;
	}

.mv2-license-table .mv2-license-name {
	padding-right: 16px;
}

.mv2-license-title {
	color: var(--yellow);
	font-weight: 700;
	text-decoration: underline;
}

	.mv2-license-title:hover {
		color: var(--yellow);
	}

	.mv2-license-title.mv2-license-title-static {
		color: var(--light-grey);
		text-decoration: none;
	}

/* License picker - 'Your current license: Custom ...' callout */
.mv2-license-custom-callout {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--grey);
	border-left: 4px solid var(--yellow);
	border-radius: 4px;
	background: rgba(253, 249, 13, 0.06);
}

	.mv2-license-custom-callout-name {
		color: var(--yellow);
		font-weight: 700;
	}

/* Owner management bar */
.mv2-owner-bar {
	border: 1px solid var(--grey);
}

/* Draft state banner shown above the mod header. Tighter, subtler tone than a stock
   Bootstrap alert: dark fill matching the rest of the page, a yellow left edge to mark
   it as a status callout, and the Publish action sits flush to the right. */
.mv2-draft-banner {
	background: var(--darker-grey);
	border: 1px solid var(--grey);
	border-left: 3px solid var(--yellow);
	border-radius: 6px;
	font-size: 13px;
}
.mv2-draft-banner-text { color: var(--meta-grey); }
.mv2-draft-banner-text strong { color: var(--yellow); }

.mv2-owner-label {
	color: var(--meta-grey);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 4px;
	margin-right: 4px;
}

	.mv2-owner-label svg {
		width: 14px;
		height: 14px;
		fill: var(--meta-grey);
	}

/* Version list (left sidebar) */
.mv2-version-list {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--grey);
	border-radius: 6px;
	overflow: hidden;
}

.mv2-version-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	background: var(--darker-grey);
	color: var(--lighter-grey);
	text-decoration: none;
	border-bottom: 1px solid var(--grey);
	cursor: pointer;
	transition: background 0.1s;
}

	.mv2-version-item:last-child {
		border-bottom: none;
	}

	.mv2-version-item:hover {
		background: var(--grey);
		color: var(--light-grey);
	}

	.mv2-version-item.active {
		background: var(--yellow);
		color: var(--border-grey);
	}

		.mv2-version-item.active small {
			color: var(--border-grey);
		}

	.mv2-version-item.removed {
		opacity: 0.6;
	}

	.mv2-version-item small {
		color: var(--meta-grey);
		white-space: nowrap;
	}

.mv2-version-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
}

/* Version detail pane (right) */
.mv2-version-detail {
	background: var(--darker-grey);
	border: 1px solid var(--grey);
	border-radius: 6px;
	padding: 20px;
}

/* Version meta table */
.mv2-version-meta {
	border-collapse: collapse;
	font-size: 14px;
	width: auto;
	background: none !important;
}

	.mv2-version-meta td {
		padding: 9px 0;
		border: none !important;
	}

	.mv2-version-meta tr:hover {
		background: none !important;
	}

	.mv2-version-meta tr:nth-of-type(2n) {
		background: none !important;
	}

	.mv2-version-meta td:first-child {
		color: var(--meta-grey);
		font-weight: 700;
		white-space: nowrap;
		padding-left: 14px;
		padding-right: 24px;
	}

	.mv2-version-meta td:last-child {
		padding-right: 14px;
	}

/* Footer row of owner/admin actions inside a version pane (Hide/Unhide, Takedown, etc).
   Subtle top border separates these destructive actions from the read-only meta above. */
.mv2-version-actions-footer {
	border-top: 1px solid var(--grey);
}

/* Owner-only widget panel inside a version pane (e.g. "Re-verify game version range").
   Visually distinct from the read-only meta table: subtle yellow left edge, dark-grey fill,
   small "owner only" tag in the header so it reads as a control surface rather than data. */
.mv2-owner-panel {
	background: var(--border-grey);
	border: 1px solid var(--grey);
	border-left: 3px solid var(--yellow);
	border-radius: 6px;
	padding: 12px 14px;
}
.mv2-owner-panel-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}
.mv2-owner-panel-title {
	font-weight: 600;
	color: var(--white);
}
.mv2-owner-panel-tag {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--yellow);
	background: rgba(229, 202, 95, 0.12);
	border: 1px solid rgba(229, 202, 95, 0.35);
	border-radius: 10px;
	padding: 1px 8px;
	white-space: nowrap;
}

@media (max-width: 576px) {
	.mv2-tabs .nav-link {
		padding: 6px 10px;
		font-size: 12px;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   Forum (phpBB-style layout)
   ═══════════════════════════════════════════════════════════════════ */

/* Page header bar with title + toolbar */
/* Icon-only square button for inline forms (e.g. forum search). Height is not
   set here on purpose - the button is always rendered inside a flex container
   (input-group, or .forum-page-header-actions with align-items: stretch) that
   stretches it to match its text-button siblings. */
.forum-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	padding: 0;
	flex-shrink: 0;
}

	.forum-icon-btn svg {
		width: 16px;
		height: 16px;
		fill: currentColor;
	}

/* Bell-toggle subscribe button. Outline bell = not subscribed (neutral grey,
   call to action); filled yellow bell = subscribed (active state). Matches the
   navbar bell's visual language so users read "this controls notifications". */
.forum-subscribe-btn.is-subscribed {
	color: var(--yellow);
}

	.forum-subscribe-btn.is-subscribed:hover,
	.forum-subscribe-btn.is-subscribed:focus {
		color: var(--light-yellow);
	}

/* ── Forum page header ──────────────────────────────────
   Rendered as a single panel so breadcrumb / title+actions / description read
   as one unit instead of three floating rows. Overline-style breadcrumb sits
   tight above the title, actions share the title's row, and the description
   tucks in directly underneath - all inside one bordered card. */
.forum-page-header {
	background: var(--darker-grey);
	border: 1px solid var(--grey);
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 18px;
}

/* Tiny owner hint shown above an embedded mod board. Subtle yellow left edge to mark it
   as an owner-only nudge; small font, tight padding so it doesn't push the board down. */
.forum-owner-hint {
	font-size: 12px;
	color: var(--meta-grey);
	background: rgba(229, 202, 95, 0.06);
	border-left: 3px solid var(--yellow);
	border-radius: 3px;
	padding: 6px 12px;
	margin-bottom: 12px;
}

/* Reset the site-wide <nav> panel styling (grey bg + shadow set at site.css:364)
   since this breadcrumb is inline typography, not a site-level navigation bar. */
.forum-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--meta-grey);
	margin-bottom: 2px;
	background: transparent;
	border: none;
	box-shadow: none;
}

	/* Breadcrumb entries are all clickable (including the current page - it just
	   links to itself), so they render in the site's accent yellow. The title
	   below carries the "you are here" weight in default text colour. */
	.forum-breadcrumb a {
		color: var(--yellow);
		text-decoration: none;
	}

		.forum-breadcrumb a:hover {
			color: var(--light-yellow);
			text-decoration: underline;
		}

	.forum-breadcrumb-sep {
		color: var(--meta-grey);
		user-select: none;
	}

.forum-page-header-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	row-gap: 8px;
}

/* Title sits alongside its admin dots-menu (when present) so admins have the
   controls attached to what they're editing. The row grows to push the
   page-header actions cluster (search, + new topic) to the far right. */
.forum-page-title-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}

/* Selector is intentionally compound (header + title) so it wins specificity
   against `.detailed_view h2`, which the mod detail page sets with a dark
   background + 16px size and would otherwise bleed into the embedded forum
   title via the Forum tab. */
.forum-page-header .forum-page-title {
	margin: 0;
	flex: 0 1 auto;
	min-width: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	word-break: break-word;
	background: transparent;
	border-radius: 0;
	color: var(--lighter-grey);
}

/* Embedded inside the mod detail page: keep --lighter-grey explicitly so it
   still wins over `.detailed_view h2`*/
.detailed_view .forum-page-header .forum-page-title {
	color: var(--lighter-grey);
}

/* Tighten the search form so it reads as one input+button component rather
   than two elements with a gap. Fixed 240px basis (no grow / no shrink) so the
   siblings after it - e.g. "+ New topic" - keep their natural width instead
   of being compressed. */
.forum-search-group {
	width: 240px;
	flex: 0 0 240px;
}

	.forum-search-group .form-control {
		flex: 1 1 auto;
		min-width: 0;
	}

.forum-page-header-actions {
	display: flex;
	flex-wrap: nowrap;
	/* Stretch (not center) so every child takes the row's tallest height. Lets
	   the icon-only bell/search buttons match their text-button siblings without
	   anyone hard-coding heights. */
	align-items: stretch;
	gap: 8px;
	flex-shrink: 0;
	white-space: nowrap;
	margin-left: auto;
}

	/* Single-button form wrappers (CSRF token + one submit button) sit between
	   the action row and the button. Make them flex containers so the row's
	   stretch propagates through the form to the button inside - without this
	   the form is a block and the button only fills its own intrinsic height. */
	.forum-page-header-actions > form {
		display: flex;
		align-items: stretch;
	}

.forum-page-desc {
	margin: 4px 0 0 0;
	color: var(--meta-grey);
	font-size: 14px;
	line-height: 1.4;
}

	.forum-page-header h1,
	.forum-page-header h2 {
		margin: 0;
	}

.forum-page-summary {
	color: var(--meta-grey);
	font-size: 13px;
	margin-bottom: 16px;
}

	.forum-page-summary strong {
		color: var(--lighter-grey);
	}

	.forum-page-summary-sep {
		color: var(--grey);
		margin: 0 4px;
	}

	/* Inline link rendered as a <button> (so it can POST with CSRF) but styled
	   as a quiet text link that blends into the summary row. Avoids the shouty
	   "Mark all read" button the index header used to carry. */
	.forum-inline-link {
		padding: 0 8px;
		border: 0;
		font-size: inherit;
		color: var(--yellow);
		text-decoration: none;
		vertical-align: baseline;
	}

		.forum-inline-link:hover,
		.forum-inline-link:focus {
			color: var(--light-yellow);
			text-decoration: underline;
		}

.forum-page-summary-bottom {
	margin-top: 12px;
	margin-bottom: 4px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	text-align: right;
	font-size: 12px;
	opacity: 0.7;
}

/* View-count badge slotted into the pager-info column on the topic page (via the
   PagerLeading view-data hook). Sits inline with "Showing X–Y of Z" so the topic
   footer doesn't need its own row. */
.forum-topic-views {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

	.forum-topic-views svg {
		width: 14px;
		height: 14px;
		opacity: 0.8;
	}

.forum-pager-info-sep {
	color: var(--meta-grey);
	user-select: none;
}

/* Category block: header bar + rows of boards. No overflow:hidden - the topic-row
   hover preview needs to escape the container. Corner rounding is restored by
   explicit border-radius on the header and last row. */
.forum-category {
	background: var(--dark-grey);
	border: 1px solid var(--grey);
	border-radius: 6px;
	margin-bottom: 20px;
}

/* Category header doubles as column-header row: grid matches board/topic rows. */
.forum-category-header {
	background: var(--darker-grey);
	border-bottom: 1px solid var(--grey);
	border-radius: 6px 6px 0 0;
	padding: 10px 16px;
	display: grid;
	grid-template-columns: 1fr 130px 260px;
	gap: 16px;
	align-items: center;
}

.forum-category-title {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

	.forum-category-title h3 {
		margin: 0;
		color: var(--yellow);
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.6px;
	}

		.forum-category-title h3 a {
			color: var(--yellow);
			text-decoration: none;
		}

			.forum-category-title h3 a:hover {
				color: var(--light-yellow);
				text-decoration: underline;
			}

.forum-category-title-actions {
	margin-left: auto;
	display: flex;
	gap: 6px;
}

.forum-col-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--meta-grey);
	font-weight: 700;
	text-align: center;
}

	.forum-col-label.forum-col-label-last {
		text-align: left;
	}

/* Admin dots-menu sits inline with the board name so admin controls are
   attached to the thing they act on, not floating at the row's right edge. */
.forum-board-name .forum-board-admin-menu {
	display: inline-block;
	margin-left: 4px;
	vertical-align: middle;
}

/* "Jump to the newest post" link on the last-post column. Yellow so it reads
   as clickable; used by both board rows (last subtree post) and topic rows
   (last post in the topic, deep-linked to its page). Block-level so the
   following "by Username" line wraps underneath instead of sitting inline. */
.forum-last-post-link {
	display: block;
	color: var(--yellow);
	text-decoration: none;
}

	.forum-last-post-link:hover {
		color: var(--light-yellow);
		text-decoration: underline;
	}

.forum-category-desc {
	padding: 10px 16px;
	color: var(--meta-grey);
	font-size: 13px;
	border-bottom: 1px solid var(--grey);
	background: rgba(0,0,0,0.1);
}

.forum-category-empty {
	padding: 14px 16px;
	color: var(--meta-grey);
	font-size: 13px;
	font-style: italic;
}

/* Board row inside a category */
/* Board row behaves like a link (whole-row click via data-forum-click) but is a
   <div>, which lets us keep inline <a> elements (board name, edit pencil) inside. */
.forum-board-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--grey);
	cursor: pointer;
	min-width: 0;
}

	.forum-board-row:last-child {
		border-bottom: none;
		border-radius: 0 0 6px 6px;
	}

	.forum-board-row:hover {
		background: rgba(0, 0, 0, 0.15);
	}

.forum-board-main {
	flex: 1;
	min-width: 0;
}

.forum-icon {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--grey);
	color: var(--meta-grey);
	display: flex;
	align-items: center;
	justify-content: center;
}

	.forum-icon svg {
		width: 20px;
		height: 20px;
		fill: currentColor;
	}

	.forum-icon.unread {
		color: var(--lighter-grey);
	}

	.forum-icon.locked {
		background: var(--border-grey);
		color: var(--meta-grey);
	}

	.forum-icon.pinned {
		background: var(--yellow);
		color: var(--darker-grey);
	}

	.forum-icon.closed {
		background: var(--border-grey);
		color: var(--meta-grey);
	}


/* Smaller variant for inline use next to a page title - same look as the list
   row icons but sized to fit on a title line. Uses inline-flex so it actually
   sits beside the title text instead of stealing its own row. */
.forum-icon.forum-icon-sm {
	display: inline-flex;
	width: 28px;
	height: 28px;
	vertical-align: middle;
	margin-right: 2px;
}

	.forum-icon.forum-icon-sm svg {
		width: 14px;
		height: 14px;
	}

/* Compound icon: pin (primary) + small lock badge bottom-right. Used when a
   topic is both pinned and locked - pin stays dominant, lock is a corner marker. */
.forum-icon-compound {
	position: relative;
}

	.forum-icon-compound .forum-icon-main {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		color: inherit;
	}

		.forum-icon-compound .forum-icon-main svg {
			width: 20px;
			height: 20px;
			fill: currentColor;
		}

	.forum-icon-compound .forum-icon-badge {
		position: absolute;
		bottom: -4px;
		right: -4px;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: var(--darker-grey);
		border: 2px solid var(--dark-grey);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--lighter-grey);
	}

		.forum-icon-compound .forum-icon-badge svg {
			width: 16px;
			height: 16px;
			fill: currentColor;
		}

.forum-board-name {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 3px 0;
	line-height: 1.3;
	word-break: break-word;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.forum-board-name-link {
	color: var(--lighter-grey);
	text-decoration: none;
}

	.forum-board-name-link:hover {
		color: var(--yellow);
		text-decoration: underline;
	}

.forum-board-row:hover .forum-board-name-link {
	color: var(--yellow);
}

.forum-board-row.unread .forum-board-name-link {
	color: var(--yellow);
	font-weight: 700;
}

.forum-board-desc {
	color: var(--meta-grey);
	font-size: 13px;
	line-height: 1.4;
}

/* Last-activity column for board rows (mirrors .forum-topic-last-post) */
.forum-board-last-post {
	min-width: 180px;
	font-size: 12px;
	color: var(--meta-grey);
	text-align: right;
	line-height: 1.4;
	flex-shrink: 0;
}

	.forum-board-last-post .forum-last-post-title {
		display: block;
		font-weight: 600;
		font-size: 13px;
		color: var(--lighter-grey);
	}

	.forum-board-last-post .forum-last-post-empty {
		font-style: italic;
		color: var(--meta-grey);
	}

/* Edit pencil sits as a sibling of the row link, outside it, pushed right. */

/* Stats column - icon + number pairs, stacked */
.forum-stats {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	color: var(--lighter-grey);
	font-size: 14px;
	line-height: 1.2;
}

.forum-stat-row {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.forum-stat-icon {
	display: inline-flex;
	width: 14px;
	height: 14px;
	color: var(--meta-grey);
	flex-shrink: 0;
}

	.forum-stat-icon svg {
		width: 100%;
		height: 100%;
		fill: currentColor;
		display: block;
	}

.forum-stat-value {
	color: var(--lighter-grey);
	font-weight: 400;
	min-width: 1ch;
	text-align: right;
}

/* Last post column */
.forum-last-post {
	color: var(--meta-grey);
	font-size: 12px;
	min-width: 0;
	line-height: 1.4;
}

	.forum-last-post a {
		color: var(--lighter-grey);
		text-decoration: none;
	}

		.forum-last-post a:hover {
			color: var(--yellow);
		}

.forum-last-post-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	font-size: 13px;
	color: var(--lighter-grey);
}

.forum-last-post-author {
	color: var(--meta-grey);
}

	.forum-last-post-author a {
		color: var(--meta-grey);
	}

.forum-last-post-empty {
	color: var(--meta-grey);
	font-style: italic;
}

/* Topic rows (board view) */
/* Entire topic row is a clickable link - flex layout, replies pushed to the far right. */
.forum-topic-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--grey);
	color: inherit;
	text-decoration: none;
	position: relative;
	cursor: pointer;
}

	.forum-topic-row:last-child {
		border-bottom: none;
		border-radius: 0 0 6px 6px;
	}

	.forum-topic-row:hover {
		background: rgba(0,0,0,0.15);
		text-decoration: none;
	}

.forum-topic-main {
	flex: 1;
	min-width: 0;
}

.forum-topic-title {
	font-size: 15px;
	font-weight: 500;
	margin: 0 0 3px 0;
	line-height: 1.3;
	color: var(--lighter-grey);
	word-break: break-word;
}

	.forum-topic-row:hover .forum-topic-title {
		color: var(--yellow);
	}

.forum-topic-title-text {
	color: inherit;
	text-decoration: none;
}

	.forum-topic-title-text:hover {
		text-decoration: underline;
	}

.forum-topic-row.unread .forum-topic-title {
	font-weight: 700;
	color: var(--yellow);
}

/* "N unread posts" pill, shown next to the title only for topics the viewer is subscribed to.
   Uses the theme's orange accent so the count reads as a warm "your attention here" flag
   without competing with the yellow unread-title color sitting right next to it. */
.forum-topic-unread-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 18px;
	padding: 0 6px;
	margin-left: 8px;
	border-radius: 9px;
	background: var(--orange);
	color: var(--darker-grey);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
}

	.forum-topic-unread-badge:hover {
		background: var(--light-yellow);
		color: var(--darker-grey);
		text-decoration: none;
	}

.forum-topic-row.deleted .forum-topic-title-text {
	text-decoration: line-through;
}

	.forum-topic-row.deleted .forum-topic-title-text:hover {
		text-decoration: line-through underline;
	}

.forum-topic-meta {
	color: var(--meta-grey);
	font-size: 12px;
}

.forum-topic-badges {
	display: inline-flex;
	gap: 4px;
	margin-right: 6px;
	vertical-align: middle;
}

.forum-topic-last-post {
	min-width: 180px;
	font-size: 12px;
	color: var(--meta-grey);
	text-align: right;
	line-height: 1.4;
	flex-shrink: 0;
}

	.forum-topic-last-post .forum-last-post-title {
		display: block;
		font-weight: 600;
		font-size: 13px;
		color: var(--lighter-grey);
	}

	.forum-topic-last-post .forum-last-post-empty {
		font-style: italic;
		color: var(--meta-grey);
	}

.forum-topic-replies {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 56px;
	justify-content: flex-end;
	flex-shrink: 0;
	font-size: 15px;
}

	.forum-topic-replies .forum-stat-icon {
		width: 16px;
		height: 16px;
	}

	.forum-topic-replies .forum-stat-value {
		color: var(--lighter-grey);
		font-weight: 400;
	}

/* First-post preview floater, shown on row hover. */
.forum-topic-preview {
	position: absolute;
	top: calc(100% - 4px);
	left: 60px;
	right: 16px;
	background: var(--darker-grey);
	border: 1px solid var(--grey);
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--lighter-grey);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
	pointer-events: none;
	max-width: 480px;
}

.forum-topic-row:hover .forum-topic-preview {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
	transition-delay: 1s;
}

.forum-topic-preview-meta {
	color: var(--meta-grey);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 6px;
}

.forum-topic-preview-body {
	color: var(--lighter-grey);
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

/* "New posts" divider inserted between the last-read post and the first unread post.
   Anchor target for the auto-jump fragment (#first-unread) the controller emits when a
   returning viewer has unread replies. The scroll-margin keeps the line clear of the
   sticky site nav after the browser scrolls. */
.forum-new-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0 14px;
	scroll-margin-top: 80px;
}

	.forum-new-divider::before,
	.forum-new-divider::after {
		content: "";
		flex: 1;
		border-top: 1px dashed var(--yellow);
		opacity: 0.55;
	}

.forum-new-divider-label {
	color: var(--yellow);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.forum-new-divider-since {
	color: var(--meta-grey);
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	margin-left: 6px;
}

/* Posts - user sidebar + content area */
.forum-post {
	background: var(--dark-grey);
	border: 1px solid var(--grey);
	border-radius: 6px;
	margin-bottom: 14px;
	display: grid;
	grid-template-columns: 92px 1fr;
	position: relative;
}

.forum-post-user {
	background: var(--darker-grey);
	border-right: 1px solid var(--grey);
	border-radius: 6px 0 0 6px;
	padding: 14px 10px;
	text-align: center;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.forum-post-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--grey);
	color: var(--yellow);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	border: 2px solid var(--border-grey);
}

img.forum-post-avatar {
	object-fit: cover;
}

.forum-post-user-meta {
	font-size: 11px;
	color: var(--meta-grey);
	line-height: 1.5;
}

a.forum-post-author {
	color: var(--yellow);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	word-break: break-word;
}

	a.forum-post-author:hover {
		color: var(--light-yellow);
		text-decoration: underline;
	}

a.forum-post-author.forum-user-mod {
	color: var(--green);
}

	a.forum-post-author.forum-user-mod:hover {
		color: var(--light-green);
	}

.forum-user-card-name.forum-user-mod {
	color: var(--green);
}

.forum-post-time {
	color: var(--meta-grey);
	font-size: 12px;
	text-decoration: underline;
	text-decoration-color: var(--meta-grey);
	text-underline-offset: 2px;
}

	.forum-post-time::before {
		content: '·';
		margin-right: 6px;
		color: var(--meta-grey);
		text-decoration: none;
		display: inline-block;
	}

a.forum-post-time:hover {
	color: var(--lighter-grey);
	text-decoration-color: var(--lighter-grey);
}

/* Action icons (top-right of post header) */
.forum-post-actions {
	display: flex;
	align-items: center;
	gap: 2px;
}

button.forum-post-action,
a.forum-post-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--meta-grey);
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	line-height: 1;
	transition: background 0.12s, color 0.12s;
}

	button.forum-post-action:hover,
	a.forum-post-action:hover,
	button.forum-post-action:focus-visible,
	a.forum-post-action:focus-visible {
		background: rgba(255,255,255,0.08);
		color: var(--yellow);
		outline: none;
	}

	.forum-post-action svg {
		width: 16px;
		height: 16px;
		fill: currentColor;
		display: block;
	}

	/* Favorite-star button shows one of two pre-rendered icon spans depending on the
	   .is-favorited state class. JS only toggles the class; CSS does the rest. */
	.forum-favorite-btn .favorite_icon.active { display: none; }
	.forum-favorite-btn.is-favorited .favorite_icon.active { display: inline; }
	.forum-favorite-btn.is-favorited .favorite_icon.inactive { display: none; }

/* Icon-only trigger for the board/topic dots menu. Sized to sit inline with a
   board name or page title without visually dominating the row. */
button.forum-menu-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	background: var(--border-grey);
	color: var(--yellow);
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}

	button.forum-menu-trigger:hover,
	button.forum-menu-trigger[aria-expanded="true"] {
		background: var(--darker-grey);
		color: var(--light-yellow);
	}

	button.forum-menu-trigger svg {
		width: 14px;
		height: 14px;
		fill: currentColor;
		display: block;
	}

.forum-menu {
	background: var(--dark-grey);
	border: 1px solid var(--grey);
	font-size: 13px;
	min-width: 200px;
	padding: 4px 0;
}

	.forum-menu .dropdown-divider {
		border-top-color: var(--grey);
		margin: 4px 0;
	}

	.forum-menu form {
		margin: 0;
	}

	.forum-menu .dropdown-item {
		color: var(--lighter-grey);
		padding: 6px 14px;
		background: transparent;
		border: none;
		width: 100%;
		text-align: left;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.forum-menu .dropdown-item-icon {
		width: 14px;
		height: 14px;
		flex-shrink: 0;
		color: var(--meta-grey);
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

		.forum-menu .dropdown-item-icon svg {
			width: 100%;
			height: 100%;
			fill: currentColor;
			display: block;
		}

	.forum-menu .dropdown-item:hover .dropdown-item-icon,
	.forum-menu .dropdown-item:focus .dropdown-item-icon {
		color: inherit;
	}

		.forum-menu .dropdown-item:hover,
		.forum-menu .dropdown-item:focus {
			background: var(--grey);
			color: var(--yellow);
		}

	.forum-menu .dropdown-item.text-danger {
		color: var(--light-red) !important;
	}

		.forum-menu .dropdown-item.text-danger:hover {
			background: var(--red);
			color: var(--white) !important;
		}

	.forum-menu .dropdown-item.text-success {
		color: var(--light-green) !important;
	}

.forum-post-main {
	padding: 6px 12px 6px;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.forum-post-header {
	border-bottom: 1px solid var(--grey);
	padding-bottom: 6px;
	margin-bottom: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--meta-grey);
}

	.forum-post-header .badge {
		font-size: 10px;
	}

.forum-post-body {
	flex-grow: 1;
	color: var(--light-grey);
	font-size: 14px;
	line-height: 1.6;
	word-wrap: break-word;
}

	.forum-post-body p:last-child {
		margin-bottom: 0;
	}

	.forum-post-body img {
		max-width: 100%;
		height: auto;
		cursor: zoom-in;
	}

	.forum-post-body blockquote {
		border-left: 3px solid var(--lighter-grey);
		padding: 6px 12px;
		margin: 8px 0;
		background: rgba(0,0,0,0.2);
		color: var(--lighter-grey);
		font-size: 13px;
	}

	.forum-post-body pre {
		background: var(--darker-grey);
		padding: 10px;
		border-radius: 4px;
		overflow-x: auto;
	}

.forum-post-edited {
	font-size: 11px;
	color: var(--meta-grey);
	font-style: italic;
	margin-top: 10px;
}

/* In-place post edit - save/cancel action row below the editor. */
.forum-post-edit-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

	.forum-post-edit-actions .btn:disabled {
		cursor: wait;
		opacity: 0.6;
	}

.forum-post-deleted {
	opacity: 0.6;
}

/* ── Forum reply composer ──────────────────────────────────
   Unified inline composer: avatar on the left, editor block on the right.
   Intentionally no focus/blur resizing - GitHub/Reddit/Discourse all keep the
   editor the same size regardless of focus state, because jumping the surrounding
   layout on every click is disorienting. */
.forum-reply-composer {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 0;
	background: transparent;
	border: none;
}

.forum-reply-avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--grey);
	color: var(--yellow);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	border: 2px solid var(--border-grey);
	margin-top: 2px;
}

img.forum-reply-avatar {
	object-fit: cover;
}

.forum-reply-body {
	flex: 1;
	min-width: 0;
}

/* "Reply as <name>" label is mobile-only - see the @media block below. */
.forum-reply-asuser {
	display: none;
}

/* Tiptap toolbar + editor keep their own focus styles (inside tiptap-editor.css),
   so the composer container itself has no border to stack with. */
.forum-reply-composer .tiptap-editor-area {
	min-height: 120px;
	padding: 12px 14px;
}

.forum-reply-actions {
	display: flex;
	margin-top: 10px;
	gap: 8px;
}

/* User hover card - shown when pointing at the avatar, author link, or the card itself. */
.forum-user-card {
	position: absolute;
	top: 76px;
	left: 10px;
	background: var(--darker-grey);
	border: 1px solid var(--grey);
	border-radius: 6px;
	padding: 10px 14px;
	min-width: 180px;
	font-size: 13px;
	color: var(--lighter-grey);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
	pointer-events: none;
}

.forum-post:has(.forum-post-avatar:hover) .forum-user-card,
.forum-post:has(a.forum-post-author:hover) .forum-user-card,
.forum-post:has(.forum-user-card:hover) .forum-user-card {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s;
	pointer-events: auto;
}

.forum-user-card-name {
	color: var(--yellow);
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 6px;
	word-break: break-word;
}

.forum-user-card-role {
	margin-bottom: 6px;
}

	.forum-user-card-role .badge {
		font-size: 10px;
		letter-spacing: 0.3px;
	}

.forum-user-card-stat {
	color: var(--meta-grey);
	font-size: 12px;
	line-height: 1.6;
}

	.forum-user-card-stat strong {
		color: var(--lighter-grey);
	}

/* Simple list card (search results, user posts) */
.forum-list-card {
	background: var(--dark-grey);
	border: 1px solid var(--grey);
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 10px;
}

	.forum-list-card:hover {
		border-color: var(--meta-grey);
	}

/* Search-result snippet - clip to three lines so long posts don't blow out
   the result cards, and highlight the matched query terms. */
.forum-search-snippet {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-clamp: 3;
	overflow: hidden;
	color: var(--lighter-grey);
	line-height: 1.45;
}

	.forum-search-snippet mark {
		background: #ffe37a;
		color: #1b1b1b;
		padding: 0 2px;
		border-radius: 2px;
	}

/* Generic mv2-card fallback (was undefined) */
.mv2-card {
	background: var(--dark-grey);
	border: 1px solid var(--grey);
	border-radius: 6px;
}

/* Sub-boards label */
.forum-subboards-label {
	color: var(--meta-grey);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
	margin: 0 0 6px 2px;
}

/* Mobile responsiveness - compact two-line rows: title + replies on row 1,
   author/desc + date inline on row 2. The two *-main wrappers are hoisted out
   with display:contents so their children (title, meta) sit as direct grid
   items alongside the date column instead of taking a wrapped full-width row. */
@media (max-width: 768px) {
	.forum-page-header {
		padding: 10px 12px;
		margin-bottom: 12px;
	}

	.forum-page-header .forum-page-title {
		font-size: 20px;
	}

	.forum-search-group {
		width: auto;
		flex: 1 1 auto;
	}

	.forum-page-header-actions {
		gap: 6px;
		flex-basis: 100%;
		margin-left: 0;
	}

	.forum-category {
		margin-bottom: 12px;
	}

	.forum-category-header {
		grid-template-columns: 1fr;
		padding: 6px 12px;
	}

		.forum-category-title h3 {
			font-size: 13px;
		}

	.forum-col-label {
		display: none;
	}

	.forum-topic-row,
	.forum-board-row {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"icon title    replies"
			"icon meta     last-post";
		column-gap: 10px;
		row-gap: 0;
		align-items: center;
		padding: 8px 12px;
		position: relative;
	}

	.forum-topic-main,
	.forum-board-main {
		display: contents;
	}

	.forum-icon {
		grid-area: icon;
		width: 30px;
		height: 30px;
		align-self: center;
	}

		.forum-icon svg {
			width: 14px;
			height: 14px;
		}

	.forum-icon-compound .forum-icon-main svg {
		width: 14px;
		height: 14px;
	}

	.forum-icon-compound .forum-icon-badge {
		width: 14px;
		height: 14px;
		bottom: -2px;
		right: -2px;
		border-width: 1px;
	}

		.forum-icon-compound .forum-icon-badge svg {
			width: 10px;
			height: 10px;
		}

	.forum-topic-title,
	.forum-board-name {
		grid-area: title;
		font-size: 14px;
		margin: 0;
		min-width: 0;
	}

	.forum-topic-meta,
	.forum-board-desc {
		grid-area: meta;
		font-size: 11px;
		min-width: 0;
		line-height: 1.3;
	}

	.forum-topic-last-post,
	.forum-board-last-post {
		grid-area: last-post;
		text-align: right;
		font-size: 11px;
		line-height: 1.3;
		min-width: 0;
		padding: 0;
		flex-basis: auto;
	}

	/* Drop "by user" suffix in last-post on mobile - date alone keeps the row tight */
	.forum-last-post-author {
		display: none;
	}

	.forum-topic-replies {
		grid-area: replies;
		position: static;
		font-size: 13px;
		min-width: 0;
		align-self: center;
	}

	.forum-board-row .forum-topic-replies {
		position: static;
	}

	.forum-topic-preview {
		display: none;
	}

	.forum-stats {
		flex-direction: row;
		justify-content: flex-start;
		gap: 14px;
		padding-left: 54px;
	}

	.forum-last-post {
		padding-left: 54px;
	}

	/* Avatar floats inline-left so the header sits next to it AND the body extends
	   full-width once it clears the avatar's vertical range. Grid layout would lock
	   the body into column 2 forever, wasting horizontal space below the avatar. */
	.forum-post {
		display: block;
		position: relative;
	}

	.forum-post-user {
		float: left;
		display: block;
		background: transparent;
		border-right: none;
		border-bottom: none;
		border-radius: 0;
		padding: 0;
		margin: 10px 10px 4px 10px;
		text-align: initial;
	}

	.forum-post-avatar {
		width: 32px;
		height: 32px;
		font-size: 14px;
		border-width: 1px;
		margin: 0;
	}

	.forum-post-main {
		display: block;
		padding: 8px 10px 10px 10px;
	}

	/* Min-height matches the avatar so body clears cleanly without a visible gap
	   between the bottom of the avatar and the start of body text. */
	.forum-post-header {
		min-height: 32px;
		padding-bottom: 4px;
		margin-bottom: 6px;
		gap: 4px 8px;
		font-size: 11px;
	}

	/* Forces the body to start past the floated avatar (avoids first-line indent). */
	.forum-post-body {
		clear: left;
	}

	a.forum-post-author {
		font-size: 13px;
	}

	/* Compact action icons so a long username + time + 3 icons share a row.
	   With ms-auto on the action cluster it still pushes right; flex-wrap kicks
	   in only when the username genuinely exceeds the available width. */
	button.forum-post-action,
	a.forum-post-action {
		width: 24px;
		height: 24px;
	}

		.forum-post-action svg {
			width: 14px;
			height: 14px;
		}

	/* Reply composer: lift the avatar above the editor so the editor uses the
	   full row width. The "Reply as <name>" label keeps row 1 from feeling empty
	   beside the small avatar. */
	.forum-reply-composer {
		flex-wrap: wrap;
		gap: 8px 10px;
	}

	.forum-reply-avatar {
		width: 32px;
		height: 32px;
		font-size: 14px;
		border-width: 1px;
		margin-top: 0;
	}

	.forum-reply-asuser {
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		font-size: 13px;
		color: var(--meta-grey);
		word-break: break-word;
	}

		.forum-reply-asuser strong {
			color: var(--lighter-grey);
			font-weight: 600;
			margin-left: 4px;
		}

	/* flex-basis 100% wraps the editor onto row 2, full available width. */
	.forum-reply-body {
		flex-basis: 100%;
	}
}

/* ── Forum pager ───────────────────────────────────────── */
/* Horizontal row: "Showing N of M" on the left, page buttons on the right.
   Flat pill buttons - hover shows a subtle grey background, active page is
   a solid yellow pill. No site-level <nav> panel (overridden below). */
.forum-pager-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
	margin-bottom: 8px;
}

.forum-pager-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--meta-grey);
	font-size: 13px;
}

	.forum-pager-info strong {
		color: var(--lighter-grey);
		font-weight: 700;
	}

.forum-pager {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: wrap;
	margin-left: auto;
	/* Reset site-wide <nav> panel styling - see .forum-breadcrumb note. */
	background: transparent;
	border: none;
	box-shadow: none;
}

	.forum-pager a,
	.forum-pager-current,
	.forum-pager-gap,
	.forum-pager-nav {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 32px;
		height: 32px;
		padding: 0 10px;
		font-size: 13px;
		font-weight: 600;
		color: var(--lighter-grey);
		background: transparent;
		border: none;
		border-radius: 6px;
		text-decoration: none;
		transition: background-color 0.12s ease, color 0.12s ease;
		line-height: 1;
	}

	.forum-pager a:hover {
		background: var(--grey);
		color: var(--yellow);
		text-decoration: none;
	}

.forum-pager-current {
	background: var(--yellow);
	color: var(--darker-grey);
	font-weight: 700;
	cursor: default;
}

.forum-pager-gap {
	color: var(--meta-grey);
	min-width: 20px;
	padding: 0 4px;
	cursor: default;
}

.forum-pager-nav {
	padding: 0 12px;
	color: var(--meta-grey);
}

.forum-pager-disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* ── Forum emoji reactions ─────────────────────────────── */
.forum-reactions .forum-reaction-pill {
	padding: 4px 10px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.15);
	background: rgba(255,255,255,0.05);
	color: inherit;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.forum-reactions .forum-reaction-pill.active {
	border-color: var(--yellow);
	background: rgba(229,202,95,0.18);
}
.forum-reactions .forum-reaction-pill.disabled {
	cursor: not-allowed;
	opacity: 0.8;
}
.forum-reactions .forum-reaction-emoji {
	font-size: 1.1em;
}
.forum-reactions .forum-reaction-count {
	font-size: 0.85em;
	color: var(--meta-grey, #aaa);
}

/* Mod detail: install-path copy box (Install instructions modal) */
.install-path-box {
	background: var(--dark-grey);
	border: 1px solid var(--grey);
	border-radius: 4px;
	display: flex;
	align-items: stretch;
	gap: 0;
	overflow: hidden;
}
	.install-path-text {
		flex: 1 1 auto;
		color: var(--yellow);
		padding: 0.5rem 0.75rem;
		word-break: break-all;
		font-family: monospace;
	}
	.install-path-copy {
		flex-shrink: 0;
		background: transparent;
		border: none;
		border-left: 1px solid var(--grey);
		color: var(--lighter-grey);
		padding: 0 0.75rem;
		cursor: pointer;
		transition: background-color 0.15s ease, color 0.15s ease;
	}
	.install-path-copy:hover {
		background: var(--grey);
		color: var(--yellow);
	}
	.install-path-copy svg {
		width: 14px;
		height: 14px;
		display: block;
	}

.install-tree {
	background: var(--dark-grey);
	border: 1px solid var(--grey);
	border-radius: 4px;
	color: var(--lighter-grey);
	padding: 0.6rem 0.9rem;
	font-family: monospace;
	font-size: 0.875rem;
	line-height: 1.4;
	white-space: pre;
	overflow-x: auto;
}

/* Mod detail: capability-shield severity badge */
.capability-shield-badge {
	--sev-color: var(--meta-grey);
	cursor: pointer;
	user-select: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.85rem;
	font-size: 0.875rem;
	line-height: 1.2;
	background: transparent;
	color: var(--white);
	border: 1.5px solid var(--sev-color);
	border-left: 5px solid var(--sev-color);
	border-radius: 6px;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.capability-shield-badge .shield-icon {
	display: inline-flex;
	color: var(--sev-color);
}
.capability-shield-badge .shield-icon svg { width: 20px; height: 20px; }
.capability-shield-badge .badge-label { font-weight: 600; }
.capability-shield-badge .badge-divider { color: var(--meta-grey); }
.capability-shield-badge .badge-tail { color: var(--meta-grey); }
.capability-shield-badge .badge-arrow {
	color: var(--sev-color);
	margin-left: 0.15rem;
	transition: transform 0.15s ease;
}
.capability-shield-badge:hover,
.capability-shield-badge:focus-visible {
	background-color: color-mix(in srgb, var(--sev-color) 14%, transparent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sev-color) 18%, transparent);
	outline: none;
}
.capability-shield-badge:hover .badge-arrow,
.capability-shield-badge:focus-visible .badge-arrow {
	transform: translateX(3px);
}
.capability-shield-badge.sev-info     { --sev-color: var(--meta-grey); }
.capability-shield-badge.sev-notable  { --sev-color: var(--yellow); }
.capability-shield-badge.sev-concerning { --sev-color: var(--red); }
.capability-shield-badge.sev-clean    { --sev-color: var(--green); }
.capability-shield-badge.sev-pending   { --sev-color: var(--meta-grey); cursor: default; }
.capability-shield-badge.sev-pending:hover { background: transparent; box-shadow: none; }

#capabilitiesInfoModal .modal-body { color: var(--white); }
#capabilitiesInfoModal .capability-list dt { font-weight: 600; }
#capabilitiesInfoModal .capability-list dd { color: var(--meta-grey, #b0b0b0); }

/* ── Forum board tags ─────────────────────────────────────────── */

/* Forum chips reuse the .mod-card-tag pill class directly so forum and mod tags render
   identically. Forum-specific modifier classes (include/exclude/state filter chips, the
   applied-ring inside the Edit-tags popover) layer on top via the selectors below. */

.forum-topic-tags {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-left: 8px;
	vertical-align: middle;
}

/* Mobile: hoist the tag strip above the title text instead of letting it wrap inside the
   title cell and squeeze the row. The title element becomes a flex column; tags get order
   -1 + flex-basis 100% so they claim their own full-width line at the top of the cell.
   Rule sits AFTER the base .forum-topic-tags above so source order beats the mobile grid
   rule earlier in the file on equal-specificity selectors. */
@media (max-width: 768px) {
	.forum-topic-row .forum-topic-title {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 4px;
	}

	.forum-topic-row .forum-topic-title .forum-topic-tags {
		order: -1;
		flex-basis: 100%;
		margin-left: 0;
		margin-bottom: 2px;
	}

	.forum-topic-row .forum-topic-title .forum-topic-unread-badge {
		margin-left: 4px;
	}
}

.forum-topic-row.closed-by-tag .forum-topic-title-text {
	opacity: 0.6;
	font-style: italic;
}

/* Board view filter bar - compact "Filter ▾" popover with active-filter chips alongside. */
.forum-tag-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 8px 0 12px;
}

.forum-tag-filter-trigger-wrap {
	flex-shrink: 0;
}

.forum-tag-filter-trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.forum-tag-filter-icon {
	display: inline-flex;
	align-items: center;
	width: 1.05em;
	height: 1.05em;
}

.forum-tag-filter-icon svg {
	width: 100%;
	height: 100%;
}

.forum-tag-filter-state-check {
	display: inline-block;
	width: 1em;
	color: var(--dark-yellow, #cdb454);
}

/* Topic-list footer that mentions topics hidden by the state filter. Sits below the last
   topic row, above the pager - quiet enough to not distract, but discoverable. */
.forum-hidden-footer {
	padding: 8px 12px;
	border-top: 1px solid var(--mid-grey, #353535);
}

/* Dark theme for the "Add tag" dropdown on Topic.cshtml. Bootstrap's default dropdown-item
   hover is a bright bg that clashes with the rest of the forum chrome - match the dark
   palette used by the filter menus. */
.forum-topic-tag-add-menu {
	background: var(--darker-grey, #202020);
	border: 1px solid var(--mid-grey, #404040);
	min-width: 220px;
}

.forum-topic-tag-add-menu .dropdown-item {
	color: var(--lighter-grey, #d0d0d0);
	background: transparent;
	border: 0;
	width: 100%;
	text-align: left;
}

.forum-topic-tag-add-menu .dropdown-item:hover,
.forum-topic-tag-add-menu .dropdown-item:focus {
	background: var(--mid-grey, #353535);
	color: var(--white, #f0f0f0);
}

/* Simple Discord-style row: label on the left, trailing ✓ on the right when applied. The
   plain label intentionally drops the chip pill - the menu is dense and clearly scoped
   to the topic's tag list, no extra colour treatment needed. */
.forum-tag-edit-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.forum-tag-edit-label {
	flex: 1 1 auto;
	min-width: 0;
}

.forum-tag-edit-check {
	flex: 0 0 auto;
	width: 1em;
	text-align: center;
	color: var(--dark-yellow, #cdb454);
	font-weight: 700;
}

/* Active filter chips are <a> elements - kill the default underline + yellow link color. */
a.mod-card-tag {
	text-decoration: none;
	color: var(--meta-grey);
}

a.mod-card-tag:hover {
	color: var(--lighter-grey);
}

/* Smart empty state. Uses the existing .forum-category-empty padding/colors and just
   tightens the two-line layout. */
.forum-empty-state p {
	margin-bottom: 0;
}

.forum-empty-state p + p {
	margin-top: 4px;
}

.forum-tag-filter-menu {
	min-width: 280px;
	max-width: 360px;
	max-height: 480px;
	overflow-y: auto;
	background: var(--darker-grey, #202020);
	border: 1px solid var(--mid-grey, #404040);
	color: var(--lighter-grey, #d0d0d0);
}

.forum-tag-filter-menu .form-check-label,
.forum-tag-filter-menu label {
	color: var(--lighter-grey, #d0d0d0);
}

.forum-tag-filter-list {
	max-height: 280px;
	overflow-y: auto;
	margin-bottom: 0;
}

.forum-tag-filter-row {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 2px 4px;
	border-radius: 4px;
}

.forum-tag-filter-row[data-state="include"] {
	background: rgba(96, 192, 96, 0.14);
}

.forum-tag-filter-row[data-state="exclude"] {
	background: rgba(192, 96, 96, 0.14);
}

.forum-tag-filter-toggle {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--mid-grey, #404040);
	border-radius: 4px;
	color: var(--meta-grey, #909090);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.forum-tag-filter-toggle:hover {
	color: var(--white, #f0f0f0);
	border-color: var(--lighter-grey, #b0b0b0);
}

.forum-tag-filter-row[data-state="include"] .forum-tag-filter-toggle.inc {
	background: rgba(96, 192, 96, 0.35);
	border-color: rgba(96, 192, 96, 0.8);
	color: #fff;
}

.forum-tag-filter-row[data-state="exclude"] .forum-tag-filter-toggle.exc {
	background: rgba(192, 96, 96, 0.35);
	border-color: rgba(192, 96, 96, 0.8);
	color: #fff;
}

/* State dropdown (Open / Closed / All), a small trigger next to the Filter tags button. */
.forum-tag-filter-state-wrap {
	flex-shrink: 0;
}

.forum-tag-filter-state-trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.forum-tag-filter-state-menu {
	min-width: 160px;
	background: var(--darker-grey, #202020);
	border: 1px solid var(--mid-grey, #404040);
}

.forum-tag-filter-state-menu .dropdown-item {
	color: var(--lighter-grey, #d0d0d0);
}

.forum-tag-filter-state-menu .dropdown-item:hover,
.forum-tag-filter-state-menu .dropdown-item:focus {
	background: var(--mid-grey, #353535);
	color: var(--white, #f0f0f0);
}

/* Active-filter chips next to the trigger button - clickable links that drop one filter. */
.forum-tag-filter-active {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

.forum-tag-chip.is-active-filter {
	text-decoration: none;
	cursor: pointer;
}

.forum-tag-chip-include.is-active-filter,
.forum-tag-chip-exclude.is-active-filter,
.forum-tag-chip-state {
	gap: 4px;
}

.forum-tag-chip-include.is-active-filter {
	background: rgba(96, 192, 96, 0.22);
	box-shadow: inset 0 0 0 1px rgba(96, 192, 96, 0.6);
	color: #cfeacf;
}

.forum-tag-chip-exclude.is-active-filter {
	background: rgba(192, 96, 96, 0.18);
	box-shadow: inset 0 0 0 1px rgba(192, 96, 96, 0.55);
	color: #eccfcf;
}

.forum-tag-chip-state {
	background: rgba(140, 140, 200, 0.18);
	box-shadow: inset 0 0 0 1px rgba(140, 140, 200, 0.5);
	color: #d5d5ec;
}

.forum-tag-filter-empty {
	font-style: italic;
}

/* Applied-chip remove button on Topic.cshtml */
.forum-topic-tag-widget {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
}

.forum-topic-closed-banner {
	margin-top: 0;
}

/* Generic show/hide hook used by the AJAX tag toggle so it can flip the closed icons in the
   title, the "topic closed" banner, and the reply form / closed alert pair without a full
   page reload. The is-topic-state-hidden class is added/removed on those elements together
   so toggling one always reveals the other. */
.is-topic-state-hidden {
	display: none !important;
}

.forum-topic-tag-add-btn.forum-icon-btn {
	width: 32px;
	height: 32px;
}

.forum-topic-tag-add-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
}

.forum-topic-tag-add-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.forum-topic-tag-widget {
	gap: 6px;
	align-items: center;
}

/* Topic-detail page renders bigger chips than the listings - match the spacing the user
   expects on a wide-margin page. Only chips that are direct children of the widget pick
   this up; the dropdown rows below intentionally render as plain labels. */
.forum-topic-tag-widget > .mod-card-tag {
	padding: 7px 7px;
}