/* To have blue background of width of the block (instead of width of content) */
dl.class>dt:first-of-type {
    display: block !important;
}

/* Scanpy-style parameter lists: no bullets, name:type header + indented desc */
dl.field-list dd > ul.simple {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
dl.field-list dd > ul.simple > li {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 0.8em;
}
p.param-header {
    margin-bottom: 0.1em;
}
/* param name: orange, monospace */
p.param-header strong {
    color: var(--code-orange);
    font-family: var(--pst-font-family-monospace);
}
/* param type: purple, monospace, non-italic */
p.param-header em {
    color: var(--code-purple);
    font-family: var(--pst-font-family-monospace);
    font-style: normal;
}
p.param-header a[href*="typedefs.html"] em {
    color: var(--code-purple);
}
/* Inline code: single backticks in docstrings render as `cite`, double
   backticks / Markdown backticks as `code.literal`/`code.docutils`. Style
   them all as a monospace chip with a subtle background, consistently
   across the API docs and the tutorials. */
.bd-article cite,
.bd-article code.docutils,
.bd-article code.literal {
    font-family: var(--pst-font-family-monospace) !important;
    font-style: normal;
    font-weight: 400;
    font-size: 0.85em;
    padding: 0.12em 0.36em;
    border-radius: 0.25rem;
    color: var(--code-cyan) !important;
}
html[data-theme="light"] .bd-article cite,
html[data-theme="light"] .bd-article code.docutils,
html[data-theme="light"] .bd-article code.literal {
    background-color: #efe7e4;
}
html[data-theme="dark"] .bd-article cite,
html[data-theme="dark"] .bd-article code.docutils,
html[data-theme="dark"] .bd-article code.literal {
    background-color: #403838;
}
/* Cross-referenced type aliases (linked to the typedefs page): purple. */
.bd-article a[href*="typedefs.html"] em,
.bd-article a[href*="typedefs.html"] .pre {
    color: var(--code-purple) !important;
    font-style: normal;
}
/* typedef links: underline on hover everywhere they appear */
.bd-article a[href*="typedefs.html"]:hover em,
.bd-article a[href*="typedefs.html"]:hover .pre {
    text-decoration: underline;
}
p.param-desc {
    margin-left: 2em;
    margin-top: 0;
}

/* Autodoc method/function/class body: keep the leading description indented
   under the signature, but reset the Parameters / Returns / Notes / Examples
   that follow back to the signature's left edge. The theme indents the whole
   <dd>, which otherwise pushes those sections in along with the description. */
html[data-theme] dl.py > dd {
    margin-left: 0;
}
html[data-theme] dl.py > dd > p {
    margin-left: 2rem;
}
html[data-theme] dl.py > dd > p.rubric,
html[data-theme] dl.py > dd > p.rubric ~ p,
html[data-theme] dl.py > dd > dl.field-list ~ p {
    margin-left: 0;
}

/* Display long method names over multiple lines in navbar. */
.bd-toc-item {
    overflow-wrap: break-word;
}

/* Body font is left at the theme default; only the monospace stack is
   overridden so code blocks/signatures match the VS Code default fonts. */
:root {
    --pst-font-family-monospace: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Liberation Mono', 'Courier New', monospace;
}

/* Monokai Pro Ristretto Filter palette — light & dark variants */
html[data-theme="light"] {
    --pst-color-on-background: #faf4f2;
    --pst-color-background: #fefaf9;
    --pst-color-surface: #faf4f2;
    --pst-color-on-surface: #29242a;
    --pst-color-text-base: #29242a;
    --pst-gradient-sidebar-left: #ede7e5;
    --pst-gradient-sidebar-right: #ede7e5;
    --pst-color-border: #d7cfcd;
    --pst-color-primary: #e16032;
    --pst-color-accent: #e16032;
    --pst-color-secondary: #c9542a;
    --pst-color-link: var(--pst-color-primary);
    --pst-color-link-hover: var(--pst-color-secondary);

    --code-red:    #e14775;
    --code-orange: #e16032;
    --code-yellow: #cc7a0a;
    --code-green:  #269d69;
    --code-purple: #7058be;
    --code-cyan:   #1c8ca8;
    --code-comment:#a59c9b;
    --code-text:   #5b5353;
}

html[data-theme="dark"] {
    --pst-color-on-background: #403838;
    --pst-color-background: #211c1c;
    --pst-color-surface: #2c2525;
    --pst-color-on-surface: #fefaf9;
    --pst-color-text-base: #fefaf9;
    --pst-gradient-sidebar-left: #2c2525;
    --pst-gradient-sidebar-right: #2c2525;
    --pst-color-sidebar-nav: #2c2525;
    --pst-color-border: #5a4f4f;
    --pst-color-primary: #f38d70;
    --pst-color-accent: #f38d70;
    --pst-color-secondary: #f7a48d;
    --pst-color-link: var(--pst-color-primary);
    --pst-color-link-hover: var(--pst-color-secondary);

    --code-red:    #f06883;
    --code-orange: #f38d70;
    --code-yellow: #f9cc6c;
    --code-green:  #adda78;
    --code-purple: #9ca9eb;
    --code-cyan:   #85dacc;
    --code-comment:#72696a;
    --code-text:   #fefaf9;
}

/* The sidebar's own background is transparent on desktop only — the gradient
   panel below paints both the sidebar area and the extension to the viewport
   edge so they're guaranteed to match. On mobile, the sidebar becomes a modal
   and needs its own opaque background. */
@media (min-width: 960px) {
    div.bd-sidebar-primary {
        background-image: none;
        background-color: transparent;
    }
}

/* Paint a single gradient panel that covers the sidebar area -- desktop only.
   On narrow screens pydata converts the sidebar into a drawer/modal, so skip
   the panel and let pydata's defaults take over. */
@media (min-width: 960px) {
    .bd-container__inner {
        position: relative;
    }
    .bd-container__inner::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -100vw;
        /* Match the narrowed primary-sidebar width (15rem) so the gradient
           ends exactly at the sidebar's right edge. */
        width: calc(100vw + 15rem);
        background-image: linear-gradient(
            90deg,
            var(--pst-gradient-sidebar-left) 0%,
            var(--pst-gradient-sidebar-left) 100vw,
            var(--pst-gradient-sidebar-right) 100%
        );
        pointer-events: none;
        z-index: 0;
    }
    /* On pages where the primary sidebar is hidden (landing page etc.,
       marked with .hide-on-wide), drop the panel. */
    .bd-container__inner:has(.bd-sidebar-primary.hide-on-wide)::before {
        display: none;
    }
    /* Keep sidebar contents above the gradient panel */
    div.bd-sidebar-primary {
        position: sticky;
        z-index: 1;
    }
}

