/* Keep the tool in the first screen and the reading content below it. */
:root { --workspace-header-height: 75px; }
#workspace { display: flow-root; }
#workspace .main-container {
    height: calc(100vh - var(--workspace-header-height) - 40px);
    height: calc(100dvh - var(--workspace-header-height) - 40px);
    min-height: 420px;
    margin: 16px 24px 24px;
    grid-template-rows: minmax(0, 1fr);
    overflow-anchor: none;
}
#workspace .panel { min-height: 0; height: 100%; }
#workspace .panel > .panel-header,
#workspace .panel > .settings-toolbar,
#workspace .panel > .group-selection,
#workspace .panel > .filter-explanation { flex-shrink: 0; }
#workspace .panel > .panel-content {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    max-height: none;
    overscroll-behavior: contain;
}
#workspace #jsonInput { display: block; min-height: 0; height: 100%; overscroll-behavior: contain; }
#workspace .conditional-builder,
#workspace .group-picker {
    flex-shrink: 1;
    min-height: 0;
    max-height: 55%;
    overflow-y: auto;
    overscroll-behavior: contain;
}
#workspace .results-panel { flex-shrink: 1; min-height: 0; max-height: 40%; }
#workspace .results-header,
#workspace .results-footer { flex-shrink: 0; }
#workspace .results-scroll { overscroll-behavior: contain; }
@media (max-width: 1100px) {
    #workspace .main-container {
        min-height: 600px;
        grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
    }
}
@media (max-width: 640px) {
    :root { --workspace-header-height: 123px; }
    #workspace .main-container {
        height: calc(100vh - var(--workspace-header-height) - 24px);
        height: calc(100dvh - var(--workspace-header-height) - 24px);
        margin: 12px;
    }
}