/* ================================================================
   Backbone — IBM Carbon Design Sphinx Theme
   Typography: Carbon Fluid Type Set (4 breakpoints)
   Themes: White (light), Gray 100 (dark)
   Figma: GRL8mw85tLtL0jjNKzHgZ3
   ================================================================ */

/* ── 0. Custom Fonts ── */
@font-face {
    font-family: "Syrius Sans";
    src: url("fonts/SyriusSans-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ── 1. CSS Custom Properties (Carbon Tokens — Light / White Theme) ── */
:root {
    /* ── Palette ── */
    --cds-gray-10: #f4f4f4;
    --cds-gray-20: #e0e0e0;
    --cds-gray-30: #c6c6c6;
    --cds-gray-40: #a8a8a8;
    --cds-gray-50: #8d8d8d;
    --cds-gray-60: #6f6f6f;
    --cds-gray-70: #525252;
    --cds-gray-80: #393939;
    --cds-gray-90: #262626;
    --cds-gray-100: #161616;

    --cds-blue-10: #edf5ff;
    --cds-blue-20: #d0e2ff;
    --cds-blue-30: #a6c8ff;
    --cds-blue-40: #78a9ff;
    --cds-blue-50: #4589ff;
    --cds-blue-60: #0f62fe;
    --cds-blue-70: #0043ce;

    --cds-red-50: #fa4d56;
    --cds-red-60: #da1e28;
    --cds-green-40: #42be65;
    --cds-green-60: #198038;
    --cds-yellow-30: #f1c21b;
    --cds-teal-50: #009d9a;
    --cds-teal-60: #007d79;

    /* ── Semantic tokens (light) ── */
    --cds-bg: #ffffff;
    --cds-bg-subtle: var(--cds-gray-10);
    --cds-layer-01: var(--cds-gray-10);
    --cds-text-primary: var(--cds-gray-100);
    --cds-text-secondary: var(--cds-gray-70);
    --cds-text-muted: var(--cds-gray-60);
    --cds-text-on-color: #ffffff;
    --cds-link: var(--cds-blue-60);
    --cds-link-hover: var(--cds-blue-70);
    --cds-border: var(--cds-gray-20);
    --cds-border-strong: var(--cds-gray-50);
    --cds-focus: var(--cds-blue-60);
    --cds-icon-primary: var(--cds-gray-100);
    --cds-icon-secondary: var(--cds-gray-70);

    /* Status */
    --cds-support-info: var(--cds-blue-60);
    --cds-support-error: var(--cds-red-60);
    --cds-support-warning: var(--cds-yellow-30);
    --cds-support-success: var(--cds-green-60);

    /* Code highlighting (light bg in light mode — Carbon Code Snippet) */
    --cds-code-bg: var(--cds-layer-01);
    --cds-code-text: var(--cds-text-primary);
    --cds-code-keyword: var(--cds-blue-70);
    --cds-code-type: var(--cds-teal-60);
    --cds-code-string: var(--cds-green-60);
    --cds-code-comment: var(--cds-gray-50);
    --cds-code-param: var(--cds-gray-70);
    --cds-code-number: var(--cds-teal-60);

    /* Notification tokens (Carbon Notification component) */
    --cds-notification-info-bg: #edf5ff;
    --cds-notification-info-border: rgba(0, 67, 206, 0.3);
    --cds-notification-warning-bg: #fcf4d6;
    --cds-notification-warning-border: rgba(241, 194, 27, 0.3);
    --cds-notification-error-bg: #fff1f1;
    --cds-notification-error-border: rgba(218, 30, 40, 0.3);
    --cds-notification-success-bg: #defbe6;
    --cds-notification-success-border: rgba(36, 161, 72, 0.3);
    --cds-notification-generic-bg: #ffffff;
    --cds-notification-generic-border: #e8e8e8;

    /* Header (solid — matches page background) */
    --cds-header-bg: var(--cds-bg);
    --cds-header-text: var(--cds-gray-100);
    --cds-header-nav: var(--cds-gray-70);
    --cds-header-border: var(--cds-gray-30);
    --cds-header-brand: var(--cds-blue-60);

    /* Layout */
    --cds-header-height: 48px;
    --cds-sidebar-width: 320px;
    --cds-toc-width: 220px;

    /* Spacing (Carbon 2x grid — 8px base) */
    --cds-sp-01: 2px;
    --cds-sp-02: 4px;
    --cds-sp-03: 8px;
    --cds-sp-04: 12px;
    --cds-sp-05: 16px;
    --cds-sp-06: 24px;
    --cds-sp-07: 32px;
    --cds-sp-08: 40px;
    --cds-sp-09: 48px;
    --cds-sp-10: 64px;
}

/* ── 2. Dark Mode (Carbon Gray 100 Theme) ── */
[data-carbon-theme="g100"] {
    --cds-bg: var(--cds-gray-100);
    --cds-bg-subtle: var(--cds-gray-90);
    --cds-layer-01: var(--cds-gray-90);
    --cds-text-primary: var(--cds-gray-10);
    --cds-text-secondary: var(--cds-gray-30);
    --cds-text-muted: var(--cds-gray-60);
    --cds-link: var(--cds-blue-40);
    --cds-link-hover: var(--cds-blue-30);
    --cds-border: var(--cds-gray-80);
    --cds-border-strong: var(--cds-gray-60);
    --cds-focus: var(--cds-blue-40);
    --cds-icon-primary: var(--cds-gray-10);
    --cds-icon-secondary: var(--cds-gray-30);

    --cds-support-info: var(--cds-blue-40);
    --cds-support-error: var(--cds-red-50);
    --cds-support-warning: var(--cds-yellow-30);
    --cds-support-success: var(--cds-green-40);

    /* Dark mode: dark code bg for contrast */
    --cds-code-bg: var(--cds-gray-90);
    --cds-code-text: var(--cds-gray-10);
    --cds-code-keyword: var(--cds-blue-40);
    --cds-code-type: var(--cds-teal-50);
    --cds-code-string: var(--cds-green-40);
    --cds-code-param: var(--cds-gray-30);
    --cds-code-number: var(--cds-teal-50);

    /* Dark mode notification tokens */
    --cds-notification-info-bg: rgba(0, 67, 206, 0.15);
    --cds-notification-info-border: rgba(69, 137, 255, 0.4);
    --cds-notification-warning-bg: rgba(241, 194, 27, 0.1);
    --cds-notification-warning-border: rgba(241, 194, 27, 0.3);
    --cds-notification-error-bg: rgba(218, 30, 40, 0.15);
    --cds-notification-error-border: rgba(250, 77, 86, 0.4);
    --cds-notification-success-bg: rgba(66, 190, 101, 0.1);
    --cds-notification-success-border: rgba(66, 190, 101, 0.5);
    --cds-notification-generic-bg: var(--cds-gray-90);
    --cds-notification-generic-border: var(--cds-gray-80);

    /* Header in dark mode */
    --cds-header-text: var(--cds-gray-10);
    --cds-header-nav: var(--cds-gray-40);
    --cds-header-border: var(--cds-gray-80);
    --cds-header-brand: var(--cds-blue-40);

    /* Footer in dark mode — dark background, not blue */
    --cds-footer-bg: var(--cds-gray-90);

    color-scheme: dark;
}

/* NOTE: OS dark-mode auto-detection is handled in JS, which sets
   data-carbon-theme="g100" or "white" on <html>. No @media fallback
   needed — this avoids conflicts when the user explicitly toggles. */

/* ── 3. Suppress basic theme leftovers ── */
div.related,
div.footer {
    display: none !important;
}

/* ── 4. Reset & Base Typography ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px; /* Carbon base = 16px (1rem) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family:
        "IBM Plex Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    font-weight: 400;
    /* body-long-02: 1rem / 1.5 */
    font-size: 1rem;
    line-height: 1.5;
    color: var(--cds-text-primary);
    background: var(--cds-bg);
}

/* ── 5. Header (solid bg — matches page background) ── */
.carbon-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    height: var(--cds-header-height);
    padding: 0 var(--cds-sp-05);
    background: var(--cds-header-bg);
    color: var(--cds-header-text);
    border-bottom: 1px solid var(--cds-header-border);
}

