/**
 * Boost Look CSS Framework
 * Version: 1.0.0
 * Description: A comprehensive CSS framework for styling Boost C++ Library documentation
 * Author: Boost C++ Libraries
 * License: BSL-1.0
 */

/**
 * File Structure Overview:
 * 1. Root Variables (Light/Dark themes)
 * 2. HTML Variables
 * 3. Font-Face Declarations
 * 4. CSS Reset
 * 5. Global Styles for .boostlook
 * 6. Styling for Scrollbar Display
 * 7. AsciiDoctor-specific Styles
 * 8. Antora Templates Styles
 * 9. Quickbook Documentation Styles
 * 10. Library README Styles
 */

/**
 * 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
 */

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

/* Root CSS Variables
 * Defines core design tokens used throughout the framework.
 * Organized into:
 * 1. General Variables (cross-theme)
 * 2. Light Theme Variables
 * 3. Dark Theme Variables
 */

:root {
  /* General Variables - Core design tokens for all themes */
  --bl-primary-color: rgb(255, 159, 0);  /* Boost's signature orange color */
  --bl-header-height: 2.5rem;            /* Standard header height */

  /* Light Theme Variables - Color scheme for light mode */
  /* General Variables */
  --light-bl-secondary-color: rgb(2, 132, 199);

  /* Background and Border Colors */
  --light-bl-background: rgb(255, 255, 255);
  --light-bl-border-color: rgb(209, 209, 209);
  --light-bl-card-background-color: rgb(255, 255, 255);
  --light-bl-code-background: rgb(248, 248, 248);
  --light-bl-code-border-color: rgb(220, 220, 220);
  --light-bl-pre-background: rgb(248, 248, 248);
  --light-bl-quote-background: rgb(255, 255, 255);
  --light-bl-table-head-background: rgb(248, 248, 248);
  --light-bl-table-stripe-color: rgb(248, 248, 248);
  --light-bl-tabpanel-background: rgb(255, 255, 255);

  /* Text Colors */
  --light-bl-code-text-color: rgb(0, 0, 0);
  --light-bl-header-color: rgb(49, 74, 87);
  --light-bl-nav-link-color: rgb(51, 65, 85);
  --light-bl-paragraph-color: rgb(0, 0, 0);
  --light-bl-text-color: rgb(51, 65, 85);

  /* Interactive Elements */
  --light-bl-link-color: rgb(2, 132, 199);
  --light-bl-link-hover-color: rgba(255, 159, 0);
  --light-bl-nav-link-hover-color: rgb(2, 132, 199);

  /* Syntax Highlighting */
  --light-bl-hljs-attribute-color: rgb(70, 130, 180);
  --light-bl-hljs-doctag-color: rgb(221, 17, 68);
  --light-bl-hljs-keyword-color: rgb(51, 51, 51);
  --light-bl-hljs-number-color: rgb(0, 128, 128);
  --light-bl-hljs-section-color: rgb(153, 0, 0);

  /* UI Elements */
  --light-bl-breadcrumbs-svg-color: rgb(0, 0, 0);
  --light-bl-caret-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23000000'%3E%3Cpath%20d='M320-200v-560l440%20280-440%20280Z'/%3E%3C/svg%3E");
  --light-bl-nav-fade-color: rgb(255, 255, 255, 1);
  --light-bl-pasteboard-color: rgb(229, 231, 235);

  /* Scrollbar Colors */
  --light-bl-scrollbar-track-color: rgb(234, 240, 243);
  --light-bl-scrollbar-thumb-color: rgb(193, 193, 193);
  --light-bl-scrollbar_hover-thumb-color: rgb(193, 193, 193);

  /* Additional Theme Variables */
  --light-bl-table-border-color: rgb(209, 209, 209);
  --light-bl-tab-background: rgb(240, 240, 240);

  /**
   * Dark Theme Variables
   * Color palette and design tokens for dark mode
   */
  /* General Variables */
  --dark-bl-secondary-color: rgb(125, 211, 252);

  /* Background and Border Colors */
  --dark-bl-background: rgb(5, 26, 38);
  --dark-bl-border-color: rgb(3, 25, 37);
  --dark-bl-card-background-color: rgb(23, 42, 52);
  --dark-bl-code-background: rgb(5, 26, 38);
  --dark-bl-code-border-color: transparent;
  --dark-bl-pre-background: rgb(5, 26, 38);
  --dark-bl-quote-background: rgb(11, 59, 82);
  --dark-bl-table-head-background: rgb(5, 26, 38);
  --dark-bl-table-stripe-color: rgb(49,74,87);
  --dark-bl-table-border-color: rgb(49, 74, 87);
  --dark-bl-tabpanel-background: rgb(49, 74, 87);
  --dark-bl-tab-background: rgb(30, 50, 65);

  /* Text Colors */
  --dark-bl-code-text-color: rgb(255, 255, 255);
  --dark-bl-header-color: rgb(255, 255, 255);
  --dark-bl-nav-link-color: rgb(255, 255, 255);
  --dark-bl-paragraph-color: rgb(255, 255, 255);
  --dark-bl-text-color: rgb(255, 255, 255);

  /* Interactive Elements */
  --dark-bl-link-color: rgb(125, 211, 252);
  --dark-bl-link-hover-color: rgb(255, 159, 0);
  --dark-bl-nav-link-hover-color: rgb(2, 132, 199);

  /* Syntax Highlighting */
  --dark-bl-hljs-attribute-color: rgb(70, 130, 180);
  --dark-bl-hljs-doctag-color: rgb(255, 99, 132);
  --dark-bl-hljs-keyword-color: rgb(173, 216, 230);
  --dark-bl-hljs-number-color: rgb(72, 209, 204);
  --dark-bl-hljs-section-color: rgb(255, 69, 58);

  /* UI Elements */
  --dark-bl-breadcrumbs-svg-color: rgb(255, 255, 255);
  --dark-bl-caret-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24px'%20viewBox='0%20-960%20960%20960'%20width='24px'%20fill='%23ccc'%3E%3Cpath%20d='M320-200v-560l440%20280-440%20280Z'/%3E%3C/svg%3E");
  --dark-bl-nav-fade-color: rgb(23, 42, 52);
  --dark-bl-pasteboard-color: rgb(05, 26, 38);
  --dark-bl-pagination-color: rgb(200, 200, 200);
  --dark-bl-quote-word-color: rgb(209, 228, 242);

  /* Scrollbar Colors */
  --dark-bl-scrollbar-track-color: rgb(46, 58, 66);
  --dark-bl-scrollbar-thumb-color: rgb(109, 124, 133);
  --dark-bl-scrollbar_hover-thumb-color: rgb(147, 161, 170);

  /**
   * Specific Use Colors
   * Special purpose colors for both light and dark themes
   */
  /* Light Theme Special Colors */
  --site-light-red: red;
  --site-light-green: green;
  --site-light-lime: #00FF00;
  --site-light-blue: blue;
  --site-light-navy: rgb(20, 20, 164);
  --site-light-yellow: yellow;
  --site-light-magenta: magenta;
  --site-light-indigo: #4B0082;
  --site-light-cyan: cyan;
  --site-light-purple: purple;
  --site-light-gold: #987301;
  --site-light-silver: silver;
  --site-light-gray: #808080;

  /* Dark Theme Special Colors */
  --site-dark-red: #fa6f6f;
  --site-dark-green: #45b945;
  --site-dark-lime: #00FF00;
  --site-dark-blue: #6666f8;
  --site-dark-navy: #6060c4;
  --site-dark-yellow: yellow;
  --site-dark-magenta: magenta;
  --site-dark-indigo: #a53def;
  --site-dark-cyan: cyan;
  --site-dark-purple: #ac43ac;
  --site-dark-gold: gold;
  --site-dark-silver: silver;
  --site-dark-gray: #808080;
}

