/* Both panels remain visible without scripting, including when printed. */
.rstdemo {
    min-width: 0;
    max-width: 100%;
    margin: 1.5rem 0;
}

.rstdemo > .rstdemo-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    text-align: left;
}

.rstdemo-side-by-side > .rstdemo-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rstdemo-panels > .rstdemo-panel {
    min-width: 0;
    border: 1px solid var(--color-background-border, #888);
    border-radius: 0.25rem;
    overflow: auto;
}

.rstdemo .rstdemo-panel > .rstdemo-panel-label {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-background-border, #888);
    background: var(--color-background-secondary, transparent);
    color: var(--color-foreground-primary, inherit);
    font-size: 1rem;
}

.rstdemo-panel > .rstdemo-result {
    padding: 0.75rem;
}

.rstdemo-result > :first-child { margin-top: 0; }
.rstdemo-result > :last-child { margin-bottom: 0; }
.rstdemo-panel > div.rstdemo-source { margin: 0; }

@media (max-width: 60rem) {
    .rstdemo-side-by-side > .rstdemo-panels {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media print {
    .rstdemo > .rstdemo-panels { display: block; }
    .rstdemo-panels > .rstdemo-panel {
        overflow: visible;
        margin-bottom: 1rem;
    }
    .rstdemo { break-inside: auto; }
    .rstdemo-panel-label { break-after: avoid; }
    .rstdemo-source pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}