@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&display=fallback");

/* RoyiTextEditor dark palette for mdBook 0.5.4. Loaded after pagetoc.css. */

:root {
    --rfm-bg: #1b1c1d;
    --rfm-surface: #242526;
    --rfm-surface-raised: #2d2e2f;
    --rfm-border: #3c3a2d;
    --rfm-text: #f3f2ee;
    --rfm-muted: #b6b5af;
    --rfm-red: #ed253e;
    --rfm-orange: #f68f33;
    --rfm-green: #72be44;
    --rfm-blue: #448aff;
    --rfm-amber: #ff9100;
    --rfm-tip: #00bfa5;
    --rfm-caution: #ff5252;
    --rfm-link: #f5a45d;
    --rfm-code-bg: #141516;
    --rfm-code-fg: #f5e1d8;
    --rfm-kbd-bg: #303132;
    --rfm-kbd-border: #4b4c4d;
    --rfm-kbd-shadow: #101112;
}

/* Layout (theme-independent). */
:root {
    --docs-grid-width: 76.25rem;
    --content-max-width: 46rem;
    --menu-bar-height: 3rem;
    --mono-font: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
    --sidebar-target-width: 15.125rem;
    --sidebar-resize-indicator-width: 0px;
}

.coal {
    --bg: var(--rfm-bg);
    --fg: var(--rfm-text);

    --sidebar-bg: var(--rfm-bg);
    --sidebar-fg: var(--rfm-text);
    --sidebar-non-existant: var(--rfm-muted);
    --sidebar-active: var(--rfm-orange);
    --sidebar-spacer: var(--rfm-border);
    --sidebar-header-border-color: var(--rfm-orange);

    --scrollbar: var(--rfm-border);
    --icons: var(--rfm-muted);
    --icons-hover: var(--rfm-orange);
    --links: var(--rfm-link);
    --inline-code-color: var(--rfm-code-fg);

    --theme-popup-bg: var(--rfm-surface);
    --theme-popup-border: var(--rfm-border);
    --theme-hover: var(--rfm-surface-raised);

    --quote-bg: var(--rfm-surface);
    --quote-border: var(--rfm-border);
    --warning-border: var(--rfm-amber);

    --table-border-color: var(--rfm-border);
    --table-header-bg: var(--rfm-surface-raised);
    --table-alternate-bg: transparent;

    --searchbar-border-color: var(--rfm-border);
    --searchbar-bg: var(--rfm-bg);
    --searchbar-fg: var(--rfm-text);
    --searchbar-shadow-color: transparent;
    --searchresults-header-fg: var(--rfm-muted);
    --searchresults-border-color: var(--rfm-border);
    --searchresults-li-bg: var(--rfm-surface-raised);
    --search-mark-bg: var(--rfm-orange);

    --blockquote-note-color: var(--rfm-blue);
    --blockquote-tip-color: var(--rfm-tip);
    --blockquote-important-color: var(--rfm-orange);
    --blockquote-warning-color: var(--rfm-amber);
    --blockquote-caution-color: var(--rfm-caution);
}

/* Header bar: title left-aligned after the left buttons; print and theme picker hidden. */
.menu-title {
    flex: 1;
    font-size: 1.15rem;
    font-weight: 700;
    padding-inline-start: 0.25rem;
    text-align: left;
}

.menu-title::before {
    content: "";
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    margin-inline-end: 0.6rem;
    vertical-align: middle;
    /* The favicon, set by royi.js. */
    background: var(--logo, none) center / contain no-repeat;
}

@media only screen and (max-width: 76.234375em) {
    .menu-title::before {
        display: none;
    }
}

#mdbook-theme-toggle,
#mdbook-theme-list,
.right-buttons a[href="print.html"] {
    display: none;
}

.coal #mdbook-menu-bar {
    background-color: var(--rfm-surface);
    border-block-end: 1px solid var(--rfm-border);
    box-shadow: none;
}

.coal .menu-title {
    color: var(--rfm-text);
}

.coal #mdbook-menu-bar {
    box-sizing: border-box;
    inset: 0 0 auto;
    margin: 0;
    padding-inline: 0.25rem;
    position: fixed !important;
    top: 0 !important;
    width: 100%;
}

#mdbook-menu-bar-hover-placeholder {
    display: none;
}

.page {
    margin-block-start: 0;
    padding: 0;
}

