/* compound-garden: stacked yearly bars (put in vs growth) + "start earlier" line. */
.compound-garden-root.compound-garden-root > * + * { margin-top: var(--s4); }
.compound-garden-root .compound-garden-readouts { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compound-garden-root .compound-garden-readouts .w-readout { align-content: start; }
.compound-garden-root .compound-garden-readouts > .w-readout:first-child, .compound-garden-root .compound-garden-readouts > .compound-garden-early { grid-column: 1 / -1; }
.compound-garden-root .compound-garden-readouts .compound-garden-early { animation: compound-garden-in .4s var(--ease) both; }
@media (min-width: 48rem) {
  .compound-garden-root .compound-garden-readouts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
  .compound-garden-root .compound-garden-readouts > .w-readout:first-child, .compound-garden-root .compound-garden-readouts > .compound-garden-early { grid-column: auto; }
}
.compound-garden-root .compound-garden-chart { width: 100%; min-height: 200px; }
.compound-garden-root .compound-garden-put { fill: var(--line-strong); }
.compound-garden-root .compound-garden-grow { fill: var(--ink); }
.compound-garden-root .compound-garden-grid { stroke: var(--line); stroke-width: 1; }
.compound-garden-root .compound-garden-base { stroke: var(--ink); stroke-width: 1.5; }
.compound-garden-root .compound-garden-halo { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.compound-garden-root .compound-garden-line { stroke: var(--up); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.compound-garden-root .compound-garden-dot { fill: var(--up); stroke: var(--paper); stroke-width: 2; }
.compound-garden-root .compound-garden-label { font: 700 var(--fs-chart) var(--font-ui); fill: var(--ink); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.compound-garden-root .compound-garden-label--early { fill: var(--up); }
.compound-garden-root .compound-garden-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s2) 0 0; font: 400 var(--fs-small)/1.3 var(--font-ui); color: var(--ink-2); }
.compound-garden-root .compound-garden-key { display: inline-flex; align-items: center; gap: 6px; }
.compound-garden-root .compound-garden-key i { flex: none; width: 14px; height: 14px; background: var(--line-strong); }
.compound-garden-root .compound-garden-key--grow i { background: var(--ink); }
.compound-garden-root .compound-garden-key--early i { width: 20px; height: 3px; background: var(--up); }
.compound-garden-root .compound-garden-key[hidden] { display: none; }
.compound-garden-root .compound-garden-cross { margin: var(--s2) 0 0; padding: 2px 0 2px var(--s3); border-left: 2px solid var(--ink); font: 400 var(--fs-small)/1.45 var(--font-ui); color: var(--ink); }
.compound-garden-root .compound-garden-controls { display: grid; gap: var(--s4) var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.compound-garden-root .compound-garden-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.compound-garden-root .compound-garden-actions .w-btn[aria-pressed="true"] { background: var(--up); border-color: var(--up); }
@keyframes compound-garden-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* keep shared notes small even inside page rules like ".prose p" */
.compound-garden-root.compound-garden-root .w-note { margin: var(--s3) 0 0; font-size: var(--fs-small); line-height: 1.5; }