/* Blog-like article presentation plus compatibility for existing MediaWiki markup.
   Layout, controls, colors and spacing utilities come from the shared v8 Bootstrap. */
.sb-docs-article h1 { font-size: 2rem; line-height: 1.2; }
.sb-docs-page .sb-nav-link { white-space: normal; overflow-wrap: anywhere; }
.sb-docs-page .sb-nav-submenu { margin-left: .5rem; }
.sb-docs-toggle { display: flex; }
.sb-docs-content { display: flow-root; line-height: 1.65; overflow-wrap: anywhere; }
.sb-docs-content h2, .sb-docs-content h3, .sb-docs-content h4 { margin: 1.75em 0 .75em; }
.sb-docs-content p, .sb-docs-content ul, .sb-docs-content ol { margin-bottom: 1em; font-weight: 300; }
.sb-docs-content img { max-width: 100%; height: auto; }
/* Reserve both margins when a screenshot fills the available mobile width. */
.sb-docs-content img.thumbborder { margin: 1em; max-width: calc(100% - 2em); }
.sb-docs-content iframe, .sb-docs-content object { max-width: 100%; }
/* HttpImage articles use floatRight/floatLeft instead of MediaWiki thumbnail classes. */
.sb-docs-content .imageRight, .sb-docs-content .tright, .sb-docs-content .floatRight {
    float: right; margin: 0 0 1rem 1rem;
}
.sb-docs-content .imageLeft, .sb-docs-content .tleft, .sb-docs-content .floatLeft {
    float: left; margin: 0 1rem 1rem 0;
}
.sb-docs-content .thumbcaption { font-size: .875rem; color: var(--bs-secondary-color); }
.sb-docs-content .imageRight, .sb-docs-content .imageLeft { max-width: 40%; }
.sb-docs-index h3 { font-weight: 600; }
.sb-docs-index .col-12 > div > p:last-child { margin-bottom: 0; }
/* CSS-only adapter for the shared wiki add-on template; its stored markup stays unchanged. */
.sb-docs-content .bot-addon {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--sb-radius-card, 12px);
    background: var(--bs-border-color);
    font-size: .875rem;
}
.sb-docs-content .bot-addon > p:first-child {
    grid-column: 1 / -1;
    margin: 0;
    padding: .75rem 1rem;
    background: var(--bs-secondary-bg);
    font-weight: 600;
    color: var(--bs-emphasis-color);
}
.sb-docs-content .bot-addon > .block {
    min-width: 0;
    padding: 1rem;
    background: var(--sb-surface, #fff);
}
.sb-docs-content .bot-addon .title { margin-bottom: .5rem; font-weight: 600; }
.sb-docs-content .bot-addon ul { margin: 0; padding-left: 1.1rem; }
.sb-docs-content .bot-addon li + li { margin-top: .25rem; }
/* The obsolete menu screenshot is decorative. Keep the actual add-on name as a native-looking menu item. */
.sb-docs-content .bot-addon .menu-demo > p:has(> img[src$="/Docs-addon-menu.png"]) { display: none; }
.sb-docs-content .bot-addon .menu-demo .name {
    padding: .5rem .75rem;
    border-left: 3px solid var(--bs-primary);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 500;
}
.sb-docs-content pre, .sb-docs-content #toc {
    padding: 1rem; overflow: auto; background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
}
.sb-docs-content pre { white-space: pre-wrap; }
.sb-docs-content #toc h2 { margin-top: 0; font-size: 1rem; }
.sb-docs-content #toc ul { list-style: none; padding-left: 1rem; }
.sb-docs-content .helpIndexTable { width: 100%; border-collapse: separate; border-spacing: 4px; }
.sb-docs-content .helpIndexTable td { padding: 1rem; vertical-align: top; background: var(--bs-tertiary-bg); }
.sb-docs-content .helpIndexTable th { width: 32px; vertical-align: top; }
.sb-docs-content .helpIndexTable .colSpanner { font-weight: 500; color: var(--bs-primary); }
.sb-docs-content .helpIndexTable p:last-child { margin-bottom: 0; }
.sb-docs-content .printfooter { display: none; }
.sb-docs-content .visualClear { clear: both; }
/* Follow the blog's public-layout breakpoint, not the account sidebar breakpoint. */
@media (min-width: 651px) {
    .sb-docs-toggle { display: none; }
    #docs-navigation.collapse { display: block; }
}
@media (max-width: 650px) {
    /* Keep introductory text readable rather than squeezed beside an illustration. */
    .sb-docs-content img.floatRight, .sb-docs-content img.floatLeft {
        float: none; display: block; margin: 0 0 1rem;
    }
    .sb-docs-content .helpIndexTable, .sb-docs-content .helpIndexTable tbody { display: block; }
    .sb-docs-content .helpIndexTable tr { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
    .sb-docs-content .helpIndexTable td { width: 100%; min-width: 0; }
    .sb-docs-content .helpIndexTable th { width: 100%; text-align: left; }
    .sb-docs-content .helpIndexTable th img { max-height: 96px; }
}
@media print {
    .sb-public-header, .sb-public-sidebar, .sb-docs-page > footer { display: none; }
    .sb-public-layout { display: block; }
    .sb-docs-article { border: 0; }
}