/* Pulse-specific overrides on top of Scalar's built-in "default" theme.

   The only custom styling left is the logo block we inject into the top
   of Scalar's sidebar via the inline script in index.html, plus the
   light/dark logo swap. Everything else (typography, accent color,
   surfaces, code blocks) is Scalar's default. */

.pulse-docs-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 16px 12px;
	border-bottom: 1px solid var(--scalar-sidebar-border-color);
}

.pulse-docs-brand img {
	height: 24px;
	width: auto;
	display: block;
}

.pulse-docs-brand .pulse-docs-section {
	padding-left: 14px;
	border-left: 1px solid var(--scalar-sidebar-border-color);
	font-family: var(--scalar-font);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--scalar-sidebar-color-2, var(--scalar-color-2));
	line-height: 1;
}

/* Fallback: if the JS could not find Scalar's sidebar to anchor to,
   render the brand as a fixed top-left overlay so the logo is at
   least visible while we debug the selector. */
.pulse-docs-brand--fallback {
	position: fixed;
	top: 8px;
	left: 12px;
	z-index: 1000;
	background: var(--scalar-background-1);
	border: 1px solid var(--scalar-border-color);
	border-radius: var(--scalar-radius);
	padding: 6px 12px;
	box-shadow: 0 2px 8px hsl(0 0% 0% / 0.08);
}

/* Logo: swap the blue logo for the white one when dark mode is active.
   `content: url(...)` overrides the rendered image of an <img> element
   in modern browsers (Chrome/Firefox/Safari). */
.dark-mode img[src$="pulse-logo-blue.svg"],
.dark img[src$="pulse-logo-blue.svg"] {
	content: url("./pulse-logo-white.svg");
}

/* Permission / Role badge styling for the rendered Markdown badge that
   lib/generate-docs.ts appends to operation descriptions. Scalar renders
   the bold text inline; we promote it to a visually distinct pill so it
   reads as metadata, not body copy. */
.scalar-app strong:has(+ code) {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--scalar-color-2);
	background: var(--scalar-background-3);
	border-radius: var(--scalar-radius);
	padding: 2px 8px;
	margin-right: 6px;
}