.page-wrapper {
    min-height: calc(100vh - 6rem);
    padding-block-start: calc(var(--menu-bar-height) + 1px);
}

#mdbook-search-wrapper {
    align-self: center;
    flex: 0 0 14.625rem;
    height: 2.25rem;
    position: relative;
}

#mdbook-searchbar-outer {
    margin: 0;
    max-width: none;
}

#mdbook-searchbar {
    background: rgb(0 0 0 / 26%);
    border: 0;
    border-radius: 2px;
    box-sizing: border-box;
    font: inherit;
    height: 2.25rem;
    margin: 0;
    padding: 0 1rem;
}

#mdbook-searchbar::placeholder {
    color: var(--rfm-muted);
    opacity: 1;
}

#mdbook-searchbar:focus {
    outline: 2px solid var(--rfm-orange);
    outline-offset: -2px;
}

#mdbook-searchbar-outer .spinner-wrapper {
    background: var(--rfm-surface);
    margin: 2px;
}

#mdbook-searchresults-outer {
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-border);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 0.3rem 0.8rem rgb(0 0 0 / 25%);
    box-sizing: border-box;
    left: 0;
    margin: 0;
    max-height: calc(100vh - var(--menu-bar-height) - 1rem);
    max-width: none;
    overflow: auto;
    padding: 0.75rem 1rem;
    position: absolute;
    top: 100%;
    width: 100%;
}

#mdbook-search-wrapper.hidden #mdbook-searchresults-outer {
    display: none;
}

ul#mdbook-searchresults li {
    padding: 0.25rem 0.5rem;
}

ul#mdbook-searchresults li:hover {
    background-color: var(--searchresults-li-bg);
}

ul#mdbook-searchresults li.focus {
    box-shadow: inset 2px 0 var(--rfm-orange);
}

#mdbook-searchresults li > a:focus {
    outline: none;
}

/* Typography and content column. */
:root {
    font-size: 100%;
}

html {
    font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
}

body {
    font-size: 1rem;
}

.content {
    overflow: visible;
    padding: 0 0 3rem;
}

.content main {
    box-sizing: border-box;
    padding: 3.125rem 1.5rem 0;
}

.content h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 2.5rem;
}

.content h2 {
    font-weight: 700;
    margin-block-start: 2em;
    padding-bottom: 0.35rem;
}

.coal .content h2 {
    border-bottom: 1px solid var(--rfm-border);
}

.content p,
.content ol,
.content ul {
    line-height: 1.6;
}

.content li + li {
    margin-top: 0.25em;
}

/* Sidebar metrics match the Material navigation used by RoyiFileManager. */
.sidebar {
    font-size: 0.875rem;
    line-height: 1.3;
    top: calc(var(--menu-bar-height) + 1px);
    z-index: 200;
}

.sidebar .sidebar-scrollbox {
    padding: 1.5rem 0.5rem 1.5rem 1rem;
}

.sidebar .sidebar-scrollbox::before {
    /* The book title, set by royi.js. */
    content: attr(data-title);
    color: var(--rfm-muted);
    display: block;
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
}

.sidebar .chapter {
    line-height: inherit;
    margin: 0;
    padding: 0 0 0.5rem;
}

.sidebar .chapter li.chapter-item {
    line-height: 1.3;
    margin-block-start: 0.546875rem;
}

.sidebar .chapter-link-wrapper > a {
    flex: 1;
    margin-inline-end: 0.5rem;
}

.sidebar .chapter > li:not(:has(> .section)) > .chapter-link-wrapper {
    padding-inline-start: 0.75rem;
}

.sidebar .chapter > li:has(> .section) {
    margin-block-start: 1.09375rem;
}

.sidebar .chapter > li:has(> .section) > .chapter-link-wrapper {
    color: var(--rfm-muted);
    font-weight: 700;
}

.sidebar .chapter > li:has(> .section) > .chapter-link-wrapper > a {
    color: var(--rfm-muted);
    font-weight: 700;
}

.sidebar .section {
    line-height: inherit;
    padding-inline-start: 0.75rem;
}

.sidebar .chapter a.active {
    color: var(--rfm-link);
}

.sidebar .chapter > li:has(> .section) > .chapter-link-wrapper > a.active {
    color: var(--rfm-link);
}

.sidebar .chapter a:hover,
.sidebar .chapter > li:has(> .section) > .chapter-link-wrapper > a:hover {
    color: var(--rfm-orange);
}

