/*
 * Docs code block component (CC-Prompt-13, 8-26-26).
 *
 * One treatment for pre and code inside docs and guide content, per
 * 06-Docs-Program/Docs-Code-Block-Spec-8-26-26.md. Enqueued ONLY on docs CPT
 * and guide singles (includes/bl-docs.php), depending on bl-prose so these
 * equal-specificity rules win on print order and sharpen the bl-prose
 * baseline rather than fight it.
 *
 * INSPECTION RESULT THAT DECIDED THE COLORING (8-26, /api/ on Local, light
 * and dark, measured live): the marketing blocks are SINGLE-COLOR ink mono
 * (input-mono 11px, the bl-label data preset size) with hand-authored
 * annotation spans (.rd survey red, .mut graphite) placed by the generator.
 * There is no grammar-based syntax coloring mechanism to replicate, so per
 * the spec this is the single-color mono baseline: CSS only, no highlighter,
 * no Prism. Blueprint remains the ONLY permitted syntax accent if coloring
 * is ever added; survey red never appears inside docs code blocks.
 *
 * Tokens only: surfaces and borders ride the cadastral global color
 * variables (Card White light, elevated dark surface dark, both the
 * cadastral-panel slug under D18's variable swap), and the mono face and
 * size ride the bl-label Global Typography data preset variables. Theme
 * switching is inherited from bl-theme.css redefining those variables under
 * html[data-bl-theme]; this file carries ZERO mode-specific rules on
 * purpose. Line-height 1.7 is unitless per the token doctrine and matches
 * the measured /api/ family value.
 */

/* ------------------------------------------------------------ the block -- */

.bl-prose pre,
.betterdocs-entry-content pre {
	margin: 24px 0 0;
	padding: 16px;
	background: var(--e-global-color-cadastral-panel);
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	min-width: 0;
	white-space: pre;
	font-family: var(--e-global-typography-bl-label-font-family), ui-monospace, monospace;
	font-size: var(--e-global-typography-bl-label-font-size);
	font-weight: var(--e-global-typography-bl-label-font-weight);
	line-height: 1.7;
	color: var(--e-global-color-cadastral-ink);
	tab-size: 2;
}

.bl-prose pre code,
.betterdocs-entry-content pre code {
	display: block;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	white-space: inherit;
}

/* --------------------------------------------- copy button (JS-injected) -- */

/*
 * bl-code.js wraps each qualifying pre in this div so the button anchors to
 * the block frame rather than scrolling away with long lines (an absolutely
 * positioned child of the scroll container itself would ride the scroll).
 * Without JS the wrapper never exists and the plain pre above is the whole
 * component. The wrapper takes over the block gap; the doubled-scope pre
 * rule below outranks the 0-1-1 margin above on specificity.
 */
.bl-code-wrap {
	position: relative;
	margin: 24px 0 0;
	min-width: 0;
}

.bl-prose .bl-code-wrap pre,
.betterdocs-entry-content .bl-code-wrap pre {
	margin: 0;
}

/* Quiet until hover and focus: graphite on the block surface, sharpening to
 * ink. A solid panel background so code never shows through it. */
.bl-copy-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 3px 8px;
	font-family: var(--e-global-typography-bl-label-font-family), ui-monospace, monospace;
	font-size: var(--e-global-typography-bl-label-font-size);
	font-weight: var(--e-global-typography-bl-label-font-weight);
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--e-global-color-cadastral-graphite);
	background: var(--e-global-color-cadastral-panel);
	border: 1px solid var(--e-global-color-cadastral-line);
	border-radius: 2px;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.bl-copy-btn:hover,
.bl-copy-btn:focus-visible {
	color: var(--e-global-color-cadastral-ink);
	border-color: var(--e-global-color-cadastral-graphite);
}

.bl-copy-btn:focus-visible {
	outline: 2px solid var(--e-global-color-cadastral-ink);
	outline-offset: 2px;
}

/* Off-viewport scratch element for the legacy copy path. Never display:none
 * (selection would fail); parked off-screen instead. */
.bl-copy-sandbox {
	position: fixed;
	top: -200px;
	left: 0;
	width: 10px;
	height: 10px;
	opacity: 0;
}