.searchformwrapper .search input[type='submit'] {
	/* Hide the text. */
    text-indent: -9999px;
    background: transparent url(search-button.jpg) no-repeat center;
    background-size: 20px;
    color: transparent;
    cursor: pointer;
}

@media screen and (max-width: 870px) {
    .custom-header {
        width:  100%;
    }
}

div.sphinxsidebar hr {
    width: 100%;
}

.language-switcher {
    text-align: center;
}

div.footer {
    text-align: center;
}

/* PDF download box — spacing from the search input above it. */
div.pdfbox {
    margin-top: 1.5em;
}

/* PDF box: the download link and the "open in browser" icon on one line with a
   clear gap between them (flex gap). --ps-blue/--ps-red come from brand.css. */
.pdfbox-item {
    display: flex;
    align-items: center;
    gap: 0.7em;
}
.pdfbox-download {
    overflow-wrap: anywhere;     /* a long file name wraps instead of stretching the line */
}
.pdfbox-view {
    flex: 0 0 auto;              /* the icon never shrinks */
    display: inline-flex;
    align-items: center;
    line-height: 0;
    color: var(--ps-blue, #2a21db);
    border-bottom: none;        /* no underline, unlike the textual links */
}
.pdfbox-view:hover,
.pdfbox-view:focus {
    color: var(--ps-red, #ff392b);
    outline: none;
}
.pdfbox-view-icon {
    display: block;
}

/* Diagram lightbox — clicking an SVG figure opens it full-screen. */
img.diagram-zoomable {
    cursor: zoom-in;
    transition: opacity 0.15s ease;
}
img.diagram-zoomable:hover,
img.diagram-zoomable:focus {
    opacity: 0.82;
    outline: none;
}
.diagram-lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em;
    box-sizing: border-box;
    cursor: zoom-out;
    animation: diagram-lightbox-fade 0.15s ease;
}
@keyframes diagram-lightbox-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.diagram-lightbox-stage {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diagram-lightbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    background: #fff;
    border-radius: 4px;
    padding: 1em;
    box-sizing: border-box;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    cursor: default;
}
/* UI screenshots (`.. figure:: … :figclass: screenshot`). Captured at 1280x720 and shown
   scaled to the text column; a thin frame separates the dark interface from the page.
   `img.screenshot` also matches a figure written with `:class:`, which docutils puts on
   the <img> instead of the <figure>. */
figure.screenshot img,
.figure.screenshot img,
img.screenshot {
    border: 1px solid #d6dae2;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}
/* In the lightbox the same picture is shown at its captured resolution — no white
   plate and no padding, so nothing reads as part of the interface. */
.diagram-lightbox--shot img {
    background: transparent;
    padding: 0;
    border-radius: 4px;
}

.diagram-lightbox-close {
    position: absolute;
    top: 1em;
    right: 1em;
    width: 2.5em;
    height: 2.5em;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.8em;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diagram-lightbox-close:hover,
.diagram-lightbox-close:focus {
    background: rgba(255, 255, 255, 0.32);
    outline: none;
}


/* ==========================================================================
   Sidebar: floating (sticky), collapsing to a rail, top panel on a phone.
   Button markup — _templates/navtoggle.html, state — static/navtoggle.js.
   The theme loads custom.css last, so these rules beat alabaster.css and
   brand.css without !important.
   ========================================================================== */

/* Containing block for the absolutely positioned button. At both breakpoints
   below the sidebar is positioned anyway (sticky/fixed) — relative covers
   printing and the states in between. */
div.sphinxsidebar {
    position: relative;
}

/* The theme sets no global border-box, so a max-height on the wrapper would be
   measured on its CONTENT box and the padding would be added on top of it: with
   42px above and 18px below the panel ended up 60px taller than the cap and its
   bottom — the search box and the PDF box — sat outside the window. */
div.sphinxsidebarwrapper {
    box-sizing: border-box;
}

:root {
    /* How far below the top of the window the sidebar starts before the sticky
       offset takes over: body's 4px brand rule (brand.css) plus the 30px top
       margin of div.document (alabaster). The height cap has to allow for it,
       otherwise the bottom of the menu hangs below the fold at the top of the
       page — where every reader starts. */
    --ps-sidebar-inset: 34px;
}

/* The button only shows up once navtoggle.js has run. */
.ps-nav-toggle {
    display: none;
}
html.ps-nav-js .ps-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    box-sizing: border-box;   /* the theme sets no global border-box */
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(42, 33, 219, 0.3);
    border-radius: 4px;
    background: #fff;
    color: var(--ps-blue, #2a21db);
    line-height: 0;
    cursor: pointer;
}
.ps-nav-toggle:hover,
.ps-nav-toggle:focus {
    color: var(--ps-red, #ff392b);
    border-color: var(--ps-red, #ff392b);
    outline: none;
}
/* A border colour change alone is too weak for keyboard navigation — add a focus
   ring. Older browsers do not know :focus-visible and simply skip the rule. */
.ps-nav-toggle:focus-visible {
    box-shadow: 0 0 0 2px rgba(42, 33, 219, 0.35);
}
/* Both icons sit in the markup and are switched by a class on <html>, so the JS
   never touches the button's DOM. */
.ps-nav-toggle .ps-icon-close { display: block; }
.ps-nav-toggle .ps-icon-open  { display: none; }
html.ps-nav-collapsed .ps-nav-toggle .ps-icon-close { display: none; }
html.ps-nav-collapsed .ps-nav-toggle .ps-icon-open  { display: block; }

/* The v1 documentation link — set apart from the list of external links: it is a
   different version of this product, not a neighbouring site. */
.ps-v1-link {
    margin-top: 0.6em;
}

/* --- Two-level navigation tree -------------------------------------------
   The sidebar toctree is rooted at the master doc, so its single first-level
   entry is the manual's own title — it duplicates the logo right above it and
   costs every real entry one level of indentation. Hide that entry and promote
   its children, and the menu reads as exactly two levels: sections and their
   subpages. Doing it here rather than in the RST keeps the PDF untouched: moving
   the sections up in index.rst would turn one LaTeX chapter into fourteen.

   `a.reference.internal` is what makes this safe — the other lists that are also
   direct children of the wrapper (external links, the v1 link) reuse the
   toctree-l1 class but their links carry no such class. */
div.sphinxsidebarwrapper > ul > li.toctree-l1 > a.reference.internal {
    display: none;
}
div.sphinxsidebarwrapper > ul > li.toctree-l1 > ul {
    margin-left: 0;      /* basic.css indents every nested ul by 20px */
    list-style: none;    /* …and gives it square bullets; top level has neither */
}

/* Two levels need to be told apart at a glance: sections in Roboto Medium,
   subpages in the regular weight (alabaster already sizes them 110% / 100%). */
div.sphinxsidebar li.toctree-l2 > a {
    font-weight: 500;
}

/* With the tree fully expanded the collapsed branches no longer say where the
   reader is, so the current page has to be marked explicitly. Sphinx puts
   `current` on the link of the page itself and on every ancestor's <li>. */
div.sphinxsidebar a.current {
    font-weight: 700;
    color: var(--ps-blue-dark, #1d16a0);
}

/* "Quick search" and "Download" are utility boxes, not parts of the manual, but
   alabaster gives every sidebar h3 the same 24px — so they shouted louder than
   the navigation itself. 16px keeps them above the 14px body of the sidebar and
   well below the "Navigation" heading. */
div.sphinxsidebar #searchbox h3,
div.sphinxsidebar div.pdfbox h3 {
    font-size: 16px;
}

/* --- Wide screen: the menu sticks to the top of the window ---------------- */
@media screen and (min-width: 876px) {
    /* sticky rather than fixed: the element stays in the float flow, so
       alabaster's margin-left:-100% trick keeps working, and at the end of the
       page the menu scrolls away with the document instead of covering the
       footer. */
    div.sphinxsidebar {
        position: sticky;
        top: 0;
        max-height: calc(100vh - var(--ps-sidebar-inset));
        transition: width 0.18s ease;
    }
    /* The scroll lives on the WRAPPER, not on the sidebar itself: the table of
       contents of "Web interface" (52 entries) is taller than any screen, but the
       button is positioned against the sidebar and has to stay put while the menu
       scrolls. */
    div.sphinxsidebarwrapper {
        max-height: calc(100vh - var(--ps-sidebar-inset));
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    /* The button gets a strip of its own ABOVE the logo. There is no free corner:
       logo.png is 223x40, wider than the column (200px of content), and reaches
       both edges. The button sits 8px from the top and is 26px tall, i.e. it takes
       8-34px; the logo therefore has to start at 42px. The theme's negative margin
       on p.logo (-10px, pulling the logo up to the top edge) is exactly what drove
       it under the button — drop it. */
    html.ps-nav-js div.sphinxsidebarwrapper {
        padding-top: 42px;
    }
    html.ps-nav-js div.sphinxsidebarwrapper p.logo {
        margin-top: 0;
    }
    div.bodywrapper {
        transition: margin-left 0.18s ease;
    }

    /* Collapsed state — a rail just wide enough for the button. */
    html.ps-nav-collapsed div.sphinxsidebar {
        width: 34px;
    }
    html.ps-nav-collapsed div.sphinxsidebarwrapper {
        padding: 0;
        overflow: visible;   /* nothing to scroll, and it will not clip the focus ring */
    }
    /* !important is required here: searchbox.html from the basic theme runs
       `getElementById('searchbox').style.display = "block"` right after the markup,
       and an inline style outranks any selector — without !important the search box
       would stick out of the collapsed rail. */
    html.ps-nav-collapsed div.sphinxsidebarwrapper > *:not(.ps-nav-toggle) {
        display: none !important;
    }
    html.ps-nav-collapsed .ps-nav-toggle {
        right: auto;
        left: 4px;
    }
    html.ps-nav-collapsed div.bodywrapper {
        margin-left: 34px;
    }
}

/* --- Narrow screen: a top panel instead of a band below the content ------- */
@media screen and (max-width: 875px) {
    /* Out of the box alabaster puts the sidebar BELOW the content
       (margin: 50px -30px -20px -30px), so on a phone the navigation ends up in the
       basement of a long page and you can only get to it by scrolling all of it.
       Pin it to the top of the window instead: collapsed it is a thin branded strip
       with the toggle (brand.css supplies the gradient), expanded it is a
       scrollable panel over the text. */
    div.sphinxsidebar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        margin: 0;
        padding: 0;
        z-index: 60;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    }
    div.sphinxsidebarwrapper {
        max-height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 10px 20px;
    }
    html.ps-nav-js div.sphinxsidebarwrapper {
        padding-top: 44px;   /* the panel content starts below the strip with the button */
    }
    /* Room for the strip: alabaster keeps body { padding: 20px 30px } here. */
    body {
        padding-top: 56px;
    }
    html.ps-nav-collapsed div.sphinxsidebar {
        height: 44px;
        overflow: hidden;
    }
    html.ps-nav-collapsed div.sphinxsidebarwrapper {
        padding: 0;
    }
    html.ps-nav-collapsed div.sphinxsidebarwrapper > *:not(.ps-nav-toggle) {
        display: none !important;   /* see the note on #searchbox's inline style above */
    }
    html.ps-nav-js .ps-nav-toggle {
        top: 9px;
        right: 14px;
        left: auto;
        background: transparent;
        border-color: rgba(255, 255, 255, 0.75);
        color: #fff;
    }
    .ps-nav-toggle:hover,
    .ps-nav-toggle:focus {
        color: #fff;
        border-color: #fff;
    }
}

@media (prefers-reduced-motion: reduce) {
    div.sphinxsidebar,
    div.bodywrapper {
        transition: none;
    }
}

/* In print the menu comes out whole and in normal flow (the media queries above
   are `screen`-scoped), and a control has no business on paper. !important is
   needed because of specificity: `html.ps-nav-js .ps-nav-toggle { display: flex }`
   would otherwise beat this rule regardless of order. */
@media print {
    .ps-nav-toggle {
        display: none !important;
    }
}