/* ==========================================================================
   CLI output/configuration block: <pre class="cli">...</pre>
   Loaded both on the site and inside the WordPress editor so the block
   looks identical while typing. Colors are variables — override in a theme.
   ========================================================================== */
:root {
	--nsq-cli-bg: #E3E3E3;
	--nsq-cli-text: #000;
	--nsq-cli-radius: 10px;
}

pre.cli {
	background: var(--nsq-cli-bg);
	color: var(--nsq-cli-text);
	border-radius: var(--nsq-cli-radius);
	padding: 18px 20px;
	margin: 16px 0;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, "Courier New", monospace;
	font-size: 14.5px;
	line-height: 1.65;
	/* Never wrap long commands: a wrapped config reads incorrectly.
	   The block scrolls horizontally instead. */
	white-space: pre;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	tab-size: 4;
	text-align: left;
	border: none;
}

pre.cli code {
	background: none;
	color: inherit;
	padding: 0;
	font-size: inherit;
	font-family: inherit;
}

/* Deliberately single-colored: no syntax highlighting inside CLI blocks.
   Any spans left over from older content inherit the block color. */
pre.cli * { color: inherit; font-style: normal; }

/* Themes often style "pre" themselves (e.g. ".content pre"); on the site the
   block's look must come from the variables above, so these win over it. */
.ns-quiz pre,
.ns-quiz pre.cli {
	background: var(--nsq-cli-bg) !important;
	color: var(--nsq-cli-text) !important;
	border: none !important;
	box-shadow: none !important;
	font-size: 14.5px !important;
}
.ns-quiz pre code,
.ns-quiz pre.cli *,
.ns-quiz pre * {
	background: none !important;
	color: inherit !important;
	border: none !important;
}

@media (max-width: 782px) {
	pre.cli,
	.ns-quiz pre,
	.ns-quiz pre.cli {
		font-size: 12.5px !important;
		padding: 14px;
		border-radius: 8px;
	}
}