/*
 * SVG diagrams are authored as printable material: most of them contain
 * black construction lines on a transparent or white canvas. Keep that
 * canvas light in every site theme. Recolouring the whole image for dark
 * mode made thin black paths and glyphs disappear in several real diagrams
 * and also shifted semantic red/blue/green accents.
 */

.adaptive-vector-surface {
    isolation: isolate;
    border-color: rgba(93, 54, 44, .14) !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(197, 44, 18, .07), transparent 38%),
        linear-gradient(145deg, #fffdfc, #f7f2ef) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .86),
        0 14px 36px rgba(66, 35, 27, .07);
}

.adaptive-vector-image {
    box-sizing: border-box;
    padding: clamp(8px, 1.35vw, 18px);
    background: transparent !important;
    transition:
        filter .22s ease,
        opacity .22s ease;
}

/* The solution thumbnail is a button inside the themed figure. Its legacy
   white background must not cover the adaptive canvas. */
.adaptive-vector-surface .solution-display__image-button {
    background: transparent !important;
}

/* Some authoring tools export a diagram prepared for a dark canvas. Convert
   only those sources so that they remain readable on the stable light canvas. */
.adaptive-vector-source-dark {
    filter:
        invert(.96)
        hue-rotate(180deg)
        saturate(.94)
        brightness(1.03)
        contrast(1.05)
        drop-shadow(0 0 .3px rgba(35, 20, 17, .18));
}

.solution-image-viewer__panel.adaptive-vector-surface,
.image-lightbox.adaptive-vector-surface {
    background:
        radial-gradient(circle at 50% 42%, rgba(196, 44, 18, .08), transparent 42%),
        #f8f3f1 !important;
}

.solution-image-viewer__panel.adaptive-vector-surface .adaptive-vector-image,
.image-lightbox.adaptive-vector-surface .adaptive-vector-image {
    max-width: min(1180px, 96vw);
    max-height: min(900px, 92vh);
}

@media (prefers-reduced-motion: reduce) {
    .adaptive-vector-image {
        transition: none;
    }
}

@media (max-width: 560px) {
    .adaptive-vector-image {
        padding: 8px;
    }
}