/*
 * Code blocks (core/code): dark whatever the page around them, in the editor
 * too, with colours for the tokens that eu_code_block() (inc/code.php) marks.
 * Each colour has at least 6:1 contrast on the background. Long lines scroll
 * sideways instead of wrapping, so indentation stays readable on phones.
 */
.wp-block-code {
	--eu-code-bg: #1b1a20;
	--eu-code-text: #ecebf2;
	--eu-code-comment: #9d9aab;
	--eu-code-keyword: #ff6b81;
	--eu-code-string: #6fe0c8;
	--eu-code-number: #ffb46b;
	--eu-code-function: #8fb4ff;
	--eu-code-type: #ffd479;
	--eu-code-attr: #e8a5ff;
	--eu-code-tag: #ff7070;
	--eu-code-variable: #c9ccff;
	--eu-code-meta: #b9a8e8;
	--eu-code-inserted: #7fe0a0;
	--eu-code-deleted: #ff8f8f;
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: auto;
	padding: clamp(1rem, 3vw, 1.5rem) clamp(1.1rem, 3vw, 1.75rem);
	border: 0;
	border-radius: 0;
	background: var(--eu-code-bg);
	color: var(--eu-code-text);
	color-scheme: dark;
	font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
	font-size: .875rem;
	line-height: 1.7;
	tab-size: 4;
	text-align: start;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scrollbar-color: #4a4855 transparent;
}
.wp-block-code:focus-visible { outline: 3px solid var(--eu-red, #ff0000); outline-offset: 2px; }
.wp-block-code code {
	display: block;
	width: max-content;
	min-width: 100%;
	color: inherit;
	font: inherit;
	white-space: pre;
	overflow-wrap: normal;
}
.wp-block-code ::selection { background: rgb(143 180 255 / 30%); }

.eu-code__comment { color: var(--eu-code-comment); font-style: italic; }
.eu-code__keyword { color: var(--eu-code-keyword); }
.eu-code__string { color: var(--eu-code-string); }
.eu-code__number,
.eu-code__literal { color: var(--eu-code-number); }
.eu-code__function { color: var(--eu-code-function); }
.eu-code__type { color: var(--eu-code-type); }
.eu-code__attr { color: var(--eu-code-attr); }
.eu-code__tag { color: var(--eu-code-tag); }
.eu-code__variable { color: var(--eu-code-variable); }
.eu-code__meta { color: var(--eu-code-meta); }
.eu-code__inserted { color: var(--eu-code-inserted); }
.eu-code__deleted { color: var(--eu-code-deleted); }