/* ============================================================
   Spectral Docs — custom.css
   Spectral-specific: topbar, content styling, custom classes
   Loaded after: variables.css → general.css → chrome.css
   ============================================================ */

/* ---- Spectral topbar ---- */

.spectral-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 58px;
    background: var(--bg);
    border-bottom: 2px solid var(--border-strong);
}
.spectral-topbar-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 40px;
}
.spectral-topbar a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}
.spectral-topbar a:hover span {
    color: var(--accent);
}
.spectral-topbar img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.spectral-topbar span {
    font-size: 15px;
    font-weight: 400;
    color: #bbb;
}
.topbar-badge {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    margin-left: 4px;
}
.spectral-topbar-right {
    margin-left: auto;
}
.spectral-lang-select {
    padding: 4px 6px;
    border: 1px solid var(--searchbar-border-color);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 11px;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    /* SVG arrow — hardcoded fill because data URIs can't use CSS variables */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 20px;
    cursor: pointer;
}
.spectral-lang-select:focus {
    outline: none;
    border-color: var(--icons);
}

/* ---- Menu bar: sticky at viewport top, above spectral-topbar ----
   When scrolled, the menu-bar sticks at top:0 and covers the topbar
   (z-index 101 > topbar's 100). At rest it sits below the topbar
   in normal document flow.
   book.js sets menu.style.top inline on scroll — CSS !important overrides it. */

#mdbook-menu-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 101;
}

/* ---- Fix menu-title compositing artifact ----
   chrome.css sets overflow:hidden on both .menu-title and .menu-title span.
   Inside a stacking context (z-index 101), this creates a GPU-composited
   clipping layer. When topbar.js replaces .menu-title innerHTML after
   book.js has already forced a reflow (via menu.offsetTop), the composited
   layer is not properly invalidated — symptom: a background-colored
   rectangle covers the last third of the title text; right-click forces
   repaint and the artifact disappears.
   Fix: remove overflow clipping on BOTH the parent and the span. */

.menu-title {
    overflow: visible !important;
}

.menu-title span {
    overflow: visible !important;
    text-overflow: clip;
}

/* ---- Hide theme picker and search toggle ---- */

#theme-list, .theme-popup, #theme-toggle, #mdbook-theme-toggle, #mdbook-search-toggle {
    display: none;
}

/* ---- Hide language sub-items from sidebar ---- */
/* Language variants are registered in SUMMARY.md as sub-items so mdBook builds
   all HTML pages, but they should not appear in the visible navigation. */

.sidebar .chapter li > ol {
    display: none !important;
}

/* ---- prev/next chapter navigation ---- */
/* Links are rewritten by topbar.js to navigate between sections (not language
   variants).  No need to hide them. */

/* ---- Search in sidebar ---- */

/* Override .hidden { display: none !important } — keep search visible in sidebar
   even when mdBook's JS adds the hidden class. Higher specificity (0,1,1) wins. */
.sidebar #mdbook-search-wrapper {
    display: block !important;
    padding: 16px 0 16px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.sidebar #mdbook-searchbar-outer {
    max-width: none;
    margin: 0;
}
.sidebar #mdbook-searchbar {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--searchbar-border-color);
    border-radius: 4px;
    color: var(--fg);
    font-size: var(--code-font-size);
    font-family: inherit;
}
.sidebar #mdbook-searchbar:focus {
    outline: none;
    border-color: var(--sidebar-active);
}
.sidebar .searchresults-outer {
    max-width: none;
    border-bottom: none;
}
.sidebar #mdbook-searchresults {
    padding-inline-start: 0;
}
.sidebar #mdbook-searchresults li {
    font-size: 12px;
}
.sidebar #mdbook-searchresults a {
    color: var(--sidebar-fg);
}
.sidebar #mdbook-searchresults a:hover {
    color: var(--sidebar-active);
}

/* ---- Content area ---- */

.content {
    max-width: 820px;
    margin: 0 auto;
    padding: 20px 40px 40px;
}

/* ---- Headings ---- */

.content h1 {
    color: var(--heading-color);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 12px;
}
.content h1 img {
    width: 36px;
    height: 36px;
}
.content h2 {
    color: var(--heading-color);
    font-size: 18px;
    font-weight: 600;
    margin-top: 32px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
    scroll-margin-top: 74px;
}
.content h3 {
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 8px;
}
.content h4 {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 6px;
}

/* ---- Body text ---- */

.content p, .content li {
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 8px;
}
.content ul, .content ol {
    padding-left: 24px;
    margin-bottom: 12px;
}

/* ---- Links ---- */

.content a {
    color: var(--links);
    text-decoration: none;
}
.content a:hover {
    text-decoration: underline;
}

/* ---- Code (inline) ---- */

.content code {
    background: var(--code-bg);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: var(--code-font-size);
    color: var(--inline-code-color);
}

