/* The guide dressed as the app: its flat dark palette, Inter, 6px corners and 1px borders, laid
   over mdBook's themes. The app has no light look, so every theme gets this one. */

/* The palette, as `pal` in gui.rs. The only literals in this file; the rest is derived. */
:root:is(.light, .rust, .coal, .navy, .ayu) {
    --pal-bg: #16181d;
    --pal-surface: #1e2128;
    --pal-hover: #272b33;
    --pal-active: #313742;
    --pal-border: #2e333c;
    --pal-text: #e4e7ec;
    --pal-muted: #8b919e;
    --pal-blue: #4c8dff;
    --pal-good: #4cc38a;
    --pal-warn: #f5a524;
    --pal-bad: #ff6b6b;

    --color-scheme: dark;
    --bg: var(--pal-bg);
    --fg: var(--pal-text);

    --sidebar-bg: var(--pal-bg);
    --sidebar-fg: var(--pal-text);
    --sidebar-non-existant: var(--pal-muted);
    --sidebar-active: var(--pal-blue);
    --sidebar-spacer: var(--pal-border);
    --sidebar-header-border-color: var(--pal-border);
    --scrollbar: var(--pal-muted);
    --icons: var(--pal-muted);
    --icons-hover: var(--pal-text);
    --links: var(--pal-blue);
    --inline-code-color: var(--pal-text);
    --theme-popup-bg: var(--pal-surface);
    --theme-popup-border: var(--pal-border);
    --theme-hover: var(--pal-hover);
    --quote-bg: transparent;
    --quote-border: var(--pal-blue);
    --warning-border: var(--pal-warn);
    --table-border-color: var(--pal-border);
    --table-header-bg: var(--pal-surface);
    --table-alternate-bg: transparent;
    --searchbar-bg: var(--pal-surface);
    --searchbar-fg: var(--pal-text);
    --searchbar-border-color: var(--pal-border);
    --searchbar-shadow-color: transparent;
    --searchresults-header-fg: var(--pal-muted);
    --searchresults-border-color: var(--pal-border);
    --searchresults-li-bg: var(--pal-hover);
    --search-mark-bg: color-mix(in srgb, var(--pal-blue) 40%, transparent);
    --footnote-highlight: var(--pal-blue);
    --overlay-bg: color-mix(in srgb, var(--pal-bg) 60%, transparent);
    --blockquote-note-color: var(--pal-blue);
    --blockquote-tip-color: var(--pal-good);
    --blockquote-warning-color: var(--pal-warn);
    --blockquote-caution-color: var(--pal-bad);
}

:root {
    --ui-font: "Inter", system-ui, sans-serif;
    --mono-font: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", "DejaVu Sans Mono", monospace;
    --code-font-size: 0.9em;
    --menu-bar-height: 52px;
    --page-padding: 24px;
}
@media (max-width: 620px) {
    :root { --page-padding: 16px; }
}

html { font-family: var(--ui-font); }

/* No theme to pick. */
#mdbook-menu-bar #mdbook-theme-toggle, .theme-popup { display: none; }

/* Menu bar: a bar on the page's background with the app's top bar buttons. */
#mdbook-menu-bar.bordered { border-block-end-color: var(--pal-border); }
.menu-title { font-weight: 600; }
.left-buttons, .right-buttons { display: flex; align-items: center; gap: 6px; margin: 0 6px; }
#mdbook-menu-bar :is(.icon-button, .right-buttons a) {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--pal-border);
    border-radius: 6px;
    background: var(--pal-surface);
}
#mdbook-menu-bar .fa-svg { padding: 0; line-height: 1; }

/* One hover and press fill for everything clickable, as the app's widgets have. */
:is(#mdbook-menu-bar .icon-button, .right-buttons a, .chapter-link-wrapper > a:first-child):hover {
    background-color: var(--pal-hover);
}
:is(#mdbook-menu-bar .icon-button, .right-buttons a, .chapter-link-wrapper > a:first-child):active {
    background-color: var(--pal-active);
}

/* Sidebar: the app's panel, divided from the page by one border. */
.sidebar { border-inline-end: 1px solid var(--pal-border); }
.sidebar:has(.sidebar-resize-handle:hover) { border-inline-end-color: var(--pal-blue); }
.sidebar-resize-handle .sidebar-resize-indicator { display: none; }
.chapter li.part-title { margin: 18px 0 6px; padding: 0 18px; color: var(--pal-muted); font-weight: 600; }
.chapter-link-wrapper > a:first-child {
    flex: 1;
    padding: 6px 12px;
    margin: 0 6px 2px;
    border-radius: 6px;
}
.chapter li a.active { background-color: var(--pal-active); color: var(--pal-text); }
.chapter li a:hover:not(.active) { color: var(--pal-text); }

/* Page and prose. */
main :is(h1, h2, h3, h4, h5, h6) { font-weight: 600; line-height: 1.25; }
main h1 { margin-block-start: 0; }
strong, b { font-weight: 600; }
.content a { text-decoration: underline; text-underline-offset: 2px; }
.content img { border: 1px solid var(--pal-border); border-radius: 6px; }

/* Code, as the app's value box: a surface fill and 6px corners. */
.hljs { background: var(--pal-surface); }
:not(pre) > .hljs { border-radius: 4px; }
pre > .hljs { padding: 12px; border-radius: 6px; }
pre > .buttons button { border: 0; background: none; }
kbd { background: var(--pal-surface); border: 1px solid var(--pal-border); box-shadow: none; }

blockquote {
    padding: 0 0 0 12px;
    border: 0;
    border-inline-start: 3px solid var(--pal-blue);
    background: none;
    color: var(--pal-muted);
}

table { margin: 0; border-collapse: separate; border-spacing: 0; }
.content :is(th, td) { padding: 6px 12px; border: 0; border-block-end: 1px solid var(--pal-border); }
.content th { font-weight: 600; color: var(--pal-muted); text-align: start; }
main hr { margin: 24px 0; border: 0; border-top: 1px solid var(--pal-border); }

#mdbook-searchbar { box-sizing: border-box; padding: 6px 12px; border-radius: 6px; }
:focus-visible { outline: 2px solid var(--pal-blue); outline-offset: 1px; }
#mdbook-help-popup { box-shadow: none; }