/* Steinberg WebHelp skin, layered on top of asciidoctor.css.
   Follows the look of steinberg.help: a white header with the Steinberg logo and
   the search box, a grey bar naming the document, a grey table of contents on
   the left and the topic on white, in Work Sans with the Steinberg red only as
   an accent. */

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/work-sans-latin-wght-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Work Sans';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/work-sans-latin-wght-italic.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Turkish, among others, needs the extended Latin set. Cyrillic is not in Work
   Sans at all: Ukrainian falls back to the system font. */
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/work-sans-latin-ext-wght-normal.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Work Sans';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/work-sans-latin-ext-wght-italic.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* steinberg.help palette */
    --se-red: #c90526;
    --se-black: #000000;
    --se-text: #353535;
    --se-text-muted: #565656;
    --se-gray-100: #f5f5f5;
    --se-gray-150: #e6e6e6;
    --se-gray-200: #d6d6d6;
    --se-gray-300: #b1b1b1;
    --se-header: 56px;
    --se-coverbar: 52px;
    --se-banner: calc(var(--se-header) + var(--se-coverbar));
    --se-sidebar: 20em;
}

html { height: 100%; }
body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: var(--se-text);
    font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* Japanese: name fonts that hold its glyphs, rather than leave the browser to
   pick one for each character Work Sans lacks. */
html:lang(ja) body {
    font-family: 'Work Sans', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI',
                 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif;
}
/* Chinese: the same, with the fonts of each script, so that the characters the
   two share are drawn the way each of them writes them. */
html:lang(zh-Hans) body {
    font-family: 'Work Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI',
                 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}
html:lang(zh-Hant) body {
    font-family: 'Work Sans', 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei',
                 'Noto Sans TC', sans-serif;
}

/* ---- Header ------------------------------------------------------------ */

#banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--se-header);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    background: #ffffff;
    border-bottom: 1px solid var(--se-gray-200);
    z-index: 100;
}
#banner-logo { display: block; flex: none; }
#banner-logo img { height: 38px; width: auto; display: block; }
#banner-search { position: relative; margin-left: auto; width: 400px; max-width: 50vw; }

/* ---- Cover bar: which document this is --------------------------------- */

#coverbar {
    position: fixed;
    top: var(--se-header); left: 0; right: 0;
    height: var(--se-coverbar);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    overflow: hidden;
    white-space: nowrap;
    background: var(--se-gray-100);
    z-index: 90;
}
#coverbar-title {
    margin-right: 6px;
    color: var(--se-black);
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}
#coverbar-title:hover { color: var(--se-black); text-decoration: underline; }
.coverbar-tag {
    padding: 2px 8px;
    border: 1px solid var(--se-gray-150);
    background: #ffffff;
    color: var(--se-text);
    font-size: 13px;
    line-height: 1.5;
}

/* ---- Table of contents ------------------------------------------------- */

body.toc2 { padding-left: 0; }
#header > h1, #header > .details { display: none; }

#toc.toc2 {
    position: fixed;
    top: var(--se-banner);
    bottom: 0;
    left: 0;
    width: var(--se-sidebar);
    box-sizing: border-box;
    margin: 0;
    padding: 8px 12px 32px;
    border: 0;
    border-top: 1px solid var(--se-gray-150);
    background: var(--se-gray-100);
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 1em;
    z-index: 50;
}
#toc.toc2 #toctitle {
    margin: 12px 8px 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--se-black);
}
#toc.toc2 > p { margin: 0; }
#toc.toc2 a {
    display: block;
    padding: 5px 8px;
    color: var(--se-text);
    text-decoration: none;
}
#toc.toc2 a:hover { color: var(--se-black); background: var(--se-gray-150); }
#toc.toc2 ul {
    font-family: inherit;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.35;
}
#toc.toc2 ul ul { margin-left: 14px; }
#toc.toc2 li { margin: 0; padding: 0; font-size: 15px; }
#toc.toc2 .toc-root { font-family: inherit; font-size: 15px; font-weight: 700; }
#toc.toc2 .toc-root a { color: var(--se-black); }
/* The page being read, as steinberg.help marks the visible topic. */
#toc.toc2 a:has(> .toc-current),
#toc.toc2 .toc-root.toc-current > a { background: rgba(0, 0, 0, .1); }
#toc.toc2 .toc-current { color: var(--se-black); font-weight: 700; }

