/**
 * Boost Look v3 — Development Build
 * New design and development for the Boost C++ Libraries website (boost.io),
 * in collaboration with MetaLab.
 * Built from modular sources in src/css/ via build-css.sh
 * Note: boostlook.css remains the current production stylesheet.
 * License: BSL-1.0
 */

/**
 * File Structure Overview (src/css/):
 * 00-header.css          - License, file overview
 * 01-variables.css       - Root CSS custom properties, spacing, typography, icons
 * 02-themes.css          - Light/dark theme variable mappings
 * 03-fonts.css           - @font-face declarations (Noto Sans, Monaspace)
 * 04-reset.css           - CSS reset (box-sizing, margins, defaults)
 * 05-global-typography.css - Base container, headings h1-h6, heading anchors
 * 06-global-links.css    - Paragraph styling, links, footnotes
 * 07-global-code.css     - Code blocks, inline code, syntax highlighting (hljs)
 * 08-global-components.css - Quotes, pagination, admonitions, lists, edit-page link
 * 09-global-tables-images.css - Tables, image styles
 * 10-scrollbars.css      - Scrollbar styling (Firefox + WebKit)
 * 11-template-layout.css - Template-specific scrolling, iframe, TOC common styles
 * 12-asciidoctor.css     - AsciiDoctor-specific styles, Rouge syntax highlighting
 * 13-antora.css          - Antora navigation, toolbar, breadcrumbs, tabs, search
 * 14-quickbook.css       - Quickbook legacy wrapper, titles, TOC, tables, footer
 * 15-readme.css          - Library README styles
 * 16-responsive-toc.css  - AsciiDoctor responsive TOC layout (768px → 1920px)
 */

/**
 * Template Structure:
 * The framework supports these main documentation templates:
 *
 * 1. AsciiDoctor Template:
 * example: https://www.boost.io/doc/libs/1_87_0/libs/charconv/doc/html/charconv.html
 * <div class="boostlook">
 *   <div class="header">
 *     <h1>Title</h1>
 *     <div id="toc" class="toc2">
 *         <button id="toggle-toc">Show Table of Contents</button>
 *         <ul class="sectlevel1">TOC Links</ul>
 *     </div>
 *   </div>
 *   <div id="content">
 *     <div class="sect1">Content Sections</div>
 *   </div>
 *   <div id="footer">Footer Content</div>
 * </div>
 *
 * 2. Antora Template:
 * example: https://www.boost.io/doc/libs/1_87_0/doc/antora/url/index.html
 * <div class="boostlook">
 *   <div id="header">
 *     <div id="toc" class="nav-container toc2">Navigation</div>
 *   </div>
 *   <div id="content">
 *     <article class="doc max-width-reset">
 *       <div class="toolbar">Breadcrumbs and Spirit Nav</div>
 *       <h1>Title</h1>
 *       <div class="sect1">Content Sections</div>
 *     </article>
 *   </div>
 *   <div id="footer">Footer Content</div>
 * </div>
 *
 * 3. Quickbook Template:
 * example: https://www.boost.io/doc/libs/1_87_0/doc/html/accumulators.html
 * <div class="boostlook">
 *    <div class="spirit-nav">Navigation</div>
 *    <div class="chapter">  <!-- might also be .section, .refentry, .document, or .book -->
 *        <div class="titlepage">Title and information</div>
 *        <div class="toc">Table of Contents</div>
 *        <div class="section>Content</div>
 *        <div class="copyright-footer">Footer</div>
 *    </div>
 * </div>
 *
 * 4. README Template:
 * example: https://www.boost.io/library/1.87.0/beast/
 * <section id="libraryReadMe" class="boostlook">ReadMe Content</section>
 */

/**
 * Design Philosophy:
 * - Consistent styling across different documentation templates
 * - Responsive design with mobile-first approach
 * - Dark/Light theme support
 * - Accessible typography and color schemes
 * - Modern scrolling and navigation experience
 */

/**
 * Framework Selector Conventions
 *
 * The framework uses the following selector prefixes:
 *
 * 1. .boostlook
 *    - Primary selector for cross-template styles
 *    - Applies to all documentation formats
 *    - Used for common components and layouts
 *
 * 2. .boostlook:not(:has(.doc)),
 *    .boostlook#boost-legacy-docs-wrapper - (DEPRECATED),
 *    .boostlook#antora-template-wrapper,
 *    div.source-docs-antora.boostlook:not(:has(>.boostlook)) - (Fallback)
 *    - Specific to legacy Quickbook templates
 *    - Maintains backward compatibility
 *    - Handles specialized Quickbook formatting
 *
 * 3. .boostlook#libraryReadMe
 *    - Dedicated to README template styling
 *    - Optimized for library documentation
 *    - Ensures consistent README presentation
 */

/*----------------- Root Variables - Start -----------------*/

/* Root CSS Variables
 * Defines core design tokens used throughout the framework.
 * Organized into:
 * 1. General Variables - Global settings used across themes
 * 2. Color System - Comprehensive color palette including brand, state, and UI colors
 * 3. Typography - Font sizes, line heights, and text styling variables
 * 4. Spacing System - Padding, margins, and layout spacing tokens
 * 5. Icons - SVG icon definitions for light and dark themes
 * 6. Responsive Design - Mobile-first breakpoint variables
 */

/* Core design tokens. Scoped to the .boostlook subtree (not the page root) so a
   component island on a v3 site page cannot redefine the host page's tokens
   (which caused the hero heading to shift). The :root:not(.v3) branch keeps them
   page-level for full-page docs, whose html has no .v3. */
:root:not(.v3):has(.boostlook),
.boostlook {
  /* General Variables - Core design tokens for all themes */
  --bl-primary-color: rgb(255, 159, 0); /* Boost's signature orange color */

  /*----------------- New Look Variables Start -----------------*/
  /* New Look Primitives */
  /* Colors Primary (Grey) */
  --colors-primary-0: #ffffff;
  --colors-primary-50: #F7F7F8;
  --colors-primary-100: #EFEFF1;
  --colors-primary-200: #CACBCE;
  --colors-primary-300: #A6A8AE;
  --colors-primary-400: #82848A;
  --colors-primary-500: #71737B;
  --colors-primary-600: #585A64;
  --colors-primary-700: #444651;
  --colors-primary-800: #2F313D;
  --colors-primary-900: #050816;
  --colors-primary-950: #050816;

  /* Colors Brand Shades */
  --colors-brand-orange-100: #ffeaca;
  --colors-brand-orange-200: #ffd897;
  --colors-brand-orange-400: #ffb030;
  --colors-brand-orange-500: #FFA000;
  --colors-brand-orange-600: #cd7e00;
  --colors-brand-orange-900: #352000;

  /* Colors Negative Shades */
  --colors-negative-50: #fdf1f3ff;
  --colors-negative-100: #ffe6ea;
  --colors-negative-200: #ffcad2;
  --colors-negative-300: #fe9aab;
  --colors-negative-400: #f9677f;
  --colors-negative-500: #eb3856;
  --colors-negative-600: #bc233c;
  --colors-negative-700: #8d1529;
  --colors-negative-800: #600d1b;
  --colors-negative-950: #1d0408;

  /* Colors Positive Shades */
  --colors-positive-50: #f0fef7ff;
  --colors-positive-100: #def7eb;
  --colors-positive-200: #bdeed6;
  --colors-positive-300: #9ce6c2;
  --colors-positive-400: #7bddad;
  --colors-positive-500: #5ad599;
  --colors-positive-600: #48ac7b;
  --colors-positive-700: #36825d;
  --colors-positive-800: #255940;
  --colors-positive-950: #0a1b13;

  /* Colors Warning Shades */
  --colors-warning-0: rgba(255, 248, 243, 0.5);
  --colors-warning-100: #ffefe2;
  --colors-warning-200: #ffd4b3;
  --colors-warning-300: #feb780;
  --colors-warning-400: #ff9442;
  --colors-warning-500: #fd760f;
  --colors-warning-600: #c25909;
  --colors-warning-700: #914104;
  --colors-warning-800: #5d2a02;
  --colors-warning-950: #1f0e01;

  /* Colors Secondary (Blue) */
  --colors-secondary-0: #f6fafd;
  --colors-secondary-50: #daeef9;
  --colors-secondary-100: #c2e2f4;
  --colors-secondary-200: #92cbe9;
  --colors-secondary-300: #62b3dd;
  --colors-secondary-400: #6DCDF7;
  --colors-secondary-500: #0077B8;
  --colors-secondary-600: #0077B8;
  --colors-secondary-700: #014f77;
  --colors-secondary-800: #013550;
  --colors-secondary-850: #01283c;
  --colors-secondary-900: #001a28;
  --colors-secondary-950: #000d14;

  /* Atom One Dark Theme Colors */
  --atom-one-dark-bg: #1A1C29; /* code block surface — Figma 2.0 dark (= primary-850) */
  --atom-one-dark-text: #FFFFFF;
  --atom-one-dark-keyword: #c678dd;
  --atom-one-dark-operator: #e06c75;
  --atom-one-dark-constant: #56b6c2;
  --atom-one-dark-class: #e6c07b;

  /* Atom One Light Theme Colors */
  --atom-one-light-bg: #ffffff; /* code block surface — Figma 2.0 (#116-5) */
  --atom-one-light-text: #050816;
  --atom-one-light-keyword: #a626a4;
  --atom-one-light-operator: #e45649;
  --atom-one-light-constant: #0184bb;
  --atom-one-light-class: #c18401;

  /* Colour Primitives — Accent */
  --colors-accent-weak-teal: #C9F2EE;
  --colors-accent-weak-yellow: #FBEBA9;
  --colors-accent-weak-green: #E4E4C0;
  --colors-accent-strong-teal: #64DACE;
  --colors-accent-strong-yellow: #F5D039;
  --colors-accent-strong-green: #CACA62;

  /* Colour Primitives — Syntax */
  --colors-syntax-weak-blue: #38DDFF;
  --colors-syntax-weak-green: #72FE92;
  --colors-syntax-weak-yellow: #FFF173;
  --colors-syntax-weak-pink: #F358C0;
  --colors-syntax-weak-grey: #A3A3A3;
  --colors-syntax-strong-blue: #1345E8;
  --colors-syntax-strong-green: #289D30;
  --colors-syntax-strong-yellow: #A3A38C;
  --colors-syntax-strong-pink: #D31FA7;
  --colors-syntax-strong-grey: #9E9E9E;

  /* Colour Primitives — Error */
  --colors-error-weak: #FDF2F2;
  --colors-error-strong: #D32F2F;
  --colors-error-mid: #FF3B30;

  /* Colors Other */
  --colors-primary-150: #D5D6D8;
  --colors-primary-850: #1A1C29;
  --colors-overlay-overlay-white-40: rgba(255 255 255 / 0.4);
  --colors-overlay-overlay-black-40: rgba(13 14 15 / 0.4);
  --colors-overlay-overlay-white-64: rgba(255 255 255 / 0.64);
  --colors-overlay-overlay-black-64: rgba(13 14 15 / 0.64);
  --colors-overlay-overlay-white-88: rgba(255 255 255 / 0.88);
  --colors-overlay-overlay-black-88: rgba(13 14 15 / 0.88);

  /* Spacings And Sizes */
  --spacing-size-size-0: 0rem;
  --spacing-size-4xs: 0.125rem;
  --spacing-size-3xs: 0.25rem;
  --spacing-size-2xs: 0.5rem;
  --spacing-size-xs: 0.75rem;
  --spacing-size-sm: 1rem;
  --spacing-size-md: 1.125rem;
  --spacing-size-2md: 1.3rem;
  --spacing-size-lg: 1.5rem;
  --spacing-size-xl: 2rem;
  --spacing-size-2xl: 2.5rem;
  --spacing-size-3xl: 3rem;
  --main-container: 90rem;

  /* Corner Radius — Metalab 2.0 Primitives */
  --corner-radius-xs: 0.125rem;
  --corner-radius-s: 0.25rem;
  --corner-radius-m: 0.375rem;
  --corner-radius-l: 0.5rem;
  --corner-radius-xl: 0.75rem;
  --corner-radius-xxl: 1rem;

  /* New Look Typography */
  --font-family-body: "Mona Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-family-code: "Monaspace Neon", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* Metalab 2.0 Size Primitives (Desktop / Mobile) */
  /* XS:    12px / 10px */
  /* Small: 14px / 12px */
  /* Base:  16px / 14px */
  /* Medium:18px / 16px */
  /* Large: 24px / 20px */
  /* XL:    32px / 24px */
  /* 2XL:   40px / 28px */
  /* 3XL:   64px / 32px */
  /* 4XL:   72px / 40px */
  --font-size-3xs: 0.625rem;
  --font-size-2xs: 0.75rem;
  --font-size-xs: 0.875rem;
  --font-size-sm: 1rem;
  --font-size-2sm: 1.2rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-2md: 1.3rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 4rem;
  --font-size-6xl: 4.5rem;
  --font-line-height-xs: 0.75rem;
  --font-line-height-sm: 1rem;
  --font-line-height-md: 1.25rem;
  --font-line-height-lg: 1.5rem;
  --font-line-height-xl: 1.75rem;
  --font-line-height-2xl: 2rem;
  --font-line-height-3xl: 2.5rem;
  --font-line-height-4xl: 3rem;

  /* New Look Icons */
  /* Themed Headings Anchor Icon */
  --icon-anchor-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_618_10452)%22%3E%3Cpath%20d%3D%22M13.2084%202.77855C11.8904%201.46053%209.75343%201.46053%208.43541%202.77855L6.31409%204.89987L5.4302%204.01599L7.55152%201.89467C9.3577%200.0884953%2012.2861%200.0884955%2014.0923%201.89467C15.8984%203.70085%2015.8984%206.62923%2014.0923%208.43541L11.9709%2010.5567L11.0871%209.67284L13.2084%207.55152C14.5264%206.2335%2014.5264%204.09657%2013.2084%202.77855Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M2.77855%2013.2084C4.09657%2014.5264%206.23351%2014.5264%207.55153%2013.2084L9.67285%2011.0871L10.5567%2011.9709L8.43541%2014.0923C6.62923%2015.8984%203.70085%2015.8984%201.89467%2014.0923C0.0884953%2012.2861%200.0884953%209.3577%201.89467%207.55152L4.01599%205.4302L4.89987%206.31409L2.77855%208.43541C1.46053%209.75343%201.46053%2011.8904%202.77855%2013.2084Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M10.5567%206.31409C10.8008%206.07001%2010.8008%205.67428%2010.5567%205.4302C10.3126%205.18613%209.91692%205.18613%209.67284%205.4302L5.4302%209.67284C5.18613%209.91692%205.18613%2010.3127%205.4302%2010.5567C5.67428%2010.8008%206.07001%2010.8008%206.31409%2010.5567L10.5567%206.31409Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_618_10452%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
  --icon-anchor-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_618_7189)%22%3E%3Cpath%20d%3D%22M13.2084%202.77855C11.8904%201.46053%209.75343%201.46053%208.43541%202.77855L6.31409%204.89987L5.4302%204.01599L7.55152%201.89467C9.3577%200.0884953%2012.2861%200.0884955%2014.0923%201.89467C15.8984%203.70085%2015.8984%206.62923%2014.0923%208.43541L11.9709%2010.5567L11.0871%209.67284L13.2084%207.55152C14.5264%206.2335%2014.5264%204.09657%2013.2084%202.77855Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M2.77855%2013.2084C4.09657%2014.5264%206.23351%2014.5264%207.55153%2013.2084L9.67285%2011.0871L10.5567%2011.9709L8.43541%2014.0923C6.62923%2015.8984%203.70085%2015.8984%201.89467%2014.0923C0.0884953%2012.2861%200.0884953%209.3577%201.89467%207.55152L4.01599%205.4302L4.89987%206.31409L2.77855%208.43541C1.46053%209.75343%201.46053%2011.8904%202.77855%2013.2084Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M10.5567%206.31409C10.8008%206.07001%2010.8008%205.67428%2010.5567%205.4302C10.3126%205.18613%209.91692%205.18613%209.67284%205.4302L5.4302%209.67284C5.18613%209.91692%205.18613%2010.3127%205.4302%2010.5567C5.67428%2010.8008%206.07001%2010.8008%206.31409%2010.5567L10.5567%206.31409Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_618_7189%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");

  /* Themed Left Arrow Icon (pixelarticons arrow-bar-left) */
  --icon-arrow-left-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M20%2011V13H4V11H20ZM8%2013V15H6V13H8ZM10%2015V17H8V15H10ZM12%2017V19H10V17H12ZM8%209V11H6V9H8ZM10%207V9H8V7H10ZM12%205V7H10V5H12Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
  --icon-arrow-left-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M20%2011V13H4V11H20ZM8%2013V15H6V13H8ZM10%2015V17H8V15H10ZM12%2017V19H10V17H12ZM8%209V11H6V9H8ZM10%207V9H8V7H10ZM12%205V7H10V5H12Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");

  /* Themed Right Arrow Icon (pixelarticons arrow-bar-right) */
  --icon-arrow-right-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%2011V13H20V11H4ZM16%2013V15H18V13H16ZM14%2015V17H16V15H14ZM12%2017V19H14V17H12ZM16%209V11H18V9H16ZM14%207V9H16V7H14ZM12%205V7H14V5H12Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
  --icon-arrow-right-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%2011V13H20V11H4ZM16%2013V15H18V13H16ZM14%2015V17H16V15H14ZM12%2017V19H14V17H12ZM16%209V11H18V9H16ZM14%207V9H16V7H14ZM12%205V7H14V5H12Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");

  /* Themed Up Arrow Icon (pixelarticons arrow-bar-up) */
  --icon-arrow-up-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M11%2020H13V4H11V20ZM13%208H15V6H13V8ZM15%2010H17V8H15V10ZM17%2012H19V10H17V12ZM9%208H11V6H9V8ZM7%2010H9V8H7V10ZM5%2012H7V10H5V12Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
  --icon-arrow-up-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M11%2020H13V4H11V20ZM13%208H15V6H13V8ZM15%2010H17V8H15V10ZM17%2012H19V10H17V12ZM9%208H11V6H9V8ZM7%2010H9V8H7V10ZM5%2012H7V10H5V12Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");

  /* Themed Clipboard Icon */
  --icon-clipboard-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.8%203.75C4.52152%203.75%204.25445%203.86062%204.05754%204.05754C3.86062%204.25445%203.75%204.52152%203.75%204.8V12.9C3.75%2013.1785%203.86062%2013.4455%204.05754%2013.6425C4.25445%2013.8394%204.52152%2013.95%204.8%2013.95H5.7C6.11421%2013.95%206.45%2014.2858%206.45%2014.7C6.45%2015.1142%206.11421%2015.45%205.7%2015.45H4.8C4.1237%2015.45%203.4751%2015.1813%202.99688%2014.7031C2.51866%2014.2249%202.25%2013.5763%202.25%2012.9V4.8C2.25%204.1237%202.51866%203.4751%202.99688%202.99688C3.4751%202.51866%204.1237%202.25%204.8%202.25H12.9C13.5763%202.25%2014.2249%202.51866%2014.7031%202.99688C15.1813%203.4751%2015.45%204.1237%2015.45%204.8V5.7C15.45%206.11421%2015.1142%206.45%2014.7%206.45C14.2858%206.45%2013.95%206.11421%2013.95%205.7V4.8C13.95%204.52152%2013.8394%204.25445%2013.6425%204.05754C13.4455%203.86062%2013.1785%203.75%2012.9%203.75H4.8ZM11.1%2010.05C10.5201%2010.05%2010.05%2010.5201%2010.05%2011.1V19.2C10.05%2019.7799%2010.5201%2020.25%2011.1%2020.25H19.2C19.7799%2020.25%2020.25%2019.7799%2020.25%2019.2V11.1C20.25%2010.5201%2019.7799%2010.05%2019.2%2010.05H11.1ZM8.55%2011.1C8.55%209.69167%209.69167%208.55%2011.1%208.55H19.2C20.6083%208.55%2021.75%209.69167%2021.75%2011.1V19.2C21.75%2020.6083%2020.6083%2021.75%2019.2%2021.75H11.1C9.69167%2021.75%208.55%2020.6083%208.55%2019.2V11.1Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
  --icon-clipboard-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.8%203.75C4.52152%203.75%204.25445%203.86062%204.05754%204.05754C3.86062%204.25445%203.75%204.52152%203.75%204.8V12.9C3.75%2013.1785%203.86062%2013.4455%204.05754%2013.6425C4.25445%2013.8394%204.52152%2013.95%204.8%2013.95H5.7C6.11421%2013.95%206.45%2014.2858%206.45%2014.7C6.45%2015.1142%206.11421%2015.45%205.7%2015.45H4.8C4.1237%2015.45%203.4751%2015.1813%202.99688%2014.7031C2.51866%2014.2249%202.25%2013.5763%202.25%2012.9V4.8C2.25%204.1237%202.51866%203.4751%202.99688%202.99688C3.4751%202.51866%204.1237%202.25%204.8%202.25H12.9C13.5763%202.25%2014.2249%202.51866%2014.7031%202.99688C15.1813%203.4751%2015.45%204.1237%2015.45%204.8V5.7C15.45%206.11421%2015.1142%206.45%2014.7%206.45C14.2858%206.45%2013.95%206.11421%2013.95%205.7V4.8C13.95%204.52152%2013.8394%204.25445%2013.6425%204.05754C13.4455%203.86062%2013.1785%203.75%2012.9%203.75H4.8ZM11.1%2010.05C10.5201%2010.05%2010.05%2010.5201%2010.05%2011.1V19.2C10.05%2019.7799%2010.5201%2020.25%2011.1%2020.25H19.2C19.7799%2020.25%2020.25%2019.7799%2020.25%2019.2V11.1C20.25%2010.5201%2019.7799%2010.05%2019.2%2010.05H11.1ZM8.55%2011.1C8.55%209.69167%209.69167%208.55%2011.1%208.55H19.2C20.6083%208.55%2021.75%209.69167%2021.75%2011.1V19.2C21.75%2020.6083%2020.6083%2021.75%2019.2%2021.75H11.1C9.69167%2021.75%208.55%2020.6083%208.55%2019.2V11.1Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");

  /* Themed Home Icon */
  --icon-home-light: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%200H5.33333V1.33333H4V2.66667H2.66667V4H1.33333V5.33333H0V6.66667H1.33333V13.3333H6V9.33333H7.33333V13.3333H12V6.66667H13.3333V5.33333H12V4H10.6667V2.66667H9.33333V1.33333H8V0ZM8%201.33333V2.66667H9.33333V4H10.6667V5.33333H12V6.66667H10.6667V12H8.66667V8H4.66667V12H2.66667V6.66667H1.33333V5.33333H2.66667V4H4V2.66667H5.33333V1.33333H8Z%22%20fill%3D%22%23050816%22%2F%3E%3C%2Fsvg%3E");
  --icon-home-dark: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%200H5.33333V1.33333H4V2.66667H2.66667V4H1.33333V5.33333H0V6.66667H1.33333V13.3333H6V9.33333H7.33333V13.3333H12V6.66667H13.3333V5.33333H12V4H10.6667V2.66667H9.33333V1.33333H8V0ZM8%201.33333V2.66667H9.33333V4H10.6667V5.33333H12V6.66667H10.6667V12H8.66667V8H4.66667V12H2.66667V6.66667H1.33333V5.33333H2.66667V4H4V2.66667H5.33333V1.33333H8Z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");

  /* Themed File Icon */
  --icon-file-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2011.5H10V10.5H5V11.5Z%22%20fill%3D%22%2362676B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%201.5C3.17157%201.5%202.5%202.17157%202.5%203V13C2.5%2013.8284%203.17157%2014.5%204%2014.5H12C12.8284%2014.5%2013.5%2013.8284%2013.5%2013V6.41421C13.5%206.01639%2013.342%205.63486%2013.0607%205.35355L9.64645%201.93934C9.36514%201.65803%208.98361%201.5%208.58579%201.5H4ZM3.5%203C3.5%202.72386%203.72386%202.5%204%202.5H8.58579C8.71839%202.5%208.84557%202.55268%208.93934%202.64645L12.3536%206.06066C12.4473%206.15443%2012.5%206.28161%2012.5%206.41421V13C12.5%2013.2761%2012.2761%2013.5%2012%2013.5H4C3.72386%2013.5%203.5%2013.2761%203.5%2013V3Z%22%20fill%3D%22%2362676B%22%2F%3E%3C%2Fsvg%3E");
  --icon-file-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2011.5H10V10.5H5V11.5Z%22%20fill%3D%22%23949A9E%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%201.5C3.17157%201.5%202.5%202.17157%202.5%203V13C2.5%2013.8284%203.17157%2014.5%204%2014.5H12C12.8284%2014.5%2013.5%2013.8284%2013.5%2013V6.41421C13.5%206.01639%2013.342%205.63486%2013.0607%205.35355L9.64645%201.93934C9.36514%201.65803%208.98361%201.5%208.58579%201.5H4ZM3.5%203C3.5%202.72386%203.72386%202.5%204%202.5H8.58579C8.71839%202.5%208.84557%202.55268%208.93934%202.64645L12.3536%206.06066C12.4473%206.15443%2012.5%206.28161%2012.5%206.41421V13C12.5%2013.2761%2012.2761%2013.5%2012%2013.5H4C3.72386%2013.5%203.5%2013.2761%203.5%2013V3Z%22%20fill%3D%22%23949A9E%22%2F%3E%3C%2Fsvg%3E");

  /* Themed Menu Icon */
  --icon-menu-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%206C3.55228%206%204%205.55228%204%205C4%204.44772%203.55228%204%203%204C2.44772%204%202%204.44772%202%205C2%205.55228%202.44772%206%203%206Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M22%205.75H6V4.25H22V5.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M22%2012.75H6V11.25H22V12.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M16%2019.75H6V18.25H16V19.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M4%2012C4%2012.5523%203.55228%2013%203%2013C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011C3.55228%2011%204%2011.4477%204%2012Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M3%2020C3.55228%2020%204%2019.5523%204%2019C4%2018.4477%203.55228%2018%203%2018C2.44772%2018%202%2018.4477%202%2019C2%2019.5523%202.44772%2020%203%2020Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
  --icon-menu-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%206C3.55228%206%204%205.55228%204%205C4%204.44772%203.55228%204%203%204C2.44772%204%202%204.44772%202%205C2%205.55228%202.44772%206%203%206Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M22%205.75H6V4.25H22V5.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M22%2012.75H6V11.25H22V12.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M16%2019.75H6V18.25H16V19.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M4%2012C4%2012.5523%203.55228%2013%203%2013C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011C3.55228%2011%204%2011.4477%204%2012Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M3%2020C3.55228%2020%204%2019.5523%204%2019C4%2018.4477%203.55228%2018%203%2018C2.44772%2018%202%2018.4477%202%2019C2%2019.5523%202.44772%2020%203%2020Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");

  /* New Look Responsive Mobile First */
  /* Spacing — Metalab 2.0 (mobile) */
  /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 16/12, xl: 24/16, xxl: 32/20, avatar: 48/40 */
  --spacing-xs: 0.125rem;
  --spacing-s: 0.25rem;
  --spacing-default: 0.375rem;
  --spacing-medium: 0.5rem;
  --spacing-large: 0.75rem;
  --spacing-xl: 1rem;
  --spacing-xxl: 1.25rem;
  --spacing-avatar: 2.5rem;

  /* Corner Radius — Metalab 2.0 (mobile) */
  --radius-xs: 0.0625rem;
  --radius-s: 0.1875rem;
  --radius-m: var(--corner-radius-s);
  --radius-l: var(--corner-radius-m);
  --radius-xl: 0.625rem;
  --radius-xxl: var(--corner-radius-xl);

  --leftbar-paddings-leftbar-padding-sm: var(--spacing-size-sm);
  --leftbar-paddings-leftbar-padding-md: var(--spacing-size-md);
  --leftbar-paddings-leftbar-padding-0: var(--spacing-size-size-0);
  --leftbar-paddings-leftbar-padding-lg: var(--spacing-size-lg);
  --padding-padding-lg: var(--spacing-size-md);
  --padding-padding-sm: var(--spacing-size-xs);
  --padding-padding-2sm: var(--spacing-size-2md);
  --padding-padding-xs: var(--spacing-size-xs);
  --padding-padding-2xs: var(--spacing-size-2xs);
  --padding-padding-3xs: var(--spacing-size-3xs);
  --padding-padding-xl: var(--spacing-size-xl);
  --leftbar-paddings-leftbar-padding-4xs: var(--spacing-size-4xs);
  --leftbar-paddings-leftbar-padding-xs: var(--spacing-size-xs);
  --leftbar-paddings-leftbar-padding-2xs: var(--spacing-size-2xs);
  --leftbar-paddings-leftbar-padding-3xs: var(--spacing-size-3xs);
  --padding-padding-md: var(--spacing-size-sm);
  --main-margin: var(--spacing-size-sm);
  --main-max-width-leftbar: 0rem;
  --main-content-width: 54rem;
  --icons-24: 1.5rem;
  --icons-20: 1.25rem;
  --icons-16: 1rem;
  --icons-12: 0.75rem;

  /* Typography */
  --typography-font-size-3xs: var(--font-size-3xs);
  --typography-font-size-2xs: var(--font-size-3xs);
  --typography-font-size-xs: var(--font-size-2xs);
  --typography-font-size-sm: var(--font-size-xs);
  --typography-font-size-md: var(--font-size-sm);
  --typography-font-size-2md: var(--font-size-2sm);
  --typography-font-size-lg: var(--font-size-lg);
  --typography-font-size-xl: var(--font-size-xl);
  --typography-font-size-2xl: var(--font-size-2xl);
  --typography-font-size-3xl: var(--font-size-3xl);
  --typography-font-size-4xl: var(--font-size-4xl);
  --typography-font-size-5xl: var(--font-size-4xl);

  /* Heading — Metalab 2.0 (mobile) */
  --typography-font-size-h1: var(--font-size-2xl);
  --typography-font-size-h2: var(--font-size-lg);
  --typography-font-size-h3: var(--font-size-sm);
  --typography-font-size-h4: var(--font-size-xs);

  --typography-line-height-xs: var(--font-line-height-xs);
  --typography-line-height-sm: var(--font-line-height-sm);
  --typography-line-height-md: var(--font-line-height-md);
  --typography-line-height-lg: var(--font-line-height-md);
  --typography-line-height-xl: var(--font-line-height-lg);
  --typography-line-height-2xl: var(--font-line-height-lg);
  --typography-line-height-3xl: var(--font-line-height-2xl);
  --typography-line-height-4xl: var(--font-line-height-3xl);
  /*----------------- New Look Variables End -----------------*/
}

