/* =============================================================================
 * Lookout Workshop — LAYOUT 3: SIDE RAILS
 *
 * Activated by:  body[data-layout="3"]  at  >=1200px
 *
 * Grid areas:
 *   top  = .topbar    (level picker across the full top)
 *   pal  = #palette   (left rail, vertical column)
 *   stage= .stage-wrap (centered stage between rails)
 *   ctrl = #controls  (right rail, vertical column)
 *
 * A sibling agent sets .middle { display: contents } so its children
 * participate directly in .app's grid via grid-area names.
 * ============================================================================ */

@media (min-width: 1200px) {

  /* ------------------------------------------------------------------
   * 1. APP GRID — three columns: left-rail | stage | right-rail
   * ------------------------------------------------------------------ */
  body[data-layout="3"] .app {
    display: grid;
    grid-template-areas:
      "top   top   top"
      "pal   stage ctrl";
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    height: 100vh;
    gap: 12px;
    padding: 12px;
    /* Override the sky background gap so the sky shows through nicely */
    background: var(--sky);
  }

  /* ------------------------------------------------------------------
   * 2. TOP BAR — spans full width across all three columns
   * ------------------------------------------------------------------ */
  body[data-layout="3"] .topbar {
    grid-area: top;
    /* Keep existing topbar styles; just reset margin so it sits flush */
    margin: 0;
    border-radius: var(--radius);
    border: 3px solid var(--panel-edge);
    /* Override the full-bleed border-bottom from theme.css */
    border-bottom: 3px solid var(--panel-edge);
    box-shadow: var(--edge);
  }

  /* ------------------------------------------------------------------
   * 3. LEFT RAIL — palette, vertical, same panel style as today
   * ------------------------------------------------------------------ */
  body[data-layout="3"] #palette {
    grid-area: pal;
    /* Already a vertical flex column — keep it, just anchor it */
    align-self: stretch;
    width: 132px;
    overflow-y: auto;
    /* Existing panel styles from theme.css already apply; reinforce: */
    background: var(--panel);
    border: 3px solid var(--panel-edge);
    border-radius: var(--radius);
    box-shadow: var(--edge);
    padding: 8px 6px;
    gap: 8px;
  }

  /* ------------------------------------------------------------------
   * 4. STAGE — fills remaining horizontal space, canvas aspect-correct
   * ------------------------------------------------------------------ */
  body[data-layout="3"] .stage-wrap {
    grid-area: stage;
    /* Center the canvas both axes; let it shrink to fit */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
  }

  body[data-layout="3"] .stage-wrap #stage {
    width: 100%;
    height: auto;
    max-height: 100%;
    /* Preserve theme styling */
    border-radius: var(--radius);
    border: 4px solid var(--panel);
    box-shadow: var(--edge);
    background: var(--sky);
  }

  /* ------------------------------------------------------------------
   * 5. RIGHT RAIL — controls, vertical column, cohesive panel styling
   *    Key difference from default layout: moves from bottom to right.
   * ------------------------------------------------------------------ */
  body[data-layout="3"] #controls {
    grid-area: ctrl;
    /* Vertical rail */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    /* Consistent width with left rail */
    width: 132px;
    padding: 12px 10px;
    /* Panel styling matching the palette rail */
    background: var(--panel);
    border: 3px solid var(--panel-edge);
    border-radius: var(--radius);
    box-shadow: var(--edge);
    /* Ensure buttons can scroll if content overflows vertically */
    overflow-y: auto;
    align-self: stretch;
  }

  /* Control buttons: expand to full rail width, stack vertically */
  body[data-layout="3"] #controls .ctrl {
    width: 100%;
    padding: 14px 8px;
    font-size: 16px;
    /* Keep theme's border-radius/box-shadow/transitions */
    border-radius: 16px;
    min-height: 52px;
    /* Ensure text stays readable at narrower width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ------------------------------------------------------------------
   * 6. SUPPRESS the default bottom bar appearance in layout 3
   *    (#controls moves from .bottombar at the bottom to the right rail)
   * ------------------------------------------------------------------ */
  body[data-layout="3"] .bottombar {
    /* .bottombar is #controls itself via id — no separate element to hide.
       If theme adds padding/border to .bottombar, neutralise them here so
       the right-rail styles above take full control. */
    justify-content: flex-start;
    border-top: none;
    background: transparent;
    padding: 0;
  }

}