@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ============================================================
   fs-docs-theme.css
   FirstSpirit Documentation — new brand & design system.

   LOAD ORDER (single source of truth for the brand skin):
     style.css  →  indexs.css  →  fs-docs-theme.css  →  highlight.css

   This file REPLACES the WIP indexs-new.css. It re-skins the
   existing Crownpeak documentation layout to the new FirstSpirit
   brand (docs.firstspirit.solutions). It changes CSS only — the
   body markup, breadcrumb, sidebars, content and all JavaScript
   stay exactly as they are. Header and footer markup are the two
   render-templates you paste separately (see the accompanying
   header + footer HTML).

   Base fonts (Helvetica-* families declared in style.css) are
   overridden to Public Sans on every element that style.css /
   indexs.css set explicitly, so the whole page renders in the
   brand typeface with a system-sans fallback.
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
	/* Brand — ink (text) */
	--fs-ink:        #1A1616;
	--fs-ink-80:     #46413F;
	--fs-ink-60:     #736E6C;
	--fs-ink-40:     #A3A09E;

	/* Brand — purple */
	--fs-purple:        #BD2EFF;
	--fs-purple-deep:   #8F18FF;
	--fs-purple-light:  #B5A8FF;

	/* Brand — blue */
	--fs-blue-deep:  #0000B0;
	--fs-blue:       #00a4ff;
	--fs-structure:  #47ACFF;   /* structural accents: list bullets, etc. */

	/* Surfaces */
	--fs-white:      #FFFFFF;
	--fs-paper:      #F4F6FA;
	--fs-bg-1:       #E4E7EF;
	--fs-bg-2:       #C7CDDE;
	--fs-line:       #DDE1EB;
	--fs-line-soft:  #EAEDF3;
	--fs-yellow:     #FCFFCE;

	/* Chrome (header / breadcrumb / footer) */
	--fs-chrome:         #140F22;
	--fs-chrome-overlay: rgba(255, 255, 255, 0.03);

	/* Signature gradient (navbar seam, accents) */
	--fs-gradient: linear-gradient(103deg, #BD2EFF 0%, #8F18FF 45%, #47ACFF 100%);

	/* Semantic */
	--fs-success: #1F8A5B;
	--fs-warning: #C9821B;
	--fs-danger:  #C83466;

	/* Code syntax — darker variants tuned for contrast on the light code card */
	--fs-code-purple: #7A0FD6;
	--fs-code-green:  #157347;

	/* Typography — Public Sans with system fallback */
	--fs-font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Docs-header height — single dark bar (logo + title beside it) */
	--dh-total: 76px;
}


/* ============================================================
   2. PRINT
   ============================================================ */
@media print {
	.docs-header       { display: none; }
	.breadcrumb        { display: none; }
	.main-section      { top: 0; }
	footer.docs-footer { display: none; }
}


/* ============================================================
   3. BASE / TYPOGRAPHY
   ============================================================ */
html {
	/* Keep in-page anchors clear of the fixed chrome */
	scroll-padding-top: calc(var(--dh-total) + 30px + 20px);
}

body {
	font-family: var(--fs-font);
	color: var(--fs-ink-80);
	line-height: 24px;
	-webkit-font-smoothing: antialiased;
}

/* Global font override — style.css / indexs.css pin Helvetica-* on
   these selectors; repeat them here so Public Sans wins everywhere. */
a,
strong,
.breadcrumb ul li a,
.info-table th,
.info-table thead td,
.info-table tfoot td,
.info-table tr td,
.info-box,
.alert-box,
.editor-comment-box,
.badge-product,
.badge-title,
#multipager .sidebar-left .sidebar-left-inner ul li a,
#multipager .sidebar-left .sidebar-left-inner ul li a.active,
#multipager .sidebar-left .sidebar-left-inner ul li a:active,
.sidebar-right ol.anchor li a,
.sidebar-right ol.anchor li a.active,
.sidebar-right ol.anchor li::marker {
	font-family: var(--fs-font);
}

