@layer features {

/* Throughput Trend — multi-line chart inside each QC card.
   Style follows MUI X v7 SimpleLineChart: hollow markers, smooth
   curves, dashed crosshair + floating tooltip card on hover, legend
   above the chart with filled square swatches. */
.qc-cap-trend { background: transparent; border: 0; border-radius: 0; padding: 0; }
.qc-cap-trend-header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: var(--font-size-xs); color: var(--color-text-primary); }
.qc-cap-trend-caption { font-size: var(--font-size-xs); color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
.qc-cap-trend-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.qc-cap-trend-grid { stroke: rgba(0, 0, 0, 0.12); stroke-width: 1; }
.qc-cap-trend-axis { font-size: 12px; font-family: var(--font-family-sans); fill: rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; }
.qc-cap-trend-axis-x { fill: rgba(0, 0, 0, 0.87); }

/* Hover interaction — per-sprint hit-rect drives the overlay group.
   Pointer events on the rect; overlay itself is purely visual. */
.qc-cap-trend-hit { fill: transparent; pointer-events: all; cursor: crosshair; }
.qc-cap-trend-overlay { visibility: hidden; pointer-events: none; }
.qc-cap-trend-col:hover .qc-cap-trend-overlay { visibility: visible; }
.qc-cap-trend-crosshair {
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

/* Tooltip card — MUI X style. Built from SVG <rect> + <text> so the
   card scales with the chart's viewBox (no clipping when the SVG
   stretches to fit a narrow container). */
.qc-cap-trend-tip-bg {
  fill: #ffffff;
  stroke: rgba(0, 0, 0, 0.12);
  stroke-width: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.10));
}
.qc-cap-trend-tip-title-text {
  font-family: var(--font-family-sans);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  fill: var(--color-text-secondary);
}
.qc-cap-trend-tip-sub-text {
  font-family: var(--font-family-sans);
  font-size: 11px;
  font-weight: var(--font-weight-regular);
  fill: var(--color-text-muted);
}
.qc-cap-trend-tip-label-text {
  font-family: var(--font-family-sans);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  fill: var(--color-text-primary);
}
.qc-cap-trend-tip-value-text {
  font-family: var(--font-family-sans);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  fill: var(--color-text-primary);
}

/* Legend — sits ABOVE the chart (MUI X SimpleLineChart layout),
   filled square swatches with rounded corners, no per-series count. */
.qc-cap-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 4px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: rgba(0, 0, 0, 0.87);
  letter-spacing: 0;
}
.qc-cap-trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.qc-cap-trend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.qc-cap-trend-legend-label { color: rgba(0, 0, 0, 0.87); }

} /* end @layer features */