/*----------------- 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 */
html {
  /* General Variables */
  --bl-secondary-color: var(--light-bl-secondary-color);

  /* Background and Borders */
  --bl-background: var(--light-bl-background);
  --bl-border-color: var(--light-bl-border-color);
  --bl-card-background-color: var(--light-bl-card-background-color);
  --bl-code-background: var(--light-bl-code-background);
  --bl-code-border-color: var(--light-bl-code-border-color);
  --bl-pre-background: var(--light-bl-pre-background);
  --bl-quote-background: var(--light-bl-quote-background);
  --bl-table-border-color: var(--light-bl-table-border-color);
  --bl-table-head-background: var(--light-bl-table-head-background);
  --bl-table-stripe-color: var(--light-bl-table-stripe-color);
  --bl-tabpanel-background: var(--light-bl-tabpanel-background);

  /* Typography and Colors */
  --bl-code-text-color: var(--light-bl-code-text-color);
  --bl-header-color: var(--light-bl-header-color);
  --bl-link-color: var(--light-bl-link-color);
  --bl-link-hover-color: var(--light-bl-link-hover-color);
  --bl-nav-link-color: var(--light-bl-nav-link-color);
  --bl-nav-link-hover-color: var(--light-bl-nav-link-hover-color);
  --bl-nav-fade-color: var(--light-bl-nav-fade-color);
  --bl-paragraph-color: var(--light-bl-paragraph-color);
  --bl-text-color: var(--light-bl-text-color);

  /* UI Components */
  --bl-breadcrumbs-svg-color: var(--light-bl-breadcrumbs-svg-color);
  --bl-caret-svg: var(--light-bl-caret-svg);
  --bl-pasteboard-color: var(--light-bl-pasteboard-color);

  /* Syntax Highlighting */
  --bl-hljs-doctag-color: var(--light-bl-hljs-doctag-color);
  --bl-hljs-attribute-color: var(--light-bl-hljs-attribute-color);
  --bl-hljs-keyword-color: var(--light-bl-hljs-keyword-color);
  --bl-hljs-number-color: var(--light-bl-hljs-number-color);
  --bl-hljs-section-color: var(--light-bl-hljs-section-color);

  /* Scrollbar Styling */
  --bl-scrollbar-track-color: var(--light-bl-scrollbar-track-color);
  --bl-scrollbar-thumb-color: var(--light-bl-scrollbar-thumb-color);
  --bl-scrollbar_hover-thumb-color: var(--light-bl-scrollbar_hover-thumb-color);

  /* Special Purpose Colors */
  --color-red: var(--site-light-red);
  --color-green: var(--site-light-green);
  --color-lime: var(--site-light-lime);
  --color-blue: var(--site-light-blue);
  --color-navy: var(--site-light-navy);
  --color-yellow: var(--site-light-yellow);
  --color-magenta: var(--site-light-magenta);
  --color-indigo: var(--site-light-indigo);
  --color-cyan: var(--site-light-cyan);
  --color-purple: var(--site-light-purple);
  --color-gold: var(--site-light-gold);
  --color-silver: var(--site-light-silver);
  --color-gray: var(--site-light-gray);
}

