/* Base styles and content styles */

:root {
    /* Browser default font-size is 16px, this way 1 rem = 10px */
    font-size: 62.5%;
    color-scheme: var(--color-scheme);
}

html {
    font-family: Inter, "Segoe UI", sans-serif;
    color: var(--fg);
    background-color: var(--bg);
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;

    font-size: 1.6rem;
    line-height: 1.7;

    overflow: hidden;
}

code {
    font-family: var(--mono-font) !important;
    font-size: var(--code-font-size);
    direction: ltr !important;
}

/* make long words/inline code not x overflow */
main {
    overflow-wrap: break-word;
}

/* make wide tables scroll if they overflow */
.table-wrapper {
    overflow-x: auto;
}

/* Don't change font size in headers. */
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
    font-size: unset;
}

.left { float: left; }
.right { float: right; }
.boring { opacity: 0.6; }
.hide-boring .boring { display: none; }
.hidden { display: none !important; }

h2, h3 { margin-block-start: 2.5em; }
h4, h5 { margin-block-start: 2em; }

.header + .header h3,
.header + .header h4,
.header + .header h5 {
    margin-block-start: 1em;
}

h1:target::before,
h2:target::before,
h3:target::before,
h4:target::before,
h5:target::before,
h6:target::before,
dt:target::before {
    display: inline-block;
    content: "»";
    margin-inline-start: -30px;
    width: 30px;
}

/* This is broken on Safari as of version 14, but is fixed
   in Safari Technology Preview 117 which I think will be Safari 14.2.
   https://bugs.webkit.org/show_bug.cgi?id=218076
*/
:target {
    /* Safari does not support logical properties */
    scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
}

.page {
    outline: 0;
    padding: 0 var(--page-padding);
    margin-block-start: 0;
}
.page-wrapper {
    position: fixed;

    top: var(--menu-bar-height);
    right: 0;
    bottom: 0;

    box-sizing: border-box;

    background-color: var(--bg);

    overflow-x: hidden;
    overflow-y: auto;

    padding-top: 0;
}
/*====================================================================================================================*/
.content {
    overflow-y: auto;
    padding: 0 5px 50px 5px;
}
.content main {
    margin-inline-start: auto;
    margin-inline-end: auto;
    max-width: var(--content-max-width);
}
.content p { line-height: 1.45em; }
.content ol { line-height: 1.45em; }
.content ul { line-height: 1.45em; }
.content a { text-decoration: none; }
.content a:hover { text-decoration: underline; }
.content img, .content video { max-width: 100%; }
/* When an image is inside an anchor, ensure the focus ring covers the entire
   image instead of the anchor's line box. */
.content a:has(img) { display: inline-block; }
.content .header:link,
.content .header:visited {
    color: var(--fg);
}
.content .header:link,
.content .header:visited:hover {
    text-decoration: none;
}

table {
    margin: 0 auto;
    border-collapse: collapse;
}
table td {
    padding: 3px 20px;
    border: 1px var(--table-border-color) solid;
}
table thead {
    background: var(--table-header-bg);
}
table thead td {
    font-weight: 700;
    border: none;
}
table thead th {
    padding: 3px 20px;
}
table thead tr {
    border: 1px var(--table-header-bg) solid;
}
/* Alternate background colors for rows */
table tbody tr:nth-child(2n) {
    background: var(--table-alternate-bg);
}


blockquote {
    margin: 20px 0;
    padding: 0 20px;
    color: var(--fg);
    background-color: var(--quote-bg);
    border-block-start: .1em solid var(--quote-border);
    border-block-end: .1em solid var(--quote-border);
}

/* TODO: Remove .warning in a future version of mdbook, it is replaced by
blockquote tags. */
.warning {
    margin: 20px;
    padding: 0 20px;
    border-inline-start: 2px solid var(--warning-border);
}

.warning:before {
    position: absolute;
    width: 3rem;
    height: 3rem;
    margin-inline-start: calc(-1.5rem - 21px);
    content: "ⓘ";
    text-align: center;
    background-color: var(--bg);
    color: var(--warning-border);
    font-weight: bold;
    font-size: 2rem;
}