a.button { display: inline-block; }

h1, h2, h3, h4, h5 { display: block; }

h1[data-toc-label]::before,
h2[data-toc-label]::before,
h3[data-toc-label]::before,
h4[data-toc-label]::before,
h5[data-toc-label]::before {
	content: attr(data-toc-label) " ";
	color: inherit;   /* same as the heading/body text, not accent */
}

h1 {
	font-family: var(--fs-font);
	font-size: 36px;
	line-height: 43px;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--fs-ink);
	position: relative;
	display: inline-block;
	margin-block-end: 40px;
}
h1::after {
	display: none;   /* UX: remove the accent underline under h1 */
}

h2 {
	font-family: var(--fs-font);
	font-size: 24px;
	line-height: 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--fs-ink);
}

h3 {
	font-family: var(--fs-font);
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--fs-ink);
	margin-block-start: 1.25em;
	margin-block-end: 0.75em;
}

h4 {
	font-family: var(--fs-font);
	font-size: 16px;
	font-weight: 700;
	color: var(--fs-ink);
	margin-block-start: 1.25em;
	margin-block-end: 0.5em;
}

h5 {
	font-family: var(--fs-font);
	font-size: 1em;
	font-style: italic;
	font-weight: 600;
	color: var(--fs-ink-80);
	margin: 0;
}

strong {
	font-weight: 700;
	color: var(--fs-ink);
}

/* Links */
a {
	color: var(--fs-purple-deep);
	font-weight: 500;
}
a:hover {
	color: var(--fs-purple);
}

.main-section .content a:not(.button) {
	color: var(--fs-purple-deep);
}
.main-section .content a:not(.button):hover {
	color: var(--fs-purple);
}
.main-section .content a:not(.button):hover::after {
	transform: translate(0.1em, 0);
}

/* Lists */
ul li::marker { color: var(--fs-structure); }
ol li::marker { color: var(--fs-structure); font-weight: 700; }

/* Rule */
hr { border: 0; border-top: 1px solid var(--fs-line); }


/* ============================================================
   4. BUTTONS
   ============================================================ */
.button {
	background: var(--fs-gradient);
	color: #ffffff;
	font-weight: 700;
	padding: 9px 30px 9px 30px;
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(143, 24, 255, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.button:hover {
	background: var(--fs-gradient);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(143, 24, 255, 0.38);
}


/* ============================================================
   5. CONTENT SECTIONS  (unchanged spacing, kept for parity)
   ============================================================ */
.main-section {
	top: 60px;
}
.main-section .content {
	width: auto;
	max-width: 800px;
	margin-right: default;
}
   /* Prevent horizontal overflow on mobile: .content and the code card are flex
   items whose default min-width:auto refuses to shrink below wide children
   (code blocks with white-space:pre), pushing the whole page wider than the
   viewport. min-width:0 lets them shrink so the code scrolls inside its own
   overflow:auto box instead. */
.main-section .content { min-width: 0; }
.card.code-box,
.card.code-box .card-body { min-width: 0; max-width: 100%; }

.main-section .content section {
	padding-top: 0;
	padding-bottom: 0;
}
.main-section .content section:first-of-type hr:first-child {
	display: none;
}
.main-section .content section hr {
	margin-top: 40px !important;
	margin-bottom: 40px !important;
}


/* ============================================================
   6. NEW DOCS HEADER  (.docs-header)
   Replaces <div class="header">. Single dark bar: a bigger logo with
   the document title + version beside it, and the overview link on the
   right. Dark chrome + purple/blue radial glow; the gradient seam lives
   on the breadcrumb below.
   ============================================================ */
.header { display: none; }   /* safety net if the old header is still in the DOM */

.docs-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	/* Solid white: the header is sticky and content scrolls underneath, so it
	   needs an opaque background to mask it. The ::before glow sits on top. */
	background: var(--fs-white);
	overflow: hidden;   /* clips the glow to the header box */
}

/* Purple/blue radial glow across the header */
.docs-header::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(120% 170% at 8% -50%, rgba(143, 24, 255, 0.30), transparent 52%),
		radial-gradient(120% 180% at 100% -40%, rgba(71, 172, 255, 0.20), transparent 55%);
}

