/* Pane / snippet header — one strip used by every "code container" header.
   Static snippets (templates/components/code-snippet.php) and interactive
   study panes (the code-study Vue widget) both wear this class. Fixed
   height — contents fit within it, they don't grow it.

   Style with the custom properties below. */

.pane-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	height: var(--pane-header-height, 2.25rem);
	padding: 0 var(--pane-header-padding, 0.75rem);
	background: var(--pane-header-bg, #f1f5f9);
	border-bottom: 1px solid var(--pane-header-border, #e2e8f0);
	color: var(--pane-header-text, #475569);
	font-family: var(--code-font-family, ui-monospace, monospace);
	font-size: var(--pane-header-font-size, 0.8rem);
	box-sizing: border-box;
}

/* Dark variant — for panes with dark code bodies. The strip wears the
   same height/layout contract as light panes (so side-by-side panes line
   up), but its colors come from the existing --code-header-* tokens so
   it visually belongs to the dark editor below it. */
code-snippet > .pane-header {
	--pane-header-bg: var(--code-header-background);
	--pane-header-border: rgba(255, 255, 255, 0.08);
	--pane-header-text: var(--code-header-text-color);
}