blockquote .warning:before {
    background-color: var(--quote-bg);
}

kbd {
    background-color: var(--table-border-color);
    border-radius: 4px;
    border: solid 1px var(--theme-popup-border);
    box-shadow: inset 0 -1px 0 var(--theme-hover);
    display: inline-block;
    font-size: var(--code-font-size);
    font-family: var(--mono-font);
    line-height: 10px;
    padding: 4px 5px;
    vertical-align: middle;
}

sup {
    /* Set the line-height for superscript and footnote references so that there
       isn't an awkward space appearing above lines that contain the footnote.

       See https://github.com/rust-lang/mdBook/pull/2443#discussion_r1813773583
       for an explanation.
    */
    line-height: 0;
}

.footnote-definition {
    font-size: 0.9em;
}
/* The default spacing for a list is a little too large. */
.footnote-definition ul,
.footnote-definition ol {
    padding-left: 20px;
}
.footnote-definition > li {
    /* Required to position the ::before target */
    position: relative;
}
.footnote-definition > li:target {
    scroll-margin-top: 50vh;
}
.footnote-reference:target {
    scroll-margin-top: 50vh;
}
/* Draws a border around the footnote (including the marker) when it is selected.
   TODO: If there are multiple linkbacks, highlight which one you just came
   from so you know which one to click.
*/
.footnote-definition > li:target::before {
    border: 2px solid var(--footnote-highlight);
    border-radius: 6px;
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -32px;
    pointer-events: none;
    content: "";
}
/* Pulses the footnote reference so you can quickly see where you left off reading.
   This could use some improvement.
*/
@media not (prefers-reduced-motion) {
    .footnote-reference:target  {
        animation: fn-highlight 0.8s;
        border-radius: 2px;
    }

    @keyframes fn-highlight {
        from {
            background-color: var(--footnote-highlight);
        }
    }
}

.tooltiptext {
    position: absolute;
    visibility: hidden;
    color: #fff;
    background-color: #333;
    transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */
    left: -8px; /* Half of the width of the icon */
    top: -35px;
    font-size: 0.8em;
    text-align: center;
    border-radius: 6px;
    padding: 5px 8px;
    margin: 5px;
    z-index: 1000;
}
.tooltipped .tooltiptext {
    visibility: visible;
}

.chapter li.part-title {
    color: var(--sidebar-fg);
    margin: 5px 0px;
    /*font-weight: bold;*/
    font-weight: 900;
    font-size: 1.6rem;
}

.result-no-output {
    font-style: italic;
}

.fa-svg svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    margin-bottom: -0.1em;
}

dt {
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0.1em;
}

/* This uses a CSS counter to add numbers to definitions, but only if there is
 more than one definition. */
dl, dt {
    counter-reset: dd-counter;
}

/* When there is more than one definition, increment the counter. The first
selector selects the first definition, and the second one selects definitions
2 and beyond.*/
dd:has(+ dd), dd + dd {
    counter-increment: dd-counter;
    /* Use flex display to help with positioning the numbers when there is a p
    tag inside the definition. */
    display: flex;
    align-items: flex-start;
}

/* Shows the counter for definitions. The first selector selects the first
definition, and the second one selections definitions 2 and beyond.*/
dd:has(+ dd)::before, dd + dd::before  {
    content: counter(dd-counter) ". ";
    font-weight: 600;
    display: inline-block;
    margin-right: 0.5em;
}

dd > p {
    /* For loose definitions that have a p tag inside, don't add a bunch of
    space before the definition. */
    margin-top: 0;
}

/* Remove some excess space from the bottom. */
.blockquote-tag p:last-child {
    margin-bottom: 2px;
}

.blockquote-tag {
    /* Add some padding to make the vertical bar a little taller than the text.*/
    padding: 2px 0px 2px 20px;
    /* Add a solid color bar on the left side. */
    border-inline-start-style: solid;
    border-inline-start-width: 4px;
    /* Disable the background color from normal blockquotes . */
    background-color: inherit;
    /* Disable border blocks from blockquotes. */
    border-block-start: none;
    border-block-end: none;
}

