/* Shared levels and splitter; names wrap instead of hiding the words that distinguish flows. */
.flow-group { flex: none; min-width: 0 }
.flow-group > summary {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px 6px 8px;
  list-style: none; cursor: pointer; color: var(--ink-2); font: 500 var(--t-body-2)/1.5 var(--sans);
}
.flow-group > summary::-webkit-details-marker { display: none }
.flow-group > summary::before {
  content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(-45deg);
}
.flow-group[open] > summary::before { transform: rotate(45deg) }
.flow-group > summary:hover { background: var(--panel-2) }
.flow-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
.flow-group[data-current="true"] > summary { color: var(--ink) }
.flow-group-name { flex: 1; min-width: 0; overflow-wrap: anywhere }
.flow-group-count { flex: none; color: var(--ink-3); font: var(--t-micro)/1.5 var(--sans) }
.flow-group-children { margin-left: 11px; padding-left: 8px; border-left: 1px solid var(--line) }
.panel-resizer {
  position: absolute; inset: 0 0 0 auto; width: .5625rem; z-index: 10; cursor: col-resize;
  touch-action: none; outline-offset: -3px;
}
/* The host panel permits its grip to straddle the border; standalone rails clip it. */
#wbNavResize { right: -.3125rem }
.panel-resizer:focus-visible { outline: none }
.panel-resizer::after { content: ""; position: absolute; inset: 0 3px; background: transparent }
.panel-resizer:hover::after, .panel-resizer:focus-visible::after, .panel-resizing .panel-resizer::after { background: var(--gold) }
.panel-resizing, .panel-resizing * { cursor: col-resize !important; user-select: none !important }
.panel-resizing iframe { pointer-events: none }