/* Shared advanced comparison stack with formula panel for richer debt/savings calculators
   Extends gc-calc-scenarios.css — load that file first for base scenario styles.
   This file adds: chart-legend overrides, formula-panel sizing, chart heights */
@import url('/assets/gc-calc-scenarios.css');

.gc-chart-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.gc-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--gc-text-muted);
}

.gc-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.gc-chart {
  position: relative;
  height: 100px;
}

.gc-chart-tall {
  height: 260px;
}

.gc-formula-panel {
  background: var(--gc-input-bg);
  border: 1px solid var(--gc-border);
  border-radius: var(--gc-radius);
  padding: 12px 16px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 11.5px;
  color: var(--gc-text-muted);
  line-height: 1.7;
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
  margin: 8px 0;
}