/* ============================================
   Chrome — UI elements
   RamJet mdBook theme

   Sections:
   1. Header (menu bar, navigation, icon buttons)
   2. Sidebar (left + right navigation panels)
   3. Search (modal dialog and results)
   4. Components (code block buttons, popups, responsive)
   ============================================ */

/* ============================================
   1. HEADER
   ============================================ */

/* --- Scrollbar --- */

html {
    scrollbar-color: var(--scrollbar-color) transparent;
}

/* --- Link colors --- */

#mdbook-searchresults a,
.content a:link,
a:visited,
a > .hljs {
    color: var(--link-color);
}

/* --- Grid layout --- */

.grid-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}

body {
    overflow-x: clip;
}

/* --- Menu bar --- */

.menu-bar {
    grid-column: 1 / -1;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 101;
    display: flex;
    align-items: center;
    height: var(--menu-bar-height);
    box-sizing: border-box;
    background-color: var(--header-background);
    backdrop-filter: blur(12px);
}

/* --- Icon buttons --- */

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    color: var(--icon-color);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    transition:
        color 0.2s,
        background-color 0.2s;
}

.icon-button:hover,
.icon-button:active {
    color: var(--icon-color-hover);
    background-color: var(--theme-hover-background);
}

.icon-button .fa-svg {
    margin: 0;
}

.icon-button .fa-svg svg {
    width: 20px;
    height: 20px;
}

/* --- Search trigger (header bar) --- */

.search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border: none;
    background: transparent;
    padding: 4px 10px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--icon-color);
    font-family: var(--body-font);
    font-size: 0.875rem;
    transition: border-color 0.2s;
}
.search-trigger:hover {
    border-color: var(--page-foreground-muted);
}
.search-trigger svg {
    flex-shrink: 0;
}
.search-trigger-text {
    display: none;
}
.search-trigger-kbd {
    display: none;
    font-size: 0.6875rem;
    padding: 1px 5px;
    border-radius: 4px;
    border: none;
    color: var(--page-foreground-muted);
    font-family: var(--body-font);
    line-height: 1.5;
    border: 0;
    background: var(--kbd-background);
    box-shadow: none;
}

@media only screen and (min-width: 768px) {
    .search-trigger {
        border: 1px solid var(--header-border-color);
        margin: 0 12px;
    }
    .search-trigger-text,
    .search-trigger-kbd {
        display: inline;
    }
}

/* --- Theme menu --- */

/* A [popover] arrives in the UA's dialog frame — a border, padding, and
   `inset: 0` with `margin: auto` centring it — so those are undone before it
   is a sheet at all. It is `position: fixed` because the top layer has no
   ancestor to be positioned against; the script writes top and right on the
   way open. Opaque, not glass: a menu over content rather than a surface
   with content on it. */
.theme-menu {
    position: fixed;
    inset: auto;
    margin: 0;
    border: 1px solid var(--theme-popup-border-color);
    padding: 6px;
    min-width: 132px;
    background: var(--theme-popup-background);
    color: var(--page-foreground);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 28px -12px rgba(0, 0, 0, 0.35);
    font-family: var(--body-font);
}
.theme-menu button {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 7px 12px;
    border: none;
    background: none;
    color: var(--page-foreground-secondary);
    border-radius: calc(var(--border-radius) - 4px);
    cursor: pointer;
    transition:
        background-color 0.15s,
        color 0.15s;
}
.theme-menu button:hover {
    background: var(--theme-hover-background);
    color: var(--page-foreground);
}
/* The chosen row takes the reader's colour — it is the one row that is not
   an offer. */
.theme-menu button[aria-pressed="true"] {
    color: var(--marker-color);
}
html:not(.js) #theme-toggle {
    display: none;
}

/* --- Left / right button groups --- */

.left-buttons {
    display: flex;
    align-items: center;
    margin: 0 0 0 14px;
    gap: 12px;
    min-width: 0;
    flex-shrink: 0;
}

.center-bundle {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 8px 0 14px;
    min-width: 0;
}

.right-buttons {
    display: flex;
    align-items: center;
    margin: 0 14px 0 auto;
    gap: 12px;
}
html:not(.js) #mdbook-sidebar-toggle {
    display: none;
}
.right-buttons a {
    text-decoration: none;
}

/* --- Site logo --- */

.site-logo-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.site-logo-link:empty {
    display: none;
}
.site-logo {
    height: var(--site-logo-height);
    width: auto;
    display: block;
}
html.light .site-logo-dark,
html.coal .site-logo-light {
    display: none;
}

