/* Split: a bar tab. The settle-up block is the hero, one line per payment with an arrow between two names,
   on a teal band. Cool grey page; teal for actions and money that comes back, red for money owed. */
:root { --page: #eff3f4; --card: #ffffff; --ink: #142023; --soft: #546569; --line: #d2dcde; --field: #e8eef0; --act: #0b6e78; --on-act: #ffffff; --stop: #b3261e; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #111517; --card: #192023; --ink: #e8f0f1; --soft: #9fb0b3; --line: #2b3639; --field: #111517; --act: #5cc8d3; --on-act: #062227; --stop: #ff8a80; color-scheme: dark; }
}
#group { display: grid; gap: 20px; }
.settle { background: var(--act); color: var(--on-act); border-radius: 12px; padding: 18px; }
.settle h2 { font-size: 24px; overflow-wrap: anywhere; } .settle .soft { color: inherit; opacity: .9; }
.pays { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pays li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 19px; background: rgb(255 255 255 / .14); border-radius: 8px; padding: 10px 12px; }
.pays li b { overflow-wrap: anywhere; } .pays .amt { margin-left: auto; font-weight: 800; font-size: 22px; }
.pays .arrow { opacity: .8; }
.settle .list li { border-color: rgb(255 255 255 / .25); padding: 6px 0; }
#costs small { color: var(--soft); font-size: 14px; }
form.card > button { justify-self: start; }
.incoming { border-color: var(--act); border-width: 2px; }
@media (max-width: 480px) { form.card > button { width: 100%; justify-self: stretch; } }