/* ─────────────────────────────────────────────
   Parts sidebar (issue #29): the search box and the category groups
   generated by js/sidebar.js. The items reuse .comp-item from style.css.
───────────────────────────────────────────── */

#part-search {
  width: 100%;
  padding: 6px 9px;
  margin: 2px 0 6px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-primary);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  outline: none;
  flex-shrink: 0;
}
#part-search:focus { border-color: var(--accent); }

#part-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.comp-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.comp-group-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 6px 4px;
}

/* A search hides what doesn't match (.comp-item sets display: flex) */
.comp-group[hidden],
.comp-item[hidden] { display: none; }

.comp-item-icon svg {
  width: 28px;
  height: 28px;
}

/* The stacked layout's one-row strip (see style.css → RESPONSIVE) */
@media (max-width: 1024px) and (min-height: 600px) {
  #part-search { width: 140px; margin: 0; }
  #part-list,
  .comp-group { flex-direction: row; align-items: center; gap: 6px; flex-shrink: 0; }
  .comp-group-label { display: none; }
}