/*
 * Carbon Design System theme for mdBook.
 *
 * - `.light`  -> Carbon "White" theme
 * - `.navy`   -> Carbon "Gray 100" theme
 * - Header (#mdbook-menu-bar) is pinned to Gray 100 always, matching the
 *   Carbon UI Shell Header convention (the header stays dark regardless
 *   of the active content theme).
 *
 * Note: mdBook's base stylesheet sets html { font-size: 62.5% }, i.e.
 * 1rem == 10px. All sizes below are kept in px to match Carbon's type
 * scale exactly instead of fighting that base.
 */

:root {
    --carbon-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --carbon-font-mono: 'IBM Plex Mono', 'Source Code Pro', Consolas, Menlo, monospace;

    /* Carbon Gray 100 (used to pin the header regardless of theme) */
    --carbon-g100-bg: #161616;
    --carbon-g100-bg-hover: #393939;
    --carbon-g100-bg-active: #4c4c4c;
    --carbon-g100-border: #393939;
    --carbon-g100-text: #f4f4f4;
    --carbon-g100-text-secondary: #c6c6c6;

    --carbon-blue-60: #0f62fe;
    --carbon-blue-70: #0043ce;
    --carbon-blue-40: #78a9ff;

    --mono-font: var(--carbon-font-mono);
    --content-max-width: 800px;
    --menu-bar-height: 48px;
    --page-padding: 24px;
}

::selection {
    background: var(--carbon-blue-40);
    color: #161616;
}

/* ------------------------------------------------------------------ */
/* Carbon White (maps to mdBook's "light" theme)                       */
/* ------------------------------------------------------------------ */
.light,
html:not(.js) {
    --bg: #ffffff;
    --fg: #161616;

    --sidebar-bg: #ffffff;
    --sidebar-fg: #161616;
    --sidebar-non-existant: #a8a8a8;
    --sidebar-active: #0f62fe;
    --sidebar-spacer: #e0e0e0;

    --scrollbar: #8d8d8d;

    --icons: #525252;
    --icons-hover: #161616;

    --links: #0f62fe;

    --inline-code-color: #161616;

    --theme-popup-bg: #ffffff;
    --theme-popup-border: #8d8d8d;
    --theme-hover: #e8e8e8;
    --theme-active: #c6c6c6;

    --quote-bg: #f4f4f4;
    --quote-border: #0f62fe;

    --warning-border: #ff832b;

    --table-border-color: #e0e0e0;
    --table-header-bg: #f4f4f4;
    --table-alternate-bg: #f4f4f4;

    --searchbar-border-color: #8d8d8d;
    --searchbar-bg: #f4f4f4;
    --searchbar-fg: #161616;
    --searchbar-shadow-color: transparent;
    --searchresults-header-fg: #525252;
    --searchresults-border-color: #e0e0e0;
    --searchresults-li-bg: #f4f4f4;
    --search-mark-bg: #a6c8ff;

    --color-scheme: light;

    --footnote-highlight: #a6c8ff;
    --overlay-bg: rgba(22, 22, 22, 0.4);

    --blockquote-note-color: #0043ce;
    --blockquote-tip-color: #0e6027;
    --blockquote-important-color: #6929c4;
    --blockquote-warning-color: #8a3800;
    --blockquote-caution-color: #a2191f;

    --sidebar-header-border-color: #0f62fe;
}

