/* The docs' theme over mdBook 0.5.4's (ADR 0065): its variables set from site/palette.css, so the docs and the
   homepage are one site. mdBook's five themes become two: light and rust read as wisp's light, navy, coal, and
   ayu as wisp's dark, so a theme a reader chose before is still one of ours. The theme picker is hidden; the
   reader's system setting chooses (book.toml's default-theme and preferred-dark-theme). */

:root {
    --mono-font: var(--web-mono);
    --code-font-size: 0.86em;
    --content-max-width: 780px;
    --menu-bar-height: 60px;
    --sidebar-target-width: 290px;
}

.light, .rust, html:not(.js) {
    --bg: var(--web-paper);
    --fg: var(--web-ink);
    --w-strong: var(--web-blue-deep);
    --w-muted: var(--web-slate);
    --w-raised: var(--web-paper-raised);
    --w-code-bg: var(--web-paper-sunk);
    --w-rule: var(--web-rule);
    --w-attention: var(--web-amber-ink);

    --sidebar-bg: var(--web-paper-raised);
    --sidebar-fg: var(--web-slate);
    --sidebar-non-existant: #8DA2AF;
    --sidebar-active: var(--web-blue);
    --sidebar-spacer: var(--web-rule);
    --sidebar-header-border-color: var(--web-blue);

    --scrollbar: #B9C9D3;
    --icons: var(--web-slate);
    --icons-hover: var(--web-blue-deep);
    --links: var(--web-blue);
    --inline-code-color: var(--web-blue-deep);

    --theme-popup-bg: var(--web-paper-raised);
    --theme-popup-border: var(--web-rule);
    --theme-hover: var(--web-paper-sunk);

    --quote-bg: var(--web-paper-sunk);
    --quote-border: var(--web-rule);
    --warning-border: var(--web-amber-ink);

    --table-border-color: var(--web-rule);
    --table-header-bg: var(--web-paper-sunk);
    --table-alternate-bg: #FAFCFD;

    --searchbar-border-color: var(--web-rule);
    --searchbar-bg: var(--web-paper-raised);
    --searchbar-fg: var(--web-ink);
    --searchbar-shadow-color: rgba(23, 97, 138, 0.25);
    --searchresults-header-fg: var(--web-slate);
    --searchresults-border-color: var(--web-rule);
    --searchresults-li-bg: var(--web-paper-raised);
    --search-mark-bg: #FBE3B0;

    --color-scheme: light;
    --copy-button-filter: invert(38%) sepia(14%) saturate(682%) hue-rotate(158deg) brightness(92%) contrast(88%);
    --copy-button-filter-hover: invert(27%) sepia(63%) saturate(1145%) hue-rotate(175deg) brightness(91%) contrast(92%);
    --footnote-highlight: var(--web-blue);
    --overlay-bg: rgba(14, 28, 38, 0.25);

    --blockquote-note-color: var(--web-blue);
    --blockquote-tip-color: #2E7D46;
    --blockquote-important-color: #6550B8;
    --blockquote-warning-color: var(--web-amber-ink);
    --blockquote-caution-color: var(--web-ember-ink);
}

