/* ==========================================================================
   Launchtip theme for Help Scout Docs
   --------------------------------------------------------------------------
   Upload via Docs settings > Custom code > Upload stylesheet.

   Help Scout loads three stylesheets into <head>, in this order:

     1. the Bootstrap 2 base theme (launch-*.css on cloudfront)
     2. an inline <style> block generated from the Docs colour settings
     3. this file

   Because this file is last, equal specificity beats both. Navbar and article
   rules are prefixed with #mainNav / #fullArticle so they also outrank the
   id-and-class selectors in the generated block without needing !important.

   Everything is driven by the custom properties below; the dark mode block at
   the bottom only reassigns those.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    --lt-brand: #4c45fc;
    --lt-brand-hover: #3a33e0;
    --lt-brand-tint: #f1f0ff;
    --lt-brand-ring: rgba(76, 69, 252, 0.22);

    --lt-ink: #0a0a0a;
    --lt-text: #3f4552;
    --lt-muted: #676e7d;
    --lt-faint: #9199a8;

    --lt-bg: #fbfbfd;
    --lt-surface: #ffffff;
    --lt-surface-2: #f4f5f9;
    --lt-border: #e5e7ef;
    --lt-border-strong: #d4d8e4;

    --lt-code-bg: #15161c;
    --lt-code-text: #e6e8ef;
    --lt-code-border: #24262f;

    --lt-radius: 14px;
    --lt-radius-sm: 9px;
    --lt-radius-pill: 999px;

    --lt-shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.05);
    --lt-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 10px 26px -12px rgba(10, 10, 10, 0.16);
    --lt-shadow-lg: 0 24px 60px -24px rgba(10, 10, 10, 0.28);

    --lt-nav-h: 66px;
    /* Wide enough that the article column still gets a ~70 character measure
       with both the category rail and the table of contents alongside it. */
    --lt-max: 1360px;
    --lt-rail: 240px;
    --lt-toc: 208px;

    --lt-font: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --lt-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* --------------------------------------------------------------------------
   2. Page shell

   The base theme puts 20px of padding on <body> and sets the root font size
   to 12px. Both have to go before anything else lines up.
   -------------------------------------------------------------------------- */

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: var(--lt-bg);
    color: var(--lt-text);
    font-family: var(--lt-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv05" 1, "cv08" 1;
}

*:focus-visible {
    outline: 2px solid var(--lt-brand);
    outline-offset: 2px;
    border-radius: 3px;
}

::selection {
    background: var(--lt-brand-ring);
}

#contentArea.container-fluid {
    max-width: var(--lt-max);
    margin: 0 auto;
    padding: 40px 24px 96px;
}

/* Bootstrap floats the two columns and clears them with pseudo-elements. Grid
   is cleaner, gives a real gutter, and lets the sidebar sit on the left
   without touching the markup order. */
#contentArea > .row-fluid {
    display: grid;
    grid-template-columns: var(--lt-rail) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

#contentArea > .row-fluid::before,
#contentArea > .row-fluid::after {
    display: none;
}

#contentArea > .row-fluid > #main-content,
#contentArea > .row-fluid > #sidebar {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
}

#contentArea > .row-fluid > #sidebar {
    order: -1;
}

/* --------------------------------------------------------------------------
   3. Navbar
   -------------------------------------------------------------------------- */

#mainNav.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    margin: 0;
}

#mainNav .navbar-inner {
    min-height: var(--lt-nav-h);
    padding: 0;
    background: var(--lt-surface);
    border: 0;
    border-bottom: 1px solid var(--lt-border);
    border-radius: 0;
    box-shadow: none;
    filter: none;
}

@supports (backdrop-filter: blur(12px)) {
    #mainNav .navbar-inner {
        background: color-mix(in srgb, var(--lt-surface) 82%, transparent);
        backdrop-filter: saturate(180%) blur(14px);
    }
}

#mainNav .navbar-inner .container-fluid {
    max-width: var(--lt-max);
    margin: 0 auto;
    padding: 0 24px;
}

#mainNav .brand {
    display: inline-flex;
    align-items: center;
    height: var(--lt-nav-h);
    padding: 0;
    margin: 0;
    color: var(--lt-ink);
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.015em;
    text-shadow: none;
}

/* The uploaded logo is 987x177, so height drives it and width follows. This
   replaces the base theme's max-height: 75px. */
#mainNav .brand img {
    max-height: 30px;
    width: auto;
    height: auto;
}

#mainNav .nav > li > a,
#mainNav .nav li a {
    padding: 8px 12px;
    color: var(--lt-muted);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: none;
    border-radius: var(--lt-radius-sm);
    transition: color 0.15s, background 0.15s;
}

#mainNav .nav li a:hover,
#mainNav .nav li a:focus {
    color: var(--lt-ink);
    background: var(--lt-surface-2);
}

#mainNav .nav .active a,
#mainNav .nav .active a:hover,
#mainNav .nav .active a:focus {
    color: var(--lt-brand);
    background: var(--lt-brand-tint);
    text-shadow: none;
}

/* Bootstrap 2 uses this as a dropdown affordance. Nothing here has a
   dropdown, so it is noise. */
#mainNav .nav .caret,
#mainNav .nav .active .caret {
    display: none;
}

#mainNav .btn-navbar {
    margin: 14px 0;
    padding: 9px 11px;
    background: var(--lt-surface-2);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius-sm);
    box-shadow: none;
    text-shadow: none;
}