.carbon-header__menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--cds-header-nav);
    cursor: pointer;
    padding: var(--cds-sp-03);
    margin-right: var(--cds-sp-03);
}

.carbon-header__workspace {
    font-family: "Syrius Sans", "IBM Plex Sans", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.125;
    color: var(--cds-header-brand);
    text-decoration: none;
    letter-spacing: 0.16px;
}
.carbon-header__workspace:hover {
    text-decoration: underline;
}

.carbon-header__title-sep {
    font-family: "Syrius Sans", "IBM Plex Sans", sans-serif;
    color: var(--cds-header-nav);
    font-size: 0.875rem;
    font-weight: 400;
    padding: 0 8px;
    opacity: 0.6;
}

.carbon-header__title {
    font-family: "Syrius Sans", "IBM Plex Sans", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.125;
    color: var(--cds-header-text);
    text-decoration: none;
    margin-right: auto;
    letter-spacing: 0.16px;
}

.carbon-header__nav {
    display: flex;
    gap: var(--cds-sp-05);
}

.carbon-header__nav a {
    /* body-short-01: 0.875rem / 400 / 1.286 / 0.16px */
    color: var(--cds-header-nav);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.28572;
    letter-spacing: 0.16px;
}
.carbon-header__nav a:hover {
    color: var(--cds-header-text);
}

