/* Cost flow shares Power flow's card, bars, controls and palette. */
.cf-roofline { border-top: 1px solid var(--line); margin: 32px 0 0; padding-top: 30px; }
.cf-roofline h3 { color: var(--ink); font-size: clamp(21px, 2.5vw, 26px); line-height: 1.4; margin: 0 0 14px; }
.cf-roof-explainer { color: var(--text); font-size: 12.5px; line-height: 1.7; margin: 0 0 7px; }
.cf-roof-alternative { border-left: 2px dashed var(--ink); padding-left: 10px; }
.cf-roof-chart { margin-top: 20px; min-width: 0; width: 100%; }
.cf-roof-chart svg { display: block; overflow: visible; width: 100%; }
.cf-grid { stroke: var(--line); stroke-width: 0.7; }
.cf-axis, .cf-axis-title { fill: var(--text); font-family: var(--font-body); font-size: 11px; }
.cf-axis-title { font-size: 12px; }
.cf-roof-base { fill: none; stroke: var(--terracotta-dark); stroke-width: 3; }
.cf-roof-fast { fill: none; stroke: var(--ink); stroke-dasharray: 7 5; stroke-width: 2; }
.cf-ridge-line { stroke: var(--muted); stroke-dasharray: 2 5; stroke-width: 1; }
.cf-ridge-dot { fill: var(--terracotta-dark); }
.cf-ridge-label { fill: var(--terracotta-dark); font-family: var(--font-body); font-size: 11px; }
.cf-batch-arrow { fill: none; stroke: var(--ink); stroke-width: 1.2; }
#cf-arrow path { fill: var(--ink); }
.cf-arrow-back { fill: var(--pf-surface); }
.cf-arrow-label { fill: var(--text); font-family: var(--font-body); font-size: 12px; }
.cf-upgrade { fill: var(--pf-surface); stroke: var(--ink); stroke-dasharray: 3 4; stroke-width: 1.2; }
.cf-upgrade.is-dim { opacity: 0.22; }
.cf-point { cursor: help; outline: none; }
.cf-point-label { fill: var(--ink); font-family: var(--font-body); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--pf-surface); stroke-linejoin: round; stroke-width: 4px; }
.cf-point-leader { fill: none; stroke: var(--muted); stroke-width: 0.8; }
.cf-point-dot { fill: var(--ink); stroke: var(--pf-surface); stroke-width: 1.5; }
.cf-point[data-point="attention"] .cf-point-dot { fill: none; stroke: var(--ink); }
.cf-point.is-dim .cf-point-dot { opacity: 0.35; }
.cf-point.is-dim .cf-point-label { fill: var(--text); font-weight: 400; }
.cf-focus-ring { fill: none; stroke: var(--ink); stroke-width: 2; visibility: hidden; }
.cf-point:focus-visible .cf-focus-ring, .cf-point:hover .cf-focus-ring { visibility: visible; }
.cf-point:focus-visible .cf-point-dot, .cf-point:hover .cf-point-dot { opacity: 1; }
.cf-roof-caption { color: var(--text); font-size: 14px; line-height: 1.7; margin: 12px 0 0; }
.cf-assumptions { color: var(--text); font-size: 12px; line-height: 1.7; margin: 28px 0 0; }
@media (max-width: 639px) {
  .cf-roofline { padding-top: 24px; }
  .cf-figure .pf-row-caption { max-width: none; }
  .cf-figure .pf-row[data-layout="list"] .pf-segment { min-height: 76px; }
}
@media print {
  .cf-roof-chart { break-inside: avoid; }
  #cf-roof-table-wrap > * { display: block !important; }
  #cf-roof-table { display: table !important; }
}