/* The tab drawer, after three things it was getting wrong.

   1. A folded branch. With "one stack" on, only the branch you are standing in
      writes its rooms out; the rest stand as headings with a caret, so the
      shape of the board is still readable at a glance without the panel
      growing past what you can hold.
   2. Nothing jumps. The branch you are in is lit where it stands — it is no
      longer lifted to the top of its wing, so the outline holds still while
      you walk around it.
   3. Tools at the foot. Under a rule of their own, beneath the project's own
      rooms rather than above them. */

/* ── a branch folded away ────────────────────────────────────────────── */
.tabbar .trow.tshut { align-items: center; }
.tabbar .trow.tshut .tkin { display: none; }

/* the caret says which way it goes, and turns when it opens */
.tabbar .tsub-g.folded::after,
.tabbar .tsub-g.unfolded::after {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-inline-start: 5px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px); opacity: .55;
  transition: transform .16s ease, opacity .16s ease;
}
[dir="rtl"] .tabbar .tsub-g.folded::after {
  transform: rotate(135deg) translate(-1px, -1px);
}
.tabbar .tsub-g.unfolded::after { transform: rotate(45deg) translate(-1px, -1px); opacity: .85; }
[dir="rtl"] .tabbar .tsub-g.unfolded::after { transform: rotate(45deg) translate(-1px, -1px); }

/* a heading you can open is a control, and has to feel like one */
.tabbar .tsub-g.folded { cursor: pointer; opacity: .82; }
.tabbar .tsub-g.folded:hover { opacity: 1; }
.tabbar .tsub-g.unfolded { font-weight: 600; }

/* ── tools, at the foot ──────────────────────────────────────────────── */
.tabbar .tbar-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 14px; padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.tabbar .tbar-tools-lb {
  display: inline-flex; align-items: center; gap: 5px;
  width: 100%; margin-bottom: 2px;
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); opacity: .8;
}
.tabbar .tbar-tools-lb svg { width: 12px; height: 12px; }