/* Common CSS for both Elliptic and Hyperbolic Kepler Tools */

/* Full viewport setup for both modules */
html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Canvas: Occupies the remaining viewport under the header */
.canvas {
    display: flex;
    height: calc(100vh - 120px); /* Adjust if header height changes */
    width: 100vw;
}

/* Main plot container (left half) */
.main-plot {
    width: 50%;
    height: 100%;
    position: relative; /* Needed for the loading overlay */
}

/* Auxiliary container for iteration and equation plots (right half) */
.aux-container {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Each auxiliary plot takes equal vertical space */
.aux-container > div {
    flex: 1;
}

/* Ensure Plotly charts occupy their full container */
#gridPlot, #iterPlot, #eqPlot {
    width: 100%;
    height: 100%;
}