.navy, .coal, .ayu {
    --bg: var(--web-night);
    --fg: var(--tui-white);
    --w-strong: var(--tui-glow);
    --w-muted: var(--tui-mist);
    --w-raised: var(--web-night-raised);
    --w-code-bg: var(--tui-sent);
    --w-rule: var(--web-night-rule);
    --w-attention: var(--tui-amber);

    --sidebar-bg: var(--web-night-raised);
    --sidebar-fg: var(--tui-mist);
    --sidebar-non-existant: #4F6B80;
    --sidebar-active: var(--tui-glow);
    --sidebar-spacer: var(--web-night-rule);
    --sidebar-header-border-color: var(--tui-wisp);

    --scrollbar: var(--tui-deep);
    --icons: var(--tui-mist);
    --icons-hover: var(--tui-glow);
    --links: var(--tui-wisp);
    --inline-code-color: var(--tui-glow);

    --theme-popup-bg: var(--web-night-raised);
    --theme-popup-border: var(--web-night-rule);
    --theme-hover: var(--tui-sent);

    --quote-bg: var(--tui-sent);
    --quote-border: var(--tui-deep);
    --warning-border: var(--tui-amber);

    --table-border-color: var(--web-night-rule);
    --table-header-bg: var(--tui-sent);
    --table-alternate-bg: #0D161E;

    --searchbar-border-color: var(--tui-deep);
    --searchbar-bg: var(--tui-sent);
    --searchbar-fg: var(--tui-white);
    --searchbar-shadow-color: rgba(143, 211, 244, 0.25);
    --searchresults-header-fg: var(--tui-mist);
    --searchresults-border-color: var(--tui-deep);
    --searchresults-li-bg: var(--web-night-raised);
    --search-mark-bg: #6B5222;

    --color-scheme: dark;
    --copy-button-filter: invert(71%) sepia(12%) saturate(593%) hue-rotate(163deg) brightness(89%) contrast(86%);
    --copy-button-filter-hover: invert(93%) sepia(9%) saturate(1203%) hue-rotate(171deg) brightness(103%) contrast(101%);
    --footnote-highlight: var(--tui-wisp);
    --overlay-bg: rgba(0, 0, 0, 0.45);

    --blockquote-note-color: var(--tui-wisp);
    --blockquote-tip-color: var(--tui-added);
    --blockquote-important-color: #B4A6FF;
    --blockquote-warning-color: var(--tui-amber);
    --blockquote-caution-color: var(--tui-ember);
}

/* Type */

html { font-family: var(--web-sans); -webkit-font-smoothing: antialiased; }
body { font-size: 1.6rem; line-height: 1.65; }
.content { line-height: 1.65; }
.content h1, .content h2, .content h3, .content h4 {
    font-family: var(--web-display);
    color: var(--w-strong);
    letter-spacing: -0.012em;
    line-height: 1.2;
}
.content h1 { font-size: 2.15em; letter-spacing: -0.02em; margin-block-end: 0.6em; }
.content h2 { font-size: 1.45em; padding-block-end: 0.3em; border-bottom: 1px solid var(--w-rule); }
.content h3 { font-size: 1.15em; }
.content a:link, .content a:visited { color: var(--links); text-decoration: none; }
.content a:hover { text-decoration: underline; text-underline-offset: 3px; }
.content h1 a:link, .content h2 a:link, .content h3 a:link, .content h4 a:link,
.content h1 a:visited, .content h2 a:visited, .content h3 a:visited, .content h4 a:visited { color: inherit; }

/* Code */

:not(pre) > code {
    background: var(--w-code-bg);
    border: 1px solid var(--w-rule);
    border-radius: 5px;
    padding: 0.08em 0.36em;
}
pre > code.hljs, pre > .hljs, .content pre {
    background: var(--w-code-bg) !important;
}
.content pre {
    border: 1px solid var(--w-rule);
    border-radius: 10px;
}
pre > code { padding: 1em 1.1em; line-height: 1.6; }
.hljs { color: var(--fg); }

