/* Responsive styling for project-authored SVG images */

/* Keep embedded SVG content responsive without affecting theme UI icons.
   nvidia_sphinx_theme/pydata-sphinx-theme wraps page content in
   <article class="bd-article">, not the RTD theme's <div class="document">,
   and `.. raw:: html :file:` doesn't add a `.raw-html` wrapper -- so these
   selectors must target the article directly or SVGs with a fixed
   width/viewBox will overflow the (narrower, "On this page" sidebar-adjacent)
   content column. */
article.bd-article svg,
.document object[type="image/svg+xml"],
.document .raw-html svg,
.svg-figure svg {
    max-width: 100%;
    height: auto;
}

/* For raw HTML embedded SVGs */
.document .raw-html svg {
    width: 100%;
}

/* CSS cannot recolor <img>-embedded SVGs: invert lightness instead,
   hue-rotate(180deg) flips hue back so colors keep their tint */
html[data-theme="dark"] article.bd-article img[src$=".svg"] {
    filter: invert(0.88) hue-rotate(180deg);
    /* undo pydata's white img background (inverts into a gray card) */
    background: transparent;
}

/* Ensure container doesn't overflow */
article.bd-article,
.document .raw-html {
    max-width: 100%;
    overflow-x: auto;
}

/* Figure containers with captions */
.svg-figure {
    text-align: center;
    margin: 20px auto;
}

.svg-figure img {
    display: block;
    margin: 0 auto;
    height: auto;
}

.svg-figure svg {
    display: block;
    margin: 0 auto;
}

/* Different width classes for figures */
.svg-figure.width-70 img {
    width: 70%;
    max-width: 100%;
}

.svg-figure.width-80 img {
    width: 80%;
    max-width: 100%;
}

.svg-figure.width-90 img {
    width: 90%;
    max-width: 100%;
}

.svg-figure.width-100 img {
    width: 100%;
}

/* Figure captions */
.svg-caption {
    font-style: italic;
    margin-top: 10px;
    color: #555;
    font-size: 0.95em;
    line-height: 1.4;
}