/* ---- Content ----------------------------------------------------------- */

body #content {
    display: block;
    /* asciidoctor.css sets width:100% on #content, which would overflow
       horizontally once the sidebar margin is added. */
    width: auto;
    margin-top: var(--se-banner);
    margin-left: var(--se-sidebar);
    padding: 24px 48px 48px;
    max-width: none;
    font-size: 16px;
    line-height: 1.6;
}
#content > * { max-width: 54em; }
#footer { display: none; }

#content p, #content li, #content td, #content dd { color: var(--se-text); line-height: 1.6; }
#content .paragraph, #content .ulist, #content .olist { margin-bottom: 1em; }
#content ul li + li, #content ol li + li { margin-top: .35em; }

#content h1, #content h2, #content h3,
#content h4, #content h5, #content h6,
#content .title {
    font-family: inherit;
    font-style: normal;
    font-weight: 700;
    color: var(--se-black);
    line-height: 1.25;
}
#content h2 { font-size: 1.7em; }
#content h3 { font-size: 1.4em; }
#content h4 { font-size: 1.25em; }
#content h5 { font-size: 1.1em; }
#content h6 { font-size: 1em; }
/* Every page starts with the title of the section it shows, whatever its
   depth: give it the same size throughout, as the topic title it is. */
#content > [class^="sect"] > :is(h2, h3, h4):first-child {
    margin: 0 0 .8em;
    font-size: 2.1em;
}
#content .title { font-size: 1em; margin: 1em 0 .5em; }
#content .imageblock > .title { font-size: 13px; font-weight: 400; color: var(--se-text-muted); }

/* Breadcrumb trail, put together by skin/webhelp.js from the table of contents. */
.se-breadcrumb {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--se-text-muted);
}
.se-breadcrumb a { color: var(--se-text); text-decoration: none; }
.se-breadcrumb a:hover { color: var(--se-black); text-decoration: underline; }
.se-breadcrumb span + span::before { content: '\203A'; margin: 0 .5em; color: var(--se-gray-300); }

a { color: var(--se-text); text-decoration: underline; text-decoration-color: var(--se-gray-300); text-underline-offset: 2px; }
a:hover { color: var(--se-red); text-decoration-color: currentColor; }
a em { font-style: normal; }
#content strong { color: var(--se-black); }

/* Navigation strip the multipage converter appends to every page. */
.nav-footer {
    margin-top: 3em;
    padding-top: 1em;
    border-top: 1px solid var(--se-gray-200);
}
#content .nav-footer p { font-size: 14px; color: var(--se-text-muted); }

/* ---- Inline UI markup -------------------------------------------------- */
/* btn:[] / menu:[] / kbd:[] replace DocBook's guibutton / guimenu / keycap.
   steinberg.help sets interface names in bold, without asciidoctor's brackets. */

#content b.button { font-weight: 700; color: var(--se-black); }
#content b.button::before, #content b.button::after { content: none; }
#content .menuseq b, #content b.menuref { font-weight: 700; color: var(--se-black); }
#content kbd {
    display: inline;
    background: var(--se-gray-150);
    border: 1px solid #454545;
    border-radius: 3px;
    box-shadow: none;
    padding: 0 .3em;
    font-family: inherit;
    font-size: 14px;
    color: var(--se-text);
}
#content code, #content .literal > code {
    background: var(--se-gray-100);
    color: var(--se-black);
}

/* ---- Tables ------------------------------------------------------------ */

#content table.tableblock {
    border: 0;
    border-top: 2px solid var(--se-text-muted);
    border-bottom: 2px solid var(--se-text-muted);
    border-spacing: 0;
    border-collapse: collapse;
}
#content table.tableblock th.tableblock,
#content table.tableblock td.tableblock {
    border: 0;
    border-bottom: 1px solid var(--se-gray-200);
    padding: .6em .8em;
    vertical-align: top;
}
#content table.tableblock th.tableblock {
    background: var(--se-gray-100);
    color: var(--se-black);
    font-weight: 700;
}
#content table.tableblock > tbody > tr:nth-of-type(even) > * { background: transparent; }
#content table.tableblock p.tableblock { margin: 0; }