/* Syntax colours from the palette, in both themes. */
.light .hljs-keyword, .rust .hljs-keyword, .light .hljs-selector-tag, .rust .hljs-selector-tag { color: var(--web-blue-deep); font-weight: 600; }
.light .hljs-string, .rust .hljs-string, .light .hljs-attr, .rust .hljs-attr { color: #2D6B3E; }
.light .hljs-number, .rust .hljs-number, .light .hljs-literal, .rust .hljs-literal { color: var(--web-amber-ink); }
.light .hljs-comment, .rust .hljs-comment { color: #6F8796; font-style: italic; }
.light .hljs-title, .rust .hljs-title, .light .hljs-built_in, .rust .hljs-built_in, .light .hljs-section, .rust .hljs-section { color: var(--web-blue); }
.navy .hljs-keyword, .coal .hljs-keyword, .ayu .hljs-keyword, .navy .hljs-selector-tag, .coal .hljs-selector-tag, .ayu .hljs-selector-tag { color: var(--tui-wisp); font-weight: 600; }
.navy .hljs-string, .coal .hljs-string, .ayu .hljs-string, .navy .hljs-attr, .coal .hljs-attr, .ayu .hljs-attr { color: var(--tui-added); }
.navy .hljs-number, .coal .hljs-number, .ayu .hljs-number, .navy .hljs-literal, .coal .hljs-literal, .ayu .hljs-literal { color: var(--tui-amber); }
.navy .hljs-comment, .coal .hljs-comment, .ayu .hljs-comment { color: #6F8CA2; font-style: italic; }
.navy .hljs-title, .coal .hljs-title, .ayu .hljs-title, .navy .hljs-built_in, .coal .hljs-built_in, .ayu .hljs-built_in, .navy .hljs-section, .coal .hljs-section, .ayu .hljs-section { color: var(--tui-glow); }

/* Tables: the docs are full of them. */

.content table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--w-rule); border-radius: 10px; overflow: hidden; margin: 1.4em 0; font-size: 0.92em; }
.content table thead th { background: var(--table-header-bg); color: var(--w-strong); font-weight: 600; text-align: left; }
.content table td, .content table th { border: none; border-bottom: 1px solid var(--w-rule); padding: 0.6em 0.9em; vertical-align: top; }
.content table tbody tr:last-child td { border-bottom: none; }
.content table td + td, .content table th + th { border-left: 1px solid var(--w-rule); }

/* Quotes and notes */

blockquote { border-radius: 8px; border-inline-start: 3px solid var(--links); }

/* The bar: mdBook's menu bar made the site's own, as on the homepage. It is fixed across the whole width, above
   the sidebar, with the mark in a column the sidebar's width, so the sidebar's edge runs up through it; then the
   contents and search buttons, and on the right the homepage's links (added by wisp.js) and the repository and
   edit icons. mdBook's script still moves the bar as the page scrolls; the position here overrides it. */

:root { --w-bar: 60px; }

#mdbook-menu-bar,
#mdbook-menu-bar.sticky,
html.sidebar-visible #mdbook-menu-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    margin: 0 !important;
    height: var(--w-bar);
    flex-wrap: nowrap;
    align-items: center;
    padding-inline-end: 12px;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--w-rule) !important;
}
#mdbook-menu-bar-hover-placeholder { display: none; }
/* mdBook pulls the page up by the bar's height, to sit under a bar in its flow; this one is out of it. */
.page { margin-block-start: 0 !important; padding-top: var(--w-bar); }
.sidebar { top: var(--w-bar); border-right: 1px solid var(--w-rule); }
.nav-chapters { top: var(--w-bar); }

#mdbook-theme-toggle, #mdbook-theme-list, #mdbook-menu-bar a[href$="print.html"] { display: none !important; }

.menu-title {
    order: -1;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--sidebar-width);
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    padding-inline-start: 22px;
    text-align: start;
    font-family: var(--web-display);
    font-weight: 650;
    font-size: 2rem;
    color: var(--w-strong);
    letter-spacing: -0.01em;
    cursor: default;
}
html.sidebar-visible .menu-title { border-right: 1px solid var(--w-rule); }
html:not(.sidebar-visible) .menu-title { width: auto; padding-inline-end: 14px; }
.menu-title a { text-decoration: none !important; }
.menu-title a.wisp-home { color: inherit; display: inline-flex; align-items: center; gap: 9px; }
.menu-title a.wisp-home img { display: block; }
.menu-title .wisp-section { color: var(--w-muted); font-weight: 500; margin-inline-start: 10px; }
.menu-title .wisp-section:hover { color: var(--w-strong); }
.menu-title .wisp-section::before { content: "/"; margin-inline-end: 10px; color: var(--w-rule); font-weight: 400; }

#mdbook-menu-bar .left-buttons { margin: 0 0 0 10px; display: flex; align-items: center; gap: 6px; flex: 1 1 auto; }
#mdbook-menu-bar .right-buttons { margin: 0; display: flex; align-items: center; gap: 2px; }
#mdbook-menu-bar .icon-button, #mdbook-menu-bar .right-buttons a { line-height: 1; padding: 8px; border-radius: 8px; color: var(--w-muted); }
#mdbook-menu-bar .icon-button:hover, #mdbook-menu-bar .right-buttons a:hover { color: var(--w-strong); background: var(--theme-hover); }
#mdbook-menu-bar .fa-svg { line-height: 1; padding: 0; }