/* --- Menu title --- */

.menu-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
    margin: 0;
    cursor: pointer;
    letter-spacing: -0.01em;
    line-height: 1.2;
    font-optical-sizing: auto;
}

.menu-title-book,
.menu-title-chapter {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-title-book {
    font-weight: 650;
    font-size: 1rem;
}

.menu-title-chapter {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--page-foreground-muted);
    margin-top: 1px;
}

/* --- Menu bar link/button colors --- */

.menu-bar,
.menu-bar:visited,
.nav-chapters,
.nav-chapters:visited,
.menu-bar .icon-button,
.menu-bar a.icon-button {
    color: var(--icon-color);
}

.menu-bar .icon-button:hover,
.nav-chapters:hover,
.menu-bar a.icon-button:hover {
    color: var(--icon-hover-color);
    background-color: var(--icon-hover-background);
}

/* --- Navigation chapter links (in header) --- */

.nav-chapters {
    text-decoration: none;
}

/* RTL support for nav arrows */
[dir="rtl"] .nav-chapters.previous svg,
[dir="rtl"] .nav-chapters.next svg {
    transform: rotate(180deg);
}

/* Hide default mdBook nav (we use header nav instead) */
.nav-wide-wrapper,
.nav-wrapper {
    display: none !important;
}

/* ============================================
   2. SIDEBAR
   ============================================ */

/* --- Left sidebar (mobile: fixed overlay, desktop: sticky grid column) --- */

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    font-size: 0.9375rem;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Flat colour first so the gradient degrades to plain teal if oklab
       interpolation isn't supported. */
    background-color: var(--sidebar-background);
    background-image: var(--sidebar-gradient);
    color: var(--sidebar-foreground);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

[dir="rtl"] .sidebar {
    left: unset;
    right: 0;
    transform: translateX(100%);
}

html.sidebar-mobile-open .sidebar {
    transform: none;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.sidebar code {
    line-height: 2em;
}

.sidebar .sidebar-scrollbox {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    padding: 14px 20px 30px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
}

/* --- Sidebar header: the logo --- */

/* The logo lives at the top of the sidebar, the book title in the header —
   the one place each. A header carrying both the mark and the name it spells
   read the same word twice. The header keeps a copy of the logo and shows it
   only while the sidebar is out of sight: below the desktop breakpoint, where
   the sidebar is an overlay, and on a desktop that collapsed it. Where the
   logo goes is the site script's call (window.ramjetSite.home, index.hbs);
   until it says, the book root. */
.sidebar-header {
    flex: none;
    padding: 24px 20px 8px;
    /* The scrollbox below reserves a scrollbar gutter; reserve the same one
       here, or the logo stands a gutter's width off the chapter list. */
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* The header block and the chapter list share one column, right-aligned:
   past the layout-max-width breakpoint the sidebar grows outward and the
   column stays beside the content. */
.sidebar-brand,
.chapter {
    width: calc(var(--sidebar-target-width) - 40px);
    max-width: 100%;
    margin: 0 0 0 auto;
}

/* A flex row, not text-align: an inline logo would sit on a line box and
   carry the line's descender space under it.

   Left, not centred, and inset by the 8px a chapter link carries
   (`.chapter li a`) — so the mark starts where the first chapter's word does.
   That is the line the eye reads the list against; centring the logo over it
   put the one fixed thing on the page off every edge in the column. */
.sidebar-brand {
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
    padding-inline-start: 8px;
}

.sidebar-header .site-logo-link {
    display: inline-flex;
}
.sidebar-header .site-logo {
    height: var(--sidebar-logo-height);
}

/* A book with no logo has no header to draw. The logos leave the tree when
   their files 404, so the block collapses with them. */
.sidebar-header:not(:has(.site-logo)) {
    display: none;
}

/* --- Site links: the header's icons --- */

/* Filled by the site script — one icon button per link, in the cluster
   between search and the page tools, desktop only; the footer carries the
   same links as text at every width. Empty, it takes no room. */
.site-links {
    display: contents;
}

.sidebar-iframe-inner {
    --padding: 10px;
    background-color: var(--sidebar-background);
    background-image: var(--sidebar-gradient);
    padding: var(--padding);
    margin: 0;
    font-size: 0.9375rem;
    color: var(--sidebar-foreground);
    min-height: calc(100vh - var(--padding) * 2);
}
.sidebar-iframe-outer {
    border: none;
    height: 100%;
    position: absolute;
    inset: 0;
}

/* --- Sidebar backdrop (mobile) --- */

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-background);
    z-index: 150;
    cursor: default;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.2s ease-out,
        visibility 0.2s ease-out;
}

