/* =========================================================================
   Chart chrome — tooltip, legend, frames
   ========================================================================= */

.chart-frame { position: relative; width: 100%; }
.chart-frame canvas { display: block; width: 100%; }

.chart-tooltip {
  position: absolute;
  z-index: var(--z-dropdown);
  min-width: 132px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-xs);
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.chart-tooltip[hidden] { display: none; }
.chart-tooltip-title {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}
.chart-tooltip-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 2px 0;
}
.chart-tooltip-swatch {
  width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto;
}
.chart-tooltip-label { flex: 1 1 auto; color: var(--color-text-muted); }
.chart-tooltip-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.chart-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.chart-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart-legend-swatch { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }

/* Sparkline strip used inside table rows */
.sparkline { width: 88px; height: 24px; display: block; }

/* Freshness meter on the analytics table */
.freshness-bar {
  height: 4px; width: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  overflow: hidden;
}
.freshness-bar > span { display: block; height: 100%; border-radius: inherit; }
.freshness-fresh > span { background: var(--color-success); }
.freshness-ok > span    { background: var(--color-info); }
.freshness-stale > span { background: var(--color-warning); }
.freshness-never > span { background: var(--color-neutral); }