/* ------------------------------------------------------------------ */
/* Carbon Gray 100 (maps to mdBook's "navy" theme = preferred dark)    */
/* ------------------------------------------------------------------ */
.navy {
    --bg: #161616;
    --fg: #f4f4f4;

    --sidebar-bg: #161616;
    --sidebar-fg: #f4f4f4;
    --sidebar-non-existant: #6f6f6f;
    --sidebar-active: #78a9ff;
    --sidebar-spacer: #393939;

    --scrollbar: #6f6f6f;

    --icons: #c6c6c6;
    --icons-hover: #ffffff;

    --links: #78a9ff;

    --inline-code-color: #f4f4f4;

    --theme-popup-bg: #262626;
    --theme-popup-border: #525252;
    --theme-hover: #393939;
    --theme-active: #4c4c4c;

    --quote-bg: #262626;
    --quote-border: #78a9ff;

    --warning-border: #ff832b;

    --table-border-color: #393939;
    --table-header-bg: #262626;
    --table-alternate-bg: #262626;

    --searchbar-border-color: #525252;
    --searchbar-bg: #262626;
    --searchbar-fg: #f4f4f4;
    --searchbar-shadow-color: transparent;
    --searchresults-header-fg: #c6c6c6;
    --searchresults-border-color: #393939;
    --searchresults-li-bg: #262626;
    --search-mark-bg: #0043ce;

    --color-scheme: dark;

    --footnote-highlight: #0043ce;
    --overlay-bg: rgba(0, 0, 0, 0.6);

    --blockquote-note-color: #78a9ff;
    --blockquote-tip-color: #42be65;
    --blockquote-important-color: #be95ff;
    --blockquote-warning-color: #ff832b;
    --blockquote-caution-color: #ff8389;

    --sidebar-header-border-color: #78a9ff;
}

/* ------------------------------------------------------------------ */
/* Typography — Carbon productive type scale                           */
/* ------------------------------------------------------------------ */
html {
    scroll-behavior: smooth;
}

body,
.menu-title,
.theme-popup,
button,
input {
    font-family: var(--carbon-font-sans);
    letter-spacing: 0;
}

#content {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}

#content p {
    margin: 0 0 16px;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
    font-family: var(--carbon-font-sans);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--fg);
}

#content h1 {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 600;
    margin: 0 0 16px;
}

#content h2 {
    font-size: 23px;
    line-height: 1.3;
    margin-top: 40px;
    margin-bottom: 12px;
}

#content h3 {
    font-size: 18px;
    line-height: 1.4;
    margin-top: 28px;
    margin-bottom: 8px;
}

#content h4 {
    font-size: 16px;
    line-height: 1.4;
    margin-top: 24px;
    margin-bottom: 8px;
}

#content h5,
#content h6 {
    font-size: 14px;
    line-height: 1.4;
    margin-top: 16px;
    margin-bottom: 8px;
}

code, pre, tt, kbd, .hljs {
    font-family: var(--carbon-font-mono) !important;
    font-size: 14px;
}

a {
    color: var(--links);
    text-decoration: none;
}

.content a:link,
.content a:visited {
    text-underline-offset: 3px;
}

a:hover {
    text-decoration: underline;
}

a:active {
    color: var(--carbon-blue-70);
}

.navy a:active {
    color: var(--carbon-blue-40);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
.chapter li a:focus-visible {
    outline: 2px solid var(--sidebar-active);
    outline-offset: -2px;
}

/* ------------------------------------------------------------------ */
/* Flatten Carbon's signature: no rounded corners, no soft shadows     */
/* ------------------------------------------------------------------ */
pre,
pre > .buttons button,
.theme-popup,
#searchbar,
mark,
img {
    border-radius: 0 !important;
}

blockquote {
    background: var(--quote-bg);
    border: none;
    border-left: 3px solid var(--quote-border);
    border-radius: 0;
    padding: 12px 20px;
    margin: 16px 0;
}

blockquote p {
    margin: 0;
}

hr {
    border: none;
    border-top: 1px solid var(--table-border-color);
    margin: 32px 0;
}

/* ------------------------------------------------------------------ */
/* Menu / top bar — Carbon UI Shell Header (follows the page theme)    */
/* ------------------------------------------------------------------ */
#mdbook-menu-bar,
#mdbook-menu-bar-hover-placeholder {
    background-color: var(--bg) !important;
}

#mdbook-menu-bar {
    border-bottom: 1px solid var(--sidebar-spacer) !important;
    box-shadow: none !important;
}

.menu-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--fg) !important;
    text-transform: none;
}