/* Note admonition highlight — orange */
html[data-theme="light"] .admonition.note {
    border-color: #e16032;
}
html[data-theme="light"] .admonition.note > .admonition-title {
    background-color: rgba(225, 96, 50, 0.15);
}
html[data-theme="light"] .admonition.note > .admonition-title::after {
    color: #e16032 !important;
}
html[data-theme="dark"] .admonition.note {
    border-color: #f38d70;
}
html[data-theme="dark"] .admonition.note > .admonition-title {
    background-color: rgba(243, 141, 112, 0.15);
}
html[data-theme="dark"] .admonition.note > .admonition-title::after {
    color: #f38d70 !important;
}

/* Tip admonition highlight — orange */
html[data-theme="light"] .admonition.tip {
    border-color: #e16032;
}
html[data-theme="light"] .admonition.tip > .admonition-title {
    background-color: rgba(225, 96, 50, 0.15);
}
html[data-theme="light"] .admonition.tip > .admonition-title::after {
    color: #e16032 !important;
}
html[data-theme="dark"] .admonition.tip {
    border-color: #f38d70;
}
html[data-theme="dark"] .admonition.tip > .admonition-title {
    background-color: rgba(243, 141, 112, 0.15);
}
html[data-theme="dark"] .admonition.tip > .admonition-title::after {
    color: #f38d70 !important;
}

/* sphinx-design dropdowns: recolor the default blue-grey accent to theme orange */
details.sd-dropdown summary.sd-card-header,
details.sd-dropdown summary.sd-card-header + div.sd-summary-content {
    --pst-sd-dropdown-color: var(--pst-color-primary);
}

/* API links in code blocks — subtle underline on hover */
a.api-link:hover span {
    text-decoration: underline;
}

/* =====================================================================
   Landing page: hide footer, showcase layout
   ===================================================================== */

/* Hide the "auto" (system settings) theme mode — forces direct light/dark toggle */
i.theme-switch[data-mode="auto"] {
    display: none !important;
}
/* Theme switcher is a plain light/dark toggle, not a dropdown: hide the
   caret and the three-option menu (JS also removes the menu). */
.theme-switch-button.dropdown-toggle::after,
.theme-switch-button::after {
    display: none !important;
}
.theme-switch-container .dropdown-menu {
    display: none !important;
}

/* Hide footer + footer content on every page */
footer.bd-footer,
footer.bd-footer-content,
.bd-footer-content,
.footer-items {
    display: none !important;
}

/* =====================================================================
   Landing page (detected via .showcase-chart which is always present)
   Unified max-width for hero, features, chart, and code carousel.
   ===================================================================== */
:root {
    --landing-width: 960px;
}

/* Hide sidebars on DESKTOP only. On mobile, pydata's JS moves the primary
   sidebar into a <dialog> modal when the hamburger is tapped -- and
   transfers the class list too, so a `display: none` here would break the
   menu. Restrict to desktop. */
@media (min-width: 960px) {
    html:has(.showcase-chart) .bd-sidebar-primary,
    html:has(.showcase-chart) .bd-sidebar-secondary {
        display: none !important;
    }
}
html:has(.showcase-chart) .prev-next-area,
html:has(.showcase-chart) footer.prev-next-footer,
html:has(.showcase-chart) .prev-next-footer {
    display: none !important;
}
/* The Tutorials index's "Previous" points back to the home/landing page;
   drop it so the docs don't send readers back out to the marketing page.
   "Next" keeps its float: right, so it stays put. */
html:has(section#tutorials) .prev-next-area .left-prev {
    display: none !important;
}
/* Expand pydata's 60em article cap just enough for the 3-card carousel.
   The hero, features, and chart stay at --landing-width via the rule
   below; only the carousel uses the extra horizontal room. */
html:has(.showcase-chart) .bd-main .bd-content .bd-article-container,
html:has(.showcase-chart) .bd-article-container {
    max-width: 1120px !important;
    width: 100% !important;
    margin: 0 auto !important;
}
/* Align hero prose, h2 headings, banner, features grid, and chart at the
   same landing width. The carousel gets its own wider cap (below) since
   it needs room for 3 whole, equal-size cards. */
