/*
 * QueenK Development Clue Panel Host
 *
 * Across / Down only.
 */


.queenk-layout-debug
.queenk-dev-clue-panel-host {
    box-sizing:
        border-box;

    overflow:
        hidden;

    pointer-events:
        none;
}


.queenk-layout-debug
.queenk-dev-clue-panel-content {
    box-sizing:
        border-box !important;

    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;

    pointer-events:
        auto;
}


/*
 * Heading belongs to the clue component itself.
 */
.queenk-layout-debug
.queenk-dev-clue-panel-content
> h3 {
    flex:
        none;

    position:
        sticky !important;

    top:
        0;

    z-index:
        2;

    width:
        100% !important;

    box-sizing:
        border-box;

    margin:
        0 !important;
}


/*
 * Clue cards fill the available panel width.
 */
.queenk-layout-debug
.queenk-dev-clue-panel-content
.study-game-clue {
    flex:
        none;

    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    box-sizing:
        border-box !important;
}