.blockquote-tag-title svg {
    fill: currentColor;
    /* Add space between the icon and the title. */
    margin-right: 8px;
}

.blockquote-tag-note {
    border-inline-start-color: var(--blockquote-note-color);
}

.blockquote-tag-tip {
    border-inline-start-color: var(--blockquote-tip-color);
}

.blockquote-tag-important {
    border-inline-start-color: var(--blockquote-important-color);
}

.blockquote-tag-warning {
    border-inline-start-color: var(--blockquote-warning-color);
}

.blockquote-tag-caution {
    border-inline-start-color: var(--blockquote-caution-color);
}

.blockquote-tag-note > .blockquote-tag-title {
    color: var(--blockquote-note-color);
}

.blockquote-tag-tip > .blockquote-tag-title {
    color: var(--blockquote-tip-color);
}

.blockquote-tag-important > .blockquote-tag-title {
    color: var(--blockquote-important-color);
}

.blockquote-tag-warning > .blockquote-tag-title {
    color: var(--blockquote-warning-color);
}

.blockquote-tag-caution > .blockquote-tag-title {
    color: var(--blockquote-caution-color);
}

.blockquote-tag-title {
    /* Slightly increase the weight for more emphasis. */
    font-weight: 600;
    /* Vertically center the icon with the text. */
    display: flex;
    align-items: center;
    /* Remove default large margins for a more compact display. */
    margin: 2px 0 8px 0;
}

.blockquote-tag-title .fa-svg {
    fill: currentColor;
    /* Add some space between the icon and the text. */
    margin-right: 8px;
}

/* All this code is to handle the "zoomable" images feature. */

/* This one makes the checkbox invisible while keeping it selectable with the keyboard (with the
   "tab" key). */