/* Skip link — visually hidden until keyboard-focused */
.docs-header__skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	background: var(--fs-purple-deep);
	color: #ffffff;
	padding: 6px 16px;
	font-family: var(--fs-font);
	font-size: 14px;
	text-decoration: none;
	border-radius: 0 0 4px 0;
}
.docs-header__skip:focus { left: 0; }

/* Single bar */
.docs-header__bar {
	position: relative;
	z-index: 1;
	height: var(--dh-total);
	padding: 0 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* Left cluster: logo + divider + document title + version */
.docs-header__left {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}
.docs-header__logo-link {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}
.docs-header__logo-link:focus-visible {
	outline: 2px solid var(--fs-purple);
	outline-offset: 4px;
	border-radius: 2px;
}
.docs-header__logo {
	display: block;
	height: 60px;
	width: auto;
	max-width: 280px;
}
.docs-header__divider {
	flex-shrink: 0;
	width: 1px;
	height: 30px;
	background: var(--fs-line);   /* light divider on the white header */
}
.docs-header__title {
	min-width: 0;
	color: var(--fs-ink);   /* dark text on the light header */
	font-family: var(--fs-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.docs-header__version {
	flex-shrink: 0;
	display: inline-block;
	padding: 2px 11px;
	/* Higher-contrast pill on a light background */
	background: color-mix(in srgb, var(--fs-purple) 12%, white);
	border: 1px solid var(--fs-purple);
	border-radius: 999px;
	color: var(--fs-purple-deep);
	font-family: var(--fs-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

/* Right cluster: overview / back link */
.docs-header__right {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}
.docs-header__overview-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--fs-purple-deep);   /* link purple, like content links */
	text-decoration: none;
	font-family: var(--fs-font);
	font-size: 13.5px;
	font-weight: 600;
	transition: color 0.15s ease;
}
.docs-header__overview-link:hover { color: var(--fs-purple); text-decoration: none; }
.docs-header__overview-link:focus-visible {
	outline: 2px solid var(--fs-purple);
	outline-offset: 4px;
	border-radius: 2px;
	color: var(--fs-purple-deep);
}
.docs-header__back-icon {
	flex-shrink: 0;
	transition: transform 0.15s ease;
}
.docs-header__overview-link:hover .docs-header__back-icon { transform: translateX(-3px); }

/* Tighten on small screens: drop the divider + title so logo + version +
   overview still fit. Mobile navigation itself stays with your existing
   template mechanism — no burger is hard-coded here. */
@media (max-width: 639px) {
	.docs-header__divider,
	.docs-header__title { display: none; }
}
@media (max-width: 479px) {
	.docs-header__overview-link span { display: none; }
}

/* TOGGLE BUTTON (.btn-toggle) — the button in the header.
   collapsible.js does two things on click: (1) toggles `.show` on the button
   — reliable — and (2) flips the display of the button's next sibling, which
   is brittle (breaks if that sibling is missing or empty). So we IGNORE (2)
   and drive the reveal purely off the reliable `.show` class + CSS :has()
   below. No JS change. The icon uses the toggler media as a white mask,
   swapping to the close icon in the .show state. */
.docs-header .btn-toggle {
	display: none;                 /* shown on mobile (media query below) */
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	background: rgba(26, 22, 22, 0.04);
	border: 1px solid var(--fs-line);
	border-radius: 9px;
	cursor: pointer;
	flex-shrink: 0;
}
.docs-header .btn-toggle:hover { background: rgba(26, 22, 22, 0.08); }
.docs-header .icon-toggle {
	display: block;
	width: 22px;
	height: 22px;
	-webkit-mask: url(../img/toggler.svg) no-repeat center;
	        mask: url(../img/toggler.svg) no-repeat center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	background-color: var(--fs-ink);   /* dark icon on the light header */
}
.docs-header .btn-toggle.is-open .icon-toggle {
	-webkit-mask-image: url(../img/icons/icon-close.svg);
	        mask-image: url(../img/icons/icon-close.svg);
}

/* collapsible.js reads the button's nextElementSibling. Keep this element
   directly after the button (see header HTML) so the script never trips on a
   null sibling. It stays hidden — the reveal is the sidebar overlay below. */
.docs-header__mobile-nav { display: none !important; }

@media (max-width: 911.9px) {
	.docs-header .btn-toggle { display: inline-flex; }

	/* Burger replaces the back link at this width (like the old design) and the
	   logo shrinks so nothing overflows / gets clipped by the header's
	   overflow:hidden — which was hiding the burger on small screens. */
	.docs-header__overview-link { display: none; }
	.docs-header__logo { height: 40px; }

	/* Reveal the real left-sidebar navigation as a full-height overlay when the
	   toggle is active. Driven by the `.is-open` class the button's inline
	   handler sets — CSS only, no nav duplication. (:has() — evergreen browsers.) */
	body:has(.docs-header .btn-toggle.is-open) .main-section .sidebar-left {
		display: block !important;
		/* position:fixed needs !important — style.css's #multipager .sidebar-left
		   {position:relative} is an ID selector and would otherwise win. */
		position: fixed !important;
		top: calc(var(--dh-total) + 30px);
		left: 0;
		right: 0;
		bottom: 0;
		/* No width override on tablet: keep style.css's natural 30% so the drawer
		   sits on the left and content stays visible beside it (right:0 is ignored
		   while an explicit width applies). Phones go full-width below. */
		min-width: 0 !important;
		margin: 0;
		z-index: 990;
		background: var(--fs-white);
		border-top: 1px solid var(--fs-line);
		border-right: 1px solid var(--fs-line);
		overflow-y: auto;
		padding: 8px 24px 24px;
		box-shadow: 0 12px 24px rgba(26, 22, 22, 0.18);
	}
	body:has(.docs-header .btn-toggle.is-open) .main-section .sidebar-left .sidebar-left-inner {
		position: static !important;
		top: auto !important;
		padding: 0 !important;
	}
	body:has(.docs-header .btn-toggle.is-open) .main-section .sidebar-left .claim {
		display: none !important;
	}
}

/* Phones: no room for content beside the drawer, so make it full-width. The
   30% drawer stops being usable somewhere around here (its labels start
   wrapping), so 640px is the phone/tablet cutoff — adjust this one number to
   taste. width:auto + left:0/right:0 (from the block above) = full width. */
@media (max-width: 639.9px) {
	body:has(.docs-header .btn-toggle.is-open) .main-section .sidebar-left {
		width: auto !important;
	}
}

@media (min-width: 912.9px) {
	.docs-header .btn-toggle { display: none !important; }
}


/* ============================================================
   7. BREADCRUMB
   Repositioned below the docs-header, recolored to match chrome,
   gradient seam separates all chrome from the white content.
   ============================================================ */
/* UX suggestion: light breadcrumb, consistent with the light header/footer.
   Transparent background, muted trail text with purple hover/active, a thin
   bottom border in place of the gradient seam, and dark chevron separators
   (style.css's were white → invisible on a light bar). */
.breadcrumb {
	top: var(--dh-total);
	height: 30px;
	background: white;
	border-bottom: 1px solid var(--fs-line);
}
.breadcrumb::before { display: none; }          /* remove the gradient seam */
.breadcrumb::after { background: transparent; }  /* no dark rightward extension */

.breadcrumb ul { margin-top: 0; }

/* One colour: every crumb is the same grey; the current page is just bolded
   (not recoloured), and hover only darkens. */
.breadcrumb ul li a { color: var(--fs-ink-60); }
.breadcrumb ul li a:hover,
.breadcrumb ul li a:active,
.breadcrumb ul li a.active { color: var(--fs-ink); }
.breadcrumb ul li.active > a { color: var(--fs-ink-60); font-weight: 600; }
.breadcrumb ul li::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='9.25 6.5 14.75 12.01 9.25 17.5' style='fill:none;stroke:%23A3A09E;stroke-linecap:round;stroke-linejoin:round;stroke-width:2'/%3E%3C/svg%3E");
	opacity: 1;
	/* Vertically centre the chevron with the text — style.css pins it near the
	   top (top:2px + margin-top:-2px), which makes the ">" float high. */
	top: 50%;
	margin-top: 0;
	transform: translateY(-50%);
}

/* Hide the .sidebar-left (old .claim) inside the breadcrumb — the
   product/version now live in the identity strip. */
.breadcrumb .container > .sidebar-left { display: none; }

/* Align the breadcrumb with the docs-header (and footer), not the left
   sidebar. The shared .container caps its width, centres it and adds a
   negative `left` offset — which lines the trail up with .sidebar-left
   instead of the header logo. Inside the breadcrumb only, run the container
   full-width with no offset so the trail starts at the same 30px gutter as
   the logo and footer. (Fixes the misalignment present in the live version.) */
.breadcrumb .container {
	max-width: none;
	width: 100%;
	height: 30px;
	left: 0;
	margin-left: 0;
	margin-right: 0;
}
/* …and the .content inside it (70% wide + centred + 15px padding) is what
   still pulled the trail inward. Run it full-width, flush to the gutter. */
.breadcrumb .container .content,
.breadcrumb .content {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}


/* ============================================================
   8. LAYOUT OFFSETS
   Push content below the fixed header (104px) + breadcrumb (25px).
   ============================================================ */
.sidebar-right { top: calc(var(--dh-total) + 30px); }


/* ============================================================
   9. LEFT SIDEBAR — brand colours
   ============================================================ */
#multipager .sidebar-left .sidebar-left-inner {
	top: 130px;
	padding: 30px 15px 60px 0;
}

#multipager .sidebar-left .claim {
	background: var(--fs-purple-deep);
}
#multipager .sidebar-left .claim::before {
	background: var(--fs-purple-deep);
}
#multipager .sidebar-left .sidebar-left-inner ul.level-one > li.active {
	border-color: var(--fs-purple-deep) !important;
}
#multipager .sidebar-left .sidebar-left-inner ul li a {
	color: var(--fs-ink-80);
	font-size: 14px;
}
#multipager .sidebar-left .sidebar-left-inner ul li a.active,
#multipager .sidebar-left .sidebar-left-inner ul li a:active {
	color: var(--fs-purple-deep);
	font-weight: 600;
}
#multipager .sidebar-left .sidebar-left-inner ul li a:hover {
	color: var(--fs-purple);
}