#mainNav .btn-navbar .icon-bar {
    width: 16px;
    height: 2px;
    background: var(--lt-muted);
    border-radius: 2px;
    box-shadow: none;
}

/* Matches the base theme's own navbar breakpoint: it collapses .nav-collapse at
   768px and absolutely positions ul.nav from 769px up. */
@media (min-width: 769px) {
    #mainNav .navbar-inner .container-fluid {
        display: flex;
        align-items: center;
        gap: 28px;
    }

    #mainNav .nav-collapse {
        flex: 1;
        min-width: 0;
        margin: 0;
    }

    /* The base theme pins the list to the bottom right of the navbar with
       position: absolute. It has to come out of that to sit in the flex row. */
    #mainNav .nav {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        display: flex;
        align-items: center;
        gap: 2px;
        float: none;
        margin: 0;
        /* Thirteen collections do not fit on one row, so the row scrolls rather
           than wrapping and doubling the height of a sticky navbar. The mask
           only shows when items actually reach the right edge. */
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    }

    #mainNav .nav::-webkit-scrollbar {
        display: none;
    }

    #mainNav .nav > li {
        float: none;
        flex: 0 0 auto;
    }

    #mainNav .nav li a {
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    #mainNav .nav-collapse .nav {
        margin: 8px 0;
        text-align: left;
    }

    #mainNav .nav-collapse .nav li a {
        display: block;
        margin: 2px 0;
        font-size: 15px;
        line-height: 1.5;
    }

    /* The base theme parks this button absolutely at 768px and strips its
       styling, so the padding and border need restating. */
    #mainNav .btn-navbar {
        position: absolute;
        top: 0;
        right: 24px;
        width: auto;
        height: auto;
        margin-top: 15px;
        padding: 9px 11px;
        background: var(--lt-surface-2);
        border: 1px solid var(--lt-border);
    }

    #mainNav .btn-navbar:hover .icon-bar,
    #mainNav .btn-navbar:active .icon-bar,
    #mainNav .btn-navbar:focus .icon-bar {
        background: var(--lt-ink);
    }

    /* Sits just left of the hamburger, which is pinned to the right edge. */
    #mainNav .lt-theme {
        position: absolute;
        top: 15px;
        right: 76px;
    }
}

/* Injected by headers.html. Outside .nav-collapse so it stays put when the
   menu collapses. Moon while the page is light, sun while it is dark. */
#mainNav .lt-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: 0 0 0 12px;
    padding: 0;
    background: var(--lt-surface-2);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius-sm);
    box-shadow: none;
    color: var(--lt-muted);
    cursor: pointer;
}

#mainNav .lt-theme:hover,
#mainNav .lt-theme:focus {
    background: var(--lt-surface);
    color: var(--lt-ink);
}

#mainNav .lt-theme svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#mainNav .lt-theme .lt-sun {
    display: none;
}

:root[data-theme="dark"] #mainNav .lt-theme .lt-sun {
    display: block;
}

:root[data-theme="dark"] #mainNav .lt-theme .lt-moon {
    display: none;
}

/* --------------------------------------------------------------------------
   4. Home page: hero and search
   -------------------------------------------------------------------------- */

/* The base theme gives this a grey background but also a 1200px max-width and
   side margins, so it reads as a floating box. Full bleed instead, with the
   children centred. */
#docsSearch {
    max-width: none;
    margin: 0;
    padding: 72px 24px 76px;
    background: var(--lt-surface);
    border-bottom: 1px solid var(--lt-border);
    text-align: center;
}

#docsSearch h1 {
    margin: 0 auto 28px;
    max-width: 22ch;
    color: var(--lt-ink);
    font-size: clamp(30px, 5vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

#docsSearch #searchBar {
    max-width: 620px;
    margin: 0 auto;
}

/* The base theme pads the form 32px top and bottom, which pushed the absolutely
   positioned submit button clear of the input, and pins it to a fixed 620px
   that overflows a phone. */
#searchBar {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

#searchBar .search-query {
    height: 54px;
    padding: 0 18px 0 46px;
    background: var(--lt-surface);
    border: 1px solid var(--lt-border-strong);
    border-radius: var(--lt-radius);
    box-shadow: var(--lt-shadow-sm);
    color: var(--lt-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 54px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

#searchBar .search-query::placeholder {
    color: var(--lt-faint);
}

#searchBar .search-query:focus {
    border-color: var(--lt-brand);
    box-shadow: 0 0 0 4px var(--lt-brand-ring);
    outline: none;
}

/* The base theme renders this as a blue submit block pinned to the right. */
#searchBar button {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 54px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;
}

#searchBar button span:not(.sr-only) {
    display: none;
}

#searchBar button .icon-search,
#searchBar.sm button .icon-search {
    display: block;
    color: var(--lt-faint);
    font-size: 15px;
    text-shadow: none;
}

/* The stock rule is #searchBar button:hover { background: #4689C2 }, which is
   more specific than the resting style above, so the blue block comes back
   unless hover, focus and active are restated. */
#searchBar button:hover,
#searchBar button:focus,
#searchBar button:active {
    background: none;
    border: 0;
    box-shadow: none;
    text-shadow: none;
}

#searchBar button:hover .icon-search,
#searchBar button:focus .icon-search {
    color: var(--lt-brand);
}