.content .checkbox-img {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* When the input is focused, we make it appear to the user by adding an outline to the img
   instead */
.content .checkbox-img:focus + img {
    outline: auto;
}
/* The "zoomed-in" image is not displayed until the checkbox is "ticked". */
.content .checkbox-img:not(:checked) ~ .img-wrapper {
    display: none;
}
.content .checkbox-label {
    display: block;
    max-width: 100%;
}
.content .checkbox-label img {
    cursor: zoom-in;
}
.content .checkbox-img:checked ~ .img-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.content .checkbox-img:checked ~ .img-wrapper > img {
    --img-padding: 5px;
    padding: var(--img-padding);
    background: #999;
    cursor: zoom-out;
    max-width: calc(100% - (var(--img-padding) * 2));
    max-height: calc(100% - (var(--img-padding) * 2));
}

/* ------------------------------------------------------- */
/* Custom Heading Colors */
/* ------------------------------------------------------- */

.content h1,
.content h1 .header {
    color: var(--heading-h1) !important;
}

.content h2,
.content h2 .header {
    color: var(--heading-h2) !important;
}

.content h3,
.content h3 .header {
    color: var(--heading-h3) !important;
}

.content h4,
.content h4 .header {
    color: var(--heading-h4) !important;
}

.content h5,
.content h5 .header {
    color: var(--heading-h5) !important;
}

.content h6,
.content h6 .header {
    color: var(--heading-h6) !important;
}
/*-----------------------------------------*/
.content h1 {
    margin-top: 0.3em;
    margin-bottom: 0.8em;
}
.content h2 {
    margin-top: 2em;
    margin-bottom: 0.7em;
}
.content h3 {
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}
/*-----------------------------------------*/
.content p > strong:only-child {
    display: block;

    margin-top: 1.5em;
    margin-bottom: 0.6em;

    color: var(--standalone-strong);

    font-size: 1.1em;
    font-weight: 700;

    letter-spacing: 0.03em;
}
/*-----------------------------------------*/

/* ========================================================= */
/* Scalionix Docs Navigation                                 */
/* ========================================================= */

.scalionix-logo {
    display: flex;
    align-items: center;
    height: var(--menu-bar-height);
    margin-left: 10px;
    text-decoration: none;
}

.scalionix-logo img {
    max-height: 32px;
    width: auto;
}

.scalionix-logo-dark {
    display: block;
}

.scalionix-logo-light {
    display: none;
}

html.light .scalionix-logo-dark {
    display: none;
}

html.light .scalionix-logo-light {
    display: block;
}
/*--------------------------------------------------------------------------------------------------------------------*/
.docs-home-link,
.docs-home-link:visited {
    display: flex;
    align-items: center;

    height: var(--menu-bar-height);

    margin-left: 12px;
    padding: 0 8px;

    color: var(--icons);
    font-size: 0.9em;
    font-weight: 600;

    text-decoration: none;
    white-space: nowrap;
}

.docs-home-link:hover {
    color: var(--icons-hover);
    text-decoration: none;
}
/*--------------------------------------------------------------------------------------------------------------------*/
:not(pre) > code.hljs {
    display: inline;

    padding: 0.08em 0.28em;

    border-radius: 4px;

    color: var(--inline-code-color) !important;
    background: var(--inline-code-bg) !important;
}
:not(pre) > code.hljs {
    background: var(--inline-code-bg) !important;
    color: var(--inline-code-color) !important;
}

pre {
    background: var(--code-block-bg) !important;
}

pre > code.hljs {
    background: var(--code-block-bg) !important;
    color: var(--code-block-fg) !important;
}
/* ========================================================= */
/* Keyboard Shortcuts Modal                                  */
/* ========================================================= */

.shortcuts-dialog {
    width: min(720px, calc(100vw - 40px));

    padding: 0;
    margin: auto;

    border: none;
    border-radius: 16px;

    background: transparent;

    color: var(--modal-fg);

    box-shadow:
            0 24px 80px rgba(0, 0, 0, 0.38);

    overflow: visible;
}

.shortcuts-dialog::backdrop {
    background: var(--modal-backdrop);
    backdrop-filter: blur(5px);
}

.shortcuts-panel {
    overflow: hidden;

    border: 1px solid var(--modal-border);
    border-radius: 16px;

    background:
            linear-gradient(
                    180deg,
                    color-mix(in srgb, var(--modal-bg) 96%, white 4%),
                    var(--modal-bg)
            );
}

.shortcuts-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    padding: 24px 26px 18px 26px;

    border-bottom: 1px solid var(--modal-border);
}

.shortcuts-eyebrow {
    margin-bottom: 5px;

    color: var(--modal-accent);

    font-size: 1.15rem;
    font-weight: 700;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.shortcuts-header h2 {
    margin: 0;

    color: var(--modal-fg);

    font-size: 2.2rem;
    font-weight: 650;

    letter-spacing: -0.02em;
}

.shortcuts-close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    padding: 0;

    border: 1px solid transparent;
    border-radius: 8px;

    background: transparent;
    color: var(--modal-muted);

    cursor: pointer;

    transition:
            color 120ms ease,
            background-color 120ms ease,
            border-color 120ms ease;
}

.shortcuts-close:hover {
    color: var(--modal-fg);

    background: var(--modal-section-bg);

    border-color: var(--modal-section-border);
}

.shortcuts-description {
    padding: 16px 26px 4px 26px;

    color: var(--modal-muted);

    font-size: 1.4rem;
}

.shortcuts-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    padding: 18px 26px 24px 26px;
}

.shortcuts-section {
    padding: 16px;

    border: 1px solid var(--modal-section-border);
    border-radius: 12px;

    background: var(--modal-section-bg);
}

.shortcuts-section-title {
    margin-bottom: 10px;

    color: var(--modal-muted);

    font-size: 1.15rem;
    font-weight: 700;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    min-height: 42px;

    padding: 5px 0;
}

.shortcut-row + .shortcut-row {
    border-top:
            1px solid
            color-mix(
                    in srgb,
                    var(--modal-section-border) 72%,
                    transparent
            );
}

.shortcut-label {
    color: var(--modal-fg);

    font-size: 1.4rem;
}