/* ============================================================
   10. RIGHT SIDEBAR — brand colours
   ============================================================ */
.sidebar-right {
	overflow: auto;
	/* Free-floating TOC: drop the grey column panel + border so it reads as a
	   light floating list, not a bordered sidebar. Align its top with the
	   content and give it an even gutter (style.css hugs the edge at 5px). */
	background: transparent;
	border-left: none;
	padding-top: 60px;
	padding-right: 25px;
	padding-bottom: 10px;
}

.sidebar-right a.highlighted { color: var(--fs-purple-deep) !important; }
.sidebar-right li ol,
.sidebar-right li ul { padding-top: 10px; }
.sidebar-right li ul { list-style-type: none; }

.sidebar-right .tab { background: var(--fs-chrome); }
.sidebar-right .tab:hover { background: var(--fs-purple-deep); }

/* De-emphasise the right "On this page" TOC so the left file tree reads as the
   primary navigation: smaller, lighter, tighter. */
.sidebar-right ol.anchor {
	font-size: 12.5px;
	line-height: 1.45;
}
.sidebar-right ol.anchor li a {
	color: var(--fs-ink-60);
	font-weight: 500;
}
.sidebar-right ol.anchor li::marker {
	color: var(--fs-ink-40);
}

/* "Table of Contents" title — shrink from a full heading to a quiet label. */
.sidebar-right h1,
.sidebar-right h2,
.sidebar-right h3,
.sidebar-right h4 {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fs-ink-40);
	margin: 0 0 12px;
}
.sidebar-right h1::after { content: none; }   /* kill the h1 gradient underline if the title is an h1 */

