/* Net worth: a private banker's ledger. Ivory paper, green ink for what you own, red for what you owe, one quiet line chart. */
:root { --page: #f1f2ee; --card: #ffffff; --ink: #171a16; --soft: #5a6058; --line: #d6dad2; --field: #e8ebe5; --act: #1f5c3a; --on-act: #ffffff; --stop: #b3261e; --own: #1f7a4a; --owe: #b3261e; --wide: 660px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #111210; --card: #1a1c19; --ink: #ebeee8; --soft: #a4aba1; --line: #2f332d; --field: #111210; --act: #86d3a3; --on-act: #08240f; --stop: #ff8a80; --own: #86d3a3; --owe: #ff8a80; color-scheme: dark; }
}
.chart { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.chart svg { width: 100%; height: 180px; display: block; overflow: visible; }
.chart .ln { fill: none; stroke: var(--act); stroke-width: 2.5; stroke-linejoin: round; } .chart .pt { fill: var(--act); } .chart .zero { stroke: var(--line); } .chart text { fill: var(--soft); font-size: 12px; }
#items h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); margin: 14px 0 4px; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) 9em auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.item input { min-height: 40px !important; text-align: right; } .item.owe span { color: var(--owe); } .item span { overflow-wrap: anywhere; }
form.card > button { justify-self: start; }
@media (max-width: 420px) { .item { grid-template-columns: minmax(0, 1fr) 7.5em auto; } }