html:has(.showcase-chart) .bd-article p,
html:has(.showcase-chart) .bd-article > section > section,
html:has(.showcase-chart) .bd-article ul,
html:has(.showcase-chart) .bd-article h1,
html:has(.showcase-chart) .bd-article h2,
html:has(.showcase-chart) .features-grid,
html:has(.showcase-chart) .showcase-chart {
    max-width: var(--landing-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
html:has(.showcase-chart) .bd-article ul {
    padding-left: 1.5em;
}
/* Headline banner -- match landing width. */
html:has(.showcase-chart) .bd-article div[style*="text-align: center"],
html:has(.showcase-chart) .bd-article div[style*="text-align:center"] {
    max-width: var(--landing-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
html:has(.showcase-chart) .bd-article div[style*="text-align: center"] img,
html:has(.showcase-chart) .bd-article div[style*="text-align:center"] img {
    max-width: 80% !important;
    height: auto !important;
}
/* Spacing between landing sections */
html:has(.showcase-chart) .showcase-chart {
    margin-top: 2.5rem !important;
}
html:has(.showcase-chart) .code-carousel {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

/* -------- Key features: 3x2 card grid -------- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem auto 0;
}
@media (max-width: 900px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .features-grid { grid-template-columns: 1fr; }
}

.feature-card {
    padding: 1.25rem 1.25rem 1.1rem;
    border-radius: 0.4rem;
    background-color: #fefaf9;
    border: 1px solid var(--pst-color-border);
    box-shadow: 0 .2rem .5rem var(--pst-color-shadow),
                0 0 .0625rem var(--pst-color-shadow);
}
html[data-theme="dark"] .feature-card {
    background-color: #2c2525;
    border-color: #5a4f4f;
}

.feature-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--pst-color-accent);
    margin-bottom: 0.6rem;
}
.feature-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.feature-title {
    font-family: var(--pst-font-family-base);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.3rem 0;
    color: var(--pst-color-text-base);
}
html:has(.showcase-chart) .bd-article .feature-title,
html:has(.showcase-chart) .bd-article .feature-desc {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.feature-desc {
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0;
}
.feature-desc code {
    font-size: 0.8rem;
    color: var(--code-orange) !important;
}
.feature-desc a {
    color: var(--pst-color-link);
}
html[data-theme="light"] .feature-desc { color: #5b5353; }
html[data-theme="dark"]  .feature-desc { color: #d7cfcd; }

/* -------- Landing-page code grid (2 on top, 1 centered below) --------
   Row 1: Basic workflow + Label transfer, outer edges anchored to the
          landing page's content margin (±landing-width/2).
   Row 2: Pseudobulk differential expression, centered at the same width.
*/
.code-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    row-gap: 1.25rem;
    max-width: var(--landing-width);
    margin: 2rem auto 0;
}
.code-card {
    width: 100%;
    max-width: calc((var(--landing-width) - 1.25rem) / 2);
    display: flex;
    flex-direction: column;
    background-color: #fefaf9;
    border: 1px solid var(--pst-color-border);
    border-radius: 0.4rem;
    box-shadow: 0 .2rem .5rem var(--pst-color-shadow),
                0 0 .0625rem var(--pst-color-shadow);
    overflow: hidden;
}
html[data-theme="dark"] .code-card {
    background-color: #2c2525;
    border-color: #5a4f4f;
}
.code-card--left   { justify-self: start; }
.code-card--right  { justify-self: end;   }
.code-card--center {
    grid-column: 1 / -1;
    justify-self: center;
}
html:has(.showcase-chart) .code-grid {
    max-width: var(--landing-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (max-width: 720px) {
    .code-grid {
        grid-template-columns: 1fr;
    }
    .code-card {
        max-width: 100%;
        justify-self: stretch;
    }
    .code-card--center {
        grid-column: auto;
    }
}

/* -------- 3-card code carousel (legacy, unused on landing) -------- */
.code-carousel {
    /* Stage spans the full carousel width; arrows float absolutely on top
       of the flanks so the side cards can spread out to the outer margins
       without pushing the arrows off. */
    position: relative;
    max-width: 1080px;
}
html:has(.showcase-chart) .code-carousel {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.carousel-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    /* Extra room on the bottom so the active card's translateY(+22)
       stagger + shadow aren't sheared off. */
    padding: 0.8rem 0 2.6rem;
    overflow: hidden;
}
.carousel-card {
    grid-area: 1 / 1;
    /* All three cards share identical dimensions -- no scaling. The active
       card sits forward (z-index 3 + translated down) and partially
       obscures the two flanking cards sitting behind it. */
    width: 100%;
    max-width: 440px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: #fefaf9;
    border: 1px solid var(--pst-color-border);
    border-radius: 0.4rem;
    box-shadow: 0 .2rem .5rem var(--pst-color-shadow),
                0 0 .0625rem var(--pst-color-shadow);
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(.4,0,.2,1),
                opacity 0.45s ease,
                filter 0.3s ease;
    will-change: transform, opacity, filter;
}
html[data-theme="dark"] .carousel-card {
    background-color: #2c2525;
    border-color: #5a4f4f;
}
.carousel-card.is-active {
    /* Staggered forward: the active card drops down noticeably so it sits
       in front of the two flanking cards. */
    transform: translateX(0) translateY(22px);
    opacity: 1;
    z-index: 3;
    filter: none;
}
/* Flanks pushed out so the OUTER EDGE of each card lands exactly at
   ±landing-width/2 -- same left/right bounds as the hero, features grid,
   and chart above. translateX is computed in pixels (not a flat %) so the
   anchor to the margin holds regardless of card width. */
.carousel-card.is-prev {
    transform: translateX(calc(50% - (var(--landing-width) / 2))) translateY(0);
    opacity: 1;
    z-index: 1;
    cursor: pointer;
    filter: brightness(0.99);
}
.carousel-card.is-next {
    transform: translateX(calc((var(--landing-width) / 2) - 50%)) translateY(0);
    opacity: 1;
    z-index: 1;
    cursor: pointer;
    filter: brightness(0.99);
}
html[data-theme="dark"] .carousel-card.is-prev,
html[data-theme="dark"] .carousel-card.is-next {
    filter: brightness(0.9);
}
.carousel-card:not(.is-active):hover {
    filter: brightness(1);
}
/* Narrower viewports: shrink cards so the flanking pair never bleeds
   past the page margin. */
@media (max-width: 1100px) {
    .carousel-card { max-width: 400px; }
}
@media (max-width: 1024px) {
    .carousel-card { max-width: 360px; }
}

/* Tab header integrated into the card (same font size + color as the
   bar-group titles on the chart). The three mac-style traffic-light dots
   live at the top-right of the tab via .card-dots. */
.card-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--pst-font-family-base);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.6rem 1.1rem 0.35rem;
    border-bottom: 1px solid var(--pst-color-border);
    background: transparent;
}
html[data-theme="dark"] .card-tab {
    border-bottom-color: #5a4f4f;
}
.card-tab-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.card-dot {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.card-dot-red    { background-color: #ff5f57; }
.card-dot-yellow { background-color: #febc2e; }
.card-dot-green  { background-color: #28c840; }

/* Collapse the flanking cards on narrow viewports where they'd overlap. */
@media (max-width: 900px) {
    .carousel-card {
        max-width: 520px;
        width: 100%;
    }
    .carousel-card.is-prev,
    .carousel-card.is-next {
        opacity: 0;
        pointer-events: none;
        transform: translateX(0);
    }
}

/* Strip the Pygments chrome so the card's own border is the only box. */
.card-code .highlight,
.card-code div.highlight {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.card-code pre {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0.45rem 1.3rem 1.1rem !important;
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    overflow-x: auto;
}

/* Arrow buttons: absolutely positioned so the cards can extend to the
   carousel's outer margins while the arrows float on top. */
.carousel-arrow {
    position: absolute;
    top: 50%;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--pst-color-accent);
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    z-index: 10;
    transition: color 0.15s ease, transform 0.12s ease,
                background-color 0.15s ease;
}
.carousel-arrow-left {
    left: 0.25rem;
    transform: translateY(-50%);
}
.carousel-arrow-right {
    right: 0.25rem;
    transform: translateY(-50%);
}
.carousel-arrow:hover {
    color: var(--pst-color-secondary);
    transform: translateY(-50%) scale(1.08);
}
.carousel-arrow:active {
    transform: translateY(-50%) scale(0.96);
}
.carousel-arrow svg {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
}

/* Kill the gradient sidebar panel on landing since there's no sidebar */
html:has(.showcase-chart) .bd-container__inner::before {
    display: none !important;
}
/* Hide the "back to top" button globally */
#pst-back-to-top,
button.btn.btn-primary.btn-sm.pst-back-to-top {
    display: none !important;
}

/* Chart panel -- matches the carousel + feature cards (same bg, border, shadow) */
.showcase-chart {
    padding: 1.25rem 3rem 1.75rem;
    border-radius: 0.4rem;
    border: 1px solid var(--pst-color-border);
    box-shadow: 0 .2rem .5rem var(--pst-color-shadow),
                0 0 .0625rem var(--pst-color-shadow);
    margin: 2rem auto 0;
}
html[data-theme="light"] .showcase-chart { background-color: #fefaf9; }
html[data-theme="dark"]  .showcase-chart {
    background-color: #2c2525;
    border-color: #5a4f4f;
}
.showcase-chart-header {
    text-align: center;
    margin-bottom: 0.6rem;
}
.showcase-chart-title {
    font-family: var(--pst-font-family-base);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--pst-color-text-base);
    margin-bottom: 0.2rem;
}
.showcase-chart-subtitle {
    font-family: var(--pst-font-family-base);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--pst-color-text-muted);
}

/* Benchmark chart */
.bench-group {
    margin-bottom: 1rem;
}
.bench-group:last-child {
    margin-bottom: 0;
}
/* GPU variant sits on a separate hardware profile; use a subtle divider
   + extra vertical margin on either side to signal the context switch. */
.bench-group--gpu {
    margin-top: 1.9rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--pst-color-border);
}
html[data-theme="dark"] .bench-group--gpu {
    border-top-color: #5a4f4f;
}
/* Per-group hardware note (used by the GPU group). */
.bench-note {
    font-family: var(--pst-font-family-base);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--pst-color-text-base);
    margin: -0.2rem 0 0.5rem;
}
.bench-title {
    font-family: var(--pst-font-family-base);
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0.2rem;
    color: var(--pst-color-text-base);
}
.bench-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
    height: 1.6rem;
}
.bench-label {
    width: 7.5rem;
    font-size: 0.75rem;
    flex-shrink: 0;
    text-align: right;
    padding-right: 0.5rem;
}
.bench-track {
    flex: 1;
    position: relative;
    height: 1.2rem;
    min-width: 0;
    /* Reserve space past the bar for the time + multiplier label
       (e.g. "13.8h (1057×)" on the longest bar). */
    margin-right: 5.75rem;
    overflow: visible;
}
.bench-bar {
    height: 100%;
    border-radius: 0.2rem;
    transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    min-width: 2px;
}
/* Time label: absolutely placed at the bar's tip, fades in after the
   width animation stops. JS sets `left: <pct>%` on transitionend and
   toggles .is-done to reveal it. */
.bench-val {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding-left: 0.4rem;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease, left 0s;
    pointer-events: none;
}
.bench-val.is-done {
    opacity: 1;
}
html[data-theme="light"] .bench-val { color: #5b5353; }
html[data-theme="dark"]  .bench-val { color: #fefaf9; }
html[data-theme="light"] .bar-brisc  { background: #e16032; }
html[data-theme="light"] .bar-scanpy { background: #269d69; }
html[data-theme="light"] .bar-seurat { background: #1c8ca8; }
html[data-theme="light"] .bar-rapids { background: #7058be; }
html[data-theme="dark"]  .bar-brisc  { background: #f38d70; }
html[data-theme="dark"]  .bar-scanpy { background: #adda78; }
html[data-theme="dark"]  .bar-seurat { background: #85dacc; }
html[data-theme="dark"]  .bar-rapids { background: #9ca9eb; }

div.sd-card {
    background-image: linear-gradient(0deg, var(--pst-gradient-sidebar-left) 0%, var(--pst-gradient-sidebar-right) 100%);
}

/* match docs footer colour to the header */
footer.bd-footer {
    background-color: var(--pst-color-on-background);
}



/* Search bar background — match the navbar */
html[data-theme="light"] .search-button-field {
    background-color: #fefaf9;
}
html[data-theme="dark"] .search-button-field {
    background-color: #403838;
}

/* fix visited link colour */
a:visited {
    color: var(--pst-color-link);
}

/* give code examples the same faint drop-shadow as admonitions */
pre {
    box-shadow: 0 .2rem .5rem var(--pst-color-shadow), 0 0 .0625rem var(--pst-color-shadow) !important;
}

/* smaller navbar logo */
.navbar-brand img {
    height: 28px;
    width: auto;
}

/* Mobile: ensure nav header buttons (hamburger, logo, search, theme) are
   clickable and not hidden behind any custom layer */
@media (max-width: 959.98px) {
    .bd-header,
    .bd-header__inner,
    .bd-header .navbar-header-items__start,
    .bd-header .navbar-header-items__end {
        position: relative;
        z-index: 1050;
    }
    .bd-header button.primary-toggle,
    .bd-header .navbar-brand,
    .bd-header .search-button__button,
    .bd-header .theme-switch-button {
        pointer-events: auto !important;
    }
    /* Push the hamburger drawer's contents below the device status bar */
    #pst-primary-sidebar-modal,
    #pst-secondary-sidebar-modal {
        padding-top: env(safe-area-inset-top, 0) !important;
    }
    #pst-primary-sidebar-modal[open],
    #pst-secondary-sidebar-modal[open] {
        padding-top: calc(env(safe-area-inset-top, 0) + 3.5rem) !important;
    }
}


/* center-justify the API nav items to the page:
   use CSS grid with three columns — start | center | end —
   where start and end are equal-width and center is auto-sized */
/* Desktop-only: three-column grid navbar (logo | nav links | search/theme).
   On narrow screens, pydata's default flex layout + hamburger handles it. */
@media (min-width: 960px) {
    .bd-header__inner.bd-page-width {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    .bd-header__inner .navbar-header-items__start {
        grid-column: 1;
        justify-self: start;
    }
    .bd-header__inner .navbar-header-items__center {
        margin: 0 !important;
    }
    .bd-header__inner .navbar-header-items {
        display: contents;
    }
    .bd-header__inner .navbar-header-items__end {
        grid-column: 3;
        justify-self: end;
        display: flex;
        align-items: center;
    }
}

/* =====================================================================
   Code highlighting — Monokai Pro Ristretto Filter
   Hardcoded here as the final CSS file to guarantee override.
   ===================================================================== */

/* Code block background */
html[data-theme="light"] div.highlight,
html[data-theme="light"] div.highlight pre { background: #fefaf9 !important; color: #5b5353 !important; }
html[data-theme="dark"] div.highlight,
html[data-theme="dark"] div.highlight pre  { background: #2c2525 !important; color: #fefaf9 !important; }

/* Light: comments */
html[data-theme="light"] .highlight .c  { color: #a59c9b !important; font-style: italic !important; }
html[data-theme="light"] .highlight .ch { color: #a59c9b !important; font-style: italic !important; }
html[data-theme="light"] .highlight .cm { color: #a59c9b !important; font-style: italic !important; }
html[data-theme="light"] .highlight .cp { color: #a59c9b !important; font-style: italic !important; }
html[data-theme="light"] .highlight .cpf{ color: #a59c9b !important; font-style: italic !important; }
html[data-theme="light"] .highlight .c1 { color: #a59c9b !important; font-style: italic !important; }
html[data-theme="light"] .highlight .cs { color: #a59c9b !important; font-style: italic !important; }
/* Light: keywords */
html[data-theme="light"] .highlight .k  { color: #e14775 !important; }
html[data-theme="light"] .highlight .kd { color: #e14775 !important; }
html[data-theme="light"] .highlight .kn { color: #e14775 !important; }
html[data-theme="light"] .highlight .kp { color: #e14775 !important; }
html[data-theme="light"] .highlight .kr { color: #e14775 !important; }
html[data-theme="light"] .highlight .kt { color: #e14775 !important; }
html[data-theme="light"] .highlight .kc { color: #7058be !important; }
/* Light: names */
html[data-theme="light"] .highlight .n  { color: #5b5353 !important; }
html[data-theme="light"] .highlight .nn { color: #5b5353 !important; }
html[data-theme="light"] .highlight .nv { color: #5b5353 !important; }
html[data-theme="light"] .highlight .nx { color: #5b5353 !important; }
html[data-theme="light"] .highlight .py { color: #5b5353 !important; }
html[data-theme="light"] .highlight .nl { color: #5b5353 !important; }
html[data-theme="light"] .highlight .nf { color: #269d69 !important; }
html[data-theme="light"] .highlight .fm { color: #269d69 !important; }
html[data-theme="light"] .highlight .nc { color: #269d69 !important; }
html[data-theme="light"] .highlight .nb { color: #1c8ca8 !important; }
html[data-theme="light"] .highlight .nd { color: #1c8ca8 !important; }
html[data-theme="light"] .highlight .ne { color: #1c8ca8 !important; }
html[data-theme="light"] .highlight .nt { color: #1c8ca8 !important; }
html[data-theme="light"] .highlight .na { color: #e16032 !important; }
html[data-theme="light"] .highlight .bp { color: #e16032 !important; }
/* Light: strings */
html[data-theme="light"] .highlight .s  { color: #cc7a0a !important; }
html[data-theme="light"] .highlight .s1 { color: #cc7a0a !important; }
html[data-theme="light"] .highlight .s2 { color: #cc7a0a !important; }
html[data-theme="light"] .highlight .sa { color: #cc7a0a !important; }
html[data-theme="light"] .highlight .sb { color: #cc7a0a !important; }
html[data-theme="light"] .highlight .sc { color: #cc7a0a !important; }
html[data-theme="light"] .highlight .dl { color: #cc7a0a !important; }
html[data-theme="light"] .highlight .sd { color: #cc7a0a !important; }
html[data-theme="light"] .highlight .se { color: #cc7a0a !important; }
html[data-theme="light"] .highlight .sh { color: #cc7a0a !important; }
html[data-theme="light"] .highlight .si { color: #cc7a0a !important; }
html[data-theme="light"] .highlight .sx { color: #cc7a0a !important; }
html[data-theme="light"] .highlight .sr { color: #cc7a0a !important; }
html[data-theme="light"] .highlight .ss { color: #cc7a0a !important; }
/* Light: numbers & literals */
html[data-theme="light"] .highlight .m  { color: #7058be !important; }
html[data-theme="light"] .highlight .mb { color: #7058be !important; }
html[data-theme="light"] .highlight .mf { color: #7058be !important; }
html[data-theme="light"] .highlight .mh { color: #7058be !important; }
html[data-theme="light"] .highlight .mi { color: #7058be !important; }
html[data-theme="light"] .highlight .mo { color: #7058be !important; }
html[data-theme="light"] .highlight .il { color: #7058be !important; }
/* Light: operators & punctuation */
html[data-theme="light"] .highlight .o  { color: #e14775 !important; }
html[data-theme="light"] .highlight .ow { color: #e14775 !important; }
html[data-theme="light"] .highlight .p  { color: #5b5353 !important; }
html[data-theme="light"] .highlight .pm { color: #5b5353 !important; }
html[data-theme="light"] .highlight .err{ color: #e14775 !important; background: none !important; }
html[data-theme="light"] .highlight .w  { color: #5b5353 !important; }

/* Dark: comments */
html[data-theme="dark"] .highlight .c  { color: #72696a !important; font-style: italic !important; }
html[data-theme="dark"] .highlight .ch { color: #72696a !important; font-style: italic !important; }
html[data-theme="dark"] .highlight .cm { color: #72696a !important; font-style: italic !important; }
html[data-theme="dark"] .highlight .cp { color: #72696a !important; font-style: italic !important; }
html[data-theme="dark"] .highlight .cpf{ color: #72696a !important; font-style: italic !important; }
html[data-theme="dark"] .highlight .c1 { color: #72696a !important; font-style: italic !important; }
html[data-theme="dark"] .highlight .cs { color: #72696a !important; font-style: italic !important; }
/* Dark: keywords */
html[data-theme="dark"] .highlight .k  { color: #f06883 !important; }
html[data-theme="dark"] .highlight .kd { color: #f06883 !important; }
html[data-theme="dark"] .highlight .kn { color: #f06883 !important; }
html[data-theme="dark"] .highlight .kp { color: #f06883 !important; }
html[data-theme="dark"] .highlight .kr { color: #f06883 !important; }
html[data-theme="dark"] .highlight .kt { color: #f06883 !important; }
html[data-theme="dark"] .highlight .kc { color: #9ca9eb !important; }
/* Dark: names */
html[data-theme="dark"] .highlight .n  { color: #fefaf9 !important; }
html[data-theme="dark"] .highlight .nn { color: #fefaf9 !important; }
html[data-theme="dark"] .highlight .nv { color: #fefaf9 !important; }
html[data-theme="dark"] .highlight .nx { color: #fefaf9 !important; }
html[data-theme="dark"] .highlight .py { color: #fefaf9 !important; }
html[data-theme="dark"] .highlight .nl { color: #fefaf9 !important; }
html[data-theme="dark"] .highlight .nf { color: #adda78 !important; }
html[data-theme="dark"] .highlight .fm { color: #adda78 !important; }
html[data-theme="dark"] .highlight .nc { color: #adda78 !important; }
html[data-theme="dark"] .highlight .nb { color: #85dacc !important; }
html[data-theme="dark"] .highlight .nd { color: #85dacc !important; }
html[data-theme="dark"] .highlight .ne { color: #85dacc !important; }
html[data-theme="dark"] .highlight .nt { color: #85dacc !important; }
html[data-theme="dark"] .highlight .na { color: #f38d70 !important; }
html[data-theme="dark"] .highlight .bp { color: #f38d70 !important; }
/* Dark: strings */
html[data-theme="dark"] .highlight .s  { color: #f9cc6c !important; }
html[data-theme="dark"] .highlight .s1 { color: #f9cc6c !important; }
html[data-theme="dark"] .highlight .s2 { color: #f9cc6c !important; }
html[data-theme="dark"] .highlight .sa { color: #f9cc6c !important; }
html[data-theme="dark"] .highlight .sb { color: #f9cc6c !important; }
html[data-theme="dark"] .highlight .sc { color: #f9cc6c !important; }
html[data-theme="dark"] .highlight .dl { color: #f9cc6c !important; }
html[data-theme="dark"] .highlight .sd { color: #f9cc6c !important; }
html[data-theme="dark"] .highlight .se { color: #f9cc6c !important; }
html[data-theme="dark"] .highlight .sh { color: #f9cc6c !important; }
html[data-theme="dark"] .highlight .si { color: #f9cc6c !important; }
html[data-theme="dark"] .highlight .sx { color: #f9cc6c !important; }
html[data-theme="dark"] .highlight .sr { color: #f9cc6c !important; }
html[data-theme="dark"] .highlight .ss { color: #f9cc6c !important; }
/* Dark: numbers & literals */
html[data-theme="dark"] .highlight .m  { color: #9ca9eb !important; }
html[data-theme="dark"] .highlight .mb { color: #9ca9eb !important; }
html[data-theme="dark"] .highlight .mf { color: #9ca9eb !important; }
html[data-theme="dark"] .highlight .mh { color: #9ca9eb !important; }
html[data-theme="dark"] .highlight .mi { color: #9ca9eb !important; }
html[data-theme="dark"] .highlight .mo { color: #9ca9eb !important; }
html[data-theme="dark"] .highlight .il { color: #9ca9eb !important; }
/* Dark: operators & punctuation */
html[data-theme="dark"] .highlight .o  { color: #f06883 !important; }
html[data-theme="dark"] .highlight .ow { color: #f06883 !important; }
html[data-theme="dark"] .highlight .p  { color: #fefaf9 !important; }
html[data-theme="dark"] .highlight .pm { color: #fefaf9 !important; }
html[data-theme="dark"] .highlight .err{ color: #f06883 !important; background: none !important; }
html[data-theme="dark"] .highlight .w  { color: #fefaf9 !important; }

/* (Inline-code chip styling lives near the top of this file, under the
   ".bd-article cite, code.docutils, code.literal" rule.) */

/* =====================================================================
   Autodoc function/class signatures
   The HTML uses .sig with nested .sig-name, .sig-param, .n, .p, .o,
   .s, .k, .default_value etc. These mostly mirror pygments classes,
   but we need a few extra rules: parameter name vs type, and the
   `class` keyword on class signatures.
   ===================================================================== */

html[data-theme] dt.sig {
    font-family: var(--pst-font-family-monospace);
    color: var(--code-text);
    background: transparent;
}

/* `class brisc.SingleCell(` — split the parts */
html[data-theme] dt.sig .property,
html[data-theme] dt.sig .property .k,
html[data-theme] dt.sig .property .pre   { color: var(--code-red); }   /* `class` */
html[data-theme] dt.sig .sig-prename,
html[data-theme] dt.sig .sig-prename .pre { color: var(--code-comment); } /* `single_cell.` */
html[data-theme] dt.sig .sig-name,
html[data-theme] dt.sig .sig-name .pre   { color: var(--code-green); } /* `SingleCell` / `__init__` */
html[data-theme] dt.sig .sig-paren       { color: var(--code-text); }

/* Parameter name = first .n inside an em.sig-param */
html[data-theme] em.sig-param > .n:first-child,
html[data-theme] em.sig-param > .n:first-child .pre {
    color: var(--code-orange);
    font-style: normal;
}

/* Type expression = subsequent .n (with all its nested .pre) */
html[data-theme] em.sig-param > .n:not(:first-child),
html[data-theme] em.sig-param > .n:not(:first-child) .pre {
    color: var(--code-cyan);
    font-style: italic;
}

/* Punctuation, operators, strings, constants, defaults inside sig */
html[data-theme] dt.sig .p,
html[data-theme] dt.sig .p .pre              { color: var(--code-text); font-style: normal; }
html[data-theme] dt.sig .o,
html[data-theme] dt.sig .o .pre              { color: var(--code-red); font-style: normal; }
html[data-theme] dt.sig .s,
html[data-theme] dt.sig .s .pre              { color: var(--code-yellow); font-style: normal; }
html[data-theme] dt.sig em.sig-param > .k,
html[data-theme] dt.sig em.sig-param > .k .pre,
html[data-theme] em.sig-param .k,
html[data-theme] em.sig-param .k .pre        { color: var(--code-purple); font-style: normal; }
html[data-theme] dt.sig .default_value,
html[data-theme] dt.sig .default_value .pre  { color: var(--code-purple); font-style: normal; }
html[data-theme] dt.sig .w                   { color: inherit; }

/* Positional-only `/` and keyword-only `*` separators */
html[data-theme] .positional-only-separator,
html[data-theme] .positional-only-separator .pre,
html[data-theme] .keyword-only-separator,
html[data-theme] .keyword-only-separator .pre  { color: var(--code-red); }

/* Make sure the heavy default `dt.sig` background from pydata is removed
   so the gradient/page bg shows through, matching the editor look */
dl.py > dt.sig.sig-object.py {
    background-color: var(--pst-color-background) !important;
    border-left: none;
}

/* Method names in autosummary overview tables -- bold theme green,
   matching the green used for function calls in code blocks. */
.bd-content table.autosummary a code,
.bd-content table.autosummary a code .pre,
.bd-content table.autosummary td a code,
.bd-content table.autosummary td a code .pre {
    color: var(--code-green) !important;
    font-weight: 700 !important;
}
.bd-content table.autosummary a:hover code {
    text-decoration: underline;
}

/* =====================================================================
   The "On this page" secondary sidebar is removed site-wide
   (secondary_sidebar_items=[] in conf.py). Hide every leftover affordance,
   including the article-header toggle row.
   ===================================================================== */
.bd-sidebar-secondary,
#pst-secondary-sidebar,
#pst-secondary-sidebar-modal,
.secondary-toggle,
.bd-header-article .sidebar-toggle {
    display: none !important;
}

/* Remove the breadcrumb trail (home > ... > page) on every page, and
   collapse the header-article slot it used to occupy so the content moves
   up into the freed space. */
.bd-breadcrumbs,
nav[aria-label="Breadcrumb"] {
    display: none !important;
}
.bd-header-article .header-article-item {
    min-height: 0 !important;
}

/* The article-header band (breadcrumbs + pydata's toggles) is unused now;
   hide it entirely so nothing reserves space above the content. */
.bd-header-article {
    display: none !important;
}

/* Pull the title/content up into the space the breadcrumb vacated. */
@media (min-width: 960px) {
    html:not(:has(.showcase-chart)) .bd-article {
        padding-top: 0.6rem;
    }
}

/* Non-home pages: narrow the primary sidebar and pull it toward the left
   edge so the main content gets more room. */
@media (min-width: 960px) {
    html:not(:has(.showcase-chart)) .bd-sidebar-primary {
        width: 15rem;
        flex: 0 0 15rem;
        padding-left: 0.5rem;
        padding-right: 0.75rem;
    }
}

/* Scroll-spy: highlight the left-sidebar link matching the section
   currently visible on API pages. */
body.api-page .bd-sidebar-primary a.current-section,
body.api-page .bd-sidebar-primary a.current-section .caption-text {
    color: var(--pst-color-accent) !important;
    font-weight: 700;
}

/* API pages: drop the "#" permalink ("Link to this definition"/heading)
   anchors that appear after signatures and headings. */
body.api-page a.headerlink {
    display: none !important;
}

/* Source-link target (Sphinx viewcode): strip the default yellow
   :target background highlight. */
.viewcode-block,
div.viewcode-block,
.viewcode-block:target,
div.viewcode-block:target,
dt:target,
span:target,
p:target,
.highlight :target {
    background: transparent !important;
}

/* Method overview tables (autosummary) — light: remove border, zebra;
   dark: flat bg with #faf4f2 border */
html[data-theme="light"] table.autosummary {
    border: none;
}
html[data-theme="light"] table.autosummary td,
html[data-theme="light"] table.autosummary th {
    border: none;
}
html[data-theme="light"] table.autosummary tr.row-odd > td,
html[data-theme="light"] table.autosummary tbody tr:nth-child(odd) > td {
    background-color: var(--pst-color-on-background);
}
html[data-theme="light"] table.autosummary tr.row-even > td,
html[data-theme="light"] table.autosummary tbody tr:nth-child(even) > td {
    background-color: var(--pst-color-background);
}
html[data-theme="dark"] table.autosummary {
    border: 1px solid #faf4f2;
}
html[data-theme="dark"] table.autosummary td,
html[data-theme="dark"] table.autosummary th {
    border-color: #faf4f2;
}
html[data-theme="dark"] table.autosummary tr > td,
html[data-theme="dark"] table.autosummary thead th {
    background-color: #2c2525;
}

/* Content tables (e.g. tutorial summary) — match autosummary look.
   Header cells (th) get the same background as the first body row so
   there's no contrast band at the top. */
html[data-theme="light"] .bd-content .table {
    border: none;
}
html[data-theme="light"] .bd-content .table td,
html[data-theme="light"] .bd-content .table th {
    border: none;
}
html[data-theme="light"] .bd-content .table thead th,
html[data-theme="light"] .bd-content .table tbody tr:nth-child(odd) > td {
    background-color: var(--pst-color-on-background);
}
html[data-theme="light"] .bd-content .table tbody tr:nth-child(even) > td {
    background-color: var(--pst-color-background);
}
html[data-theme="dark"] .bd-content .table {
    border: 1px solid #faf4f2;
}
html[data-theme="dark"] .bd-content .table td,
html[data-theme="dark"] .bd-content .table th {
    border-color: #faf4f2;
}
html[data-theme="dark"] .bd-content .table tr > td,
html[data-theme="dark"] .bd-content .table thead th {
    background-color: #2c2525;
}

/* Dark mode: fix blue-grey text to #faf4f2 */
/* Top navbar buttons */
html[data-theme="dark"] .bd-header .nav-link {
    color: #faf4f2 !important;
}
/* Search bar text + kbd shortcuts */
html[data-theme="dark"] .search-button-field,
html[data-theme="dark"] .search-button__default-text,
html[data-theme="dark"] .search-button__kbd-shortcut,
html[data-theme="dark"] .kbd-shortcut__modifier,
html[data-theme="dark"] .search-button-field kbd {
    color: #faf4f2 !important;
}
/* Section navigation (left sidebar) */
html[data-theme="dark"] .bd-sidebar-primary .sidebar-primary-items__start .nav-link,
html[data-theme="dark"] .bd-sidebar-primary .sidebar-primary-items__start .caption-text,
html[data-theme="dark"] .bd-sidebar-primary .nav .nav-link,
html[data-theme="dark"] .bd-links .nav-link,
html[data-theme="dark"] .bd-sidebar-primary .toctree-l1 > a,
html[data-theme="dark"] .bd-sidebar-primary .toctree-l2 > a,
html[data-theme="dark"] .bd-sidebar-primary .toctree-l3 > a,
html[data-theme="dark"] .bd-sidebar-primary label.toctree-toggle {
    color: #faf4f2 !important;
}
/* "On this page" right sidebar */
html[data-theme="dark"] .bd-toc-nav .nav-link,
html[data-theme="dark"] .bd-toc-nav .section-nav a,
html[data-theme="dark"] .page-toc .nav-link,
html[data-theme="dark"] #pst-page-navigation-heading-2 {
    color: #faf4f2 !important;
}
/* Muted text override */
html[data-theme="dark"] {
    --pst-color-text-muted: #c5b8b6;
}

/* ===== Light mode: force key UI text to pure black ===== */
/* Top navbar buttons (Tutorials, SingleCell, Pseudobulk, DE) */
html[data-theme="light"] .bd-header .nav-link {
    color: #000 !important;
}
/* Search bar text + Ctrl/K kbd shortcuts */
html[data-theme="light"] .search-button-field,
html[data-theme="light"] .search-button__default-text,
html[data-theme="light"] .search-button__kbd-shortcut,
html[data-theme="light"] .kbd-shortcut__modifier,
html[data-theme="light"] .search-button-field kbd {
    color: #000 !important;
}
/* Light/dark theme switcher icon */
html[data-theme="light"] .theme-switch-button,
html[data-theme="light"] .theme-switch-button i {
    color: #000 !important;
}
/* Bar-group titles + code card tab titles share the same treatment:
   theme-aware text color (black in light mode, near-white in dark mode),
   same font size, weight, and sentence-case. The GPU hardware note
   uses the same text color so it reads as part of the title block. */
html[data-theme="light"] .bench-title,
html[data-theme="light"] .bench-note,
html[data-theme="light"] .card-tab {
    color: #000 !important;
}
html[data-theme="dark"] .bench-title,
html[data-theme="dark"] .bench-note,
html[data-theme="dark"] .card-tab {
    color: #fefaf9 !important;
}
/* Plot title + subtitle */
html[data-theme="light"] .showcase-chart-title,
html[data-theme="light"] .showcase-chart-subtitle {
    color: #000 !important;
}

/* Hero paragraph CTA ("Get started. >" link to tutorials) */
.hero-cta {
    color: var(--pst-color-accent) !important;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 0.15em;
}
.hero-cta strong {
    font-weight: 700;
}
.hero-cta:hover {
    color: var(--pst-color-secondary) !important;
    text-decoration: underline;
}

/* Consistent prose link style: bold, no underline, underline on hover.
   Target <a> inside paragraphs/list-items so we don't accidentally
   bold autosummary tables, sidebar entries, nav links, or headerlinks. */
.bd-article p a:not(.headerlink):not(.api-link),
.bd-article li > p a:not(.headerlink):not(.api-link),
.feature-desc a {
    font-weight: 700;
    text-decoration: none;
}
.bd-article p a:not(.headerlink):not(.api-link):hover,
.bd-article li > p a:not(.headerlink):not(.api-link):hover,
.feature-desc a:hover {
    text-decoration: underline;
}

/* Sidebar: nudge the expand/collapse chevrons slightly left of the
   sidebar's right edge so they're not flush against the panel border. */
.bd-sidebar-primary .toctree-toggle,
.bd-sidebar-primary summary .toctree-toggle {
    margin-right: 0.6rem;
}
.bd-sidebar-primary details > summary {
    padding-right: 0.2rem;
}

/* Header navbar: theme-fix.js renders the nav links as rounded chips —
   [Tutorials]  API:  [SingleCell] [Pseudobulk] [DE]. The "API:" label uses
   the nav color; the three API classes are grouped under it. */
html[data-theme="light"] { --api-nav-label: #000; }
html[data-theme="dark"]  { --api-nav-label: #faf4f2; }

.bd-header .bd-navbar-elements .api-nav-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    margin-left: 4.5rem;
}
.bd-header .bd-navbar-elements .api-nav-group .api-nav-fix {
    color: var(--api-nav-label);
    font-weight: 600;
}
/* Each nav class is a rounded chip outlined with the theme border (Tutorials
   chipped in place; the API classes inside the group). */
.bd-header .bd-navbar-elements .nav-link.api-nav-chip {
    display: inline-block !important;
    padding: 0.18rem 0.6rem !important;
    border-radius: 0.6rem;
    background: var(--pst-color-surface);
    border: 1px solid var(--pst-color-border);
    line-height: 1.35;
    color: var(--pst-color-text-base);
}
/* Drop pydata's hover/current underline (the ::before bar) on chips. */
.bd-header .bd-navbar-elements .nav-link.api-nav-chip::before {
    display: none !important;
}
/* Hover and the active/current section both show only the orange outline;
   .current is mirrored onto the link in JS so it persists on subpages. */
.bd-header .bd-navbar-elements .nav-link.api-nav-chip:hover,
.bd-header .bd-navbar-elements .nav-link.api-nav-chip.current,
.bd-header .bd-navbar-elements .nav-link.api-nav-chip.active {
    border-color: var(--pst-color-accent);
    color: var(--pst-color-accent) !important;
    background: var(--pst-color-surface);
}

/* The landing page uses the logo as its visual title, so visually hide the
   H1 text. It stays in the DOM to supply the document title (browser tab and
   prev/next navigation label) and the document outline. */
html:has(.showcase-chart) .bd-article h1 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}