.carbon-header__version {
    margin-left: var(--cds-sp-05);
    /* label-01: 0.75rem / 400 / 1.333 / 0.32px */
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.33333;
    letter-spacing: 0.32px;
    color: var(--cds-gray-50);
    font-family: "IBM Plex Mono", monospace;
}

/* Theme toggle button in header */
.carbon-header__theme-btn {
    background: none;
    border: none;
    color: var(--cds-header-nav);
    cursor: pointer;
    padding: var(--cds-sp-03);
    margin-left: var(--cds-sp-03);
    display: flex;
    align-items: center;
    border-radius: 0;
}
.carbon-header__theme-btn:hover {
    color: var(--cds-header-text);
}
.carbon-header__theme-btn svg {
    width: 20px;
    height: 20px;
}
/* Show/hide correct icon — JS always sets data-carbon-theme */
.carbon-header__icon-light {
    display: block;
}
.carbon-header__icon-dark {
    display: none;
}
[data-carbon-theme="g100"] .carbon-header__icon-light {
    display: none;
}
[data-carbon-theme="g100"] .carbon-header__icon-dark {
    display: block;
}

/* ── 5b. Language Selector (header dropdown) ── */
.carbon-header__lang {
    position: relative;
    margin-left: var(--cds-sp-03);
}

.carbon-header__lang-btn {
    display: flex;
    align-items: center;
    gap: var(--cds-sp-02);
    background: none;
    border: none;
    color: var(--cds-header-nav);
    cursor: pointer;
    padding: var(--cds-sp-02) var(--cds-sp-03);
    border-radius: 0;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.33333;
    letter-spacing: 0.32px;
    opacity: 0.8;
}
.carbon-header__lang-btn:hover {
    opacity: 1;
}
.carbon-header__lang-btn svg {
    flex-shrink: 0;
}

.carbon-header__lang-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin: 0;
    padding: var(--cds-sp-02) 0;
    list-style: none;
    background: var(--cds-gray-90);
    border: 1px solid var(--cds-gray-80);
    min-width: 120px;
    z-index: 110;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.carbon-header__lang--open .carbon-header__lang-menu {
    display: block;
}

.carbon-header__lang-menu li {
    margin: 0;
}
.carbon-header__lang-menu a {
    display: block;
    padding: var(--cds-sp-03) var(--cds-sp-05);
    color: var(--cds-gray-30);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.28572;
    letter-spacing: 0.16px;
    white-space: nowrap;
}
.carbon-header__lang-menu a:hover {
    background: var(--cds-gray-80);
    color: #ffffff;
    text-decoration: none;
}
.carbon-header__lang-menu a.active {
    color: #ffffff;
    font-weight: 600;
}

/* ── 6. Layout ── */
.carbon-layout {
    display: flex;
    margin-top: var(--cds-header-height);
    min-height: calc(100vh - var(--cds-header-height));
}

/* ── 7. Sidebar ── */
.carbon-sidebar {
    position: fixed;
    top: var(--cds-header-height);
    left: 0;
    bottom: 0;
    width: var(--cds-sidebar-width);
    background: var(--cds-bg);
    border-right: 1px solid var(--cds-border);
    overflow-y: auto;
    padding: 40px 16px;
    z-index: 90;
    /* body-short-01: 0.875rem / 400 / 1.286 / 0.16px */
    font-size: 0.875rem;
    line-height: 1.28572;
    letter-spacing: 0.16px;
}

.carbon-sidebar__search {
    padding: 0 var(--cds-sp-05) var(--cds-sp-05);
}

.carbon-sidebar__search input[type="text"] {
    width: 100%;
    padding: var(--cds-sp-03) var(--cds-sp-04);
    font-family: inherit;
    /* body-short-01 */
    font-size: 0.875rem;
    line-height: 1.28572;
    letter-spacing: 0.16px;
    border: none;
    border-bottom: 1px solid var(--cds-border-strong);
    background: var(--cds-bg);
    color: var(--cds-text-primary);
    outline: none;
    transition: border-color 0.15s;
}
.carbon-sidebar__search input[type="text"]:focus {
    border-bottom-color: var(--cds-focus);
}

