/* ============================================================================
   eabcx — kit/tree.css
   The equipment tree widget (kit/tree.js). Tokens only — every colour comes
   from tokens.css so light/dark stay in sync automatically. Row chrome
   (search box, empty state, pills, badges) intentionally reuses chrome.css's
   .search / .empty conventions; this file only adds tree-specific classes.
   See CONTRACTS/design.md §Equipment tree.
   ========================================================================== */

.tree-panel{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}

/* search box sits inside the tree's own flow, not the top bar, so it needs
   its own spacing though it borrows .search's field chrome */
.tree-search.search{
  flex:0 0 auto;
  width:auto;
  margin:0 0 10px;
}

.tree-scroll{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  outline:none;
  border-radius:var(--radius-ctl);
}
.tree-scroll:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-soft)}

.tree-spacer{
  position:relative;
  width:100%;
}

.tree-row{
  position:absolute;
  left:0; right:0;
  height:30px;
  display:flex;
  align-items:center;
  gap:6px;
  padding-right:10px;
  cursor:pointer;
  border-left:2px solid transparent;
  white-space:nowrap;
  user-select:none;
}
.tree-row:hover{background:var(--bg2)}
.tree-row.selected{
  background:var(--accent-soft);
  border-left-color:var(--accent);
}

.tree-chevron{
  flex:0 0 auto;
  width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  color:var(--faint);
  transition:transform var(--t) var(--ease);
}
.tree-chevron.expanded{transform:rotate(90deg)}
.tree-chevron-empty{visibility:hidden}

.tree-label{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12.5px;
  color:var(--txt);
}
.tree-label.root{font-weight:600}

.tree-pill{
  flex:0 0 auto;
  font-size:10.5px;
  font-variant-numeric:tabular-nums;
  color:var(--faint);
  background:var(--bg2);
  border:1px solid var(--line2);
  border-radius:var(--pill);
  padding:1px 7px;
  line-height:1.5;
}
.tree-pill.tree-pill-count{color:var(--muted)}
.tree-pill.red{color:var(--red);background:var(--red-soft);border-color:transparent}

.tree-check{
  flex:0 0 auto;
  display:flex;
  color:var(--green);
}

.tree-dot{
  flex:0 0 auto;
  font-size:10.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--red);
  background:var(--red-soft);
  border-radius:var(--pill);
  padding:1px 6px;
  line-height:1.5;
}

.tree-empty{margin:auto}