/* Data inspector — the resolved-data disclosure below the chart (spec §04).
   Mirrors the builder's source-preview styling (tokens only) so the two read as
   one family. In the live preview it is the preview pane's last child, set off
   from the chart body by a top border. */

.inspector {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-top: var(--border-width) solid var(--border);
  background: var(--bg);
}

/* Resizable-height mode (live preview): the inspector is given an explicit height
   by the pane's divider; the DataTable's own fill mode makes its rows fill the
   space left under the bar. */
.inspector.fill {
  overflow: hidden;
}

/* The header row: disclosure toggle, the Input|Resolved switch, the row count. */
.bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
}

.toggle:hover {
  background: var(--layer-01);
}

.toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.caret {
  font-size: 10px;
  color: var(--text-placeholder);
}

.meta {
  color: var(--text-placeholder);
}

.stateNote {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-2);
}
