/*
 * Visao docs theme — Midair design-system port.
 *
 * Values lifted verbatim from the live Midair source tree:
 *   tailwind.config.js   — brand colour palette (corporate-*)
 *   index.scss           — .tw-sidebar-item, .corp-logo, .corp-title
 *   action_buttons.rs    — ActionVariant::{Primary, Secondary, Accent}
 *   index.html           — <html> bg-gradient classes
 *
 * Visao reuses the same brand colour (#0000C0). No bespoke-font
 * dependency — Midair's stack is the Tailwind v4 default
 * `ui-sans-serif, system-ui, sans-serif, ...`. We match that.
 *
 * Loaded after redactor.css (see theme.conf).
 */

:root {
    /* ─── Corporate palette (from tailwind.config.js) ────────── */
    --ip-corporate:           #0000c0;
    --ip-corporate-lighter:   #0000f0;
    --ip-corporate-lighter2:  #0000ff;
    --ip-corporate-darker:    #000090;
    --ip-corporate-darker2:   #000080;
    --ip-corporate-gray:      #414141;
    --ip-corporate-light-gray:#818181;
    --ip-corporate-light-faded: #6161c0;

    /* Dark-mode brand pair (also from tailwind.config.js) */
    --ip-corp-d-gray:         #f0f0f0;
    --ip-corp-d-light-gray:   #b0b0f0;

    /* ─── Action colours (from action_buttons.rs) ────────────── */
    --ip-blue-600:     #2563eb;     /* Primary "+ New run" */
    --ip-blue-700:     #1d4ed8;
    --ip-fuchsia-600:  #c026d3;     /* Accent gradient start */
    --ip-purple-600:   #9333ea;     /* Accent gradient via */
    --ip-fuchsia-500:  #d946ef;     /* Accent hover start */
    --ip-purple-500:   #a855f7;     /* Accent hover via */
    --ip-blue-500:     #3b82f6;     /* Accent hover end */
    --ip-red-600:      #dc2626;     /* Danger */
    --ip-red-700:      #b91c1c;
    --ip-green-600:    #16a34a;
    --ip-amber-500:    #f59e0b;

    /* ─── Neutrals (Tailwind gray scale, as Midair uses them) ── */
    --ip-gray-50:   #f9fafb;
    --ip-gray-100:  #f3f4f6;
    --ip-gray-200:  #e5e7eb;
    --ip-gray-300:  #d1d5db;
    --ip-gray-400:  #9ca3af;
    --ip-gray-500:  #6b7280;
    --ip-gray-600:  #4b5563;
    --ip-gray-700:  #374151;
    --ip-gray-800:  #1f2937;
    --ip-gray-900:  #111827;

    /* ─── Layout ──────────────────────────────────────────────── */
    --ip-radius-sm:    6px;
    --ip-radius:       8px;
    --ip-radius-lg:    12px;
    --ip-radius-pill:  9999px;

    --ip-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
    --ip-shadow:       0 1px 3px rgba(0, 0, 0, 0.1),
                       0 1px 2px rgba(0, 0, 0, 0.06);
    --ip-shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.1),
                       0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* Same as .tw-sidebar-width in index.scss — 16rem. */
    --ip-sidebar-w:    16rem;
}

/* ─── Page baseline ──────────────────────────────────────────── */

