/* Parts list in the drawer (panel/tree.js): search, then the virtualised tree. */
#viewer .sv-search {
  flex: none;
  height: 34px;
  margin: 8px 12px 0;
  padding: 0 10px;
  border: 1px solid var(--sv-border-strong);
  border-radius: 8px;
  background: var(--sv-surface);
}

.sv-search__count {
  margin: 6px 16px 0;
  color: var(--sv-muted);
  font-size: 12px;
}

.sv-search__count:empty {
  display: none;
}

.sv-tree {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 8px 0 6px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sv-border-strong) transparent;
}

.sv-tree:focus-visible {
  outline-offset: -2px;
}

.sv-tree__rows {
  position: relative;
}

/* The flat CAD dump's note above the rows (tree.js noteFlat): muted text, not a row. */
.sv-tree__note {
  padding: 4px 12px 6px;
  color: var(--sv-muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Rows are pooled and positioned by js/panel/tree.js (fixed height, translateY). */
.sv-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.sv-row:hover,
.sv-row.is-hovered {
  background: var(--sv-hover);
}

.sv-row.is-path > .sv-row__name {
  color: var(--sv-accent);
  font-weight: 550;
}

.sv-row[aria-selected="true"] {
  color: var(--sv-accent);
  background: var(--sv-accent-soft);
  box-shadow: inset 2px 0 var(--sv-accent);
}

.sv-row[aria-selected="true"] > .sv-row__name {
  font-weight: 650;
}

/* An edit group (tree.js lays them over the model's tree): a dashed-box icon before its name. */
.sv-row.is-group > .sv-row__name::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='1.5' y='1.5' width='13' height='13' rx='2' stroke-dasharray='3 2'/%3E%3Crect x='4.5' y='4.5' width='4' height='4' rx='.5'/%3E%3Crect x='7.5' y='7.5' width='4' height='4' rx='.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.sv-row.is-concealed > .sv-row__name,
.sv-row.is-concealed > .sv-row__meta {
  color: var(--sv-faint);
}

.sv-row__chevron {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 100%;
}

.sv-row[aria-expanded] > .sv-row__chevron::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--sv-muted);
  border-bottom: 1.5px solid var(--sv-muted);
  transform: rotate(-45deg);
  transition: transform 120ms;
}

.sv-row[aria-expanded="true"] > .sv-row__chevron::before {
  transform: rotate(45deg);
}

.sv-row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv-row__meta {
  flex: none;
  color: var(--sv-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

#viewer .sv-row__eye {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--sv-muted);
  background: transparent;
  opacity: 0;
}

#viewer .sv-row__eye:hover {
  color: var(--sv-ink);
  background: rgb(23 23 26 / 0.06);
}

#viewer .sv-row:hover > .sv-row__eye,
#viewer .sv-row__eye.is-off {
  opacity: 1;
}

.sv-row__eye svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.sv-row__slash {
  display: none;
}

.sv-row__eye.is-off .sv-row__slash {
  display: inline;
}

@media (pointer: coarse) {
  #viewer .sv-row__eye {
    width: 36px;
    height: 36px;
    opacity: 1;
  }
}