/* Grow: a seed tray. Pale leaf greens, a growing bar for each goal. */
:root { --page: #eff4ef; --card: #ffffff; --ink: #142014; --soft: #556655; --line: #d4ded4; --field: #e6ede6; --act: #1f7a3a; --on-act: #ffffff; --stop: #b3261e; --paid: #a9cdb3; --wide: 720px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #111511; --card: #19201a; --ink: #e4eee4; --soft: #9fb19f; --line: #2a352b; --field: #111511; --act: #86dc9c; --on-act: #0b2412; --stop: #ff8a80; --paid: #3a5a43; color-scheme: dark; }
}
.goals { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.goal { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.goal .top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.goal .top b { font-size: 18px; } .goal .top span { color: var(--soft); font-variant-numeric: tabular-nums; }
.meter { height: 10px; background: var(--field); border-radius: 99px; overflow: hidden; margin: 10px 0 8px; }
.meter i { display: block; height: 100%; background: var(--act); border-radius: 99px; width: 0; }
.goal .need { margin: 0 0 8px; }
.goal .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: end; }
.goal .acts input { width: 110px; }
summary { cursor: pointer; list-style: none; } summary::-webkit-details-marker { display: none; }
summary h3 { margin: 0; display: inline; } summary::after { content: " +"; color: var(--act); font-weight: 700; }
details[open] summary::after { content: " −"; } details[open] summary { margin-bottom: 12px; }
.big-num { font-size: 36px; font-weight: 700; margin: 12px 0 0; font-variant-numeric: tabular-nums; color: var(--act); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin: 12px 0; }
.bars span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bars i { display: block; background: var(--act); border-radius: 3px 3px 0 0; } .bars em { display: block; background: var(--paid); }
.years { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.years th, .years td { text-align: right; padding: 6px 4px; border-bottom: 1px solid var(--line); } .years th:first-child, .years td:first-child { text-align: left; }