html, body {
    /*
     * Match Tailwind v4's default sans stack — Midair uses
     * `ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
     * "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`.
     */
    font-family: ui-sans-serif, system-ui, sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji",
                 "Segoe UI Symbol", "Noto Color Emoji";
    color: #000;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/*
 * <html class="bg-white bg-gradient-to-br
 *              from-[#ffffff] via-[#f0f0ff] to-[#e0e0e0]
 *              from-0% via-40% to-90%">
 *
 * Tailwind's `bg-gradient-to-br` = `linear-gradient(to bottom
 * right, ...)`. Apply on the <body> since Sphinx puts content
 * inside it. fixed so it stays put on long pages.
 */
body {
    background-color: #ffffff;
    background-image:
        linear-gradient(to bottom right,
                        #ffffff 0%,
                        #f0f0ff 40%,
                        #e0e0e0 90%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* ─── Typography ─────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.site-content .topic-title,
.toctree-wrapper .caption,
.auto-toc .caption {
    /*
     * Upstream redactor.css forces `background: #fff;
     * overflow: hidden; position: relative` on every heading
     * and several caption classes — on our tinted gradient body
     * that shows up as a stark white band behind the text.
     * Reset all three properties.
     */
    background: transparent !important;
    overflow: visible !important;
    position: static;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ip-gray-900);
    font-family: inherit;
    margin: 0;
}

/*
 * Page H1. Midair's `breadcrumb.rs` h1 is `text-lg sm:text-xl`,
 * but that's a breadcrumb leaf in an admin shell — *not* a docs
 * page title. In a documentation theme H1 must dominate the
 * hierarchy (H1 > H2 > H3), so we use the standard docs scale:
 * ~2rem at desktop, weight 700, comfortable bottom margin.
 */
h1 {
    font-size: 1.875rem;            /* ≈ Tailwind .text-3xl */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ip-gray-900);
    margin: 0.5rem 0 1.25rem;
}

@media (min-width: 640px) {
    h1 { font-size: 2rem; }         /* .sm\:text-[2rem] */
}

/*
 * .content-header h2 (index.scss:259): 1.45rem / 700 / #1f2937.
 * Section headings inside content take this treatment.
 */
h2 {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ip-gray-800);
    margin: 2rem 0 0.75rem;
}

h3 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ip-gray-800);
    margin: 1.5rem 0 0.5rem;
}

h4 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ip-gray-800);
    margin: 1.25rem 0 0.4rem;
}

/*
 * H1 + dim subtitle. In the Midair list-shell the subtitle is
 * the small "Latest runs" line beneath the page title — text-sm
 * (14px) in muted gray.
 */
.site-content h1 + p {
    color: var(--ip-gray-500);
    font-size: 0.875rem;            /* .text-sm */
    font-weight: 400;
    line-height: 1.25rem / 0.875rem;
    margin: 0 0 1.5rem 0;
}

.site-content p,
.site-content li,
.site-content dd {
    color: var(--ip-gray-700);
    /* Tailwind's prose default — 1.75 ratio gives docs a calm,
     * non-cramped flow. Slightly higher than v4 body default
     * (1.5) which feels too tight for long-form. */
    line-height: 1.75;
}

/* Paragraph rhythm — equivalent to Tailwind prose's `mb-4`
 * default but slightly more generous, so successive paragraphs
 * don't blur into one block of text. */
.site-content p {
    margin: 0 0 1.1rem 0;
}

/* Lists — looser than nav, lets each item breathe a line height. */
.site-content ul,
.site-content ol {
    margin: 0.5rem 0 1.25rem;
    padding-left: 1.75rem;
}

.site-content ul li,
.site-content ol li {
    margin: 0.35rem 0;
    line-height: 1.7;
}

/* Nested lists slightly tighter. */
.site-content ul ul,
.site-content ul ol,
.site-content ol ul,
.site-content ol ol {
    margin: 0.35rem 0 0.5rem;
}

/* Definition lists — keep terms and bodies visually grouped. */
.site-content dl {
    margin: 1rem 0;
}

.site-content dt {
    color: var(--ip-gray-900);
    font-weight: 600;
    margin-top: 0.75rem;
}

.site-content dd {
    margin: 0.25rem 0 0.75rem 1.5rem;
}

/*
 * redactor.css was written when Sphinx marked a prose definition list
 * with the class "docutils". It therefore gives every term of a
 * `dl:not(.docutils)` the API-signature card: a flat #f8f8f8 slab with
 * pink text. Sphinx 4 and later emit `<dl class="simple">` or a bare
 * `<dl>` for prose, so a glossary of flags or packages became a row of
 * white slabs, and on the dark page the term inside them was
 * unreadable. Sphinx marks a real signature term `dt.sig`, so the card
 * belongs to that term alone.
 */
.site-content dl:not(.docutils) > dt:not(.sig) {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0.85rem 0 0.2rem;
    color: var(--ip-gray-900);
    font-weight: 600;
    letter-spacing: normal;
}

.site-content dl:not(.docutils) > dd {
    margin: 0.2rem 0 0.85rem 1.5rem;
}

/* The signature card: a surface tint that reads on both schemes. */
.site-content dl:not(.docutils) > dt.sig {
    background: var(--ip-gray-50);
    border: 1px solid var(--ip-gray-200);
    border-radius: var(--ip-radius-sm);
    padding: 0.55rem 0.85rem;
    margin: 1.25rem 0 0.6rem;
    color: var(--ip-gray-900);
    letter-spacing: normal;
}

/* A term that is only inline code keeps the code styling, and the
 * term itself adds the weight. */
.site-content dl > dt > code,
.site-content dl > dt > .literal {
    font-weight: 600;
}

code, pre, kbd, samp, tt,
.site-content .literal,
.site-content code,
.codeblock, .highlight pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
                 Consolas, "Liberation Mono", "Courier New",
                 monospace;
    font-size: 0.875em;
}

/* ─── Layout — sidebar pinned, main fills viewport ───────────── */

.site-sidebar,
.sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--ip-sidebar-w) !important;
    height: 100vh !important;
    float: none !important;
    padding: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;          /* page gradient shows through */
    border-right: 1px solid rgba(255, 255, 255, 0.35);
    z-index: 10;
}

.site-sidebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar    { width: 6px; }
.site-sidebar::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track { background: transparent; }
.site-sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.site-main {
    margin-left: var(--ip-sidebar-w) !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: transparent;
}

.site-main > .site-content {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 2rem 2.5rem;
    margin: 0;
    border-radius: 0;
}

/*
 * Line length. The column grew with the window, so on a wide display
 * one paragraph ran past 170 characters. Cap the measure of the text
 * column. The breadcrumb bar and the footer keep the full width, so
 * their divider lines still cross the page.
 */
.site-content > .container {
    max-width: 64rem;
}

/* A table or a code block may use the full column. */
.site-content > .container > table.docutils,
.site-content > .container .wy-table-responsive,
.site-content > .container > [class^="highlight"] {
    max-width: 100%;
}

/* ─── Sidebar — wordmark + nav ──────────────────────────────── */

/* The branding-link is the upper-left "Midair" wordmark area.
 * We don't have the SVG-mask gradient logo treatment — we use a
 * PNG — but the typography/padding stays the same. */
.branding-link {
    display: block;
    color: var(--ip-gray-900);
    font-weight: 700;
    font-size: 1.5rem;                /* matches Tailwind .text-2xl */
    letter-spacing: -0.025em;
    padding: 1.5rem 1.25rem 1rem;
    text-decoration: none;
}

/*
 * Upstream redactor has `.site-sidebar a:hover { background:
 * #ebebeb }` which catches the branding link and draws an opaque
 * light-gray box around the logo on hover (very visible in dark
 * mode). Reset background explicitly here for both themes.
 */
.branding-link:hover,
.site-sidebar .branding-link:hover {
    background: transparent !important;
    color: var(--ip-corporate);
    text-decoration: none;
}

.branding-link img,
.site-sidebar img.logo,
img.logo {
    display: block;
    max-width: 130px;
    height: auto;
    margin: 0 0 0.5rem 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.branding-link__version {
    display: inline-block;
    margin-top: 0.25rem;
    color: var(--ip-gray-500);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--ip-radius-pill);
    padding: 2px 10px;
}

.site-sidebar > nav,
.sidebar > nav {
    padding: 0.5rem 0.625rem 1.5rem;
}

.sidebar-title,
.site-sidebar .caption,
.site-sidebar p.caption {
    color: var(--ip-gray-500);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 1.5rem 0.875rem 0.6rem;   /* more space between sections */
    margin: 0;
}

/* First caption shouldn't be pushed down as far as later ones. */
.site-sidebar > nav > .caption:first-of-type,
.site-sidebar > nav > p.caption:first-of-type {
    padding-top: 1rem;
}

/*
 * .tw-sidebar-item — verbatim from index.scss:79
 *   color: #4b5563 (gray-600), font-weight: 500
 *   hover: bg rgba(255,255,255,0.18), color #111827 (gray-900)
 *   active: bg rgba(255,255,255,0.22), color #0000c0 (corporate)
 */
.site-sidebar nav a:not(.branding-link),
.site-sidebar .site-nav a,
.sidebar a:not(.branding-link) {
    display: flex;
    align-items: center;
    width: 100%;
    /* Vertical breathing room — Midair uses py-2 but our docs
     * don't have FA icons so the text-only items look cramped.
     * Bump to ~12px top/bottom for nicer rhythm. */
    padding: 0.625rem 0.875rem;
    margin-bottom: 2px;
    gap: 0.875rem;
    color: var(--ip-gray-600);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.5;
    background: none;
    border-radius: var(--ip-radius);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

/*
 * Hover/active background uses a darkening tint (instead of
 * Midair's `rgba(255,255,255,0.18)`, which is invisible on top
 * of the near-white page gradient near the upper-left corner).
 * Subtle but readable on both ends of the body gradient.
 */
.site-sidebar nav a:not(.branding-link):hover,
.site-sidebar .site-nav a:hover,
.sidebar a:not(.branding-link):hover {
    background: rgba(15, 23, 42, 0.05);    /* slate-900 @ 5% */
    color: var(--ip-gray-900);
}

.site-sidebar .current > a,
.sidebar .current > a {
    background: rgba(0, 0, 192, 0.08);     /* tinted with brand */
    color: var(--ip-corporate);
    font-weight: 600;
}

/* ─── Breadcrumbs ────────────────────────────────────────────── */

.site-breadcrumbs {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0;
    box-shadow: none;
    padding: 0.85rem 2.5rem;
    margin: 0;
    font-size: 0.85rem;
}

.site-breadcrumbs a {
    color: var(--ip-gray-600);
    text-decoration: none;
}

.site-breadcrumbs a:hover {
    color: var(--ip-corporate);
}

.site-breadcrumbs__leaf {
    color: var(--ip-gray-900);
    font-weight: 600;
}

.source-link {
    padding: 1rem 2.5rem 0;
}

.source-link a {
    color: var(--ip-gray-500);
    letter-spacing: 0;
    font-size: 0.8rem;
    text-decoration: none;
}

.source-link a:hover {
    color: var(--ip-corporate);
}

/* ─── Links ──────────────────────────────────────────────────── */

.site-content a {
    color: var(--ip-corporate);
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-content a:hover {
    color: var(--ip-corporate-darker);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* ─── Buttons — three variants from action_buttons.rs ────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--ip-radius);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease;
    background-image: none;
}

/* Primary — ActionVariant::Primary (bg-blue-600 hover:bg-blue-700) */
.btn--primary {
    background: var(--ip-blue-600);
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: var(--ip-shadow-sm);
}

.btn--primary:hover {
    background: var(--ip-blue-700);
    color: #ffffff !important;
    text-decoration: none;
}

/* Secondary — ActionVariant::Secondary (bg-white/70 + border-gray-200) */
.btn--next,
.btn--prev {
    background: rgba(255, 255, 255, 0.7);
    color: var(--ip-gray-800) !important;
    border-color: var(--ip-gray-200);
    box-shadow: var(--ip-shadow-sm);
}

.btn--next:hover,
.btn--prev:hover {
    background: var(--ip-gray-50);
    color: var(--ip-gray-800) !important;
    text-decoration: none;
}

/* Accent — ActionVariant::Accent
 * (bg-gradient-to-r from-fuchsia-600 via-purple-600 to-blue-600). */
.btn--accent,
.btn--secondary {
    background: linear-gradient(to right,
                                var(--ip-fuchsia-600) 0%,
                                var(--ip-purple-600) 50%,
                                var(--ip-blue-600) 100%);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--ip-shadow-sm);
}

.btn--accent:hover,
.btn--secondary:hover {
    background: linear-gradient(to right,
                                var(--ip-fuchsia-500) 0%,
                                var(--ip-purple-500) 50%,
                                var(--ip-blue-500) 100%);
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

/* ─── Code surfaces ──────────────────────────────────────────── */

/*
 * Sphinx multi-line code is wrapped in
 *   <div class="highlight-LANG"><div class="highlight"><pre>…</pre></div></div>
 * Doxyrest inline-multiline is
 *   <pre class="highlight literal-block">…</pre>
 *
 * Upstream redactor.css paints every `[class^='highlight']`
 * with `background: #f8f8f8` (light gray) — fine on a white
 * page, but on our dark-mode body the wrapper shows up as a
 * stark white card framing the dark <pre>. Clear the wrapper
 * background and padding so only the <pre> carries any style.
 * The :not(pre) guard keeps Doxyrest's `pre.highlight` case
 * (where the same class lives directly on <pre>) on its own
 * dark-bg rules below.
 */
.site-content [class^='highlight']:not(pre),
.site-content .literal-block:not(pre),
.site-content .codeblock:not(pre),
.site-content div.highlight,
div.highlight {
    background: transparent !important;
    padding: 0 !important;
    margin: 1.25rem 0;
    border-radius: var(--ip-radius);
    overflow: hidden;
    border: none !important;
}

.site-content pre,
.codeblock,
.highlight pre,
div.highlight pre,
.site-content .literal-block,
pre.literal-block,
pre.highlight {
    background: #0f172a !important;       /* slate-900 */
    color: #e2e8f0 !important;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: var(--ip-radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--ip-shadow-sm);
    overflow-x: auto;
    line-height: 1.5;
    font-size: 0.875em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
                 Consolas, "Liberation Mono", "Courier New",
                 monospace;
}

.site-content code,
.site-content .literal,
.site-content tt {
    background: var(--ip-gray-100);
    color: var(--ip-gray-900);
    padding: 1px 6px;
    border-radius: var(--ip-radius-sm);
    border: 1px solid var(--ip-gray-200);
    font-weight: 500;
    font-size: 0.875em;
}

.site-content h1 code,
.site-content h2 code,
.site-content h3 code,
.site-content h4 code,
.site-content h5 code {
    background: transparent;
    border: none;
    color: inherit;
    font-weight: 700;
}

/*
 * Pygments token palette tuned for the slate-900 background.
 *
 * Critical: doxyrest-pygments.css ALSO uses !important on every
 * token and is loaded AFTER us in the cascade. At equal
 * specificity its !important wins. So every selector here is
 * prefixed with `.site-content` (and `pre.highlight` for the
 * cases where doxyrest's wrapper class lands on <pre> directly)
 * to bump specificity to 3 classes — beats doxyrest's 2.
 *
 * Palette: Tailwind pastels (violet / amber / emerald / sky /
 * pink) — readable on dark.
 */

/* Default colour for anything that doesn't match a specific
 * token rule — covers .n.s2 fall-through and bare text. */
.site-content .highlight pre,
.site-content .highlight pre span,
.site-content pre.highlight,
.site-content pre.highlight span {
    color: #e2e8f0 !important;            /* slate-200 */
}

/* Keywords */
.site-content .highlight .k,
.site-content .highlight .kc,
.site-content .highlight .kd,
.site-content .highlight .kn,
.site-content .highlight .kp,
.site-content .highlight .kr,
.site-content .highlight .kt,
.site-content pre.highlight .k,
.site-content pre.highlight .kc,
.site-content pre.highlight .kd,
.site-content pre.highlight .kn,
.site-content pre.highlight .kp,
.site-content pre.highlight .kr,
.site-content pre.highlight .kt {
    color: #c4b5fd !important;            /* violet-300 */
    font-weight: 600 !important;
}

/* Built-in names */
.site-content .highlight .nb,
.site-content .highlight .bp,
.site-content pre.highlight .nb,
.site-content pre.highlight .bp {
    color: #6ee7b7 !important;            /* emerald-300 */
    font-weight: 400 !important;
}

/* Function and method names — visually highlighted so the
 * call-graph is easy to scan. */
.site-content .highlight .nf,
.site-content .highlight .fm,
.site-content pre.highlight .nf,
.site-content pre.highlight .fm {
    color: #93c5fd !important;            /* blue-300 */
    font-weight: 500 !important;
}

/* Other identifiers (classes, namespaces, vars). Treat the
 * carrier text as a light neutral so colour cues stay on the
 * structural tokens above. */
.site-content .highlight .n,
.site-content .highlight .nc,
.site-content .highlight .nn,
.site-content .highlight .nv,
.site-content .highlight .na,
.site-content .highlight .ne,
.site-content .highlight .nl,
.site-content .highlight .no,
.site-content .highlight .nd,
.site-content .highlight .ni,
.site-content .highlight .nt,
.site-content .highlight .py,
.site-content .highlight .nx,
.site-content pre.highlight .n,
.site-content pre.highlight .nc,
.site-content pre.highlight .nn,
.site-content pre.highlight .nv,
.site-content pre.highlight .na,
.site-content pre.highlight .ne,
.site-content pre.highlight .nl,
.site-content pre.highlight .no,
.site-content pre.highlight .nd,
.site-content pre.highlight .ni,
.site-content pre.highlight .nt,
.site-content pre.highlight .py,
.site-content pre.highlight .nx {
    color: #e5e7eb !important;            /* gray-200 */
    font-weight: 400 !important;
}

/* Strings */
.site-content .highlight .s,
.site-content .highlight .s1,
.site-content .highlight .s2,
.site-content .highlight .sa,
.site-content .highlight .sb,
.site-content .highlight .sc,
.site-content .highlight .dl,
.site-content .highlight .sh,
.site-content .highlight .si,
.site-content .highlight .sr,
.site-content .highlight .ss,
.site-content .highlight .sx,
.site-content .highlight .se,
.site-content .highlight .sd,
.site-content pre.highlight .s,
.site-content pre.highlight .s1,
.site-content pre.highlight .s2,
.site-content pre.highlight .sa,
.site-content pre.highlight .sb,
.site-content pre.highlight .sc,
.site-content pre.highlight .dl,
.site-content pre.highlight .sh,
.site-content pre.highlight .si,
.site-content pre.highlight .sr,
.site-content pre.highlight .ss,
.site-content pre.highlight .sx,
.site-content pre.highlight .se,
.site-content pre.highlight .sd {
    color: #fde68a !important;            /* amber-200 */
}

/* Preprocessor directives (#include, #define), doc-strings */
.site-content .highlight .cp,
.site-content .highlight .cpf,
.site-content pre.highlight .cp,
.site-content pre.highlight .cpf {
    color: #fdba74 !important;            /* orange-300 */
}

/* Comments */
.site-content .highlight .c,
.site-content .highlight .c1,
.site-content .highlight .cm,
.site-content .highlight .ch,
.site-content .highlight .cs,
.site-content .highlight .cd,
.site-content pre.highlight .c,
.site-content pre.highlight .c1,
.site-content pre.highlight .cm,
.site-content pre.highlight .ch,
.site-content pre.highlight .cs,
.site-content pre.highlight .cd {
    color: #94a3b8 !important;            /* slate-400 */
    font-style: italic !important;
}

/* Numbers */
.site-content .highlight .m,
.site-content .highlight .mi,
.site-content .highlight .mf,
.site-content .highlight .mh,
.site-content .highlight .mo,
.site-content .highlight .mb,
.site-content .highlight .il,
.site-content pre.highlight .m,
.site-content pre.highlight .mi,
.site-content pre.highlight .mf,
.site-content pre.highlight .mh,
.site-content pre.highlight .mo,
.site-content pre.highlight .mb,
.site-content pre.highlight .il {
    color: #fcd34d !important;            /* amber-300 */
}

/* Operators / punctuation */
.site-content .highlight .o,
.site-content .highlight .ow,
.site-content .highlight .p,
.site-content pre.highlight .o,
.site-content pre.highlight .ow,
.site-content pre.highlight .p {
    color: #f9a8d4 !important;            /* pink-300 */
}

/* Whitespace, errors, generic markers */
.site-content .highlight .w,
.site-content pre.highlight .w   { color: #475569 !important; }

.site-content .highlight .err,
.site-content pre.highlight .err {
    color: #fca5a5 !important;
    border: none !important;
}

.site-content .highlight .gd,
.site-content pre.highlight .gd  { color: #fca5a5 !important; }
.site-content .highlight .gi,
.site-content pre.highlight .gi  { color: #86efac !important; }
.site-content .highlight .gh,
.site-content pre.highlight .gh  {
    color: #93c5fd !important;
    font-weight: 600 !important;
}
.site-content .highlight .gs,
.site-content pre.highlight .gs  { font-weight: 600 !important; }
.site-content .highlight .ge,
.site-content pre.highlight .ge  { font-style: italic !important; }
.site-content .highlight .go,
.site-content pre.highlight .go  { color: #cbd5e1 !important; }

/* Highlighted lines via `emphasize-lines:`. */
.site-content .highlight .hll,
.site-content pre.highlight .hll {
    background-color: rgba(255, 255, 255, 0.06) !important;
    display: block;
}

/* ─── Admonitions ────────────────────────────────────────────── */

.admonition {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--ip-gray-200);
    border-radius: var(--ip-radius);
    box-shadow: var(--ip-shadow-sm);
    padding: 0.9rem 1.1rem 0.9rem 1.25rem;
    margin: 1.5rem 0;
    position: relative;
    overflow: hidden;
}

.admonition::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--ip-corporate);
}

.admonition.tip,
.admonition.hint,
.admonition.important {
    background: rgba(22, 163, 74, 0.05);
    border-color: rgba(22, 163, 74, 0.2);
}
.admonition.tip::before,
.admonition.hint::before,
.admonition.important::before { background: var(--ip-green-600); }

.admonition.note,
.admonition.seealso {
    background: rgba(0, 0, 192, 0.04);
    border-color: rgba(0, 0, 192, 0.15);
}
.admonition.note::before,
.admonition.seealso::before { background: var(--ip-corporate); }

.admonition.warning,
.admonition.attention,
.admonition.caution {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.25);
}
.admonition.warning::before,
.admonition.attention::before,
.admonition.caution::before { background: var(--ip-amber-500); }

.admonition.danger,
.admonition.error {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.22);
}
.admonition.danger::before,
.admonition.error::before { background: var(--ip-red-600); }

.admonition-title {
    font-weight: 600;
    color: var(--ip-gray-900);
    margin: 0 0 0.4rem 0;
    font-size: 0.95rem;
}

/* ─── Tables — admin-grid layout, matches Midair tone ────────── */

.site-content table,
table.docutils,
table.jast-responsive-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--ip-gray-200);
    border-radius: var(--ip-radius);
    overflow: hidden;
    box-shadow: var(--ip-shadow-sm);
    margin: 1.25rem 0;
    font-size: 0.9rem;
}