.sidebar-right ol.anchor li:hover > a,
.sidebar-right ol.anchor > ol.sub-level-2 li:hover > a,
.sidebar-right ol.anchor > ol.sub-level-3 li:hover > a {
	color: var(--fs-purple);
}
.sidebar-right ol.anchor li:hover::marker,
.sidebar-right ol.anchor > ol.sub-level-2 li:hover::marker,
.sidebar-right ol.anchor > ol.sub-level-3 li:hover::marker {
	color: var(--fs-purple);
}
.sidebar-right ol.anchor li.active::marker,
.sidebar-right ol.anchor > ol.sub-level-2 li.active::marker,
.sidebar-right ol.anchor > ol.sub-level-3 li.active::marker {
	color: var(--fs-purple-deep);
}
.sidebar-right ol.anchor li a.active,
.sidebar-right ol.anchor > ol.sub-level-2 li a.active,
.sidebar-right ol.anchor > ol.sub-level-3 li a.active {
	color: var(--fs-purple-deep);
	font-weight: 600;
}


/* ============================================================
   11. CODE BOX
   Light surface (keeps highlight.css / highlight.js readable),
   new brand chrome: rounded card, soft border, paper body.
   ============================================================ */
.card-simple { margin-bottom: 30px; }

.card.code-box {
	position: relative;
	background: var(--fs-paper);
	border: 1px solid var(--fs-line);
	border-radius: 10px;
	box-shadow: none;
	overflow: hidden;
}
.card.code-box .card-body {
	margin: 0;
	padding: 20px 24px;
	background: transparent;
}
.card.code-box .card-body pre { width: 100%; }