/*----------------- New Look Responsive Desktop Start -----------------*/
@media (min-width: 768px) {
  :root:not(.v3):has(.boostlook),
  .boostlook {
    /* Spacing — Metalab 2.0 (desktop) */
    --spacing-xs: 0.125rem;
    --spacing-s: 0.25rem;
    --spacing-default: var(--spacing-size-2xs);
    --spacing-medium: var(--spacing-size-xs);
    --spacing-large: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-xxl: 2rem;
    --spacing-avatar: var(--spacing-size-3xl);

    /* Corner Radius — Metalab 2.0 (desktop) */
    --radius-xs: var(--corner-radius-xs);
    --radius-s: var(--corner-radius-s);
    --radius-m: var(--corner-radius-m);
    --radius-l: var(--corner-radius-l);
    --radius-xl: var(--corner-radius-xl);
    --radius-xxl: var(--corner-radius-xxl);

    --leftbar-paddings-leftbar-padding-sm: var(--spacing-size-sm);
    --leftbar-paddings-leftbar-padding-md: var(--spacing-size-md);
    --leftbar-paddings-leftbar-padding-0: var(--spacing-size-size-0);
    --leftbar-paddings-leftbar-padding-lg: var(--spacing-size-lg);
    --padding-padding-lg: var(--spacing-size-lg);
    --padding-padding-sm: var(--spacing-size-sm);
    --padding-padding-xs: var(--spacing-size-xs);
    --padding-padding-2xs: var(--spacing-size-2xs);
    --padding-padding-3xs: var(--spacing-size-3xs);
    --leftbar-paddings-leftbar-padding-4xs: var(--spacing-size-4xs);
    --leftbar-paddings-leftbar-padding-xs: var(--spacing-size-xs);
    --leftbar-paddings-leftbar-padding-2xs: var(--spacing-size-2xs);
    --leftbar-paddings-leftbar-padding-3xs: var(--spacing-size-3xs);
    --padding-padding-md: var(--spacing-size-md);
    --main-margin: 0rem;
    --main-max-width-leftbar: 18.25rem;
    --icons-24: 1.5rem;
    --icons-20: 1.25rem;
    --icons-16: 1rem;
    --icons-12: 0.75rem;

    /* Typography */
    --typography-font-size-3xs: var(--font-size-3xs);
    --typography-font-size-2xs: var(--font-size-2xs);
    --typography-font-size-xs: var(--font-size-xs);
    --typography-font-size-sm: var(--font-size-sm);
    --typography-font-size-md: var(--font-size-md);
    --typography-font-size-2md: var(--font-size-2md);
    --typography-font-size-lg: var(--font-size-xl);
    --typography-font-size-xl: var(--font-size-3xl);
    --typography-font-size-2xl: var(--font-size-4xl);
    --typography-font-size-3xl: var(--font-size-5xl);
    --typography-font-size-4xl: var(--font-size-6xl);
    --typography-font-size-5xl: var(--font-size-6xl);
    --typography-line-height-xs: var(--font-line-height-xs);
    --typography-line-height-sm: var(--font-line-height-sm);
    --typography-line-height-md: var(--font-line-height-md);
    --typography-line-height-lg: var(--font-line-height-lg);
    --typography-line-height-xl: var(--font-line-height-xl);
    --typography-line-height-2xl: var(--font-line-height-2xl);
    --typography-line-height-3xl: var(--font-line-height-3xl);
    --typography-line-height-4xl: var(--font-line-height-4xl);

    /* Heading — Metalab 2.0 (desktop) */
    --typography-font-size-h1: 3rem; /* 48px — Figma Title / 2XL */
    --typography-font-size-h2: var(--font-size-xl); /* 24px — Figma Large */
    --typography-font-size-h3: var(--font-size-md); /* 18px */
    --typography-font-size-h4: var(--font-size-sm); /* 16px */
  }
}

@media (min-width: 990px) {
  /* Doc-layout widths, read by ancestors outside .boostlook, so they stay on
     :root. Gated :not(.v3) so they don't land on a v3 site page. */
  :root:not(.v3):has(.boostlook) {
    --main-max-width-leftbar: 21.25rem;
    --main-margin: 8.625rem;
  }
}

/*----------------- New Look Responsive Desktop End -----------------*/

/*----------------- Root Variables - End -----------------*/

/*----------------- HTML Variables - Start -----------------*/

/**
 * HTML Theme Variables
 * These variables are applied to the HTML element and control the active theme.
 * The framework supports two themes:
 * 1. Light Theme (default)
 * 2. Dark Theme (activated by html.dark class)
 */

/* Light Theme (Default) Configuration.
   Defined on the .boostlook scope (not the page root) so a component island on
   a v3 site page does not push these theme vars onto the host :root. The
   :root:not(.v3) branch keeps them page-level for full-page docs. */
:root:not(.v3):has(.boostlook),
.boostlook {
  color-scheme: light;
  /*----------------- New Look Variables Start -----------------*/
  --icon-anchor: var(--icon-anchor-light);
  --icon-arrow-left: var(--icon-arrow-left-light);
  --icon-arrow-right: var(--icon-arrow-right-light);
  --icon-arrow-up: var(--icon-arrow-up-light);
  --icon-clipboard: var(--icon-clipboard-light);
  --icon-home: var(--icon-home-light);
  --icon-file: var(--icon-file-light);
  --icon-menu: var(--icon-menu-light);

  --text-buttons-button-label-primary-default: var(--colors-primary-0);
  --text-buttons-button-label-secondary-default: var(--colors-primary-900);
  --text-buttons-button-label-inactive: var(--colors-primary-500);

  --text-main-text-primary: var(--colors-primary-900);
  --text-main-text-link-blue-secondary: var(--colors-secondary-500);
  --text-main-text-link-blue-tetriary: var(--colors-secondary-400);
  --text-main-text-body-secondary: var(--colors-primary-600);
  --text-main-text-body-quaternary: var(--colors-primary-400);
  --text-main-text-body-tetriary: var(--colors-primary-500);
  --text-main-text-body-primary: var(--colors-primary-600);
  --text-main-text-link-blue: var(--colors-secondary-600);

  --text-states-text-warning-tetriary: var(--colors-warning-600);
  --text-states-text-warning-secondary: var(--colors-warning-500);
  --text-states-text-positive-secondary: var(--colors-positive-500);
  --text-states-text-positive-tetriary: var(--colors-positive-600);
  --text-states-text-negative-secondary: var(--colors-negative-500);
  --text-states-text-negative-tetriary: var(--colors-negative-600);
  --text-states-text-warning: var(--colors-warning-400);
  --text-states-text-positive: var(--colors-positive-400);
  --text-states-text-negative: var(--colors-negative-400);
  --text-states-text-additional: var(--colors-secondary-400);
  --text-states-text-additional-secondary: var(--colors-secondary-500);
  --text-states-text-additional-tetriary: var(--colors-secondary-600);

  --text-code-keyword: var(--colors-syntax-strong-blue);
  --text-code-text: #050816;
  --text-code-literal: var(--colors-syntax-strong-green);
  --text-code-comment: var(--colors-syntax-strong-yellow);
  --text-code-preprocessor: var(--colors-syntax-strong-pink);
  --text-code-attribute: var(--colors-syntax-strong-grey);

  --surface-background-states-surface-error-weak: var(--colors-error-weak);
  --text-states-text-error-strong: var(--colors-error-strong);
  --text-states-text-error-mid: var(--colors-error-mid);

  --surface-accent-teal-weak: var(--colors-accent-weak-teal);
  --surface-accent-yellow-weak: var(--colors-accent-weak-yellow);
  --surface-accent-green-weak: var(--colors-accent-weak-green);
  --surface-accent-teal-strong: var(--colors-accent-strong-teal);
  --surface-accent-yellow-strong: var(--colors-accent-strong-yellow);
  --surface-accent-green-strong: var(--colors-accent-strong-green);

  --surface-button-button-bg-secondary-ta-default: var(--colors-brand-orange-500);
  --surface-button-button-bg-primary-default: var(--colors-primary-100);
  --surface-button-button-bg-primary-pressed: var(--colors-primary-100);
  --surface-button-button-bg-primary-inactive: var(--colors-primary-200);
  --surface-button-button-bg-secondary-cta-hover: var(--colors-brand-orange-500);
  --surface-button-button-bg-primary-hover: var(--colors-primary-150);
  --surface-button-button-bg-secondary-cta-pressed: var(--colors-brand-orange-400);
  --surface-button-button-bg-secondary-cta-inactive: var(--colors-primary-200);

  --surface-page: #F7FDFE;
  --surface-background-main-base-primary: var(--surface-page);
  --pagination-bg: #fff;
  --table-bg: #fff;
  --table-header-bg: #F7F7F8;
  --table-stroke: #0508161A;
  background-color: var(--surface-page);
  --surface-background-main-surface-primary: var(--colors-primary-50);
  --surface-background-main-surface-secondary: var(--colors-primary-100);
  --surface-background-main-surface-tetriary: var(--colors-primary-150);
  --surface-background-main-surface-blue-primary: var(--colors-secondary-0);
  --surface-background-main-surface-blue-secondary: var(--colors-secondary-50);
  --surface-background-main-surface-blue-tetriary: var(--colors-secondary-100);
  --surface-background-main-surface-blue-quaternary: var(--colors-secondary-200);
  --surface-background-main-surface-transparent: var(--colors-overlay-overlay-white-64);
  --surface-background-main-surface-transparent-inverse: var(--colors-overlay-overlay-black-40);
  --surface-background-main-surface-transparent-secondary: var(--colors-overlay-overlay-white-88);

  --surface-background-states-surface-warning-primary: var(--colors-warning-0);
  --surface-background-states-surface-warning-secondary: var(--colors-warning-100);
  --surface-background-states-surface-warning-tetriary: var(--colors-warning-200);
  --surface-background-states-surface-warning-quaternary: var(--colors-warning-300);
  --surface-background-states-surface-positive-primary: var(--colors-positive-50);
  --surface-background-states-surface-positive-secondary: var(--colors-positive-100);
  --surface-background-states-surface-positive-tetriary: var(--colors-positive-200);
  --surface-background-states-surface-positive-quaternary: var(--colors-positive-300);
  --surface-background-states-surface-negative-primary: var(--colors-negative-50);
  --surface-background-states-surface-negative-secondary: var(--colors-negative-100);
  --surface-background-states-surface-negative-tetriary: var(--colors-negative-200);
  --surface-background-states-surface-negative-quaternary: var(--colors-negative-300);
  --surface-background-states-surface-additional-secondary: var(--colors-secondary-100);
  --surface-background-states-surface-additional-tetriary: var(--colors-secondary-200);
  --surface-background-states-surface-additional-quaternary: var(--colors-secondary-300);

  --surface-icons-icon-primary: var(--colors-primary-900);
  --surface-icons-icon-button-primary: var(--colors-primary-0);
  --surface-icons-icon-button-secondary: var(--colors-primary-900);
  --surface-icons-icon-button-inactive: var(--colors-primary-500);
  --surface-icons-icon-secondary: var(--colors-primary-500);
  --surface-icons-icon-quaternary: var(--colors-primary-200);
  --surface-icons-icon-cta: var(--colors-brand-orange-500);
  --surface-icons-icon-hover: var(--colors-brand-orange-400);
  --surface-icons-icon-tetriary: var(--colors-primary-400);
  --surface-icons-icon-warning: var(--colors-warning-600);
  --surface-icons-icon-positive: var(--colors-positive-600);
  --surface-icons-icon-negative: var(--colors-negative-600);
  --surface-icons-icon-brand-orange: var(--colors-brand-orange-600);
  --surface-icons-icon-blue: var(--colors-secondary-600);
  --surface-icons-icon-blue-light: var(--colors-secondary-200);

  --border-border-primary: rgba(5, 8, 22, 0.1); /* Figma 2.0 standard 1px border (light) */
  --border-border-secondary: var(--colors-primary-150);
  --border-border-tetriary: var(--colors-primary-300);
  --border-border-quaternary: var(--colors-primary-600);
  --border-border-active: var(--colors-primary-900);
  --border-border-brand-orange: var(--colors-brand-orange-200);
  --border-border-warning: var(--colors-warning-200);
  --border-border-positive: var(--colors-positive-200);
  --border-border-negative: var(--colors-negative-200);
  --border-border-blue: var(--colors-secondary-200);
  --border-border-blue-primary: var(--colors-secondary-100);
  --border-border-blue-hover: var(--colors-secondary-400);

  --surface-weak: var(--colors-primary-0);
  --stroke-strong: rgba(5 8 22 / 0.25);
  --stroke-mid: rgba(5 8 22 / 0.17);
  --stroke-weak: rgba(5 8 22 / 0.1); /* Figma 2.0 standard 1px stroke (light) */

  /*----------------- New Look Variables End -----------------*/
}

/* Dark Theme Configuration. Scoped like the light theme above so dark theme
   vars land on the .boostlook subtree, not the host :root, on v3 site pages. */
html.dark:not(.v3):has(.boostlook),
html.dark .boostlook {
  color-scheme: dark;
  /*----------------- New Look Variables Dark Mode Start -----------------*/
  --icon-anchor: var(--icon-anchor-dark);
  --icon-arrow-left: var(--icon-arrow-left-dark);
  --icon-arrow-right: var(--icon-arrow-right-dark);
  --icon-arrow-up: var(--icon-arrow-up-dark);
  --icon-clipboard: var(--icon-clipboard-dark);
  --icon-home: var(--icon-home-dark);
  --icon-file: var(--icon-file-dark);
  --icon-menu: var(--icon-menu-dark);

  --text-buttons-button-label-primary-default: var(--colors-primary-0);
  --text-buttons-button-label-secondary-default: var(--colors-primary-950);
  --text-buttons-button-label-inactive: var(--colors-primary-500);

  --text-main-text-primary: var(--colors-primary-0);
  --text-main-text-link-blue-secondary: #6DCDF7;
  --text-main-text-link-blue-tetriary: var(--colors-secondary-600);
  --text-main-text-link-blue: var(--colors-secondary-400);
  --text-main-text-body-secondary: var(--colors-primary-200);
  --text-main-text-body-tetriary: var(--colors-primary-400);
  --text-main-text-body-quaternary: var(--colors-primary-600);
  --text-main-text-body-primary: var(--colors-primary-50);

  --text-states-text-warning-tetriary: var(--colors-warning-400);
  --text-states-text-warning-secondary: var(--colors-warning-500);
  --text-states-text-warning: var(--colors-warning-600);
  --text-states-text-positive-secondary: var(--colors-positive-500);
  --text-states-text-positive-tetriary: var(--colors-positive-400);
  --text-states-text-positive: var(--colors-positive-600);
  --text-states-text-negative-secondary: var(--colors-negative-500);
  --text-states-text-negative-tetriary: var(--colors-negative-400);
  --text-states-text-negative: var(--colors-negative-600);
  --text-states-text-additional: var(--colors-secondary-600);
  --text-states-text-additional-secondary: var(--colors-secondary-500);
  --text-states-text-additional-tetriary: var(--colors-secondary-400);

  --text-code-keyword: var(--colors-syntax-weak-blue);
  --text-code-text: #FFFFFF;
  --text-code-literal: var(--colors-syntax-weak-green);
  --text-code-comment: var(--colors-syntax-weak-yellow);
  --text-code-preprocessor: var(--colors-syntax-weak-pink);
  --text-code-attribute: var(--colors-syntax-weak-grey);

  --surface-background-states-surface-error-weak: var(--colors-error-strong);
  --text-states-text-error-strong: var(--colors-error-mid);
  --text-states-text-error-mid: var(--colors-error-mid);

  --surface-accent-teal-weak: var(--colors-primary-700);
  --surface-accent-yellow-weak: var(--colors-primary-700);
  --surface-accent-green-weak: var(--colors-primary-700);
  --surface-accent-teal-strong: var(--colors-primary-600);
  --surface-accent-yellow-strong: var(--colors-primary-600);
  --surface-accent-green-strong: var(--colors-primary-600);

  --surface-button-button-bg-secondary-ta-default: var(--colors-brand-orange-500);
  --surface-button-button-bg-primary-default: var(--colors-primary-600);
  --surface-button-button-bg-primary-pressed: var(--colors-primary-600);
  --surface-button-button-bg-primary-inactive: var(--colors-primary-800);
  --surface-button-button-bg-secondary-cta-hover: var(--colors-brand-orange-400);
  --surface-button-button-bg-primary-hover: var(--colors-primary-800);
  --surface-button-button-bg-secondary-cta-pressed: var(--colors-brand-orange-500);
  --surface-button-button-bg-secondary-cta-inactive: var(--colors-primary-800);

  --surface-page: var(--colors-primary-950);
  --surface-background-main-base-primary: var(--surface-page);
  --pagination-bg: var(--colors-primary-850);
  --table-bg: var(--colors-primary-850);
  --table-header-bg: #2F313D;
  --table-stroke: #F7F7F81A;
  background-color: var(--surface-page);
  --surface-background-main-surface-primary: var(--colors-primary-850);
  --surface-background-main-surface-secondary: var(--colors-primary-800);
  --surface-background-main-surface-tetriary: var(--colors-primary-700);
  --surface-background-main-surface-blue-primary: var(--colors-secondary-900);
  --surface-background-main-surface-blue-secondary: var(--colors-secondary-900);
  --surface-background-main-surface-blue-tetriary: var(--colors-secondary-850);
  --surface-background-main-surface-blue-quaternary: var(--colors-secondary-800);
  --surface-background-main-surface-transparent: var(--colors-overlay-overlay-black-64);
  --surface-background-main-surface-transparent-inverse: var(--colors-overlay-overlay-white-40);
  --surface-background-main-surface-transparent-secondary: var(--colors-overlay-overlay-black-88);

  --surface-background-states-surface-warning-primary: var(--colors-warning-950);
  --surface-background-states-surface-warning-secondary: var(--colors-warning-950);
  --surface-background-states-surface-warning-tetriary: var(--colors-warning-800);
  --surface-background-states-surface-warning-quaternary: var(--colors-warning-700);
  --surface-background-states-surface-positive-primary: var(--colors-positive-950);
  --surface-background-states-surface-positive-secondary: var(--colors-positive-950);
  --surface-background-states-surface-positive-tetriary: var(--colors-positive-800);
  --surface-background-states-surface-positive-quaternary: var(--colors-positive-700);
  --surface-background-states-surface-negative-primary: var(--colors-negative-950);
  --surface-background-states-surface-negative-secondary: var(--colors-negative-950);
  --surface-background-states-surface-negative-tetriary: var(--colors-negative-800);
  --surface-background-states-surface-negative-quaternary: var(--colors-negative-700);
  --surface-background-states-surface-additional-secondary: var(--colors-secondary-950);
  --surface-background-states-surface-additional-tetriary: var(--colors-secondary-800);
  --surface-background-states-surface-additional-quaternary: var(--colors-secondary-700);

  --surface-icons-icon-primary: var(--colors-primary-0);
  --surface-icons-icon-button-primary: var(--colors-primary-0);
  --surface-icons-icon-button-secondary: var(--colors-primary-950);
  --surface-icons-icon-button-inactive: var(--colors-primary-600);
  --surface-icons-icon-secondary: var(--colors-primary-200);
  --surface-icons-icon-quaternary: var(--colors-primary-600);
  --surface-icons-icon-cta: var(--colors-brand-orange-500);
  --surface-icons-icon-hover: var(--colors-brand-orange-600);
  --surface-icons-icon-warning: var(--colors-warning-400);
  --surface-icons-icon-positive: var(--colors-positive-400);
  --surface-icons-icon-negative: var(--colors-negative-400);
  --surface-icons-icon-brand-orange: var(--colors-brand-orange-400);
  --surface-icons-icon-blue: var(--colors-secondary-400);
  --surface-icons-icon-blue-light: var(--colors-secondary-700);

  --border-border-primary: rgba(247, 247, 248, 0.1); /* Figma 2.0 standard 1px border (dark) */
  --border-border-secondary: var(--colors-primary-800);
  --border-border-tetriary: var(--colors-primary-700);
  --border-border-quaternary: var(--colors-primary-500);
  --border-border-active: var(--colors-primary-0);
  --border-border-brand-orange: var(--colors-brand-orange-900);
  --border-border-warning: var(--colors-warning-800);
  --border-border-positive: var(--colors-positive-800);
  --border-border-negative: var(--colors-negative-800);
  --border-border-blue: var(--colors-secondary-700);
  --border-border-blue-primary: var(--colors-secondary-850);
  --border-border-blue-hover: var(--colors-secondary-500);

  --surface-weak: var(--colors-primary-850);
  --stroke-strong: rgba(247 247 248 / 0.21);
  --stroke-mid: rgba(247 247 248 / 0.17);
  --stroke-weak: rgba(247 247 248 / 0.1); /* Figma 2.0 standard 1px stroke (dark) */

  /*----------------- New Look Variables Dark Mode Start -----------------*/
}

