/**
 * Billanz API Docs — code panel (templates/code-panel.php).
 *
 * Declared only by the reference block, so it loads only where operations
 * render. The panel background is the public knob --bzdocs-code-bg
 * (settings.custom.apiDocs.codeBg); text and token colours are fixed and
 * tuned for a dark background (like the method badges, not themeable).
 */

.bzdocs-op__code {
	--bzdocs-code-text: #e6edf3;
	--bzdocs-code-muted: #a1a1aa;
	--bzdocs-code-line: rgb(255 255 255 / 0.1);

	position: relative; /* copy buttons sit in the top bar */
	box-sizing: border-box;
	min-width: 0;
	margin-top: 1.5rem;
	overflow: hidden;
	border-radius: 10px;
	color: var(--bzdocs-code-text);
	background: var(--bzdocs-code-bg);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* Theme rules (display: flex…) must never beat `hidden`. */
.bzdocs-op__code [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* Layout: prose | code when the CONTENT is wide enough, stacked below */
/* ------------------------------------------------------------------ */

/*
 * The page shell (viewport): reference pages get a wider docs layout from
 * 960px so the content can reach two columns on laptops. Guides keep their
 * prose width, so an embedded endpoint stays compact (stacked) there.
 *
 * The grid itself (container): two columns only when the entry's content
 * box is >= 54.5rem (872px) = 2 × ~420px columns + the 2rem gap. The
 * nearest `bzdocs-entry` container is the post content (docs.css), or the
 * content column when a template override drops core/post-content.
 * With the default sidebar (260px), gap (3rem) and padding (2rem) that is
 * a viewport of >= ~1244px: 1280 and up get two columns.
 */
@media (min-width: 960px) {
	.bzdocs-layout:has(.bzdocs-reference .bzdocs-op__code) {
		max-width: max(var(--wp--style--global--wide-size, 1280px), 1440px);
	}

	.bzdocs-content:has(.bzdocs-reference .bzdocs-op__code) {
		max-width: none;
	}
}

@container bzdocs-entry (min-width: 54.5rem) {
	.bzdocs-op:has(> .bzdocs-op__code) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 2rem;
	}

	.bzdocs-op__code {
		position: sticky;
		top: var(--bzdocs-sticky-top);
		align-self: start;
		max-height: calc(100vh - 2 * var(--bzdocs-sticky-top));
		margin-top: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.admin-bar .bzdocs-op__code {
		top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--bzdocs-sticky-top));
		max-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px) - 2 * var(--bzdocs-sticky-top));
	}
}

/* ------------------------------------------------------------------ */
/* Bars, tabs, server switch                                           */
/* ------------------------------------------------------------------ */

.bzdocs-code__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--bzdocs-code-line);
}

.bzdocs-op__code.is-enhanced > .bzdocs-code__bar {
	min-height: 2.75rem;
	padding-right: 5rem; /* room for the active snippet's copy button */
}

.bzdocs-op__code:not(.is-enhanced) > .bzdocs-code__bar:not(:has(.bzdocs-server)) {
	display: none; /* nothing to show without JS */
}