.carbon-sidebar__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.carbon-sidebar__nav li {
    margin: 0;
}

/* Level 1 nav items: SemiBold (600) */
.carbon-sidebar__nav > ul > li > a {
    font-weight: 600;
}

.carbon-sidebar__nav a {
    display: block;
    padding: 7px var(--cds-sp-05);
    color: var(--cds-text-secondary);
    text-decoration: none;
    position: relative;
    transition:
        background 0.1s,
        color 0.1s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.carbon-sidebar__nav a:hover {
    background: rgba(141, 141, 141, 0.12);
    color: var(--cds-text-primary);
}
.carbon-sidebar__nav .current > a {
    color: var(--cds-text-secondary);
    font-weight: 600;
    background: rgba(141, 141, 141, 0.2);
    box-shadow: inset 3px 0 0 0 var(--cds-blue-60);
}

[data-carbon-theme="g100"] .carbon-sidebar__nav .current > a {
    box-shadow: inset 3px 0 0 0 var(--cds-blue-40);
}

/* toctree caption — collapsible sections */
.carbon-sidebar__nav .caption {
    /* label-01: 0.75rem / 600 / 1.333 / 0.32px */
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.33333;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-muted);
    padding: var(--cds-sp-05) var(--cds-sp-05) var(--cds-sp-02);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.carbon-sidebar__nav .caption::after {
    content: "";
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236f6f6f'%3E%3Cpath d='M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.carbon-sidebar__nav .caption.collapsed::after {
    transform: rotate(-90deg);
}
.carbon-sidebar__nav .caption.collapsed + ul {
    display: none;
}

/* Level 2+ nesting: indentation via padding, not ul padding */
.carbon-sidebar__nav li ul {
    padding-left: 0;
}
.carbon-sidebar__nav li ul a {
    padding-left: 32px;
    font-weight: 400;
}

.carbon-sidebar__overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(22, 22, 22, 0.5);
}

/* ── 8. Main Content ── */
.carbon-main {
    flex: 1;
    margin-left: var(--cds-sidebar-width);
    padding: var(--cds-sp-07) var(--cds-sp-09);
    max-width: calc(100% - var(--cds-sidebar-width));
    min-width: 0;
}

.carbon-article {
    max-width: 800px;
}

/* ── 8b. On-Page TOC (Article Anchors — Right Side) ── */
.carbon-toc {
    display: none; /* shown on large screens via media query */
    position: fixed;
    z-index: 85; /* Below sidebar (90) and footer (95) */
    top: calc(var(--cds-header-height) + var(--cds-sp-06));
    right: var(--cds-sp-07);
    width: var(--cds-toc-width);
    max-height: calc(100vh - var(--cds-header-height) - var(--cds-sp-10));
    overflow-y: auto;
    /* body-compact-01: 0.875rem / 400 / 1.286 / 0.16px */
    font-size: 0.875rem;
    line-height: 1.28572;
    letter-spacing: 0.16px;
}

.carbon-toc__title {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.33333;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: var(--cds-text-muted);
    margin: 0 0 var(--cds-sp-03);
    padding: 0 var(--cds-sp-05);
}

.carbon-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.carbon-toc li {
    margin: 0;
}

/* Sub-level indentation: 16px per level */
.carbon-toc li ul {
    padding-left: 0;
}
.carbon-toc > ul > li > ul a {
    padding-left: 32px;
}
.carbon-toc > ul > li > ul > li > ul a {
    padding-left: 48px;
}
.carbon-toc > ul > li > ul > li > ul > li > ul a {
    padding-left: 54px;
}

.carbon-toc a {
    display: block;
    padding: 7px var(--cds-sp-05);
    color: var(--cds-text-secondary);
    text-decoration: none;
    transition: color 0.1s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.carbon-toc a:hover {
    color: var(--cds-text-primary);
    text-decoration: none;
}
.carbon-toc a.active {
    color: var(--cds-link);
    box-shadow: inset 3px 0 0 0 var(--cds-link);
}

/* ── 9. Breadcrumbs ── */
.carbon-breadcrumbs {
    margin-bottom: var(--cds-sp-06);
    /* label-01: smaller than body */
    font-size: 0.75rem;
    line-height: 1.33333;
    letter-spacing: 0.32px;
}
.carbon-breadcrumbs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cds-sp-01);
}
.carbon-breadcrumbs li {
    color: var(--cds-text-muted);
}
.carbon-breadcrumbs li + li::before {
    content: "/";
    margin: 0 var(--cds-sp-03);
    color: var(--cds-text-muted);
}
.carbon-breadcrumbs a {
    color: var(--cds-link);
    text-decoration: none;
}
.carbon-breadcrumbs a:hover {
    text-decoration: underline;
}

