/*
 * 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;
}

/* The help home page's welcome, beside its logo. */
.home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin: 0 0 22px;
}

.home-header p {
    margin: 0;
}

.home-header .home-logo {
    flex: none;
    float: none;
    margin: 0;
}

/* The help home page's tiles: each is one link, with a picture on the
   lessons' dark blue stage, a title and a line or two about where it leads.
   The pictures (images/home, drawn by tools/Update-HelpHomeTiles.ps1) have
   transparent backgrounds, so the stage runs on past them in wider tiles.
   A wide tile spans two columns, or the whole row when there are three. */
.home-tiles {
    clear: both;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.home-tiles > li {
    display: flex;
    min-width: 0;
}

.home-tiles > .home-tile-wide {
    grid-column: span 2;
}

.home-tile {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    color: var(--b3d-editor-text);
    font-weight: 400;
    background: var(--b3d-help-panel);
    border: 1px solid var(--b3d-help-border);
    border-radius: 8px;
    transition: transform 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.home-tile:hover,
.home-tile:focus-visible {
    color: var(--b3d-editor-text);
    background: var(--b3d-help-panel);
    text-decoration: none;
    border-color: var(--b3d-link);
    box-shadow: 0 6px 18px var(--b3d-help-deep);
    transform: translateY(-3px);
}

.home-tile:focus-visible {
    outline: 2px solid var(--b3d-focus-ring);
    outline-offset: 3px;
}

.home-tile-picture {
    position: relative;
    display: block;
    height: 136px;
    background: linear-gradient(var(--b3d-help-panel), var(--b3d-help-deep));
    border-bottom: 1px solid var(--b3d-help-elevated);
}

.home-tile-picture::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(closest-side, var(--b3d-help-hover), transparent);
    opacity: 0.55;
    transition: opacity 0.15s ease-out;
}

.home-tile:hover .home-tile-picture::before,
.home-tile:focus-visible .home-tile-picture::before {
    opacity: 0.9;
}

.home-tile-picture img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.15s ease-out;
}

.home-tile:hover .home-tile-picture img,
.home-tile:focus-visible .home-tile-picture img {
    transform: scale(1.04);
}

.home-tile-badge {
    position: absolute;
    top: 9px;
    left: 10px;
    padding: 2px 10px;
    color: var(--b3d-help-deep);
    background: var(--b3d-editor-string);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.home-tile-title {
    display: block;
    padding: 10px 13px 0;
    color: var(--b3d-link);
    font-size: 15px;
    font-weight: 700;
}

.home-tile-text {
    display: block;
    padding: 3px 13px 13px;
    color: var(--b3d-help-muted);
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 940px) {
    .home-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* The Original-only home page has four tiles and no wide one, so it
       goes from four to a row straight to two. */
    .home-tiles:not(:has(.home-tile-wide)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-tiles > .home-tile-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .home-header {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 14px;
    }

    .home-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* After a wide first tile, an odd number of tiles leaves the last one
       alone on its row, so it spans the row as the first tile does. */
    .home-tiles:has(.home-tile-wide) > li:last-child:nth-child(even) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .home-tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-tiles > .home-tile-wide {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-tile,
    .home-tile-picture::before,
    .home-tile-picture img {
        transition: none;
    }

    .home-tile:hover,
    .home-tile:focus-visible,
    .home-tile:hover .home-tile-picture img,
    .home-tile:focus-visible .home-tile-picture img {
        transform: none;
    }

    .picture-gallery a {
        transition: none;
    }

    .picture-gallery a:hover,
    .picture-gallery a:focus-visible {
        transform: none;
    }
}

/* A gallery of pictures that lead into the page, each with its name under
   it, such as the effects guide's picture of every effect. The pictures keep
   their own shape, so give them all the same one. */
.picture-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.picture-gallery > li {
    display: flex;
    min-width: 0;
}

.picture-gallery a {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    color: var(--b3d-link);
    background: var(--b3d-help-panel);
    border: 1px solid var(--b3d-help-border);
    border-radius: 6px;
    transition: transform 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.picture-gallery a:hover,
.picture-gallery a:focus-visible {
    color: var(--b3d-link);
    background: var(--b3d-help-panel);
    text-decoration: none;
    border-color: var(--b3d-link);
    box-shadow: 0 6px 18px var(--b3d-help-deep);
    transform: translateY(-3px);
}

.picture-gallery a:focus-visible {
    outline: 2px solid var(--b3d-focus-ring);
    outline-offset: 3px;
}

.picture-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--b3d-help-elevated);
}

.picture-gallery span {
    display: block;
    padding: 6px 9px 7px;
    font-size: 12px;
}

figure.image-compare {
    margin: 0 0 14px;
}

figure.image-compare figcaption {
    margin-top: 5px;
    color: var(--b3d-help-muted);
}

/* A screenshot in a guide, no wider than the page, with a caption under it. */
figure.screenshot {
    margin: 0 0 14px;
}

figure.screenshot img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--b3d-help-border);
}

figure.screenshot figcaption {
    margin-top: 5px;
    color: var(--b3d-help-muted);
}

/* Two screenshots of the same view, compared either side of a split: the
   "after" picture, and over its left side, as far as --split, the
   .image-compare-before layer with the "before" picture. Each side's
   .image-compare-label sits in its top corner, and the before layer covers
   the after label as the split passes it. Without js/image-compare.js the
   split stays halfway; the script adds the handle readers drag and the
   slider the keyboard moves. */
