/*
 * Inventory Designer: object types on the left, the selected type's schema, fields and live preview
 * in the middle, the relationship vocabulary on the right.
 */

.designer-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  align-items: start;
  gap: var(--space-5);
}

.designer-rail,
.designer-right {
  position: sticky;
  top: calc(var(--header-height) + var(--space-3));
}

.designer-workspace {
  display: grid;
  gap: var(--space-5);
}

.type-list {
  display: grid;
  gap: var(--space-1);
}

.type-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
}

.type-row:hover,
.type-row.active {
  background: var(--accent-soft);
}

.type-row.active {
  box-shadow: inset 3px 0 var(--accent);
}

.type-row b,
.type-row small {
  display: block;
}

.type-row small {
  margin-top: var(--space-0-5);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.chev {
  color: var(--text-faint);
  font-size: var(--text-xl);
}

.core-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.core-fields span {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  font-size: var(--text-xs);
}

.preview-object {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.preview-hero {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-subtle);
}

.preview-hero h3 {
  margin: var(--space-0-5) 0;
}

.preview-hero p {
  margin: 0;
  color: var(--text-muted);
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.preview-grid div {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
}

.preview-grid small {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-faint);
  font-size: var(--text-xs);
}

.designer-note {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.designer-note p {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 1100px) {
  .designer-shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .designer-right {
    grid-column: 1 / -1;
    position: static;
  }
}

@media (max-width: 820px) {
  .designer-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .designer-rail {
    position: static;
  }

  .preview-grid {
    grid-template-columns: 1fr 1fr;
  }
}