/*
    Knowledge base page block styles.

    Kept OUT of the .cshtml on purpose. C1 serialises a razor function's output as XHTML, so a
    <style> block goes through XML escaping: ">" becomes "&gt;" and every child combinator
    stops matching, "<" starts a bogus tag, and a bare "@" is read as a razor transition.
    An external stylesheet has none of those traps - and the browser can cache it.
*/
.bs-kb { max-width: 1100px; margin: 0 auto; }
/* Column widths come from --kb-nav-width so the splitter script only has to set one
   property; every layout variant below just changes that variable. */
.bs-kb-layout {
    display: grid;
    grid-template-columns: var(--kb-nav-width, 260px) 7px minmax(0, 1fr);
    gap: 33px;
}
.bs-kb-layout.no-nav { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin: 0 auto; }

/*
    REQUIRED BY fitTree() in KnowledgeBase.js - do not remove without reading this.

    The tree is sticky, and sticky is still in flow, so on a page whose article is only a few
    lines the TREE is the tallest thing in the row and therefore decides the row's height -
    which decides where the footer below it sits. fitTree measures that footer to know how
    much room the tree may take, so without this rule the tree's height is an input to its own
    calculation: every pass shrank the row, which pulled the footer up, which shrank the tree
    again, ratcheting it down to nothing beside a short article.

    Pinning the row to a viewport regardless of content breaks the cycle - the footer can no
    longer be dragged above the fold by a short article, so the measurement is stable and the
    tree gets the whole available height. A long article exceeds this and the rule stops
    mattering.

    Only where there is a tree to size, and only where it is a column beside the article:
    stacked on a narrow screen a viewport of min-height would be a screenful of nothing.
*/
@media (min-width: 1112px) {
    .bs-kb-layout:not(.no-nav) { min-height: calc(100vh - var(--kb-header, 97px)); }
}
/* The stacked, narrow-screen layout lives in one block near the bottom of the navigation
   section - see "mobile". Splitting it across the file is what let the kb-page rules below
   half-override it. */

