/* calculator-charts.css — CR-038 charts C1, C2, C3.
   Loaded from college_chances_calculator.html extra_head alongside
   calculator.css. Depends on tokens.css being loaded first. */

/* ---------------------------------------------------------------
   Shared chart wrapper
   --------------------------------------------------------------- */
.calc-chart {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.calc-chart figcaption {
  font-size: 14px;
  color: var(--ink);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}
/* Scroll container so the fixed-width SVG is horizontally scrollable on
   narrow screens rather than overflowing the page body. */
.calc-chart__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------
   C1 — score range mini-bar inside the Why <td>
   Sits beside r.why text; SVG is fixed 180×20 so it never reflows
   and is always readable at table scroll-zoom.
   --------------------------------------------------------------- */
.c1-score {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.c1-score__bar {
  /* The SVG handles its own sizing; we just keep it from growing. */
  display: block;
  max-width: 180px;
}
.c1-score__legend {
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   C2 — budget comparison chart
   SVG is authored at a fixed intrinsic width; the scroll wrapper
   lets it overflow on small screens.
   --------------------------------------------------------------- */
.calc-chart--budget svg text {
  /* SVG text inherits nothing from CSS without explicit font-family */
  font-family: var(--font-sans);
}

/* ---------------------------------------------------------------
   C3 — deadline timeline (grade 11/12 only)
   --------------------------------------------------------------- */
.calc-chart--timeline svg text {
  font-family: var(--font-sans);
}

/* Responsive chart styling per Stream A */
@media (max-width: 560px) {
  .calc-chart {
    padding: var(--space-3);
    margin: var(--space-3) 0;
  }
  .calc-chart figcaption {
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .calc-chart {
    padding: var(--space-2);
    border-radius: var(--radius-md);
  }
  .calc-chart figcaption {
    font-size: 12px;
  }
  .c1-score__legend {
    font-size: 10px;
  }
}