/*----------------- HTML Variables - End -----------------*/

/* Override for Antora default styles.
   Gated :not(.v3): page-level html props (root font-size, height, scroll) must
   not apply when .boostlook is only a component island on a v3 site page. Docs
   render in an iframe whose html has no .v3, so they keep this. */
html:not(.v3):has(.boostlook) {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1rem;
  height: 100%;
  scroll-behavior: smooth;
}

/*----------------- Font-Face Declarations start -----------------*/

/**
 * Typography Configuration
 * The framework uses Noto Sans family as its primary font system:
 * 1. Noto Sans Display: Main text font with variable weight support
 * 2. Monaspace Neon: Monospace font for code blocks
 *
 * Font Loading Strategy:
 * - Multiple source paths for resilient loading
 * - Variable fonts for optimal performance
 * - Font-display: block to prevent FOIT (Flash of Invisible Text)
 */

/* Noto Sans Display - Regular */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-variation-settings: "wght" 400, "wdth" 62.5;
  font-display: block;
  src: url("../font/NotoSansDisplay.ttf") format("truetype"),
    url("/static/font/notosans.woff2") format("woff2"),
    url("../../../../tools/boostlook/notosans.woff2") format("woff2"),
    url("https://cppalliance.org/fonts/NotoSansDisplay.ttf") format("truetype");
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Noto Sans Display - Italic */
@font-face {
  font-family: "Noto Sans";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-variation-settings: "wght" 400, "wdth" 62.5;
  font-display: block;
  src: url("../font/NotoSansDisplay-Italic.ttf") format("truetype"),
    url("/static/font/notosans_ext.woff2") format("woff2"),
    url("../../../../tools/boostlook/notosans_ext.woff2") format("woff2"),
    url("https://cppalliance.org/fonts/NotoSansDisplay-Italic.ttf") format("truetype");
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Mona Sans - Variable Font */
@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: block;
  src: url("../font/MonaSansVF.ttf") format("truetype");
}

/* Monaspace Neon - Regular */
@font-face {
  font-family: "Monaspace Neon";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../font/MonaspaceNeonFrozen-Regular.ttf") format("truetype"),
    url("/static/font/MonaspaceNeon-Var.woff2") format("woff2"),
    url("../../../../tools/boostlook/MonaspaceNeon-Var.woff2") format("woff2"),
    url("https://cppalliance.org/fonts/MonaspaceNeon-Var.woff2") format("woff2");
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Monaspace Xenon - Italic */
@font-face {
  font-family: "Monaspace Xenon";
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("../font/MonaspaceXenonFrozen-Italic.ttf") format("truetype"),
    url("/static/font/MonaspaceXenon-Var.woff2") format("woff2"),
    url("../../../../tools/boostlook/MonaspaceXenon-Var.woff2") format("woff2"),
    url("https://cppalliance.org/fonts/MonaspaceXenon-Var.woff2") format("woff2");
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/*----------------- Font-Face Declarations end -----------------*/

/*----------------- CSS Reset start -----------------*/

/**
 * Modern CSS Reset
 * A minimal CSS reset that:
 * 1. Uses the modern box-sizing model
 * 2. Removes default margins
 * 3. Improves text rendering
 * 4. Ensures responsive media elements
 * 5. Normalizes form elements
 * 6. Prevents text overflow issues
 * 7. Provides a proper stacking context
 * 8. Resets legacy table and adjacent element styles
 */

/* Box sizing rules */
.boostlook,
.boostlook *,
.boostlook *::before,
.boostlook *::after {
  box-sizing: border-box;
}

/* Remove default margin */
.boostlook * {
  margin: 0;
}

.boostlook {
  margin: 0;
}

/* Body defaults */
.boostlook {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  /* Improves text rendering on WebKit */
}

/* Media elements */
.boostlook img,
.boostlook picture,
.boostlook video,
.boostlook canvas,
.boostlook svg {
  display: block;
  max-width: 100%;
  /* Responsive media elements */
}

/* Form elements */
.boostlook input,
.boostlook button,
.boostlook textarea,
.boostlook select {
  font: inherit;
  /* Inherit typography */
}

/* Text elements */
.boostlook p,
.boostlook h1,
.boostlook h2,
.boostlook h3,
.boostlook h4,
.boostlook h5,
.boostlook h6 {
  overflow-wrap: break-word;
  /* Prevent text overflow */
}

/* Two forms of the same reset: the code's parent may be a descendant of the
   .boostlook element (doc/container case, e.g. div.boostlook > p > code) or the
   .boostlook element itself (leaf case, e.g. p.boostlook > code — used by the
   website-v2 site components). Covering both keeps inline code from falling
   through to the host page's global `code` color. */
.boostlook :not(pre):not([class^="L"]) > code,
.boostlook:not(pre):not([class^="L"]) > code {
  /* overrides builtin colors */
  color: var(--text-code-text, #050816);
  border: 0;
  background-color: unset;
}

/* Reset Legacy Table and Next to Table Element Styles */
.boostlook .tablecontainer,
.boostlook .tablecontainer + *,
.boostlook :not(.tablecontainer) > table.tableblock,
.boostlook :not(.tablecontainer) > table.tableblock + *,
.boostlook .doc .tablecontainer,
.boostlook .doc .tablecontainer + *,
.boostlook .doc :not(.tablecontainer) > table.tableblock,
.boostlook .doc :not(.tablecontainer) > table.tableblock + *,
.boostlook.boostlook:not(:has(.doc)) table.table,
.boostlook.boostlook:not(:has(.doc)) table.table + * {
  margin: revert;
}

.boostlook .underline:has(> code:only-child) {
  text-decoration-line: none;
}

/*----------------- CSS Reset end -----------------*/

/*----------------- Global Styles for .boostlook start -----------------*/

/**
 * Global Styles for .boostlook
 * Core styles that apply to all .boostlook containers regardless of template.
 * These styles establish:
 * 1. Base container styling
 * 2. Typography hierarchy and spacing
 * 3. Link appearances and interactions
 * 4. Code block formatting and syntax highlighting
 * 5. List and table styles
 * 6. Special block elements (quotes, admonitions, etc.)
 * 7. Pagination and navigation elements
 * 8. Layout structure and spacing
 */

/* Base Container */
.boostlook {
  font-family: var(--font-family-body, "Mona Sans") !important;
  font-variation-settings: "wght" 400, "wdth" 95;
  line-height: 120%;
  letter-spacing: -0.01em;
  color: var(--text-main-text-body-secondary, #585A64);
  background: var(--surface-background-main-base-primary, #fff);
}

/* Typography Hierarchy
 * Establishes consistent heading sizes and spacing
 * while maintaining proper visual hierarchy
 */
.boostlook h1,
.boostlook .doc h1,
.boostlook h2,
.boostlook .doc h2,
.boostlook h3,
.boostlook .doc h3,
.boostlook h4,
.boostlook .doc h4,
.boostlook h5,
.boostlook .doc h5,
.boostlook h6,
.boostlook .doc h6 {
  color: var(--text-main-text-primary, #050816);
  display: block;
  font-family: var(--font-family-body, "Mona Sans");
  line-height: 100%;
  margin-top: var(--padding-padding-lg, 1.5rem);
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-variation-settings: "wght" 500, "wdth" 87.5;
  position: relative;
}

/* Heading Sizes — Metalab 2.0 */
/* h1: Title / 2XL (48px desktop) */
.boostlook h1,
.boostlook .doc h1 {
  font-size: var(--typography-font-size-h1, 2rem);
  letter-spacing: -0.01em;
}

/* Antora pins its page title via .doc>h1.page:first-child (0,3,1), which beats
   .boostlook .doc h1 (0,2,1); restate the global h1 size at higher specificity
   (0,4,1) so the title matches across Antora + AsciiDoctor. */
.boostlook .doc > h1.page:first-child {
  font-size: var(--typography-font-size-h1, 3rem);
}

/* h2: Display/Desktop/Medium/Large */
.boostlook h2,
.boostlook .doc h2 {
  font-size: var(--typography-font-size-h2, 1.25rem);
  letter-spacing: -0.01em;
}

/* h3: Display/Desktop/Medium/M */
.boostlook h3,
.boostlook .doc h3 {
  font-size: var(--typography-font-size-h3, 1.125rem);
  letter-spacing: -0.01em;
}

/* h4: Display/Desktop/Medium/Base */
.boostlook h4,
.boostlook .doc h4 {
  font-size: var(--typography-font-size-h4, 1rem);
  letter-spacing: -0.16px;
}

/* h5 */
.boostlook h5,
.boostlook .doc h5 {
  font-size: var(--font-size-xs, 0.875rem);
  letter-spacing: -0.14px;
}

/* h6 */
.boostlook h6,
.boostlook .doc h6 {
  font-size: var(--font-size-2xs, 0.75rem);
  letter-spacing: -0.12px;
}

/* Document-specific headings adjustments */
.boostlook .doc h2:not(.discrete) {
  /* website-v2-doc styles overrides */
  margin-left: 0;
  padding-left: 0;
  border-bottom: revert;
  margin-right: revert;
  padding: revert;
}

.boostlook h2:has(+ .sectionbody > .sect2:first-child > h3),
.boostlook .doc h2:has(+ .sectionbody > .sect2:first-child > h3) {
  margin-bottom: 0;
}

.boostlook h3:has(+ .sect3 > h4:first-child),
.boostlook .doc h2:has(+ .sect3 > h4:first-child) {
  margin-bottom: 0;
}

/* Override default docs site css */
.boostlook .doc .dlist,
.boostlook .doc .exampleblock,
.boostlook .doc .hdlist,
.boostlook .doc .imageblock,
.boostlook .doc .listingblock,
.boostlook .doc .literalblock,
.boostlook .doc .olist,
.boostlook .doc .paragraph,
.boostlook .doc .partintro,
.boostlook .doc .quoteblock,
.boostlook .doc .sidebarblock,
.boostlook .doc .tabs,
.boostlook .doc .ulist,
.boostlook .doc .verseblock,
.boostlook .doc .videoblock,
.boostlook .doc details,
.boostlook .doc hr {
  margin: revert;
}

/* Intro copy — first paragraph after page title (24px per Figma) */
/* Antora: h1.page → #preamble → first paragraph */
.boostlook .doc #preamble > .sectionbody > .paragraph:first-child > p,
/* Antora: h1.page → first sect1 (no preamble) → first paragraph */
.boostlook .doc h1.page + .sect1 > .sectionbody > .paragraph:first-child > p,
/* Asciidoctor (non-Antora): first sect1 → first sect2 → first paragraph */
.boostlook:not(:has(.doc)) #content > .sect1:first-of-type > .sectionbody > .sect2:first-child > .paragraph:first-of-type > p {
  font-size: 1.5rem;
  line-height: 133%;
}

/* Scroll offset for anchor links */
.boostlook .doc h1[id],
.boostlook .doc h2[id],
.boostlook .doc h3[id],
.boostlook .doc h4[id],
.boostlook .doc h5[id],
.boostlook .doc h6[id],
.boostlook .doc :where(h1, h2, h3, h4, h5, h6):has(.anchor),
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]) {
  scroll-margin-top: 0.75rem;
}

/* Anchor positioning within headings */
.boostlook .doc h1:has(.anchor),
.boostlook .doc h2:has(.anchor),
.boostlook .doc h3:has(.anchor),
.boostlook .doc h4:has(.anchor),
.boostlook .doc h5:has(.anchor),
.boostlook .doc h6:has(.anchor),
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) {
  display: inline-block;
  /* Anchor width and spacing compensation */
  padding-right: 3rem;
}

.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href] {
  text-decoration: none;
  color: inherit;
}

/* Heading Anchors */
.boostlook .doc h1 .anchor,
.boostlook .doc h2 .anchor,
.boostlook .doc h3 .anchor,
.boostlook .doc h4 .anchor,
.boostlook .doc h5 .anchor,
.boostlook .doc h6 .anchor,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[id],
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:before {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: revert;
  width: 2rem;
  height: 2rem;
  border: 1px;
  visibility: hidden;
  opacity: 0;
  text-decoration: none;
  border-radius: var(--spacing-size-lg, 1.5rem);
  border: 1px solid var(--border-border-primary, #e4e7ea);
  background: var(--surface-background-main-base-primary, #fff);
  transform: translateY(-50%);
  transition: all 0.2s ease;
}

.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[id] {
  visibility: visible;
}
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:before {
  content: "";
}

.boostlook .doc h1 .anchor::before,
.boostlook .doc h2 .anchor::before,
.boostlook .doc h3 .anchor::before,
.boostlook .doc h4 .anchor::before,
.boostlook .doc h5 .anchor::before,
.boostlook .doc h6 .anchor::before,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:after {
  content: var(--icon-anchor);
  display: block;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  line-height: 0;
  transform: translateY(-50%);
  transition: all 0.2s ease;
}

.boostlook .doc h1:hover .anchor,
.boostlook .doc h2:hover .anchor,
.boostlook .doc h3:hover .anchor,
.boostlook .doc h4:hover .anchor,
.boostlook .doc h5:hover .anchor,
.boostlook .doc h6:hover .anchor,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]):hover a[href]:before {
  opacity: 1;
  visibility: visible;
}

.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]):hover a[href]:after {
  opacity: 0.6;
  visibility: visible;
}

