/* The chart's legend over the paper (TP-619, public/chart-legend; built without a design: POC): top left in the stage,
   right of the tool bar, on the paper's white. A slider per item; the item form in edit mode. */
.chart-legend { position: absolute; top: 12px; left: 12px; z-index: 2; width: min(260px, calc(100% - 24px)); max-height: calc(100% - 80px); overflow: auto; padding: 6px 10px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: 0 6px 20px rgb(0 0 0 / 18%); }
.chart-legend[data-legend-open='false'] { width: auto; padding-bottom: 6px; }
.chart-legend-head { display: block; width: 100%; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.chart-legend-items { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chart-legend-row { display: flex; align-items: center; gap: 6px; }
.chart-legend-swatch { flex: none; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgb(0 0 0 / 25%); }
.chart-legend-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; text-align: left; }
.chart-legend-n { margin-left: auto; font-variant-numeric: tabular-nums; }
.chart-legend-move { padding: 0 4px; }
.chart-legend-description { margin: 2px 0 0 20px; line-height: 1.3; }
.chart-legend-slider { display: block; width: 100%; margin: 4px 0 0; }
.chart-legend-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.chart-legend-field { display: flex; flex-direction: column; gap: 2px; }
.chart-legend-field input[type='text'], .chart-legend-field textarea { width: 100%; box-sizing: border-box; }
.chart-legend-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chart-legend-add { margin-top: 8px; }