/* Dark Theme Configuration */
html.dark {
  /* General Variables */
  --bl-secondary-color: var(--dark-bl-secondary-color);

  /* Background and Borders */
  --bl-background: var(--dark-bl-background);
  --bl-border-color: var(--dark-bl-border-color);
  --bl-card-background-color: var(--dark-bl-card-background-color);
  --bl-code-background: var(--dark-bl-code-background);
  --bl-code-border-color: var(--dark-bl-code-border-color);
  --bl-pre-background: var(--dark-bl-code-background);
  --bl-quote-background: var(--dark-bl-quote-background);
  --bl-quote-word-color: var(--dark-bl-quote-word-color);
  --bl-table-border-color: var(--dark-bl-table-border-color);
  --bl-table-head-background: var(--dark-bl-table-head-background);
  --bl-table-stripe-color: var(--dark-bl-table-stripe-color);
  --bl-tabpanel-background: var(--dark-bl-tabpanel-background);

  /* Typography and Colors */
  --bl-code-text-color: var(--dark-bl-code-text-color);
  --bl-header-color: var(--dark-bl-header-color);
  --bl-link-color: var(--dark-bl-link-color);
  --bl-link-hover-color: var(--dark-bl-link-hover-color);
  --bl-nav-link-color: var(--dark-bl-nav-link-color);
  --bl-nav-link-hover-color: var(--dark-bl-nav-link-hover-color);
  --bl-nav-fade-color: var(--dark-bl-nav-fade-color);
  --bl-paragraph-color: var(--dark-bl-paragraph-color);
  --bl-text-color: var(--dark-bl-text-color);

  /* UI Components */
  --bl-breadcrumbs-svg-color: var(--dark-bl-breadcrumbs-svg-color);
  --bl-caret-svg: var(--dark-bl-caret-svg);
  --bl-pasteboard-color: var(--dark-bl-pasteboard-color);
  --bl-pagination-color: var(--dark-bl-pagination-color);

  /* Syntax Highlighting */
  --bl-hljs-attribute-color: var(--dark-bl-hljs-attribute-color);
  --bl-hljs-doctag-color: var(--dark-bl-hljs-doctag-color);
  --bl-hljs-keyword-color: var(--dark-bl-hljs-keyword-color);
  --bl-hljs-number-color: var(--dark-bl-hljs-number-color);
  --bl-hljs-section-color: var(--dark-bl-hljs-section-color);

  /* Scrollbar Styling */
  --bl-scrollbar-track-color: var(--dark-bl-scrollbar-track-color);
  --bl-scrollbar-thumb-color: var(--dark-bl-scrollbar-thumb-color);
  --bl-scrollbar_hover-thumb-color: var(--dark-bl-scrollbar_hover-thumb-color);

  /* Special Purpose Colors */
  --color-red: var(--site-dark-red);
  --color-green: var(--site-dark-green);
  --color-lime: var(--site-dark-lime);
  --color-blue: var(--site-dark-blue);
  --color-navy: var(--site-dark-navy);
  --color-yellow: var(--site-dark-yellow);
  --color-magenta: var(--site-dark-magenta);
  --color-indigo: var(--site-dark-indigo);
  --color-cyan: var(--site-dark-cyan);
  --color-purple: var(--site-dark-purple);
  --color-gold: var(--site-dark-gold);
  --color-silver: var(--site-dark-silver);
  --color-gray: var(--site-dark-gray);
}

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

/*----------------- 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. Noto Sans Mono: 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 Display";
  font-style: normal;
  font-weight: 100 900;            /* Variable font weight range */
  font-variation-settings: "wght" 400;
  font-stretch: semi-condensed;
  font-display: block;             /* Prevents FOIT */
  src: url('/_/fonts/NotoSansDisplay.ttf') format('truetype'),
       url('../../../../tools/boostlook/NotoSansDisplay.ttf') format('truetype'),
       url("https://cppalliance.org/fonts/NotoSansDisplay.ttf") format('truetype');
}

/* Noto Sans Display - Italic */
@font-face {
  font-family: "Noto Sans Display";
  font-style: italic;
  font-weight: 100 900;            /* Variable font weight range */
  font-variation-settings: "wght" 400;
  font-stretch: semi-condensed;
  font-display: block;             /* Prevents FOIT */
  src: url("/font/NotoSansDisplay-Italic.ttf") format("truetype"),
       url("../../../../tools/boostlook/NotoSansDisplay-Italic.ttf") format("truetype"),
       url("https://cppalliance.org/fonts/NotoSansDisplay-Italic.ttf") format('truetype');
}

/* Noto Sans Mono - Variable Weight */
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-weight: 100 900;            /* Variable font weight range */
  font-variation-settings: "wght" 400;
  font-stretch: semi-condensed;
  font-display: block;             /* Prevents FOIT */
  src: url("/_/boostlook/NotoSansMono.ttf") format("truetype"),
       url("../../../../tools/boostlook/NotoSansMono.ttf") format("truetype"),
       url("https://cppalliance.org/fonts/NotoSansMono.ttf") format('truetype');
}

/* Noto Sans Mono - Fixed Weight */
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-weight: 400;                /* Fixed weight for specific use cases */
  font-stretch: ultra-condensed;
  font-display: block;             /* Prevents FOIT */
  src: url("/_/boostlook/NotoSansMono.ttf") format("truetype"),
       url("../../../../tools/boostlook/NotoSansMono.ttf") format("truetype"),
       url("https://cppalliance.org/fonts/NotoSansMono.ttf") format('truetype');
}

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

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

/**
 * Modern CSS Reset
 * A minimal CSS reset that:
 * 1. Uses modern box-sizing model
 * 2. Removes default margins
 * 3. Improves text rendering
 * 4. Handles media elements consistently
 * 5. Normalizes form elements
 * 6. Prevents text overflow issues
 * 7. Provides proper stacking context
 */

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

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

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

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

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

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

/* Stacking context */
#root, #__next {
  isolation: isolate;                   /* Create new stacking context */
}

/*----------------- 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. Typography hierarchy and spacing
 * 2. Link appearances and interactions
 * 3. Code block formatting
 * 4. List and table styles
 * 5. Layout structure and spacing
 */

/* Base Container */
.boostlook {
  font-family: "Noto Sans Display" !important;
  font-stretch: 90%;
}

/* Typography Hierarchy
 * Establishes consistent heading sizes and spacing
 * while maintaining proper visual hierarchy
 */
.boostlook h1,
.boostlook h2,
.boostlook h3,
.boostlook h4,
.boostlook h5,
.boostlook h6 {
  display: block;
  line-height: 1;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 500;
  position: relative;
}

/* Heading Sizes */
.boostlook h1 { font-size: 1.8rem; }    /* Primary headings */
.boostlook h2 { font-size: 1.65rem; }   /* Section headings */
.boostlook h3 { font-size: 1.5rem; }    /* Subsection headings */
.boostlook h4 { font-size: 1.35rem; }   /* Topic headings */
.boostlook h5 { font-size: 1.25rem; }   /* Subtopic headings */
.boostlook h6 { font-size: 1rem; }      /* Minor headings */