/* The search button as a field, as a reader expects one to look. */
#mdbook-search-toggle.wisp-search {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: min(320px, 100%);
    padding: 8px 10px 8px 12px;
    border: 1px solid var(--w-rule);
    background: var(--w-raised);
    color: var(--w-muted);
    font: 0.9em var(--web-sans);
    text-align: start;
}
#mdbook-search-toggle.wisp-search:hover { border-color: var(--links); background: var(--w-raised); }
.wisp-search .wisp-search-label { flex: 1 1 auto; }
.wisp-search kbd {
    font: 0.85em var(--web-mono);
    padding: 1px 6px;
    border: 1px solid var(--w-rule);
    border-radius: 5px;
    color: var(--w-muted);
    background: var(--bg);
}

.wisp-nav { display: flex; align-items: center; gap: 2px; margin-inline-end: 6px; }
.wisp-nav a { color: var(--w-muted) !important; font: 500 0.92em var(--web-sans); padding: 8px 10px !important; }
.wisp-nav a:hover { text-decoration: none; }

@media only screen and (max-width: 1100px) { .wisp-nav { display: none; } }
@media only screen and (max-width: 760px) {
    .menu-title, html.sidebar-visible .menu-title { width: auto; border-right: none; padding-inline-start: 14px; padding-inline-end: 4px; }
    .menu-title .wisp-section { display: none; }
    #mdbook-search-toggle.wisp-search { width: auto; }
    .wisp-search .wisp-search-label, .wisp-search kbd { display: none; }
}

/* The sidebar */

/* Below 620px mdBook pushes the page, bar and all, aside to show the sidebar, which took the bar's button off the
   screen; here the sidebar slides over the page instead, under the bar. */
@media only screen and (max-width: 619px) {
    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper { transform: none !important; }
    .sidebar { z-index: 110; box-shadow: 0 0 40px rgba(0, 0, 0, 0.25); }
}

.sidebar { font-size: 0.92em; }
.sidebar .sidebar-scrollbox { padding: 18px 14px 18px 18px; }
.chapter li.part-title { color: var(--w-attention); font-size: 0.75em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 1.6em 0 0.4em; }
.chapter li a { border-radius: 6px; padding: 3px 6px; }
.chapter li a:hover { color: var(--w-strong); background: var(--theme-hover); text-decoration: none; }
.chapter li a.active { color: var(--sidebar-active); font-weight: 600; background: var(--theme-hover); }

/* The frame: on a screen wider than the homepage's column (1120px, home.css's .wrap), the sidebar and the page
   sit in that column, centred, as the homepage does; the bar's ground still runs the whole width, its contents
   inside the column. --w-gutter is the margin either side, 0 on a narrower screen. */

:root { --w-frame: 1120px; --w-gutter: max(0px, (100vw - var(--w-frame)) / 2); }

#mdbook-menu-bar,
#mdbook-menu-bar.sticky,
html.sidebar-visible #mdbook-menu-bar {
    padding-inline-start: var(--w-gutter);
    padding-inline-end: calc(var(--w-gutter) + 12px);
}
.sidebar { left: var(--w-gutter); background: var(--bg); }
html:not(.sidebar-visible) .sidebar { visibility: hidden; }
/* mdBook sets the page's margin on the sidebar toggle's state, so these use its selectors. */
.page-wrapper { margin-inline-end: var(--w-gutter); }
#mdbook-sidebar-toggle-anchor:not(:checked) ~ .page-wrapper { margin-inline-start: var(--w-gutter); }
@media only screen and (min-width: 620px) {
    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
        margin-inline-start: calc(var(--w-gutter) + var(--sidebar-width) + var(--sidebar-resize-indicator-width));
    }
}
/* Previous and next go below the page, not at the screen's edges, which would be outside the frame. */
.nav-wide-wrapper { display: none; }
.nav-wrapper { display: block; }

/* Previous and next: quiet, not a column of their own. */

.nav-chapters { font-size: 1.6em; color: var(--w-muted); min-width: 64px; max-width: 64px; }
.nav-chapters:hover { color: var(--w-strong); background: transparent; }

/* Search */

#mdbook-searchbar { border-radius: 10px; padding: 10px 14px; }