.extra-space-below {
    margin-bottom: 2.5em;
}

/* Formulation on demand: one bordered card holding the header (Rendered/Raw
   toggle + Copy icon) and both view panels, so the controls sit inside the
   same background area as the content instead of floating above it.
   formulation-view-toggle.js builds this card around the toggle and panels
   that ship in the .rst markup. */
[role="main"] .formulation-card {
    margin-bottom: 1.5em;
    border: 1px solid var(--color-background-border);
    border-radius: 0.4em;
    background: var(--color-background-secondary);
    overflow: hidden;
}

[role="main"] .formulation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    padding: 0.5em 0.6em;
    border-bottom: 1px solid var(--color-background-border);
}

/* Rendered/Raw text toggle. Two buttons in one bordered group, styled like a
   segmented control rather than sphinx-tabs' underline tabs, so it reads as a
   view switch local to this one panel rather than as another row of
   page-level tabs. The selected button fills with the brand color. */
[role="main"] .formulation-view-toggle {
    display: inline-flex;
    border: 1px solid var(--color-background-border);
    border-radius: 0.4em;
    overflow: hidden;
}

[role="main"] .formulation-view-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    padding: 0;
    border: none;
    background: var(--color-background-primary);
    color: var(--color-foreground-secondary);
    cursor: pointer;
}

[role="main"] .formulation-view-button svg {
    width: 1em;
    height: 1em;
    stroke: currentColor;
}

[role="main"] .formulation-view-button + .formulation-view-button {
    border-left: 1px solid var(--color-background-border);
}

[role="main"] .formulation-view-button:hover {
    background: var(--color-background-hover);
}

[role="main"] .formulation-view-button[aria-pressed="true"] {
    background: var(--color-brand-content);
    color: #fff;
}

[role="main"] .formulation-view-rendered {
    padding: 1.2em 1.3em;
}

[role="main"] .formulation-view-rendered > :first-child {
    margin-top: 0;
}

[role="main"] .formulation-view-rendered > :last-child {
    margin-bottom: 0;
}

/* The literalinclude's own .highlight already draws a border/background
   (pygments); drop both so the raw view sits flush inside the card border
   instead of doubling it up. */
[role="main"] .formulation-view-raw .highlight {
    margin: 0;
    border: none;
    border-radius: 0;
}

/* Copy button injected by formulation-view-toggle.js, in the header next to
   the toggle. Copies the raw Markdown/LaTeX shown in the Raw text view, since
   the rendered panel itself is HTML/MathJax rather than copyable text. Same
   icon-button treatment as sphinx_copybutton's own button (see copybutton.css
   button.copybtn) — icon only, no label — so it reads as the same control
   family as the Code tab's copy button. */
[role="main"] .formulation-copy-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8em;
    height: 1.8em;
    padding: 0;
    border: none;
    border-radius: 0.3em;
    background: transparent;
    color: var(--color-foreground-secondary);
    cursor: pointer;
}

[role="main"] .formulation-copy-button svg {
    width: 1.1em;
    height: 1.1em;
    stroke: currentColor;
}

[role="main"] .formulation-copy-button:hover {
    background: var(--color-background-hover);
}

[role="main"] .formulation-copy-button--copied {
    color: #22863a;
}