/*
 * Blitz3D+ help system
 *
 * This is the single colour authority for bundled help. The palette is derived
 * from the editor defaults in modern/ide/editor_control.h. Page-family CSS may
 * define layout, but it should consume these variables instead of declaring
 * additional colours.
 */

:root {
    color-scheme: dark;

    /* Editor-aligned source colours. */
    --b3d-editor-background: #225588;
    --b3d-editor-gutter: #184672;
    --b3d-editor-string: #00ff66;
    --b3d-editor-identifier: #ffffff;
    --b3d-editor-keyword: #aaffff;
    --b3d-editor-comment: #ffee00;
    --b3d-editor-number: #33ffdd;
    --b3d-editor-text: #eeeeee;
    --b3d-editor-selection: #0078d4;

    /* Help-only supporting tones, kept in the same blue family. */
    --b3d-help-background: var(--b3d-editor-background);
    --b3d-help-panel: var(--b3d-editor-gutter);
    --b3d-help-deep: #12344f;
    --b3d-help-elevated: #2b6394;
    --b3d-help-hover: #2d6e9f;
    --b3d-help-border: #70add1;
    --b3d-help-muted: #c4dcea;
    --b3d-help-search-background: #f5ffff;
    --b3d-help-search-text: #12344f;

    --b3d-focus-ring: var(--b3d-editor-number);
    --b3d-heading-primary: var(--b3d-editor-string);
    --b3d-heading-secondary: var(--b3d-editor-keyword);
    --b3d-link: var(--b3d-editor-comment);
    --b3d-code: var(--b3d-editor-number);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--b3d-help-background);
}

body {
    max-width: 1040px;
    min-height: 100%;
    margin: 0 auto;
    padding: 24px 28px 48px;
    color: var(--b3d-editor-text);
    background: var(--b3d-help-background);
    font: 13px/1.55 Verdana, Arial, sans-serif;
}

.home-logo {
    float: right;
    width: 300px;
    max-width: 46%;
    height: auto;
    margin: 0 0 18px 28px;
}

::selection {
    color: var(--b3d-editor-identifier);
    background: var(--b3d-editor-selection);
}

h1,
h2,
h3,
h4 {
    line-height: 1.2;
}

h1 {
    margin: 0 0 18px;
    color: var(--b3d-heading-primary);
    font-size: 22px;
}

h2 {
    margin: 30px 0 12px;
    padding-bottom: 6px;
    color: var(--b3d-heading-secondary);
    border-bottom: 1px solid var(--b3d-help-border);
    font-size: 17px;
}

h3,
h4 {
    margin: 22px 0 9px;
    color: var(--b3d-heading-secondary);
    font-size: 14px;
}

p,
ul,
ol,
dl,
blockquote,
table,
pre {
    margin-top: 0;
    margin-bottom: 14px;
}

a {
    color: var(--b3d-link);
    font-weight: 700;
    text-decoration: none;
    border-radius: 2px;
}

a:hover {
    color: var(--b3d-editor-identifier);
    background: var(--b3d-help-hover);
    text-decoration: underline;
}

a:focus-visible {
    color: var(--b3d-editor-identifier);
    background: var(--b3d-help-hover);
    outline: 2px solid var(--b3d-focus-ring);
    outline-offset: 2px;
}

code,
pre,
kbd,
samp {
    color: var(--b3d-code);
    background: var(--b3d-help-deep);
    font-family: Consolas, "Courier New", monospace;
}

code,
kbd,
samp {
    padding: 2px 5px;
    border: 1px solid var(--b3d-help-elevated);
    border-radius: 3px;
}

pre {
    overflow: auto;
    padding: 12px 14px;
    border: 1px solid var(--b3d-help-border);
    border-left: 4px solid var(--b3d-editor-number);
    border-radius: 3px;
    line-height: 1.45;
}

pre code {
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
}

/* Syntax-highlighted code (js/blitz-hl.js upgrades every bare <pre>;
   the website highlights the same pages server-side into these same
   classes). The six classes are the editor's lexer styles. */
pre.b3d-hl {
    color: var(--b3d-editor-text);
}

.b3d-hl .k { color: var(--b3d-editor-keyword); }
.b3d-hl .s { color: var(--b3d-editor-string); }
.b3d-hl .c { color: var(--b3d-editor-comment); }
.b3d-hl .n { color: var(--b3d-editor-number); }
.b3d-hl .i { color: var(--b3d-editor-identifier); }

table {
    width: 100%;
    border-collapse: collapse;
    color: var(--b3d-editor-text);
    background: var(--b3d-help-panel);
}

th,
td {
    padding: 7px 9px;
    color: var(--b3d-editor-text);
    background: var(--b3d-help-panel);
    border: 1px solid var(--b3d-help-border);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--b3d-heading-secondary);
    background: var(--b3d-help-deep);
}

blockquote,
.note,
.hint {
    padding: 10px 14px;
    color: var(--b3d-editor-text);
    background: var(--b3d-help-panel);
    border: 1px solid var(--b3d-help-border);
    border-left: 4px solid var(--b3d-editor-comment);
}

dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 5px 14px;
    padding: 10px 12px;
    background: var(--b3d-help-panel);
    border: 1px solid var(--b3d-help-border);
}

dt {
    color: var(--b3d-heading-secondary);
    font-weight: 700;
}

dd {
    margin: 0;
}

hr {
    height: 1px;
    margin: 18px 0;
    background: var(--b3d-help-border);
    border: 0;
}

small,
.small,
.muted {
    color: var(--b3d-help-muted);
}

.Command {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 9px;
    color: var(--b3d-heading-secondary);
    background: var(--b3d-help-deep);
    border-left: 4px solid var(--b3d-editor-string);
    font-size: 16px;
    font-weight: 700;
}

.header {
    color: var(--b3d-heading-secondary);
    font-weight: 700;
}

body > img[align="right"] {
    margin: 0 0 20px 28px;
}

@media (max-width: 640px) {
    body {
        padding: 18px 16px 36px;
    }

    dl {
        grid-template-columns: 1fr;
    }

    dd + dt {
        margin-top: 6px;
    }
}

@media print {
    :root {
        color-scheme: light;
    }

    html,
    body {
        color: #000000;
        background: #ffffff;
    }

    a,
    h1,
    h2,
    h3,
    h4,
    dt,
    .header,
    .Command {
        color: #12344f;
    }

    code,
    pre,
    kbd,
    samp,
    th,
    td,
    blockquote,
    .note,
    .hint,
    dl,
    .Command {
        color: #000000;
        background: #f3f7fa;
        border-color: #70add1;
    }
}