/* =============================================================================
 * Lookout Workshop — LAYOUT 2 "BOTTOM DOCK"
 * Maximises the play canvas by moving the palette + controls into a single
 * horizontal dock at the bottom of the screen.
 *
 * Activation:  body[data-layout="2"]  at  @media (min-width: 1200px)
 *
 * Grid-area names already applied by the base layer:
 *   .topbar    → top
 *   #palette   → pal
 *   .stage-wrap → stage
 *   #controls  → ctrl
 *
 * .middle is display:contents so its children participate directly in .app's
 * grid.  All rules are scoped to  @media (min-width:1200px)  +
 * body[data-layout="2"] — nothing bleeds outside that scope.
 * ========================================================================== */

@media (min-width: 1200px) {

  /* ------------------------------------------------------------------
   * APP GRID — two-column: stage fills all width, dock splits pal/ctrl
   * ------------------------------------------------------------------ */
  body[data-layout="2"] .app {
    display: grid;
    grid-template-areas:
      "top   top"
      "stage stage"
      "pal   ctrl";
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
  }

  /* ------------------------------------------------------------------
   * TOP BAR — unchanged visually, just pinned to its area
   * ------------------------------------------------------------------ */
  body[data-layout="2"] .topbar {
    grid-area: top;
  }

  /* ------------------------------------------------------------------
   * STAGE — fills the remaining vertical space; canvas stretches inside
   * ------------------------------------------------------------------ */
  body[data-layout="2"] .stage-wrap {
    grid-area: stage;
    min-height: 0;          /* allow grid row to shrink correctly      */
    display: flex;
    align-items: stretch;
    padding: 10px 12px 0;   /* a little breathing room around the canvas */
  }

  body[data-layout="2"] .stage-wrap #stage {
    width: 100%;
    height: 100%;           /* fill the flex cell so the canvas is tall */
    object-fit: contain;    /* keep 1000:640 aspect, no clipping        */
  }

  /* ------------------------------------------------------------------
   * BOTTOM DOCK — palette strip + controls row share one cream bar
   * ------------------------------------------------------------------ */

  /* Palette: horizontal scrolling strip */
  body[data-layout="2"] #palette {
    grid-area: pal;

    /* horizontal strip */
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;

    /* dock sizing: tall enough for 48-64 px tappable parts */
    height: 84px;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;

    /* dock background — cream panel, flat-toybox style */
    background: var(--panel);
    border-top: 3px solid var(--panel-edge);
    border-radius: 0;       /* flush with the screen edge in the dock   */

    /* override the default column-layout border/radius from theme.css  */
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  /* Keep individual part buttons from shrinking */
  body[data-layout="2"] #palette .part-btn {
    flex-shrink: 0;
    min-width: 64px;
    min-height: 56px;
  }

  /* Controls: same dock height, vertically centred, sits at bottom-right */
  body[data-layout="2"] #controls {
    grid-area: ctrl;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;

    /* match the palette strip height and cream look */
    height: 84px;
    background: var(--panel);
    border-top: 3px solid var(--panel-edge);
    border-left: 3px solid var(--panel-edge); /* subtle divider from palette */
  }

} /* end @media (min-width: 1200px) */