html.sidebar-mobile-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- Desktop (>=960px): sidebar as sticky grid column --- */

@media only screen and (min-width: 960px) {
    .grid-layout {
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    }

    .sidebar {
        grid-column: 1;
        grid-row: 1 / -1;
        position: sticky;
        top: 0;
        height: 100vh;
        width: auto;
        transform: none;
        z-index: auto;
        transition: opacity 0.2s ease-out;
    }

    [dir="rtl"] .sidebar {
        transform: none;
    }

    .menu-bar {
        grid-column: 2 / -1;
        grid-row: 1;
    }

    .content {
        grid-column: 2;
        grid-row: 2;
    }

    html.sidebar-desktop-hidden .grid-layout {
        grid-template-columns: 0px minmax(0, 1fr);
    }

    html.sidebar-desktop-hidden .sidebar {
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        min-width: 0;
    }

    /* The sidebar is showing its logo; the header needs none. */
    html:not(.sidebar-desktop-hidden) .menu-bar .site-logo-link {
        display: none;
    }

    .sidebar-backdrop {
        display: none;
    }
}

/* --- Thin scrollbars (sidebar + search results) --- */

.sidebar .sidebar-scrollbox,
.right-sidebar,
.search-dialog .searchresults-outer {
    scrollbar-width: thin;
}

.sidebar .sidebar-scrollbox::-webkit-scrollbar {
    width: 6px;
    background: var(--sidebar-background);
}
.sidebar .sidebar-scrollbox::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 3px;
}

.right-sidebar::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}
.right-sidebar::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 3px;
}

.search-dialog .searchresults-outer::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}
.search-dialog .searchresults-outer::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 3px;
}

/* --- Chapter list --- */

.chapter {
    list-style: none outside none;
    padding-inline-start: 0;
    line-height: 2em;
    /* width and margin: shared with .sidebar-brand, under "Sidebar header" */
}

.chapter li {
    color: var(--sidebar-missing-color);
    font-weight: 520;
}

.chapter-link-wrapper {
    display: flex;
}

.chapter li a {
    position: relative;
    text-decoration: none;
    color: var(--sidebar-foreground);
    display: block;
    padding: 2px 8px;
    border-radius: 6px;
    transition:
        color 0.15s,
        background-color 0.15s;
}

/* The number hangs in its own gutter, so a title that wraps starts its
   second line under its first word rather than under the number. */
.chapter li a:has(> strong) {
    padding-inline-start: calc(8px + var(--chapter-number-width));
    text-indent: calc(-1 * var(--chapter-number-width));
}
.chapter li a strong {
    display: inline-block;
    width: var(--chapter-number-width);
    text-indent: 0;
    color: var(--gray-500);
    font-weight: 400;
}

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

/* The chapter you're on gets an ember rail, the same marker the "On this
   page" list uses. A tinted pill was the first try, but an ember fill sitting
   on the teal end of the sidebar gradient went muddy — a rail states the same
   thing without mixing the two colours. */
.chapter li a.active {
    color: var(--sidebar-active-color);
    font-weight: 600;
}

.chapter li a.active::before {
    content: "";
    position: absolute;
    inset-inline-start: -10px;
    top: 3px;
    bottom: 3px;
    width: 3px;
    border-radius: 2px;
    background: var(--marker-rail);
}

.chapter-fold-toggle {
    cursor: pointer;
    margin-inline-start: auto;
    padding: 0 10px;
    user-select: none;
    opacity: 0.68;
}
.chapter-fold-toggle div {
    transition: transform 0.3s;
}
.chapter li:not(.expanded) > ol {
    display: none;
}
.chapter li.chapter-item {
    line-height: 1.5em;
}
.chapter li.chapter-item + .chapter-item {
    margin-block-start: 0.4em;
}
.chapter li.chapter-item:empty {
    margin-block-start: 0.8em;
}
.chapter li.expanded > span > .chapter-fold-toggle div {
    transform: rotate(90deg);
}

/* current-header highlighting moved to right sidebar */

/* Hide left-sidebar heading TOC — we use the right sidebar instead */
.on-this-page {
    display: none;
}