/* Type-ahead results. The base theme gives this a fixed top offset, and 350px
   of width in the sidebar variant, both of which have to go. */
#serp-dd,
#serp-dd.sb {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: auto;
    z-index: 1040;
    padding: 6px;
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius);
    box-shadow: var(--lt-shadow-lg);
    text-align: left;
}

#serp-dd .result {
    margin: 0;
    padding: 0;
    list-style: none;
}

#serp-dd .result > li {
    background: none;
    border-radius: var(--lt-radius-sm);
}

#serp-dd .result > li > a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--lt-radius-sm);
    color: var(--lt-text);
    font-size: 14.5px;
    text-decoration: none;
}

#serp-dd .result a:hover,
#serp-dd .result > li.active,
#serp-dd .result > li.active > a {
    background: var(--lt-brand-tint);
    color: var(--lt-brand);
}

/* --------------------------------------------------------------------------
   5. Home page: collections and category cards
   -------------------------------------------------------------------------- */

.collection-category {
    margin: 0 0 52px;
}

.collection-category h2 {
    margin: 0 0 18px;
    padding: 0;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.collection-category h2,
.collection-category h2 a {
    color: var(--lt-faint);
    text-decoration: none;
}

.collection-category h2 a:hover {
    color: var(--lt-brand);
    border: 0;
}

.category-list,
.collection-category .category-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Replaces .category-list .category { width: 29%; display: inline-block;
   text-align: center } from the base theme, including its mobile override. */
.category-list .category,
.category-list.two-col .category {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 22px 22px 20px;
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius);
    box-shadow: var(--lt-shadow-sm);
    text-align: left;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.category-list .category:hover {
    background: var(--lt-surface);
    border-color: var(--lt-border-strong);
    box-shadow: var(--lt-shadow);
    transform: translateY(-2px);
}

.category-list .category h3,
.category-list h3 {
    margin: 0;
    color: var(--lt-ink);
    font-size: 16.5px;
    font-weight: 620;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.category-list .category:hover h3 {
    color: var(--lt-brand);
}

.category-list .category p,
.category-list p {
    margin: 0;
    color: var(--lt-muted);
    font-size: 14.5px;
    line-height: 1.55;
}

.category-list .category .article-count,
.category-list .category:hover .article-count {
    margin-top: auto;
    padding-top: 14px;
    color: var(--lt-faint);
    font-size: 12.5px;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. Content card
   -------------------------------------------------------------------------- */

.contentWrapper,
.contentWrapper.withRelated {
    min-height: 0;
    padding: 44px 48px 40px;
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius);
    box-shadow: var(--lt-shadow-sm);
    color: var(--lt-text);
}

.contentWrapper h1 {
    color: var(--lt-ink);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

/* The base theme sets these to #b3b3b3 with a -4px top margin. */
.contentWrapper p {
    margin-top: 0;
    color: var(--lt-text);
}

.contentWrapper a {
    color: var(--lt-brand);
}

/* Category page header */
#categoryHead {
    margin: 0 0 28px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--lt-border);
}

#categoryHead h1 {
    margin: 0;
}

#categoryHead p.descrip,
.contentWrapper p.descrip {
    margin: 8px 0 0;
    color: var(--lt-muted);
    font-size: 16px;
}

/* Stays in the base theme's top-right slot, which #categoryHead h1 already
   reserves 165px of right margin for. */
#categoryHead .sort {
    top: 0;
    right: 0;
}

#categoryHead #sortBy,
.sort select {
    width: 160px;
    height: 36px;
    margin: 0;
    padding: 0 10px;
    line-height: 36px;
    background: var(--lt-surface-2);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius-sm);
    box-shadow: none;
    color: var(--lt-muted);
    font-family: inherit;
    font-size: 13.5px;
}

.contentWrapper p.no-articles {
    color: var(--lt-muted);
}

/* --------------------------------------------------------------------------
   7. Article lists
   -------------------------------------------------------------------------- */

ul.articleList,
.articleList {
    margin: 0;
    padding: 0;
    font-size: 16px;
    list-style: none;
}

/* The base theme indents each row 25px and spaces them 1.4em apart. */
.articleList li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--lt-border);
}

.articleList li:last-child {
    border-bottom: 0;
}

.articleList a {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 14px 14px 14px 12px;
    border-radius: var(--lt-radius-sm);
    color: var(--lt-text);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.articleList a:hover {
    background: var(--lt-surface-2);
    color: var(--lt-brand);
}

.articleList a:hover span,
.related ul > li a:hover span {
    text-decoration: none;
}

.articleList .icon-article-doc:before,
.related .icon-article-doc:before {
    margin-right: 12px;
    color: var(--lt-faint);
    font-size: 14px;
}

.articleList a:hover .icon-article-doc:before {
    color: var(--lt-brand);
}

/* --------------------------------------------------------------------------
   8. Sidebar
   -------------------------------------------------------------------------- */

#sidebar {
    position: sticky;
    top: calc(var(--lt-nav-h) + 24px);
    max-height: calc(100vh - var(--lt-nav-h) - 48px);
    margin: 0;
    padding: 0 0 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#sidebar form {
    margin: 0 0 24px;
}

#sidebar #searchBar.sm .search-query,
#sidebar form .search-query {
    height: 40px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--lt-border-strong);
    border-radius: var(--lt-radius-sm);
    color: var(--lt-ink);
    font-size: 14px;
    line-height: 40px;
}

