/*
 * QueenK Development Layout Host
 * ==============================
 *
 * Dev-only presentation accommodations for components whose
 * geometry is temporarily owned by layout-host.js.
 */


.queenk-layout-debug
.queenk-dev-layout-hosted {
    box-sizing:
        border-box !important;
}


/*
 * Crossword:
 *
 * The frame is territory.
 * The real fixed matrix remains its intrinsic size and is
 * centred by layout-host.js.
 */
.queenk-layout-debug
#answer-area.queenk-dev-layout-hosted {
    overflow:
        visible !important;
}


/*
 * Wheel:
 *
 * layout-host.js supplies a square width/height.
 * Preserve its circular presentation.
 */
.queenk-layout-debug
#wheel.queenk-dev-layout-hosted {
    aspect-ratio:
        1 / 1 !important;

    margin:
        0 !important;
}


/*
 * Across / Down:
 *
 * Their own cards may scroll if you deliberately resize a
 * region smaller than its content.
 */
.queenk-layout-debug
.study-game-clues__group.queenk-dev-layout-hosted {
    overflow:
        auto !important;
}


/*
 * Prompt.
 */
.queenk-layout-debug
#current-word.queenk-dev-layout-hosted {
    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;
}


/*
 * Controls.
 *
 * Keep actual buttons centred within whatever territory you
 * assign to them.
 */
.queenk-layout-debug
.controls.queenk-dev-layout-hosted {
    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;
}