/* Debts: a calm ledger. Sage paper, clear sums, green for the way out. */
:root { --page: #f1f3ee; --card: #ffffff; --ink: #171a15; --soft: #5a6156; --line: #d7dcd2; --field: #e9ece5; --act: #2f6b2a; --on-act: #ffffff; --stop: #b3261e; --alt: #8a5a00; --wide: 760px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #121411; --card: #1a1d18; --ink: #e7ebe3; --soft: #a3ab9e; --line: #2c3229; --field: #121411; --act: #9fd896; --on-act: #10240d; --stop: #ff8a80; --alt: #f2c230; color-scheme: dark; }
}
.debts { display: grid; gap: 12px; margin-bottom: 8px; }
.debt { display: grid; grid-template-columns: 1.4fr 1fr 70px 1fr 40px; gap: 6px; align-items: end; }
.debt label { font-size: 13px; } .debt input { min-width: 0; } .debt .x { height: 44px; padding: 0; }
@media (max-width: 560px) { .debt { grid-template-columns: repeat(3, minmax(0, 1fr)); } .debt .name { grid-column: 1 / 3; } .debt .x { grid-column: 3; grid-row: 1; justify-self: end; width: 44px; } }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.way { all: unset; box-sizing: border-box; background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; }
.way[aria-pressed="true"] { border-color: var(--act); }
.way:focus-visible { outline: 3px solid var(--act); outline-offset: 2px; }
.way b { display: block; font-size: 15px; } .way .when { display: block; font-size: 22px; font-weight: 700; margin: 4px 0; }
.way span { display: block; color: var(--soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.chart { width: 100%; height: auto; margin: 12px 0; background: var(--card); border-radius: 10px; border: 1px solid var(--line); }
.chart .a { stroke: var(--act); } .chart .b { stroke: var(--alt); } .chart .axis { stroke: var(--line); } .chart text { fill: var(--soft); font-size: 9px; }
.order li { font-variant-numeric: tabular-nums; }