/* Document-specific heading adjustments */
.boostlook .doc h2:not(.discrete) {
  margin-left: 0;
  padding-left: 0;
}

/* Anchor positioning within headings */
.boostlook .doc h1 .anchor {
  margin: 3px 0 0 -1.3ex;
}

.boostlook .doc h2 .anchor,
.boostlook .doc h3 .anchor {
  margin: 2px 0 0 -1.3ex;
}

.boostlook .doc h4 .anchor,
.boostlook .doc h5 .anchor,
.boostlook .doc h6 .anchor {
  margin: 1px 0 0 -1.3ex;
}

/* Paragraph Styling */
.boostlook p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--bl-text-color);
  padding-top: initial !important;
  padding-bottom: initial !important;
}

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

/* Link Styling */
.boostlook a,
.boostlook .doc a {
  color: var(--bl-link-color);
  text-decoration: none;
}

/* Link Hover States */
.boostlook a:hover,
.boostlook .doc a:hover,
#libraryReadMe a:hover,
#boost-legacy-docs-wrapper a:hover {
  color: var(--bl-link-hover-color);
  cursor: pointer;
  text-decoration: underline;
}

/* Link States */
.boostlook p a:visited,
.boostlook table a,
.boostlook .pagination a {
  color: var(--bl-link-color);
}

/* Code Block Styling */
.boostlook code,
.boostlook pre code,
.boostlook .doc .content pre code {
  border-color: var(--bl-code-border-color);
  color: var(--bl-code-text-color);
  padding: 1.2em .8em;
  font-family: "Noto Sans Mono", monospace;
  margin-bottom: 1.25rem;
}

/* Emphasis within code */
.boostlook em,
.boostlook code em {
  font-family: "Noto Sans Display";
  font-size: inherit;
}

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

/* List Styling */
.boostlook ul.itemizedlist,
#boost-legacy-docs-wrapper .ulist ul {
  padding: 0 0 0 15px;
  margin: 0;
}

/* Code Styling */
.boostlook h2 a code {
  color: var(--bl-nav-link-color);
  font-size: 1.65rem;
}

.boostlook h3 a code,
.boostlook h3 a:hover code {
  color: var(--bl-nav-link-color) !important;
  font-size: 1.5rem;
}

.boostlook code,
.boostlook p code,
.boostlook li code,
.boostlook .doc p code,
.boostlook .doc table code,
.boostlook .doc .colist > table code {
  background: none;
  padding: 0;
  font-weight: 400;
  font-stretch: 90%;
  color: var(--bl-code-text-color) !important;
}

/* Code Links */
.boostlook code a,
.boostlook p code a,
.boostlook li code a,
.boostlook .doc p code a,
.boostlook .doc table code a,
.boostlook .doc .colist > table code a,
.boostlook a code,
.boostlook p a code,
.boostlook li a code,
.boostlook .doc p a code,
.boostlook .doc table a code,
.boostlook .doc .colist > table a code {
  color: var(--bl-link-color) !important;
}

/* Code Link Hover States */
.boostlook code a:hover,
.boostlook p code a:hover,
.boostlook li code a:hover,
.boostlook .doc p code a:hover,
.boostlook .doc table code a:hover,
.boostlook .doc .colist > table code a:hover,
.boostlook a:hover code,
.boostlook p a:hover code,
.boostlook li a:hover code,
.boostlook .doc p a:hover code,
.boostlook .doc table a:hover code,
.boostlook .doc .colist > table a:hover code {
  color: var(--bl-link-hover-color) !important;
}

/* Table Cell Code */
.boostlook td code {
  margin-bottom: 10px;
}

/* Quote Blocks */
.boostlook .quoteblock,
.boostlook .verseblock {
  background: var(--bl-quote-background);
  border-left: 3px solid var(--bl-border-color);
  color: var(--bl-text-color);
}

.boostlook .quoteblock::before,
.boostlook .verseblock::before {
  color: var(--bl-quote-word-color);
}

/* Tab Panels */
.boostlook .tabpanel {
  background-color: var(--bl-tabpanel-background);
}

/* Syntax Highlighting */
.boostlook .hljs-keyword,
.boostlook .hljs-selector-tag,
.boostlook .hljs-subst {
  color: var(--bl-hljs-keyword-color);
}

.boostlook .hljs-number {
  color: var(--bl-hljs-number-color);
}

.boostlook .hljs-doctag,
.boostlook .hljs-string {
  color: var(--bl-hljs-doctag-color);
}

.boostlook .hljs-section,
.boostlook .hljs-selector-id,
.boostlook .hljs-title {
  color: var(--bl-hljs-section-color);
}

.boostlook .hljs-attribute,
.boostlook .hljs-name,
.boostlook .hljs-tag {
  color: var(--bl-hljs-attribute-color);
}

/* Pagination */
.boostlook nav.pagination span::before {
  color: var(--bl-pagination-color);
}

/* Text Emphasis */
.boostlook b,
.boostlook strong {
  font-variation-settings: "wght" 700;
}

/* Layout Structure */
.boostlook #header,
.boostlook #content,
.boostlook #footer {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.boostlook #header {
  padding-top: 1.25rem;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.boostlook #content {
  padding-top: 1.25rem;
  padding-bottom: .50rem;
}

.boostlook #footer {
  padding-bottom: 1.25rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* First Heading Adjustment */
.boostlook h2:first-of-type {
  margin-top: 0;
}

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

/**
 * Scrollbar Styling
 * "Hide" scrollbar, and display on hover
 * Comprehensive scrollbar customization for different contexts:
 * 1. Global Scrollbar Styles
 * 2. Template-specific adjustments
 * 3. Code Elements
 * 4. Table Containers
 */

/* Global Scrollbar Styles */
.boostlook * {
  scrollbar-color: initial !important;
  scrollbar-width: initial !important;
}
.boostlook:not(:has(.doc)) ::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.boostlook ::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: var( --bl-scrollbar-track-color);
}

.boostlook ::-webkit-scrollbar-thumb {
  background-color: var( --bl-scrollbar-thumb-color); /* blend into background */
}

