/* ─── what-if-chart.css (iter69) ─────────────────────────────────────
 * The year-by-year morphing projection chart on /what-if.
 *
 * Two lines over a 5-year horizon: today's trajectory (dashed grey)
 * vs the what-if trajectory (solid teal). Shaded gap between them is
 * the projected impact of the change. Updates live on slider move.
 * ────────────────────────────────────────────────────────────────── */

.wif-chart-wrap {
  position: relative;
  margin: 18px 0;
  padding: 18px 18px 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF6 100%);
  border: 1px solid rgba(14, 30, 30, 0.08);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(14, 30, 30, 0.04);
}

.wif-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.wif-chart-eyebrow {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep, #086E66);
}

.wif-chart-legend {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--display);
  font-size: 11px;
  color: var(--ink-mute, #6E707A);
}
.wif-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wif-chart-legend-item .dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 999px;
}
.wif-chart-legend-item.is-baseline .dot {
  background: transparent;
  border: 1.5px dashed rgba(14, 30, 30, 0.40);
}
.wif-chart-legend-item.is-whatif .dot {
  background: var(--teal-deep, #086E66);
}

.wif-chart {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
}

.wif-chart .grid-line {
  stroke: rgba(14, 30, 30, 0.06);
  stroke-width: 1;
}
.wif-chart .axis-line {
  stroke: rgba(14, 30, 30, 0.24);
  stroke-width: 1;
}
.wif-chart text.tick {
  font-family: var(--display);
  font-size: 10px;
  fill: var(--ink-mute, #6E707A);
  font-variant-numeric: tabular-nums;
}

.wif-chart-line {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: d 320ms cubic-bezier(.2, .9, .3, 1);
}
.wif-chart-line.is-baseline {
  stroke: rgba(14, 30, 30, 0.42);
  stroke-dasharray: 4 4;
  stroke-width: 1.6;
}
.wif-chart-line.is-whatif {
  stroke: var(--teal-deep, #086E66);
  filter: drop-shadow(0 1px 2px rgba(15, 148, 139, 0.32));
}

#wif-chart-delta {
  transition: d 320ms cubic-bezier(.2, .9, .3, 1);
}

.wif-chart .end-marker circle {
  fill: var(--teal-deep, #086E66);
  stroke: #FFFFFF;
  stroke-width: 2;
}
.wif-chart .end-marker.is-baseline circle {
  fill: rgba(14, 30, 30, 0.55);
}
.wif-chart .end-marker text {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: var(--ink, #15161A);
}
.wif-chart .end-marker.is-whatif text {
  fill: var(--teal-deep, #086E66);
}

.wif-chart-caption {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3, #4A5757);
}
.wif-chart-caption strong {
  font-weight: 600;
  color: var(--ink, #15161A);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .wif-chart-line, #wif-chart-delta { transition: none; }
}