.sidebar .chapter a:focus-visible {
    outline: 2px solid var(--rfm-orange);
    outline-offset: 3px;
}

#mdbook-sidebar-resize-handle {
    display: none !important;
}

.coal .sidebar {
    border: 0;
}

@media only screen and (min-width: 76.25em) {
    .coal #mdbook-menu-bar {
        padding-inline: max(0.25rem, calc((100% - var(--docs-grid-width)) / 2 + 0.25rem));
    }

    #mdbook-sidebar-toggle {
        display: none;
    }

    /* The closed search box stays in the header (mdBook hides it); open, it
       widens. Its toggle and the other left buttons are not needed. */
    #mdbook-search-wrapper.hidden {
        display: block !important;
    }

    #mdbook-search-wrapper {
        transition: flex-basis 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
    }

    #mdbook-search-wrapper:not(.hidden) {
        flex-basis: 43rem;
    }

    .left-buttons {
        display: none;
    }

    .right-buttons {
        box-sizing: border-box;
        flex: 0 0 16.375rem;
        margin: 0;
        padding-inline-start: 2rem;
    }

    .menu-title {
        font-size: 1.125rem;
        order: -1;
        padding-inline-start: 0.5rem;
    }

    .menu-title::before {
        height: 1.5rem;
        margin-inline-end: 2.25rem;
        width: 1.5rem;
    }

    .sidebar {
        left: max(0px, calc((100% - var(--docs-grid-width)) / 2));
    }

    .sidebar .sidebar-scrollbox {
        padding-block-start: 3.375rem;
    }

    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
        margin-inline-start: calc(max(0px, (100% - var(--docs-grid-width)) / 2) + var(--sidebar-width));
    }

    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .content main {
        margin-inline: 0;
    }
}

.sidebar-overlay {
    display: none;
}

@media only screen and (max-width: 76.234375em) {
    #mdbook-search-wrapper {
        /* Opaque: the open search box covers the title. */
        background-color: var(--rfm-surface);
        inset: 0.375rem 0.5rem auto 3.25rem;
        position: fixed;
        z-index: 110;
    }

    .js #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
        margin-inline-start: 0;
        transform: none;
    }

    .js #mdbook-sidebar-toggle-anchor:checked ~ .sidebar-overlay {
        background: rgb(0 0 0 / 54%);
        display: block;
        inset: calc(var(--menu-bar-height) + 1px) 0 0;
        position: fixed;
        z-index: 150;
    }
}

/* Inline code, code blocks and keys. */
.content :not(pre) > code {
    border-radius: 3px;
    padding: 0.1em 0.35em;
}

.coal .content :not(pre) > code {
    background: var(--rfm-surface-raised);
}

.content pre {
    border: 1px solid var(--table-border-color);
    border-radius: 4px;
}

.coal .content pre {
    background: var(--rfm-code-bg);
}

.content kbd {
    border-radius: 3px;
    font-family: var(--mono-font);
    font-size: 0.85em;
    padding: 0.05em 0.4em;
}

.coal .content kbd {
    background: var(--rfm-kbd-bg);
    border: 1px solid var(--rfm-kbd-border);
    box-shadow: 0 0.1rem 0 var(--rfm-kbd-shadow);
    color: var(--rfm-text);
}

/* Admonitions: <blockquote class="blockquote-tag blockquote-tag-<kind>">. */
.content .blockquote-tag {
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    font-size: 0.9rem;
    margin: 1rem 0;
    overflow: hidden;
    padding: 0 0 0.6rem;
}

.content .blockquote-tag > p:not(.blockquote-tag-title) {
    margin-inline: 0.8rem;
}

.content .blockquote-tag-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.8rem;
}

.content .blockquote-tag-title svg {
    color: var(--tag-color);
    margin-right: 0.5rem;
}

.content .blockquote-tag-note { --tag-color: var(--rfm-blue); }
.content .blockquote-tag-tip { --tag-color: var(--rfm-tip); }
.content .blockquote-tag-important { --tag-color: var(--rfm-orange); }
.content .blockquote-tag-warning { --tag-color: var(--rfm-amber); }
.content .blockquote-tag-caution { --tag-color: var(--rfm-caution); }

.coal .content .blockquote-tag {
    background: var(--rfm-surface);
    border-color: var(--tag-color);
    color: var(--rfm-text);
}

.coal .content .blockquote-tag-title {
    background: color-mix(in srgb, var(--tag-color) 12%, transparent);
    color: var(--rfm-text);
}

