/*! Psyn UI Charts v0.1.1 | MIT | psyn.app | opt-in add-on */
/* Psyn UI — charts add-on styles. Loaded via dist/psyn-charts.css (opt-in). */

.psy-chart {
  position: relative;
  width: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--psy-space-3);
  font-family: var(--psy-font-ui);
}

.psy-chart-svg {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 160px;
  overflow: visible;
}

.psy-chart-grid {
  stroke: var(--psy-color-border);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.psy-chart-axis-line {
  stroke: var(--psy-color-border-strong);
  stroke-width: 1;
}

.psy-chart-axis-label {
  fill: var(--psy-color-text-muted);
  font-size: var(--psy-text-xs);
  font-family: var(--psy-font-ui);
}

.psy-chart-mark {
  transition: opacity 0.15s ease;
}

.psy-chart-mark[data-hidden="true"] {
  display: none;
}

.psy-chart-hit-line {
  stroke: var(--psy-color-border-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}

/* Tooltip — floating bubble, positioned via JS top/left */
.psy-chart-tooltip {
  position: absolute;
  z-index: var(--psy-z-tooltip, 60);
  pointer-events: none;
  background: var(--psy-color-surface-2);
  border: 1px solid var(--psy-color-border);
  border-radius: var(--psy-radius-sm);
  box-shadow: var(--psy-shadow-md);
  padding: var(--psy-space-2) var(--psy-space-3);
  font-size: var(--psy-text-sm);
  color: var(--psy-color-text);
  white-space: nowrap;
  transform: translate(-50%, -100%);
  margin-top: -8px;
}

.psy-chart-tooltip-title {
  font-weight: var(--psy-weight-medium);
  margin-bottom: var(--psy-space-1);
  color: var(--psy-color-text-muted);
}

.psy-chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: var(--psy-space-2);
}

.psy-chart-tooltip-swatch {
  width: 8px;
  height: 8px;
  border-radius: var(--psy-radius-full, 999px);
  flex: 0 0 auto;
}

/* Legend */
.psy-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--psy-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.psy-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--psy-space-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--psy-space-1) var(--psy-space-2);
  border-radius: var(--psy-radius-sm);
  font-size: var(--psy-text-sm);
  color: var(--psy-color-text);
}

.psy-chart-legend-item:hover {
  background: var(--psy-color-surface-2);
}

.psy-chart-legend-item[data-hidden="true"] {
  color: var(--psy-color-text-faint);
  text-decoration: line-through;
}

.psy-chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: var(--psy-radius-full, 999px);
  flex: 0 0 auto;
}

/* Sparkline — no chrome, just the container */
.psy-chart-sparkline {
  min-height: 0;
  height: 32px;
}

.psy-chart-sparkline .psy-chart-svg {
  min-height: 0;
}