.image-compare-frame {
    --split: 50%;
    position: relative;
    overflow: hidden;
    background: var(--b3d-help-deep);
    border: 1px solid var(--b3d-help-border);
    -webkit-user-select: none;
    user-select: none;
}

.image-compare-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.image-compare-before {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--split)) 0 0);
}

.image-compare-before img {
    height: 100%;
}

/* The line along the split. */
.image-compare-frame::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--split);
    width: 2px;
    margin-left: -1px;
    background: var(--b3d-editor-identifier);
    box-shadow: 0 0 0 1px var(--b3d-help-deep);
    pointer-events: none;
}

.image-compare-label {
    position: absolute;
    top: 9px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}

.image-compare-frame > .image-compare-label {
    right: 10px;
    color: var(--b3d-help-deep);
    background: var(--b3d-editor-string);
}

.image-compare-before > .image-compare-label {
    left: 10px;
    color: var(--b3d-editor-text);
    background: var(--b3d-help-deep);
    box-shadow: inset 0 0 0 1px var(--b3d-help-border);
}

.image-compare-links {
    display: block;
}

.image-compare-ready {
    cursor: ew-resize;
    touch-action: pan-y;
}

.image-compare-ready img {
    pointer-events: none;
}

.image-compare-handle {
    position: absolute;
    top: 50%;
    left: clamp(17px, var(--split), calc(100% - 17px));
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    color: var(--b3d-editor-identifier);
    background: var(--b3d-help-deep);
    border: 2px solid var(--b3d-editor-identifier);
    border-radius: 50%;
    box-shadow: 0 2px 8px var(--b3d-help-deep);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.image-compare-ready:hover .image-compare-handle {
    background: var(--b3d-help-hover);
}

.image-compare-handle svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* The slider is there for the keyboard and screen readers; the handle shows
   where it is and when it has the focus. */
.image-compare-range {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.image-compare-range:focus-visible + .image-compare-handle {
    outline: 2px solid var(--b3d-focus-ring);
    outline-offset: 2px;
}

::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);
}

/* A table of what works on each platform, such as the platform guide's:
   a feature in each row and a platform in each column, under a row that
   groups the platforms. Each answer starts with Yes, Partly or No in words,
   which .yes, .partly and .no only colour. A .table-scroll box scrolls a
   table that is too wide for a narrow window, instead of the whole page. */
.table-scroll {
    overflow-x: auto;
    margin-bottom: 14px;
}

.table-scroll > table {
    margin-bottom: 0;
}

table.support {
    min-width: 800px;
}

table.support thead th {
    text-align: center;
}

table.support tbody th {
    width: 19%;
    color: var(--b3d-editor-identifier);
    background: var(--b3d-help-panel);
}

table.support td {
    width: 13.5%;
}

table.support .yes {
    color: var(--b3d-heading-primary);
    font-weight: 700;
}

table.support .partly {
    color: var(--b3d-link);
    font-weight: 700;
}

table.support .no {
    color: var(--b3d-help-muted);
    font-weight: 700;
}

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);
}

/* Callouts in the pages made from Markdown ("> [!TIP]" and the like). */
.callout-title {
    margin-bottom: 4px;
    color: var(--b3d-heading-secondary);
    font-weight: 700;
}

.callout {
    margin-right: 0;
    margin-left: 0;
}

.callout > :last-child {
    margin-bottom: 0;
}

/* A tip in the module pages is Blip's, with Blip beside it. */
blockquote.tip {
    min-height: 76px;
    padding-left: 80px;
    background: var(--b3d-help-panel) url("../images/modules/blip-tip.png") no-repeat 12px 10px / 56px 56px;
    border-left-color: var(--b3d-editor-number);
}

/* The commands at the top of a module's page, each linked to where its
   reference describes it. */
ul.module-commands {
    padding: 8px 12px;
    list-style: none;
    background: var(--b3d-help-panel);
    border: 1px solid var(--b3d-help-border);
}

ul.module-commands > li {
    margin: 4px 0;
}

ul.module-commands code {
    padding: 0;
    background: transparent;
    border: 0;
}

ul.module-commands b {
    color: var(--b3d-editor-identifier);
}

/* A module page's sections hold the guide's questions and the reference's
   own sections, a level below them. */
.module-page h3 {
    font-size: 15px;
}

.module-page h4 {
    font-size: 13px;
}

.module-commands-members {
    margin-left: 2em;
}

.module-commands-label {
    color: var(--b3d-help-muted);
}

.module-page code:target,
.module-page code:has(> span:target) {
    outline: 2px solid var(--b3d-focus-ring);
    outline-offset: 2px;
}

.module-page [id^="api-"] {
    scroll-margin-top: 24px;
}

/* Screenshots in the module pages. */
.module-page p > img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--b3d-help-border);
    border-radius: 3px;
}

.cookie-comparison {
    table-layout: fixed;
}

.cookie-comparison img {
    display: block;
    width: 100%;
    height: auto;
}

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,
    .home-tile-title,
    figure.image-compare figcaption,
    figure.screenshot figcaption,
    table.support tbody th,
    table.support .yes,
    table.support .partly,
    table.support .no {
        color: #12344f;
    }

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

    .home-tile-picture::before {
        display: none;
    }

    table.support tbody th {
        background: #f3f7fa;
    }

    .table-scroll {
        overflow: visible;
    }

    table.support {
        min-width: 0;
    }
}