.bzdocs-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.bzdocs-tab {
	margin: 0;
	padding: 0.3rem 0.65rem;
	border: 0;
	border-radius: 6px;
	color: var(--bzdocs-code-muted);
	background: transparent;
	font: inherit;
	font-family: var(--bzdocs-font);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

.bzdocs-tab:hover {
	color: var(--bzdocs-code-text);
}

.bzdocs-tab[aria-selected="true"] {
	color: #fff;
	background: rgb(255 255 255 / 0.12);
}

.bzdocs-server select {
	max-width: 12rem;
	padding: 0.25rem 0.5rem;
	border: 1px solid rgb(255 255 255 / 0.2);
	border-radius: 6px;
	color: var(--bzdocs-code-text);
	background: transparent;
	font: inherit;
	font-family: var(--bzdocs-font);
	font-size: 0.75rem;
}

.bzdocs-server option {
	color: #18181b;
	background: #fff;
}

/* ------------------------------------------------------------------ */
/* Snippets and examples                                               */
/* ------------------------------------------------------------------ */

.bzdocs-snippet + .bzdocs-snippet {
	border-top: 1px solid var(--bzdocs-code-line);
}

.bzdocs-snippet__label,
.bzdocs-examples__title {
	margin: 0;
	padding: 0.75rem 1rem 0;
	color: var(--bzdocs-code-muted);
	font-family: var(--bzdocs-font);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bzdocs-examples__title {
	padding: 0.3rem 0.25rem;
}

.bzdocs-op__code .bzdocs-status {
	padding: 0.1em 0.4em;
	border-radius: 4px;
	color: #86efac;
	background: rgb(34 197 94 / 0.14);
	font-family: var(--bzdocs-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0;
}

.bzdocs-snippet__note {
	margin: 0;
	padding: 0.75rem 1rem 0;
	color: var(--bzdocs-code-muted);
	font-family: var(--bzdocs-font);
	font-size: 0.75rem;
}

.bzdocs-snippet__note code {
	padding: 0.1em 0.35em;
	border-radius: 4px;
	color: var(--bzdocs-code-text);
	background: rgb(255 255 255 / 0.08);
	font-family: var(--bzdocs-font-mono);
	font-size: 1em;
	overflow-wrap: anywhere;
}

.bzdocs-snippet__body {
	position: static;
}

/* Beat theme `pre` / `code` styles: the panel owns its code blocks. */
.bzdocs-op__code pre.bzdocs-code {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	padding: 1rem;
	overflow-x: auto;
	border: 0;
	border-radius: 0;
	color: inherit;
	background: transparent;
	font-family: var(--bzdocs-font-mono);
	font-size: 0.8125rem;
	line-height: 1.6;
	white-space: pre;
	tab-size: 2;
	/* Programming fonts (JetBrains Mono…) turn -> and => into arrows: show what to type. */
	font-variant-ligatures: none;
	font-feature-settings: "liga" 0, "calt" 0;
	word-wrap: normal;
	overflow-wrap: normal;
}

.bzdocs-op__code pre.bzdocs-code > code {
	display: block;
	padding: 0;
	border: 0;
	color: inherit;
	background: none;
	font: inherit;
}

.bzdocs-op__code pre.bzdocs-code:focus-visible,
.bzdocs-tab:focus-visible,
.bzdocs-server select:focus-visible,
.bzdocs-op__code a:focus-visible {
	outline: 2px solid #93c5fd;
	outline-offset: -2px;
}

.bzdocs-copy--code {
	position: absolute;
	top: 0.6rem;
	right: 0.75rem;
	border-color: rgb(255 255 255 / 0.2);
	color: var(--bzdocs-code-muted);
	background: var(--bzdocs-code-bg);
	font-family: var(--bzdocs-font);
}

.bzdocs-copy--code:hover,
.bzdocs-copy--code.is-copied {
	border-color: rgb(255 255 255 / 0.5);
	color: #fff;
}

.bzdocs-copy--code:focus-visible {
	outline-color: #93c5fd;
}

.bzdocs-examples {
	border-top: 1px solid var(--bzdocs-code-line);
}

.bzdocs-examples__errors {
	margin: 0;
	padding: 0.75rem 1rem 1rem;
	border-top: 1px solid var(--bzdocs-code-line);
	color: var(--bzdocs-code-muted);
	font-family: var(--bzdocs-font);
	font-size: 0.8125rem;
}

.bzdocs-examples > .bzdocs-examples__errors:first-child {
	border-top: 0;
}

.bzdocs-examples__errors a {
	color: var(--bzdocs-code-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* {placeholder}: visible with or without highlighting. */
.bzdocs-ph {
	padding: 0 0.1em;
	border-radius: 3px;
	color: #fde68a !important;
	background: rgb(250 204 21 / 0.16);
	box-shadow: inset 0 -1px 0 rgb(250 204 21 / 0.6);
}

/* ------------------------------------------------------------------ */
/* highlight.js tokens (dark, fixed)                                   */
/* ------------------------------------------------------------------ */

.bzdocs-op__code .hljs-comment,
.bzdocs-op__code .hljs-quote,
.bzdocs-op__code .hljs-meta {
	color: #8b949e;
	font-style: italic;
}

.bzdocs-op__code .hljs-keyword,
.bzdocs-op__code .hljs-selector-tag,
.bzdocs-op__code .hljs-type {
	color: #ff7b72;
}

.bzdocs-op__code .hljs-string,
.bzdocs-op__code .hljs-regexp {
	color: #a5d6ff;
}

.bzdocs-op__code .hljs-number,
.bzdocs-op__code .hljs-literal,
.bzdocs-op__code .hljs-attr,
.bzdocs-op__code .hljs-property {
	color: #79c0ff;
}

.bzdocs-op__code .hljs-title,
.bzdocs-op__code .hljs-title.function_,
.bzdocs-op__code .hljs-section {
	color: #d2a8ff;
}

.bzdocs-op__code .hljs-variable,
.bzdocs-op__code .hljs-template-variable,
.bzdocs-op__code .hljs-built_in,
.bzdocs-op__code .hljs-params {
	color: #ffa657;
}

.bzdocs-op__code .hljs-subst,
.bzdocs-op__code .hljs-punctuation,
.bzdocs-op__code .hljs-operator {
	color: var(--bzdocs-code-text);
}