table.docutils thead,
table.docutils th {
    background: rgba(255, 255, 255, 0.4);
    color: var(--ip-gray-500);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--ip-gray-200);
}

table.docutils td,
table.docutils th {
    padding: 0.85rem 1rem;
    border: none;
    border-bottom: 1px solid rgba(209, 213, 219, 0.3);
    text-align: left;
    vertical-align: top;
    color: var(--ip-gray-800);
}

table.docutils tr:last-child td { border-bottom: none; }

/*
 * Upstream redactor.css zebra-stripes odd rows with `table
 * .row-odd td { background: #f0f0f0 }`. That solid-light fill is
 * the wrong contrast for our translucent table surface (and in
 * dark mode shows up as bright white bands). Use a very subtle
 * neutral tint in light, override to a dark tint in dark mode.
 */
table .row-odd td,
table.docutils .row-odd td,
table.docutils tr:nth-child(odd) td {
    background: rgba(15, 23, 42, 0.025);
}

table.docutils tr:hover td {
    background: rgba(15, 23, 42, 0.05);   /* subtle dark tint on hover */
}

/* ─── Headerlinks (¶) ────────────────────────────────────────── */

.headerlink {
    color: var(--ip-gray-300);
    opacity: 0;
    margin-left: 0.4rem;
    font-size: 0.8em;
    transition: opacity 0.15s ease, color 0.15s ease;
    background: none;
    text-decoration: none;
}

