/*
 * QueenK Development Clue Box
 * ===========================
 *
 * INTERNAL presentation only.
 *
 * Outer geometry is owned exclusively by:
 * component-box-host.js
 */


.queenk-layout-debug
.study-game-clues__group.queenk-dev-component-box {
    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    gap:
        8px !important;

    padding:
        4px !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;
}


/*
 * The title belongs inside the component root.
 */
.queenk-layout-debug
.study-game-clues__group.queenk-dev-component-box
> h3 {
    flex:
        none;

    position:
        sticky !important;

    top:
        0;

    z-index:
        2;

    width:
        100% !important;

    box-sizing:
        border-box;

    margin:
        0 !important;
}


/*
 * Every clue card obeys the width of the component root.
 */
.queenk-layout-debug
.study-game-clues__group.queenk-dev-component-box
.study-game-clue {
    flex:
        none;

    box-sizing:
        border-box !important;

    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        none !important;
}