/* Unify the code surface: highlight.css paints .hljs white, which shows as a
   lighter box inside the paper card. Force every code layer transparent so the
   card's single paper surface shows through — highlight.js token colours stay. */
.card.code-box .card-body code,
.card.code-box pre,
.card.code-box .hljs {
	background: transparent;
}

.card.code-box .code-box-copy {
	position: absolute;
	top: 1em;
	right: 1em;
	width: 1.5em;
	height: 1.5em;
	-webkit-mask: url(../img/icons/clipboard_copy.svg) no-repeat center;
	        mask: url(../img/icons/clipboard_copy.svg) no-repeat center;
	background-color: var(--fs-purple-deep);
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
	cursor: pointer;
}
.card.code-box:hover .code-box-copy { opacity: 0.8; }
.card.code-box:hover .code-box-copy.success {
	-webkit-mask: url(../img/icons/clipboard_copy_success.svg) no-repeat center;
	        mask: url(../img/icons/clipboard_copy_success.svg) no-repeat center;
}
.card.code-box .code-box-copy:hover { opacity: 1; }

/* Brand-aligned syntax palette (overrides highlight.css's Xcode pink/red/green,
   which clashed on the light card). Scoped + higher specificity so it wins
   regardless of highlight.css load order. Restrained 4-hue set:
   purple = keywords/tags, blue = numbers/titles, green = strings, grey = comments. */
