/* ------------------------------------------------------------------ *
 * Boinx Callouts — Note (boinx/highlight) and Important (boinx/exclamation)
 *
 * The callout inherits the surrounding article's text color and font, and
 * paints only translucent brand tints over whatever background the page
 * has. That is what lets one stylesheet serve both the white user manual
 * and the near-black blog without knowing which one it is on; the accents
 * alone are re-tuned for dark pages via the body.single-post override at
 * the bottom.
 *
 * The "Note" / "Important" label and its icon live entirely in CSS
 * (::before content + background-image) so the DOM carries only the
 * author's words — the Manual AI Surfaces markdown converter and
 * copy-paste both stay clean.
 * ------------------------------------------------------------------ */

.bx-callout {
	box-sizing: border-box;
	margin: 1.7em 0;
	padding: 15px 20px 16px 18px;
	border: 1px solid var(--bxc-line);
	border-left: 3px solid var(--bxc-accent);
	border-radius: 12px;
	background: var(--bxc-tint);
	color: inherit;
}

.bx-callout::before {
	content: var(--bxc-label);
	display: block;
	margin: 0 0 7px;
	padding: 1px 0 1px 24px;
	background-image: var(--bxc-icon);
	background-repeat: no-repeat;
	background-position: 0 50%;
	background-size: 17px 17px;
	color: var(--bxc-accent);
	font-size: 13px;
	font-weight: 650;
	letter-spacing: 0.01em;
	line-height: 1.35;
}

/* aside+p in the selectors outgun the manual's
   `body.single-user-manual .user-manual-content p` margin rule (0,2,1)
   without resorting to !important. */
aside.bx-callout p.bx-callout__headline {
	margin: 0 0 0.25em;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.45;
	color: inherit;
}

aside.bx-callout p.bx-callout__text {
	margin: 0;
	font-size: 1em;
	line-height: 1.55;
	color: inherit;
	opacity: 0.92;
}

/* ---------- variant accents (light contexts: manual, editor) ---------- */

.bx-callout--note {
	--bxc-accent: #0e9e58;
	--bxc-line: rgba(22, 182, 102, 0.3);
	--bxc-tint: rgba(22, 182, 102, 0.08);
	--bxc-label: "Note";
	--bxc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9E58' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

.bx-callout--important {
	--bxc-accent: #ce2438;
	--bxc-line: rgba(253, 56, 78, 0.32);
	--bxc-tint: rgba(253, 56, 78, 0.07);
	--bxc-label: "Important";
	--bxc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CE2438' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* ---------- dark article context: the blog's single-post template ---------- */

body.single-post .bx-callout--note {
	--bxc-accent: #26e485;
	--bxc-line: rgba(38, 228, 133, 0.32);
	--bxc-tint: rgba(38, 228, 133, 0.07);
	--bxc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326E485' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

body.single-post .bx-callout--important {
	--bxc-accent: #fd384e;
	--bxc-line: rgba(253, 56, 78, 0.35);
	--bxc-tint: rgba(253, 56, 78, 0.09);
	--bxc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FD384E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}