/* The payoff chart (payoffchart.js): profit shaded one way and loss the other, break-evens and the price now as upright lines. Colours come from the page's own theme variables. */
.payoff-chart { width: 100%; max-width: 640px; height: auto; display: block; }
.payoff-chart .pc-profit { fill: var(--pos-bar, #1a9d74); fill-opacity: 0.28; }
.payoff-chart .pc-loss { fill: var(--neg-bar, #d1495b); fill-opacity: 0.28; }
.payoff-chart .pc-line { stroke: var(--text, #1b2330); stroke-width: 2; stroke-linejoin: round; }
.payoff-chart .pc-zero { stroke: var(--muted, #667085); stroke-width: 1; }
.payoff-chart .pc-mark { stroke-width: 1.25; stroke-dasharray: 4 3; }
.payoff-chart .pc-breakeven { stroke: var(--muted, #667085); }
.payoff-chart .pc-spot { stroke: var(--spot, #2455e0); }
.payoff-chart .pc-level { stroke: var(--flip, #b7791f); }
.payoff-chart .pc-axis { fill: var(--muted, #667085); font-size: 11px; }
.pc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 6px 0 0; font-size: 12px; color: var(--muted, #667085); }
.pc-legend li::before { content: ""; display: inline-block; width: 14px; height: 0; border-top: 2px dashed currentColor; margin-right: 6px; vertical-align: middle; }
.pc-legend .pc-spot { color: var(--spot, #2455e0); }
.pc-legend .pc-level { color: var(--flip, #b7791f); }