.card.code-box .hljs { color: var(--fs-ink); }
.card.code-box .hljs-comment,
.card.code-box .hljs-quote { color: var(--fs-ink-60); font-style: italic; }
.card.code-box .hljs-tag,
.card.code-box .hljs-name,
.card.code-box .hljs-keyword,
.card.code-box .hljs-selector-tag,
.card.code-box .hljs-literal,
.card.code-box .hljs-built_in,
.card.code-box .hljs-type,
.card.code-box .hljs-meta .hljs-keyword { color: var(--fs-code-purple); }
.card.code-box .hljs-string,
.card.code-box .hljs-code,
.card.code-box .hljs-meta .hljs-string,
.card.code-box .hljs-regexp,
.card.code-box .hljs-addition { color: var(--fs-code-green); }
.card.code-box .hljs-number,
.card.code-box .hljs-symbol,
.card.code-box .hljs-bullet,
.card.code-box .hljs-link,
.card.code-box .hljs-title,
.card.code-box .hljs-title.class_,
.card.code-box .hljs-section { color: var(--fs-blue-deep); }
.card.code-box .hljs-attr,
.card.code-box .hljs-attribute,
.card.code-box .hljs-selector-id,
.card.code-box .hljs-selector-class,
.card.code-box .hljs-params,
.card.code-box .hljs-variable,
.card.code-box .hljs-template-variable { color: var(--fs-ink-80); }
.card.code-box .hljs-meta { color: var(--fs-ink-60); }
.card.code-box .hljs-subst { color: var(--fs-ink); }

/* Inline code */
.code-inline { color: var(--fs-ink); }

/* Card titles / rules — style.css still paints these old-brand pink */
.card .card-body .card-title { color: var(--fs-purple-deep); }
.card .card-body hr { border-top-color: var(--fs-purple-deep); }

/* Recolour the card-media play/overlay icon to brand purple */
.card .card-media a.card-icon span img {
	filter: brightness(0) saturate(100%) invert(17%) sepia(95%) saturate(6764%) hue-rotate(271deg) brightness(104%) contrast(103%);
}


/* ============================================================
   12. BADGE  (title + version now live in the header identity strip)
   ============================================================ */
.badge { display: none; }


/* ============================================================
   13. INFO / ALERT / EDITOR-COMMENT BOXES
   Rounded cards, tinted surfaces, brand-coloured icons.
   Icon masks reuse the existing media (icon_info / icon_alert).
   ============================================================ */
/* Quieter, brand-cohesive callouts: neutral paper surface with a thin
   coloured left rule + matching icon — no loud full-colour tint. */
.info-box,
.alert-box,
.editor-comment-box {
	position: relative;
	background: var(--fs-paper);
	border: 1px solid var(--fs-line);
	border-left-width: 3px;
	border-radius: 8px;
	color: var(--fs-ink-80);
	padding: 1.1rem 1.4rem 1.1rem 3.75rem;
	margin: 1.25rem 0;
	line-height: 1.6;
}
.info-box::before,
.alert-box::before,
.editor-comment-box::before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 1.25em;
	top: 1.15em;
	width: 1.4em;
	height: 1.4em;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

/* Info — blue */
.info-box { border-left-color: var(--fs-blue); }
.info-box::before {
	-webkit-mask-image: url(../img/icons/icon_info.svg);
	        mask-image: url(../img/icons/icon_info.svg);
	background-color: var(--fs-blue);
}

/* Alert — red for clear caution (replaces the orange amber) */
.alert-box { border-left-color: var(--fs-purple); }   /* UX: warning accent #bd2eff */
.alert-box::before {
	-webkit-mask-image: url(../img/icons/icon_alert.svg);
	        mask-image: url(../img/icons/icon_alert.svg);
	background-color: var(--fs-purple);
}

/* Editor comment — preview only, keeps the yellow note surface */
.editor-comment-box {
	background: var(--fs-yellow);
	border-color: color-mix(in srgb, var(--fs-purple) 30%, var(--fs-yellow));
	border-left-color: var(--fs-purple-deep);
}
.editor-comment-box::before {
	-webkit-mask-image: url(../img/icons/icon_info.svg);
	        mask-image: url(../img/icons/icon_info.svg);
	background-color: var(--fs-purple-deep);
}


/* ============================================================
   14. INFO TABLE
   Rounded container, uppercase head, hover rows, soft borders.
   ============================================================ */