#mdbook-menu-bar .icon-button {
    height: var(--menu-bar-height);
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

#mdbook-menu-bar .icon-button:hover {
    background-color: var(--theme-hover);
}

#mdbook-menu-bar .icon-button:active {
    background-color: var(--theme-active);
}

/* ------------------------------------------------------------------ */
/* Sidebar — Carbon UI Shell left nav                                  */
/* ------------------------------------------------------------------ */
.sidebar {
    font-family: var(--carbon-font-sans);
    border-right: 1px solid var(--sidebar-spacer);
}

.sidebar .sidebar-scrollbox {
    padding: 16px 0;
}

.chapter {
    font-size: 14px;
}

.chapter li a {
    padding: 8px 16px;
    border-left: 3px solid transparent;
    color: var(--sidebar-fg);
    transition: background-color 70ms ease, border-color 70ms ease;
}

.chapter li a:hover {
    background: var(--theme-hover);
    text-decoration: none;
}

.chapter li a:active {
    background: var(--theme-active);
}

.chapter li a.active {
    color: var(--sidebar-active);
    border-left-color: var(--sidebar-active);
    background: var(--theme-hover);
    font-weight: 600;
}

.chapter .spacer {
    background: var(--sidebar-spacer);
    height: 1px;
    margin: 8px 16px;
}

.chapter li.chapter-item {
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* Search bar — Carbon Search field                                    */
/* ------------------------------------------------------------------ */
#searchbar {
    border: none;
    border-bottom: 1px solid var(--searchbar-border-color);
    border-radius: 0;
    box-shadow: none;
    background: var(--searchbar-bg);
    height: 40px;
    padding: 0 16px;
    transition: border-color 70ms ease, outline 70ms ease;
}

#searchbar:focus {
    outline: 2px solid var(--sidebar-active);
    outline-offset: -2px;
    box-shadow: none;
}

#searchresults-header {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.32px;
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Code blocks & inline code — Carbon CodeSnippet                      */
/* ------------------------------------------------------------------ */
:not(pre) > code {
    background: var(--theme-hover);
    color: var(--inline-code-color);
    padding: 2px 6px;
    border-radius: 0;
}

pre {
    border: 1px solid var(--table-border-color);
    background: var(--table-alternate-bg) !important;
}

pre > .buttons button {
    border: 1px solid var(--table-border-color);
    background: var(--bg);
}

/* ------------------------------------------------------------------ */
/* Mermaid — no code-block chrome, pannable/zoomable canvas            */
/* ------------------------------------------------------------------ */
pre.mermaid {
    border: none !important;
    background: transparent !important;
    padding: 16px 0;
    overflow: hidden;
    position: relative;
    touch-action: none;
}

pre.mermaid svg {
    display: block;
    margin: 0 auto;
    cursor: grab;
}

pre.mermaid svg:active {
    cursor: grabbing;
}

/* ------------------------------------------------------------------ */
/* Tables — Carbon DataTable                                           */
/* ------------------------------------------------------------------ */
table {
    border-collapse: collapse;
    font-size: 14px;
    width: 100%;
}

table td, table th {
    border: none;
    border-bottom: 1px solid var(--table-border-color);
    padding: 12px 16px;
    text-align: left;
}

table thead th {
    font-weight: 600;
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--table-border-color);
}

table tbody tr:hover {
    background: var(--theme-hover);
}

/* ------------------------------------------------------------------ */
/* Theme popup — Carbon overflow menu                                  */
/* ------------------------------------------------------------------ */
.theme-popup {
    border: 1px solid var(--theme-popup-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    padding: 4px 0;
}

.theme-popup .theme {
    padding: 8px 24px 8px 12px;
    font-size: 14px;
}

.theme-popup .theme:hover {
    background: var(--theme-hover);
    color: var(--fg);
}

/* ------------------------------------------------------------------ */
/* Scrollbars                                                          */
/* ------------------------------------------------------------------ */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar);
    border: 3px solid var(--sidebar-bg);
}