/*
 * Keep the ranking table's visual frame independent from its scrolling content.
 * The old table border travelled with horizontal scrolling, while the native
 * scrollbar could paint beyond the rounded parent at the bottom edge.
 */
@media (min-width: 701px) {
    .quiz-roster-scroll-frame {
        position: relative;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 0;
        box-sizing: border-box;
        overflow: hidden;
        border: 1px solid #eadfd2;
        border-radius: 12px;
        background: #fffdf9;
        contain: layout paint;
    }

    .quiz-roster-scroll-frame > .quiz-roster-report {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: scroll !important;
        overflow-y: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        scrollbar-gutter: stable !important;
        contain: layout paint;
    }

    /* The frame owns the fixed side borders; the table must not draw a moving edge. */
    .quiz-roster-scroll-frame .quiz-roster-score-table {
        border-left: 0 !important;
        border-right: 0 !important;
    }

    .quiz-plaza-roster-panel .quiz-roster-scroll-frame {
        height: min(72vh, 720px);
        min-height: 360px;
    }

    .quiz-plaza-roster-panel.is-viewport-pinned .quiz-roster-scroll-frame {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }

    #publish-tab-roster > .quiz-flat-panel.is-roster-managing .quiz-roster-scroll-frame {
        display: none;
    }
}

@media (max-width: 700px) {
    /* Keep the existing phone layout and its natural page-height table. */
    .quiz-roster-scroll-frame {
        display: contents;
    }
}