/* ---- Admonitions ------------------------------------------------------- */
/* steinberg.help callouts: a grey box, the caption in bold next to an icon. */

#content .admonitionblock { margin: 1.25em 0; }
#content .admonitionblock > table,
#content .admonitionblock > table > tbody,
#content .admonitionblock > table tr,
#content .admonitionblock > table td {
    display: block;
    border: 0;
    background: transparent;
}
#content .admonitionblock > table {
    padding: 1.25em 1.5em;
    background: var(--se-gray-100);
}
#content .admonitionblock > table td.icon {
    width: auto;
    padding: 0;
    text-align: left;
}
#content .admonitionblock > table td.icon .title {
    display: block;
    margin: 0 0 .4em;
    padding-left: 1.6em;
    background: no-repeat left center / 1.2em 1.2em;
    font-size: 1em;
    font-weight: 700;
    color: var(--se-black);
    text-shadow: none;
    text-transform: none;
}
#content .admonitionblock.note      td.icon .title { background-image: url(admon/note.svg); }
#content .admonitionblock.tip       td.icon .title { background-image: url(admon/tip.svg); }
#content .admonitionblock.important td.icon .title,
#content .admonitionblock.warning   td.icon .title,
#content .admonitionblock.caution   td.icon .title { background-image: url(admon/warning.svg); }
#content .admonitionblock > table td.content {
    padding: 0;
    border: 0;
    color: var(--se-text);
}
#content .admonitionblock > table td.content > :last-child { margin-bottom: 0; }

/* ---- Search ------------------------------------------------------------ */

.se-search { margin: 0; }
.se-search-input {
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    padding: 0 12px 0 38px;
    border: 1px solid var(--se-gray-200);
    border-radius: 0;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M464 428 339.92 303.9a160.48 160.48 0 0 0 30.72-94.58C370.64 120.37 298.27 48 209.32 48S48 120.37 48 209.32s72.37 161.32 161.32 161.32a160.48 160.48 0 0 0 94.58-30.72L428 464ZM209.32 319.69a110.38 110.38 0 1 1 110.37-110.37 110.5 110.5 0 0 1-110.37 110.37Z'/%3E%3C/svg%3E") no-repeat 12px center / 16px 16px;
    font-family: inherit;
    font-size: 15px;
    color: var(--se-black);
}
.se-search-input::placeholder { color: #757575; }
.se-search-input:focus { outline: 2px solid var(--se-black); outline-offset: -2px; }
.se-search-input::-webkit-search-cancel-button { cursor: pointer; }

.se-search-results {
    position: absolute;
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--se-gray-200);
    border-top: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
    text-align: left;
}
.se-search-results[hidden] { display: none; }
.se-search-results ul { list-style: none; margin: 0; padding: 0; }
.se-search-results li { border-top: 1px solid var(--se-gray-150); }
.se-search-results li.se-selected { background: var(--se-gray-100); }
.se-search-results li a {
    display: block;
    padding: .55em 14px .1em;
    font-size: 15px;
    font-weight: 700;
    color: var(--se-black);
    text-decoration: none;
}
.se-search-results li a:hover { color: var(--se-red); }
.se-search-excerpt {
    display: block;
    padding: 0 14px .6em;
    font-size: 13px;
    line-height: 1.45;
    color: var(--se-text);
}
.se-search-results mark { background: var(--se-black); color: #ffffff; font-weight: 400; padding: 0 2px; }
.se-search-message {
    margin: 0;
    padding: .5em 14px;
    font-size: 12px;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---- Narrow screens ---------------------------------------------------- */

@media screen and (max-width: 900px) {
    :root { --se-sidebar: 0px; }
    #banner { gap: 12px; padding: 0 16px; }
    #banner-logo img { height: 30px; }
    #banner-search { width: auto; flex: 1; max-width: none; }
    #coverbar { padding: 0 16px; }
    #coverbar-title { font-size: 17px; }
    #header { padding: 0; }
    #toc.toc2 { position: static; width: auto; height: auto; margin: var(--se-banner) 0 0; }
    body #content { width: auto; margin-left: 0; margin-top: 0; padding: 20px 16px 40px; }
}