/* --- splitter ---------------------------------------------------------- */
.bs-kb-splitter { position: relative; cursor: col-resize; touch-action: none; }
.bs-kb-splitter:before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 1px; margin-left: -1px; background: rgba(0,0,0,.10);
    transition: background .12s ease, width .12s ease;
}
.bs-kb-splitter:hover:before,
.bs-kb-splitter:focus:before { background: #0777ff; width: 2px; }
.bs-kb-splitter:focus { outline: none; }
/* While dragging, stop the pointer selecting article text under the cursor. */
.bs-kb-layout.is-resizing { user-select: none; -webkit-user-select: none; cursor: col-resize; }
body.theme-dark .bs-kb-splitter:before { background: rgba(255,255,255,.14); }

/* Wide layout: the site's content column is capped at 970px, so an in-column
   sidebar costs the article a quarter of its width. This widens the block beyond
   that cap (nothing in the ancestor chain clips overflow) and puts the tree in the
   reclaimed space on the left. calc(100vw - 64px) keeps clear of the scrollbar;
   a browser that cannot do min()/calc here simply keeps the in-column layout. */
@media (min-width: 1200px) {
    .bs-kb.is-wide {
        max-width: none;
        width: min(1400px, calc(100vw - 64px));
        margin-left: calc((100% - min(1400px, calc(100vw - 64px))) / 2);
    }
    .bs-kb.is-wide .bs-kb-layout { --kb-nav-width: 280px; gap: 41px; }
    .bs-kb.is-wide .bs-kb-article { max-width: none; }
}

/* On the "Knowledge Base (full width)" page template the block already owns the
   whole column, so the breakout above must not apply - and the tree can sit on the
   left at EVERY screen size, not only above 1200px. Higher specificity, so these
   win over the rules above regardless of source order. */
body.kb-page .bs-kb,
body.kb-page .bs-kb.is-wide { max-width: none; width: auto; margin: 0; padding: 0; }

/* No gap: the tree owns the left edge and the divider separates the two columns,
   the way Atlassian's sidebar does. Padding lives inside each column instead. */
body.kb-page .bs-kb-layout,
body.kb-page .bs-kb.is-wide .bs-kb-layout { --kb-nav-width: 300px; gap: 0; }
/* The splitter draws the divider here, so the tree must not draw a second one. */
/* Flush to the header rather than inset by 12px - this template's sidebar runs the full
   height of the column, the way Confluence's does. Same header subtraction as above; see
   the note there for why 100vh on its own does not fit. */
body.kb-page .bs-kb-nav {
    top: var(--kb-header, 97px);
    max-height: calc(100vh - var(--kb-header, 97px));
    padding: 0 12px 24px 20px;
    border-right: 0;
}
/* Centred in the space left of it by the tree, with the measure capped so lines
   stay readable on wide screens - the tree stays flush left regardless. */
body.kb-page .bs-kb-article,
body.kb-page .bs-kb.is-wide .bs-kb-article {
    max-width: 1100px; padding: 0 40px; margin: 0 auto;
}

body.theme-dark.kb-page .bs-kb-nav { border-right-color: rgba(255,255,255,.14); }

/* --- space tree navigation -------------------------------------------- */
/* Sticky so the tree stays put while a long article scrolls, and scrollable
   on its own once the tree is taller than the viewport. */
/*
    --kb-header is the height of the site's FIXED header, published by the script and
    falling back to 97px here. It has to be subtracted from both numbers below.

    The header is position:fixed, so "top: 0" on a sticky element means "underneath the
    header", not "at the top of what the reader can see". Pairing that with a full 100vh
    box gave the tree a viewport of height inside a space one header SHORTER than a
    viewport, and the 97px surplus had to go somewhere: at rest the bottom of the tree hung
    below the fold, and once the sticky position engaged the top went behind the header
    instead. Either way one end of the tree's own scrollbar was off screen - never both at
    once - and the oversized box pushed the page itself into scrolling even next to a short
    article.

    Whatever this value is, top + max-height must together stay inside 100vh.
*/
.bs-kb-nav {
    font-size: .94em; position: sticky; top: calc(var(--kb-header, 97px) + 12px);
    max-height: calc(100vh - var(--kb-header, 97px) - 24px);
    overflow-y: auto; overscroll-behavior: contain;
}
.bs-kb-nav ul { list-style: none; padding: 0; margin: 0; }
.bs-kb-nav ul ul { margin-left: 9px; padding-left: 8px; border-left: 1px solid rgba(0,0,0,.10); }
.bs-kb-nav li { margin: 0; }
.bs-kb-nav a { display: block; padding: 5px 8px; border-radius: 4px; text-decoration: none; color: inherit; }
.bs-kb-nav a:hover { background: rgba(0,0,0,.05); }
.bs-kb-nav a.is-active { background: rgba(7,119,255,.1); color: #0777ff; font-weight: 600; }
.bs-kb-nav .kb-root { font-weight: 600; margin-bottom: 4px; }

/* details/summary gives collapsing with no script; replace the native marker
   with a caret that rotates when open. */
.bs-kb-nav summary { display: flex; align-items: center; cursor: pointer; list-style: none; }
.bs-kb-nav summary::-webkit-details-marker { display: none; }
/* display:inline-block matters: transform is ignored on inline boxes, and relying
   on flex-item blockification of a pseudo-element is not dependable across
   browsers (Safari treats summary specially). */
.bs-kb-nav summary:before {
    content: "\25B8";
    display: inline-block; width: 1em; flex: 0 0 1em;
    text-align: center; opacity: .5; font-size: .8em;
    transform-origin: 50% 50%;
    transition: transform .12s ease;
}
.bs-kb-nav details[open] > summary:before { transform: rotate(90deg); }
.bs-kb-nav summary a { flex: 1 1 auto; }

/* --- mobile: the tree collapses behind a bar --------------------------- */
/*
    1112px is the site's own menu breakpoint (@grid-float-breakpoint, raised from
    bootstrap's 992px when the main menu gained entries): below it
    the top navigation becomes the burger and the header stops being fixed, so the whole
    page changes character at one width rather than two.

    Two things are fixed here.

    Layout: stacking put the entire expanded tree between the reader and the article, and
    the deeper the open branch the further they had to scroll to reach it. The tree is now
    collapsed behind a toggle, so the article starts at the top of the page.

    Overflow: the previous override was a plain ".bs-kb-nav" rule, which the "body.kb-page"
    rules further up beat on specificity for max-height (100vh survived) while losing on
    source order for overflow (visible won). A capped box that is allowed to overflow does
    exactly what was reported - the tree painted over the article below it, further the
    more sections were open. So every rule that touches the nav's box below repeats the
    kb-page selectors verbatim: nothing outside this block can win half of a pair.

    KEEP max-height AND overflow-y TOGETHER. Setting one without the other is the bug.
*/
.bs-kb-nav-toggle { display: none; }

@media (max-width: 1111px) {
    .bs-kb-layout,
    body.kb-page .bs-kb-layout,
    body.kb-page .bs-kb.is-wide .bs-kb-layout {
        grid-template-columns: minmax(0, 1fr); gap: 0;
    }
    .bs-kb-splitter { display: none; }

    /* is-collapsible is set by the script. Without script the button stays hidden and the
       tree stays where it is - readable, just long. */
    .bs-kb-layout.is-collapsible .bs-kb-nav-toggle {
        display: flex; align-items: center; gap: 12px;
        width: 100%; margin: 0 0 20px; padding: 13px 16px;
        font: inherit; font-weight: 600; text-align: left; color: inherit;
        background: rgba(0,0,0,.035);
        border: 0; border-top: 1px solid rgba(0,0,0,.10); border-bottom: 1px solid rgba(0,0,0,.10);
        border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
    }
    /* Open, the tree sits directly under the bar and the two read as one control. */
    .bs-kb-layout.is-collapsible.nav-open .bs-kb-nav-toggle { margin-bottom: 0; border-bottom-color: transparent; }

    .bs-kb-nav-toggle .kb-toggle-label { flex: 1 1 auto; }
    /* Three bars, as in the site's own navbar-toggle. */
    .bs-kb-nav-toggle .kb-toggle-bars { flex: 0 0 18px; width: 18px; }
    .bs-kb-nav-toggle .kb-toggle-bars span {
        display: block; height: 2px; margin: 4px 0; border-radius: 1px; background: currentColor; opacity: .65;
    }
    .bs-kb-nav-toggle .kb-toggle-caret {
        flex: 0 0 auto; opacity: .55; font-size: .8em;
        transition: transform .12s ease; transform-origin: 50% 50%;
    }
    .bs-kb-nav-toggle .kb-toggle-caret:before { content: "\25BE"; }
    .bs-kb-layout.nav-open .bs-kb-nav-toggle .kb-toggle-caret { transform: rotate(180deg); }

    .bs-kb-nav,
    body.kb-page .bs-kb-nav,
    body.kb-page .bs-kb.is-wide .bs-kb-nav {
        position: static; top: auto;
        max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
        margin: 0 0 24px; padding: 8px 0 12px;
        border-right: 0; border-bottom: 1px solid rgba(0,0,0,.10);
    }
    /* Only the full width template pads its own columns; in-column the article has no
       gutter of its own, so the tree must not invent one. */
    body.kb-page .bs-kb-nav,
    body.kb-page .bs-kb.is-wide .bs-kb-nav { padding: 8px 16px 12px; }

    .bs-kb-layout.is-collapsible .bs-kb-nav { display: none; }
    .bs-kb-layout.is-collapsible.nav-open .bs-kb-nav { display: block; }

    /* 5px of padding is a mouse-sized row; a finger needs more. */
    .bs-kb-nav a { padding: 9px 8px; }

    body.kb-page .bs-kb-article,
    body.kb-page .bs-kb.is-wide .bs-kb-article { padding: 0 16px; }

    body.theme-dark .bs-kb-layout.is-collapsible .bs-kb-nav-toggle {
        background: rgba(255,255,255,.05);
        border-top-color: rgba(255,255,255,.14); border-bottom-color: rgba(255,255,255,.14);
    }
    body.theme-dark .bs-kb-layout.is-collapsible.nav-open .bs-kb-nav-toggle { border-bottom-color: transparent; }
    /* The .is-wide variant of the rule above is (0,4,1), so the dark override has to carry
       the same chain or the light border survives on a wide kb page. */
    body.theme-dark .bs-kb-nav,
    body.theme-dark.kb-page .bs-kb-nav,
    body.theme-dark.kb-page .bs-kb.is-wide .bs-kb-nav { border-bottom-color: rgba(255,255,255,.14); }

    .bs-kb.is-atlassian .bs-kb-layout.is-collapsible .bs-kb-nav-toggle {
        color: #172B4D; background: #F4F5F7;
        border-top-color: #DFE1E6; border-bottom-color: #DFE1E6;
    }
    body.theme-dark .bs-kb.is-atlassian .bs-kb-layout.is-collapsible .bs-kb-nav-toggle {
        color: #B6C2CF; background: #22272B;
        border-top-color: #2C333A; border-bottom-color: #2C333A;
    }
}

/* --- article ---------------------------------------------------------- */
.bs-kb-article { min-width: 0; }
.bs-kb .kb-updated { opacity: .55; font-size: .85em; margin-bottom: 24px; }
.bs-kb .kb-unavailable { opacity: .6; font-style: italic; }
/* What a link to an article this site does not serve becomes. The words are kept - they
   still read as a sentence - but nothing is behind them, so they must not look clickable.
   Deliberately plain: a visitor should not notice anything is missing. */
.bs-kb .kb-unlinked { color: inherit; }

/* --- article typography ------------------------------------------------ */
/*
    The site's scale is set for marketing pages: bootstrap/variables.less puts
    @font-size-base at 18px, which makes @font-size-h1 46px and @font-size-h2 38px, with
    @line-height-base 1.8. In a 760px documentation column a 46px h1 is poster sized, and
    1.8 spreads a three line paragraph over a lot of screen.

    Scoped to .bs-kb-article so ONLY the knowledge base article moves - the site keeps its
    own scale everywhere else, and the navigation tree is deliberately left alone.

    The heading steps mirror Confluence's own proportions at our 18px base, on the grounds
    that this is Confluence content and its author sized the page against that rhythm:
        Confluence   h1 24/14 = 1.71   h2 20/14 = 1.43   h3 16/14 = 1.14
        here         h1 32/18 = 1.78   h2 26/18 = 1.44   h3 21/18 = 1.17

    Leading is NOT cut by a flat 25%. Headings already sit at 1.1, and 1.1 x 0.75 = 0.83
    puts successive lines on top of one another - so a uniform reduction is not available.
    The looseness is all in the body, and even there 18px on an 80 character measure wants
    leading nearer 1.55 than the 1.35 a 25% cut would give: a long line needs MORE leading
    for the eye to find the next one, not less. The remaining density comes from paragraph
    separation instead, which costs nothing to read.

    The knobs live here - change these values, not the rules below:
        --kb-body-line   1.55 recommended, 1.50 for maximum density, 1.80 to revert
        --kb-para-gap    12px recommended, 10px for maximum density, 16px to revert
        --kb-h1-top      space above the article title

    Declared on .bs-kb rather than on the article because the navigation tree reads
    --kb-body-line too, and the two must not drift apart.
*/
.bs-kb {
    --kb-h1: 32px;
    --kb-h2: 26px;
    --kb-h3: 21px;
    --kb-h4: 18px;
    --kb-h1-top: 24px;
    --kb-body-line: 1.55;
    --kb-para-gap: 12px;
}

.bs-kb-article { line-height: var(--kb-body-line, 1.55); }

/* The h1 keeps a top margin even though it is the first thing in the column: the article
   is a grid item, so it establishes its own formatting context and the margin cannot
   collapse out of it - it lands as real space above the title, which is the point. */
.bs-kb-article h1 { font-size: var(--kb-h1, 32px); line-height: 1.2;  margin: var(--kb-h1-top, 24px) 0 8px; }
.bs-kb-article h2 { font-size: var(--kb-h2, 26px); line-height: 1.25; margin: 28px 0 10px; }
.bs-kb-article h3 { font-size: var(--kb-h3, 21px); line-height: 1.3;  margin: 24px 0 8px; }
.bs-kb-article h4 { font-size: var(--kb-h4, 18px); line-height: 1.35; margin: 20px 0 8px; font-weight: 600; }

.bs-kb-article p,
.bs-kb-article ul,
.bs-kb-article ol { margin: 0 0 var(--kb-para-gap, 12px); }

/* The navigation tree, on the same leading as the article.
   Tree labels are long enough to wrap at this column width ("Brainsalt Hub - Set Up and
   Manage the Server" takes two lines), so 1.8 was costing real vertical space and pushing
   the tree past the fold. Deliberately NOT restated for the Atlassian look below, unlike
   the article: Confluence's own sidebar runs tighter than its body text, so sharing the
   article's reduced value is the more faithful match, not a departure from it. */
.bs-kb-nav { line-height: var(--kb-body-line, 1.55); }

/* --- image preview (lightbox) ------------------------------------------ */
/* Confluence sizes embedded images in absolute pixels against its own content
   column, so they never scale with ours - hence the width parameter on the block.
   max-width still protects against an image wider than the column. */
.bs-kb img.is-zoomable { cursor: zoom-in; }
.bs-kb-lightbox {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(9, 30, 66, .82); padding: 40px; cursor: zoom-out;
}
.bs-kb-lightbox-stage {
    margin: 0; display: flex; flex-direction: column; align-items: center;
    gap: 12px; max-width: 100%; max-height: 100%;
}
.bs-kb-lightbox img {
    max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,.5); background: #fff; cursor: default;
}
.bs-kb-lightbox-caption {
    color: rgba(255,255,255,.85); font-size: .9em; text-align: center; max-width: 70ch;
}
.bs-kb-lightbox-close,
.bs-kb-lightbox-nav {
    position: absolute; border: 0; border-radius: 4px; cursor: pointer;
    background: rgba(255,255,255,.14); color: #fff; line-height: 1;
}
.bs-kb-lightbox-close { top: 16px; right: 20px; width: 40px; height: 40px; font-size: 28px; }
/* Paging controls, as in Confluence's viewer. Hidden when the page has one image. */
.bs-kb-lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 64px; font-size: 34px; }
.bs-kb-lightbox-nav.is-prev { left: 16px; }
.bs-kb-lightbox-nav.is-next { right: 16px; }
.bs-kb-lightbox-close:hover,
.bs-kb-lightbox-nav:hover { background: rgba(255,255,255,.26); }
.bs-kb-lightbox-count {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.7); font-size: .85em; letter-spacing: .04em;
}
@media (max-width: 600px) {
    .bs-kb-lightbox { padding: 16px; }
    .bs-kb-lightbox-nav { width: 40px; height: 52px; font-size: 26px; }
}