h1:hover .headerlink, h2:hover .headerlink,
h3:hover .headerlink, h4:hover .headerlink,
h5:hover .headerlink {
    opacity: 1;
    color: var(--ip-corporate);
}

/* ─── Search field ───────────────────────────────────────────── */

.site-searchform {
    padding: 0 0.625rem 0.5rem;
}

.site-searchform input[type="text"] {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--ip-gray-200);
    border-radius: var(--ip-radius);
    padding: 0.4rem 0.75rem;
    color: var(--ip-gray-900);
    font-size: 0.85rem;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-searchform input[type="text"]:focus {
    outline: none;
    border-color: var(--ip-corporate);
    box-shadow: 0 0 0 3px rgba(0, 0, 192, 0.12);
}

/* ─── Footer + bottom nav ────────────────────────────────────── */

.site-bottom-navigation {
    padding: 1.5rem 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    margin-top: 1.5rem;
    background: transparent;
    display: flex;
    gap: 0.5rem;
}

.site-footer {
    background: transparent;
    color: var(--ip-gray-500);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding: 1rem 2.5rem;
    font-size: 0.8rem;
}

.site-footer a { color: var(--ip-gray-600); text-decoration: none; }
.site-footer a:hover { color: var(--ip-corporate); }

/* ─── Field lists ────────────────────────────────────────────── */