/* Template-specific Adjustments */

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

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

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

/* Antora template - Scrollable content area */
.boostlook #content:has(> .doc) {
  overflow-y: auto;
  height: 100vh;
}

.boostlook #content:has(> .doc)::-webkit-scrollbar,
.boostlook .nav::-webkit-scrollbar {
  width: 10px;
}

.boostlook #content:has(> .doc)::-webkit-scrollbar-thumb,
.boostlook .nav::-webkit-scrollbar-thumb {
  border-radius: 8px;
}


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

/* Code Elements */
.boostlook pre::-webkit-scrollbar-track,
.boostlook code::-webkit-scrollbar-track {
  background-color: var(--bl-pre-background);
  border: 1px solid var(--bl-pre-background);
}

.boostlook pre::-webkit-scrollbar-thumb,
.boostlook code::-webkit-scrollbar-thumb {
  background-color: var(--bl-pre-background);
}

.boostlook pre:hover::-webkit-scrollbar-thumb,
.boostlook code:hover::-webkit-scrollbar-thumb {
  background-color: var(--bl-scrollbar-thumb-color);
}

.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;
  scrollbar-color: initial;
  scrollbar-width: initial;
}

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

.boostlook .content div:has(> table)::-webkit-scrollbar-track,
.boostlook .doc table.tableblock::-webkit-scrollbar-track,
.boostlook #content .sect3:has(.tableblock)::-webkit-scrollbar-track {
  border-radius: 1px;
  background-color: var(--bl-background);
}

.boostlook .content div:has(> table)::-webkit-scrollbar-thumb,
.boostlook .doc table.tableblock::-webkit-scrollbar-thumb,
.boostlook #content .sect3:has(.tableblock)::-webkit-scrollbar-thumb {
  background-color: var(--bl-background); /* blend into background */
}

.boostlook .content div:has(> table):hover::-webkit-scrollbar-thumb,
.boostlook .doc table.tableblock:hover::-webkit-scrollbar-thumb,
.boostlook #content .sect3:has(.tableblock):hover::-webkit-scrollbar-thumb {
  background-color: var(--bl-scrollbar-thumb-color);
  color: var(--bl-scrollbar-thumb-color);
}

/*----------------- 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
 */

/* Article Layout */
.article.toc2.toc-left {
  min-height: 100vh;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bl-pasteboard-color);
  position: relative;
}

/* Pre-formatted Text Blocks */
.boostlook:not(:has(.doc)) pre {
  font-family: "Noto Sans Mono", monospace;
  background-color: var(--bl-pre-background);
  margin-bottom: 1.25rem;
  padding: 1rem;
  border-color: var(--bl-code-border-color);
}

/* Table Styling */
.boostlook:not(:has(.doc)) table {
  border-collapse: collapse;
  margin: 1em 0;
  border: 1px solid var(--bl-table-border-color);
}

.boostlook:not(:has(.doc)) th {
  background-color: var(--bl-table-head-background);
  text-align: left;
  padding: 0.25em 0.55em;
}

.boostlook:not(:has(.doc)) td {
  border: 1px solid var(--bl-table-border-color);
  padding: 0.25em 0.55em;
}

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

/* Table of Contents Styling */
.boostlook #toc > ul.sectlevel1 {
  padding-left: 0;
}

.boostlook #toc ul {
  margin: 0;
  padding: 0 0 0 0.8rem;
  line-height: 1.5;
  font-size: 1rem;
  list-style: none;
}

/* Table of Contents Links */
.boostlook #toc a {
  color: var(--bl-nav-link-color);
}

.boostlook #toc a:hover,
.boostlook #toc a:focus {
  color: var(--bl-nav-link-hover-color);
}

.boostlook #toc.toc2 {
  padding-bottom: 1.5rem;
}

.boostlook #toc .sectlevel1 > li > a {
  font-variation-settings: "wght" 550;
}

.boostlook #toc #toctitle {
  font-size: 1.5rem;
}

/* Background Colors */
.boostlook #toc.toc2,
.boostlook #header:not(:has(.nav-container)),
.boostlook #content,
.boostlook #footer {
  background-color: var(--bl-card-background-color);
}

/* TOC Scrolling */
.boostlook #toc.toc2,
.boostlook #toc.toc2.nav-container {
  overflow-y: auto;
}

/* TOC Positioning */
.boostlook #toc.toc2,
#boost-legacy-docs-wrapper:not(:has(article.doc)) #toc.toc2.is-active {
  position: static;
}

#boost-legacy-docs-wrapper:not(:has(article.doc)) #toc.toc2 {
  position: fixed;
}

/* TOC List Padding */
.boostlook #toc.toc2 > ul {
  padding-bottom: 2rem;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
}

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

/* TOC Navigation Menu */
.boostlook #toc .nav-menu > .nav-list,
.boostlook #toc .nav-menu > .nav-list > .nav-list {
  padding-left: 0
}

/* Navigation Menu Title */
.boostlook .nav-menu .title {
  border-bottom: 1px solid var(--bl-table-border-color);
  margin-bottom: 16px;
}

/* Legacy Documentation Titles */
#boost-legacy-docs-wrapper h2.title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

#boost-legacy-docs-wrapper h3.title,
#boost-legacy-docs-wrapper.boostlook h3 {
  font-weight: 550;
  margin-bottom: 0.5rem;
  font-feature-settings: normal;
}

/* Rouge Syntax Highlighting */
.boostlook pre.rouge .o {
  font-weight: 400;
}

.boostlook pre.rouge code span {
  font-style: normal;
}

