/** Left (Elements) and right (Properties) sidebar internals. */
.eps-elements__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eps-space-1);
  padding: 0 var(--eps-space-3) var(--eps-space-2);
}
.eps-chip {
  font-family: var(--eps-font);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--eps-radius-pill);
  border: 1px solid var(--eps-border);
  background: var(--eps-surface);
  color: var(--eps-text-secondary);
  cursor: pointer;
}
.eps-chip.is-active { background: var(--eps-accent-soft); border-color: var(--eps-accent); color: var(--eps-accent-strong); }

.eps-elements__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--eps-space-2);
  padding: var(--eps-space-2) var(--eps-space-3) var(--eps-space-3);
}
.eps-element-card {
  aspect-ratio: 1;
  background: var(--eps-surface-sunken);
  border: 1px solid var(--eps-border);
  border-radius: var(--eps-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  padding: var(--eps-space-2);
  transition: box-shadow var(--eps-duration-fast) var(--eps-ease), border-color var(--eps-duration-fast) var(--eps-ease);
}
.eps-element-card:hover { border-color: var(--eps-accent); box-shadow: var(--eps-shadow-sm); }
.eps-element-card svg, .eps-element-card img { width: 100%; height: 100%; }
.eps-element-card__label {
  font-size: 10px;
  color: var(--eps-text-tertiary);
  text-align: center;
  margin-top: var(--eps-space-1);
}

.eps-props {
  padding: var(--eps-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--eps-space-4);
}
.eps-field-group { display: flex; flex-direction: column; gap: var(--eps-space-2); }
.eps-field-group__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--eps-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.eps-field-row { display: flex; gap: var(--eps-space-2); }
/* min-width:0 overrides the flex default of min-width:auto, which otherwise
   refuses to let a flex child shrink below its content's natural width —
   without this, a row with enough fields (e.g. the New Design dialog's
   Width/Height/Unit row) silently overflows its container's edge instead
   of fitting, rather than the fields shrinking to share the available space. */
.eps-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.eps-field label { font-size: 11px; color: var(--eps-text-tertiary); }
.eps-input, .eps-select {
  font-family: var(--eps-font);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: var(--eps-radius-sm);
  border: 1px solid var(--eps-border);
  background: var(--eps-surface);
  color: var(--eps-text-primary);
}
.eps-input:focus, .eps-select:focus { outline: none; border-color: var(--eps-accent); box-shadow: 0 0 0 3px var(--eps-accent-soft); }
.eps-checkbox-row { display: flex; align-items: center; gap: var(--eps-space-2); font-size: 12px; color: var(--eps-text-secondary); }

.eps-swatch-row { display: flex; gap: var(--eps-space-1); flex-wrap: wrap; }
.eps-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  cursor: pointer;
}
.eps-swatch.is-active { box-shadow: 0 0 0 2px var(--eps-surface), 0 0 0 4px var(--eps-accent); }

.eps-thread-match {
  display: flex;
  align-items: center;
  gap: var(--eps-space-2);
  padding: var(--eps-space-2);
  background: var(--eps-surface-sunken);
  border-radius: var(--eps-radius-md);
  font-size: 12px;
}
.eps-thread-match__swatch { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.12); }