/* TuServerMu - quote folding.
   Long quotes get clamped to a readable height with a fade and a toggle button
   under them, so quoting a tutorial-sized post no longer buries the topic.
   Loaded from Sources/QuoteFold.php. The height is set inline by
   Themes/default/scripts/quotefold.js; the value here is only a fallback. */

.tsmu-qf.is-collapsed {
	position: relative;
	max-height: 320px;
	overflow: hidden;
}

/* Fade out the cut edge. The gradient matches the quote's own background, so
   the two SMF quote flavours need their own rule. */
.tsmu-qf.is-collapsed::after,
.bbc_standard_quote.tsmu-qf.is-collapsed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 88px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(224, 230, 246, 0) 0%, rgba(224, 230, 246, 0.9) 58%, #e0e6f6 100%);
}

.bbc_alternate_quote.tsmu-qf.is-collapsed::after {
	background: linear-gradient(to bottom, rgba(235, 244, 248, 0) 0%, rgba(235, 244, 248, 0.9) 58%, #ebf4f8 100%);
}

.tsmu-qf-toggle {
	display: block;
	width: 100%;
	height: auto;
	margin: -4px 0 10px 0;
	padding: 7px 12px;
	border: 1px solid #c3cee4;
	border-radius: 6px;
	background: linear-gradient(#f6f9ff, #e6ecf9);
	box-shadow: none;
	color: #2c4f86;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tsmu-qf-toggle:hover,
.tsmu-qf-toggle:focus {
	background: linear-gradient(#eef4ff, #d9e4f8);
	border-color: #9db4dc;
	color: #1d3a66;
}

.tsmu-qf-toggle::after {
	content: " \25BE";
	margin-left: 5px;
}

.tsmu-qf-toggle.is-open::after {
	content: " \25B4";
}

/* A folded quote never has room for the floating quote-image thumbnails to
   overlap the fade, keep them under it. */
.tsmu-qf.is-collapsed blockquote:last-child {
	margin-bottom: 0;
}

@media (max-width: 560px) {
	.tsmu-qf.is-collapsed {
		max-height: 240px;
	}

	.tsmu-qf-toggle {
		font-size: 0.86rem;
	}
}

/* Printing, and anyone who asked the browser for less motion, gets everything. */
@media print {
	.tsmu-qf.is-collapsed {
		max-height: none !important;
		overflow: visible !important;
	}

	.tsmu-qf.is-collapsed::after,
	.tsmu-qf-toggle {
		display: none !important;
	}
}