/* Tables: left-aligned, bordered, sized to content. */
.content table {
    border: 1px solid var(--table-border-color);
    border-collapse: separate;
    border-radius: 4px;
    border-spacing: 0;
    margin: 0 0 1rem;
    overflow: hidden;
}

.content table td,
.content table th {
    border: 0;
    border-top: 1px solid var(--table-border-color);
    padding: 0.6rem 0.9rem;
}

.content table thead td,
.content table thead th {
    border: 0;
}

/* Figures: <figure class="product-shot">. */
.content .product-shot {
    background: var(--rfm-surface);
    border: 1px solid var(--rfm-border);
    border-radius: 4px;
    margin: 1.5rem 0 2rem;
    overflow: hidden;
    padding: 0.5rem;
}

.content .product-shot img {
    border-radius: 3px;
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.content .product-shot figcaption {
    color: var(--rfm-muted);
    font-size: 0.9em;
    margin-top: 0.4rem;
    text-align: center;
}

/* On-page table of contents (pagetoc). */
.pagetoc {
    box-sizing: border-box;
    font-size: 0.875rem;
    line-height: 1.3;
}

.pagetoc a {
    border: 0;
    margin-block-start: 0.546875rem;
    padding: 0 0.5rem 0 0;
}

.pagetoc::before {
    color: var(--rfm-muted);
    content: "Table of contents";
    display: block;
    font-weight: 700;
}

.pagetoc .pagetoc-H1 {
    display: none;
}

.pagetoc .pagetoc-H2 {
    padding-inline-start: 0;
}

.pagetoc .pagetoc-H3 {
    padding-inline-start: 0.75rem;
}

.pagetoc .pagetoc-H4 {
    padding-inline-start: 1.5rem;
}

.coal .pagetoc a {
    color: var(--rfm-text) !important;
}

.coal .pagetoc a:hover {
    color: var(--rfm-text) !important;
}

.coal .pagetoc a.active {
    background: transparent;
    color: var(--rfm-link) !important;
}

@media only screen and (min-width: 76.25em) {
    .sidetoc {
        display: block;
        left: 100%;
        position: absolute;
        top: 3.375rem;
    }

    .pagetoc {
        height: calc(100vh - var(--menu-bar-height) - 4.875rem);
        overflow: auto;
        padding-inline: 1rem 0.5rem;
        position: fixed;
        top: calc(var(--menu-bar-height) + 3.375rem + 1px);
        width: var(--sidebar-target-width);
    }
}

.js .nav-wide-wrapper,
.js .nav-wrapper {
    display: none !important;
}

.chapter-footer {
    background: rgb(22 24 29 / 87%);
    border-block-start: 1px solid var(--rfm-border);
    position: relative;
    z-index: 1;
}

@media only screen and (min-width: 76.25em) {
    .chapter-footer {
        z-index: 201;
    }
}

.chapter-footer__inner {
    box-sizing: border-box;
    display: flex;
    margin-inline: auto;
    max-width: var(--docs-grid-width);
    min-height: 5.875rem;
    padding: 0.25rem;
}

.chapter-footer__link,
.chapter-footer__link:visited {
    align-items: center;
    color: var(--rfm-text);
    display: flex;
    gap: 1.25rem;
    margin-block: 1.25rem 0.5rem;
    max-width: 50%;
    min-width: 0;
    padding-inline: 0.5rem;
    text-decoration: none;
}

.chapter-footer__link:hover {
    color: var(--rfm-orange);
}

.chapter-footer__link:focus-visible {
    outline: 2px solid var(--rfm-orange);
    outline-offset: 3px;
}

.chapter-footer__link--next {
    margin-inline-start: auto;
    text-align: right;
}

.chapter-footer__title {
    font-size: 1.125rem;
    line-height: 1.3;
    margin-block-end: 0.875rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.chapter-footer__direction {
    color: var(--rfm-muted);
    display: block;
    font-size: 0.75rem;
}

.chapter-footer__icon {
    align-items: center;
    display: flex;
    flex: 0 0 1.5rem;
    height: 1.5rem;
    width: 1.5rem;
}

.chapter-footer__icon svg {
    fill: currentColor;
    height: 1.5rem;
    width: 1.5rem;
}

@media print {
    .chapter-footer,
    .sidebar-overlay {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #mdbook-search-wrapper {
        transition: none;
    }
}