/* The web app's colors (controllers/static/index.html) as the book's coal
   theme, which book.toml makes the default. */
.coal {
    --bg: #0f0e0c;
    --fg: #e8e2d9;

    --sidebar-bg: #181613;
    --sidebar-fg: #9a9086;
    --sidebar-non-existant: #5c544c;
    --sidebar-active: #e0562b;
    --sidebar-spacer: #2e2924;
    --sidebar-header-border-color: #e0562b;

    --scrollbar: #5c544c;

    --icons: #9a9086;
    --icons-hover: #e8e2d9;

    --links: #e0562b;

    --inline-code-color: #f0b39a;

    --theme-popup-bg: #181613;
    --theme-popup-border: #2e2924;
    --theme-hover: #221f1b;

    --quote-bg: #181613;
    --quote-border: #2e2924;

    --warning-border: #d9a441;

    --table-border-color: #2e2924;
    --table-header-bg: #221f1b;
    --table-alternate-bg: #15130f;

    --searchbar-border-color: #2e2924;
    --searchbar-bg: #181613;
    --searchbar-fg: #e8e2d9;
    --searchbar-shadow-color: #0f0e0c;
    --searchresults-header-fg: #9a9086;
    --searchresults-border-color: #2e2924;
    --searchresults-li-bg: #181613;
    --search-mark-bg: #c2421c;

    --footnote-highlight: #e0562b;

    --overlay-bg: rgba(15, 14, 12, 0.6);

    --blockquote-note-color: #e0562b;
    --blockquote-tip-color: #7dbb5a;
    --blockquote-important-color: #e0562b;
    --blockquote-warning-color: #d9a441;
    --blockquote-caution-color: #c2421c;
}

/* Short pages keep the theme's background down to the bottom of the window,
   rather than relying on the root element's background to fill it. */
.page-wrapper {
    min-height: 100dvh;
}

/* Code blocks use the highlighting theme's background otherwise. */
.coal .hljs {
    background: #181613;
}

/* The light theme keeps its colors, with the web app's accent. */
.light {
    --links: #c2421c;
    --sidebar-active: #c2421c;
    --sidebar-header-border-color: #c2421c;
    --footnote-highlight: #c2421c;
}

/* Titles in the web app's style. */
.menu-title {
    font: 700 1.8rem/var(--menu-bar-height) ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.content h1,
.content h2 {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

/* A diagram drawn from a pikchr block, in the page's color, fit to the text
   and never wider than it was drawn. Shrunk to fit, it opens larger when
   clicked (diagram.js). */
.content .diagram {
    max-width: var(--diagram-width);
    margin: 1.5em 0;
    color: var(--fg);
}

.content .diagram svg {
    display: block;
    width: 100%;
    height: auto;
}

.content .diagram.zoomable {
    cursor: zoom-in;
}

.content .diagram.zoomable:focus-visible {
    outline: 2px solid var(--links);
    outline-offset: 4px;
}

.diagram-zoom {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--fg);
    background: var(--bg);
}

.diagram-zoom::backdrop {
    background: var(--bg);
}

.diagram-zoom .scroll {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    height: 100%;
    overflow: auto;
    padding: 56px 32px 32px;
}

.diagram-zoom svg {
    display: block;
    max-width: none;
    height: auto;
}

.diagram-zoom .close {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font: 400 22px/1 system-ui, sans-serif;
    color: var(--fg);
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-spacer, #3a332c);
    cursor: pointer;
}