/* The Studio piece selector above the grid. Tokens only: it inherits whichever
   theme is active, like the rail. */
#pieceBar:empty { display: none; }
.piece-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 12px; padding: 8px 12px;
  border: 1px solid var(--line, rgba(0, 0, 0, .12)); border-radius: 10px;
  background: var(--card, transparent); color: var(--ink, inherit);
  font: 500 13px/1.3 var(--sans, inherit);
}
.piece-bar-label { color: var(--ink-3, inherit); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.piece-bar-name { font-weight: 600; }
.piece-bar-empty, .piece-bar-hint, .piece-bar-msg { color: var(--ink-2, inherit); }
.piece-bar select, .piece-bar input, .piece-bar button {
  font: inherit; color: inherit; background: transparent;
  border: 1px solid var(--line, rgba(0, 0, 0, .2)); border-radius: 6px; padding: 4px 8px;
  min-height: 32px;
}
.piece-bar-new { display: flex; gap: 6px; margin-left: auto; }
.piece-bar-new input { min-width: 12em; }
.piece-bar :disabled { opacity: .5; cursor: not-allowed; }
.piece-bar-del { color: var(--accent, inherit); }
@media (max-width: 640px) { .piece-bar-new { margin-left: 0; width: 100%; } .piece-bar-new input { flex: 1; min-width: 0; } }