/* Quick-script block (web/static/setup.js) for the client guides.
   Loaded after app.css: only new .setup-* classes on top of the shared
   dark guide theme, no changes to the existing guide layout. */

.setup-block {
	margin: 0 0 36px;
	padding: 20px 22px 22px;
	border: 1px solid #31405a;
	border-radius: 14px;
	background: rgba(16, 21, 30, 0.78);
}

.setup-block > h2 {
	margin: 0 0 10px;
	color: #eff2f7;
	font-size: 19px;
	letter-spacing: 0;
}

.setup-intro {
	margin: 0 0 14px;
	max-width: 680px;
	color: #aeb8c7;
	font-size: 14px;
	line-height: 1.6;
}

.setup-controls {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 14px;
}

.setup-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	color: #8d9aaf;
	font-size: 12px;
}

.setup-select {
	height: 35px;
	min-width: 136px;
	padding: 8px 12px;
	border: 1px solid #3b485d;
	border-radius: 9px;
	background: #121720;
	color: #dce5f3;
	font-family: "SF Pro Text", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color-scheme: dark;
}

.setup-select:focus-visible {
	outline: 2px solid #2b5c9e;
	outline-offset: 1px;
	border-color: #4a5e80;
}

.setup-block .setup-download {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 35px;
	padding: 8px 14px;
	border: 1px solid #3b485d;
	border-radius: 9px;
	color: #cfe2ff;
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background var(--transition),
		border-color var(--transition),
		color var(--transition);
}

.setup-block .setup-download:hover,
.setup-block .setup-download:focus-visible {
	background: #2b3b52;
	border-color: #4a5e80;
	color: #e8f0ff;
	text-decoration: none;
}

/* The generated command is one long line: scroll inside the block
   instead of stretching the guide column on narrow screens. */
.setup-block pre {
	overflow-x: auto;
}

.setup-block .code-block {
	margin: 0 0 4px;
}

.setup-hint {
	margin: 10px 0 0;
	max-width: 680px;
	color: #8d9aaf;
	font-size: 13px;
	line-height: 1.6;
}

.setup-block .setup-unsupported {
	margin: 0 0 4px;
	padding: 12px 14px;
	border: 1px solid #574a2e;
	border-radius: 10px;
	background: rgba(84, 68, 30, 0.22);
	color: #e8d5a8;
	font-size: 13px;
	line-height: 1.6;
}

.setup-block .setup-unsupported a {
	color: #f2d9a4;
}

@media (max-width: 640px) {
	.setup-block {
		padding: 16px 16px 18px;
	}

	.setup-controls {
		gap: 10px;
	}

	.setup-field {
		flex: 1 1 124px;
		min-width: 0;
	}

	.setup-select {
		width: 100%;
		flex: none;
		min-width: 0;
	}

	.setup-block .setup-download {
		flex: 1 1 100%;
		justify-content: center;
	}
}