/* ==========================================================================
   Ragdoll Sphinx Documentation Theme Customizations
   Clean, modern, information-dense styling inspired by Pydantic AI / Starlight
   ========================================================================== */

:root {
    /* Modern, clean sans-serif and monospace font stacks */
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-stack--monospace: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --font-stack--headings: var(--font-stack);

    /* Compact typographic base scale (~15px normal base) */
    --font-size--normal: 93.75%;  /* ~15px */
    --font-size--small: 84%;      /* ~13.5px */
    --font-size--small--2: 80%;   /* ~12.8px */
    --font-size--small--3: 75%;   /* ~12px */

    /* Information-dense left navigation sidebar */
    --sidebar-item-font-size: 0.84rem;
    --sidebar-item-line-height: 1.25rem;
    --sidebar-item-spacing-vertical: 0.22rem;
    --sidebar-item-spacing-horizontal: 0.75rem;

    /* Information-dense right TOC */
    --toc-font-size: 0.8125rem;
    --toc-title-font-size: 0.75rem;
    --toc-spacing-vertical: 0.5rem;
    --toc-item-spacing-vertical: 0.18rem;
    --toc-spacing-horizontal: 0.75rem;

    /* Code & Admonitions */
    --code-font-size: 0.82rem;
    --admonition-font-size: 0.84rem;
    --admonition-title-font-size: 0.84rem;
}

/* Prevent Furo from artificially scaling up base font size on ultra-wide screens */
@media (min-width: 97em) {
    html {
        font-size: 100% !important;
    }
}

/* Hide the "Made with Furo" text in the footer */
.bottom-of-page .left-details {
    font-size: 0;
}

.bottom-of-page .left-details > .copyright,
.bottom-of-page .left-details > .last-updated {
    font-size: 0.82rem;
}

.bottom-of-page .left-details > a {
    display: none;
}

/* --- Desktop Layout: Symmetric Margins & Centered Content --- */
@media (min-width: 82em) {
    /* Left sidebar firmly docked with clean, consistent width (Starlight / Pydantic style) */
    .sidebar-drawer {
        width: 17rem !important;
        min-width: 17rem !important;
        justify-content: flex-start !important;
    }

    .sidebar-container {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Right TOC drawer */
    .toc-drawer {
        width: 16rem !important;
        min-width: 16rem !important;
        box-sizing: border-box !important;
        background: var(--color-toc-background);
        border-left: 1px solid var(--color-background-border);
        padding-right: 0.5rem;
    }

    /* Shrink & hide right TOC drawer when collapsed (pre-applied via html.toc-collapsed to prevent FOUC) */
    html.toc-collapsed .toc-drawer,
    .toc-drawer.toc-collapsed {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        overflow: hidden !important;
        display: none !important;
    }

    /* Main reading area occupies the remaining space between left and right */
    .main {
        display: flex !important;
        flex: 1 !important;
        min-width: 0 !important;
        justify-content: center !important;
    }

    /* Content is strictly centered inside .main ensuring IDENTICAL left and right whitespace margins */
    .content {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 56rem !important;
        padding: 0 2.5rem !important;
        box-sizing: border-box !important;
    }

    /* When TOC is collapsed, content expands symmetrically with identical left/right margins */
    html.toc-collapsed .main .content,
    .main.toc-collapsed .content,
    body.toc-collapsed .content {
        max-width: 72rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 2.5rem !important;
    }

    /* Smooth transitions ONLY when interacting via click, NEVER on initial page load */
    .toc-animating .content {
        transition: max-width 0.25s ease !important;
    }

    .toc-animating .toc-drawer {
        transition: width 0.25s ease, min-width 0.25s ease !important;
    }

    .toc-animating .toc-toggle-btn {
        transition: right 0.25s ease !important;
    }

    /* Toggle button attached to the TOC or right viewport border */
    .toc-toggle-btn {
        position: fixed;
        top: 50vh;
        transform: translateY(-50%);
        z-index: 51;
        width: 1.15rem;
        height: 2.6rem;
        padding: 0;
        border: 1px solid var(--color-background-border);
        border-right: none;
        border-radius: 0.35rem 0 0 0.35rem;
        background: var(--color-background-secondary);
        color: var(--color-foreground-secondary);
        cursor: pointer;
        font-size: 0.7rem;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .toc-toggle-btn:hover {
        background: var(--color-background-hover);
        color: var(--color-foreground-primary);
    }
}

/* Hide toggle on tablet and mobile viewports where Furo uses an overlay */
@media (max-width: 82em) {
    .toc-toggle-btn {
        display: none !important;
    }
}

/* --- Article Content Typography (Pydantic / Starlight scale) --- */
article[role="main"] {
    line-height: 1.55;
    font-size: 0.9375rem;
}

article[role="main"] p {
    margin-top: 0.4rem;
    margin-bottom: 0.7rem;
}

/* Compact heading hierarchy */
article[role="main"] h1 {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 1.2rem;
    margin-bottom: 0.8rem;
    letter-spacing: -0.02em;
}

article[role="main"] h2 {
    font-size: 1.38rem;
    font-weight: 650;
    line-height: 1.3;
    margin-top: 1.4rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-background-border);
    letter-spacing: -0.015em;
}

article[role="main"] h3 {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    margin-top: 1.1rem;
    margin-bottom: 0.35rem;
}

article[role="main"] h4 {
    font-size: 1.0rem;
    font-weight: 600;
    margin-top: 0.9rem;
    margin-bottom: 0.3rem;
}

/* Compact lists */
article[role="main"] ul,
article[role="main"] ol {
    margin-top: 0.35rem;
    margin-bottom: 0.7rem;
    padding-left: 1.4rem;
}

article[role="main"] li {
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
    line-height: 1.5;
}

article[role="main"] li > p {
    margin-top: 0.15rem;
    margin-bottom: 0.3rem;
}

/* Compact code blocks */
.highlight {
    margin: 0.75rem 0 !important;
    border-radius: 0.45rem !important;
}

.highlight pre {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    padding: 0.65rem 0.85rem !important;
}

/* Inline code styling */
code:not(.highlight code) {
    font-size: 0.85em;
    padding: 0.12em 0.35em;
    border-radius: 0.25rem;
}

/* Compact tables */
article[role="main"] table.docutils {
    font-size: 0.84rem;
    margin: 0.75rem 0;
    width: 100%;
}

article[role="main"] table.docutils th,
article[role="main"] table.docutils td {
    padding: 0.35rem 0.6rem;
    line-height: 1.4;
}

/* Compact admonitions (callouts) */
.admonition {
    margin: 0.75rem 0 !important;
    padding: 0.6rem 0.85rem !important;
    font-size: 0.84rem !important;
    border-radius: 0.4rem !important;
}

.admonition .admonition-title {
    font-size: 0.84rem !important;
    margin-bottom: 0.3rem !important;
}