#sidebar form .search-query:focus,
#sidebar form .search-query:focus:invalid {
    border-color: var(--lt-brand);
    box-shadow: 0 0 0 3px var(--lt-brand-ring);
}

/* #sidebar form button in the base theme is more specific than #searchBar
   button, and pins the icon to the right of the field. */
#sidebar #searchBar.sm button {
    top: 0;
    left: 0;
    right: auto;
    width: 36px;
    height: 40px;
    line-height: 1;
}

#sidebar #searchBar.sm button .icon-search {
    font-size: 13px;
}

#sidebar h3 {
    margin: 0 0 10px;
    padding: 0 10px;
    color: var(--lt-faint);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#sidebar .nav-list {
    margin: 0;
    padding: 0;
}

#sidebar .nav-list li {
    margin: 0;
    line-height: normal;
}

#sidebar .nav-list a {
    display: block;
    padding: 8px 10px;
    margin: 1px 0;
    border-radius: var(--lt-radius-sm);
    color: var(--lt-muted);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.45;
    text-shadow: none;
    transition: background 0.15s, color 0.15s;
}

#sidebar .nav-list a:hover,
#sidebar .nav-list a:focus {
    background: var(--lt-surface-2);
    color: var(--lt-ink);
}

#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
    background: var(--lt-brand-tint);
    color: var(--lt-brand);
    font-weight: 600;
    text-shadow: none;
}

/* The base theme only reveals this arrow on the active item, where it reads as
   a stray glyph next to bold brand-coloured text. */
#sidebar .nav-list .active a .icon-arrow,
#sidebar .nav-list .active a:hover .icon-arrow,
#sidebar .nav-list .active a:focus .icon-arrow {
    display: none;
}

#sidebar .contactUs {
    margin: 22px 0 0;
    padding: 16px;
    background: var(--lt-surface-2);
    border-radius: var(--lt-radius);
    color: var(--lt-muted);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   9. Article body
   -------------------------------------------------------------------------- */

#fullArticle {
    color: var(--lt-text);
    font-size: 17px;
    line-height: 1.7;
}

#fullArticle .title {
    margin: 0 44px 0.6em 0;
    color: var(--lt-ink);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

#fullArticle .printArticle {
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--lt-radius-sm);
    transition: background 0.15s;
}

#fullArticle .printArticle:hover {
    background: var(--lt-surface-2);
}

#fullArticle .printArticle .icon-print,
#fullArticle .printArticle:hover .icon-print {
    color: var(--lt-faint);
    font-size: 14px;
}

#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5 {
    color: var(--lt-ink);
    font-weight: 650;
    letter-spacing: -0.018em;
    /* Clears the sticky navbar when jumping to an anchor. */
    scroll-margin-top: calc(var(--lt-nav-h) + 24px);
}

#fullArticle h2 {
    margin: 2em 0 0.65em;
    padding-top: 0.7em;
    border-top: 1px solid var(--lt-border);
    font-size: 24px;
    line-height: 1.3;
}

#fullArticle h3 {
    margin: 1.8em 0 0.55em;
    font-size: 19.5px;
    line-height: 1.35;
}

#fullArticle h4 {
    margin: 1.6em 0 0.5em;
    font-size: 17px;
    line-height: 1.4;
}

#fullArticle h5 {
    margin: 1.5em 0 0.4em;
    color: var(--lt-muted);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#fullArticle h2:first-child,
#fullArticle h3:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* The base theme sets all of these to 14px/#585858, and the generated colour
   block repeats the colour, so both have to be answered together. */
#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle dd,
#fullArticle table {
    color: var(--lt-text);
}

#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle dd {
    font-size: inherit;
}

#fullArticle p {
    margin: 0 0 1.15em;
    max-width: var(--lt-measure);
}

#fullArticle ul,
#fullArticle ol {
    margin: 0 0 1.15em;
    padding-left: 1.4em;
    max-width: var(--lt-measure);
}

#fullArticle li {
    margin: 0 0 0.45em;
}

#fullArticle li::marker {
    color: var(--lt-faint);
}

#fullArticle li > p {
    margin-bottom: 0.5em;
}

#fullArticle li > p:last-child {
    margin-bottom: 0;
}

#fullArticle strong {
    color: var(--lt-ink);
    font-weight: 620;
}

#fullArticle a,
#fullArticle strong a,
#fullArticle a strong {
    color: var(--lt-brand);
    text-decoration: underline;
    text-decoration-color: var(--lt-brand-ring);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    transition: color 0.15s, text-decoration-color 0.15s;
}

#fullArticle a:hover {
    color: var(--lt-brand-hover);
    text-decoration-color: currentColor;
}

#fullArticle hr {
    margin: 2.4em 0;
    border: 0;
    border-top: 1px solid var(--lt-border);
}

#fullArticle dl {
    margin: 0 0 1.15em;
}

/* The base theme renders these as grey pill badges floated left. */
#fullArticle dt {
    float: none;
    display: block;
    padding: 0;
    margin: 0 0 0.2em;
    background: none;
    border-radius: 0;
    color: var(--lt-ink);
    font-size: inherit;
    font-weight: 620;
    line-height: inherit;
    text-align: left;
    white-space: normal;
}

#fullArticle dd {
    padding: 0;
    margin: 0 0 0.8em;
}

/* Help Scout's own in-article index, when an author adds one */
#fullArticle .index-list {
    margin: 0 0 2em;
    padding: 18px 22px;
    background: var(--lt-surface-2);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius);
}