/* ── 10. Typography — Carbon Fluid Type Set ── */

/*
 * Fluid heading scale (Figma design):
 *   SM (<672):  h1=1.75/400  h2=1.25  h3=1.25  h4=1/600
 *   MED (672):  h1=2/400     h2=1.25  h3=1.25  h4=1/600
 *   XLG (1056): h1=2.25/300  h2=1.5   h3=1.25  h4=1/600
 *   MAX (1584): h1=2.625/300 h2=1.75  h3=1.25  h4=1/600
 */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "IBM Plex Sans", sans-serif;
    color: var(--cds-text-primary);
    margin-top: var(--cds-sp-08);
    margin-bottom: var(--cds-sp-05);
}

/* Base = SM (<672px) */
h1 {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.28572;
    letter-spacing: 0;
    margin-top: 0;
    padding-bottom: var(--cds-sp-03);
    border-bottom: 1px solid var(--cds-border);
}

h2 {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
}

h3 {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
}

h4 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.375;
    letter-spacing: 0;
}

h5 {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.28572;
    letter-spacing: 0.16px;
}

h6 {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.28572;
    letter-spacing: 0.16px;
    color: var(--cds-text-secondary);
}

p {
    /* body-long-02: 1rem / 400 / 1.5 */
    margin: 0 0 var(--cds-sp-05);
}

/* headerlinks (pilcrow anchors) — hidden until heading is hovered */
a.headerlink {
    color: var(--cds-text-muted);
    text-decoration: none;
    margin-left: var(--cds-sp-03);
    font-weight: 400;
    opacity: 0;
    transition: opacity 0.15s;
}
h1:hover a.headerlink,
h2:hover a.headerlink,
h3:hover a.headerlink,
h4:hover a.headerlink,
h5:hover a.headerlink,
h6:hover a.headerlink,
dt:hover > a.headerlink {
    opacity: 1;
}
a.headerlink:hover {
    color: var(--cds-link);
    opacity: 1;
}

/* ── 11. Links ── */
a {
    color: var(--cds-link);
    text-decoration: none;
}
a:hover {
    color: var(--cds-link-hover);
    text-decoration: underline;
}

/* ── 12. Inline Code ── */
code,
code.literal,
.pre,
tt,
kbd {
    font-family: "IBM Plex Mono", monospace;
    /* code-02: 0.875rem / 400 / 1.429 / 0.32px */
    font-size: 0.875em;
    letter-spacing: 0.32px;
}

code.literal,
code.docutils {
    background: var(--cds-bg-subtle);
    padding: 2px 6px;
    border-radius: 2px;
    color: var(--cds-text-primary);
}

/* ── 13. Code Blocks (Carbon Code Snippet — light bg in light mode) ── */
pre {
    font-family: "IBM Plex Mono", monospace;
    /* code-02: 0.875rem / 400 / 1.429 / 0.32px */
    font-size: 0.875rem;
    line-height: 1.42857;
    letter-spacing: 0.32px;
    background: var(--cds-code-bg);
    color: var(--cds-code-text);
    padding: var(--cds-sp-05);
    overflow-x: auto;
    margin: 0 0 var(--cds-sp-05);
    border-radius: 0;
}

div.highlight {
    position: relative;
    background: transparent;
    margin: 0 0 var(--cds-sp-05);
}
div.highlight pre {
    margin: 0;
}

/* Copy button for code blocks (Carbon ghost icon button) */
div.highlight .carbon-copy-btn {
    position: absolute;
    top: var(--cds-sp-03);
    right: var(--cds-sp-03);
    background: transparent;
    border: none;
    color: var(--cds-icon-secondary);
    cursor: pointer;
    padding: var(--cds-sp-03);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}
div.highlight:hover .carbon-copy-btn {
    opacity: 1;
}
div.highlight .carbon-copy-btn:hover {
    background: rgba(141, 141, 141, 0.12);
    color: var(--cds-icon-primary);
}
div.highlight .carbon-copy-btn svg {
    width: 16px;
    height: 16px;
}

