/* Self-hosted Poppins (SIL Open Font License) - see resources/assets/fonts/. */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( "../fonts/poppins-400.woff2" ) format( "woff2" );
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url( "../fonts/poppins-600.woff2" ) format( "woff2" );
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url( "../fonts/poppins-700.woff2" ) format( "woff2" );
}

:root {
	--bxdocs-gradient-start: #00FF78;
	--bxdocs-gradient-end: #00DBFF;
	--bxdocs-accent: #FFF500;
	--bxdocs-bg: #fff;
	--bxdocs-text: #212529;
	--bxdocs-muted: #6c757d;
	--bxdocs-sidebar-bg: #fff;
	--bxdocs-sidebar-text: #04121a;
	--bxdocs-border: rgba( 0, 0, 0, 0.1 );
	--bxdocs-link: #0d7a8f;
	--bxdocs-link-hover: #00a3bf;
	--bxdocs-code-bg: #f6f8fa;
	/* Every header control (search box, version/language switchers, theme
	   toggle, repo link) shares this one height so the toolbar reads as a
	   single aligned row instead of a mix of Bootstrap's own form-control/
	   form-select-sm defaults and this theme's own button padding. */
	--bxdocs-toolbar-h: 2.375rem;
	--bxdocs-step-marker-bg: var( --bxdocs-accent );
	--bxdocs-step-marker-text: #04121a;
	--bxdocs-step-line: rgba( 0, 0, 0, 0.12 );
	/* `::: step color="..."` (module spec's directive blocks) - a fixed
	   bg/text contrast pair each, so they read the same regardless of
	   light/dark mode (no [data-theme="dark"] override needed, unlike the
	   theme-brand-driven marker/line tokens above). */
	--bxdocs-step-success-bg: #16a34a;
	--bxdocs-step-success-text: #ffffff;
	--bxdocs-step-warning-bg: #f59e0b;
	--bxdocs-step-warning-text: #1a1300;
	--bxdocs-step-danger-bg: #dc2626;
	--bxdocs-step-danger-text: #ffffff;
}

/* Near-black surface with a mint/teal accent, rather than the blue-gray
   "just inverted" dark mode this used to be - see docs/guides/theming.md. */
[data-theme="dark"] {
	--bxdocs-bg: #0a0d0f;
	--bxdocs-text: #e7ecee;
	--bxdocs-muted: #8b979c;
	--bxdocs-sidebar-bg: #12171a;
	--bxdocs-sidebar-text: #cfd8da;
	--bxdocs-border: rgba( 255, 255, 255, 0.09 );
	--bxdocs-link: #34d399;
	--bxdocs-link-hover: #6ee7b7;
	--bxdocs-code-bg: #0f1417;
	--bxdocs-step-line: rgba( 255, 255, 255, 0.15 );
}

[x-cloak] {
	display: none !important;
}

body {
	font-family: "Poppins", sans-serif;
	background: var( --bxdocs-bg );
	color: var( --bxdocs-text );
}

.theme-toggle,
.repo-link {
	background: transparent;
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	border-radius: 10px;
	font-size: 1.1rem;
	line-height: 1;
	height: var( --bxdocs-toolbar-h );
	width: var( --bxdocs-toolbar-h );
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	color: #04121a;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.theme-toggle:hover,
.repo-link:hover {
	background: rgba( 0, 0, 0, 0.08 );
	color: #04121a;
}

[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .repo-link {
	border-color: var( --bxdocs-border );
	color: var( --bxdocs-text );
}

[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .repo-link:hover {
	background: rgba( 255, 255, 255, 0.08 );
	color: var( --bxdocs-text );
}

.bxdocs-search .form-control {
	height: var( --bxdocs-toolbar-h );
	box-sizing: border-box;
	padding-right: 2.75rem;
}

.bxdocs-search-kbd {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY( -50% );
	pointer-events: none;
	font-family: inherit;
	font-size: 0.7rem;
	line-height: 1.4;
	padding: 0.05rem 0.35rem;
	border-radius: 0.25rem;
	border: 1px solid var( --bxdocs-border );
	background: var( --bxdocs-code-bg );
	color: var( --bxdocs-muted );
}

.version-switcher {
	flex-shrink: 0;
	width: auto;
	max-width: 6.5rem;
	height: var( --bxdocs-toolbar-h );
	box-sizing: border-box;
}

.locale-dropdown {
	position: relative;
	flex-shrink: 0;
}

.locale-dropdown__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	height: var( --bxdocs-toolbar-h );
	padding: 0 0.55rem;
	box-sizing: border-box;
	background: transparent;
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	border-radius: 6px;
	cursor: pointer;
	color: #04121a;
}

.locale-dropdown__trigger:hover {
	background: rgba( 0, 0, 0, 0.08 );
}

.locale-dropdown__flag {
	font-size: 1.15rem;
	line-height: 1;
}

.locale-dropdown__caret {
	font-size: 0.7rem;
	opacity: 0.7;
}

.locale-dropdown__menu {
	position: absolute;
	top: calc( 100% + 0.35rem );
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	min-width: 11rem;
	background: var( --bxdocs-bg );
	color: var( --bxdocs-text );
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.15 );
}

.locale-dropdown__item {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
	color: var( --bxdocs-text );
	text-decoration: none;
	white-space: nowrap;
}

.locale-dropdown__item:hover {
	background: rgba( 0, 219, 255, 0.15 );
}

.locale-dropdown__item--active {
	font-weight: 600;
	background: rgba( 0, 219, 255, 0.1 );
}

.locale-dropdown__item .locale-dropdown__flag {
	font-size: 1.05rem;
}

.breadcrumb-nav .breadcrumb {
	margin-bottom: 0;
	font-size: 0.875rem;
}

.brand-navbar {
	background: linear-gradient( 90deg, var( --bxdocs-gradient-start ), var( --bxdocs-gradient-end ) );
}

.brand-mark {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #04121a;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.brand-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.navbar-row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.75rem;
}

.navbar-controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-inline-start: auto;
	min-width: 0;
}