#fullArticle .index-list h4 {
    margin: 0 0 8px;
    color: var(--lt-muted);
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#fullArticle .index-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#fullArticle .index-list li {
    margin: 0 0 4px;
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   10. Article body: code

   migrate/html_cleaner.py wraps every real code sample in <pre><code> and
   leaves the highlight.js span classes in place, so the hljs-* rules below
   give the migrated samples syntax colouring for free.
   -------------------------------------------------------------------------- */

#fullArticle pre,
#fullArticle code {
    font-family: var(--lt-mono);
    font-variant-ligatures: none;
}

#fullArticle code {
    padding: 0.16em 0.4em;
    background: var(--lt-surface-2);
    border: 1px solid var(--lt-border);
    border-radius: 5px;
    color: var(--lt-ink);
    font-size: 0.875em;
    white-space: break-spaces;
    word-break: break-word;
}

#fullArticle pre {
    position: relative;
    margin: 0 0 1.6em;
    padding: 18px 20px;
    background: var(--lt-code-bg);
    border: 1px solid var(--lt-code-border);
    border-radius: var(--lt-radius);
    color: var(--lt-code-text);
    font-size: 14px;
    line-height: 1.65;
    overflow-x: auto;
    tab-size: 2;
    white-space: pre;
    word-break: normal;
}

#fullArticle pre code {
    display: block;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font-size: inherit;
    white-space: inherit;
}

#fullArticle pre > p {
    margin: 0;
    color: inherit;
}

#fullArticle .hljs-keyword,
#fullArticle .hljs-selector-tag,
#fullArticle .hljs-literal,
#fullArticle .hljs-tag {
    color: #c792ea;
}

#fullArticle .hljs-string,
#fullArticle .hljs-selector-attr,
#fullArticle .hljs-attr,
#fullArticle .hljs-attribute {
    color: #a5e075;
}

#fullArticle .hljs-comment,
#fullArticle .hljs-quote {
    color: #7c8394;
    font-style: italic;
}

#fullArticle .hljs-number,
#fullArticle .hljs-symbol {
    color: #f78c6c;
}

#fullArticle .hljs-built_in,
#fullArticle .hljs-title,
#fullArticle .hljs-function,
#fullArticle .hljs-class {
    color: #82aaff;
}

#fullArticle .hljs-variable,
#fullArticle .hljs-template-variable,
#fullArticle .hljs-selector-class,
#fullArticle .hljs-selector-id {
    color: #ffcb6b;
}

/* --------------------------------------------------------------------------
   11. Article body: callouts

   The migration turns Freshdesk's <pre class="fd-callout"> prose boxes into
   blockquotes, so blockquote carries most of the old notes and tips.
   -------------------------------------------------------------------------- */

#fullArticle blockquote {
    margin: 0 0 1.5em;
    padding: 16px 20px;
    max-width: var(--lt-measure);
    background: var(--lt-brand-tint);
    border: 0;
    border-left: 3px solid var(--lt-brand);
    border-radius: 0 var(--lt-radius) var(--lt-radius) 0;
    color: var(--lt-text);
    font-size: 16px;
    font-style: normal;
}

#fullArticle blockquote p {
    margin: 0 0 0.6em;
    max-width: none;
    font-size: inherit;
    font-style: normal;
    line-height: 1.6;
    color: inherit;
}

#fullArticle blockquote p:last-child {
    margin-bottom: 0;
}

#fullArticle .callout,
#fullArticle .callout-blue,
#fullArticle .callout-green,
#fullArticle .callout-red,
#fullArticle .callout-yellow,
#fullArticle .private-note {
    margin: 0 0 1.5em;
    padding: 16px 20px;
    max-width: var(--lt-measure);
    background: var(--lt-surface-2);
    border: 1px solid var(--lt-border);
    border-left: 3px solid var(--lt-border-strong);
    border-radius: 0 var(--lt-radius) var(--lt-radius) 0;
    color: var(--lt-text);
    font-size: 16px;
}

#fullArticle .callout p,
#fullArticle .callout-blue p,
#fullArticle .callout-green p,
#fullArticle .callout-red p,
#fullArticle .callout-yellow p,
#fullArticle .private-note p {
    max-width: none;
    color: inherit;
    font-size: inherit;
}

#fullArticle .callout > :last-child,
#fullArticle .callout-blue > :last-child,
#fullArticle .callout-green > :last-child,
#fullArticle .callout-red > :last-child,
#fullArticle .callout-yellow > :last-child,
#fullArticle .private-note > :last-child {
    margin-bottom: 0;
}

#fullArticle .callout h3,
#fullArticle .callout-blue h3,
#fullArticle .callout-green h3,
#fullArticle .callout-red h3,
#fullArticle .callout-yellow h3,
#fullArticle .private-note h3 {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    font-size: 15.5px;
    line-height: 1.4;
}

#fullArticle .callout-blue {
    background: #eef4ff;
    border-color: #d6e4ff;
    border-left-color: #3b82f6;
}

#fullArticle .callout-green {
    background: #edfaf3;
    border-color: #cdeedd;
    border-left-color: #10b981;
}

#fullArticle .callout-yellow {
    background: #fef8e9;
    border-color: #f7e7bf;
    border-left-color: #f59e0b;
}