.boostlook .doc h1 .anchor:hover,
.boostlook .doc h2 .anchor:hover,
.boostlook .doc h3 .anchor:hover,
.boostlook .doc h4 .anchor:hover,
.boostlook .doc h5 .anchor:hover,
.boostlook .doc h6 .anchor:hover,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]:hover) a[href]:before {
  border-color: var(--border-border-blue, #92cbe9);
}

.boostlook .doc h1 .anchor:active,
.boostlook .doc h2 .anchor:active,
.boostlook .doc h3 .anchor:active,
.boostlook .doc h4 .anchor:active,
.boostlook .doc h5 .anchor:active,
.boostlook .doc h6 .anchor:active,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:active:before {
  border-color: var(--border-border-blue, #92cbe9);
  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
}

.boostlook .doc h1 .anchor:hover::before,
.boostlook .doc h2 .anchor:hover::before,
.boostlook .doc h3 .anchor:hover::before,
.boostlook .doc h4 .anchor:hover::before,
.boostlook .doc h5 .anchor:hover::before,
.boostlook .doc h6 .anchor:hover::before {
  opacity: 1;
}

/* Mobile: always show anchor icons (no hover on touch devices) */
@media (hover: none) {
  .boostlook .doc h1 .anchor,
  .boostlook .doc h2 .anchor,
  .boostlook .doc h3 .anchor,
  .boostlook .doc h4 .anchor,
  .boostlook .doc h5 .anchor,
  .boostlook .doc h6 .anchor,
  .boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:before {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .boostlook .doc h1 .anchor::before,
  .boostlook .doc h2 .anchor::before,
  .boostlook .doc h3 .anchor::before,
  .boostlook .doc h4 .anchor::before,
  .boostlook .doc h5 .anchor::before,
  .boostlook .doc h6 .anchor::before,
  .boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:after {
    opacity: 0.6 !important;
    visibility: visible !important;
  }
}

/* Paragraph Styling — Metalab 2.0: Sans/Desktop/Regular/Base/Tight */
.boostlook p {
  padding-top: initial !important;
  padding-bottom: initial !important;
  color: var(--text-main-text-body-secondary, #585A64);
  font-size: var(--typography-font-size-sm, 1rem);
  line-height: 120%;
  letter-spacing: -0.16px;
}

/* Components margins */
.boostlook .paragraph + .paragraph {
  margin-top: var(--padding-padding-md, 1rem);
}

/* Markdown paragraphs — plain <p> siblings rendered by markdown (site
   components, READMEs) that lack Antora's .paragraph wrapper, so the rule
   above never matches them. Scoped :not(:has(.doc)) so Antora doc content
   keeps its own structure-based spacing below. */
/* The :not(...) guards are wrapped in :where() so they add no specificity:
   this bare-markdown layer is a low baseline (.boostlook + element level) that
   component rules (e.g. .boostlook.markdown-content ul) can override cleanly. */
.boostlook:where(:not(:has(.doc))) p + p {
  margin-top: var(--padding-padding-md, 1rem);
}

/* Markdown lists — bare <ul>/<ol> from markdown (site components, READMEs)
   that lack Antora's .ulist/.olist wrappers. Tailwind's preflight strips the
   markers, indent and margins on the site, and boostlook's Antora list rules
   never match these, so restore them here. Scoped :where(:not(:has(.doc))) and
   :where(:not([class])) so only bare markdown lists are touched, never Antora
   or classed nav/tab lists, and with no added specificity. */
.boostlook:where(:not(:has(.doc))) :is(ul, ol):where(:not([class])) {
  margin: var(--padding-padding-md, 1rem) 0;
  padding-left: var(--spacing-size-lg, 1.5rem);
}
.boostlook:where(:not(:has(.doc))) ul:where(:not([class])) {
  list-style: disc;
}
.boostlook:where(:not(:has(.doc))) ol:where(:not([class])) {
  list-style: decimal;
}
.boostlook:where(:not(:has(.doc))) :is(ul, ol):where(:not([class])) li + li {
  margin-top: var(--padding-padding-3xs, 0.25rem);
}
.boostlook:where(:not(:has(.doc))) li > :is(ul, ol):where(:not([class])) {
  margin: var(--padding-padding-3xs, 0.25rem) 0 0;
}

.boostlook:not(:has(.doc)) .section > p + p,
.boostlook:not(:has(.doc)) .chapter > p + p,
.boostlook div.blockquote blockquote p + p,
.boostlook#libraryReadMe > p:not(:first-child) + p,
  /* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > p + p,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > p + p,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > p + p {
  margin-top: var(--padding-padding-3xs, 0.25rem);
}
.boostlook #content .admonitionblock + .tabs,
.boostlook .paragraph + .tabs {
  margin-top: var(--spacing-size-2md, 1.3rem);
}

.boostlook #content .paragraph + .admonitionblock,
.boostlook #content .tabs + .paragraph,
.boostlook #content .colist + .paragraph,
.boostlook #content .admonitionblock + .admonitionblock,
.boostlook #content .olist + .admonitionblock,
.boostlook #content .olist + .paragraph,
.boostlook:not(:has(.doc)) div.orderedlist + p,
.boostlook:not(:has(.doc)) p + div.orderedlist,
.boostlook:not(:has(.doc)) .itemizedlist + p,
.boostlook:not(:has(.doc)) div.itemizedlist:has(+ a[id^="bind"]) + a + *,
.boostlook:not(:has(.doc)) div.table:has(+ .table-break) + .table-break + *,
.boostlook #content .paragraph + .olist,
.boostlook #content .paragraph + .listingblock,
.boostlook #content .paragraph + .literalblock,
.boostlook #content .paragraph + .ulist,
.boostlook #content .paragraph + .dlist,
.boostlook #content .paragraph + .imageblock,
.boostlook #content .paragraph + .exampleblock,
.boostlook #content .paragraph + .quoteblock,
.boostlook #content .ulist + .admonitionblock,
.boostlook #content .ulist + .paragraph,
.boostlook #content .colist + .admonitionblock,
.boostlook #content .admonitionblock + .paragraph,
.boostlook #content .paragraph + table.tableblock,
.boostlook.boostlook:not(:has(.doc)) p + table.table,
.boostlook.boostlook:not(:has(.doc)) p + .informaltable,
.boostlook #content table.tableblock + .paragraph,
.boostlook #content table.tableblock + .admonitionblock,
.boostlook:not(:has(.doc)) .informaltable + p,
.boostlook #content .imageblock + .paragraph,
.boostlook:not(:has(.doc)) .inlinemediaobject + p,
.boostlook:not(:has(.doc)) p:has(> .inlinemediaobject:only-child) + p,
.boostlook:not(:has(.doc)) p + pre,
.boostlook:not(:has(.doc)) p + .listingblock,
.boostlook:not(:has(.doc)) .section p + ul,
.boostlook:not(:has(.doc)) .section p + dl,
.boostlook#libraryReadMe > p + pre,
.boostlook#libraryReadMe > p + ul,
.boostlook#libraryReadMe > p + table,
.boostlook#libraryReadMe > table + p,
.boostlook#libraryReadMe > ul + p,
.boostlook#libraryReadMe .literalblock + .paragraph,
  /* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) + p,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) + p,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) + p {
  margin-top: var(--padding-padding-xs, 0.75rem) !important;
}

.boostlook #content .dlist + .paragraph,
.boostlook #content .dlist + .listingblock,
.boostlook:not(:has(.doc)) div.blockquote + p,
.boostlook:not(:has(.doc)) .variablelist + p {
  margin-top: var(--padding-padding-2xs, 0.5rem);
}

.boostlook h2 + .tabs,
.boostlook .doc h2 + .tabs,
.boostlook h3 + .tabs,
.boostlook .doc h3 + .tabs,
.boostlook h4 + .tabs,
.boostlook .doc h4 + .tabs,
.boostlook h5 + .tabs,
.boostlook .doc h5 + .tabs,
.boostlook h5 + .tabs,
.boostlook .doc h6 + .tabs {
  margin-top: var(--padding-padding-sm, 0.75rem);
}

.boostlook #content .sectionbody .olist:first-child,
.boostlook:not(:has(.doc)) .section div.orderedlist:first-child {
  margin-top: var(--padding-padding-3xs, 0.25rem);
}

.boostlook .olist .imageblock .content,
.boostlook .ulist .imageblock .content {
  margin-bottom: var(--padding-padding-xs, 0.75rem);
}

/* Special paragraph cases */
.boostlook table p,
.boostlook ul p {
  margin: 0;
}

/* Link Styling */
.boostlook a,
.boostlook .doc a {
  color: var(--text-main-text-link-blue, #026a9f);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Content body links: underline per Figma. Scoped to content block classes so
   it covers BOTH Antora (.doc) and standalone AsciiDoctor (#content, no .doc);
   nav/TOC links (.nav-list / #toc .sectlevel*) are unaffected. Color comes from
   the base .boostlook a rule (--text-main-text-link-blue = #0077B8). */
.boostlook .paragraph a:not(.anchor),
.boostlook .ulist a:not(.anchor),
.boostlook .olist a:not(.anchor),
.boostlook .dlist a:not(.anchor) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Link Hover States */
.boostlook a:hover,
.boostlook .doc a:hover {
  color: var(--text-states-text-warning, #FF9442);
  cursor: pointer;
}

/* Emphasis within code */
.boostlook code em,
.boostlook code i,
.boostlook pre em,
.boostlook pre i {
  font-family: "Monaspace Xenon", monospace;
  font-size: inherit;
  font-style: italic;
}

.boostlook em {
  font-family: inherit;
  font-size: inherit;
  font-style: italic;
}

/* Text Emphasis */
.boostlook b,
.boostlook strong {
  font-variation-settings: "wght" 600, "wdth" 87.5;
  text-shadow: none;
}

/* Comments within code (inline and blocks) */
.boostlook code span.c,
.boostlook code span.ch,
.boostlook code span.cm,
.boostlook code span.cp,
.boostlook code span.cpf,
.boostlook code span.c1,
.boostlook code span.cs,
.boostlook code span.comment {
  font-family: "Monaspace Xenon", monospace;
  font-style: italic;
}

/* Code Block Styling */
.boostlook .doc .listingblock,
.boostlook .listingblock {
  position: relative;
}

.boostlook .doc .listingblock code,
.boostlook .listingblock code {
  display: initial;
}

.boostlook .hljs {
  background: transparent;
}

.boostlook code {
  font-family: var(--font-family-code, "Monaspace Neon"), monospace;
}

.boostlook table thead code {
  background: inherit;
}

.boostlook pre code,
.boostlook pre code.hljs,
.boostlook .doc .content pre code,
.boostlook .doc pre.highlight code {
  font-size: var(--typography-font-size-2xs, 0.75rem);
  font-feature-settings: "calt" 1, "liga" 0;
  line-height: 130%;
  letter-spacing: var(--spacing-size-size-0, 0rem);
  color: var(--text-main-text-primary, #18191b);
  padding: revert;
  border: none;
}

.boostlook pre code .conum[data-value]::after,
.boostlook pre code.hljs .conum[data-value]::after,
.boostlook .doc .content pre code .conum[data-value]::after,
.boostlook .doc pre.highlight code .conum[data-value]::after {
  content: "("attr(data-value)")";
}

.boostlook pre:not(:has(> code)),
.boostlook pre:not(:has(> code)):has(p, span) {
  font-size: var(--typography-font-size-xs, 0.875rem);
  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

.boostlook pre,
.boostlook pre.rouge,
.boostlook .doc .content pre,
.boostlook .doc pre.highlight,
.boostlook .doc .listingblock pre:not(.highlight),
.boostlook .doc .literalblock pre
.boostlook .literalblock pre,
.boostlook .listingblock > .content > pre,
.boostlook .listingblock > .content > pre:not(.highlight),
.boostlook .literalblock > .content > pre:not(.highlight),
.boostlook .exampleblock > .content,
.boostlook .sidebarblock {
  padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem);
  background: var(--atom-one-light-bg, #fafafa) !important;
  border-radius: 0.5rem; /* 8px — Figma 2.0 code block (#116-5) */
  border: 1px solid var(--border-border-primary, #e4e7ea);
  box-shadow: none;
  line-height: 130%;
}

.boostlook .sidebarblock {
  margin-top: 20px;
  border: 1px solid var(--border-border-secondary, #d5d7d9);
}

/* Dark theme code block background */
html.dark .boostlook pre,
html.dark .boostlook pre.rouge,
html.dark .boostlook .doc .content pre,
html.dark .boostlook .doc pre.highlight,
html.dark .boostlook .doc .listingblock pre:not(.highlight),
html.dark .boostlook .doc .literalblock pre,
html.dark .boostlook#libraryReadMe > pre:not(:last-child),
html.dark .boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre, td pre)),
html.dark .boostlook .doc .literalblock pre,
html.dark .boostlook .literalblock pre,
html.dark .boostlook .literalblock > .content > pre:not(.highlight),
html.dark .boostlook .listingblock > .content > pre,
html.dark .boostlook .sidebarblock,
html.dark .boostlook .exampleblock > .content,
html.dark .boostlook .listingblock > .content > pre {
  background: var(--atom-one-dark-bg, #282c34) !important;
}

.boostlook .doc pre {
  padding: initial;
}

.boostlook .content:has(> pre),
.boostlook .content:has(> pre.highlight) {
  border-radius: 0;
  background: none;
}

.boostlook pre.programlisting,
.boostlook pre.synopsis,
.boostlook pre.literallayout,
.boostlook#libraryReadMe > pre {
  border: 1px solid var(--border-border-secondary, #d5d7d9);
}

/* Code Block Regular Title */
.boostlook .doc .listingblock .title,
.boostlook .listingblock .title {
  color: var(--text-main-text-body-primary, #2a2c30);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  font-variation-settings: "wght" 600, "wdth" 87.5;
  line-height: var(--typography-line-height-md, 1.25rem);
  letter-spacing: unset;
  padding-bottom: var(--padding-padding-2xs, 0.5rem);
}

.boostlook .doc .listingblock .title a,
.boostlook .listingblock .title a {
  font: inherit;
  text-decoration: none;
}

/* Code Block Title With File Name.
 * Applies only if codeblock has child with class .toolbox
 * and it`s title doesn`t includes any other elems as children
*/
/* Filename title intentionally hidden in the 2.0 toolbox design (only the copy
   button shows). Collapsed to display:none; the former flex/layout declarations
   were dead because the element never renders. */
.boostlook .doc .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)),
.boostlook .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)) {
  display: none;
}

/* Code Block Margins */
.boostlook .listingblock:has(> .content > pre),
.boostlook .listingblock:has(> .content > pre.highlight),
.boostlook:not(:has(.doc)) pre.programlisting,
.boostlook:not(:has(.doc)) pre.synopsis,
.boostlook#libraryReadMe > pre,
.boostlook#libraryReadMe .literalblock:has(pre),
.boostlook#libraryReadMe div.highlight:has(> pre) {
  margin: 0;
  border: none;
  background-color: transparent;
  padding:0;
}

/* Apply left margin only if code block not in definition block or in table */
.boostlook:not(:has(.doc)) pre.programlisting:not(:is(dd pre, td pre)),
.boostlook:not(:has(.doc)) pre.synopsis:not(:is(dd pre, td pre)),
.boostlook#libraryReadMe > pre:not(:is(dd pre, td pre)),
.boostlook#libraryReadMe .literalblock:has(pre):not(:is(dd pre, td pre)),
.boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre, td pre)) {
  background: var(--atom-one-light-bg, #fafafa);
  margin-top: var(--padding-padding-xs, 0.75rem);
}

.boostlook#libraryReadMe .literalblock:has(pre):not(:is(dd pre, td pre)) {
  margin-left: var(--spacing-size-xl);
  border: 1px solid var(--border-border-secondary, #d5d7d9);
}

@media screen and (max-width: 767px) {
  .boostlook#libraryReadMe .literalblock:has(pre):not(:is(dd pre, td pre)) {
    margin-left: 0;
  }
}
.boostlook .olist.arabic > ol > li .listingblock:has(> .content > pre):not(:is(dd pre, td pre)),
.boostlook:not(:has(.doc)) .orderedlist > ol > li .listingblock:has(> .content > pre.highlight):not(:is(dd pre, td pre)) {
  margin-left: 0;
}

.boostlook .listingblock:has(> .content > pre):not(:is(dd pre, td pre)):has(.title) {
  border: none;
  background: none;
}

.boostlook .listingblock:has(> .content > pre):not(:last-child),
.boostlook .listingblock:has(> .content > pre.highlight):not(:last-child),
.boostlook:not(:has(.doc)) pre.programlisting:not(:last-child),
.boostlook:not(:has(.doc)) pre.synopsis:not(:last-child),
.boostlook#libraryReadMe > pre:not(:last-child) {
  margin-bottom: var(--padding-padding-xs, 0.75rem);
}

.boostlook .content:has(> pre):has(> .source-toolbox) {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
}

.boostlook .highlight pre,
.boostlook .content:has(> pre) pre.highlight,
.boostlook .literalblock > .content > pre:not(.highlight) {
  border: 1px solid var(--border-border-primary, #e4e7ea);
  border-radius: 0.5rem; /* 8px — Figma 2.0 code block (#116-5) */
}

.boostlook .content:has(> pre):has(> .source-toolbox) .source-toolbox {
  position: static;
  order: 0;
  display: flex;
  visibility: visible;
  top: unset;
  right: unset;
  color: var(--text-main-text-body-tetriary, #62676b);
  font-family: inherit;
  z-index: 1;
  padding: var(--article-article-compressing-from-12-8--, 0.5rem) var(--spacing-size-sm, 1rem);
  height: 0;
  max-height: 0;
  min-height: 0;
  padding: 0;
}

.boostlook .content:has(> pre):has(> .source-toolbox):not(:has(.source-lang)) .source-toolbox  {
  min-height: 0;
  height: 0;
  padding: 0 !important;
  margin-bottom: -1px;
}
.boostlook .content:has(> pre):has(> .source-toolbox):not(:has(.source-lang)) .source-toolbox .copy-button {
  top: 0.25rem;
}
.boostlook .content:has(> pre):has(> .source-toolbox) .source-lang {
  color: var(--text-main-text-body-quaternary, #949a9e);
  text-align: right;
  font-family: "Mona Sans";
  font-size: var(--typography-font-size-2xs, 0.75rem);
  font-style: normal;
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
  text-transform: uppercase;
  margin-left: auto;
  display: none;
}
.boostlook .content:has(> pre):has(> .source-toolbox) .source-lang::after {
  content: none;
}

/* Code Block Copy to Clipboard Icon */
.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button {
  position: absolute;
  top: 2.25rem;
  right: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
  outline: none;
  font-size: inherit;
  line-height: inherit;
  width: 2rem;
  height: 2rem;
  padding: var(--spacing-size-3xs, 0.25rem);
  border-radius: var(--spacing-size-2xs, 0.5rem);
  border: 1px solid var(--border-border-primary, #e4e7ea);
  background: var(--surface-background-main-surface-primary, #f5f6f8);
  opacity: 0;
  transition: all 0.2s ease;
}

.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button:hover {
  border: 1px solid var(--border-border-blue, #92cbe9);
}

.boostlook .content:has(> pre):has(> .source-toolbox):hover .copy-button,
.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button:focus-visible {
  opacity: 1;
}

/* Keyboard users can tab to the copy button (kept in the tab order via opacity
   rather than visibility:hidden) and get a visible focus ring. */
.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button:focus-visible {
  outline: 2px solid var(--border-border-blue, #92cbe9);
  outline-offset: 2px;
}

/* Mobile: hide copy button (clipboard API requires HTTPS) */
@media (hover: none) {
  .boostlook .content:has(> pre):has(> .source-toolbox) .copy-button {
    display: none !important;
  }
}

.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button img {
  display: none;
}

.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button::before {
  content: var(--icon-clipboard);
  width: var(--icons-24, 1.5rem);
  height: var(--icons-24, 1.5rem);
  aspect-ratio: 1/1;
}

/* Code Block Copied Toast */
.boostlook .content:has(> pre):has(> .source-toolbox) .copy-toast {
  flex: none;
  position: relative;
  display: inline-flex;
  justify-content: center;
  padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-xs, 0.75rem);
  flex-direction: column;
  align-items: center;
  margin-top: 1em;
  background: var(--surface-background-main-surface-primary, #f5f6f8);
  border-radius: var(--spacing-size-2xs, 0.5rem);
  border: 1px solid var(--border-border-secondary, #d5d7d9);
  color: var(--text-main-text-primary, #18191b);
  cursor: auto;
  opacity: 0;
  transition: opacity 0.5s ease 0.5s;
}

.boostlook .content:has(> pre):has(> .source-toolbox) .copy-toast::after {
  content: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6%2011.95L11.6569%206.2931L6%200.636243L0.343146%206.2931L6%2011.95Z%22%20fill%3D%22%23F5F6F8%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.343146%206.2931L6%200.636243L11.6569%206.2931L10.9497%207.0002L6%202.05046L1.05025%207.0002L0.343146%206.2931Z%22%20fill%3D%22%23E4E7EA%22%2F%3E%3C%2Fsvg%3E");
  position: absolute;
  top: -62%;
  width: 1em;
  height: 1em;
  border: unset;
  border-left-color: unset;
  transform: unset;
  transform-origin: unset;
  color: var(--text-main-text-primary, #18191b);
  text-align: center;
  font-size: var(--typography-font-size-sm, 1rem);
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
}

/* Code Styling */
.boostlook p code:not(:has(> code)),
.boostlook li code:not(:has(> code)),
.boostlook .doc p code:not(:has(> code)),
.boostlook .doc .colist > table code:not(:has(> code)) {
  display: inline;
  color: var(--text-code-text, #050816);
  font-size: 0.88em;
  font-style: normal;
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-md);
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

.boostlook p:not(:is(table p)) code:not(:has(> code)),
.boostlook li code:not(:has(> code)),
.boostlook .doc p:not(:is(table p)) code:not(:has(> code)),
.boostlook .doc .colist > table code:not(:has(> code)) {
  border-radius: unset;
  padding: unset;
  background: transparent !important;
}

/* Code Links */
.boostlook p:not(:is(table p)) a code,
.boostlook li:not(:is(table li)) a code,
.boostlook .doc p:not(:is(table p)) a code,
.boostlook .doc table a code,
.boostlook .doc .colist > table a code,
.boostlook code:has(> a:first-child:last-child),
.boostlook code:has(> a:only-child),
.boostlook p:not(:is(table p)) code:has(> a:first-child:last-child),
.boostlook p:not(:is(table p)) code:has(> a:only-child),
.boostlook li:not(:is(table li)) code:has(> a:first-child:last-child),
.boostlook li:not(:is(table li)) code:has(> a:only-child),
.boostlook .doc p:not(:is(table p)) code:has(> a:first-child:last-child),
.boostlook .doc p:not(:is(table p)) code:has(> a:only-child),
.boostlook .doc .colist > table code:has(> a:first-child:last-child),
.boostlook .doc .colist > table code:has(> a:only-child) {
  border-radius: unset;
  border: none;
  background: transparent !important;
  color: inherit;
}

.boostlook a:hover code {
  color: inherit;
}

.boostlook .doc table.tableblock code:hover a,
.boostlook:not(:has(.doc)) table.table code:hover a,
.boostlook .doc table.tableblock code a:focus-visible,
.boostlook:not(:has(.doc)) table.table code a:focus-visible {
  text-decoration-color: var(--border-border-blue, #92cbe9);
}

/* Syntax Highlighting — Figma 6-role palette:
 * Keyword    (#1345E8 / #38DDFF) — keywords, types, titles, built-ins, operators
 * Literal    (#289D30 / #72FE92) — strings, numbers
 * Comment    (#A3A38C / #FFF173) — comments, quotes
 * Preprocessor (#D31FA7 / #F358C0) — preprocessor directives
 * Attribute  (#9E9E9E / #A3A3A3) — attributes, named constants
 * Text       (#050816 / #FFFFFF) — default text, names, punctuation
 */

/* Keywords & types → Keyword */
.boostlook .hljs-keyword,
.boostlook .hljs-selector-tag,
.boostlook .hljs-subst,
.boostlook .hljs-type,
.boostlook pre span.k,
.boostlook pre span.kc,
.boostlook pre span.kd,
.boostlook pre span.kn,
.boostlook pre span.kp,
.boostlook pre span.kr,
.boostlook pre span.kt,
.boostlook pre span.keyword,
.boostlook pre span.property {
  color: var(--text-code-keyword, #1345E8);
}

/* Titles, sections, built-ins → Keyword */
.boostlook .hljs-title,
.boostlook .hljs-section,
.boostlook .hljs-selector-id,
.boostlook .hljs-built_in,
.boostlook pre span.nf,
.boostlook pre span.nc {
  color: var(--text-code-keyword, #1345E8);
}

/* Attributes → Attribute */
.boostlook pre span.na,
.boostlook pre span.no,
.boostlook .hljs-attr {
  color: var(--text-code-attribute, #9E9E9E);
}

/* Identifiers → Text */
.boostlook pre span.n,
.boostlook pre span.nb,
.boostlook pre span.bp,
.boostlook pre span.nd,
.boostlook pre span.ni,
.boostlook pre span.ne,
.boostlook pre span.py,
.boostlook pre span.nl,
.boostlook pre span.nn,
.boostlook pre span.nx,
.boostlook pre span.nt,
.boostlook pre span.nv,
.boostlook pre span.vc,
.boostlook pre span.vg,
.boostlook pre span.vi,
.boostlook pre span.identifier {
  color: var(--text-code-text, #050816);
}

/* Comments → Comment */
.boostlook pre span.c,
.boostlook pre span.ch,
.boostlook pre span.cm,
.boostlook pre span.cpf,
.boostlook pre span.c1,
.boostlook pre span.cs,
.boostlook pre span.sd,
.boostlook pre span.sh,
.boostlook pre span.comment,
.boostlook .hljs-comment,
.boostlook .cpp-comment,
.boostlook .hljs-quote,
.boostlook .hljs-bullet,
.boostlook .hljs-code {
  color: var(--text-code-comment, #A3A38C);
  font-family: "Monaspace Xenon", monospace;
  font-style: italic;
}

/* Preprocessor (Rouge span.cp) → Preprocessor */
.boostlook pre span.cp {
  color: var(--text-code-preprocessor, #D31FA7);
}

/* Strings → Literal */
.boostlook pre span.s,
.boostlook pre span.sa,
.boostlook pre span.sb,
.boostlook pre span.dl,
.boostlook pre span.s2,
.boostlook pre span.se,
.boostlook pre span.si,
.boostlook pre span.sx,
.boostlook pre span.sr,
.boostlook pre span.s1,
.boostlook pre span.ss,
.boostlook pre span.string,
.boostlook .hljs-doctag,
.boostlook .hljs-string,
.boostlook .hljs-addition {
  color: var(--text-code-literal, #289D30);
}

/* Numbers → Literal */
.boostlook .hljs-number,
.boostlook pre span.mi,
.boostlook pre span.mf,
.boostlook pre span.mb,
.boostlook pre span.mh,
.boostlook pre span.mo,
.boostlook pre span.il {
  color: var(--text-code-literal, #289D30);
}

/* Operators → Keyword */
.boostlook pre span.o,
.boostlook pre span.ow {
  color: var(--text-code-keyword, #1345E8);
}

/* Punctuation → Text */
.boostlook pre span.p {
  color: var(--text-code-text, #050816);
}

/* Preprocessor / meta → Preprocessor */
.boostlook .hljs-meta {
  color: var(--text-code-preprocessor, #D31FA7);
}

/* Deletion, misc → Keyword */
.boostlook .hljs-deletion,
.boostlook .hljs-selector-class,
.boostlook .hljs-template-tag {
  color: var(--text-code-keyword, #1345E8);
}

.boostlook .hljs-attribute {
  color: var(--text-code-attribute, #9E9E9E);
}

.boostlook .hljs-name,
.boostlook .hljs-tag {
  color: var(--text-code-text, #050816);
}

/* Syntax Defaults */
.boostlook .hljs-attribute,
.boostlook .hljs-doctag,
.boostlook .hljs-keyword,
.boostlook .hljs-meta .hljs-keyword,
.boostlook .hljs-name,
.boostlook .hljs-selector-tag,
.boostlook .hljs-section,
.boostlook .hljs-title {
  font-weight: inherit;
}

/* Dark mode hljs overrides — beat site.css html.dark .hljs-* selectors */
html.dark .boostlook .hljs-keyword,
html.dark .boostlook .hljs-selector-tag,
html.dark .boostlook .hljs-subst,
html.dark .boostlook .hljs-type {
  color: var(--text-code-keyword, #38DDFF);
}

html.dark .boostlook .hljs-title,
html.dark .boostlook .hljs-section,
html.dark .boostlook .hljs-selector-id,
html.dark .boostlook .hljs-built_in {
  color: var(--text-code-keyword, #38DDFF);
}

html.dark .boostlook .hljs-comment,
html.dark .boostlook .hljs-quote,
html.dark .boostlook .hljs-bullet,
html.dark .boostlook .hljs-code {
  color: var(--text-code-comment, #FFF173);
  font-style: italic;
}

html.dark .boostlook .hljs-doctag,
html.dark .boostlook .hljs-string,
html.dark .boostlook .hljs-addition {
  color: var(--text-code-literal, #72FE92);
}

html.dark .boostlook .hljs-number,
html.dark .boostlook .hljs-literal,
html.dark .boostlook .hljs-variable,
html.dark .boostlook .hljs-template-variable,
html.dark .boostlook pre span.mi,
html.dark .boostlook pre span.mf,
html.dark .boostlook pre span.mb,
html.dark .boostlook pre span.mh,
html.dark .boostlook pre span.mo,
html.dark .boostlook pre span.il {
  color: var(--text-code-literal, #72FE92);
}

html.dark .boostlook pre span.o,
html.dark .boostlook pre span.ow {
  color: var(--text-code-keyword, #38DDFF);
}

html.dark .boostlook pre span.p {
  color: var(--text-code-text, #FFFFFF);
}

html.dark .boostlook .hljs-meta {
  color: var(--text-code-preprocessor, #F358C0);
}

html.dark .boostlook .hljs-deletion,
html.dark .boostlook .hljs-selector-class,
html.dark .boostlook .hljs-template-tag {
  color: var(--text-code-keyword, #38DDFF);
}

html.dark .boostlook .hljs-attribute,
html.dark .boostlook .hljs-attr {
  color: var(--text-code-attribute, #A3A3A3);
}

html.dark .boostlook .hljs-name,
html.dark .boostlook .hljs-tag {
  color: var(--text-code-text, #FFFFFF);
}

/* Override cpp-highlight theme from site.css */
.boostlook .doc pre.highlight code.cpp-highlight,
.boostlook pre.highlight code.cpp-highlight,
.boostlook code.cpp-highlight {
  color: var(--text-main-text-body-primary, #050816);
}

.boostlook .doc pre.highlight code.cpp-highlight .cpp-keyword,
.boostlook pre.highlight code.cpp-highlight .cpp-keyword,
.boostlook code.cpp-highlight .cpp-keyword {
  color: var(--text-code-keyword, #1345E8);
}

.boostlook .doc pre.highlight code.cpp-highlight .cpp-string,
.boostlook pre.highlight code.cpp-highlight .cpp-string,
.boostlook code.cpp-highlight .cpp-string {
  color: var(--text-code-literal, #289D30);
}

.boostlook .doc pre.highlight code.cpp-highlight .cpp-preprocessor,
.boostlook pre.highlight code.cpp-highlight .cpp-preprocessor,
.boostlook code.cpp-highlight .cpp-preprocessor {
  color: var(--text-code-preprocessor, #D31FA7);
}

.boostlook .doc pre.highlight code.cpp-highlight .cpp-comment,
.boostlook pre.highlight code.cpp-highlight .cpp-comment,
.boostlook code.cpp-highlight .cpp-comment {
  color: var(--text-code-comment, #A3A38C);
  font-family: "Monaspace Xenon", monospace;
  font-style: italic;
}

.boostlook .doc pre.highlight code.cpp-highlight .cpp-attribute,
.boostlook pre.highlight code.cpp-highlight .cpp-attribute,
.boostlook code.cpp-highlight .cpp-attribute {
  color: var(--text-code-attribute, #9E9E9E);
}

/* Dark mode cpp-highlight overrides */
html.dark .boostlook .doc pre.highlight code.cpp-highlight,
html.dark .boostlook pre.highlight code.cpp-highlight,
html.dark .boostlook code.cpp-highlight {
  color: var(--text-main-text-primary, #f5f6f8);
}

html.dark .boostlook .doc pre.highlight code.cpp-highlight .cpp-keyword,
html.dark .boostlook pre.highlight code.cpp-highlight .cpp-keyword,
html.dark .boostlook code.cpp-highlight .cpp-keyword {
  color: var(--text-code-keyword, #38DDFF);
}

html.dark .boostlook .doc pre.highlight code.cpp-highlight .cpp-string,
html.dark .boostlook pre.highlight code.cpp-highlight .cpp-string,
html.dark .boostlook code.cpp-highlight .cpp-string {
  color: var(--text-code-literal, #72FE92);
}

html.dark .boostlook .doc pre.highlight code.cpp-highlight .cpp-preprocessor,
html.dark .boostlook pre.highlight code.cpp-highlight .cpp-preprocessor,
html.dark .boostlook code.cpp-highlight .cpp-preprocessor {
  color: var(--text-code-preprocessor, #F358C0);
}

html.dark .boostlook .doc pre.highlight code.cpp-highlight .cpp-comment,
html.dark .boostlook pre.highlight code.cpp-highlight .cpp-comment,
html.dark .boostlook code.cpp-highlight .cpp-comment {
  color: var(--text-code-comment, #FFF173);
  font-family: "Monaspace Xenon", monospace;
  font-style: italic;
}

html.dark .boostlook .doc pre.highlight code.cpp-highlight .cpp-attribute,
html.dark .boostlook pre.highlight code.cpp-highlight .cpp-attribute,
html.dark .boostlook code.cpp-highlight .cpp-attribute {
  color: var(--text-code-attribute, #A3A3A3);
}

/* Table Headings */
.boostlook h6:has(+ table) {
  margin-left: 1em;
}

/* Quote Blocks */
.boostlook .quoteblock,
.boostlook .doc .quoteblock,
.boostlook .verseblock,
.boostlook .doc .verseblock,
.boostlook div.blockquote {
  padding: var(--padding-padding-md, 1.125rem) var(--padding-padding-lg, 1.5rem);
  border-radius: var(--spacing-size-size-0, 0rem);
  border-left: 2px solid var(--border-border-active, #18191b);
  background: var(--surface-background-main-surface-primary, #f5f6f8);
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-sm, 1rem);
  line-height: var(--typography-line-height-lg, 1.5rem);
}

/* Add intendation */
.boostlook .sectionbody .quoteblock,
.boostlook .sectionbody .doc .quoteblock,
.boostlook .sectionbody .verseblock,
.boostlook .sectionbody .doc .verseblock,
.boostlook .sectionbody div.blockquote,
.boostlook .section .quoteblock,
.boostlook .section .doc .quoteblock,
.boostlook .section .verseblock,
.boostlook .section .doc .verseblock,
.boostlook .section div.blockquote {
  margin-left: var(--spacing-size-xl, 2rem);
}

@media screen and (max-width: 767px) {
  .boostlook .sectionbody .quoteblock,
  .boostlook .sectionbody .doc .quoteblock,
  .boostlook .sectionbody .verseblock,
  .boostlook .sectionbody .doc .verseblock,
  .boostlook .sectionbody div.blockquote,
  .boostlook .section .quoteblock,
  .boostlook .section .doc .quoteblock,
  .boostlook .section .verseblock,
  .boostlook .section .doc .verseblock,
  .boostlook .section div.blockquote {
    margin-left: 0;
  }
}

.boostlook .quoteblock:not(:first-child),
.boostlook .doc .quoteblock:not(:first-child),
.boostlook .verseblock:not(:first-child),
.boostlook .doc .verseblock:not(:first-child),
.boostlook div.blockquote:not(:first-child) {
  margin-top: var(--padding-padding-2xs, 0.5rem);
}

.boostlook .quoteblock blockquote,
.boostlook .doc .quoteblock blockquote,
.boostlook .verseblock blockquote,
.boostlook .doc .verseblock blockquote,
.boostlook div.blockquote blockquote {
  margin: 0;
  font: inherit;
  color: inherit;
}

.boostlook .quoteblock blockquote .paragraph,
.boostlook .doc .quoteblock blockquote .paragraph,
.boostlook .verseblock blockquote .paragraph,
.boostlook .doc .verseblock blockquote .paragraph,
.boostlook div.blockquote blockquote p {
  font: inherit;
}

.boostlook .quoteblock blockquote p,
.boostlook .doc .quoteblock blockquote p,
.boostlook .verseblock blockquote p,
.boostlook .doc .verseblock blockquote p {
  margin: 0;
  font: inherit;
  color: inherit;
}

.boostlook .quoteblock blockquote:before {
  content: none;
}

/* Pagination */
.boostlook nav.pagination {
  border-top: revert;
  line-height: initial;
  margin: revert;
  display: flex;
  padding: var(--spacing-size-2xs, 0.5rem) var(--spacing-size-size-0, 0rem);
  align-items: stretch;
  gap: var(--spacing-size-2xs, 0.5rem);
}

.boostlook nav.pagination > span {
  display: flex;
  flex-direction: column;
  flex: 0 1 50%;
  backdrop-filter: blur(8px);
  padding-right: revert;
  padding-left: revert;
  margin-left: revert;
}
.boostlook nav.pagination > span.next {
  text-align: right;
  margin-left: auto;
}

.boostlook nav.pagination span::before {
  content: none !important;
}

.boostlook nav.pagination > span a {
  /* Container padding + two paddings of arrow icon container + arrow icon width + gap between arrow and content */
  --_arrow-based-padding: calc(var(--padding-padding-2xs) + (var(--spacing-size-3xs) * 2) + var(--icons-24) + var(--padding-padding-md));
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--padding-padding-xs, 0.75rem);
  border: 1px solid var(--border-border-primary, #e4e7ea);
  background: var(--pagination-bg, #fff);
  padding: var(--padding-padding-xs, 0.75rem);
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-sm, 1rem);
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.boostlook nav.pagination > span:hover a {
  border-color: var(--border-border-blue, #92cbe9);
  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
}

html.dark .boostlook nav.pagination > span:hover a {
  border-color: var(--border-border-blue, #92cbe9);
  background: var(--colors-primary-850, #1A1C29);
}

.boostlook nav.pagination > span.prev a {
  padding-left: var(--_arrow-based-padding);
}
.boostlook nav.pagination > span.next a {
  padding-right: var(--_arrow-based-padding);
}

@media screen and (min-width: 990px) {
  .boostlook nav.pagination > span a {
    --_arrow-based-padding: calc(var(--padding-padding-2xs) + (var(--spacing-size-xs) * 2) + var(--icons-24) + var(--padding-padding-md));
  }
}

.boostlook nav.pagination > span a::before {
  width: auto;
  position: static;
  color: var(--text-main-text-body-quaternary, #949a9e);
  font-size: var(--typography-font-size-2xs, 0.75rem);
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
  transform: revert;
}

.boostlook nav.pagination > span.prev a::before {
  content: "Previous";
}
.boostlook nav.pagination > span.next a::before {
  content: "Next";
}

.boostlook nav.pagination > span a::after {
  --_arrow-size: calc((var(--spacing-size-3xs, 0.25rem) * 2) + var(--icons-24));
  position: absolute;
  top: 50%;
  display: flex;
  width: var(--_arrow-size);
  height: var(--_arrow-size);
  align-items: center;
  justify-content: center;
  border-radius: var(--spacing-size-2xs, 0.5rem);
  transform: translateY(-50%);
}

@media screen and (min-width: 990px) {
  .boostlook nav.pagination > span a::after {
    --_arrow-size: calc((var(--spacing-size-xs, 0.75rem) * 2) + var(--icons-24));
  }
}

.boostlook nav.pagination > span.prev a::after {
  content: var(--icon-arrow-left);
  left: var(--padding-padding-2xs, 0.5rem);
}

.boostlook nav.pagination > span.next a::after {
  content: var(--icon-arrow-right);
  right: var(--padding-padding-2xs, 0.5rem);
}

/* Admonitions */
/* Admonitions — Metalab 2.0 */
.boostlook #content .admonitionblock,
.boostlook:not(:has(.doc)) div.note,
.boostlook:not(:has(.doc)) div.tip,
.boostlook:not(:has(.doc)) div.important,
.boostlook:not(:has(.doc)) div.caution,
.boostlook:not(:has(.doc)) div.warning,
.boostlook:not(:has(.doc)) div.blurb,
.boostlook:not(:has(.doc)) p.blurb {
  padding: var(--spacing-large, 1rem);
  border-radius: var(--radius-xxl, 1rem);
  border: 1px solid var(--border-border-primary, #e4e7ea);
  margin: revert;
  background: var(--surface-background-main-base-primary, #fff);
}

.boostlook #content li .admonitionblock,
.boostlook:not(:has(.doc)) li div.note,
.boostlook:not(:has(.doc)) li div.tip,
.boostlook:not(:has(.doc)) li div.important,
.boostlook:not(:has(.doc)) li div.caution,
.boostlook:not(:has(.doc)) li div.warning,
.boostlook:not(:has(.doc)) li div.blurb,
.boostlook:not(:has(.doc)) li p.blurb {
  margin-left: 0;
}

/* Readme Template Admonitionblock */
.boostlook:not(:has(.doc)) .notices {
  background-image: none !important;
}

.boostlook #content .admonitionblock > table,
.boostlook:not(:has(.doc)) div.note > table,
.boostlook:not(:has(.doc)) div.tip > table,
.boostlook:not(:has(.doc)) div.important > table,
.boostlook:not(:has(.doc)) div.caution > table,
.boostlook:not(:has(.doc)) div.warning > table,
.boostlook:not(:has(.doc)) div.blurb > table,
.boostlook:not(:has(.doc)) p.blurb > table {
  all: revert;
  table-layout: fixed;
  position: relative;
  width: 100%;
}

.boostlook #content .admonitionblock > table tr,
.boostlook:not(:has(.doc)) div.note tbody,
.boostlook:not(:has(.doc)) div.tip tbody,
.boostlook:not(:has(.doc)) div.important tbody,
.boostlook:not(:has(.doc)) div.caution tbody,
.boostlook:not(:has(.doc)) div.warning tbody,
.boostlook:not(:has(.doc)) div.blurb tbody,
.boostlook:not(:has(.doc)) p.blurb tbody,
.boostlook:not(:has(.doc)) .notices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.boostlook #content .admonitionblock > table tr td {
  padding: 0;
  border: unset;
}

.boostlook #content .admonitionblock > table tr td.icon,
.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th,
.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices .heading {
  display: flex;
  align-items: center;
  gap: var(--spacing-size-2xs, 0.5rem);
  /* Removes legacy icon */
  background: transparent;
}

.boostlook:not(:has(.doc)) .notices .heading {
  margin: 0;
}

.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th,
.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th,
.boostlook:not(:has(.doc)) div.note > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.tip > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.important > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.caution > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.warning > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th > *,
.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th > *,
.boostlook #content .admonitionblock > table tr td.icon > *,
.boostlook:not(:has(.doc)) .notices .heading {
  color: var(--text-main-text-primary, #050816);
  font-size: 1rem;
  font-weight: 500;
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: 100%;
  letter-spacing: -0.16px;
}
.boostlook #content .admonitionblock > table tr td.icon > * {
  padding: 0;
  font-family: var(--font-family-body, "Mona Sans");
}

.boostlook #content .admonitionblock > table tr td.icon i.fa::after {
  content: attr(title);
}

.boostlook #content .admonitionblock > table tr td.content,
  /* Leagcy Doc */
.boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.blurb > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.blurb > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td p,
  /* Antora Template Correction*/
.boostlook #content .admonitionblock > table tr td.content p,
.boostlook:not(:has(.doc)) .notices .message p {
  color: var(--text-main-text-body-tetriary, #717378);
  font-size: var(--typography-font-size-2xs, 0.75rem);
  font-variation-settings: "wght" 400, "wdth" 87.5;
  line-height: 135%;
  letter-spacing: -0.12px;
}

.boostlook:not(:has(.doc)) .notices .message {
  margin: 0;
}

.boostlook #content .admonitionblock > table code,
.boostlook:not(:has(.doc)) div.note > table code,
.boostlook:not(:has(.doc)) div.tip > table code,
.boostlook:not(:has(.doc)) div.important > table code,
.boostlook:not(:has(.doc)) div.caution > table code,
.boostlook:not(:has(.doc)) div.warning > table code,
.boostlook:not(:has(.doc)) div.blurb > table code,
.boostlook:not(:has(.doc)) p.blurb > table code {
  margin: revert;
  padding: 0;
}

/* Note — Metalab 2.0: neutral card */
.boostlook #content .admonitionblock.note,
.boostlook:not(:has(.doc)) div.note,
.boostlook:not(:has(.doc)) .notices.note {
  border-color: var(--stroke-weak, rgba(5 8 22 / 0.1));
  background-color: var(--surface-weak, #fff);
}

.boostlook #content .admonitionblock.note > table tr td.icon > *,
.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.note .heading {
  color: var(--text-main-text-primary, #18191b);
}

/* Tip */
.boostlook #content .admonitionblock.tip,
.boostlook:not(:has(.doc)) div.tip,
.boostlook:not(:has(.doc)) .notices.tip {
  border-color: var(--border-border-positive, #f8fefb);
  background-color: var(--surface-background-states-surface-positive-primary, #f6fafd);
}
.boostlook #content .admonitionblock.tip > table tr td.icon > *,
.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.tip .heading {
  color: var(--text-main-text-primary, #18191b);
}

/* Important */
.boostlook #content .admonitionblock.important,
.boostlook #content .admonitionblock.caution,
.boostlook:not(:has(.doc)) div.important,
.boostlook:not(:has(.doc)) div.caution,
.boostlook:not(:has(.doc)) .notices.important {
  border-color: var(--border-border-brand-orange, #ffd897);
  background-color: var(--surface-background-states-surface-warning-primary, #fefcf9);
}
.boostlook #content .admonitionblock.important > table tr td.icon > *,
.boostlook #content .admonitionblock.caution > table tr td.icon > *,
.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.important {
  color: var(--text-main-text-primary, #18191b);
}

/* Warning */
.boostlook #content .admonitionblock.warning,
.boostlook:not(:has(.doc)) div.warning,
.boostlook:not(:has(.doc)) .notices.warning {
  border-color: var(--border-border-negative, #ffcad2);
  background-color: var(--surface-background-states-surface-negative-primary, #fdf1f3);
}
.boostlook #content .admonitionblock.warning > table tr td.icon > *,
.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.warning .heading {
  color: var(--text-main-text-primary, #18191b);
}

/* Dlist-as-admonition: a standalone .dlist with a single .hdlist1 term
   (e.g. "Note", "Tip") should render as a card matching admonitionblock. */
.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(dl > dt.hdlist1:only-of-type + dd:last-child) {
  padding: var(--spacing-large, 1rem);
  border-radius: var(--radius-xxl, 1rem);
  border: 1px solid var(--stroke-weak, rgba(5 8 22 / 0.1));
  background-color: var(--surface-weak, #fff);
  margin-top: var(--padding-padding-sm, 1rem);
}

.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(dl > dt.hdlist1:only-of-type + dd:last-child) dl {
  gap: var(--spacing-size-3xs, 0.25rem);
}

.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(dl > dt.hdlist1:only-of-type + dd:last-child) .hdlist1 {
  font-size: 1rem;
  font-weight: 500;
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: 100%;
  letter-spacing: -0.16px;
  color: var(--text-main-text-primary, #18191b);
}

.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(dl > dt.hdlist1:only-of-type + dd:last-child) dd {
  border: none;
  padding: 0;
  margin-left: 0;
  color: var(--text-main-text-body-tetriary, #717378);
  font-size: var(--typography-font-size-sm, 0.875rem);
  font-variation-settings: "wght" 400, "wdth" 87.5;
  line-height: 135%;
  letter-spacing: -0.12px;
}

/* Dlist  */
/* Apply top margin only for root list */
.boostlook #content .dlist:not(:first-child):not(.dlist .dlist),
.boostlook .dlist dl dt:not(:first-child):not(.dlist .dlist),
.boostlook:not(:has(.doc)) .variablelist:not(:first-child):not(.variablelist .variablelist),
.boostlook:not(:has(.doc)) .variablelist dl dt:not(:first-child):not(.variablelist .variablelist) {
  margin-top: var(--padding-padding-2xs, 0.5rem);
}

.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) {
  background-color: var(--surface-background-main-surface-blue-primary, #ebf4f9);
  border: 1px solid transparent; /* var(--border-border-blue-primary, #c2e2f4) */
  padding: var(--padding-padding-xs, 0.75rem) var(--padding-padding-md, 1.125rem);
  margin-left: var(--spacing-size-xl);
}

.boostlook #content .colist.arabic > table > tbody > tr td .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) {
  margin-left: 0;
}

.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) .hdlist1 {
  font-size: var(--typography-font-size-sm, 1rem);
  font-variation-settings: "wght" 600, "wdth" 62.5;
  line-height: var(--typography-line-height-lg, 1.5rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
  font-weight: 600;
  color: var(--text-main-text-primary, #18191b) !important;
}
.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) dd  a:hover {
  color: var(--text-states-text-warning, #FF9442);
  cursor: pointer;
}
.boostlook #content .olist.arabic > ol > li table.tableblock:not(:first-child),
.boostlook #content  .olist.arabic > ol > li .dlist:not(:first-child):not(.dlist .dlist) {
  margin-left: 0;
}
.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) dd  a {
  color: var(--text-main-text-link-blue, #026a9f);
  text-decoration: none;
  transition: color 0.3s ease;
}
.boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) dd {
  margin: 0;
  padding: 0;
  border: none;
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-variation-settings: "wght" 400, "wdth" 87.5;
  line-height: var(--typography-line-height-lg, 1.5rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

.boostlook .dlist dl,
.boostlook:not(:has(.doc)) .variablelist dl {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-size-2xs, 0.5rem);
}

/* Where is this used */
.boostlook .dlist dl dt,
.boostlook:not(:has(.doc)) .variablelist dl dt {
  display: block;
  width: fit-content;
  padding: initial;
  border-radius: initial;
  border: initial;
  background: initial;
  color: var(--text-code-text, #050816);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
  margin-bottom: 0;
}

/* styles for nested list */
.boostlook .dlist:is(.dlist .dlist) dl dt,
.boostlook:not(:has(.doc)) .variablelist:is(.variablelist .variablelist) dl dt {
  font-size: var(--typography-font-size-sm, 1rem);
}

.boostlook .dlist dl dt code,
.boostlook:not(:has(.doc)) .variablelist dl dt code {
  border: none;
  padding: 0;
  background: transparent !important;
}

.boostlook .dlist dl dt .term,
.boostlook:not(:has(.doc)) .variablelist dl dt .term {
  font: inherit;
  font-weight: inherit;
}

.boostlook .dlist dl dt code,
.boostlook:not(:has(.doc)) .variablelist dl dt code {
  font-variation-settings: "wght" 600, "wdth" 87.5;
  font-family: var(--font-family-code, 'Monaspace Neon');
}

.boostlook .dlist dl dd,
.boostlook:not(:has(.doc)) .variablelist dl dd {
  margin: unset;
  margin-top: -1px;
  padding: var(--padding-padding-2xs, 0.5rem) var(--padding-padding-sm, 1rem);
  border-radius: var(--spacing-size-size-0, 0rem);
  border: 1px solid var(--border-border-primary, #e4e7ea);
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-xs, 0.875rem);
  line-height: var(--typography-line-height-lg, 1.5rem);
}

/* styles for nested list */
.boostlook .dlist:is(.dlist .dlist) dl dd,
.boostlook:not(:has(.doc)) .variablelist:is(.variablelist .variablelist) dl dd {
  border: none;
  padding: initial;
}

/* styles for block if it has nested list */
.boostlook .dlist dl dd:has(>.dlist),
.boostlook:not(:has(.doc)) .variablelist dl dd:has(>.variablelist) {
  padding: var(--padding-padding-sm, 1rem);
}

/* apply margin only for top level list */
.boostlook .dlist dl > dd:not(:is(dl dl dd)),
.boostlook:not(:has(.doc)) .variablelist dl > dd:not(:is(dl dl dd)) {
  margin-left: var(--spacing-size-xl);
}

@media screen and (max-width: 767px) {
  .boostlook #content .dlist:not(:first-child):not(.dlist .dlist):has(.hdlist1) {
    margin-left: 0;
  }

  .boostlook .dlist dl > dd:not(:is(dl dl dd)),
  .boostlook:not(:has(.doc)) .variablelist dl > dd:not(:is(dl dl dd)) {
    margin-left: 0;
  }
}

.boostlook .dlist dl dd p,
.boostlook:not(:has(.doc)) .variablelist dl dd p {
  font: inherit;
  margin: 0;
}

.boostlook .dlist dl dd em,
.boostlook:not(:has(.doc)) .variablelist dl dd em {
  font: inherit;
  font-variation-settings: "wght" 500, "wdth" 87.5;
}

/* Edit Page Link */
.boostlook .edit-this-page {
  color: var(--text-main-text-body-quaternary, #949a9e);
  text-align: right;
  font-size: var(--typography-font-size-2xs, 0.75rem);
  font-style: normal;
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
  padding: 0 var(--padding-padding-2xs, 0.5rem);
}

.boostlook .edit-this-page a {
  color: inherit;
  font: inherit;
  text-decoration: underline;
}

html.dark .boostlook .edit-this-page {
  color: #CACBCE;
}

/* Layout Structure */
.boostlook #header,
.boostlook #content,
.boostlook #footer {
  padding-left: var(--main-margin);
  padding-right: var(--main-margin);
}

.boostlook #header {
  padding-top: 1.25rem;
}

.boostlook #footer {
  padding-top: var(--padding-padding-sm);
  padding-bottom: calc(var(--padding-padding-sm) + env(safe-area-inset-bottom, 0px));
  color: var(--text-main-text-body-quaternary, #949a9e);
  font-size: var(--typography-font-size-xs);
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

/* Unordered Lists */
/* Reset Legacy and Common */
.boostlook .doc .dlist .dlist,
.boostlook .doc .dlist .olist,
.boostlook .doc .dlist .ulist,
.boostlook .doc .olist .dlist,
.boostlook .doc .olist .olist,
.boostlook .doc .olist .ulist,
.boostlook .doc .olist li + li,
.boostlook .doc .ulist .dlist,
.boostlook .doc .ulist .olist,
.boostlook .doc .ulist .ulist,
.boostlook .doc .ulist:not(.tablist) li + li,
.boostlook:not(:has(.doc)) div.orderedlist li + li {
  margin-top: var(--padding-padding-3xs, 0.25rem);
}

.boostlook:not(:has(.doc)) div.orderedlist div.orderedlist {
  margin-top: var(--padding-padding-2xs, 0.5rem);
}

.boostlook .doc .dlist .dlist,
.boostlook .doc .dlist .olist,
.boostlook .doc .dlist .ulist,
.boostlook .doc .olist .dlist,
.boostlook .doc .olist .olist,
.boostlook .doc .olist .ulist,
.boostlook .doc .ulist .dlist,
.boostlook .doc .ulist .olist,
.boostlook .doc .ulist .ulist,
.boostlook:not(:has(.doc)) div.orderedlist div.orderedlist {
  margin-bottom: var(--padding-padding-2xs, 0.5rem);
}

/* Default List */
.boostlook div.itemizedlist:has(> ul.itemizedlist):not(:first-child),
.boostlook :not(div.itemizedlist) > ul.itemizedlist,
.boostlook .ulist:not(:first-child):not(.tablist),
.boostlook .ulist:not(:first-child).disc,
.boostlook#libraryReadMe ul:not(:first-child),
  /* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) {
  margin-top: var(--padding-padding-xs, 0.75rem);
}

.boostlook ul.itemizedlist,
.boostlook .ulist:not(.tablist) > ul,
.boostlook .ulist.disc > ul,
.boostlook#libraryReadMe ul,
  /* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) {
  list-style: none;
  padding: 0;
}

.boostlook ul.itemizedlist {
  list-style: none !important;
}

.boostlook ul.itemizedlist > li,
.boostlook .ulist:not(.tablist) > ul > li,
.boostlook .ulist.disc > ul > li,
.boostlook#libraryReadMe ul > li,
  /* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class])> li,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class])> li {
  position: relative;
  padding-left: 1.5rem;
  line-height: var(--typography-line-height-lg, 1.5rem);
}

.boostlook ul.itemizedlist > li,
  /* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content ul:not([class]) li,
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content ol:not([class]) li,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content ul:not([class]) li,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content ol:not([class]) li,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content ul:not([class]) li,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content ol:not([class]) li {
  font: inherit;
  line-height: var(--typography-line-height-lg, 1.5rem);
}

.boostlook ul.itemizedlist > li + li,
.boostlook .ulist:not(.tablist) > ul > li + li,
.boostlook .ulist.disc > ul > li + li,
.boostlook#libraryReadMe ul > li + li,
  /* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li + li,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) > li + li,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) > li + li {
  margin-top: var(--padding-padding-3xs, 0.25rem);
}

.boostlook ul.itemizedlist > li::before,
.boostlook .ulist:not(.tablist) > ul > li::before,
.boostlook .ulist.disc > ul > li::before,
.boostlook#libraryReadMe ul > li::before,
  /* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li::before,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) > li::before,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) > li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: calc(var(--typography-font-size-sm, 1rem) * 1.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main-text-primary, #18191b);
}

/* Link-list sections (See Also, Next Steps, etc.): blue bullets for the
   last .sect1 (no following .sect1 sibling) or its last .sect2, when the
   final .ulist contains only link items. */
.boostlook #content .doc .sect1:not(:has(~ .sect1)) > .sectionbody > .ulist:last-child > ul > li:has(> p > a:only-child),
.boostlook #content .doc .sect1:not(:has(~ .sect1)) .sect2:last-child > .ulist:last-child > ul > li:has(> p > a:only-child) {
  padding-left: 1.25rem;
}

.boostlook #content .doc .sect1:not(:has(~ .sect1)) > .sectionbody > .ulist:last-child > ul > li:has(> p > a:only-child)::before,
.boostlook #content .doc .sect1:not(:has(~ .sect1)) .sect2:last-child > .ulist:last-child > ul > li:has(> p > a:only-child)::before {
  width: 16px;
  color: var(--text-main-text-link-blue, #026a9f);
}

/* Link-only list items: blue bullets when li contains only a link */
.boostlook .ulist:not(.tablist) > ul > li:has(> p > a:only-child)::before {
  color: var(--text-main-text-link-blue, #026a9f) !important;
}

/* Unresolved xref links: red bullet to match the red link text */
.boostlook #content .doc .sect1:not(:has(~ .sect1)) > .sectionbody > .ulist:last-child > ul > li:has(> p > a.unresolved)::before,
.boostlook #content .doc .sect1:not(:has(~ .sect1)) .sect2:last-child > .ulist:last-child > ul > li:has(> p > a.unresolved)::before {
  color: #c00;
}

/* Ordered Lists — native numbering (Metalab 2.0, #116-1) */
.boostlook .olist.arabic > ol,
.boostlook:not(:has(.doc)) .orderedlist > ol {
  list-style: decimal;
  padding-left: 2rem;
  padding-bottom: 1rem;
}

.boostlook .olist.loweralpha > ol {
  list-style: lower-alpha;
  padding-left: 2rem;
  padding-bottom: 1rem;
}

.boostlook .olist.arabic > ol > li,
.boostlook .olist.loweralpha > ol > li,
.boostlook:not(:has(.doc)) .orderedlist > ol > li {
  line-height: var(--typography-line-height-lg, 1.5rem);
}

/* Conum */
.boostlook .doc .conum[data-value] {
  position: relative;
  border: none;
  border-radius: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Mona Sans";
  font-style: normal;
  font-variation-settings: "wght" 350, "wdth" 87.5;
  line-height: var(--typography-line-height-sm, 1rem);
  font-size: var(--typography-font-size-sm, 1rem);
  text-align: center;
  width: 32px;
  height: 32px;
  letter-spacing: var(--spacing-size-size-0, 0rem);
  text-indent: unset;
  color: var(--text-main-text-primary, #18191b);
  text-align: center;
}
.boostlook .doc code .conum[data-value] {
  background: transparent;
  width: auto;
  height: auto;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: var(--text-main-text-primary, #18191b);
}

.boostlook .doc .conum[data-value]::after {
  content: attr(data-value)".";
  font: inherit;
}

.boostlook .doc .conum[data-value] + b {
  display: none;
}

/* Collist */
.boostlook .colist.arabic {
  margin: revert;
}
.boostlook .colist.arabic > table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-main-text-body-primary);
}

.boostlook .colist.arabic > table > tbody > tr td,
.boostlook .colist.arabic > table > tr td {
  /* Reset Legacy */
  padding: revert;
  padding-top: var(--padding-padding-3xs, 0.25rem);
  padding-bottom: 0;
  font-size: var(--typography-font-size-sm, 1rem);
}

.boostlook .colist.arabic > table > tbody > tr > :first-child,
.boostlook .colist.arabic > table > tr > :first-child {
  padding-left: 0;
  padding-right: 0;
  vertical-align: top;
  /* to make first column fit its content  */
  width: 1%;
  white-space: nowrap;
}

.boostlook .colist.arabic > table > tbody > tr > :first-child:has(.conum),
.boostlook .colist.arabic > table > tr > :first-child:has(.conum) {
  padding-top: 0;
}

/* Tables */
/* Reset Antora Table Styles */
.boostlook #content table.tableblock tr,
.boostlook #content table.tableblock td,
.boostlook #content table.tableblock th,
.boostlook #content table.tableblock thead,
.boostlook #content table.tableblock tbody,
.boostlook #content table.tableblock tfoot,
.boostlook #content table.tableblock caption,
.boostlook #content table.tableblock colgroup,
.boostlook #content table.tableblock col,
.boostlook #content table.tableblock,
.boostlook:not(:has(.doc)) table.table tr,
.boostlook:not(:has(.doc)) table.table td,
.boostlook:not(:has(.doc)) table.table th,
.boostlook:not(:has(.doc)) table.table thead,
.boostlook:not(:has(.doc)) table.table tbody,
.boostlook:not(:has(.doc)) table.table tfoot,
.boostlook:not(:has(.doc)) table.table caption,
.boostlook:not(:has(.doc)) table.table colgroup,
.boostlook:not(:has(.doc)) table.table col,
.boostlook:not(:has(.doc)) table.table,
.boostlook#libraryReadMe > table,
.boostlook#libraryReadMe > table tr,
.boostlook#libraryReadMe > table td,
.boostlook#libraryReadMe > table th,
.boostlook#libraryReadMe > table thead,
.boostlook#libraryReadMe > table tbody,
.boostlook#libraryReadMe > table tfoot,
.boostlook#libraryReadMe > table caption,
.boostlook#libraryReadMe > table colgroup,
.boostlook#libraryReadMe > table col {
  all: unset;
  display: revert;
}


.boostlook #content table.tableblock:not(:first-child),
.boostlook:not(:has(.doc)) .table:not(:first-child),
.boostlook#libraryReadMe > table:not(:first-child) {
  margin-top: var(--padding-padding-xs, 0.75rem);
}

.boostlook #content table.tableblock.stretch,
.boostlook:not(:has(.doc)) table.table,
.boostlook#libraryReadMe > table.stretch {
  min-width: 100%;
}

/* Horizontal scroll for tables on mobile */
@media screen and (max-width: 767px) {
  .boostlook #content table.tableblock,
  .boostlook:not(:has(.doc)) table.table,
  .boostlook#libraryReadMe > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .boostlook #content table.tableblock.stretch,
  .boostlook:not(:has(.doc)) table.table,
  .boostlook#libraryReadMe > table.stretch {
    min-width: unset;
  }

  .boostlook #content table.tableblock colgroup,
  .boostlook:not(:has(.doc)) table.table colgroup {
    display: none;
  }

  .boostlook #content table.tableblock th,
  .boostlook #content table.tableblock td,
  .boostlook:not(:has(.doc)) table.table th,
  .boostlook:not(:has(.doc)) table.table td,
  .boostlook#libraryReadMe > table th,
  .boostlook#libraryReadMe > table td {
    min-width: 100px !important;
  }
}

.boostlook #content table.tableblock caption,
.boostlook:not(:has(.doc)) div.table .title {
  color: var(--text-main-text-body-primary, #2a2c30);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  font-variation-settings: "wght" 600, "wdth" 87.5;
  line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */
  padding: 0;
  padding-bottom: var(--padding-padding-2xs, 0.5rem);
}

.boostlook #content table.tableblock caption > *,
.boostlook:not(:has(.doc)) div.table .title > * {
  font: inherit;
  font-variation-settings: "wght" 500, "wdth" 87.5;
  text-decoration: none;
}

.boostlook:not(:has(.doc)) div.table .title {
  padding-bottom: var(--padding-padding-2xs, 0.5rem) !important;
}

/* Table cells — Metalab 2.0 */
.boostlook #content table.tableblock th,
.boostlook #content table.tableblock td,
.boostlook:not(:has(.doc)) table.table th,
.boostlook:not(:has(.doc)) table.table td,
.boostlook#libraryReadMe > table th,
.boostlook#libraryReadMe > table td {
  padding: 12px 16px;
  min-height: 28px;
  text-align: left;
  border-top: 1px solid var(--table-stroke, #0508161A);
  border-left: 1px solid var(--table-stroke, #0508161A);
}

.boostlook #content table.tableblock th:last-child,
.boostlook #content table.tableblock td:last-child,
.boostlook:not(:has(.doc)) table.table th:last-child,
.boostlook:not(:has(.doc)) table.table td:last-child,
.boostlook#libraryReadMe > table th:last-child,
.boostlook#libraryReadMe > table td:last-child {
  border-right: 1px solid var(--table-stroke, #0508161A);
}

.boostlook #content table.tableblock tr:last-child td,
.boostlook:not(:has(.doc)) table.table tr:last-child td,
.boostlook#libraryReadMe > table tr:last-child td {
  border-bottom: 1px solid var(--table-stroke, #0508161A);
}

.boostlook #content table.tableblock:has(thead) th:first-child,
.boostlook #content table.tableblock:not(:has(thead)) tr:first-child td:first-child,
.boostlook:not(:has(.doc)) table.table:has(thead) th:first-child,
.boostlook:not(:has(.doc)) table.table:not(:has(thead)) tr:first-child td:first-child,
.boostlook#libraryReadMe > table:has(thead) th:first-child,
.boostlook#libraryReadMe > table:not(:has(thead)) tr:first-child td:first-child {
  /*border-top-left-radius: var(--spacing-size-2xs, 0.5rem);*/
}

.boostlook #content table.tableblock:has(thead) th:last-child,
.boostlook #content table.tableblock:not(:has(thead)) tr:first-child td:last-child,
.boostlook:not(:has(.doc)) table.table:has(thead) th:last-child,
.boostlook:not(:has(.doc)) table.table:not(:has(thead)) tr:first-child td:last-child,
.boostlook#libraryReadMe > table:has(thead) th:last-child,
.boostlook#libraryReadMe > table:not(:has(thead)) tr:first-child td:last-child {
  /*border-top-right-radius: var(--spacing-size-2xs, 0.5rem);*/
}

.boostlook #content table.tableblock tr:last-child td:first-child,
.boostlook:not(:has(.doc)) table.table tr:last-child td:first-child,
.boostlook#libraryReadMe > table tr:last-child td:first-child {
  /*border-bottom-left-radius: var(--spacing-size-2xs, 0.5rem);*/
}

.boostlook #content table.tableblock tr:last-child td:last-child,
.boostlook:not(:has(.doc)) table.table tr:last-child td:last-child,
.boostlook#libraryReadMe > table tr:last-child td:last-child {
  /*border-bottom-right-radius: var(--spacing-size-2xs, 0.5rem);*/
}

/* Table header — Metalab 2.0: Surface-Mid bg, 12px per Figma */
.boostlook #content .doc table.tableblock th,
.boostlook #content .doc table.tableblock th strong,
.boostlook #content .doc table.tableblock:not(:has(thead)) > tbody > tr:first-child > td,
.boostlook:not(:has(.doc)) #content table.tableblock th,
.boostlook:not(:has(.doc)) #content table.tableblock th strong,
.boostlook:not(:has(.doc)) #content table.tableblock:not(:has(thead)) > tbody > tr:first-child > td,
.boostlook:not(:has(.doc)) table.table th,
.boostlook:not(:has(.doc)) table.table th strong,
.boostlook#libraryReadMe > table th,
.boostlook#libraryReadMe > table th strong {
  background-color: var(--table-header-bg, #F7F7F8);
  color: var(--text-main-text-primary, #050816);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-variation-settings: "wght" 700, "wdth" 87.5;
  line-height: 140%;
  letter-spacing: -0.12px;
}

/* Table data — Metalab 2.0: 12px per Figma, Text-Secondary */
.boostlook #content .doc table.tableblock td,
.boostlook:not(:has(.doc)) #content table.tableblock td,
.boostlook:not(:has(.doc)) table.table td,
.boostlook#libraryReadMe > table td {
  background-color: var(--table-bg, #fff);
  color: var(--text-main-text-body-secondary, #585A64);
  font-size: var(--typography-font-size-2xs, 0.75rem);
  font-style: normal;
  line-height: 140%;
  letter-spacing: -0.12px;
}

.boostlook#libraryReadMe > table td {
  vertical-align: middle;
}

.boostlook #content table.tableblock td.valign-top,
.boostlook:not(:has(.doc)) table.table td.valign-top,
.boostlook#libraryReadMe > table td.valign-top {
  vertical-align: top;
}

.boostlook #content table.tableblock td.valign-bottom,
.boostlook:not(:has(.doc)) table.table td.valign-bottom,
.boostlook#libraryReadMe > table td.valign-bottom {
  vertical-align: bottom;
}

.boostlook #content table.tableblock td.valign-center,
.boostlook:not(:has(.doc)) table.table td.valign-center,
.boostlook#libraryReadMe > table td.valign-center {
  vertical-align: middle;
}

.boostlook #content table.tableblock td.halign-left,
.boostlook:not(:has(.doc)) table.table td.halign-left,
.boostlook#libraryReadMe > table td.halign-left {
  text-align: left;
}

.boostlook #content table.tableblock td.halign-center,
.boostlook:not(:has(.doc)) table.table td.halign-center,
.boostlook#libraryReadMe > table td.halign-center {
  text-align: center;
}

.boostlook #content table.tableblock th p,
.boostlook #content table.tableblock td p,
.boostlook:not(:has(.doc)) table.table th p,
.boostlook:not(:has(.doc)) table.table td p,
.boostlook#libraryReadMe > table th p,
.boostlook#libraryReadMe > table td p {
  font: inherit;
  color: inherit;
}

.boostlook #content table.tableblock td strong,
.boostlook:not(:has(.doc)) table.table td strong,
.boostlook#libraryReadMe > table td strong {
  font-variation-settings: "wght" 600, "wdth" 87.5;
}

.boostlook #content table.tableblock td code,
.boostlook:not(:has(.doc)) table.table td code,
.boostlook#libraryReadMe > table td code {
  background: transparent !important;
  padding: 0;
  border: none;
  font-size: var(--typography-font-size-2xs, 0.75rem);
}

.boostlook #content table.tableblock .footnotes tr td,
.boostlook:not(:has(.doc)) table.table .footnotes tr td {
  border: none;
  border-radius: 0;
  padding: var(--padding-padding-xs) 0;
}

/* Image Styles */
.boostlook .doc .imageblock,
.boostlook .doc .videoblock {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.boostlook:not(#libraryReadMe) .image:has(> img),
.boostlook .content:has(> img),
.boostlook .mediaobject:has(> embed) {
  display: flex;
  padding: var(--padding-padding-md, 1.125rem);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--spacing-size-xs, 0.75rem);
  background: var(--surface-background-main-surface-primary, #f5f6f8);
  width: 100%;
  margin-top: var(--padding-padding-xs, 0.75rem);
}

.boostlook:not(#libraryReadMe) .image:has(> img),
.boostlook .content:has(> img) {
  background-color: transparent;
}

.boostlook:not(:has(.doc)) .inlinemediaobject:has(> img, > object) {
  display: inline-block;
  vertical-align: text-bottom;
  line-height: 0;
}

.boostlook .doc ul.checklist p>i.fa-check-square-o:first-child, .boostlook .doc ul.checklist p>i.fa-square-o:first-child {
  display: none;
}

.boostlook .doc .imageblock .content:has(img) {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

/*----------------- Global Styles for .boostlook end -----------------*/

/* ----------- Scrollbars Styles Start ------------- */

/**
 *
 * Scrollbar Styling
 *
 * This stylesheet provides comprehensive scrollbar customization for different contexts.
 *
 * Features:
 * 1. Global Scrollbar Styles:
 *    - Applies thin scrollbar width and custom colors to the HTML element.
 *    - Customizes scrollbar appearance for elements within the `.boostlook` class.
 *
 * 2. Media Query Adjustments:
 *    - For screens with a minimum width of 768px, further customizes scrollbar colors for specific elements.
 *    - Changes scrollbar thumb color on hover for better visibility.
 *
 * 3. Webkit Scrollbar Customization:
 *    - Sets the width and height of the scrollbar.
 *    - Customizes the scrollbar track and thumb with specific colors and border-radius.
 *    - Adjusts scrollbar appearance for elements within the `.boostlook` class and its descendants.
 *
 * 4. Hover Effects:
 *    - Changes the scrollbar thumb color on hover for better user interaction.
 *
 */

@supports (scrollbar-width: thin) {
  /* HTML Matches its scroll background to content background.
     Gated :not(.v3) so a component-level .boostlook island on a v3 site page
     does not restyle (and resize) the whole page scrollbar. Docs render in an
     iframe whose html has no .v3, so they keep this. */
  html:not(.v3):has(.boostlook) {
    scrollbar-width: thin;
    scrollbar-color: var(--border-border-tetriary, #afb3b6) var(--surface-background-main-base-primary, #fff);
  }

  .boostlook,
  .boostlook *,
  .boostlook pre,
  .boostlook code,
  .boostlook:not(:has(.doc)) div.table .table-contents {
    scrollbar-width: thin;
    scrollbar-color: var(--border-border-tetriary, #afb3b6) transparent;
  }

  @media screen and (min-width: 768px) {
    .boostlook pre,
    .boostlook code,
    .boostlook:not(:has(.doc)) div.table .table-contents {
      scrollbar-width: thin;
      scrollbar-color: transparent transparent;
    }

    .boostlook pre:hover,
    .boostlook code:hover,
    .boostlook:not(:has(.doc)) div.table .table-contents:hover {
      scrollbar-color: var(--border-border-tetriary, #afb3b6) transparent;
    }
  }
}

html:not(.v3):has(.boostlook)::-webkit-scrollbar,
.boostlook::-webkit-scrollbar,
.boostlook *::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

html:not(.v3):has(.boostlook)::-webkit-scrollbar-track {
  background: var(--surface-background-main-base-primary, #fff);
  border-radius: var(--spacing-size-2xs, 0.5rem);
}

.boostlook::-webkit-scrollbar-track,
.boostlook *::-webkit-scrollbar-track,
.boostlook pre::-webkit-scrollbar-track,
.boostlook code::-webkit-scrollbar-track,
.boostlook:not(:has(.doc)) div.table .table-contents::-webkit-scrollbar-track {
  width: 6px;
  background: transparent;
  border-radius: var(--spacing-size-2xs, 0.5rem);
}

html:not(.v3):has(.boostlook)::-webkit-scrollbar-thumb,
.boostlook::-webkit-scrollbar-thumb,
.boostlook *::-webkit-scrollbar-thumb,
.boostlook pre::-webkit-scrollbar-thumb,
.boostlook code::-webkit-scrollbar-thumb,
.boostlook:not(:has(.doc)) div.table .table-contents::-webkit-scrollbar-thumb {
  width: 6px;
  background: var(--border-border-tetriary, #afb3b6);
}

@media screen and (min-width: 768px) {
  .boostlook pre::-webkit-scrollbar-thumb,
  .boostlook code::-webkit-scrollbar-thumb,
  .boostlook:not(:has(.doc)) div.table .table-contents::-webkit-scrollbar-thumb {
    background: transparent;
  }

  .boostlook pre:hover::-webkit-scrollbar-thumb,
  .boostlook code:hover::-webkit-scrollbar-thumb,
  .boostlook:not(:has(.doc)) div.table .table-contents:hover::-webkit-scrollbar-thumb {
    background-color: var(--border-border-tetriary, #afb3b6);
  }
}

.boostlook .doc pre,
.boostlook p code,
.boostlook table code,
.boostlook p tt,
.boostlook p kbd,
.boostlook p samp,
.boostlook p pre,
.boostlook:not(:has(.doc)) pre,
.boostlook code,
.boostlook pre code,
.boostlook .doc .content pre code,
.boostlook#libraryReadMe pre code {
  overflow-x: auto;
}

/* ----------- Scrollbars Styles End ------------- */

/* Template-specific Adjustments */

/* Hide root scrollbars for Antora template */
html:has(.article > .boostlook) {
  height: 100vh;
  height: -webkit-fill-available;
  height: 100dvh;
  overflow: hidden;
}

/* Mobile: remove fixed height + overflow:hidden that conflicts with iOS Safari dynamic toolbar */
@media (hover: none) and (pointer: coarse) {
  html:not(.is-clipped--nav):has(.article > .boostlook) {
    height: auto;
    overflow: visible;
  }
}

/* Iframe container scrollbar handling */
html:has(.boostlook):has(#docsiframe) {
  overflow-y: hidden;
}

/* Chrome/Edge scrollbar for iframe container */
html:has(.boostlook):has(#docsiframe)::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Antora template - Scrollable content area */
.boostlook #content:has(> .doc) {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile: extra bottom padding to clear iOS Safari toolbar */
@media (hover: none) and (pointer: coarse) {
  .boostlook #content:has(> .doc) {
    padding-bottom: 3.5rem;
  }
}

/* Asciidoc template - Content overflow handling */
.boostlook:has(#content > .sect1) {
  overflow-y: auto;
  height: 100vh;
  height: 100dvh;
}

/* Table Container */
.boostlook .content div:has(> table),
.boostlook .doc table.tableblock,
.boostlook #content .sect3:has(.tableblock) {
  overflow-x: auto !important;
}

/* Article Layout */
.article.toc2.toc-left:has(.boostlook) {
  height: 100vh;
  height: 100dvh;
  /* Simplified: always use offset behavior, never center */
  margin-left: var(--main-max-width-leftbar);
  background: var(--surface-background-main-base-primary, #fff);
  position: relative;
  overflow-y: auto;
}

/* TOC Common start */
/* Background Colors */
.boostlook #toc.toc2,
.boostlook #header:not(:has(.nav-container)),
.boostlook #content,
.boostlook #footer {
  background: var(--surface-background-main-base-primary, #fff);
}
/* TOC Scrolling */
.boostlook #toc.toc2 {
  overflow-y: auto;
  scrollbar-color: inherit;
}
/* TOC Positioning */
.boostlook #toc.toc2,
.boostlook#boost-legacy-docs-wrapper:not(:has(article.doc)) #toc.toc2.is-active,
.boostlook#antora-template-wrapper:not(:has(article.doc)) #toc.toc2.is-active,
div.source-docs-antora.boostlook:not(:has(article.doc)):not(:has(> .boostlook)) #toc.toc2.is-active {
  position: static;
}

/* TOC Toggle Button */
.boostlook #toggle-toc {
  visibility: hidden;
  height: 0;
  width: 0;
}

/* TOC Navigation Menu */
.boostlook #toc ul,
.boostlook:not(:has(.doc)) div.toc dd {
  margin: 0;
  padding: 0 0 0 var(--leftbar-paddings-leftbar-padding-2xs, 0.5rem);
  color: var(--text-main-text-body-secondary, #494d50);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  line-height: var(--typography-line-height-md, 1.25rem);
  list-style: none;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
}

.boostlook #toc .nav-menu > .nav-list,
.boostlook #toc .nav-menu > .nav-list > .nav-list,
.boostlook #toc > ul.sectlevel1 {
  padding-left: 0;
}

.boostlook .nav-menu .nav-list li,
.boostlook #toc > ul.sectlevel1 li:not(:has(> ul)),
.boostlook #toc > ul.sectlevel1 li:has(> ul) a,
.boostlook:not(:has(.doc)) div.toc dt {
  position: relative;
  padding: var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem) var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem);
}

.boostlook .nav-menu .nav-list .nav-link {
  display: inline-block;
  font-size: var(--typography-font-size-xs);
  color: var(--text-main-text-body-secondary, #494d50);
  text-decoration: none;
  padding: var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem) var(--leftbar-paddings-leftbar-padding-2xs, 0.5rem);
  border-radius: var(--padding-padding-3xs, 0.25rem);
}

.boostlook .nav-menu li[data-depth="1"]:not(:has(> .nav-item-toggle)) > .nav-link {
  color: var(--text-main-text-primary, #18191b);
  font-variation-settings: "wght" 600, "wdth" 87.5;
  line-height: var(--typography-line-height-sm, 1rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

.boostlook .nav-menu .nav-list li:has(.nav-text),
.boostlook .nav-menu .nav-list li[data-depth="1"]:not(:has(> .nav-item-toggle)),
.boostlook #toc > ul.sectlevel1 li:has(> ul):not(:first-of-type) {
  margin-top: var(--leftbar-paddings-leftbar-padding-4xs, 0.125rem);
}

.boostlook .nav-menu .nav-list li[data-depth="1"]:not(:has(> .nav-item-toggle)) {
  padding-left: 0;
}

.boostlook .nav-text,
.boostlook #toc > ul.sectlevel1 li:has(> ul) > a,
.boostlook #toc > ul.sectlevel1 > li:not(:has(> ul)) > a,
.boostlook .nav-menu .nav-item:has(> .nav-item-toggle) > .nav-link {
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-xs);
  font-variation-settings: "wght" 600, "wdth" 87.5;
  line-height: var(--typography-line-height-sm, 1rem);
  padding-left: var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

/* Section separator lines */
.boostlook .nav-menu > .nav-list > .nav-item,
.boostlook .nav-menu .nav-item:has(> .nav-text),
.boostlook .nav-menu .nav-item:has(> .nav-item-toggle),
.boostlook .nav-menu li[data-depth="1"]:not(:has(> .nav-item-toggle)) {
  border-top: 1px solid var(--border-border-primary, #e4e7ea);
  margin-top: 0;
  padding-top: var(--leftbar-paddings-leftbar-padding-xs, 0.75rem);
  padding-bottom: var(--leftbar-paddings-leftbar-padding-xs, 0.75rem);
}

.boostlook .nav-menu > .nav-list > .nav-item:first-child,
.boostlook .nav-menu > .nav-list > .nav-list > li[data-depth="1"]:first-child {
  border-top: none;
  margin-top: 0;
}

/* Table of Contents Links */
.boostlook #toc a,
.boostlook:not(:has(.doc)) div.toc a {
  color: var(--text-main-text-body-secondary, #494d50);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  line-height: var(--typography-line-height-sm, 1rem); /* 142.857% */
  text-decoration: none;
}

/* On-page TOC (right side): underline links per Figma */
.boostlook #toc:not(.toc2) > ul.sectlevel1 a,
.boostlook:not(:has(.doc)) div.toc a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.boostlook #toc a:hover,
.boostlook #toc a:focus,
.boostlook #toc > ul.sectlevel1 li:has(> ul) > a:hover,
.boostlook #toc > ul.sectlevel1 li:has(> ul) > a:focus,
.boostlook:not(:has(.doc)) div.toc a:hover,
.boostlook:not(:has(.doc)) div.toc a:focus {
  color: var(--text-main-text-link-blue-secondary, #0077B8);
  text-decoration: none;
}

.boostlook .nav-menu .nav-link:hover,
.boostlook .nav-menu .nav-link:focus {
  color: var(--text-main-text-primary, #18191b);
}

/*
.boostlook #toc .nav-link:visited:not(:hover),
.boostlook #toc .sectlevel1 li:not(:has(> ul)) a:visited:not(:hover),
.boostlook:not(:has(.doc)) div.toc a:visited:not(:hover) {
  color: var(--text-main-text-link-viewed, #62b3dd);
}
*/

.boostlook .nav-list li[data-depth]:not([data-depth="1"]),
.boostlook #toc > ul.sectlevel1 ul[class*="sectlevel"] > li,
.boostlook:not(:has(.doc)) div.toc dd dt {
  margin-left: calc(var(--leftbar-paddings-leftbar-padding-2xs) * -1);
}

.boostlook .nav-list li[data-depth]:not([data-depth="1"]):hover::before,
.boostlook #toc > ul.sectlevel1 li:not(:has(> ul)):hover::before,
.boostlook:not(:has(.doc)) div.toc dd dt:hover::before {
  background-color: var(--border-border-blue-hover, #329cd2);
  isolation: isolate;
  z-index: 1;
}

/* Navigation Menu Title */
.boostlook #toc #toctitle,
.boostlook .nav-menu h3.title {
  padding: var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem);
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-sm, 0.875rem);
  line-height: var(--typography-line-height-sm, 1rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
  font-variation-settings: "wght" 600, "wdth" 87.5;
}

/* TOC code in links */
.boostlook #toc a code,
.boostlook:not(:has(.doc)) div.toc a code {
  /* slightly reduce code elements font size in side menu */
  font-size: 0.96em;
  display: inline;
  background: none !important;
  padding: 0;
  border: none;
  color: inherit;
  transition: none;
}

/* Content */
.boostlook #content .doc,
.boostlook #content > .sect1,
.boostlook #header > *,
.boostlook #footer > * {
  max-width: var(--main-content-width);
  margin-left: 0;
}

.boostlook #preamble + .sect1,
.boostlook .doc .sect1 + .sect1 {
  margin-top: revert;
}

/* Responsive Design */
@media screen and (min-width: 768px) {
  .article.toc2.toc-left:has(.boostlook) {
    padding: 0 1rem 0 1rem;
  }

  .boostlook #toggle-toc {
    visibility: visible;
    height: auto;
    width: auto;
  }

  .boostlook #toc.toc2 {
    position: fixed;
    width: var(--main-max-width-leftbar);
    left: 0;
    top: 0;
    z-index: 1000;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    visibility: visible;
  }

  .boostlook #toc.toc2:not(.nav-container) {
    padding: 1rem 1.5rem;
  }

  .boostlook #toc.toc2:not(.nav-container):has(#toggle-toc) {
    /* Extra left padding if toc toggle exists */
    padding: 1rem 1.5rem 1rem 2.2rem;
  }


  /* TOC Toggle Button */
  .boostlook #toggle-toc {
    position: fixed;
    top: 2rem;
    left: 1rem;
    background-color: var(--surface-background-main-base-primary);
    box-shadow: 0 0px 3px var(--surface-background-main-surface-transparent-inverse);
    border: 0;
    padding: 0;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M400-240l240-240-240-240-56%2056%20184%20184-184%20184%2056%2056Z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    border-radius: var(--radius-xxl, 1rem);
    height: 2rem;
    width: 2rem;
    text-indent: -9999px;
    z-index: 1001;
  }

  /* Hidden TOC */
  html.toc-hidden .boostlook {
    margin-left: 0;
  }

  html.toc-hidden .boostlook #toggle-toc {
    left: 2px;
  }

  /* Visible TOC */
  html.toc-visible .boostlook #toggle-toc {
    left: 2px;
    background-color: var(--surface-background-main-base-primary);
  }

  html.toc-visible .boostlook {
    margin-left: 0;
  }

  html.toc-hidden .boostlook #toc.toc2 {
    visibility: hidden;
  }

  html.toc-visible .boostlook #toc.toc2 {
    opacity: 1;
    visibility: visible;
    /* width: 250px;
    padding-left: 1.5rem; */
  }

  /* TOC Shadow States */
  html.toc-visible:not(.toc-pinned) .boostlook #toc.toc2 {
    box-shadow: 4px 0 12px 0px rgba(0, 0, 0, 0.1);
  }

  /* TOC Pin States */
  html.toc-visible.toc-pinned .boostlook #toggle-toc {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M560-240%20320-480l240-240%2056%2056-184%20184%20184%20184-56%2056Z%22%2F%3E%3C%2Fsvg%3E");
  }

  /* html.toc-visible.toc-pinned .boostlook {
    margin-left: var(--main-max-width-leftbar);
  } */
}
/* TOC Collapsible Sections (Asciidoctor) */

/* Section separator lines for collapsible items and top-level leaf items */
.boostlook #toc > ul.sectlevel1 > li:has(> ul),
.boostlook #toc > ul.sectlevel1 > li:not(:has(> ul)) {
  border-top: 1px solid var(--border-border-primary, #e4e7ea);
  margin-top: var(--leftbar-paddings-leftbar-padding-xs, 0.75rem);
  padding-top: var(--leftbar-paddings-leftbar-padding-xs, 0.75rem);
  padding-bottom: var(--leftbar-paddings-leftbar-padding-xs, 0.75rem);
}

.boostlook #toc > ul.sectlevel1 > li:has(> ul):first-child,
.boostlook #toc > ul.sectlevel1 > li:not(:has(> ul)):first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Flex layout for items with toggle */
.boostlook #toc li.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Nested list takes full width below header */
.boostlook #toc li.nav-item > ul {
  flex-basis: 100%;
  order: 2;
}

/* Toggle button styling */
.boostlook #toc .nav-item-toggle {
  background: none;
  border: none;
  outline: none;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  position: static;
  margin-left: 0;
  margin-top: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  order: 1;
  transform: none;
}

/* Restore a visible focus ring for keyboard users (the rule above clears the
   default outline). */
.boostlook #toc .nav-item-toggle:focus-visible {
  outline: 2px solid var(--border-border-blue, #92cbe9);
  outline-offset: 2px;
}

/* Down-pointing caret (collapsed) */
.boostlook #toc .nav-item-toggle::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: var(--text-main-text-body-secondary, #494d50);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Up-pointing caret (expanded) */
.boostlook #toc li.nav-item.is-active > .nav-item-toggle::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 10h-2V8h2v2ZM11 12H9v-2h2v2Zm4 0h-2v-2h2v2ZM9 14H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 16H5v-2h2v2Zm12 0h-2v-2h2v2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 10h-2V8h2v2ZM11 12H9v-2h2v2Zm4 0h-2v-2h2v2ZM9 14H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 16H5v-2h2v2Zm12 0h-2v-2h2v2Z'/%3E%3C/svg%3E");
}

/* Collapsed state — hide child list */
.boostlook #toc li.nav-item:not(.is-active) > ul {
  display: none;
}

/* TOC Common End */

/*----------------- Styles specific to AsciiDoctor content start -----------------*/

/**
 * AsciiDoctor-Specific Styles
 * Styles that apply specifically to content generated by AsciiDoctor.
 * These styles handle:
 * 1. Article layout and structure
 * 2. Table of contents (TOC) styling
 * 3. Content formatting
 * 4. Responsive design adjustments
 */

/* Header Adjustments */
.boostlook #header > h1 {
  margin-top: 0;
}

.boostlook #header .author {
  display: inline-block;
  margin-top: var(--padding-padding-md, 1.125rem);
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-lg, 1.25rem);
  font-style: normal;
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-xl, 1.75rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

/* Rouge — reset font-style so only comments are italic (handled by 07-global-code.css) */
.boostlook pre.rouge code span {
  font-style: normal;
}

/* Toctitle flex layout for theme toggle */
.boostlook #toctitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* TOC leaf links — match Antora .nav-link styling for hover */
.boostlook #toc > ul.sectlevel1 li:not(.nav-item) > a {
  display: inline-block;
  padding: var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem) var(--leftbar-paddings-leftbar-padding-2xs, 0.5rem);
  border-radius: var(--padding-padding-3xs, 0.25rem);
  transition: background 0.15s ease;
}
.boostlook #toc > ul.sectlevel1 li:not(.nav-item) > a:hover {
  background: var(--colors-primary-100, #EFEFF1);
}
html.dark .boostlook #toc > ul.sectlevel1 li:not(.nav-item) > a:hover {
  background: var(--colors-primary-600, #585A64);
}

/* Active TOC link — highlights link matching current hash (match Antora) */
.boostlook #toc a.is-active-link {
  background: var(--colors-primary-100, #EFEFF1);
  border-radius: var(--padding-padding-3xs, 0.25rem);
  color: var(--text-main-text-primary, #18191b);
}
html.dark .boostlook #toc a.is-active-link {
  background: var(--colors-primary-600, #585A64);
  color: var(--text-main-text-primary, #fff);
}

/* Theme toggle for Asciidoctor pages (scoped to #toctitle to avoid Antora) */
.boostlook #toctitle .theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-main-text-body-tetriary, #62676b);
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.boostlook #toctitle .theme-toggle:hover {
  color: var(--text-main-text-body-primary, #050816);
}
html.dark .boostlook #toctitle .theme-toggle:hover {
  color: var(--text-main-text-primary, #fff);
}
/* Toggle icon visibility — match Antora: moon in light, sun in dark */
.boostlook #toctitle .theme-toggle .theme-icon-light { display: none; }
html.dark .boostlook #toctitle .theme-toggle .theme-icon-light { display: inline; }
html.dark .boostlook #toctitle .theme-toggle .theme-icon-dark { display: none; }

/* Collapsible TOC tree — matches the Antora nav-tree caret (see 13-antora.css):
   parent items become flex rows with a right-aligned dotted chevron that flips
   from down to up on expand; branches collapse by default (.is-active expands
   them). A consumer script adds .nav-item + .nav-item-toggle, toggles .is-active. */
.boostlook #toc ul[class^="sectlevel"] {
  list-style: none;
}
.boostlook #toc .nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  cursor: pointer; /* the row collapses on click */
}
/* the link keeps normal link behavior; clicking it navigates, not collapses */
.boostlook #toc .nav-item > a {
  order: 0;
  cursor: pointer;
}
/* nested list wraps to full width below the row; reset cursor so leaf/child
   rows aren't falsely marked as collapsible (nested .nav-item rows re-apply it) */
.boostlook #toc .nav-item > ul {
  flex-basis: 100%;
  order: 2;
  cursor: default;
}
.boostlook #toc .nav-item-toggle {
  order: 1;
  background: none;
  border: none;
  outline: none;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boostlook #toc .nav-item-toggle::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: var(--text-main-text-body-secondary, #494d50);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.boostlook #toc .nav-item.is-active > .nav-item-toggle::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 10h-2V8h2v2ZM11 12H9v-2h2v2Zm4 0h-2v-2h2v2ZM9 14H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 16H5v-2h2v2Zm12 0h-2v-2h2v2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 10h-2V8h2v2ZM11 12H9v-2h2v2Zm4 0h-2v-2h2v2ZM9 14H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 16H5v-2h2v2Zm12 0h-2v-2h2v2Z'/%3E%3C/svg%3E");
}
/* collapsed by default; expanded when active (Antora parity) */
.boostlook #toc .nav-item:not(.is-active) > ul {
  display: none;
}

/*----------------- Styles specific to AsciiDoctor content end -----------------*/

/*----------------- Styles specific to Antora Templates start -----------------*/

/**
 * Antora Template Styles
 * Specific styles for Antora-generated documentation.
 * These styles handle:
 * 1. Header and navigation layout
 * 2. Typography customization
 * 3. Navigation menu structure
 * 4. Content layout and formatting
 * 5. Responsive design adaptations
 */

/* Table of Contents */
.boostlook .nav {
  height: 100%;
  padding: var(--spacing-size-sm, 1rem) var(--spacing-size-lg, 1.5rem);
  position: static;
  background-color: unset;
  box-shadow: none;
  height: auto;
  overflow-y: auto;
}

/* Toc Navigation */
.boostlook #toc .nav-menu h3.title a {
  color: inherit;
  font: inherit;
}

.boostlook #toc .nav-menu h3.title a:focus,
.boostlook #toc .nav-menu h3.title a:hover {
  color: var(--text-main-text-link-blue-secondary, #0077B8);
}

/* Navigation Menu */
.boostlook .nav-panel-menu {
  overflow: visible;
}

.boostlook .nav-close {
  display: none;
}

.boostlook .nav-menu > .nav-list > .nav-list {
  margin-left: 0;
}

.boostlook .nav-list li[data-depth]:not([data-depth="1"]).is-current-page.is-active::before {
  background-color: var(--text-main-text-primary, #18191b);
}

/* Active Page Indicator — apply to the link, not the whole li */
.boostlook .nav-list .is-current-page.is-active {
  position: relative;
}

.boostlook .nav-list .is-current-page.is-active > .nav-link {
  background: var(--colors-primary-100, #EFEFF1);
  width: fit-content;
}

.dark .boostlook .nav-list .is-current-page.is-active > .nav-link {
  background: var(--colors-primary-600, #585A64);
}

.boostlook #toc .nav-list .is-current-page.is-active > .nav-link {
  color: var(--text-main-text-primary, #18191b);
}

/* Hover background on nav link items */
.boostlook .nav-menu .nav-list li:not(.nav-item) > .nav-link:hover {
  background: var(--colors-primary-100, #EFEFF1);
}

.dark .boostlook .nav-menu .nav-list li:not(.nav-item) > .nav-link:hover {
  background: var(--colors-primary-600, #585A64);
}

/* Section header layout — toggle + text inline */
.boostlook .nav-menu .nav-item:has(> .nav-item-toggle) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Nested nav-list takes full width below header */
.boostlook .nav-menu .nav-item:has(> .nav-item-toggle) > .nav-list {
  flex-basis: 100%;
  order: 2;
}

/* Chevron toggle button */
.boostlook .nav-menu .nav-item-toggle {
  background: none;
  border: none;
  outline: none;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  position: static;
  margin-left: 0;
  margin-top: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  order: 1;
  transform: none;
}

.boostlook .nav-menu .nav-item-toggle::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: var(--text-main-text-body-secondary, #494d50);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.boostlook .nav-menu .nav-item.is-active > .nav-item-toggle {
  transform: none;
}

.boostlook .nav-menu .nav-item.is-active > .nav-item-toggle::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 10h-2V8h2v2ZM11 12H9v-2h2v2Zm4 0h-2v-2h2v2ZM9 14H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 16H5v-2h2v2Zm12 0h-2v-2h2v2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13 10h-2V8h2v2ZM11 12H9v-2h2v2Zm4 0h-2v-2h2v2ZM9 14H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 16H5v-2h2v2Zm12 0h-2v-2h2v2Z'/%3E%3C/svg%3E");
}

/* Header Layout */
.boostlook #header:has(.nav-container) {
  padding: 0;
}

/* Typography */
.boostlook .doc,
.boostlook .doc i {
  font: inherit;
}
.boostlook .doc i {
  color: inherit;
}

/* TOC Container */
.boostlook #toc.toc2.nav-container {
  position: fixed;
}

.boostlook #toc.toc2.nav-container.is-active {
  position: static;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  overflow-y: auto;
}

/* Nav Toggle */
.boostlook #content .nav-toggle {
  display: flex;
  padding: var(--spacing-size-3xs, 0.25rem);
  align-items: center;
  border: none;
  border-radius: var(--spacing-size-2xs, 0.5rem);
  outline: none;
  line-height: inherit;
  height: unset;
  width: unset;
  margin-right: var(--padding-padding-xs, 0.5rem);

  background: var(--surface-background-main-base-primary, #fff);
  background-size: auto;
  background-position-x: auto;
}

.boostlook #content .nav-toggle:before {
  content: var(--icon-menu);
  line-height: 0;
}

@media screen and (min-width: 768px) {
  .boostlook #content .nav-toggle {
    display: none;
    visibility: hidden;
  }
}

/* Layout */
.boostlook .article .content {
  gap: 1rem;
}

.boostlook #content:has(.toc.sidebar) {
  display: flex;
}

/* Hide the Antora on-page TOC sidebar; the article reclaims the width */
.boostlook .toc.sidebar {
  display: none;
}

.boostlook #footer:has(> script):not(:has(> div)) {
  padding-top: 0;
  padding-bottom: 0;
}

/* Toolbar */
.boostlook .toolbar {
  position: static;
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-padding-md, 1.125rem) 0;
  color: var(--text-main-text-body-tetriary, #62676b);
  background-color: transparent;
  box-shadow: unset;
}

.boostlook .toolbar + h1 {
  margin-top: 0;
}

/* Breadcrumbs */
.boostlook .breadcrumbs {
  display: block;
  flex: 1 1;
  min-width: 0;
  padding: 0;
  font-size: inherit;
  line-height: revert;
  overflow: auto;
  scrollbar-width: none;
  margin-right: var(--spacing-size-3xs);
}

.boostlook .breadcrumbs::-webkit-scrollbar {
  display: none;
}

.boostlook .breadcrumbs ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-main-text-body-tetriary, #62676b);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

.boostlook .breadcrumbs ul li {
  font: inherit;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .boostlook .breadcrumbs ul li:not(:first-child):not(:last-child) {
    display: none;
  }

  .boostlook .breadcrumbs ul li:last-child {
    overflow: hidden;
    min-width: 0;
  }

  .boostlook .breadcrumbs ul li:last-child a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
}

.boostlook .breadcrumbs ul li a {
  font: inherit;
  color: var(--text-main-text-body-tetriary, #62676b);
  text-decoration: none;
  position: relative;
}

.boostlook .breadcrumbs ul li:last-of-type a {
  color: var(--text-main-text-link-blue-secondary, #0077B8);
}

.boostlook .breadcrumbs ul li a:hover {
  text-decoration: underline;
}

.boostlook .breadcrumbs ul li:first-of-type:not(:only-child) {
  display: flex;
  align-items: center;
  padding: 0;
  margin-right: var(--padding-padding-xs, 0.75rem);
  gap: var(--spacing-size-2xs, 0.5rem);
  border-radius: var(--spacing-size-2xs, 0.5rem);
  border: none;
  background: none;
}

.boostlook .breadcrumbs ul li:first-of-type:not(:only-child)::after {
  content: none;
}

.boostlook .breadcrumbs ul li:first-of-type:not(:only-child) a {
  display: flex;
  align-items: center;
  gap: var(--spacing-size-3xs, 0.25rem);
  line-height: 0;
  color: var(--text-main-text-primary, #18191b);
  text-decoration: none;
}

.boostlook .breadcrumbs ul li::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  flex-grow: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--surface-icons-icon-tetriary, #949a9e);
  padding: 0;
  margin: 0 var(--spacing-size-2xs, 0.5rem);
}

.boostlook .breadcrumbs ul li:first-of-type:not(:only-child)::after,
.boostlook .breadcrumbs ul li:last-of-type::after {
  content: none;
}

.boostlook .breadcrumbs ul li:first-of-type:not(:only-child) a svg {
  display: none;
}

.boostlook .breadcrumbs ul li:first-of-type:not(:only-child) a::before {
  content: var(--icon-home);
}

.boostlook .breadcrumbs ul li:first-of-type:not(:only-child) a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: var(--spacing-size-2xs, 0.5rem);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.boostlook .breadcrumbs ul li:first-of-type:not(:only-child) a:hover {
  border-color: var(--border-border-blue, #92cbe9);
  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
}

/* Spirit Navigation */
.boostlook .toolbar .spirit-nav,
.boostlook:not(:has(.doc)) .spirit-nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.boostlook .toolbar .spirit-nav .disabled,
.boostlook:not(:has(.doc)) .spirit-nav .disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.boostlook:not(:has(.doc)) .spirit-nav {
  padding-top: var(--padding-padding-md, 1.125rem);
  justify-content: flex-end;
}

.boostlook .toolbar .spirit-nav a,
.boostlook:not(:has(.doc)) .spirit-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-size-2xs, 0.5rem);
  border-radius: var(--spacing-size-2xs, 0.5rem);
  border: 1px solid transparent;
  width: 24px;
  height: 24px;
  text-decoration: none;
  padding: 0;
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.boostlook .toolbar .spirit-nav a:hover,
.boostlook:not(:has(.doc)) .spirit-nav a:hover {
  border: 1px solid var(--border-border-blue, #92cbe9);
  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
}

.boostlook .toolbar .spirit-nav a span {
  overflow: hidden;
  position: relative;
}

.boostlook:not(:has(.doc)) .spirit-nav a img {
  display: none;
  border-width: 0px;
}

/* hide default icons if elemnts exists */
.boostlook .toolbar .spirit-nav a span[title*="Previous"],
.boostlook .toolbar .spirit-nav a span[title*="Next"],
.boostlook .toolbar .spirit-nav a span[title*="Up"] {
  color: transparent;
  display: block;
  width: 100%;
  height: 100%;
}

.boostlook .toolbar .spirit-nav a span[title*="Previous"]::after,
.boostlook .toolbar .spirit-nav a span[title*="Next"]::after,
.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
}

.boostlook .toolbar .spirit-nav a span[title*="Previous"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="p"]::after {
  content: var(--icon-arrow-left);
}
.boostlook .toolbar .spirit-nav a span[title*="Next"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="n"]::after {
  content: var(--icon-arrow-right);
}
.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="u"]::after {
  content: var(--icon-arrow-up);
}
.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="u"]::after {
  content: var(--icon-arrow-up);
}

.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="h"]::after {
  content: var(--icon-home);
}

/* Tabs Elements */
.boostlook .tabs .tabpanel {
  border: revert;
  padding: var(--padding-padding-xs, 0.75rem) 0;
  background: transparent;
}

.boostlook .tablist,
.boostlook .tabs .tabpanel {
  border-bottom: 1px solid var(--border-border-primary, #e4e7ea);
}

.boostlook .tablist > ul[role="tablist"] {
  background-color: var(--surface-background-main-surface-primary, #f5f6f8);
}
.dark .boostlook .tablist > ul[role="tablist"] {
  background-color: var(--surface-background-main-surface-primary, #18191b);
}
.boostlook .tablist > ul .tab {
  position: relative;
  display: flex;
  padding: var(--padding-padding-2xs, 0.5rem) var(--padding-padding-md, 1.125rem);
  justify-content: center;
  align-items: center;
  color: var(--text-main-text-body-tetriary, #62676b);
  font-size: var(--typography-font-size-xs, 0.875rem);
  line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */
  cursor: pointer;
  border: none;
  background: transparent;
}

.boostlook .tabs.is-loading .tablist li:first-child::after,
.boostlook .tabs:not(.is-loading) .tablist li.is-selected::after {
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--text-main-text-primary, #18191b);
}

.boostlook .tablist > ul .tab * {
  color: inherit;
}

.boostlook .tablist > ul .tab.is-selected,
.boostlook .tablist > ul .tab:hover {
  color: var(--text-main-text-primary, #18191b);
}

.boostlook .tablist.ulist > ul li + li {
  margin-left: unset;
}

.boostlook .tabs:not(.is-loading) .tablist .tab:not(.is-selected) {
  background-color: transparent;
}

/* Search Field Container */
.boostlook #search-field {
  display: flex;
  position: relative;
}

/* Search Input */
.boostlook #search-input {
  padding: 0.15rem 0.75rem 0.15rem 1.75rem !important;
  border: 1px solid var(--border-border-secondary);
  border-radius: var(--radius-m, 0.375rem);
  background-color: var(--surface-background-main-surface-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.35rem center;
  background-size: 16px 16px;
  color: var(--text-main-text-body-primary);
  font-family: inherit;
  font-size: 1rem !important; /* 16px minimum prevents iOS zoom on focus */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.boostlook #search-input::placeholder {
  color: var(--text-main-text-body-tetriary);
}

.boostlook #search-input:focus {
  outline: none;
  border-color: var(--border-border-blue-primary);
  box-shadow: 0 0 0 3px var(--colors-secondary-50);
}

.boostlook #search-input:disabled {
  background: var(--colors-primary-100);
  color: var(--text-main-text-body-tetriary);
  cursor: not-allowed;
}

/* Results Dropdown */
.boostlook .search-result-dropdown-menu {
  position: absolute;
  z-index: 100;
  top: 100%;
  right: 0;
  margin-top: var(--spacing-default, 0.5rem);
  min-width: 400px;
  border-radius: var(--radius-l, 0.5rem);
  background: var(--surface-background-main-base-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.boostlook .search-result-dataset {
  padding: 0.5rem;
  border: 1px solid var(--border-border-secondary);
  border-radius: var(--radius-l, 0.5rem);
  min-width: 580px;
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  overflow: auto;
}

/* Result Component Header */
.boostlook .search-result-component-header {
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0;
  border-bottom: 1px solid var(--border-border-secondary);
  color: var(--text-main-text-body-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Result Item */
.boostlook .search-result-item {
  display: flex;
  margin: 0.25rem 0;
  border-radius: var(--radius-m, 0.375rem);
}

.boostlook .search-result-item:hover {
  background: var(--surface-background-main-surface-primary);
}

.boostlook .search-result-item .no-result {
  padding: 1rem;
  color: var(--text-main-text-body-tetriary);
  text-align: center;
}

/* Result Document Title (Left Column) */
.boostlook .search-result-document-title {
  width: 25%;
  padding: 0.625rem 0.75rem;
  border-right: 1px solid var(--border-border-secondary);
  color: var(--text-main-text-body-tetriary);
  font-size: 0.75rem;
  text-align: right;
}

/* Result Document Hit (Right Column) */
.boostlook .search-result-document-hit {
  flex: 1;
  color: var(--text-main-text-body-secondary);
  font-size: 0.8125rem;
}

.boostlook .search-result-document-hit > a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: inherit;
  text-decoration: none;
}

.boostlook .search-result-document-hit > a:hover {
  background: transparent;
}

.boostlook .search-result-document-hit .search-result-section-title {
  margin-bottom: 0.25rem;
  color: var(--text-main-text-body-primary);
  font-size: 0.875rem;
  font-weight: 500;
}

.boostlook .search-result-document-hit .search-result-highlight {
  padding: 0.1em 0.2em;
  border-radius: var(--radius-xs, 0.125rem);
  background: var(--surface-background-main-surface-blue-secondary);
  color: var(--text-main-text-link-blue);
  font-weight: 500;
}

/* Search Responsive: Mobile (< 768px) */
@media screen and (max-width: 767px) {
  .boostlook .toolbar {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .boostlook #content .nav-toggle {
    margin-right: 0;
  }

  .boostlook .search-container {
    order: 99;
    flex: 1 0 100%;
  }

  .boostlook #search-input {
    width: 100% !important;
    min-width: unset;
    font-size: 1rem !important; /* Prevents iOS zoom on focus */
  }

  .boostlook .search-result-dropdown-menu {
    position: fixed;
    top: 6rem;
    left: 1rem;
    right: 1rem;
    min-width: unset;
    max-width: unset;
    width: auto;
  }

  .boostlook .search-result-dataset {
    min-width: unset;
  }
}

/* Search Responsive: Tablet (768px - 1023px) */
@media screen and (min-width: 768px) {
  .boostlook #search-input {
    width: unset !important;
    min-width: unset !important;
  }

  .boostlook .search-result-dropdown-menu {
    position: fixed;
    top: 4rem;
    left: calc(var(--main-max-width-leftbar) + 1rem);
    right: 1rem;
    min-width: unset;
    max-width: unset;
    width: auto;
  }

  .boostlook .search-result-dataset {
    min-width: unset;
  }
}

/* Search Responsive: Desktop (1024px+) */
@media screen and (min-width: 1024px) {
  .boostlook #search-input {
    min-width: 200px !important;
    z-index: 1001;
  }

  .boostlook .search-result-dropdown-menu {
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    width: clamp(530px, 45vw, 600px);
  }
}

/*----------------- Styles specific to Antora Templates end -----------------*/

/*---------- Quickbook docs styling fixes -----------*/

/**
 * Quickbook Documentation Styles
 * Comprehensive styling for Quickbook-generated documentation, including:
 * 1. Typography and heading hierarchy
 * 2. Content blocks and spacing
 * 3. Navigation and spirit-nav elements
 * 4. Special elements (notes, tips, etc.)
 * 5. Code and syntax highlighting
 */

#boost-legacy-docs-wrapper:has(> .boostlook),
#antora-template-wrapper:has(> .boostlook),
div.source-docs-antora.boostlook:has(> .boostlook) {
  /* CharConv template fix */
  margin: auto;
}

/* Legacy boostlook container */
.boostlook#boost-legacy-docs-wrapper,
.boostlook#antora-template-wrapper,
div.source-docs-antora.boostlook {
  margin-top: 0;
  max-width: unset;
  overflow: hidden;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

.boostlook#boost-legacy-docs-wrapper > #header,
.boostlook#boost-legacy-docs-wrapper > #content,
.boostlook#boost-legacy-docs-wrapper > #footer,
.boostlook#boost-legacy-docs-wrapper > #footnotes,
.boostlook#antora-template-wrapper > #header,
.boostlook#antora-template-wrapper > #content,
.boostlook#antora-template-wrapper > #footer,
.boostlook#antora-template-wrapper > #footnotes,
div.source-docs-antora.boostlook > #header,
div.source-docs-antora.boostlook > #content,
div.source-docs-antora.boostlook > #footer,
div.source-docs-antora.boostlook > #footnotes {
  /* width: auto;
  max-width: unset;
  margin-left: auto; */
  padding-left: unset;
  padding-right: unset;
}

/* Add Side margin for legacy boostlook container */
#boost-legacy-docs-wrapper:not(:has(.doc)):not(:has(> .boostlook)),
#antora-template-wrapper:not(:has(.doc)):not(:has(> .boostlook)),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) {
  padding: 0 var(--main-margin, 3rem);
}

/* Title Block Common */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type {
  margin-bottom: var(--padding-padding-md, 1.125rem);
}

/* Title Styles */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .title {
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-2xl, 1.75rem);
  font-style: normal;
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-3xl, 2.5rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
  margin: 0;
}

/* Title Author */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .author,
  /* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .author,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .author,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .author {
  margin: 0;
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-lg, 1.25rem);
  font-style: normal;
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-xl, 1.75rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

/* Top margin for first Author in title */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div.author,
  /* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.author,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.author,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content div.author {
  margin-top: var(--padding-padding-md, 1.125rem);
}

/* Reduce top margin for next authors in authors group */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .authorgroup div.author:not(:first-child) {
  margin-top: var(--padding-padding-2xs);
}

/* Remove Top Margin for next .copyright  */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author {
  margin-top: var(--padding-padding-3xs);
}

/* Title Copyright */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .copyright,
  /* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .copyright,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .copyright,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .copyright {
  color: var(--text-main-text-body-secondary, #494d50);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  line-height: var(--typography-line-height-lg, 1.5rem);
  margin-top: var(--padding-padding-2xs, 0.5rem);
}

/* Remove Top Margin for next .copyright  */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright {
  margin-top: 0;
}

/* Title Legalnotice */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .legalnotice,
  /* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .legalnotice,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .legalnotice,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .legalnotice {
  color: var(--text-main-text-body-primary, #2a2c30);
  font-size: var(--typography-font-size-sm, 1rem);
  font-style: normal;
  line-height: var(--typography-line-height-lg, 1.5rem);
  margin-top: var(--padding-padding-2xs, 0.5rem);
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .legalnotice,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .legalnotice,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content .legalnotice {
  margin-bottom: var(--padding-padding-md, 1.125rem);
}

/* Remove <hr/>s  */
.boostlook:not(:has(.doc)) .titlepage hr {
  display: none;
}

/* Table of Contents */
.boostlook:not(:has(.doc)) div.toc {
  color: var(--text-main-text-body-secondary, #494d50);
  font-family: var(--font-family-body, "Mona Sans");
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  line-height: var(--typography-line-height-md, 1.25rem);
  margin: 0;
  margin-bottom: var(--padding-padding-md, 1.125rem);
  padding: 0;
  border: none;
}

.boostlook:not(:has(.doc)) div.toc > p {
  display: flex;
  padding: var(--spacing-size-3xs, 0.25rem);
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-2xs, 0.75rem);
  font-variation-settings: "wght" 600, "wdth" 87.5;
  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

.boostlook:not(:has(.doc)) div.toc > p > * {
  font: inherit;
  color: inherit;
}

.boostlook:not(:has(.doc)) div.toc .toc dt {
  color: var(--text-main-text-body-secondary, #494d50);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  line-height: var(--typography-line-height-md, 1.25rem);
}

.boostlook:not(:has(.doc)) div.toc dd dd {
  padding-left: var(--leftbar-paddings-leftbar-padding-sm);
}

/* Section Layout */
.boostlook#boost-legacy-docs-wrapper:not(:has(.doc)):not(:has(> .boostlook)) > *,
.boostlook#antora-template-wrapper:not(:has(.doc)):not(:has(> .boostlook)) > *,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > * {
  /* max-width: var(--main-content-width);
  margin-left: inherit;
  margin-right: inherit; */
  margin: 0 auto;
}

/* hide footer spirit nav since it wasn't visible before */
.boostlook:not(:has(.doc)) div:nth-of-type(4).spirit-nav,
.boostlook#boost-legacy-docs-wrapper div.spirit-nav:last-child,
.boostlook#antora-template-wrapper div.spirit-nav:last-child,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spirit-nav:last-child {
  display: none !important;
}

/* hidden elems */
.boostlook:not(:has(.doc)) > hr,
.boostlook:not(:has(.doc)) .table-break {
  display: none;
}

/* Content Blocks */
.boostlook:not(:has(.doc)) .inlinemediaobject:has(> img):first-child:last-child {
  margin: var(--padding-padding-xs, 0.75rem) 0;
}

.boostlook :is(h1, h2, h3, h4, h5) code,
.boostlook .doc :is(h1, h2, h3, h4, h5) code {
  background: transparent !important;
  border: none;
  font-size: 0.85em;
  font-weight: 400;
  color: inherit;
  padding: 0;
  display: initial;
  transition: none;
}

.boostlook:not(:has(.doc)) a:is(h1 a, h2 a, h3 a, h4 a, h5 a) code {
  background: transparent !important;
  border: none;
  font-size: inherit;
  color: inherit;
  padding: 0;
  display: initial;
  transition: none;
}

/* Special Blocks */
/* hide legacy icon */
.boostlook:not(:has(.doc)) div:not(.admonitionblock).note > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).tip > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).important > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).caution > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).warning > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).blurb > table tr:first-child td,
.boostlook:not(:has(.doc)) p.blurb > table tr:first-child td {
  display: none;
}

/* Special Blocks Margins */
.boostlook:not(:has(.doc)) div.note,
.boostlook:not(:has(.doc)) div.tip,
.boostlook:not(:has(.doc)) div.important,
.boostlook:not(:has(.doc)) div.caution,
.boostlook:not(:has(.doc)) div.warning,
.boostlook:not(:has(.doc)) div.blurb,
.boostlook:not(:has(.doc)) p.blurb {
  margin-top: var(--padding-padding-xs, 0.75rem);
  margin-bottom: var(--padding-padding-2xs);
}

.boostlook:not(:has(.doc)) .titlepage + div.note,
.boostlook:not(:has(.doc)) .titlepage + div.tip,
.boostlook:not(:has(.doc)) .titlepage + div.important,
.boostlook:not(:has(.doc)) .titlepage + div.caution,
.boostlook:not(:has(.doc)) .titlepage + div.warning,
.boostlook:not(:has(.doc)) .titlepage + div.blurb,
.boostlook:not(:has(.doc)) .titlepage + p.blurb {
  margin-top: var(--padding-padding-2xs);
}

/* Tables */
/* Make div with Table display block */
.boostlook:not(:has(.doc)) div.table {
  display: block;
}

/* Enable Horizontal Scroll */
.boostlook:not(:has(.doc)) div.table .table-contents,
.boostlook:not(:has(.doc)) .informaltable:has(> .table) {
  overflow: auto;
}

/* References Table */
/* This is specific selector for refences tables which containes many tables and only tables as direct children */
.boostlook:not(:has(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) {
  display: flex;
  flex-direction: column;
  gap: var(--padding-padding-md, 1.125rem);
  /* border: 2px solid red; */
}

/* Disable margins for all Headings inside table */
.boostlook:not(:has(.doc)) .informaltable:has(> .table) :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
}

/* Table has inner table th  */
.boostlook:not(:has(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) th {
  border: none;
  padding: 0 0 var(--padding-padding-xs, 0.75rem) 0;
  background: none;
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-md, 1.125rem);
  font-style: normal;
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-xl, 1.75rem); /* 155.556% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

/* Disable global cell paddings */
.boostlook:not(:has(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) > tbody > tr > td {
  padding: 0;
}

/* Add border radius to tbody first row */
.boostlook:not(:has(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tr:last-child td:first-child {
  border-top-left-radius: var(--spacing-size-2xs, 0.5rem);
  overflow: hidden;
}

/* Add border radius to tbody first row */
.boostlook:not(:has(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tr:last-child td:last-child {
  border-top-right-radius: var(--spacing-size-2xs, 0.5rem);
  overflow: hidden;
}

/* Select Inner Headings and make it look as table head */
.boostlook:not(:has(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tbody :is(h1, h2, h3, h4, h5, h6) {
  padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem);
  gap: var(--spacing-size-xs, 0.75rem);
  background: var(--surface-background-main-surface-primary, #f5f6f8);
  color: var(--text-main-text-body-tetriary, #62676b);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

/* Inner table styles */
.boostlook:not(:has(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) table.simplelist {
  width: 100%;
}

.boostlook:not(:has(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) table.simplelist td {
  border: none;
  padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem);
}

/* Footnotes */
.boostlook:not(:has(.doc)) .footnotes {
  margin-top: var(--padding-padding-lg);
  border-top: 1px solid var(--border-border-primary);
}

.boostlook:not(:has(.doc)) .footnotes hr {
  display: none;
}

/* Copyright Footer */
/* If Footer has no content than use it as bottom spacer */
.boostlook .copyright-footer:empty {
  padding-top: var(--main-margin);
}

/* If Footer has content */
.boostlook .copyright-footer:not(:empty) {
  padding: var(--padding-padding-lg) 0;
}

/* Footer Content */
.boostlook:not(:has(.doc)) .copyright-footer {
  color: var(--text-main-text-body-quaternary, #949a9e);
  font-size: var(--typography-font-size-xs);
  font-variation-settings: "wght" 500, "wdth" 87.5;
  line-height: var(--typography-line-height-sm, 1rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
  text-align: left;
}

/* Footer Content  */
.boostlook:not(:has(.doc)) .copyright-footer p {
  text-align: inherit;
  font-size: var(--typography-font-size-2xs);
  color: var(--text-main-text-body-primary, #2a2c30);
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content hr,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content hr,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content hr {
  display: none;
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet {
  position: relative;
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.highlight:has(> pre),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.highlight:has(> pre),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.highlight:has(> pre) {
  margin: 0;
  border: none;
  padding: 0;
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.highlight:has(> pre) pre,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.highlight:has(> pre) pre,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.highlight:has(> pre) pre {
  padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem);
  margin-top: var(--padding-padding-3xs, 0.25rem);
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > pre:not([class]),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > pre:not([class]),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content > pre:not([class]) {
  margin-left: 0;
  margin-right: 0;
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]),
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > pre:not([class]):not(:last-child),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > pre:not([class]):not(:last-child),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content > pre:not([class]):not(:last-child),
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet:not(:last-child) pre,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet:not(:last-child) pre,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet:not(:last-child) pre {
  margin-bottom: var(--padding-padding-xs, 0.75rem);
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content + p:has(> small),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content + p:has(> small),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content + p:has(> small) {
  padding: var(--padding-padding-lg) 0 !important;
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .footnotes,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .footnotes,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content .footnotes {
  padding-top: var(--padding-padding-xs, 0.75rem);
}

@media screen and (min-width: 768px) {
  body.article:has(.boostlook#boost-legacy-docs-wrapper),
  body.article:has(.boostlook#antora-template-wrapper),
  body.article:has(div.source-docs-antora.boostlook) {
    /* !important ovverides website own styles !important
    * Adjust this to "padding: 0 1rem 0 1rem"
    * when website container width will be used as in new look design
    */
    padding: 0 !important;
  }

  #boost-legacy-docs-wrapper .boostlook #toc.toc2,
  #antora-template-wrapper .boostlook #toc.toc2,
  div.source-docs-antora.boostlook:has(> .boostlook) .boostlook #toc.toc2 {
    /* Adjust this to "max(1rem, 50% - 45rem)"
    * when website container width will be used as in new look design
    */
    left: max(0rem, 50% - 45rem);
  }
}
/* TOC Common End */

/*----------------- Quickbook Documentation Styles end -----------------*/

/*----------------- Library README Styles start -----------------*/

.boostlook#libraryReadMe {
  margin-left: 0;
  background: #fff;
}

html.dark .boostlook#libraryReadMe {
  background: var(--colors-primary-850);
}

.boostlook#libraryReadMe > * {
  max-width: unset;
  margin-left: inherit;
  margin-right: inherit;
}

.boostlook#libraryReadMe > h1:first-child {
  margin-top: 0;
}

.boostlook#libraryReadMe h1 {
  font-size: 1.75rem;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .boostlook#libraryReadMe h1 {
    font-size: 2.5rem;
  }
}

.boostlook#libraryReadMe div.highlight:has(> pre) {
  background: transparent !important;
}

.boostlook#libraryReadMe p:has(> a img ) {
  display:flex;
  flex-wrap:wrap;
  justify-content: flex-start;
  align-items: center;
}

.boostlook#libraryReadMe p a:has(> img ) {
  margin-left:.5rem;
}

.boostlook#libraryReadMe > pre:not(:is(dd pre, td pre)) {
  padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem);
  border: 1px solid var(--border-border-secondary, #d5d7d9);
}

/*----------------- Library README Styles end -----------------*/

/*----------------- AsciiDoctor-Specific Responsive TOC Layout start -----------------*/

/* Prevent header/content/footer padding from jumping at 990px breakpoint */
@media (min-width: 990px) {
  :root:not(.v3):has(.boostlook) {
    --main-max-width-leftbar: 18.25rem;
    --main-margin: 0rem;
  }
}

/* === Tablet/Desktop: TOC Sidebar Layout (768px+) === */
@media screen and (min-width: 768px) {
  .boostlook #toc.toc2 {
    position: fixed !important;
    left: 0 !important;
    width: var(--main-max-width-leftbar) !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  .boostlook #toggle-toc {
    position: fixed !important;
    left: 1rem !important;
    top: 2rem !important;
  }

  .toc2 .boostlook:has(> #content .doc) {
    margin-left: 0;
  }

  html.toc-visible .boostlook {
    margin-left: 0 !important;
  }

  .article.toc2.toc-left:has(.boostlook) {
    max-width: none !important;
  }
  html:not(.toc-hidden, .toc-visible) .article.toc2.toc-left:has(.boostlook),
  .toc-visible.toc-pinned .article.toc2.toc-left:has(.boostlook) {
    margin-left: var(--main-max-width-leftbar) !important;
  }
}

/* === Wide Screens: Expanded Content Width (1536px+) === */
@media screen and (min-width: 1536px) {
  :root:not(.v3):has(.boostlook) {
    --main-content-width: 1100px;
    --main-content-left-spacing: 2rem;
  }
}

/* === Ultra-Wide Screens: Maximum content width (1920px+) === */
@media screen and (min-width: 1920px) {
  :root:not(.v3):has(.boostlook) {
    --main-content-width: 1300px;
    --main-content-left-spacing: 4rem;
  }

  .boostlook #content,
  .boostlook #header > h1,
  .boostlook #header .author {
    margin-left: var(--main-content-left-spacing);
  }
}

/*----------------- AsciiDoctor-Specific Responsive TOC Layout end -----------------*/

/* ============================================================
   Site component refinements (website-v2), scoped under .boostlook.
   These layer on the shared Boostlook typography for specific consumer
   components. They only match where the component class is present (the
   website-v2 site), so they are inert in Antora/standalone contexts.
   Note: these reference website-v2 design tokens by design.
   ============================================================ */

/* v3 site: a .boostlook island sits on the host page's own surface, not
   boostlook's doc surface, so clear the background boostlook sets on every
   .boostlook element. Docs (iframe html has no .v3) keep their surface. */
html.v3 .boostlook {
  background: transparent;
}

/* Non-doc site components use v2's own text color and type, not boostlook's doc
   grey and forced condensed "Mona Sans". Inherit family (!important to beat
   boostlook's base rule) and variation settings from the host page; headings
   with their own font-family (e.g. --font-display) still win. */
.boostlook:where(:not(:has(.doc))) {
  color: var(--color-text-primary);
  font-family: inherit !important;
  font-variation-settings: inherit;
}

/* boostlook renders bold as a condensed variable-font axis
   ("wght" 600, "wdth" 87.5); non-doc components should use the site's normal
   bold weight, so drop the axis override and let font-weight take effect. */
.boostlook:where(:not(:has(.doc))) :is(b, strong) {
  font-variation-settings: inherit;
}
.boostlook:where(:not(:has(.doc))) p {
  color: inherit;
}

/* Content modal (testimonials) — #2491 */
.boostlook.content-modal__prose {
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-tight);
}

.boostlook.content-modal__prose :is(h2, h3, h4, h5, h6) {
  margin: var(--space-xlarge) 0 var(--space-large);
  color: var(--color-text-primary);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display-regular);
}

.boostlook.content-modal__prose h2 {
  font-size: var(--font-size-large);
}

.boostlook.content-modal__prose h3 {
  font-size: var(--font-size-base);
}

.boostlook.content-modal__prose :is(h4, h5, h6) {
  font-size: var(--font-size-small);
}

.boostlook.content-modal__prose > :first-child {
  margin-top: 0;
}

.boostlook.content-modal__prose p {
  margin: var(--space-default) 0;
  padding: 0;
  line-height: var(--line-height-loose);
}

/* Markdown card + user-profile bio (shared .markdown-content) — #2491 */
.boostlook.markdown-content {
  gap: var(--space-medium);
  padding: 0 var(--space-large);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-code);
  letter-spacing: var(--letter-spacing-tight);
  overflow-y: auto;
  overflow-wrap: anywhere;
  min-width: 0;
}

.boostlook.markdown-content ul,
.boostlook.markdown-content ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.boostlook.markdown-content li {
  margin-top: var(--space-medium);
}

/* The container's flex `gap` already spaces the list from a preceding block,
   so the first item shouldn't add its own top margin on top of it. */
.boostlook.markdown-content li:first-child {
  margin-top: 0;
}

/* Unordered lists: custom bullet centered in a fixed gutter. */
.boostlook.markdown-content ul > li {
  position: relative;
  padding-left: var(--space-xlarge);
}

.boostlook.markdown-content ul > li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-xlarge);
  height: calc(var(--font-size-small) * 1.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
}

/* Ordered lists: native decimal numbering (a custom ::before counter
   misaligns; native numbers follow the item's font size cleanly). */
.boostlook.markdown-content ol {
  list-style: decimal;
  padding-left: var(--space-xl);
}

.boostlook.markdown-content ol > li {
  padding-left: var(--space-s);
}

.boostlook.markdown-content a {
  color: var(--color-text-link-accent);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

/* Code blocks defer to boostlook's own code styling; only add horizontal-scroll
   safety so a wide line scrolls inside the narrow card instead of overflowing. */
.boostlook.markdown-content pre {
  overflow-x: auto;
}

/* boostlook's bare-markdown layer adds a margin-top to a pre that follows a
   paragraph (with !important); the card spaces blocks with the container's
   flex gap, so cancel it to avoid doubled spacing above code blocks. Matches
   that rule's (0,2,2) specificity and wins on source order. */
.boostlook.markdown-content p + pre {
  margin-top: 0 !important;
}

.boostlook.markdown-content h1,
.boostlook.markdown-content h2,
.boostlook.markdown-content h3,
.boostlook.markdown-content h4,
.boostlook.markdown-content h5,
.boostlook.markdown-content h6 {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  margin: 0;
}

.boostlook.markdown-content h1 { font-size: var(--font-size-large); }
.boostlook.markdown-content h2 { font-size: var(--font-size-medium); }
.boostlook.markdown-content h3 { font-size: var(--font-size-base); }
.boostlook.markdown-content h4,
.boostlook.markdown-content h5,
.boostlook.markdown-content h6 { font-size: var(--font-size-small); }

/* Asciidoctor wraps each heading in a .sectN div, so it isn't a direct flex child and the
   container gap can't space it — the `margin: 0` above collapses it against its body text.
   Restore the gap, scoped to the nested case so flat markdown doesn't double up. #2535. */
.boostlook.markdown-content :is(.sect1, .sect2, .sect3) > :is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: var(--space-default);
}

.boostlook.markdown-content b,
.boostlook.markdown-content strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* Color comes from the non-doc `color: inherit` rule above; this just keeps v2's size/spacing. */
.boostlook.markdown-content p {
  font-size: var(--font-size-small);
  line-height: var(--line-height-code);
  letter-spacing: var(--letter-spacing-tight);
  padding: 0;
  margin: 0;
}

/* Post detail (news article body) — #2491. The container keeps its layout
   (flex/gap/border) in post-detail.css; the rich-text typography lives here.
   Body copy is intentionally secondary grey (overrides the non-doc primary
   default above); headings and bold use primary. */
.boostlook.post-detail__body {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-tight);
}

.boostlook.post-detail__body a {
  color: inherit;
  text-decoration: underline;
}

.boostlook.post-detail__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius-m);
}

.boostlook.post-detail__body :is(pre, code) {
  font-family: var(--font-code);
  font-size: var(--font-size-small);
}

.boostlook.post-detail__body pre {
  padding: var(--space-medium);
  border-radius: var(--border-radius-m);
  background: var(--color-surface-mid);
  overflow-x: auto;
}

/* Rhythm between blocks comes from the container's flex `gap`, so strip the
   block margins boostlook's bare-markdown layer adds; otherwise they stack on
   the gap and the spacing doubles. Lists stay tight (as v2 had them). */
.boostlook.post-detail__body :is(p, ul, ol, li, pre, h1, h2, h3, h4, h5, h6) {
  margin: 0;
}

.boostlook.post-detail__body :is(ul, ol) {
  padding-left: var(--space-large);
  list-style-position: outside;
}

.boostlook.post-detail__body ul { list-style-type: disc; }
.boostlook.post-detail__body ol { list-style-type: decimal; }
.boostlook.post-detail__body ul ul { list-style-type: circle; }
.boostlook.post-detail__body :is(ol ol, ul ol) { list-style-type: lower-alpha; }

.boostlook.post-detail__body :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.boostlook.post-detail__body h1 { font-size: var(--font-size-xl); }
.boostlook.post-detail__body h2 { font-size: var(--font-size-large); }
.boostlook.post-detail__body h3 { font-size: var(--font-size-medium); }
.boostlook.post-detail__body :is(h4, h5, h6) { font-size: var(--font-size-base); }

.boostlook.post-detail__body :is(b, strong) {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* Release highlights card (what's-new via inline_markdown) — #2491. inline_markdown
   emits only <strong> and <code>; layout/base type stays in release-highlights-card.css.
   Bold uses the site's medium weight; inline code inherits boostlook's treatment (the
   leaf-case reset in 04-reset.css covers `p.boostlook > code`). */
.boostlook.release-highlight__description strong {
  font-weight: var(--font-weight-medium);
}