/* Pygments token colors (always on dark background in both themes) */
.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cs,
.highlight .ch,
.highlight .cpf {
    color: var(--cds-code-comment);
    font-style: italic;
}
.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt,
.highlight .kc {
    color: var(--cds-code-keyword);
}
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sa,
.highlight .sb,
.highlight .sc,
.highlight .se,
.highlight .sh,
.highlight .dl {
    color: var(--cds-code-string);
}
.highlight .n,
.highlight .nb,
.highlight .nc,
.highlight .no,
.highlight .ni,
.highlight .nn,
.highlight .nv,
.highlight .na,
.highlight .nf,
.highlight .ne {
    color: var(--cds-code-text);
}
.highlight .mi,
.highlight .mf,
.highlight .mh,
.highlight .mo,
.highlight .il {
    color: var(--cds-code-number);
}
.highlight .o,
.highlight .ow,
.highlight .p {
    color: var(--cds-code-text);
}
.highlight .cp {
    color: var(--cds-code-keyword);
}
.highlight .gd {
    color: var(--cds-red-50);
}
.highlight .gi {
    color: var(--cds-green-40);
}

/* Line numbers in code blocks */
.linenodiv pre {
    background: transparent;
    color: var(--cds-text-primary);
    border-radius: 0;
    box-shadow: inset -1px 0 0 0 var(--cds-gray-30);
    padding-right: var(--cds-sp-05);
    text-align: right;
    user-select: none;
}

/* ── 14. Tables ── */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--cds-sp-05);
    /* body-short-01: 0.875rem / 400 / 1.286 / 0.16px */
    font-size: 0.875rem;
    line-height: 1.28572;
    letter-spacing: 0.16px;
}

th {
    background: var(--cds-bg-subtle);
    /* productive-heading-01: 0.875rem / 600 */
    font-weight: 600;
    text-align: left;
    padding: var(--cds-sp-03) var(--cds-sp-05);
    border-bottom: 2px solid var(--cds-border-strong);
    color: var(--cds-text-primary);
}

td {
    padding: var(--cds-sp-03) var(--cds-sp-05);
    border-bottom: 1px solid var(--cds-border);
    vertical-align: top;
}

/* Row hover highlight */
tbody tr:hover {
    background: var(--cds-bg-subtle);
}

/* ── 15. Admonitions (Carbon Notification component style) ── */
div.admonition {
    border: 1px solid var(--cds-notification-info-border);
    padding: 15px var(--cds-sp-05);
    margin: 0 0 var(--cds-sp-05);
    border-radius: 0;
    background: var(--cds-notification-info-bg);
}

div.admonition > .admonition-title {
    /* heading-01: 0.875rem / 600 / 1.429 / 0.16px */
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.42857;
    letter-spacing: 0.16px;
    margin: 0 0 var(--cds-sp-03);
    color: var(--cds-text-primary);
}
div.admonition > p,
div.admonition > ul,
div.admonition > ol {
    font-size: 0.875rem;
    line-height: 1.28572;
    letter-spacing: 0.16px;
    color: var(--cds-text-secondary);
}
div.admonition > p:last-child {
    margin-bottom: 0;
}

div.warning,
div.caution,
div.attention {
    border-color: var(--cds-notification-warning-border);
    background: var(--cds-notification-warning-bg);
}

div.danger,
div.error {
    border-color: var(--cds-notification-error-border);
    background: var(--cds-notification-error-bg);
}

div.important,
div.tip,
div.hint {
    border-color: var(--cds-notification-success-border);
    background: var(--cds-notification-success-bg);
}

div.note,
div.seealso {
    border-color: var(--cds-notification-info-border);
    background: var(--cds-notification-info-bg);
}

div.todo,
div.admonition-todo {
    border-color: var(--cds-notification-generic-border);
    background: var(--cds-notification-generic-bg);
}

/* ── 16. Lists ── */
ul,
ol {
    padding-left: var(--cds-sp-06);
    margin: 0 0 var(--cds-sp-05);
}
li {
    margin-bottom: var(--cds-sp-02);
}
ul.simple li > p {
    margin: 0;
}

/* ── 17. Definition Lists (generic) ── */
dl {
    margin: 0 0 var(--cds-sp-05);
}
dt {
    font-weight: 600;
    margin-top: var(--cds-sp-05);
}
dd {
    margin-left: var(--cds-sp-06);
    margin-top: var(--cds-sp-02);
}

/* ── 18. Breathe / Doxygen C++ API Docs ── */