/* Responsive Design */
@media screen and (min-width: 768px) {
  .boostlook #toggle-toc {
    visibility: visible;
    height: auto;
    width: auto;
  }

  .article.toc2.toc-left {
    padding: 1rem 1rem 0 1rem;
  }

  .boostlook #toc.toc2 {
    border-radius: 0.5rem;
  }

  .boostlook #toc.toc2 {
    position: fixed;
    width: 17rem;
    left: max(1rem, 50% - 39rem);
    top: 1rem;
    z-index: 1000;
    height: calc(100vh - 1rem);
    padding: 1rem;
    padding: 1rem 1rem 1.5rem;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .boostlook {
    margin-left: 18rem;
  }

  /* TOC Toggle Button */
  .boostlook #toggle-toc {
    position: fixed;
    top: 2rem;
    left: max(1rem, 50% - 39rem - 1rem);
    background-color: rgb(255, 255, 255, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    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: 1rem;
    height: 2rem;
    width: 2rem;
    text-indent: -9999px;
    z-index: 1001;
  }

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

  html.toc-hidden .boostlook #toggle-toc {
    left: max(0rem, 50% - 39rem - 1rem);
  }

  /* Visible TOC */
  html.toc-visible .boostlook #toggle-toc {
    left: max(0rem, 50% - 39rem - 1rem);
    background-color: rgb(255, 255, 255, 1);
  }

  html.toc-visible .boostlook {
    margin-left: 0;
    transition: margin-left 0.15s ease;
  }

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

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

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

  /* TOC Pin States */
  html.toc-visible.toc-pinned #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: 17rem;
    transition: margin-left 0.15s ease;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: .83333rem;
  }

  html.toc-visible.toc-pinned .boostlook {
    margin-left: 20rem;
    transition: margin-left 0.15s ease;
  }
}

/*----------------- 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
 */

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

/* Typography */
.boostlook .doc {
  line-height: 1.5rem;
  padding-bottom: 1.5rem;
}

.boostlook .doc,
.boostlook .doc i {
  color: var(--bl-text-color);
  font-family: "Noto Sans Display";
}

.boostlook .nav-menu .title {
  font-size: 1.5rem;
}

.boostlook .breadcrumbs ul li {
  font-size: 0.875rem !important;
}

/* 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-menu > .nav-list > .nav-list > li {
  font-variation-settings: "wght" 550;
}

/* Navigation Links */
.boostlook .nav-link,
.boostlook .nav-menu a{
  cursor: pointer;
  color: var(--bl-nav-link-color);
  margin-right: -0.5rem;
}

.boostlook .nav-link:hover,
.boostlook .nav-menu a:hover {
  color: var(--bl-nav-link-hover-color);
}

.boostlook .nav-text {
  color: var(--bl-nav-link-color);
}

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

.boostlook #toc.toc2.nav-container.is-active {
  position: static;
}

.boostlook #header .nav-container.is-active {
  padding: 1rem;
}

.boostlook #content .nav-toggle {
  background-position-x: 0;
}

/* Active Page Indicator */
.boostlook .nav-list .is-current-page.is-active {
  position: relative;
}

.boostlook .is-current-page.is-active::before {
  content: "";
  position: absolute;
  top: 0.3125rem;
  width: 16px;
  height: 16px;
  margin-left: -1.25rem;
  background-image: var(--bl-caret-svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px;
}

/* Breadcrumbs */
.boostlook .breadcrumbs {
  display: block;
}

.boostlook .breadcrumbs ul li:first-of-type {
  display: flex;
}

.boostlook .breadcrumbs svg {
  fill: var(--bl-breadcrumbs-svg-color);
}

/* Code Block */
.boostlook .doc .content pre code {
  background-color: var(--bl-pre-background);
  border-color: var(--bl-code-border-color);
  color: var(--bl-code-text-color);
  padding: 1.2em .8em;
  border-radius: 0;
}

.boostlook .doc pre {
  padding: initial;
}

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

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

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

/* Table of Contents */
.boostlook .nav {
  height: 100%;
}

.boostlook .toc .toc-menu a {
  border-left: 0;
  padding: .25rem 0 0 0;
}

/* Admonitions */
.boostlook .admonitionblock p {
  line-height: normal;
}

.boostlook .doc .admonitionblock {
  background-color: var(--bl-tabpanel-background);
  border-radius: 8px;
}

/* Tabs */
.boostlook .tabs:not(.is-loading) .tablist li:not(.is-selected) {
  background-color: var(--bl-tab-background);
}

.boostlook .tablist > ul li {
  background-color: var(--bl-tabpanel-background);
}

/* Tables */
.boostlook .doc table.tableblock {
  display: block;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
}

.boostlook .doc table.tableblock tr th {
  background-color: var(--bl-table-head-background);
  font-size: 1rem;
}

.dark .doc table.stripes-even>tbody>tr:nth-of-type(2n) {
  background-color: var(--bl-table-stripe-color);
}

.boostlook .doc p.tableblock + p.tableblock {
  margin-top: .25rem;
}

/* Toolbar */
.boostlook .toolbar .breadcrumbs a,
.boostlook .toolbar .breadcrumbs li {
  color: var(--bl-text-color);
}

@media screen and (max-width: 768px) {
  .boostlook .toolbar {
    width: calc(100% - 2.5rem);
    position: fixed;
    top: 0;
    padding-top: 10px;
  }
}

/* Responsive Design */
@media screen and (min-width: 768px) {
  .boostlook #content:has(> article.doc) {
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
  }
}

/*----------------- 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
 */

/* Heading Styles */
#boost-legacy-docs-wrapper.boostlook h1 {
  font-size: 1.8rem;
}

#boost-legacy-docs-wrapper.boostlook h2 {
  font-size: 1.65rem;
  border-bottom: 1px solid #eaf0f3;
  border-bottom: 1px solid var(--bl-table-border-color);
  font-weight: 500;
}

#boost-legacy-docs-wrapper.boostlook h3 {
  font-size: 1.5rem;
}

#boost-legacy-docs-wrapper.boostlook h4 {
  font-size: 1.35rem;
}

/* Paragraph Spacing */
#boost-legacy-docs-wrapper.boostlook p,
.boostlook p {
  margin-bottom: 0;
  font-size: 16px;
}

#boost-legacy-docs-wrapper li {
  font-size: 16px;
}

/* Table Headers */
#boost-legacy-docs-wrapper.boostlook:not(:has(.doc)) th {
  background-color: var(--bg-color);
  border-color: var(--bl-border-color);
}

