/* layout.css */

/* ============================================================
   WORKSPACE — главный layout
   ============================================================ */
.app-workspace{
  display:grid;
  grid-template-columns:var(--workspace-cols);
  grid-template-areas:var(--workspace-areas);
  gap:var(--workspace-gap);
  max-width:1500px;
  width:100%;
  margin:0 auto;
  padding:0 var(--app-padding-x) var(--app-padding-y);
  flex:1;
  min-height:0;
  overflow:hidden;
}
.app-workspace>*{min-width:0;min-height:0}

/* ============================================================
   CANVAS COLUMN — toolbar / menus / editor / hints
   ============================================================ */
.canvas-col{
  grid-area:canvas;
  display:grid;
  grid-template-rows:var(--canvas-rows);
  grid-template-areas:var(--canvas-areas);
  gap:var(--canvas-gap);
  position:relative;
  overflow:hidden;
}
.canvas-col>*{min-width:0;min-height:0}
.main-toolbar{grid-area:toolbar}
.tool-menus{grid-area:menus}
.editor-row{grid-area:editor}
.hint-content-wrap{grid-area:hints}

/* ============================================================
   EDITOR ROW — sidebar | preview
   ============================================================ */
.editor-row{
  display:grid;
  grid-template-columns:var(--editor-cols);
  grid-template-areas:var(--editor-areas);
  gap:var(--sidebar-gap);
  min-height:0;
  overflow:visible;
}
.shape-sidebar{grid-area:sidebar;align-self:stretch}
.preview-wrap{grid-area:preview;min-height:0}