.field-list .field-name {
    color: var(--ip-gray-900);
    font-weight: 600;
    background: var(--ip-gray-100);
    border: 1px solid var(--ip-gray-200);
    border-radius: var(--ip-radius-sm);
    padding: 1px 8px;
    font-size: 0.85em;
}

::selection {
    background: rgba(0, 0, 192, 0.15);
    color: var(--ip-gray-900);
}

/* ─── Dark mode — mirrors Midair's dark-mode shell ──────────── */

@media (prefers-color-scheme: dark) {
    html, body { color: #fff; }

    body {
        /* <html class="dark:from-[#000000] dark:via-[#070520]
         *              dark:to-[#000000] dark:via-40% to-90%"> */
        background-color: #000000;
        background-image:
            linear-gradient(to bottom right,
                            #000000 0%,
                            #070520 40%,
                            #000000 90%);
    }

    h1, h2, h3, h4, h5, h6 { color: #f3f4f6; }

    .site-content p,
    .site-content li,
    .site-content dd {
        color: #d1d5db;
    }

    .site-sidebar,
    .sidebar {
        border-right-color: rgba(255, 255, 255, 0.08);
    }

    /*
     * Logo PNG is a black wordmark — invisible on the dark
     * page. Bleach it to white via filter: brightness(0) makes
     * it pure black silhouette first, then invert(1) flips to
     * pure white. The contrast(0.85) softens the result a hair
     * so it doesn't burn out against the gradient.
     */
    .branding-link img,
    .site-sidebar img.logo,
    img.logo {
        filter: brightness(0) invert(1) contrast(0.92);
    }

    .site-sidebar nav a:not(.branding-link),
    .site-sidebar .site-nav a,
    .sidebar a:not(.branding-link) {
        color: var(--ip-gray-400);
    }

    .site-sidebar nav a:not(.branding-link):hover,
    .site-sidebar .site-nav a:hover,
    .sidebar a:not(.branding-link):hover {
        background: rgba(255, 255, 255, 0.06);
        color: #f3f4f6;
    }

    .site-sidebar .current > a,
    .sidebar .current > a {
        /* Brand-tinted current item on dark — uses the lighter
         * corporate variant so the text is readable. */
        background: rgba(106, 106, 255, 0.14);
        color: var(--ip-corp-d-light-gray);
    }

    .branding-link {
        color: #f3f4f6;
    }

    .branding-link:hover {
        color: var(--ip-corp-d-light-gray);
    }

    .site-content a {
        color: var(--ip-corp-d-light-gray);
    }

    .site-content a:hover {
        color: #d9d9ff;
    }

    .site-content pre,
    .codeblock,
    .highlight pre,
    div.highlight pre {
        background: #0a0a14;
        border-color: rgba(255, 255, 255, 0.06);
    }

    .site-content code,
    .site-content .literal {
        background: rgba(255, 255, 255, 0.06);
        color: #e5e7eb;
        border-color: rgba(255, 255, 255, 0.08);
    }

    .site-content dl > dt,
    .site-content dl:not(.docutils) > dt:not(.sig) {
        color: #f3f4f6;
    }

    .site-content dl:not(.docutils) > dt.sig {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
        color: #f3f4f6;
    }

    .site-content dl:not(.docutils) > dt.sig .descname,
    .site-content dl:not(.docutils) > dt.sig .sig-name,
    .site-content dl:not(.docutils) > dt.sig .descclassname,
    .site-content dl:not(.docutils) > dt.sig .sig-prename {
        color: var(--ip-corp-d-light-gray);
    }

    .admonition {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .admonition-title { color: #f3f4f6; }

    table.docutils {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
    }

    table.docutils thead,
    table.docutils th {
        background: rgba(255, 255, 255, 0.02);
        color: var(--ip-gray-400);
    }

    table.docutils td {
        color: #d1d5db;
        border-bottom-color: rgba(55, 65, 81, 0.3);
    }

    /* Re-tint zebra rows on dark — upstream's #f0f0f0 is solid
     * white here, which is exactly what we saw in the screenshot. */
    table .row-odd td,
    table.docutils .row-odd td,
    table.docutils tr:nth-child(odd) td {
        background: rgba(255, 255, 255, 0.025);
    }

    table.docutils tr:hover td {
        background: rgba(255, 255, 255, 0.06);
    }

    /*
     * Secondary buttons (Prev / Next nav). In light mode they
     * are bg-white/70 border-gray-200 hover:bg-gray-50; in dark
     * mode the white bg + light gray-50 hover is far too bright.
     * Use a low-opacity slate surface instead.
     */
    .btn--next,
    .btn--prev {
        background: rgba(255, 255, 255, 0.04);
        color: #f3f4f6 !important;
        border-color: rgba(255, 255, 255, 0.10);
    }

    .btn--next:hover,
    .btn--prev:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #f3f4f6 !important;
        border-color: rgba(255, 255, 255, 0.18);
    }

    /* Branding version pill. */
    .branding-link__version {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.10);
        color: var(--ip-gray-400);
    }

    /* Search input. */
    .site-searchform input[type="text"] {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.10);
        color: #f3f4f6;
    }

    .site-searchform input[type="text"]:focus {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--ip-corp-d-light-gray);
        box-shadow: 0 0 0 3px rgba(176, 176, 240, 0.18);
    }

    /* Source-link / footer / breadcrumb separators. */
    .site-breadcrumbs,
    .site-footer,
    .site-bottom-navigation {
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    .site-breadcrumbs a       { color: var(--ip-gray-400); }
    .site-breadcrumbs__leaf   { color: #f3f4f6; }
    .source-link a            { color: var(--ip-gray-400); }
    .source-link a:hover      { color: var(--ip-corp-d-light-gray); }
    .site-footer              { color: var(--ip-gray-400); }
    .site-footer a            { color: var(--ip-gray-300); }
    .site-footer a:hover      { color: var(--ip-corp-d-light-gray); }
}