/*
 * QueenK Development Layout Editor
 *
 * Presentation ONLY.
 *
 * No crossword geometry.
 * No wheel geometry.
 * No gameplay layout rules.
 */

.queenk-layout-debug
#queenk-layout-stage {
    position: fixed;
    inset: 0;

    z-index: 2147483000;

    pointer-events: none;
}


.queenk-layout-debug
.queenk-layout-frame {
    position: fixed;

    box-sizing: border-box;

    border:
        2px dashed
        rgba(255, 210, 70, 0.9);

    background:
        rgba(255, 210, 70, 0.035);

    pointer-events: auto;
}


.queenk-layout-debug
.queenk-layout-frame.is-selected {
    border-style: solid;

    background:
        rgba(90, 180, 255, 0.07);
}


.queenk-layout-frame__title {
    position: absolute;

    left: -2px;
    top: -30px;

    min-height: 28px;

    padding:
        3px 9px;

    border:
        1px solid
        rgba(255, 210, 70, 0.9);

    border-radius:
        5px 5px 0 0;

    background:
        rgba(8, 14, 22, 0.96);

    color: white;

    font:
        600 12px/1.2
        system-ui,
        sans-serif;

    cursor: move;

    touch-action: none;
}


.queenk-layout-resize {
    position: absolute;

    width: 12px;
    height: 12px;

    background: white;

    border:
        2px solid
        rgba(40, 120, 220, 0.95);

    border-radius: 2px;

    touch-action: none;
}


.queenk-layout-resize[
    data-layout-resize="nw"
] {
    left: -7px;
    top: -7px;

    cursor: nwse-resize;
}


.queenk-layout-resize[
    data-layout-resize="ne"
] {
    right: -7px;
    top: -7px;

    cursor: nesw-resize;
}


.queenk-layout-resize[
    data-layout-resize="sw"
] {
    left: -7px;
    bottom: -7px;

    cursor: nesw-resize;
}


.queenk-layout-resize[
    data-layout-resize="se"
] {
    right: -7px;
    bottom: -7px;

    cursor: nwse-resize;
}


.queenk-layout-resize[
    data-layout-resize="n"
],
.queenk-layout-resize[
    data-layout-resize="s"
] {
    left: 50%;

    transform:
        translateX(-50%);

    cursor: ns-resize;
}


.queenk-layout-resize[
    data-layout-resize="n"
] {
    top: -7px;
}


.queenk-layout-resize[
    data-layout-resize="s"
] {
    bottom: -7px;
}


.queenk-layout-resize[
    data-layout-resize="e"
],
.queenk-layout-resize[
    data-layout-resize="w"
] {
    top: 50%;

    transform:
        translateY(-50%);

    cursor: ew-resize;
}


.queenk-layout-resize[
    data-layout-resize="e"
] {
    right: -7px;
}


.queenk-layout-resize[
    data-layout-resize="w"
] {
    left: -7px;
}


.queenk-layout-readout {
    position: fixed;

    right: 12px;
    top: 12px;

    z-index: 2147483001;

    box-sizing: border-box;

    width: 260px;

    padding: 12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.22);

    border-radius: 8px;

    background:
        rgba(5, 10, 18, 0.94);

    color: white;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
}


.queenk-layout-readout pre {
    margin:
        10px 0;

    white-space: pre-wrap;

    font-size: 12px;
    line-height: 1.5;
}


.queenk-layout-readout__actions {
    display: flex;

    gap: 6px;
}


.queenk-layout-readout button {
    min-height: 34px;

    padding:
        5px 8px;
}


/* =========================================================
   DEV LAYOUT POINTER OWNERSHIP
   =========================================================

   A layout territory is NOT itself an input surface.

   Only:
       - its title/drag handle
       - its resize handles

   may capture pointer input.

   This prevents large or overlapping editor territories from
   stealing mouse events from another region.
   ========================================================= */


.queenk-layout-debug
.queenk-layout-frame {
    pointer-events:
        none !important;
}


/*
 * Moving a region is deliberate:
 * grab its labelled title only.
 */
.queenk-layout-debug
.queenk-layout-frame
> .queenk-layout-frame__title {
    pointer-events:
        auto !important;

    z-index:
        10000;
}


/*
 * Resizing is deliberate:
 * grab one of the blue handles only.
 */
.queenk-layout-debug
.queenk-layout-frame
> .queenk-layout-resize {
    pointer-events:
        auto !important;

    z-index:
        10001;
}


/*
 * Hosted QueenK content must remain visually visible but must
 * never become part of the layout-editor drag surface.
 *
 * Its normal gameplay pointer behaviour remains available
 * through its own element where appropriate.
 */
.queenk-layout-debug
.queenk-layout-frame
> .queenk-dev-layout-hosted {
    pointer-events:
        auto;
}