/* --- Spacer (divider line) --- */

.spacer {
    width: 100%;
    height: 1px;
    margin: 8px 0;
}
.chapter .spacer {
    background-color: var(--sidebar-spacer-color);
}

@media (-moz-touch-enabled: 1), (pointer: coarse) {
    .chapter li a {
        padding: 5px 8px;
        width: 100%;
    }
    .chapter li.chapter-item + .chapter-item {
        mask-type: 0.266rem;
    }
    .spacer {
        margin: 12px 0;
    }
}

/* --- Nested sections --- */

.section {
    list-style: none outside none;
    padding-inline-start: 20px;
    line-height: 1.9em;
}

/* --- Right sidebar (On this page) --- */

.right-sidebar {
    display: none;
    font-size: 0.875rem;
    padding: 36px 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    max-width: var(--right-sidebar-width);
}

.right-sidebar-inner {
    border-left: 1px solid var(--header-border-color);
    margin-left: 1px;
    padding-left: 22px;
    max-width: 260px;
}

.right-sidebar-title {
    margin: 0 0 8px 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--page-foreground);
}

.right-sidebar-toc {
    list-style: none;
    margin: 0;
    padding: 0;
}

.right-sidebar-toc .toc-item {
    margin: 0;
    line-height: 1.4;
    font-weight: 500;
    position: relative;
}

.right-sidebar-toc .toc-item a {
    display: block;
    padding: 6px 0;
    color: var(--page-foreground-secondary);
    text-decoration: none;
    transition: color 0.16s;
}
.right-sidebar-toc .toc-item.toc-h3 a {
    color: var(--page-foreground-muted);
}
.right-sidebar-toc .toc-item a::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 2px;
    bottom: 2px;
    width: 2px;
    background: transparent;
    border-radius: 2px;
    transition:
        background 0.16s,
        width 0.16s;
}

.right-sidebar-toc .toc-item a:hover {
    color: var(--page-foreground);
}

.right-sidebar-toc .toc-item a.active {
    color: var(--marker-color);
    font-weight: 600;
}
.right-sidebar-toc .toc-item a.active::before {
    width: 3px;
    background: var(--marker-rail);
}

.right-sidebar-toc .toc-h3 {
    padding-left: 20px;
    font-weight: 400;
}

.right-sidebar-toc .toc-empty {
    padding: 6px 0;
    color: var(--page-foreground-muted);
    font-style: italic;
    font-size: 0.875rem;
}

/* --- Wide desktop (>=1280px): both sidebars --- */

@media only screen and (min-width: 1280px) {
    .grid-layout {
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(
                --right-sidebar-width
            );
    }

    html.sidebar-desktop-hidden .grid-layout {
        grid-template-columns: 0px minmax(0, 1fr) var(--right-sidebar-width);
    }

    .right-sidebar {
        grid-column: 3;
        grid-row: 1 / -1;
        display: block;
        position: sticky;
        top: var(--menu-bar-height);
        height: calc(100vh - var(--menu-bar-height));
        overflow-y: auto;
    }
}

/* --- Very wide (>=1480px): sidebars grow outward, content stays centered --- */

@media only screen and (min-width: 1480px) {
    /* Side columns are minmax(target, 1fr): they hit their minimum at the
       layout-max-width breakpoint and absorb any extra viewport space
       beyond it, so the middle column tops out at (layout-max-width -
       2 * sidebar). No 100vw, no scrollbar quirks — the cascade stays
       in pixel space. */
    .grid-layout {
        grid-template-columns:
            minmax(var(--sidebar-target-width), 1fr)
            minmax(
                0,
                calc(
                    var(--layout-max-width) - var(--sidebar-target-width) -
                        var(--right-sidebar-width)
                )
            )
            minmax(var(--right-sidebar-width), 1fr);
    }

    /* At very wide viewports, the sidebar always shows — there's plenty of
       room for content. Override the toggle so .sidebar-desktop-hidden
       has no effect here, and hide the toggle button so users can't try
       to collapse it. The class itself is left intact so going back to a
       smaller viewport restores the user's collapsed preference. */
    html.sidebar-desktop-hidden .grid-layout {
        grid-template-columns:
            minmax(var(--sidebar-target-width), 1fr)
            minmax(
                0,
                calc(
                    var(--layout-max-width) - var(--sidebar-target-width) -
                        var(--right-sidebar-width)
                )
            )
            minmax(var(--right-sidebar-width), 1fr);
    }

    html.sidebar-desktop-hidden .sidebar {
        overflow: hidden;
        opacity: 1;
        pointer-events: auto;
    }

    #mdbook-sidebar-toggle,
    .menu-bar .site-logo-link {
        display: none;
    }
}

