/* File: /test/recipeWorkspace.css
   Version inherited from BW_VERSION in openRecipe.php
*/

.workspace {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, .82fr) minmax(380px, 1.18fr);
    grid-template-areas:
        "ingredients steps"
        "media steps"
        "tools tools";
    gap: 14px;
    min-height: 690px;
    padding: 14px;
}

/*
 * When any panel is floating, JavaScript adds:
 * body.has-floating-panels
 *
 * This temporarily creates a much taller document so floating
 * panels can use page/document coordinates instead of being
 * trapped inside the viewport.
 */
body.has-floating-panels main {
    min-height: 180vh;
}

body.has-floating-panels .workspace {
    min-height: 1250px;
}

/* -------------------------------------------------
   Docked panel placement
------------------------------------------------- */

.panel {
    position: relative;
    min-width: 0;
}

.panel[data-panel="ingredients"] {
    grid-area: ingredients;
}

.panel[data-panel="steps"] {
    grid-area: steps;
}

.panel[data-panel="media"] {
    grid-area: media;
}

.panel[data-panel="tools"] {
    grid-area: tools;
}

/* File: /test/recipeWorkspace.css */

.workspace.layout-stacked {
    grid-template-columns: 1fr;
    grid-template-areas:
        "media"
        "ingredients"
        "steps"
        "tools";
}

.workspace.layout-focus {
    grid-template-columns: 1fr;
    grid-template-areas:
        "steps";
}

.workspace.layout-focus .panel:not([data-panel="steps"]) {
    display: none;
}

.workspace.layout-media {
    grid-template-columns:
        minmax(320px, 1fr)
        minmax(320px, 1fr);

    grid-template-areas:
        "media steps"
        "ingredients steps"
        "tools tools";
}
/*
 * Reflow mode used after one or more panels leave
 * the docked workspace.
 */
.workspace.layout-custom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: none;
    grid-auto-flow: dense;
    align-items: start;
}

.workspace.layout-custom > .panel {
    grid-area: auto !important;
}

.workspace.layout-custom > .panel[data-panel="tools"] {
    grid-column: 1 / -1;
}

/* One docked panel: use all available width. */
.workspace.docked-count-1 {
    grid-template-columns: 1fr;
}

.workspace.docked-count-1 > .panel {
    grid-column: 1 / -1;
}

/*
 * Two panels remaining:
 * sensible vertical full-width stacking.
 */
.workspace.docked-count-2 {
    grid-template-columns: 1fr;
}

.workspace.docked-count-2 > .panel {
    grid-column: 1 / -1;
}

/*
 * Three remaining panels:
 * full-width stacking prevents awkward holes.
 */
.workspace.docked-count-3 {
    grid-template-columns: 1fr;
}

.workspace.docked-count-3 > .panel {
    grid-column: 1 / -1;
}

/* -------------------------------------------------
   Floating layer
------------------------------------------------- */

.floatingLayer {
    position: absolute;
    inset: 0;
    z-index: 5000;
    pointer-events: none;
}

.panel.is-floating {
    position: absolute;
    grid-area: auto !important;

    width: 520px;
    min-width: 260px;
    min-height: 120px;

    overflow: hidden;

    pointer-events: auto;

    box-shadow:
        0 28px 70px rgba(22, 16, 11, .42),
        0 0 0 2px rgba(255, 255, 255, .45);
}

.panel.is-floating .panelHeader {
    cursor: move;
    touch-action: none;
}

.panel.is-floating .panelZButton {
    display: inline-grid;
    place-items: center;
}

.panelZButton {
    display: none;
}

/* -------------------------------------------------
   Custom eight-direction resize handles
------------------------------------------------- */

.panelResizeHandle {
    position: absolute;
    z-index: 20;
}

.panelResizeHandle[data-edge="top"] {
    top: -5px;
    left: 10px;
    right: 10px;
    height: 10px;
    cursor: ns-resize;
}

.panelResizeHandle[data-edge="bottom"] {
    bottom: -5px;
    left: 10px;
    right: 10px;
    height: 10px;
    cursor: ns-resize;
}

.panelResizeHandle[data-edge="left"] {
    top: 10px;
    bottom: 10px;
    left: -5px;
    width: 10px;
    cursor: ew-resize;
}

.panelResizeHandle[data-edge="right"] {
    top: 10px;
    bottom: 10px;
    right: -5px;
    width: 10px;
    cursor: ew-resize;
}

.panelResizeHandle[data-edge="top-left"] {
    top: -6px;
    left: -6px;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
}

.panelResizeHandle[data-edge="top-right"] {
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    cursor: nesw-resize;
}

.panelResizeHandle[data-edge="bottom-left"] {
    bottom: -6px;
    left: -6px;
    width: 16px;
    height: 16px;
    cursor: nesw-resize;
}

.panelResizeHandle[data-edge="bottom-right"] {
    right: -6px;
    bottom: -6px;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
}

/* -------------------------------------------------
   Smaller screens
------------------------------------------------- */

@media (max-width: 980px) {
    .workspace {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "ingredients"
            "steps"
            "tools";
    }
}

@media (max-width: 650px) {
    .workspace {
        padding: 9px;
    }

    /*
     * Mobile floating panels remain essentially
     * full-screen instead of becoming tiny draggable
     * desktop windows.
     */
    .panel.is-floating {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0;
    }
}