/* ==========================================================================
   Install — numbered steps + example config window.
   ========================================================================== */

.install {
	padding: var(--space-48) var(--space-16);
	max-width: var(--container-wide);
	margin: 0 auto;
}

.install__title {
	color: var(--color-text);
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-32);
}

.install__title::before {
	content: "# ";
	color: var(--color-text-muted);
}

.install__steps {
	gap: var(--space-32);
}

.install__step {
	gap: var(--space-12);
}

.install__step-title {
	color: var(--color-accent);
	font-size: var(--font-size-md);
}

.install__step-text {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.install__note {
	margin-top: var(--space-32);
	padding: var(--space-12) var(--space-16);
	background-color: rgba(86, 212, 221, 0.08);
	border-left: 2px solid var(--color-accent-secondary);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: var(--font-size-sm);
}

/* --- config window --- */
.config__code {
	margin: 0;
	padding: var(--space-16);
	color: var(--color-mono-base);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-base);
	white-space: pre;
	overflow-x: auto;
}

.config__guide-link {
	display: inline-block;
	margin-top: var(--space-12);
	color: var(--color-accent-secondary);
	font-size: var(--font-size-sm);
}

.config__guide-link:hover {
	color: var(--color-accent);
}

/* --- monokai-ish token colours for JSON / demo code --- */
.tok-key { color: var(--color-mono-key); }
.tok-string { color: var(--color-mono-string); }
.tok-func { color: var(--color-mono-func); }
.tok-ident { color: var(--color-mono-base); }
.tok-comment { color: var(--color-mono-comment); }

@media (min-width: 768px) {
	.config__code {
		font-size: var(--font-size-sm);
	}
}