#fullArticle .callout-red {
    background: #fef1f1;
    border-color: #f9d9d9;
    border-left-color: #ef4444;
}

#fullArticle .private-note {
    background: var(--lt-brand-tint);
    border-color: var(--lt-brand-ring);
    border-left-color: var(--lt-brand);
}

#fullArticle .dashed {
    border-style: dashed;
}

#fullArticle .badge {
    display: inline-block;
    padding: 2px 9px;
    border: 0;
    border-radius: var(--lt-radius-pill);
    background: var(--lt-surface-2);
    color: var(--lt-muted);
    font-size: 11.5px;
    font-weight: 620;
    line-height: 1.6;
    letter-spacing: 0.04em;
    text-shadow: none;
    vertical-align: baseline;
}

#fullArticle .badge.info {
    background: #eef4ff;
    color: #1d4ed8;
}

#fullArticle .badge.success {
    background: #edfaf3;
    color: #067a53;
}

#fullArticle .badge.warning {
    background: #fef8e9;
    color: #92600a;
}

#fullArticle .badge.error {
    background: #fef1f1;
    color: #b42222;
}

/* --------------------------------------------------------------------------
   12. Article body: media and tables
   -------------------------------------------------------------------------- */

#fullArticle img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.4em 0 1.8em;
    padding: 0;
    background: var(--lt-surface-2);
    border: 1px solid var(--lt-border);
    border-radius: 10px;
    box-shadow: var(--lt-shadow-sm);
}

#fullArticle img.noBdr {
    background: none;
    border: 0;
    box-shadow: none;
}

#fullArticle li > figure img,
#fullArticle li > p img {
    margin: 0.7em 0 1em;
}

#fullArticle figure {
    margin: 1.4em 0 1.8em;
}

#fullArticle figure img {
    margin: 0;
}

/* The base theme pulls captions up by 26px to sit over the image's old bottom
   margin, and sets them in italics. */
#fullArticle figcaption,
#fullArticle .image-caption {
    margin-top: 10px;
    color: var(--lt-muted);
    font-size: 14px;
    font-style: normal;
    line-height: 1.5;
    text-align: left;
}

#fullArticle .align-center {
    text-align: center;
}

#fullArticle .align-center img {
    margin-left: auto;
    margin-right: auto;
}

/* The cleaner strips the inline sizing style from migrated YouTube embeds and
   leaves bare width/height attributes, so the ratio is set here. */
#fullArticle iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 1.4em 0 1.8em;
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius);
    background: var(--lt-code-bg);
}

#fullArticle .video,
#fullArticle .video.widescreen {
    margin: 1.4em 0 1.8em;
}

#fullArticle .video iframe {
    margin: 0;
}

/* headers.html puts every table in one of these so a wide table scrolls on its
   own instead of stretching the page. */
#fullArticle .lt-scroll {
    margin: 0 0 1.8em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#fullArticle table {
    width: 100%;
    margin: 0;
    border: 1px solid var(--lt-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--lt-radius);
    font-size: 15.5px;
    overflow: hidden;
}

#fullArticle table thead,
#fullArticle table thead th {
    background: var(--lt-surface-2);
    color: var(--lt-ink);
    font-weight: 620;
    text-align: left;
}

#fullArticle table td,
#fullArticle table th {
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid var(--lt-border);
    line-height: 1.55;
    vertical-align: top;
}

#fullArticle table tbody tr:last-child td {
    border-bottom: 0;
}

#fullArticle table.table-striped tbody > tr:nth-child(odd) > td,
#fullArticle table.table-striped tbody > tr:nth-child(odd) > th {
    background: var(--lt-surface-2);
}

/* --------------------------------------------------------------------------
   13. Article footer: ratings, meta, related
   -------------------------------------------------------------------------- */

.articleRatings {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 0;
    margin: 44px 0 0;
    padding: 16px 20px;
    background: var(--lt-surface-2);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius);
    box-shadow: none;
}

/* The question is one flex item, so its "?" wraps with the sentence instead
   of dropping onto the row with the faces. */
.articleRatings-question {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--lt-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

/* The base theme fixes this at 65px, which two circles overflow. */
.articleRatings-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    width: auto;
    margin: 0;
}

.articleRatings .rateAction {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    background: var(--lt-surface);
    border: 1px solid var(--lt-border-strong);
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

/* Beats .rateAction:not([disabled=disabled]):hover, which scales the button
   to 1.3 and paints it gold. */
.articleRatings .rateAction:hover:not([disabled]),
.articleRatings .rateAction:focus:not([disabled]),
.articleRatings .rateAction.selected {
    border-color: var(--lt-brand);
    background: var(--lt-brand-tint);
    box-shadow: none;
    outline: none;
    transform: none;
}

.articleRatings .rateAction.selected {
    box-shadow: 0 0 0 2px var(--lt-brand);
}

.articleRatings .rateAction.selected::after {
    content: none;
}

/* The stock face is 24px and pinned to the top-left of the circle. */
.articleRatings .rating-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    fill: var(--lt-muted);
}

.articleRatings .rating-face svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: inherit;
}

.articleRatings .rateAction:hover:not([disabled]) .rating-face,
.articleRatings .rateAction:focus:not([disabled]) .rating-face,
.articleRatings .rateAction.selected .rating-face {
    fill: var(--lt-brand);
}

.articleRatings-feedback,
.articleRatings-failure {
    color: var(--lt-muted);
    font-size: 14.5px;
}

