/* Echo UI: reusable composition primitives. */
.ui-page-header,
.ui-section-header,
.ui-split {
  display: flex;
  justify-content: space-between;
  gap: var(--ui-space-4);
  align-items: flex-start;
}
.ui-page-header > :first-child { min-width: 0; }
.ui-page-header > .ui-page-actions { margin-left: auto; }

.ui-stack { display: flex; flex-direction: column; gap: var(--ui-space-5); }
.ui-stack--sm { gap: var(--ui-space-3); }
.ui-stack--xs { gap: var(--ui-space-2); }
.ui-cluster { display: flex; align-items: center; gap: var(--ui-space-2); flex-wrap: wrap; }
.ui-cluster--end { justify-content: flex-end; }
.ui-grid { display: grid; gap: var(--ui-space-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ui-row { display: flex; gap: var(--ui-space-4); flex-wrap: wrap; align-items: flex-start; }
.ui-row > * { flex: 1 1 220px; }
.ui-sidebar-layout { display: flex; gap: var(--ui-space-7); align-items: flex-start; flex-wrap: wrap; }
.ui-sidebar-layout__main { flex: 3 1 720px; min-width: 360px; }
.ui-sidebar-layout__aside { flex: 1 1 260px; min-width: 240px; }

@media (max-width: 700px) {
  .ui-page-header,
  .ui-section-header,
  .ui-split { flex-wrap: wrap; }
  .ui-page-header > .ui-page-actions { margin-left: 0; }
  .ui-sidebar-layout__main,
  .ui-sidebar-layout__aside { min-width: 100%; }
}