/* Special Content Blocks */
.boostlook div.note,
.boostlook div.tip,
.boostlook div.important,
.boostlook div.caution,
.boostlook div.warning,
.boostlook div.blurb,
.boostlook p.blurb {
  border: 1px solid var(--bl-border-color);
  border-radius: 8px;
  background-color: var(--bl-tabpanel-background);
  margin: 1pc 0 0 0;
  padding: 8px;
}

/* Special Block Tables */
.boostlook div.note table,
.boostlook div.tip table,
.boostlook div.important table,
.boostlook div.caution table,
.boostlook div.warning table,
.boostlook div.blurb table,
.boostlook p.blurb table {
  border: none;
  border-collapse: collapse;
  margin: 0;
}

/* Special Block Headers */
.boostlook div.note th,
.boostlook div.tip th,
.boostlook div.important th,
.boostlook div.caution th,
.boostlook div.warning th,
.boostlook div.blurb th,
.boostlook .blurb th {
  background-color: transparent !important;
  font-size: 16px;
}

/* Special Block Cells */
.boostlook div.note td,
.boostlook div.tip td,
.boostlook div.important td,
.boostlook div.caution td,
.boostlook div.warning td,
.boostlook div.blurb td,
.boostlook p.blurb td {
  border: none !important;
  padding: 1px;
}

/* Pre-formatted Text */
.boostlook:not(:has(.doc)) td pre {
  padding: 5px;
}

/* Program Listings */
.boostlook .programlisting {
  margin: 1rem 0;
}

/* Table Typography */
.boostlook table h1,
.boostlook table h2,
.boostlook table h3 {
  line-height: 2rem;
}

.boostlook table h4,
.boostlook table h5,
.boostlook table h6 {
  line-height: 1.75rem;
}

/* Variable Lists */
.boostlook:not(:has(.doc)) div.variablelist dl dt {
  margin-bottom: 0.2em;
  font-variation-settings: "wght" 700;
}

.boostlook:not(:has(.doc)) div.variablelist dl dd {
  margin: 0em 0em 0.5em 2em;
  font-size: 10pt;
}

.boostlook:not(:has(.doc)) div.variablelist table tbody tr td p,
.boostlook:not(:has(.doc)) div.variablelist dl dd p {
  margin: 0em 0em 0.5em 0em;
  line-height: 1;
}

/* Table of Contents */
.boostlook:not(:has(.doc)) div.toc {
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  font-size: 80%;
  line-height: 1.15;
  color: var(--text-color);
  border: 1px solid var(--bl-border-color);
  background-color: var(--bl-pre-background);
}

.boostlook:not(:has(.doc)) div.toc dl.toc {
  background-color: transparent;
}

.boostlook:not(:has(.doc)) #toc ul {
  list-style: none !important;
  margin: 0.5rem 0 !important;
}

#boost-legacy-docs-wrapper.boostlook div.toc > p {
  padding-top: 0 !important;
}

.boostlook dl.toc > dt {
  font-variation-settings: "wght" 550;
}

.boostlook dl.toc dd {
  padding-left: .6rem;
}

/* Copyright Footer */
.boostlook .copyright-footer {
  padding: 1rem;
}

/* Section Layout */
body > .section,
body > .chapter,
#boost-legacy-docs-wrapper.boostlook > .section,
#boost-legacy-docs-wrapper.boostlook > .chapter,
#boost-legacy-docs-wrapper.boostlook > .document,
#boost-legacy-docs-wrapper.boostlook > .refentry,
#boost-legacy-docs-wrapper.boostlook > .book {
  margin: 0rem 1rem;
  padding: 1rem;
  background-color: var(--card-color);
  border-radius: 0.5rem;
}

/* Spirit Navigation */
.boostlook:not(:has(.doc)) .spirit-nav {
  position: relative;
  float: right;
  top: 0.2rem;
  right: 28px;
  text-align: right;
  margin: 0.75rem;
  padding-left: 10px;
  max-width: 80rem;
  display: flex;
  z-index: 5;
}

.boostlook:not(:has(.doc)) .spirit-nav a,
#boost-legacy-docs-wrapper.boostlook:not(:has(.doc)) .spirit-nav a {
  font-family: 'Material Symbols Outlined';
  font-size: 18px;
  display: inline-block;
  padding-left: 0.5em;
  width: 24px;
  height: 24px;
  color: var(--bl-nav-link-color);
}

.boostlook:not(:has(.doc)) .spirit-nav a:hover,
#boost-legacy-docs-wrapper.boostlook:not(:has(.doc)) .spirit-nav a:hover,
.toolbar a:hover .material-symbols-outlined {
  color: var(--bl-primary-color);
  text-decoration: none;
}

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

.dark .boostlook:not(:has(.doc)) .spirit-nav img {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

/* hide footer spirit nav since it wasn't visible before */
.boostlook:not(:has(.doc)) div:nth-of-type(4).spirit-nav {
  display: none !important;
}

/* Spirit Navigation Icons */
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey='p']::after {
  content: "arrow_back";
}
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey='u']::after {
  content: "arrow_upward";
}
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey='h']::after {
  content: "home";
}
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey='n']::after {
  content: "arrow_forward";
}

/* Responsive Spirit Navigation */
@media screen and (max-width: 768px) {
  .boostlook:not(:has(.doc)) .spirit-nav {
    right: 2rem;
    top: 0.2rem;
  }
}

/* Legacy Styling Overrides */
body[bgcolor="white"]:has(.boostlook):not(:has(.doc)) {
  background-color: transparent;
}

.boostlook:not(:has(.doc)) {
  border-radius: 0;
}

/* General Elements */
.boostlook:not(:has(.doc)) h1,
.boostlook:not(:has(.doc)) h2,
.boostlook:not(:has(.doc)) h2:first-of-type,
.boostlook:not(:has(.doc)) h3,
.boostlook:not(:has(.doc)) h4,
.boostlook:not(:has(.doc)) h5,
.boostlook:not(:has(.doc)) h6 {
  margin: 1em 0em 0.5em;
}