/* --- Confluence export_view markup ------------------------------------ */
.bs-kb img { max-width: 100%; height: auto; }
/* Attached video/audio: Confluence ships these as an img tag whose src is the .mp4,
   which the service promotes to real players. Note: no angle brackets in comments
   here - C1 parses this stylesheet as XML, so they would be read as tags. */
.bs-kb video { max-width: 100%; height: auto; display: block; margin: 18px 0; background: #000; }
.bs-kb audio { width: 100%; max-width: 520px; display: block; margin: 18px 0; }
.bs-kb .confluence-embedded-file-wrapper { display: block; }
/* Interactive guide embed: replaces the video when the page links to the guide CDN.
   Padding-ratio box so the iframe scales with the column (16:9). */
/* The guide manages its own internals: the player scales with object-fit: contain, so
   it is never cropped, and the steps sit below it in their own scroll area. All it
   needs from us is a sensible box to live in - hence a viewport-relative height
   rather than an aspect ratio, which would crop the steps away. */
/* Height follows width, because the player is height-limited: once the box is wide,
   extra width only adds black bars. 16/11 rather than 16/9 leaves room for the step
   strip under the video. Capped to the window so the page never has to be scrolled
   to see the whole guide. */
.bs-kb-guide {
    display: block;                 /* it is a span element - see EmbedInteractiveGuide */
    /* Centred, because on a short window the guide asks for less than the column and would
       otherwise sit left of the text column below it. */
    position: relative; margin: 0 auto 32px;
    /* Width from the block's "Guide width" parameter, never wider than the column. */
    width: min(var(--kb-guide-width, 960px), 100%);
    /* Fill the window rather than deriving height from width: an aspect ratio stops
       at its computed height and leaves the rest of the screen empty, while the guide
       divides whatever height it gets between the player and the step list.

       Height is also the only way to make the PLAYER bigger. The guide reports the width
       it can fill (bs-guide-width, see initGuides) and that is computed from its height,
       because the video is height-limited and object-fit: contain - so a wider box only
       adds black bars, while a taller one grows the picture in both directions.

       Measured against the live guide: it asks for about 1.42px of width per 1px of height
       it is given (1920x1080 -> 896px, 2560x1440 -> 1408px). A 1080p window offers a column
       of roughly 1080px, so the box has to be near the full viewport height for the player
       to fill it - anything left for the site header and title above is width taken off the
       video. It therefore runs past the fold, which it may now that the written steps are
       under it and the page is meant to be scrolled.

       --kb-guide-chrome tunes it: raise it to keep the whole guide in view without
       scrolling, lower it for a bigger picture. */
    height: calc(100vh - var(--kb-guide-chrome, 40px));
    min-height: 520px;
    background: #000; border-radius: 4px; overflow: hidden;
}
.bs-kb-guide iframe { display: block; width: 100%; height: 100%; border: 0; }
/* The written steps under a guide. Deliberately NOT --kb-guide-width: the player wants the
   whole window, prose does not - a guide set to fill the column would otherwise drag the
   text out to full bleed with it and give it 200-character lines. Its own reading width,
   centred under the player. */
.bs-kb-guide-body {
    width: min(var(--kb-guide-body-width, 970px), 100%);
    margin: 0 auto;
    padding: 0 20px 24px;
    box-sizing: border-box;
}
/* Nothing above the fold but the guide: the steps are found by scrolling, and a heading
   arriving right at the edge reads as the page having been cut off. */
.bs-kb-guide-body > *:first-child { margin-top: 8px; }

/* A guide page leads with the embed, so the article stops being a reading column
   altogether. !important because several rules cap .bs-kb-article by template and
   layout variant, and any one of them winning would silently shrink the player. */
.bs-kb-article.is-guide,
body.kb-page .bs-kb-article.is-guide,
body.kb-page .bs-kb.is-wide .bs-kb-article.is-guide {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
@media (max-width: 800px) {
    .bs-kb-guide { min-height: 360px; max-height: calc(100vh - 80px); }
}
.bs-kb table { border-collapse: collapse; width: 100%; margin: 18px 0; display: block; overflow-x: auto; }
.bs-kb th, .bs-kb td { border: 1px solid rgba(0,0,0,.14); padding: 8px 10px; text-align: left; vertical-align: top; }
.bs-kb th { background: rgba(0,0,0,.04); font-weight: 600; }
.bs-kb pre { background: rgba(0,0,0,.04); padding: 12px 14px; border-radius: 6px; overflow-x: auto; }
.bs-kb code { font-size: .92em; }
/* Code macro: div.code.panel > div.codeContent > pre - drop the doubled frame */
.bs-kb .code.panel { border: 0 !important; margin: 18px 0; }
.bs-kb .code.panel .codeContent { padding: 0; }
.bs-kb .code.panel pre { margin: 0; }
.bs-kb .table-wrap { overflow-x: auto; }

/* Panels: info / note / warning / tip */
.bs-kb .confluence-information-macro {
    display: flex; gap: 12px; padding: 14px 16px; margin: 18px 0;
    border-radius: 6px; border-left: 3px solid #0777ff; background: rgba(7,119,255,.06);
}
.bs-kb .confluence-information-macro-warning { border-left-color: #de350b; background: rgba(222,53,11,.06); }
.bs-kb .confluence-information-macro-note    { border-left-color: #ff991f; background: rgba(255,153,31,.07); }
.bs-kb .confluence-information-macro-tip     { border-left-color: #00875a; background: rgba(0,135,90,.06); }
.bs-kb .confluence-information-macro-body > *:first-child { margin-top: 0; }
.bs-kb .confluence-information-macro-body > *:last-child { margin-bottom: 0; }

/* Status lozenges */
.bs-kb .aui-lozenge {
    display: inline-block; padding: 2px 7px; border-radius: 3px;
    font-size: .72em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: rgba(0,0,0,.08);
}

/* Expand macro: export_view has no toggle script, so show it as a titled section
   rather than shipping content the visitor cannot open. */
.bs-kb .expand-container { margin: 18px 0; border: 1px solid rgba(0,0,0,.12); border-radius: 6px; overflow: hidden; }
.bs-kb .expand-control { padding: 10px 14px; background: rgba(0,0,0,.04); font-weight: 600; }
.bs-kb .expand-control-icon { display: none; }
.bs-kb .expand-content { display: block !important; padding: 4px 14px 12px; }

/* Task lists */
.bs-kb .inline-task-list { list-style: none; padding-left: 0; }
.bs-kb .inline-task-list li { padding-left: 24px; position: relative; }
.bs-kb .inline-task-list li:before { content: "\2610"; position: absolute; left: 0; opacity: .6; }

/* Dark pages ("Page (no menu) - Dark" template) */
body.theme-dark .bs-kb th, body.theme-dark .bs-kb td { border-color: rgba(255,255,255,.18); }
body.theme-dark .bs-kb th { background: rgba(255,255,255,.06); }
body.theme-dark .bs-kb pre { background: rgba(255,255,255,.06); }
body.theme-dark .bs-kb .expand-container { border-color: rgba(255,255,255,.18); }
body.theme-dark .bs-kb .expand-control { background: rgba(255,255,255,.06); }
body.theme-dark .bs-kb .aui-lozenge { background: rgba(255,255,255,.14); }
body.theme-dark .bs-kb-nav a:hover { background: rgba(255,255,255,.08); }
body.theme-dark .bs-kb-nav a.is-active { background: rgba(77,163,255,.16); color: #4da3ff; }
body.theme-dark .bs-kb-nav ul ul { border-left-color: rgba(255,255,255,.18); }

/* ======================================================================
   "Confluence look" - optional, scoped to .is-atlassian so the rest of the
   site is never touched.

   This is a reimplementation of Atlassian's palette and typography, not
   Confluence's own stylesheet: body.styled_view returns ~131 KB of CSS that
   begins with a global reset on html/body/p/div/h1... and an unresolvable
   relative CSS import, so serving it would restyle the whole page.
   ====================================================================== */
.bs-kb.is-atlassian {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
                 Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    color: #172B4D; font-size: 14px; line-height: 1.714;
}
.bs-kb.is-atlassian h1 { font-size: 24px; line-height: 1.166; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; color: #172B4D; }
.bs-kb.is-atlassian h2 { font-size: 20px; line-height: 1.2; font-weight: 600; margin: 32px 0 8px; color: #172B4D; }
.bs-kb.is-atlassian h3 { font-size: 16px; line-height: 1.25; font-weight: 600; margin: 24px 0 8px; color: #172B4D; }
.bs-kb.is-atlassian h4 { font-size: 14px; font-weight: 600; margin: 20px 0 8px; color: #172B4D; }
.bs-kb.is-atlassian p { margin: 0 0 12px; }
/* The heading and margin rules above already outrank the article typography section by
   specificity, but its line-height is set on .bs-kb-article itself - which no rule on the
   BLOCK can outrank, however specific, because it targets a different element. So the
   Atlassian leading has to be restated on the article to survive. */
.bs-kb.is-atlassian .bs-kb-article { line-height: 1.714; }
.bs-kb.is-atlassian ul, .bs-kb.is-atlassian ol { margin: 0 0 12px; padding-left: 24px; }
.bs-kb.is-atlassian li { margin: 4px 0; }
.bs-kb.is-atlassian a { color: #0052CC; text-decoration: none; }
.bs-kb.is-atlassian a:hover { text-decoration: underline; }
.bs-kb.is-atlassian hr { border: 0; border-top: 1px solid #DFE1E6; margin: 24px 0; }
.bs-kb.is-atlassian .kb-updated { color: #6B778C; font-size: 12px; }

.bs-kb.is-atlassian table { margin: 16px 0; }
.bs-kb.is-atlassian th, .bs-kb.is-atlassian td { border: 1px solid #DFE1E6; padding: 7px 10px; }
.bs-kb.is-atlassian th { background: #F4F5F7; font-weight: 600; color: #172B4D; }

.bs-kb.is-atlassian code, .bs-kb.is-atlassian pre {
    font-family: "SFMono-Medium", "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;
    font-size: 12px; color: #172B4D;
}
.bs-kb.is-atlassian code { background: #F4F5F7; border: 1px solid #DFE1E6; border-radius: 3px; padding: 0 4px; }
.bs-kb.is-atlassian pre { background: #F4F5F7; border: 1px solid #DFE1E6; border-radius: 3px; padding: 12px; }
.bs-kb.is-atlassian .code.panel pre { border: 0; }

/* Confluence panels are a tinted block with an icon, not a left rule. */
.bs-kb.is-atlassian .confluence-information-macro {
    border-left: 0; border-radius: 3px; padding: 12px 16px; background: #DEEBFF;
}
.bs-kb.is-atlassian .confluence-information-macro-note    { background: #EAE6FF; }
.bs-kb.is-atlassian .confluence-information-macro-warning { background: #FFEBE6; }
.bs-kb.is-atlassian .confluence-information-macro-tip     { background: #E3FCEF; }

.bs-kb.is-atlassian .aui-lozenge {
    background: #DFE1E6; color: #42526E; border-radius: 3px;
    font-size: 11px; font-weight: 700; padding: 2px 4px;
}
.bs-kb.is-atlassian .expand-container { border: 0; border-radius: 0; }
.bs-kb.is-atlassian .expand-control { background: none; padding: 4px 0; color: #42526E; font-weight: 500; }
.bs-kb.is-atlassian .expand-content { padding: 0 0 8px 16px; }

/* Sidebar in Atlassian's navigation colours. */
.bs-kb.is-atlassian .bs-kb-nav { font-size: 14px; }
.bs-kb.is-atlassian .bs-kb-nav a { color: #42526E; border-radius: 3px; }
.bs-kb.is-atlassian .bs-kb-nav a:hover { background: #F4F5F7; }
.bs-kb.is-atlassian .bs-kb-nav a.is-active { background: #E9F2FF; color: #0C66E4; font-weight: 600; }
.bs-kb.is-atlassian .bs-kb-nav ul ul { border-left-color: #DFE1E6; }

/* Atlassian dark tokens, so the look still holds on the dark page template. */
body.theme-dark .bs-kb.is-atlassian,
body.theme-dark .bs-kb.is-atlassian h1,
body.theme-dark .bs-kb.is-atlassian h2,
body.theme-dark .bs-kb.is-atlassian h3,
body.theme-dark .bs-kb.is-atlassian h4 { color: #B6C2CF; }
body.theme-dark .bs-kb.is-atlassian a { color: #579DFF; }
body.theme-dark .bs-kb.is-atlassian th { background: #22272B; color: #B6C2CF; }
body.theme-dark .bs-kb.is-atlassian th,
body.theme-dark .bs-kb.is-atlassian td { border-color: #2C333A; }
body.theme-dark .bs-kb.is-atlassian code,
body.theme-dark .bs-kb.is-atlassian pre { background: #22272B; border-color: #2C333A; color: #B6C2CF; }
body.theme-dark .bs-kb.is-atlassian hr { border-top-color: #2C333A; }
body.theme-dark .bs-kb.is-atlassian .confluence-information-macro { background: #1C2B41; }
body.theme-dark .bs-kb.is-atlassian .confluence-information-macro-note    { background: #2B273F; }
body.theme-dark .bs-kb.is-atlassian .confluence-information-macro-warning { background: #42221F; }
body.theme-dark .bs-kb.is-atlassian .confluence-information-macro-tip     { background: #1C3329; }
body.theme-dark .bs-kb.is-atlassian .aui-lozenge { background: #2C333A; color: #B6C2CF; }
body.theme-dark .bs-kb.is-atlassian .bs-kb-nav a { color: #9FADBC; }
body.theme-dark .bs-kb.is-atlassian .bs-kb-nav a:hover { background: #22272B; }
body.theme-dark .bs-kb.is-atlassian .bs-kb-nav a.is-active { background: #1C2B41; color: #579DFF; }
body.theme-dark .bs-kb.is-atlassian .bs-kb-nav ul ul { border-left-color: #2C333A; }