.info-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--fs-line);
	border-radius: 10px;
	overflow: hidden;
	margin: 1rem 0 1.5rem;
	font-size: 0.9rem;
}
.info-table th,
.info-table thead td {
	padding: 0.75em 1em;
	background-color: var(--fs-paper);
	text-align: left;
	line-height: 1.4;
	border-bottom: 1px solid var(--fs-line);
	color: var(--fs-ink-60);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.info-table tfoot td {
	padding: 0.7em 1em;
	background-color: var(--fs-paper);
	line-height: 1.4;
	border-top: 1px solid var(--fs-line);
	color: var(--fs-ink);
	font-size: 0.9rem;
	font-weight: 700;
}
.info-table tr td {
	padding: 0.7em 1em;
	color: var(--fs-ink-80);
	vertical-align: top;
	line-height: 1.55;
}
.info-table.valign-middle tr td { vertical-align: middle; }
.info-table tr td:last-child,
.info-table tr th:last-child { padding-right: 1em; }

.info-table.alternating-rows tbody tr:nth-child(even),
.info-table.alternating-rows tr:nth-child(even) {
	background-color: var(--fs-paper);
}
.info-table:not(.alternating-rows) td {
	border-bottom: 1px solid var(--fs-line-soft);
}
.info-table tbody tr:hover td,
.info-table tr:hover td { background-color: var(--fs-paper); }

.info-table td strong { color: var(--fs-ink); }
.info-table td code { white-space: nowrap; }

.info-table ul,
.info-table ol { margin-top: 1em; margin-bottom: 1em; }
.info-table li:last-child { padding-bottom: 0; }


/* ============================================================
   15. UTILITIES / IMAGES
   ============================================================ */
.text-highlight,
.text-highlight * { color: var(--fs-blue-deep) !important; }

.image-inline { max-width: 100%; }
.image-border { border: 1px solid var(--fs-line); border-radius: 8px; }

.fullscreen-image-layer {
	position: fixed;
	top: 0; bottom: 0; left: 0; right: 0;
	width: auto; height: auto;
	z-index: 99999;
	cursor: zoom-out;
	background: color-mix(in srgb, var(--fs-ink) 55%, transparent);
}
.fullscreen-image-layer img {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	width: 100%; height: 100%;
	margin: auto;
	object-fit: scale-down;
}
.fullscreen-image-layer.loading::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	margin: auto;
	display: block;
	width: 5em; height: 5em;
	background-color: #FFFFFF;
	-webkit-mask: url(../img/icons/loading.svg) no-repeat center center;
	        mask: url(../img/icons/loading.svg) no-repeat center center;
}


/* ============================================================
   16. FOOTER  (footer.docs-footer)
   Direct child of .main-section, after .content. Negative margins
   break it out of main-section's 30px side / 60px bottom padding
   so it runs full width. Responsive padding-right clears the fixed
   right sidebar at wide viewports.
   ============================================================ */
/* UX: light footer — no background, no gradient seam, muted text. A thin top
   border (not a gradient) keeps it visually separated from the content. */
footer.docs-footer {
	position: relative;
	z-index: 2001;   /* stays above the fixed right sidebar */
	background: transparent;
	border-top: 1px solid var(--fs-line);
	color: var(--fs-ink-60);
	font-family: var(--fs-font);
	font-size: 13px;
	padding: 18px 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 20px;
	margin-top: 60px;
	margin-left: -30px;
	margin-right: -30px;
	margin-bottom: -60px;
}

footer.docs-footer::before { display: none; }   /* remove the gradient seam */

footer.docs-footer p { margin: 0; line-height: 1.8; }

footer.docs-footer a,
.main-section footer.docs-footer a {
	color: var(--fs-ink-60);   /* same colour as the copyright text */
	font-family: var(--fs-font);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease-in-out;
}
footer.docs-footer a:hover,
.main-section footer.docs-footer a:hover { color: var(--fs-ink); text-decoration: underline; }

footer.docs-footer .footer-brand {
	color: var(--fs-ink-40);
	font-size: 12px;
	white-space: nowrap;
}