.articleRatings-feedback-tick svg {
    vertical-align: middle;
}

.articleFoot {
    margin: 22px 0 0;
    padding: 0;
    border: 0;
}

/* The base theme sets these in italic Georgia and floats the timestamp right. */
.articleFoot p,
.articleFoot time,
.articleFoot p.lu,
.articleFoot time.lu {
    display: block;
    float: none;
    margin: 0;
    color: var(--lt-faint);
    font-family: inherit;
    font-size: 13.5px;
    font-style: normal;
}

/* The base theme wraps this in its own bordered white box. */
.related {
    margin: 30px 0 0;
    padding: 26px 0 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--lt-border);
}

.related h3 {
    margin: 0 0 10px;
    padding: 0;
    color: var(--lt-faint);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.related ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.related ul > li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--lt-border);
}

.related ul > li:last-child {
    border-bottom: 0;
}

.related ul > li a {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 12px 12px 12px 10px;
    border-radius: var(--lt-radius-sm);
    color: var(--lt-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
}

.related ul > li a:hover {
    background: var(--lt-surface-2);
    color: var(--lt-brand);
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

footer,
footer.center {
    max-width: var(--lt-max);
    margin: 0 auto;
    padding: 28px 24px 48px;
}

footer p,
footer.center p {
    margin: 0;
    color: var(--lt-faint);
    font-size: 13.5px;
    text-align: center;
}

footer p a {
    color: var(--lt-muted);
    text-decoration: none;
}

footer p a:hover {
    color: var(--lt-brand);
    text-decoration: underline;
}

#noResults {
    max-width: var(--lt-max);
    margin: 0 auto;
    padding: 40px 24px;
    color: var(--lt-muted);
    text-align: center;
}

/* --------------------------------------------------------------------------
   15. Additions from headers.html

   .lt-breadcrumb, .lt-toc, .lt-anchor and .lt-copy are injected by the
   Headers snippet. Everything degrades to plain HTML if that JS is removed.
   -------------------------------------------------------------------------- */

.lt-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 18px;
    color: var(--lt-faint);
    font-size: 13.5px;
    line-height: 1.4;
}

.lt-breadcrumb a {
    color: var(--lt-muted);
    text-decoration: none;
}

.lt-breadcrumb a:hover {
    color: var(--lt-brand);
}

.lt-breadcrumb span[aria-current] {
    color: var(--lt-faint);
}

.lt-breadcrumb-sep {
    color: var(--lt-border-strong);
}

.lt-toc {
    margin: 0 0 24px;
    padding: 14px 16px;
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius);
}

.lt-toc > summary {
    color: var(--lt-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.lt-toc > summary::-webkit-details-marker {
    display: none;
}

.lt-toc > summary::after {
    content: "";
    float: right;
    width: 7px;
    height: 7px;
    margin: 6px 2px 0 0;
    border-right: 1.5px solid var(--lt-faint);
    border-bottom: 1.5px solid var(--lt-faint);
    transform: rotate(45deg);
    transition: transform 0.15s;
}

.lt-toc[open] > summary::after {
    transform: rotate(-135deg);
}

.lt-toc ol {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.lt-toc li {
    margin: 0;
}

.lt-toc a {
    display: block;
    padding: 5px 10px;
    border-left: 2px solid transparent;
    color: var(--lt-muted);
    font-size: 13.5px;
    line-height: 1.45;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.lt-toc a:hover {
    color: var(--lt-ink);
}

.lt-toc .lt-toc-h3 a {
    padding-left: 22px;
    font-size: 13px;
}

.lt-toc a[aria-current="true"] {
    border-left-color: var(--lt-brand);
    color: var(--lt-brand);
    font-weight: 550;
}

/* Heading anchors: revealed on hover, never affect layout. */
#fullArticle .lt-anchor {
    margin-left: 0.35em;
    color: var(--lt-faint);
    font-weight: 400;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s;
}

#fullArticle h2:hover .lt-anchor,
#fullArticle h3:hover .lt-anchor,
#fullArticle h4:hover .lt-anchor,
#fullArticle .lt-anchor:focus {
    opacity: 1;
}

#fullArticle .lt-anchor:hover {
    color: var(--lt-brand);
}

#fullArticle pre .lt-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--lt-radius-pill);
    color: #c9cedb;
    font-family: var(--lt-font);
    font-size: 11.5px;
    font-weight: 550;
    line-height: 1.5;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

#fullArticle pre:hover .lt-copy,
#fullArticle pre .lt-copy:focus {
    opacity: 1;
}

#fullArticle pre .lt-copy:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

#fullArticle pre .lt-copy[data-copied="true"] {
    opacity: 1;
    color: #a5e075;
}

#fullArticle a.lt-ext::after {
    content: "\2197";
    display: inline-block;
    margin-left: 0.1em;
    font-size: 0.78em;
    line-height: 1;
    text-decoration: none;
    opacity: 0.6;
}

/* --------------------------------------------------------------------------
   16. Responsive

   The table of contents rail only exists when there is room for it. Below
   that, headers.html collapses it to a card at the top of the page.
   -------------------------------------------------------------------------- */