/* ============================================
   3. SEARCH
   ============================================ */

/* --- Overlay backdrop --- */

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--overlay-background);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.2s ease-out,
        visibility 0.2s ease-out;
}

.search-overlay.hidden {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* --- Dialog card --- */

.search-dialog {
    background: var(--page-background);
    border: 2px solid var(--search-dialog-border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
    max-width: 720px;
    width: 90%;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- Search input --- */

.search-dialog .searchbar-outer {
    margin: 0;
    max-width: none;
}

.search-dialog .search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 10px;
}

/* Only show divider when results are visible */
.search-dialog:has(.searchresults-outer:not(.hidden)) .search-wrapper {
    border-bottom: 2px solid var(--header-border-color);
}

.search-dialog-icon {
    flex-shrink: 0;
    color: var(--page-foreground-muted);
}

#mdbook-searchbar {
    flex: 1;
    margin: 0;
    padding: 4px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--page-foreground);
    font-family: var(--body-font);
    font-size: 1rem;
    box-sizing: border-box;
}
#mdbook-searchbar:focus,
#mdbook-searchbar.active {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}
#mdbook-searchbar::placeholder {
    color: var(--page-foreground-muted);
}

/* --- Close button / Esc badge --- */

.search-close-btn {
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}
.search-close-btn kbd {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--kbd-background);
    border: none;
    color: var(--page-foreground-muted);
    font-family: var(--body-font);
    line-height: 1.4;
}

/* --- Spinner --- */

#mdbook-searchbar-outer .spinner-wrapper {
    display: none;
}
#mdbook-searchbar-outer.searching .spinner-wrapper {
    display: flex;
    align-items: center;
    position: static;
    padding: 0;
    margin: 0;
    background: transparent;
}

#fa-spin {
    animation: rotating 2s linear infinite;
    display: inline-block;
}
@keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* --- Results --- */

.search-dialog .searchresults-outer {
    margin: 0;
    max-width: none;
    border: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8px;
}

.searchresults-header {
    font-weight: 600;
    font-size: 0.875rem;
    padding: 12px 12px 4px;
    color: var(--search-results-header-color);
}

ul#mdbook-searchresults {
    list-style: none;
    padding: 0 4px 8px;
    margin: 0;
}
ul#mdbook-searchresults li {
    margin: 4px 0;
    padding: 8px 12px;
    border-radius: var(--border-radius);
}
ul#mdbook-searchresults li.focus {
    background-color: var(--search-results-item-background);
}

#mdbook-searchresults a {
    text-decoration: none;
    font-weight: 600;
}

ul#mdbook-searchresults span.teaser {
    display: block;
    clear: both;
    margin: 4px 0 0 0;
    font-size: 0.8em;
    color: var(--page-foreground-muted);
}
ul#mdbook-searchresults span.teaser em {
    font-weight: bold;
    font-style: normal;
}

/* --- Search mark highlight --- */

mark {
    border-radius: 2px;
    padding: 0 3px;
    margin: 0 -3px;
    background-color: var(--search-mark-background);
    transition: background-color 300ms linear;
    cursor: pointer;
}
mark.fade-out {
    background-color: rgba(0, 0, 0, 0) !important;
    cursor: auto;
}

/* ============================================
   4. COMPONENTS
   ============================================ */

/* --- Code block buttons (copy, play, eye, figure) ---

   mdbook builds its own row; mdbook-lini's figure toggle joins it when the
   listing is on top, and floats over the figure when the figure is. Both wear
   one chrome, stated once below: no border, a soft plate, and 6px of padding
   around an 18px glyph. The preprocessor's own sheet draws an outlined button
   for books with no theme — it sits in `@layer mdbook-lini`, so naming the
   class here is enough to take it over, no `!important` and no specificity
   contest. */

pre > .buttons {
    position: absolute;
    z-index: 100;
    right: 5px;
    top: 4px;
    margin: 0;
    padding: 2px 0;
    color: var(--sidebar-foreground);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition:
        visibility 0.1s linear,
        opacity 0.1s linear;
}

pre:hover > .buttons {
    flex-shrink: 0;
    flex-grow: 1;
    visibility: visible;
    opacity: 1;
}

