/* ==========================================================================
   IT quote rotator. Footer and boot overlay.
   ========================================================================== */

.quote {
	margin: 0;
	max-width: 62ch;
	transition: opacity var(--motion-base) var(--ease);
}

.quote[hidden] { display: none; }

.quote.is-swapping { opacity: 0; }

.quote__text {
	margin: 0 0 var(--s-2);
	max-width: none;
	font-family: var(--font-body);
	font-size: var(--body-sm);
	line-height: 1.55;
	color: var(--muted);
	text-wrap: pretty;
	quotes: '"' '"';
}

.quote__text::before { content: open-quote; }
.quote__text::after  { content: close-quote; }

.quote__by {
	font-size: var(--mono-label);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--rule);
}

.quote__by::before { content: "— "; }

/* Footer placement — sits above the colophon meta line. */
.quote--footer {
	margin-block: var(--s-5) var(--s-5);
	padding-block-start: var(--s-5);
	border-top: 1px solid var(--rule);
	cursor: pointer;
}

.quote--footer:hover .quote__text { color: var(--ink); }

/* Paused state has to be visible, not just functional. */
.quote.is-paused .quote__by::after {
	content: "  (paused)";
	color: var(--signal);
}

/* Boot overlay placement — pinned under the streaming log. */
.quote--boot {
	margin-block-start: var(--s-7);
	padding-block-start: var(--s-5);
	border-top: 1px solid var(--rule);
	max-width: 56ch;
}

.quote--boot .quote__text { color: var(--muted); }

@media (max-width: 47.99em) {
	.quote--boot { display: none; }
}