/* ---- Code (blocks) ---- */

.content pre {
    background: var(--code-bg);
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 12px;
    overflow-x: auto;
}

/* ---- Horizontal rules ---- */

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

/* ---- Subtitle ---- */

.content .subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

/* ---- Sections ---- */

.content .section {
    margin-bottom: 24px;
}

/* ---- Empty note ---- */

.content .empty-note {
    color: var(--text-muted);
    font-style: italic;
    font-size: 12px;
}

/* ---- TOC (floating table of contents) ---- */

.content .toc {
    float: right;
    width: 25%;
    margin: 0 0 16px 24px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface-inset);
}
.content .toc p {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--icons);
    margin-bottom: 6px;
}
.content .toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.content .toc li {
    margin-bottom: 4px;
}
.content .toc a {
    font-size: 12px;
    color: var(--text-muted);
}
.content .toc a:hover {
    color: var(--fg);
}

/* ---- Tags ---- */

.content .tag {
    display: inline-block;
    padding: 2px 8px;
    background: #2a4a3a;
    color: var(--blockquote-tip-color);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 4px;
}
.content .tag.blue { background: #2a3a5a; color: #6ca0dc; }
.content .tag.orange { background: #4a3a2a; color: var(--blockquote-warning-color); }

/* ---- Cards ---- */

.content .card {
    display: block;
    padding: 20px 24px;
    background: var(--surface-raised);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 16px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.content .card:hover {
    border-color: var(--scrollbar);
    background: var(--theme-hover);
    text-decoration: none;
}

/* ---- Mobile ---- */

@media (max-width: 768px) {
    .spectral-topbar-inner {
        padding: 0 16px;
    }
    #mdbook-menu-bar {
        position: fixed !important;
        top: 58px !important;
        left: 0;
        right: 0;
    }
}

/* ============================================================
   Print stylesheet — B&W, no fills, outlined elements, compact
   ============================================================ */

@media print {

    /* ---- Global reset: white background, black text ---- */

    html, body, .page-wrapper, .page, .content {
        background: #fff !important;
        color: #000 !important;
    }
    :root {
        font-size: 100%;            /* restore 16px base for pt calculations */
    }
    body {
        font-size: 10pt;
        line-height: 1.45;
        margin: 0;
        padding: 0;
    }

    /* ---- Hide UI chrome ---- */

    .spectral-topbar,
    .sidebar,
    .nav-chapters,
    .mobile-nav-chapters,
    .nav-wrapper,
    .left-buttons,
    .right-buttons,
    #mdbook-menu-bar-hover-placeholder,
    .sidebar-resize-handle,
    pre > .buttons,
    #mdbook-help-container,
    .theme-popup {
        display: none !important;
    }

    /* ---- Page layout ---- */

    .page-wrapper {
        transform: none !important;
        margin: 0 !important;
    }
    .page {
        padding: 0 !important;
        margin: 0 !important;
    }
    .content {
        max-width: none;
        padding: 0;
        margin: 0;
        overflow: visible;
    }
    .content main {
        max-width: none;
    }

    /* ---- Menu-title (section header with logo) ---- */

    #mdbook-menu-bar {
        position: static !important;
        margin: 0;
        z-index: auto;
    }
    .menu-title {
        display: flex;
        align-items: center;
        gap: 8pt;
        height: auto;
        width: auto;
        padding: 0 0 6pt 0;
        margin: 0 0 4pt 0;
        border-bottom: 1.5pt solid #000;
        font-size: 16pt;
        font-weight: 700;
        color: #000 !important;
        cursor: default;
    }
    .menu-title img {
        width: 24pt;
        height: 24pt;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .menu-title span {
        overflow: visible;
        white-space: normal;
    }

    /* ---- Headings ---- */

    .content h1, h1 {
        font-size: 15pt;
        font-weight: 700;
        color: #000 !important;
        border-bottom: none;
        margin: 14pt 0 4pt 0;
        break-after: avoid;
    }
    .content h1 img {
        width: 20pt;
        height: 20pt;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .content h2, h2 {
        font-size: 12pt;
        font-weight: 700;
        color: #000 !important;
        border-bottom: 0.75pt solid #000;
        padding-bottom: 3pt;
        margin: 12pt 0 4pt 0;
        break-after: avoid;
    }
    .content h3, h3 {
        font-size: 10.5pt;
        font-weight: 700;
        color: #000 !important;
        margin: 8pt 0 3pt 0;
        break-after: avoid;
    }
    .content h4, h4 {
        font-size: 10pt;
        font-weight: 700;
        color: #000 !important;
        margin: 6pt 0 2pt 0;
        break-after: avoid;
    }

    /* ---- Body text ---- */

    .content p, .content li, p, li {
        font-size: 10pt;
        color: #000 !important;
        margin-top: 0;
        margin-bottom: 4pt;
    }
    .content ul, .content ol {
        padding-left: 18pt;
        margin-bottom: 6pt;
    }
    .content .subtitle {
        font-size: 10pt;
        color: #444 !important;
        margin-bottom: 10pt;
    }

    /* ---- Links: black + underline ---- */

    a, a:link, a:visited,
    .content a, .content a:link, .content a:visited,
    .content .header:link, .content .header:visited {
        color: #000 !important;
        text-decoration: underline;
    }
    .content .header:link, .content .header:visited {
        text-decoration: none;
    }

    /* ---- Code (inline): outlined ---- */

    code, .content code {
        background: none !important;
        color: #000 !important;
        border: 0.5pt solid #999;
        border-radius: 2pt;
        padding: 0.5pt 3pt;
        font-size: 8.5pt;
    }

    /* ---- Code (blocks): outlined ---- */

    pre, .content pre {
        background: none !important;
        border: 0.75pt solid #000;
        border-radius: 3pt;
        padding: 8pt 10pt;
        margin-bottom: 8pt;
        overflow: visible;
        white-space: pre-wrap;
        word-wrap: break-word;
        break-inside: avoid;
    }
    pre > code, pre code {
        border: none !important;
        padding: 0;
        font-size: 8pt;
        line-height: 1.35;
    }

    /* Reset syntax highlighting colors */
    .hljs, .hljs * {
        color: #000 !important;
        background: none !important;
    }

    /* ---- Blockquotes: left border only ---- */

    blockquote {
        background: none !important;
        border-left: 2pt solid #000;
        border-radius: 0;
        padding: 4pt 12pt;
        margin: 0 0 8pt 0;
        color: #000 !important;
        break-inside: avoid;
    }

    /* ---- Blockquote tags (note, tip, warning…): black border ---- */

    .blockquote-tag {
        border-inline-start-color: #000 !important;
        background: none !important;
    }
    .blockquote-tag-title,
    .blockquote-tag-note .blockquote-tag-title,
    .blockquote-tag-tip .blockquote-tag-title,
    .blockquote-tag-important .blockquote-tag-title,
    .blockquote-tag-warning .blockquote-tag-title,
    .blockquote-tag-caution .blockquote-tag-title {
        color: #000 !important;
    }
    .blockquote-tag-title .fa-svg svg {
        fill: #000 !important;
    }

    /* ---- Tags: outlined ---- */

    .content .tag,
    .content .tag.blue,
    .content .tag.orange {
        background: none !important;
        color: #000 !important;
        border: 0.75pt solid #000;
        padding: 1pt 5pt;
        font-size: 8.5pt;
    }

    /* ---- Cards: outlined ---- */

    .content .card {
        background: none !important;
        border: 0.75pt solid #000;
        padding: 10pt 14pt;
        margin-bottom: 10pt;
        break-inside: avoid;
    }

    /* ---- Tables: black borders ---- */

    table {
        font-size: 9pt;
        border-collapse: collapse;
        break-inside: avoid;
    }
    table thead th {
        background: none !important;
        color: #000 !important;
        border-bottom: 1.5pt solid #000;
        padding: 4pt 6pt;
    }
    table td {
        color: #000 !important;
        border-bottom: 0.5pt solid #666;
        padding: 3pt 6pt;
    }
    table tr:hover {
        background: none !important;
    }

    /* ---- TOC (floating) ---- */

    .content .toc {
        background: none !important;
        border: 0.75pt solid #000;
        border-radius: 0;
    }
    .content .toc p {
        color: #000 !important;
    }
    .content .toc a {
        color: #000 !important;
        font-size: 9pt;
    }

    /* ---- kbd ---- */

    kbd {
        background: none !important;
        color: #000 !important;
        border: 0.5pt solid #000;
    }

    /* ---- Horizontal rule ---- */

    .content hr, hr {
        border-top: 0.5pt solid #000;
        margin: 16pt 0;
    }

    /* ---- Footnotes ---- */

    .footnote-definition > li:target::before {
        border-color: #000;
    }

    /* ---- Warning ---- */

    .warning {
        border-inline-start-color: #000;
    }
    .warning:before {
        background: #fff !important;
        color: #000 !important;
    }

    /* ---- Images ---- */

    .content img, .content video {
        max-width: 100%;
        break-inside: avoid;
    }

    /* ---- Avoid blank pages ---- */

    * {
        orphans: 3;
        widows: 3;
    }
    h1, h2, h3, h4, h5, h6 {
        break-after: avoid;
        orphans: 4;
    }
    .content .section {
        margin-bottom: 10pt;
    }

    /* ---- Page breaks between chapters (print.html) ---- */

    div[style*="break-before"] {
        break-before: page;
        page-break-before: always;
    }

    /* ---- Page margins ---- */

    @page {
        margin: 2cm 2.5cm;
    }
}