/* Small layout utilities — grown as needed (kept deliberately tiny; no framework). */

.u-container {
  inline-size: 100%;
  max-inline-size: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-4);
  padding-block: var(--space-8);
}

.u-stack > * + * {
  margin-block-start: var(--space-4);
}

/* For metadata clusters that should read as one tight group (a card's
   title/thumbnail/dims, a field's label/hint) rather than evenly-spaced
   siblings. */
.u-stack--tight > * + * {
  margin-block-start: var(--space-2);
}

/* For top-level page sections that need to visually separate from what's
   above them, not just space out from it. */
.u-stack--loose > * + * {
  margin-block-start: var(--space-10);
}

.u-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.u-container--narrow {
  max-inline-size: 28rem;
}

.u-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
}

.u-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.u-divider {
  inline-size: var(--border-width);
  block-size: 22px;
  background: var(--border-default);
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sidebar + main split (object list + canvas, or any list+detail layout).
   Collapses to one column on narrow viewports. */
.u-split {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 56rem) {
  .u-split {
    grid-template-columns: 1fr;
  }
}

/* Sidebar + main + inspector (bin list, canvas, properties panel). Columns
   stretch to match the tallest (the canvas) so the sidebar reads as a full
   height rail, not a short list that stops partway down. Collapses to one
   column on narrow viewports, same breakpoint as u-split. */
.u-split-3 {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr minmax(280px, 340px);
}

@media (max-width: 72rem) {
  .u-split-3 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Two form fields side by side (e.g. width + depth) instead of stacked. */
.u-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 30rem) {
  .u-row-2 {
    grid-template-columns: 1fr;
  }
}