/* ──────────────────────────────────────────────────────────────────────────
   The "Summarize with" widget.

   Was an inline <style> block duplicated on every page that carried the
   widget, which breaks the one rule the master is least willing to bend:
   no per-article <style> blocks, ever. Lifted here on 15 September 2026 so
   the rollout to 78 content pages ships one cached file instead of 78
   copies of the same 900 bytes.

   Lives in its own sheet rather than in article.css because 41 of the 78
   target pages do not link article.css at all — a separate defect, logged,
   not fixed here. This sheet is loaded explicitly next to the widget.

   Both scorers accept a third stylesheet under /assets/css/; the check is
   that nothing loads from OUTSIDE that directory.
   ────────────────────────────────────────────────────────────────────── */

.ask-ai-bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 20px auto 4px;
	padding: 22px 16px;
	max-width: 780px;
	text-align: center
}

.ask-ai-bar-label {
	margin: 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(196, 181, 253, .78)
}

.ask-ai-bar-note {
	margin: 0;
	max-width: 46ch;
	font-size: .78rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .45)
}

.ask-ai-bar-buttons {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 12px;
	width: 100%;
	max-width: 620px
}

.ask-ai-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 11px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(139, 92, 246, .28);
	color: rgba(255, 255, 255, .92);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease
}

.ask-ai-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	flex: 0 0 auto
}

.ask-ai-btn:hover,
.ask-ai-btn:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(139, 92, 246, .6);
	background: rgba(255, 255, 255, .09);
	box-shadow: 0 8px 24px rgba(124, 58, 237, .25);
	color: #fff
}

@media (max-width: 600px) {
	.ask-ai-bar {
		padding: 18px 8px
	}

	.ask-ai-bar-buttons {
		gap: 8px
	}

	.ask-ai-btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 10px 6px;
		font-size: .8rem;
		gap: 6px
	}

	.ask-ai-btn svg {
		width: 15px;
		height: 15px
	}
}

/* The widget sits on a dark page shell. On the small number of pages that
   render on a light ground, the tokens above would vanish — so restate them
   against a light background rather than letting the text go invisible. */
@media (prefers-color-scheme: light) {
	.ask-ai-bar-label {
		color: rgba(109, 40, 217, .9)
	}

	.ask-ai-bar-note {
		color: rgba(30, 27, 45, .58)
	}

	.ask-ai-btn {
		background: rgba(124, 58, 237, .06);
		border-color: rgba(124, 58, 237, .3);
		color: rgba(30, 27, 45, .92)
	}

	.ask-ai-btn:hover,
	.ask-ai-btn:focus-visible {
		background: rgba(124, 58, 237, .12);
		color: #1e1b2d
	}
}