.locale-switcher {
	flex-shrink: 0;
	width: auto;
	max-width: 6.5rem;
}

.fallback-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0.6rem 1rem;
	border: 1px solid rgba( 255, 145, 0, 0.35 );
	border-radius: 10px;
	background: rgba( 255, 145, 0, 0.08 );
	font-size: 0.9rem;
}

.fallback-notice svg {
	flex: 0 0 auto;
	color: #ff9100;
}

.sidebar {
	padding-top: 1.5rem;
	background: var( --bxdocs-sidebar-bg );
}

.sidebar .nav-link {
	color: var( --bxdocs-sidebar-text );
}

.sidebar .nav-link.disabled {
	color: var( --bxdocs-muted );
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.8rem;
}

.nav--nested {
	padding-inline-start: 1rem;
	font-size: 0.9rem;
}

.sidebar .nav-link.active {
	color: var( --bxdocs-link );
	font-weight: 600;
}

.nav-group-header {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.nav-group-header .nav-link,
.nav-group-header .nav-link.disabled {
	flex: 1 1 auto;
	min-width: 0;
}

.nav-toggle {
	flex: 0 0 auto;
	background: transparent;
	border: 0;
	padding: 0.25rem 0.5rem;
	color: var( --bxdocs-sidebar-text );
	cursor: pointer;
	line-height: 1;
}

.nav-toggle__icon {
	display: inline-block;
	transition: transform 0.15s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
	transform: rotate( -180deg );
}

/* nav-toggle.js measures each list's own real height and transitions
   max-height between 0 and that value (then "none" once open, so it's never
   clipped by a stale measurement) - this is what actually makes it slide. */
.nav-toggle-body {
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.brand-logo {
	height: 28px;
	width: 28px;
	display: block;
	object-fit: contain;
	padding: 3px;
	border-radius: 50%;
	background: rgba( 4, 18, 26, 0.4 );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.25 );
	flex-shrink: 0;
}

.content {
	padding: 2rem;
}

a {
	color: var( --bxdocs-link );
}

a:hover {
	color: var( --bxdocs-link-hover );
}

.page-title {
	border-bottom: 3px solid var( --bxdocs-accent );
	padding-bottom: 0.5rem;
	margin-bottom: 1.5rem;
	position: relative;
}

/* Every h1/h2/h3 in the article gets a hover-reveal "#" permalink, for deep
   links straight to a section - the h1's own `.anchor` is hand-rendered in
   page.bxm (it's not part of the converted markdown body); h2/h3 get theirs
   for free from bx-markdown's own `anchorLinks` setting (on by default),
   which already emits an empty `<a class="anchor" id="...">` right before
   each heading's text - this only adds the missing "#" glyph + hover. */
.page-content h1,
.page-content h2,
.page-content h3 {
	position: relative;
}

/* Bootstrap's own reboot zeroes every heading's top margin and leaves only
   `.5rem` below (`h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}`) -
   fine for UI chrome, far too tight for long-form article content where a
   heading needs real separation from the prose above it. Only h2+ - the
   page's own h1 is `.page-title`, styled (and spaced) separately above, and
   always the article's own first child (breadcrumbs/summary/tags are all
   optional, `.page-title` never is), so there's no "first heading in the
   article" case to zero back out here. */
.page-content h2 {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.page-content h3 {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.page-content h4,
.page-content h5,
.page-content h6 {
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.page-content .anchor {
	position: absolute;
	left: -1.2em;
	display: inline-flex;
	align-items: center;
	height: 1em;
	color: var( --bxdocs-muted );
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.page-content .anchor::before {
	content: "#";
}

.page-content h1:hover .anchor,
.page-content h2:hover .anchor,
.page-content h3:hover .anchor,
.page-content .anchor:focus {
	opacity: 1;
}

.bxdocs-search {
	flex: 1 1 120px;
	min-width: 70px;
	max-width: 260px;
}

.bxdocs-search-algolia,
.bxdocs-search-pagefind {
	display: flex;
	align-items: center;
}

.bxdocs-search-results {
	display: none;
	position: absolute;
	z-index: 20;
	background: var( --bxdocs-bg );
	border: 1px solid var( --bxdocs-border );
	border-radius: 10px;
	margin-top: 0.25rem;
	max-height: 320px;
	overflow-y: auto;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.15 );
	min-width: 260px;
	padding: 0;
}

.bxdocs-search-results.bxdocs-search-open {
	display: block;
}

.bxdocs-search-results a,
.bxdocs-search-results .bxdocs-search-empty {
	display: block;
	padding: 0.5rem 0.75rem;
	color: var( --bxdocs-text );
	text-decoration: none;
}

.bxdocs-search-results a:hover {
	background: rgba( 0, 219, 255, 0.15 );
}

.adm-hidden {
	display: none;
}

.adm-block {
	margin: 1.5rem 0;
	border: 1px solid rgba( 68, 138, 255, 0.25 );
	border-left: 4px solid #448aff;
	border-radius: 10px;
	background: rgba( 68, 138, 255, 0.06 );
	overflow: hidden;
}

.adm-heading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.6rem 1rem;
	font-weight: 700;
	background: rgba( 68, 138, 255, 0.1 );
}

.adm-icon {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	fill: #448aff;
}

.adm-body {
	padding: 0.75rem 1rem;
}

.adm-body > :last-child {
	margin-bottom: 0;
}

.adm-block.adm-collapsed .adm-body {
	display: none;
}

.adm-block.adm-collapsed .adm-heading,
.adm-block.adm-open .adm-heading {
	cursor: pointer;
	user-select: none;
}

.adm-block.adm-collapsed .adm-heading::after,
.adm-block.adm-open .adm-heading::after {
	content: "";
	margin-left: auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( -45deg );
	transition: transform 0.15s ease;
}

.adm-block.adm-collapsed .adm-heading::after {
	transform: rotate( 45deg );
}

.adm-block.adm-abstract { border-left-color: #00b0ff; background: rgba( 0, 176, 255, 0.06 ); }
.adm-block.adm-abstract .adm-heading { background: rgba( 0, 176, 255, 0.1 ); }
.adm-block.adm-abstract .adm-icon { fill: #00b0ff; }

.adm-block.adm-info { border-left-color: #00b8d4; background: rgba( 0, 184, 212, 0.06 ); }
.adm-block.adm-info .adm-heading { background: rgba( 0, 184, 212, 0.1 ); }
.adm-block.adm-info .adm-icon { fill: #00b8d4; }

.adm-block.adm-tip { border-left-color: #00bfa5; background: rgba( 0, 191, 165, 0.06 ); }
.adm-block.adm-tip .adm-heading { background: rgba( 0, 191, 165, 0.1 ); }
.adm-block.adm-tip .adm-icon { fill: #00bfa5; }

.adm-block.adm-success { border-left-color: #00c853; background: rgba( 0, 200, 83, 0.06 ); }
.adm-block.adm-success .adm-heading { background: rgba( 0, 200, 83, 0.1 ); }
.adm-block.adm-success .adm-icon { fill: #00c853; }

.adm-block.adm-faq { border-left-color: #64dd17; background: rgba( 100, 221, 23, 0.06 ); }
.adm-block.adm-faq .adm-heading { background: rgba( 100, 221, 23, 0.1 ); }
.adm-block.adm-faq .adm-icon { fill: #64dd17; }

.adm-block.adm-warning { border-left-color: #ff9100; background: rgba( 255, 145, 0, 0.06 ); }
.adm-block.adm-warning .adm-heading { background: rgba( 255, 145, 0, 0.1 ); }
.adm-block.adm-warning .adm-icon { fill: #ff9100; }

.adm-block.adm-fail { border-left-color: #ff5252; background: rgba( 255, 82, 82, 0.06 ); }
.adm-block.adm-fail .adm-heading { background: rgba( 255, 82, 82, 0.1 ); }
.adm-block.adm-fail .adm-icon { fill: #ff5252; }

.adm-block.adm-danger { border-left-color: #ff1744; background: rgba( 255, 23, 68, 0.06 ); }
.adm-block.adm-danger .adm-heading { background: rgba( 255, 23, 68, 0.1 ); }
.adm-block.adm-danger .adm-icon { fill: #ff1744; }

.adm-block.adm-bug { border-left-color: #f50057; background: rgba( 245, 0, 87, 0.06 ); }
.adm-block.adm-bug .adm-heading { background: rgba( 245, 0, 87, 0.1 ); }
.adm-block.adm-bug .adm-icon { fill: #f50057; }

.adm-block.adm-example { border-left-color: #7c4dff; background: rgba( 124, 77, 255, 0.06 ); }
.adm-block.adm-example .adm-heading { background: rgba( 124, 77, 255, 0.1 ); }
.adm-block.adm-example .adm-icon { fill: #7c4dff; }

.adm-block.adm-quote { border-left-color: #9e9e9e; background: rgba( 158, 158, 158, 0.06 ); }
.adm-block.adm-quote .adm-heading { background: rgba( 158, 158, 158, 0.1 ); }
.adm-block.adm-quote .adm-icon { fill: #9e9e9e; }

.footnotes {
	margin-top: 3rem;
	padding-top: 1rem;
	border-top: 1px solid var( --bxdocs-border );
	font-size: 0.9rem;
	color: var( --bxdocs-muted );
}

.footnotes hr {
	display: none;
}

.footnotes ol {
	padding-left: 1.25rem;
}

.footnotes li {
	margin-bottom: 0.5rem;
}

.footnotes li p {
	display: inline;
}

.footnote-ref {
	font-weight: 600;
	text-decoration: none;
	padding: 0 0.15rem;
}

.footnote-backref {
	margin-left: 0.35rem;
	text-decoration: none;
}

dl {
	margin: 1rem 0;
}

dt {
	font-weight: 700;
	margin-top: 0.75rem;
}

dt:first-child {
	margin-top: 0;
}

dd {
	margin: 0.25rem 0 0.25rem 1.5rem;
}
.mermaid {
	margin: 1.5rem 0;
	text-align: center;
}

.toc {
	border: 1px solid var( --bxdocs-border );
	border-radius: 12px;
	padding: 0.75rem 1rem;
	background: rgba( 0, 219, 255, 0.05 );
}

[data-theme="dark"] .toc {
	background: rgba( 52, 211, 153, 0.05 );
}

.toc-title {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.75rem;
	color: var( --bxdocs-muted );
	margin-bottom: 0.25rem;
}

.toc .toc-level-3,
.toc-mobile .toc-level-3 {
	padding-left: 1rem;
	font-size: 0.9em;
}

/* `theme.options.tocPosition: "sticky"` renders the same TOC list in its
   own right-hand column at xl+ instead of inline atop the article, stays
   in view while the article scrolls underneath it, the same way GitBook
   keeps its own "On this page" list pinned on long pages. .brand-navbar
   isn't itself sticky, so `top` only needs to clear the sidebar's own top
   padding, not a fixed header. */
.toc-sidebar {
	padding-top: 1.5rem;
}

.toc-sidebar .toc {
	position: sticky;
	top: 1.5rem;
	max-height: calc( 100vh - 3rem );
	overflow-y: auto;
}

/* Below xl, the right-hand column above has no room, so this renders
   instead - a collapsible bar pinned to the top of the viewport while
   scrolling (VitePress/GitBook's own mobile "On this page" treatment),
   rather than a static box that just scrolls away with the article. */
.toc-mobile {
	position: sticky;
	top: 0;
	z-index: 15;
	margin: 0 0 1.5rem;
	border: 1px solid var( --bxdocs-border );
	border-radius: 12px;
	background: var( --bxdocs-bg );
}

.toc-mobile[open] {
	max-height: calc( 100vh - 2rem );
	overflow-y: auto;
}

.toc-mobile__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --bxdocs-muted );
	list-style: none;
}

.toc-mobile__summary::-webkit-details-marker {
	display: none;
}

.toc-mobile__summary::after {
	content: "";
	flex-shrink: 0;
	width: 0.4em;
	height: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.2s ease;
}

.toc-mobile[open] .toc-mobile__summary::after {
	transform: rotate( -135deg );
}

.toc-mobile ul {
	margin: 0;
	padding: 0 1rem 0.75rem;
}

.page-nav {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var( --bxdocs-border );
}

.page-nav a {
	font-weight: 600;
}

.bxdocs-pre {
	position: relative;
	margin: 2rem 0;
}

.bxdocs-copy-btn {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	font-size: 0.75rem;
	padding: 0.2rem 0.5rem;
	border-radius: 8px;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	background: rgba( 255, 255, 255, 0.1 );
	color: inherit;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
}

.bxdocs-pre:hover .bxdocs-copy-btn,
.bxdocs-copy-btn:focus {
	opacity: 1;
}

/* Touch devices have no hover state to reveal the button on, so it needs to
   just be visible outright there - opacity would otherwise make it
   permanently unreachable on mobile. */
@media ( hover: none ) {
	.bxdocs-copy-btn {
		opacity: 1;
	}
}

.repo-link svg,
.social-link svg {
	display: block;
}

.theme-toggle span {
	display: inline-flex;
}

.bxdocs-footer {
	margin-top: 3rem;
	border-top: 1px solid var( --bxdocs-border );
	padding: 1.5rem 0;
	font-size: 0.875rem;
	color: var( --bxdocs-sidebar-text );
}

.bxdocs-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.bxdocs-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.social-link {
	color: inherit;
	display: inline-flex;
}

.social-link:hover {
	color: var( --bxdocs-link-hover );
}

.bxdocs-footer__credit a {
	font-weight: 600;
}

.page-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	font-size: 0.8rem;
	color: var( --bxdocs-muted );
	margin-bottom: 1.5rem;
}

/* `theme.options.pageMetaPosition: "bottom"` (the default) places this same
   .page-meta block right before </article> instead - give it a top border +
   spacing there instead of the bottom-margin it uses sitting up near the
   title, so it reads as a footer note rather than crowding the content
   above it. */
.page-content > .page-meta:last-child {
	margin-top: 2rem;
	margin-bottom: 0;
	padding-top: 1rem;
	border-top: 1px solid var( --bxdocs-border );
}

.page-meta a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: inherit;
}

.page-meta a:hover {
	color: var( --bxdocs-link-hover );
}

.page-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.page-icon {
	display: inline-block;
}

/* A named icon (icon: rocket / lucide:rocket / tabler:rocket / custom:name)
   resolves to an inline SVG using currentColor fill/stroke, so it already
   tracks the surrounding text color in both themes/light-dark modes with
   no extra rule needed - this only handles sizing/alignment. */
.bxdocs-icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	flex-shrink: 0;
}

.page-icon .bxdocs-icon {
	width: 1.1em;
	height: 1.1em;
}

.page-summary {
	font-size: 1.15rem;
	color: var( --bxdocs-muted );
	margin-top: -0.5rem;
	margin-bottom: 1.5rem;
}

.page-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.page-tag {
	display: inline-block;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: rgba( 0, 219, 255, 0.12 );
	color: var( --bxdocs-link );
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}

.page-tag:hover {
	background: rgba( 0, 219, 255, 0.22 );
	color: var( --bxdocs-link-hover );
}

[data-theme="dark"] .page-tag {
	background: rgba( 52, 211, 153, 0.14 );
}

[data-theme="dark"] .page-tag:hover {
	background: rgba( 52, 211, 153, 0.24 );
}

/* Inline `code` (as opposed to fenced ```code blocks```, handled by
   .bxdocs-code above) renders as a small monospace label chip. */
code:not( pre code ) {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	padding: 0.15em 0.45em;
	border-radius: 6px;
	background: var( --bxdocs-code-bg );
	border: 1px solid var( --bxdocs-border );
}

@media ( max-width: 991.98px ) {
	.sidebar {
		box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.15 );
		padding: 1rem;
	}
}

/* Content tabs (=== "Title" markdown syntax - see docs/guides/markdown.md) */
.bxdocs-tabs {
	margin: 1.5rem 0;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 12px;
	overflow: hidden;
}

.bxdocs-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.12 );
	background: rgba( 0, 0, 0, 0.03 );
}

.bxdocs-tab-btn {
	appearance: none;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0.6rem 1rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	color: inherit;
	opacity: 0.7;
}

.bxdocs-tab-btn:hover {
	opacity: 1;
}

.bxdocs-tab-btn--active {
	opacity: 1;
	border-bottom-color: currentColor;
}

.bxdocs-tabs__panels {
	padding: 1rem;
}

.bxdocs-tab-panel {
	display: none;
}

.bxdocs-tab-panel--active {
	display: block;
}

.bxdocs-tab-panel > :last-child {
	margin-bottom: 0;
}

[data-theme="dark"] .bxdocs-tabs {
	border-color: rgba( 255, 255, 255, 0.15 );
}

[data-theme="dark"] .bxdocs-tabs__nav {
	border-bottom-color: rgba( 255, 255, 255, 0.15 );
	background: rgba( 255, 255, 255, 0.04 );
}

/* Code fence annotations: hl_lines / linenums / title / frame / insert / delete (see CodeAnnotationProcessor.bx) */
.bxdocs-code-title {
	background: rgba( 0, 0, 0, 0.06 );
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-bottom: none;
	border-radius: 0.75rem 0.75rem 0 0;
	padding: 0.4rem 0.9rem;
	font-size: 0.8rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 600;
	margin-top: 2rem;
}

/* frame="terminal" - macOS-style traffic-light chrome, title centered
   instead of the plain bar's left-aligned text. */
.bxdocs-code-title.bxdocs-frame-terminal {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.bxdocs-frame-dots {
	position: absolute;
	left: 0.9rem;
	top: 50%;
	transform: translateY( -50% );
	display: flex;
	gap: 0.4rem;
}

.bxdocs-frame-dots span {
	display: block;
	width: 0.62rem;
	height: 0.62rem;
	border-radius: 50%;
}

.bxdocs-frame-dots span:nth-child( 1 ) { background: #ff5f56; }
.bxdocs-frame-dots span:nth-child( 2 ) { background: #ffbd2e; }
.bxdocs-frame-dots span:nth-child( 3 ) { background: #27c93f; }

.bxdocs-code-title + pre {
	border-radius: 0 0 0.75rem 0.75rem;
	margin-top: 0;
}

.bxdocs-code {
	display: block;
}

.bxdocs-code-line {
	display: block;
}

.bxdocs-code--numbered .bxdocs-code-line::before {
	content: attr( data-line );
	display: inline-block;
	width: 2.25em;
	margin-right: 1em;
	padding-right: 0.5em;
	text-align: right;
	color: rgba( 127, 127, 127, 0.75 );
	user-select: none;
	border-right: 1px solid rgba( 127, 127, 127, 0.25 );
}

.bxdocs-hl-line {
	display: block;
	background: rgba( 255, 213, 0, 0.18 );
}

/* insert="…" / delete="…" - a tinted row plus a gutter marker, independent
   of the line-number gutter (data-line::before above) so both can be on at
   once; the marker shifts right to clear the number column when they are. */
.bxdocs-insert-line,
.bxdocs-delete-line {
	display: block;
	position: relative;
	padding-left: 1.6rem;
}

.bxdocs-code--numbered .bxdocs-insert-line,
.bxdocs-code--numbered .bxdocs-delete-line {
	padding-left: 0;
}

.bxdocs-insert-line {
	background: rgba( 22, 163, 74, 0.16 );
}

.bxdocs-delete-line {
	background: rgba( 220, 38, 38, 0.12 );
}

.bxdocs-insert-line::after,
.bxdocs-delete-line::after {
	position: absolute;
	left: 0.35rem;
	font-weight: 700;
	user-select: none;
}

.bxdocs-code--numbered .bxdocs-insert-line::after,
.bxdocs-code--numbered .bxdocs-delete-line::after {
	left: 1.7rem;
}

.bxdocs-insert-line::after {
	content: "+";
	color: #16a34a;
}

.bxdocs-delete-line::after {
	content: "\2013";
	color: #dc2626;
}

[data-theme="dark"] .bxdocs-code-title {
	background: rgba( 255, 255, 255, 0.06 );
	border-color: rgba( 255, 255, 255, 0.15 );
}

[data-theme="dark"] .bxdocs-hl-line {
	background: rgba( 255, 213, 0, 0.12 );
}

[data-theme="dark"] .bxdocs-insert-line {
	background: rgba( 22, 163, 74, 0.22 );
}

[data-theme="dark"] .bxdocs-delete-line {
	background: rgba( 220, 38, 38, 0.18 );
}

/* A real ```diff fence isn't bx-docs' own markup - highlight.js's vendored
   `diff` grammar recognizes unified-diff syntax on its own and emits
   .hljs-addition/.hljs-deletion, styled by the vendored github.min.css
   (loaded before this stylesheet, so this wins). That stylesheet only ever
   defines GitHub's *light*-mode pastel pair for both classes, with no dark
   counterpart - reusing the exact insert/delete tokens above instead of a
   third, unrelated diff palette. */
[data-theme="dark"] .hljs-addition {
	background-color: rgba( 22, 163, 74, 0.22 );
	color: #4ade9c;
}

[data-theme="dark"] .hljs-deletion {
	background-color: rgba( 220, 38, 38, 0.18 );
	color: #f87171;
}

/* GitBook-style ::: directive blocks (see DirectiveBlockProcessor.bx) */
.bxdocs-expandable {
	margin: 1rem 0;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 12px;
	padding: 0.75rem 1rem;
}

.bxdocs-expandable > summary {
	cursor: pointer;
	font-weight: 600;
}

.bxdocs-expandable__body {
	margin-top: 0.75rem;
}

.bxdocs-expandable__body > :last-child {
	margin-bottom: 0;
}

.bxdocs-cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: 1rem;
	margin: 1.5rem 0;
}

.bxdocs-card {
	display: block;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 14px;
	padding: 1.25rem;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.bxdocs-card:hover {
	border-color: var( --bxdocs-link );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.08 );
}

.bxdocs-card__image {
	display: block;
	width: 100%;
	border-radius: 10px;
	margin-bottom: 0.75rem;
}

.bxdocs-card__icon {
	font-size: 1.75rem;
	margin-bottom: 0.5rem;
	color: var( --bxdocs-link );
}

.bxdocs-card__title {
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.bxdocs-card__body {
	font-size: 0.9rem;
	opacity: 0.85;
}

.bxdocs-card__body > :last-child {
	margin-bottom: 0;
}

/* The homepage's own hero banner (docs/index.md) - a full-width banner
   image with CTA buttons underneath. A generic component like
   `.bxdocs-cards`, not homepage-specific markup, so any page can use raw
   HTML like this for its own banner. */
.bxdocs-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	margin: 1.5rem 0 2.5rem;
	/* A flex item's default min-width is "auto", which for a replaced
	   element like <img> resolves to its own intrinsic width - overriding
	   `width: 100%` below and refusing to shrink past it. Without this,
	   Safari/iOS in particular renders the banner at its full 1800px
	   intrinsic width on narrow viewports, overflowing off-screen instead
	   of scaling down. */
	min-width: 0;
}

.bxdocs-hero__banner {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 10px 34px rgba( 0, 0, 0, 0.22 );
}

.bxdocs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.bxdocs-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.65rem 1.4rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bxdocs-hero__btn:hover {
	transform: translateY( -1px );
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.12 );
}

.bxdocs-hero__btn--primary {
	background: linear-gradient( 90deg, var( --bxdocs-gradient-start ), var( --bxdocs-gradient-end ) );
	color: #04121a;
}

.bxdocs-hero__btn--secondary {
	border: 1px solid var( --bxdocs-border );
	color: var( --bxdocs-text );
}

.bxdocs-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1.5rem 0;
}

.bxdocs-column {
	flex: 1 1 0;
	min-width: 200px;
	width: var( --bxdocs-column-width, auto );
}

.bxdocs-column > :last-child {
	margin-bottom: 0;
}

.bxdocs-stepper {
	margin: 1.5rem 0;
}

.bxdocs-step {
	display: flex;
	gap: 1rem;
	padding-bottom: 1.5rem;
	position: relative;
}

.bxdocs-step:not( :last-child )::before {
	content: "";
	position: absolute;
	left: 0.9rem;
	top: 2rem;
	bottom: 0;
	width: 2px;
	background: var( --bxdocs-step-line );
}

.bxdocs-step__marker {
	flex-shrink: 0;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var( --bxdocs-step-marker-bg );
	color: var( --bxdocs-step-marker-text );
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.85rem;
	z-index: 1;
}

.bxdocs-step__marker--success {
	background: var( --bxdocs-step-success-bg );
	color: var( --bxdocs-step-success-text );
}

.bxdocs-step__marker--warning {
	background: var( --bxdocs-step-warning-bg );
	color: var( --bxdocs-step-warning-text );
}

.bxdocs-step__marker--danger {
	background: var( --bxdocs-step-danger-bg );
	color: var( --bxdocs-step-danger-text );
}

.bxdocs-step__content {
	padding-top: 0.15rem;
}

.bxdocs-step__title {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.bxdocs-step__content > :last-child {
	margin-bottom: 0;
}

.bxdocs-file {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 10px;
	padding: 0.5rem 0.9rem;
	margin: 0.5rem 0;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.bxdocs-file:hover {
	border-color: var( --bxdocs-link );
}

.bxdocs-embed {
	position: relative;
	margin: 1.5rem 0;
	padding-top: 56.25%;
	border-radius: 14px;
	overflow: hidden;
	background: rgba( 0, 0, 0, 0.06 );
}

.bxdocs-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.bxdocs-embed__caption {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	opacity: 0.75;
}

.bxdocs-embed-fallback {
	display: inline-block;
	margin: 0.5rem 0;
}

.bxdocs-tryboxlang {
	margin: 1.5rem 0;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 14px;
	overflow: hidden;
}

.bxdocs-tryboxlang__title {
	padding: 0.6rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	background: rgba( 0, 0, 0, 0.03 );
	border-bottom: 1px solid rgba( 0, 0, 0, 0.12 );
}

.bxdocs-tryboxlang__frame {
	display: block;
	width: 100%;
	border: 0;
}

.bxdocs-tryboxlang__footer {
	padding: 0.5rem 1rem;
	font-size: 0.85rem;
	text-align: right;
	background: rgba( 0, 0, 0, 0.03 );
	border-top: 1px solid rgba( 0, 0, 0, 0.12 );
}

.bxdocs-tryboxlang__footer a {
	color: var( --bxdocs-link );
	text-decoration: none;
}

.bxdocs-tryboxlang__footer a:hover {
	text-decoration: underline;
}

.bxdocs-page-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 14px;
	padding: 0.9rem 1.1rem;
	margin: 1rem 0;
	color: inherit;
	text-decoration: none;
}

.bxdocs-page-link:hover {
	border-color: var( --bxdocs-link );
}

.bxdocs-page-link__icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.bxdocs-page-link__title {
	font-weight: 600;
	display: block;
}

.bxdocs-page-link__summary {
	display: block;
	font-size: 0.85rem;
	opacity: 0.75;
	margin-top: 0.15rem;
}

.bxdocs-link-preview {
	display: flex;
	align-items: stretch;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 14px;
	overflow: hidden;
	margin: 1rem 0;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bxdocs-link-preview:hover {
	border-color: var( --bxdocs-link );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.08 );
}

.bxdocs-link-preview__image {
	flex-shrink: 0;
	width: 33%;
	max-width: 220px;
}

.bxdocs-link-preview__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bxdocs-link-preview__text {
	padding: 0.9rem 1.1rem;
	min-width: 0;
}

.bxdocs-link-preview__title {
	font-weight: 600;
}

.bxdocs-link-preview__description {
	font-size: 0.85rem;
	opacity: 0.75;
	margin-top: 0.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.bxdocs-link-preview__domain {
	font-size: 0.75rem;
	opacity: 0.6;
	margin-top: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.bxdocs-updates {
	margin: 1.5rem 0;
}

.bxdocs-update {
	border-left: 2px solid rgba( 0, 0, 0, 0.12 );
	padding: 0 0 1.5rem 1.25rem;
	margin-left: 0.25rem;
}

.bxdocs-update__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.bxdocs-update__date {
	font-weight: 700;
}

.bxdocs-update__tag {
	background: rgba( 0, 0, 0, 0.06 );
	border-radius: 999px;
	padding: 0.1rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
}

.bxdocs-update__body > :last-child {
	margin-bottom: 0;
}

[data-theme="dark"] .bxdocs-expandable,
[data-theme="dark"] .bxdocs-card,
[data-theme="dark"] .bxdocs-file,
[data-theme="dark"] .bxdocs-page-link,
[data-theme="dark"] .bxdocs-link-preview,
[data-theme="dark"] .bxdocs-update {
	border-color: rgba( 255, 255, 255, 0.15 );
}

[data-theme="dark"] .bxdocs-embed {
	background: rgba( 255, 255, 255, 0.06 );
}

[data-theme="dark"] .bxdocs-tryboxlang {
	border-color: rgba( 255, 255, 255, 0.12 );
}

[data-theme="dark"] .bxdocs-tryboxlang__title,
[data-theme="dark"] .bxdocs-tryboxlang__footer {
	background: rgba( 255, 255, 255, 0.06 );
	border-color: rgba( 255, 255, 255, 0.12 );
}

[data-theme="dark"] .bxdocs-update__tag {
	background: rgba( 52, 211, 153, 0.12 );
	color: #6ee7b7;
}

/* Image captions/alignment/framing - GitBook-compatible raw HTML
   (<figure>/<figcaption>, [data-with-frame]) that bx-markdown/Flexmark
   already passes through untouched as a block-level HTML element - see
   docs/guides/markdown.md#images. */
.page-content figure,
.md-card figure {
	margin: 1.5rem 0;
	text-align: center;
}

.page-content figure img,
.md-card figure img {
	max-width: 100%;
	border-radius: 10px;
}

.page-content figcaption,
.md-card figcaption {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	opacity: 0.75;
}

[data-with-frame] {
	display: inline-block;
	padding: 0.5rem;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 12px;
}

[data-theme="dark"] [data-with-frame] {
	border-color: rgba( 255, 255, 255, 0.15 );
}

.bxdocs-gallery {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: 0.75rem;
	margin: 1.5rem 0;
}

.bxdocs-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

/* Blog: draft preview badge (bxDocs serve only - see BuildPipeline.bx's
   own includeDrafts), a "Browse by year"/"Browse by category" simple link
   list on the main /blog/ list page, and the /blog/stats/ page's cards
   (which reuse .bxdocs-cards/.bxdocs-card above - the ::: cards directive
   block's own component - rather than a separate stats-card component). */
.blog-draft-badge {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: var( --bxdocs-step-warning-bg );
	color: var( --bxdocs-step-warning-text );
	font-size: 0.85rem;
	font-weight: 600;
}

.blog-post-card--draft {
	border: 1px dashed var( --bxdocs-step-warning-bg );
	border-radius: 10px;
	padding: 1rem;
}

.blog-archive-links,
.blog-category-links {
	margin: 2rem 0;
}

.blog-archive-links h2,
.blog-category-links h2 {
	margin-bottom: 0.5rem;
}

.blog-archive-links ul,
.blog-category-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.blog-author-posts {
	margin: 1rem 0 2rem;
}

.blog-author-search {
	width: 100%;
	max-width: 320px;
	margin-bottom: 1rem;
	padding: 0.4rem 0.75rem;
	border: 1px solid var( --bxdocs-border );
	border-radius: 6px;
	background: var( --bxdocs-bg );
	color: inherit;
	font-size: 0.9rem;
}

.blog-author-posts-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.blog-author-posts-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var( --bxdocs-border );
}

.blog-author-posts-list .blog-post-meta {
	color: var( --bxdocs-muted );
	font-size: 0.85rem;
}