/* ── Bootstrap palette — override pydata-sphinx-theme color variables ───── */

html,
html[data-theme="light"] {
    --pst-color-primary:               #0d6efd;
    --pst-color-primary-bg:            #cfe2ff;
    --pst-color-primary-highlight:     #0a58ca;
    --pst-color-link:                  #0d6efd;
    --pst-color-link-hover:            #0a58ca;
    --pst-color-link-higher-contrast:  #0a58ca;
    --pst-color-secondary:             #6c757d;
    --pst-color-secondary-bg:          #e2e3e5;
    --pst-color-secondary-highlight:   #5c636a;
    --pst-color-background:    #ffffff;
    --pst-color-on-background: #ffffff;
    --pst-color-surface:       #f8f9fa;
    --pst-color-on-surface:    #212529;
    --pst-color-text-base:     #212529;
    --pst-color-text-muted:    #6c757d;
    --pst-color-border:        #dee2e6;
    --pst-color-border-muted:  #e9ecef;
    --pst-color-inline-code:   #d63384;
    /* :target anchor-flash + search highlight — soft amber (highlighter
       convention), distinct from the blue link/primary palette */
    --pst-color-target:        #fff3cd;
}

html[data-theme="dark"] {
    --pst-color-primary:               #6ea8fe;
    --pst-color-primary-bg:            #031633;
    --pst-color-primary-highlight:     #8bb9fe;
    --pst-color-link:                  #6ea8fe;
    --pst-color-link-hover:            #8bb9fe;
    --pst-color-link-higher-contrast:  #8bb9fe;
    --pst-color-secondary:             #adb5bd;
    --pst-color-secondary-bg:          #343a40;
    --pst-color-secondary-highlight:   #bcc4cc;
    --pst-color-background:    #212529;
    --pst-color-on-background: #212529;
    --pst-color-surface:       #343a40;
    --pst-color-on-surface:    #dee2e6;
    --pst-color-text-base:     #dee2e6;
    --pst-color-text-muted:    #adb5bd;
    --pst-color-border:        #495057;
    --pst-color-border-muted:  #373b3e;
    --pst-color-inline-code:   #e685b5;
    /* :target anchor-flash + search highlight — soft amber (highlighter
       convention), distinct from the blue link/primary palette */
    --pst-color-target:        #6e5611;
    /* Admonition note/info — align with primary palette */
    --pst-color-info:          #6ea8fe;
    --pst-color-info-bg:       #0d306e;
}

/* Ensure all code blocks scroll horizontally rather than overflowing. */
.highlight pre {
    overflow-x: auto;
}

/* ensure there is sufficient vertical space around logo at full size */
.navbar-brand.logo {
    max-height: 48px !important;
}

/* Screenshot light/dark switching.
   Two-layer approach: (1) prefers-color-scheme as a CSS-only fallback that
   applies instantly on navigation before JS sets data-theme; (2) explicit
   data-theme overrides for when the user has toggled the theme switcher. */

.bs-screenshot-dark,
.bs-screenshot-light {
    display: block;
    margin: 0.75rem 0 !important;
}

/* Default: show light, hide dark. */
.bs-screenshot-dark  { display: none  !important; }
.bs-screenshot-light { display: block !important; }

/* System dark preference — CSS-only, fires before JS runs. */
@media (prefers-color-scheme: dark) {
    .bs-screenshot-dark  { display: block !important; }
    .bs-screenshot-light { display: none  !important; }
}

/* Explicit theme selection overrides the system preference. */
html[data-theme="light"] .bs-screenshot-dark  { display: none  !important; }
html[data-theme="light"] .bs-screenshot-light { display: block !important; }
html[data-theme="dark"]  .bs-screenshot-dark  { display: block !important; }
html[data-theme="dark"]  .bs-screenshot-light { display: none  !important; }

/* Override pydata's dark-mode content-image rule
   (`.bd-content img:not(.only-dark,.dark-light)`), which paints a white
   background-color and a border-radius. The white plate flashes at the corners
   during image decode on first load; our screenshots are already theme-matched,
   so strip it (and the theme's radius/brightness filter). Matching the theme's
   specificity with `.bd-content img.<class>`; our CSS loads later, so it wins. */
html[data-theme="dark"] .bd-content img.bs-screenshot-dark,
html[data-theme="dark"] .bd-content img.bs-screenshot-light {
    background-color: transparent !important;
    border-radius: 0 !important;
    filter: none !important;
}
html[data-theme="dark"] .bd-content img.bs-window-screenshot {
    border-radius: 6px !important;   /* windows keep their rounded corners */
}

/* Dialog screenshots — no additional effects; the captured window chrome speaks for itself. */
.bs-dialog-screenshot {}

/* Hidden autosummary block used only to generate stubs + drive an
   alphabetical sidebar (see api-reference/widgets.rst). */
.bs-hidden-summary {
    display: none !important;
}

/* Full-window screenshots (App / Window / AppShell). The native OS border is
   cropped during capture, so draw a clean border in its place. Use the theme's
   own border token so the frame follows light/dark automatically; the 6px
   radius from the base rule rounds it off. */
.bs-window-screenshot {
    border-radius: 6px;
    border: 1px solid var(--pst-color-border);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
}
html[data-theme="dark"] .bs-window-screenshot {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* Demo videos (content-only captures) — plain, no border or shadow. Light/dark
   variants follow the theme exactly as the screenshot classes do. */
.bs-video-dark,
.bs-video-light {
    display: block;
    margin: 0.75rem auto;
    max-width: 100%;
    height: auto;
}
.bs-video-dark  { display: none  !important; }
.bs-video-light { display: block !important; }
@media (prefers-color-scheme: dark) {
    .bs-video-dark  { display: block !important; }
    .bs-video-light { display: none  !important; }
}
html[data-theme="light"] .bs-video-dark  { display: none  !important; }
html[data-theme="light"] .bs-video-light { display: block !important; }
html[data-theme="dark"]  .bs-video-dark  { display: block !important; }
html[data-theme="dark"]  .bs-video-light { display: none  !important; }

/* Promo home page: a prominent lead line and a row of hero call-to-action
   buttons (the sphinx-design button directives are block-level, so wrap them in
   a flex container to sit side by side). */
.bs-lead {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin: 1.25rem 0 1.75rem;
}
.hero-ctas p { margin: 0; }