/* class & function signature blocks */
dl.cpp dt.sig {
    font-family: "IBM Plex Mono", monospace;
    /* code-02 */
    font-size: 0.875rem;
    line-height: 1.42857;
    letter-spacing: 0.32px;
    font-weight: 400;
    background: var(--cds-code-bg);
    color: var(--cds-code-text);
    padding: var(--cds-sp-03) var(--cds-sp-05);
    margin-bottom: var(--cds-sp-02);
    overflow-x: auto;
    border-radius: 0;
}

/* symbol name highlight */
dl.cpp dt .sig-name.descname {
    font-weight: 600;
    color: var(--cds-code-text);
}

/* C++ keywords: virtual, const, class, etc. */
dl.cpp dt .k .pre {
    color: var(--cds-code-keyword);
    font-weight: 600;
}
dl.cpp dt .kt .pre {
    color: var(--cds-code-type);
}

/* parameter names */
dl.cpp dt .sig-param .pre {
    color: var(--cds-code-param);
}

/* description body */
dl.cpp dd {
    margin-left: var(--cds-sp-07);
    margin-top: var(--cds-sp-03);
    padding-bottom: var(--cds-sp-05);
    border-bottom: 1px solid var(--cds-border);
}

/* field lists: Parameters, Returns, Throws */
dl.field-list {
    margin: var(--cds-sp-03) 0 0;
}
dl.field-list dt {
    /* productive-heading-01 */
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.28572;
    letter-spacing: 0.16px;
    color: var(--cds-text-secondary);
    background: none;
    border: none;
    padding: 0;
    margin-top: var(--cds-sp-03);
}
dl.field-list dd {
    margin-left: var(--cds-sp-05);
    padding-bottom: 0;
    border-bottom: none;
}

/* breathe section titles (Public Functions, etc.) */
p.breathe-sectiondef-title {
    /* productive-heading-03: 1.25rem / 400 / 1.4 */
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--cds-text-primary);
    margin: var(--cds-sp-07) 0 var(--cds-sp-05);
    padding-bottom: var(--cds-sp-02);
    border-bottom: 1px solid var(--cds-border);
}

.breathe-sectiondef {
    margin: 0 0 var(--cds-sp-05);
}

/* ── 19. Exhale Tree View ── */
.treeView {
    font-family: "IBM Plex Sans", sans-serif;
    /* body-short-01 */
    font-size: 0.875rem;
    line-height: 1.28572;
    letter-spacing: 0.16px;
}
.treeView a {
    color: var(--cds-text-secondary);
}
.treeView a:hover {
    color: var(--cds-link);
    text-decoration: none;
}

/* ── 20. Toctree in Content ── */
.toctree-wrapper ul {
    list-style: none;
    padding-left: var(--cds-sp-05);
}
.toctree-wrapper a {
    text-decoration: none;
}

/* ── 21. Search Page ── */
ul.search li {
    margin-bottom: var(--cds-sp-05);
    padding-bottom: var(--cds-sp-05);
    border-bottom: 1px solid var(--cds-border);
}

/* Search keyword highlight */
ul.search .highlighted {
    background: rgba(241, 194, 27, 0.25);
    padding: 1px 3px;
    border-radius: 2px;
}
[data-carbon-theme="g100"] ul.search .highlighted {
    background: rgba(241, 194, 27, 0.2);
}

input#q,
input[name="q"] {
    font-family: "IBM Plex Sans", sans-serif;
    /* body-long-02 */
    font-size: 1rem;
    line-height: 1.5;
    padding: var(--cds-sp-03) var(--cds-sp-05);
    border: none;
    border-bottom: 2px solid var(--cds-border-strong);
    background: var(--cds-bg);
    color: var(--cds-text-primary);
    width: 100%;
    max-width: 480px;
    outline: none;
    transition: border-color 0.15s;
}
input#q:focus,
input[name="q"]:focus {
    border-bottom-color: var(--cds-focus);
}

/* ── 22. Genindex ── */
.genindex-jumpbox {
    margin-bottom: var(--cds-sp-05);
}
table.indextable {
    width: auto;
}
table.indextable td {
    border: none;
    padding: var(--cds-sp-02) var(--cds-sp-05);
}

/* ── 23. Prev / Next Footer ── */
.carbon-prevnext {
    display: flex;
    justify-content: space-between;
    gap: var(--cds-sp-05);
    margin: var(--cds-sp-09) 0 var(--cds-sp-07);
    padding-top: var(--cds-sp-06);
    border-top: 1px solid var(--cds-border);
}