pre > .buttons button,
pre > .buttons .lini-view-button,
.lini-figure-block > .lini-view-button {
    cursor: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Border-box, so the `min-height` the preprocessor's sheet sets from the
       line box counts the padding rather than adding to it — otherwise the two
       buttons in one row come out 3px apart in height. */
    box-sizing: border-box;
    width: auto;
    height: auto;
    margin: 0;
    padding: 6px;
    font-size: 18px;
    margin-left: 4px;
    border: none;
    border-radius: 8px;
    background-color: var(--header-background);
    transition: 150ms;
    transition-property: color, background-color;
    color: var(--page-foreground-muted);
}

pre > .buttons button:hover,
pre > .buttons .lini-view-button:hover,
.lini-figure-block > .lini-view-button:hover {
    color: var(--sidebar-active-color);
    background-color: var(--theme-hover-background);
}

/* `display: block` and no margin: `.fa-svg svg` carries a -0.1em baseline
   nudge for icons sitting in a line of text, and inside a flex-centred button
   that nudge is 2px of missing height — enough for two buttons in one row to
   come out different sizes. */
pre > .buttons button .fa-svg svg,
.lini-view-button svg {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0;
}

pre > .buttons button .fa-svg svg {
    fill: currentColor;
}

/* Floating over a figure there is no row to sit in, so it takes the row's own
   inset — the same corner, the same distance in, as the copy button on a
   listing. */
.lini-figure-block > .lini-view-button {
    top: 4px;
    right: 5px;
    margin-left: 0;
}

.desktop-only {
    display: none;
}

@media only screen and (min-width: 960px) {
    .desktop-only {
        display: inline-flex;
    }
}

.mobile-only {
    display: none;
}

@media only screen and (max-width: 767px) {
    .mobile-only {
        display: inline-flex;
    }
    .mobile-hidden {
        display: none;
    }
}

/* TOC toggle: visible whenever the right sidebar is hidden (below 1280px) */
#mdbook-toc-toggle {
    display: inline-flex;
}
@media only screen and (min-width: 1280px) {
    #mdbook-toc-toggle {
        display: none;
    }
}

/* --- Help dialog --- */

.help-dialog {
    max-width: 500px;
    padding: 24px 32px;
}

.help-title {
    text-align: center;
    margin: 8px 0 16px;
    font-size: 1.4rem;
    font-weight: 600;
    border: none;
    padding: 0;
}

/* --- TOC dialog (mobile "On this page") --- */

.toc-dialog {
    max-width: 480px;
    padding: 20px 0;
}

.toc-dialog-title {
    margin: 0 32px 16px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--page-foreground);
    border: none;
    padding: 0;
    letter-spacing: -0.01em;
}

.toc-dialog .right-sidebar-toc {
    margin: 0;
    padding: 0 32px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.toc-dialog .right-sidebar-toc .toc-item a,
.toc-dialog .right-sidebar-toc .toc-item a:link,
.toc-dialog .right-sidebar-toc .toc-item a:visited {
    color: var(--page-foreground);
    padding: 8px 0;
}
.toc-dialog .right-sidebar-toc .toc-item a.active,
.toc-dialog .right-sidebar-toc .toc-item a.active:link,
.toc-dialog .right-sidebar-toc .toc-item a.active:visited {
    color: var(--marker-color);
}

.toc-dialog .right-sidebar-toc::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}
.toc-dialog .right-sidebar-toc::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 3px;
}

/* --- Responsive --- */

@media only screen and (max-width: 768px) {
    html {
        font-size: 15px;
    }
    :root {
        --page-padding: 1rem;
        --code-font-size: 0.8125rem;
        --table-font-size: 0.8667rem;
    }
    .search-overlay {
        padding-top: 10vh;
    }
    .search-dialog {
        max-height: 75vh;
    }
    table th,
    table td {
        padding-left: 4px;
        padding-right: 4px;
    }
    h1 {
        margin-top: 1.5rem;
        margin-bottom: 1.25rem;
        font-size: 2em;
    }
    h2 {
        margin-top: 1.5em;
        margin-left: calc(var(--page-padding) * -1);
        margin-right: calc(var(--page-padding) * -1);
        padding-left: var(--page-padding);
        padding-right: var(--page-padding);
    }
    h3 {
        margin-top: 1.4em;
    }
    h4 {
        margin-top: 1.2em;
    }
    .search-close-btn {
        display: none;
    }
}