/* Invoice: a stationer's ledger. Warm paper, ink-black text, one deep green for the action. */
:root { --page: #f4f1ea; --card: #fffdf8; --ink: #1b1a17; --soft: #625d53; --line: #ddd6c8; --field: #efeae0; --act: #1f5a3d; --on-act: #ffffff; --stop: #b3261e; --wide: 760px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #151412; --card: #1e1c19; --ink: #ece7dc; --soft: #a9a294; --line: #35322c; --field: #151412; --act: #8fd1ae; --on-act: #0d2418; --stop: #ff8a80; color-scheme: dark; }
}
summary { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary h2 { margin: 0; } summary::after { content: "Edit"; margin-left: auto; color: var(--act); font-weight: 600; }
details[open] summary::after { content: "Done"; }
details[open] summary { margin-bottom: 12px; }
.lines { display: grid; gap: 10px; margin-bottom: 8px; }
.line { display: grid; grid-template-columns: 1fr 64px 96px 64px 36px; gap: 6px; align-items: end; }
.line label { font-size: 13px; } .line input { min-width: 0; }
.line .x { padding: 0; height: 44px; }
@media (max-width: 560px) { .line { grid-template-columns: 1fr 1fr 1fr 36px; } .line .desc { grid-column: 1 / -1; } }
.sum { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 16px 0; font-variant-numeric: tabular-nums; }
.sum dt { color: var(--soft); } .sum dd { margin: 0; text-align: right; }
.sum .total { font-weight: 700; font-size: 20px; color: var(--ink); }
.past-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.past-row .who { flex: 1 1 160px; } .past-row .amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.paid { color: var(--act); font-weight: 600; } .late { color: var(--stop); font-weight: 600; }
#past li { display: block; }