@media (min-width: 1160px) {
    #contentArea > .row-fluid.lt-has-toc {
        grid-template-columns: var(--lt-rail) minmax(0, 1fr) var(--lt-toc);
    }

    .lt-toc {
        position: sticky;
        top: calc(var(--lt-nav-h) + 24px);
        max-height: calc(100vh - var(--lt-nav-h) - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
    }

    /* In the rail the disclosure is meaningless, so the summary becomes a
       section label instead of being hidden. */
    .lt-toc > summary {
        padding: 0 10px;
        color: var(--lt-faint);
        font-size: 11.5px;
        font-weight: 650;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: default;
        pointer-events: none;
    }

    .lt-toc > summary::after {
        display: none;
    }

    .lt-toc ol {
        margin-top: 8px;
    }
}

@media (max-width: 1159px) {
    .lt-toc {
        order: -2;
        grid-column: 1 / -1;
    }
}

@media (max-width: 979px) {
    #contentArea.container-fluid {
        padding: 24px 16px 72px;
    }

    #contentArea > .row-fluid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    /* Search and category nav read better after the article on a phone. */
    #contentArea > .row-fluid > #sidebar {
        position: static;
        order: 1;
        max-height: none;
        overflow: visible;
        padding-top: 4px;
        border-top: 1px solid var(--lt-border);
    }

    #sidebar form {
        margin-top: 22px;
    }

    .contentWrapper,
    .contentWrapper.withRelated {
        padding: 26px 20px 28px;
    }

    #docsSearch {
        padding: 44px 16px 4px;
    }

    #fullArticle {
        font-size: 16.5px;
    }

    #fullArticle .title {
        margin-right: 40px;
    }

    .category-list,
    .collection-category .category-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .category-list .category,
    .category-list.two-col .category {
        padding: 18px;
    }

    footer,
    footer.center {
        padding: 20px 16px 40px;
    }
}

/* --------------------------------------------------------------------------
   17. Dark mode

   headers.html sets data-theme on <html> before paint, from the visitor's
   saved choice or, failing that, their OS setting. Screenshots are
   deliberately not inverted; they keep a light surface so they stay legible.
   -------------------------------------------------------------------------- */

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --lt-brand: #8f8aff;
        --lt-brand-hover: #a8a4ff;
        --lt-brand-tint: #1e1d3a;
        --lt-brand-ring: rgba(143, 138, 255, 0.28);

        --lt-ink: #f2f3f7;
        --lt-text: #c2c7d4;
        --lt-muted: #9aa1b2;
        --lt-faint: #767e91;

        --lt-bg: #0c0d12;
        --lt-surface: #14161d;
        --lt-surface-2: #1b1e27;
        --lt-border: #262a36;
        --lt-border-strong: #343a49;

        --lt-code-bg: #0a0b0f;
        --lt-code-border: #22252f;

        --lt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --lt-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 26px -12px rgba(0, 0, 0, 0.7);
        --lt-shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
}

/* The logo is dark artwork on a transparent ground, so it disappears on a
   dark navbar. Inverting lightness and rotating the hue back keeps the
   brand violet while making the wordmark legible. */
:root[data-theme="dark"] #mainNav .brand img {
    filter: invert(1) hue-rotate(180deg);
}

:root[data-theme="dark"] #fullArticle img {
    background: #eceef4;
    border-color: var(--lt-border-strong);
}

:root[data-theme="dark"] #fullArticle .callout-blue {
    background: #131c2e;
    border-color: #1f3454;
    border-left-color: #60a5fa;
}

:root[data-theme="dark"] #fullArticle .callout-green {
    background: #0f2019;
    border-color: #1c3b2c;
    border-left-color: #34d399;
}

:root[data-theme="dark"] #fullArticle .callout-yellow {
    background: #241d0f;
    border-color: #453619;
    border-left-color: #fbbf24;
}

:root[data-theme="dark"] #fullArticle .callout-red {
    background: #251314;
    border-color: #4a2224;
    border-left-color: #f87171;
}

:root[data-theme="dark"] #fullArticle .badge.info {
    background: #131c2e;
    color: #93c5fd;
}

:root[data-theme="dark"] #fullArticle .badge.success {
    background: #0f2019;
    color: #6ee7b7;
}

:root[data-theme="dark"] #fullArticle .badge.warning {
    background: #241d0f;
    color: #fcd34d;
}

:root[data-theme="dark"] #fullArticle .badge.error {
    background: #251314;
    color: #fca5a5;
}

/* --------------------------------------------------------------------------
   18. Print

   The base theme already hides #mainNav, #sidebar, .printArticle and .sort.
   -------------------------------------------------------------------------- */

@media print {
    .lt-toc,
    .lt-breadcrumb,
    .lt-anchor,
    .lt-copy,
    .lt-theme,
    .articleRatings,
    .related,
    .printArticle,
    footer,
    footer.center {
        display: none;
    }

    body {
        background: #fff;
    }

    #contentArea > .row-fluid {
        display: block;
    }

    .contentWrapper,
    .contentWrapper.withRelated {
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    #fullArticle pre {
        background: #f4f5f9;
        border-color: #d4d8e4;
        color: #15161c;
        white-space: pre-wrap;
    }

    /* On paper a link is only useful as a URL. The second rule has to restate
       the first, because the arrow marker outranks a bare a::after. */
    #fullArticle a::after,
    #fullArticle a.lt-ext::after {
        content: " (" attr(href) ")";
        color: #676e7d;
        font-size: 0.85em;
        opacity: 1;
    }

    /* A same-page anchor is meaningless on paper. */
    #fullArticle a[href^="#"]::after {
        content: "";
    }
}
