/* Widen furo's body column, and keep both tables of contents on screen while doing it.

   Furo compiles its layout from SASS: `.content { width: 46em }`, 15em drawers either side, and breakpoints derived
   from their sum ($full-width = 82em). A media query resolves `em` against the *initial* font size, which is always
   16px, while the layout resolves the same unit against the root font size the reader's browser actually applies. The
   two only agree at a 16px default. Widening the body by re-setting those fixed widths therefore pushes the layout
   past the viewport for anyone reading at a larger font: the columns grow, the breakpoint does not move, and the
   right-hand table of contents is clipped off the edge before anything folds it away.

   So do not restate a width the breakpoints depend on. Pin the two drawers, cap the body, and let the body alone take
   up the slack. The layout then fits at any font size, and the reader keeps both tables of contents. */

.content {
    width: auto;
    max-width: 69em;
    min-width: 0;
    flex: 1 1 auto;
}

/* A flex item refuses to shrink below its content's intrinsic width unless told otherwise, and the body's widest
   token is a line of code. Without this the row holding the body and the right drawer stops shrinking at whatever the
   longest code line measures, and pushes the drawer off the edge instead. Let the row shrink: a long line then scrolls
   inside its own code block, which furo already handles, rather than scrolling the whole page sideways. */
.main {
    min-width: 0;
}

/* The drawers share a flex row with the body, so an unpinned drawer donates its width to a growing body: the table of
   contents stays on screen but shrinks until its entries wrap into an unreadable ribbon. Hold both at 15em. */
.toc-drawer {
    flex: 0 0 15em;
}

/* min-width keeps the navigation at 15em once the gutter runs out, so the body absorbs the remainder rather than the
   drawer collapsing. The calc centers the wider block on a roomy screen: half the padded body (69em + 2*3em) is 37.5em.
   Furo does the same around its own narrower column. */
.sidebar-drawer {
    width: calc(50% - 37.5em);
    min-width: 15em;
    flex: 0 0 auto;
}

/* Furo folds the right-hand table of contents into an icon below 82em, which on a normal desktop is width the reader
   still has. Keep it down to the mobile breakpoint (63em), where furo turns the navigation into an overlay and the
   drawers genuinely have nowhere to sit. Restoring the desktop rules means undoing furo's fold in full: static flow,
   no fixed panel off the right edge, and the desktop type scale rather than the larger mobile one. */
@media (min-width: 63.0625em) {
    .toc-content-icon {
        display: none;
    }
    .toc-drawer {
        position: static;
        top: auto;
        right: auto;
        height: auto;
        border-left: none;
    }
    .toc-tree {
        border-left: 1px solid var(--color-background-border);
        font-size: var(--toc-font-size);
    }
}

/* Center each diagram and let a wide flowchart scroll on its own. */
.mermaid {
    text-align: center;
    overflow-x: auto;
}

/* The diagrams carry no colors of their own: sphinxcontrib-mermaid renders them in the browser and re-renders them on
   every theme toggle, so a palette written into the diagram source would be baked at whichever theme happened to load
   first and then stay light on a dark page. The source names a role (`class default recommended`), mermaid copies that
   name onto the node, and the two palettes below fill it in. Keep a tint's meaning consistent across diagrams: blue is
   the caller's own code, orange is the lock coordinating it, green is the data under the lock, purple the way out.

   Mermaid scopes its own rules under the generated SVG's id, which outranks anything selectable from here, so these
   declarations need !important to land. */
body {
    --diagram-green-bg: #e8f5e9;
    --diagram-green-line: #2e7d32;
    --diagram-green-ink: #1b5e20;
    --diagram-orange-bg: #fff3e0;
    --diagram-orange-line: #e65100;
    --diagram-orange-ink: #bf360c;
    --diagram-blue-bg: #e3f2fd;
    --diagram-blue-line: #1565c0;
    --diagram-blue-ink: #0d47a1;
    --diagram-purple-bg: #ede7f6;
    --diagram-purple-line: #4527a0;
    --diagram-purple-ink: #311b92;
}

/* Dark tints hold their hue at roughly a tenth of the light fill's lightness, and lift the ink to the same hue's pale
   end: every pair clears 7:1, which the light palette's orange does not quite manage. Mirror furo's own two-selector
   split so an explicit toggle and an untouched "auto" both land. */
@media not print {
    body[data-theme="dark"] {
        --diagram-green-bg: #1b3a24;
        --diagram-green-line: #66bb6a;
        --diagram-green-ink: #c8e6c9;
        --diagram-orange-bg: #3d2a14;
        --diagram-orange-line: #ffa726;
        --diagram-orange-ink: #ffe0b2;
        --diagram-blue-bg: #12304d;
        --diagram-blue-line: #42a5f5;
        --diagram-blue-ink: #bbdefb;
        --diagram-purple-bg: #272040;
        --diagram-purple-line: #9575cd;
        --diagram-purple-ink: #d1c4e9;
    }

    @media (prefers-color-scheme: dark) {
        body:not([data-theme="light"]) {
            --diagram-green-bg: #1b3a24;
            --diagram-green-line: #66bb6a;
            --diagram-green-ink: #c8e6c9;
            --diagram-orange-bg: #3d2a14;
            --diagram-orange-line: #ffa726;
            --diagram-orange-ink: #ffe0b2;
            --diagram-blue-bg: #12304d;
            --diagram-blue-line: #42a5f5;
            --diagram-blue-ink: #bbdefb;
            --diagram-purple-bg: #272040;
            --diagram-purple-line: #9575cd;
            --diagram-purple-ink: #d1c4e9;
        }
    }
}

.mermaid g.node.recommended > rect,
.mermaid g.node.store > rect {
    fill: var(--diagram-green-bg) !important;
    stroke: var(--diagram-green-line) !important;
}

.mermaid g.node.recommended .nodeLabel,
.mermaid g.node.store .nodeLabel {
    color: var(--diagram-green-ink) !important;
}

.mermaid g.node.alternative > rect,
.mermaid g.node.counter > rect {
    fill: var(--diagram-orange-bg) !important;
    stroke: var(--diagram-orange-line) !important;
}

.mermaid g.node.alternative .nodeLabel,
.mermaid g.node.counter .nodeLabel {
    color: var(--diagram-orange-ink) !important;
}

.mermaid g.node.special > rect,
.mermaid g.node.thread > rect {
    fill: var(--diagram-blue-bg) !important;
    stroke: var(--diagram-blue-line) !important;
}

.mermaid g.node.special .nodeLabel,
.mermaid g.node.thread .nodeLabel {
    color: var(--diagram-blue-ink) !important;
}

.mermaid g.node.escape > rect {
    fill: var(--diagram-purple-bg) !important;
    stroke: var(--diagram-purple-line) !important;
}

.mermaid g.node.escape .nodeLabel {
    color: var(--diagram-purple-ink) !important;
}

/* A sequence diagram's `box` renders as a bare `rect.rect` with no per-box hook, so the tints above cannot reach it and
   the group colors stay in the diagram source. They are translucent for that reason: an alpha over the hue composites
   against whichever background the theme paints, reading pale on white and deep on the dark page, and it shifts the
   lightness too little to strand the title text mermaid draws on top in the theme's own ink. */