.shortcut-keys {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    flex-shrink: 0;

    color: var(--modal-muted);

    font-size: 1.1rem;
}

.shortcut-keys kbd {
    min-width: 24px;

    padding: 5px 8px;

    border: 1px solid var(--modal-key-border);
    border-bottom-width: 2px;
    border-radius: 6px;

    background: var(--modal-key-bg);

    color: var(--modal-key-fg);

    box-shadow:
            0 1px 0
            rgba(0, 0, 0, 0.18);

    font-family: var(--mono-font);
    font-size: 1.15rem;
    line-height: 1;

    text-align: center;
}

.shortcuts-footer {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 14px 26px 16px 26px;

    border-top: 1px solid var(--modal-border);

    color: var(--modal-muted);

    font-size: 1.25rem;
}

.shortcuts-footer > span {
    padding: 3px 7px;

    border: 1px solid var(--modal-section-border);
    border-radius: 5px;

    color: var(--modal-accent);

    font-size: 1.05rem;
    font-weight: 700;

    text-transform: uppercase;
}

.shortcuts-footer p {
    margin: 0;
}

@media (max-width: 680px) {
    .shortcuts-dialog {
        width:
                calc(100vw - 24px);
    }

    .shortcuts-grid {
        grid-template-columns: 1fr;
    }

    .shortcuts-header,
    .shortcuts-description,
    .shortcuts-grid,
    .shortcuts-footer {
        padding-left: 18px;
        padding-right: 18px;
    }
}
/* ========================================================= */
/* Search Modal                                              */
/* ========================================================= */

.docs-search-dialog {
    width: min(1200px, calc(100vw - 40px));
    padding: 0;
    margin: auto;

    border: none;
    border-radius: 30px;

    background: transparent;
    color: var(--modal-fg);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.40);

    overflow: visible;
}

.docs-search-dialog #mdbook-search-wrapper {
    display: flex !important;

    flex-direction: column;

    min-height: 0;
    flex: 1;
}

.docs-search-dialog::backdrop {
    background: var(--modal-backdrop);
    backdrop-filter: blur(5px);
}

.docs-search-panel {
    max-height: min(900px, calc(100vh - 80px));

    overflow: hidden;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--modal-border);
    border-radius: 16px;

    background: var(--modal-bg);
}

.docs-search-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding: 22px 24px 16px;

    border-bottom: 1px solid var(--modal-border);
}

.docs-search-eyebrow {
    margin-bottom: 4px;

    color: var(--modal-accent);

    font-size: 1.1rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.docs-search-header h2 {
    margin: 0;

    color: var(--modal-fg);

    font-size: 2rem;
    font-weight: 650;
}

.docs-search-close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    padding: 0;

    border: 1px solid transparent;
    border-radius: 8px;

    background: transparent;
    color: var(--modal-muted);

    cursor: pointer;
}

.docs-search-close:hover {
    color: var(--modal-fg);
    background: var(--modal-section-bg);
    border-color: var(--modal-section-border);
}

.docs-search-dialog .searchbar-outer {
    width: auto;
    max-width: none;

    padding: 18px 24px 12px;
    margin: 0;
}

.docs-search-dialog #mdbook-searchbar {
    box-sizing: border-box;

    width: 100%;

    margin: 0;

    padding: 12px 14px;

    border-radius: 8px;
}

.docs-search-dialog .searchresults-outer {
    max-width: none;

    flex: 1;

    overflow-y: auto;

    margin: 0;
    padding: 0 24px 20px;

    border-bottom: none;
}

.docs-search-dialog #mdbook-searchresults {
    padding-left: 0;
}

/* Profile Style */

.about-profile {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 24px 0 40px 0;
}

.about-profile-image {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 40%;
    flex-shrink: 0;
}

.about-profile-info h2 {
    margin-top: 0;
}

@media (max-width: 700px) {
    .about-profile {
        flex-direction: column;
        align-items: flex-start;
    }

    .about-profile-image {
        width: 150px;
        height: 150px;
    }
}