.carbon-prevnext a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.carbon-prevnext__next {
    text-align: right;
    margin-left: auto;
}
.carbon-prevnext__label {
    /* label-01: 0.75rem / 400 / 1.333 / 0.32px */
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.33333;
    letter-spacing: 0.32px;
    color: var(--cds-text-muted);
    text-transform: uppercase;
}
.carbon-prevnext__title {
    /* productive-heading-02: 1rem / 600 / 1.375 */
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.375;
    color: var(--cds-link);
}
.carbon-prevnext a:hover .carbon-prevnext__title {
    text-decoration: underline;
}

/* ── 24. Footer ── */
.carbon-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--cds-border-subtle);
    padding: var(--cds-sp-05) 0;
    margin-top: var(--cds-sp-09);
    font-size: 0.75rem;
    color: var(--cds-text-secondary);
}
.carbon-footer a {
    color: var(--cds-text-secondary);
    text-decoration: none;
}
.carbon-footer a:hover {
    color: var(--cds-link);
    text-decoration: underline;
}

/* ── 25. Images ── */
.carbon-article img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* ── 26. Focus & Accessibility ── */
a:focus-visible,
input:focus-visible,
button:focus-visible {
    outline: 2px solid var(--cds-focus);
    outline-offset: 2px;
}

/* ── 27. Responsive — 4 Breakpoints (Mobile-First) ── */

/* === Base / SM: <672px === */
/* Default styles above are SM. Sidebar hidden, hamburger visible. */
.carbon-header__menu-btn {
    display: flex;
    align-items: center;
}
.carbon-header__nav {
    display: none;
}
.carbon-sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
}
.carbon-sidebar--open {
    transform: translateX(0);
}
.carbon-sidebar--open ~ .carbon-sidebar__overlay {
    display: block;
}
.carbon-main {
    margin-left: 0;
    max-width: 100%;
    padding: var(--cds-sp-05);
}
.carbon-toc {
    display: none;
}

/* === MED: 672px – 1055px === */
@media (min-width: 672px) {
    /* Header nav visible */
    .carbon-header__nav {
        display: flex;
    }

    /* Content area gets more padding */
    .carbon-main {
        padding: var(--cds-sp-06) var(--cds-sp-07);
    }

    /* Fluid type: h1 bumps up */
    h1 {
        font-size: 2rem;
        font-weight: 400;
        line-height: 1.25;
    }

}

/* === XLG: 1056px – 1583px === */
@media (min-width: 1056px) {
    /* Sidebar visible, hamburger hidden */
    .carbon-header__menu-btn {
        display: none;
    }
    .carbon-sidebar {
        transform: translateX(0);
    }

    /* Main content with sidebar margin */
    .carbon-main {
        margin-left: var(--cds-sidebar-width);
        max-width: calc(100% - var(--cds-sidebar-width));
        padding: var(--cds-sp-07) var(--cds-sp-09);
    }

    /* On-page TOC visible */
    .carbon-toc {
        display: block;
    }

    /* Make room for TOC on right */
    .carbon-main {
        padding-right: calc(var(--cds-toc-width) + var(--cds-sp-09) + var(--cds-sp-07));
    }

    /* Fluid type: h1 larger, h2 bumps */
    h1 {
        font-size: 2.25rem;
        font-weight: 300;
        line-height: 1.222;
    }
    h2 {
        font-size: 1.5rem;
        line-height: 1.33333;
    }

}

/* === MAX: ≥1584px === */
@media (min-width: 1584px) {
    .carbon-article {
        max-width: 900px;
    }

    /* Fluid type: h1 at heading-06, h2 at heading-04 */
    h1 {
        font-size: 2.625rem;
        font-weight: 300;
        line-height: 1.199;
    }
    h2 {
        font-size: 1.75rem;
        line-height: 1.28572;
    }
}

/* ── 27b. Responsive Footer ── */
@media (max-width: 671px) {
    .carbon-footer {
        flex-direction: column;
        gap: var(--cds-sp-03);
        text-align: center;
    }
}

/* ── 28. Print ── */
@media print {
    .carbon-header,
    .carbon-sidebar,
    .carbon-sidebar__overlay,
    .carbon-breadcrumbs,
    .carbon-prevnext,
    .carbon-footer,
    .carbon-toc {
        display: none;
    }
    .carbon-main {
        margin-left: 0;
        padding: 0;
        max-width: 100%;
    }
}

/* ── ASCII Art Fix: Remove letter-spacing for text-only code blocks ── */
.highlight-text pre,
pre.literal-block {
    letter-spacing: 0 !important;
}