.custom-md .expressive-code {
	margin-block: var(--m3e-space-4);
}

.custom-md .expressive-code ::selection {
	background: var(--codeblock-selection);
}

.expressive-code .frame {
	box-shadow: none !important;
}

.expressive-code .title {
	font-family: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo,
		Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.expressive-code .frame {
	--code-action-top: var(--m3e-space-3);
	--code-control-bg: var(--surface-container-high);
	--code-control-bg-hover: var(--surface-container-highest);
	--code-control-border: var(--outline-variant);
	--code-control-color: var(--on-surface);
}

.expressive-code .frame pre[data-language]::before {
	box-sizing: border-box;
	border: 1px solid var(--code-control-border);
	color: var(--code-control-color);
	background: var(--code-control-bg);
	box-shadow: var(--m3e-elevation-1);
	font: var(--m3e-type-label-medium);
	letter-spacing: 0;
}

.expressive-code .frame.is-terminal,
.expressive-code .frame.has-title {
	--code-action-top: calc(var(--button-spacing, 0px) + var(--m3e-space-1));
}

/* !important boundary: Expressive Code owns generated copy-button offsets; Shirone owns control alignment within its frame. */
.expressive-code .copy {
	top: var(--code-action-top) !important;
	right: var(--m3e-space-3) !important;
	z-index: 20;
}

.expressive-code .copy-btn {
	box-sizing: border-box;
	position: absolute;
	top: var(--code-action-top);
	right: var(--m3e-space-3);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--m3e-space-8);
	height: var(--m3e-space-8);
	margin: 0;
	padding: 0;
	border: 1px solid var(--code-control-border);
	border-radius: var(--shape-corner-s);
	appearance: none;
	color: var(--code-control-color);
	background: var(--code-control-bg);
	box-shadow: var(--m3e-elevation-1);
	cursor: pointer;
	opacity: 0;
	transition:
		opacity var(--m3e-duration-short) var(--m3e-easing-standard),
		background-color var(--m3e-duration-short) var(--m3e-easing-standard),
		transform var(--m3e-duration-short) var(--m3e-easing-standard);
}

.expressive-code .copy-btn:hover {
	background: var(--code-control-bg-hover);
}

.expressive-code .copy-btn:active {
	transform: scale(0.9);
}

.expressive-code .copy-btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.expressive-code .frame:hover .copy-btn,
.expressive-code .copy-btn:focus-visible {
	opacity: 1;
}

.expressive-code .copy-btn-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1rem;
	height: 1rem;
	pointer-events: none;
}

.expressive-code .copy-btn .copy-icon,
.expressive-code .copy-btn .success-icon {
	fill: currentColor;
	transition: opacity var(--m3e-duration-short) var(--m3e-easing-standard);
}

.expressive-code .copy-btn .copy-icon {
	opacity: 1;
}

.expressive-code .copy-btn .success-icon {
	opacity: 0;
}

.expressive-code .copy-btn.success .copy-icon {
	opacity: 0;
}

.expressive-code .copy-btn.success .success-icon {
	opacity: 1;
}

.expressive-code .copy-btn.success {
	border-color: var(--secondary);
	color: var(--on-secondary-container);
	background: var(--secondary-container);
}

.expressive-code.auto-collapsible .frame {
	position: relative;
}

.expressive-code.auto-collapsible .collapse-toggle-btn {
	box-sizing: border-box;
	position: absolute;
	top: var(--code-action-top);
	right: calc(var(--m3e-space-8) + var(--m3e-space-6));
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--m3e-space-8);
	height: var(--m3e-space-8);
	margin: 0;
	padding: 0;
	border: 1px solid var(--code-control-border);
	border-radius: var(--shape-corner-s);
	appearance: none;
	color: var(--code-control-color);
	background: var(--code-control-bg);
	box-shadow: var(--m3e-elevation-1);
	cursor: pointer;
	opacity: 0;
	transition:
		opacity var(--m3e-duration-short) var(--m3e-easing-standard),
		background-color var(--m3e-duration-short) var(--m3e-easing-standard),
		transform var(--m3e-duration-short) var(--m3e-easing-standard);
}

.expressive-code.auto-collapsible .frame:hover .collapse-toggle-btn,
.expressive-code.auto-collapsible .collapse-toggle-btn:focus-visible {
	opacity: 1;
}

.expressive-code.auto-collapsible .collapse-toggle-btn:hover {
	background: var(--code-control-bg-hover);
}

.expressive-code.auto-collapsible .collapse-toggle-btn:active {
	transform: scale(0.9);
}

.expressive-code.auto-collapsible .collapse-toggle-btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.expressive-code.auto-collapsible .collapse-toggle-btn svg {
	width: 1rem;
	height: 1rem;
	pointer-events: none;
	transition: transform var(--m3e-duration-medium) var(--m3e-easing-standard);
}

.expressive-code.auto-collapsible.collapsed .collapse-toggle-btn svg {
	transform: rotate(180deg);
}

.expressive-code.auto-collapsible .frame pre {
	position: relative;
	transition: max-height var(--m3e-duration-medium) var(--m3e-easing-standard);
}

.expressive-code.auto-collapsible.collapsed .frame pre {
	max-height: var(--code-collapse-preview-height);
	overflow: hidden;
}

.expressive-code.auto-collapsible.collapsed .frame pre::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 5.5rem;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		color-mix(in srgb, var(--codeblock-bg) 35%, transparent) 35%,
		color-mix(in srgb, var(--codeblock-bg) 85%, transparent) 75%,
		var(--codeblock-bg) 100%
	);
	pointer-events: none;
}

@media (width < 768px) {
	.expressive-code .frame {
		--code-action-top: var(--m3e-space-2);
	}

	.expressive-code .frame.is-terminal,
	.expressive-code .frame.has-title {
		--code-action-top: calc(var(--button-spacing, 0px) + var(--m3e-space-1));
	}

	.expressive-code .copy-btn {
		right: var(--m3e-space-2);
	}

	.expressive-code.auto-collapsible .collapse-toggle-btn {
		right: calc(var(--m3e-space-8) + var(--m3e-space-4));
	}

	/* !important boundary: Expressive Code owns the generated language label; Shirone hides it in its narrow frame layout. */
	.expressive-code [data-language]::before {
		display: none !important;
	}
}