/* The cluster legend in the plot inspector: search, bulk actions, rows with swatch, count and
   eye, and the hidden/selected states. */
.legend-tools { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.legend-tools input[type="search"] { height: 26px; font-size: 12px; }
.legend-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.legend-acts .btn { height: 24px; padding: 0 8px; font-size: 11.5px; }
/* height 0 and grow: the list fills what its section is given, and its rows never count toward
   the section's minimum height. Its floor, about five rows, is min-height: below that the plot
   inspector scrolls as a whole rather than leave a list two rows tall. Six rows (150px) made
   the default 3D view scroll at 1440x900. */
.legend { flex: 1 1 auto; height: 0; min-height: 120px; overflow: auto; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--bg); }
.lg { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 22px; align-items: center; gap: 8px; width: 100%; height: 24px; padding: 0 4px 0 8px; font-size: 12px; color: var(--fg-2); text-align: left; border-bottom: 1px solid var(--line-soft); }
.lg:last-child { border-bottom: 0; }
.lg:hover { background: var(--hover); color: var(--fg); }
.lg.is-sel { background: var(--accent-soft); color: var(--fg); }
.lg .nm { text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 100%; color: inherit; font-size: 12px; }
.lg .nm[aria-pressed="true"] { font-weight: 600; }
.lg .nm:focus-visible, .lg .eye:focus-visible { outline: 2px solid var(--fg-2); outline-offset: -2px; }
.lg.off { color: var(--fg-3); }
.lg.off .sw { opacity: .3; }
.lg .sw { width: 11px; height: 11px; border-radius: 50%; }
.lg .cnt { font: 11px var(--mono); color: var(--fg-3); }
.lg .eye { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; color: var(--fg-3); }
.lg .eye:hover { background: var(--raise); color: var(--fg); }
.lg .eye svg { width: 14px; height: 14px; }
.legend-sum { font: 11px var(--mono); color: var(--fg-3); margin-top: 5px; }

@media (max-width: 760px) {
  .legend { height: auto; min-height: 60px; max-height: 260px; }
}