.boostlook:not(:has(.doc)) h5 {
  font-style: italic;
  font-weight: 400;
  font-size: 110%;
}

.boostlook:not(:has(.doc)) h1 a,
.boostlook:not(:has(.doc)) h2 a,
.boostlook:not(:has(.doc)) h3 a,
.boostlook:not(:has(.doc)) h4 a {
  color: var(--bl-header-color)
}

.boostlook:not(:has(.doc)) p {
  padding: 1em 0 !important;
}

.boostlook:not(:has(.doc)) li p {
  padding: 0 !important;
}

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

.boostlook:not(:has(.doc)) ol {
  padding-left: 1em;
}

.boostlook:not(:has(.doc)) ol li {
  list-style-type: decimal;
}

/* Pre-formatted Text and Code */
.boostlook:not(:has(.doc)) pre {
  background-color: var(--bl-pre-background);
  border: 1px solid var(--bl-code-border-color);
  padding: 1.2em .8em;
  margin: 0;
}

.boostlook:not(:has(.doc)) pre code {
  border: none;
}

.boostlook:not(:has(.doc)) :not(.highlight) pre {
  color: var(--bl-code-text-color);
}

/* Table Headers */
.boostlook:not(:has(.doc)) div.informaltable table tr th,
.boostlook:not(:has(.doc)) div.table table tr th {
  border: 1px solid var(--bl-border-color);
}

/* Copyright Footer */
.boostlook:not(:has(.doc)) .copyright-footer {
  text-align: right;
  font-size: 70%;
}

.boostlook:not(:has(.doc)) .copyright-footer p {
  text-align: left;
  font-size: 10pt;
  line-height: 1.15;
}

/* Syntax Highlighting */
.property,
.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt,
.keyword {
  color: var(--color-purple);
}

.highlight .n,
.highlight .na,
.highlight .nb,
.highlight .bp,
.highlight .nc,
.highlight .no,
.highlight .nd,
.highlight .ni,
.highlight .ne,
.highlight .nf,
.highlight .py,
.highlight .nl,
.highlight .nn,
.highlight .nx,
.highlight .nt,
.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi,
.identifier {
  color: var(--color-navy);
}

.special {
  color: var(--text-color);
}

.highlight .cp,
.preprocessor {
  color: var(--color-blue);
}

.highlight .sc
.char {
  color: var(--color-lime);
}

.highlight .c,
.highlight .ch,
.highlight .cm,
.highlight .cp,
.highlight .cpf,
.highlight .c1,
.highlight .cs,
.highlight .sd,
.highlight .sh,
.comment {
  color: var(--color-green);
}

.highlight .s,
.highlight .sa,
.highlight .sb,
.highlight .dl,
.highlight .s2,
.highlight .se,
.highlight .si,
.highlight .sx,
.highlight .sr,
.highlight .s1,
.highlight .ss,
.string {
  color: var(--color-gold);
}

.highlight .m,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo,
.number {
  color: var(--color-red);
}

.highlight,
.white_bkd {
  background-color: var(--card-color);
}

.highlight .hll,
.dk_grey_bkd {
  background-color: var(--border-color);
}

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

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

/**
 * Library README Styles
 * Specific styles for the Boost library README pages.
 * These styles handle:
 * 1. Typography and heading hierarchy
 * 2. Content spacing and margins
 * 3. List styling and nesting
 * 4. Link appearances
 */

/* Base Container */
.boostlook#libraryReadMe {
  margin-left: 0;
}

/* Headings */
.boostlook#libraryReadMe h1 {
  font-size: 1.875rem;
  font-variation-settings: "wght" 600;
  line-height: 1em;
  border-bottom: 1px solid var(--bl-border-color);
}

.boostlook#libraryReadMe h2 {
  margin-top: 0.75rem;
  font-size: 1.5rem;
  font-variation-settings: "wght" 600;
  line-height: 1em;
  border-bottom: 1px solid var(--bl-border-color);
}

.boostlook#libraryReadMe h3 {
  margin-top: 0.75rem;
  font-size: 1.25rem;
  font-variation-settings: "wght" 600;
  margin-bottom: 0.5rem;
  font-feature-settings: normal;
}

.boostlook#libraryReadMe h4 {
  font-size: 1.35rem;
}

/* Paragraphs */
.boostlook#libraryReadMe p {
  font-size: 1rem;
  padding-bottom: 0.25rem;
  font-variation-settings: "wght" 300;
  margin-bottom: 0;
}

/* Lists */
.boostlook#libraryReadMe ul {
  list-style-type: disc;
  list-style-position: inside;
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}

.boostlook#libraryReadMe ul li {
  font-size: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-variation-settings: "wght" 300;
}

.boostlook#libraryReadMe li p {
  display: inline;
}

/* Special list cases */
.boostlook#libraryReadMe > h3 + ul {
  list-style-type: none;
}

.boostlook#libraryReadMe > h3 + ul > li > a {
  font-variation-settings: "wght" 600;
}

.boostlook#libraryReadMe ul > li > ul > li {
  list-style-type: disc;
}

.boostlook#libraryReadMe ul > li > ul > li > a {
  font-variation-settings: "wght" 400;
}

.boostlook#libraryReadMe h3 + p + ul {
  list-style-type: none;
}

.boostlook#libraryReadMe h3 + p + ul > li {
  font-variation-settings: "wght" 600;
}

/* Tables */
.boostlook#libraryReadMe table {
  table-layout: auto;
  width: 100%;
}

/* Links */
.boostlook#libraryReadMe a {
  color: var(--bl-link-color);
}

.boostlook#libraryReadMe a img {
  display: inline;
}

/* Code Blocks */
.boostlook#libraryReadMe pre {
  padding: 0;
}

.boostlook#libraryReadMe pre code {
  background-color: var(--bl-code-background);
  margin-bottom: 0;
}

/* Syntax Highlighting Fix */
.boostlook#libraryReadMe .language- span {
  color: inherit;
  font-weight: initial;
}

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