/* ============================================================
   Dang! Payoff — THE ONE PAYOFF CHART (calculator redesign, 2026-09-19).
   Loaded by the public calculator pages AND by the app shell, so the
   two surfaces draw one instrument from one sheet. Tokens only.
   Two drawings of one model: the wide one paints above 640px, the
   narrow one below; the legend lists the milestones the narrow
   drawing has no room to label.
   ============================================================ */
.po-chart-figure { margin: 0; padding: 0; }
.po-chart { display: block; width: 100%; height: auto; overflow: visible; }
.po-chart--narrow { display: none; }
@media (max-width: 640px) { .po-chart--wide { display: none; } .po-chart--narrow { display: block; } }
.po-chart__legend { margin: var(--dang-s-3) 0 0; padding-left: var(--dang-s-7); display: none;
  font-size: var(--dang-text-label); color: var(--payoff-text-2); line-height: 1.5; }
@media (max-width: 640px) { .po-chart__legend { display: block; } }
/* a wide drawing that could not place every label lists them instead (A-1) */
.po-chart-figure[data-labels-skipped] .po-chart__legend { display: block; }
.po-chart__legend { columns: 2; column-gap: var(--dang-s-8); }
@media (max-width: 640px) { .po-chart__legend { columns: 1; } }