/* Samen → Geld: the huishoudboekje (ADR 0014). Zondag tokens only (app.css), so the night variant follows by itself.
   Calm on purpose: white cards, bars in accent, the "today" tick in ink, overspent in --bad. No room pastels here:
   those mean rooms. */
.geld-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.geld-month { display: inline-flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-1); font-weight: 600; }
.geld-month span { min-width: 7.5rem; text-align: center; }
.geld-month .remove:disabled { opacity: 0.3; }

.geld-total { padding: var(--s-4); border-radius: var(--r-xl); background: var(--surface); }
.geld-total .label { margin: 0; }
.geld-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--s-2); margin: var(--s-1) 0 var(--s-3); }
.geld-big strong { font-family: var(--display); font-weight: 800; font-size: var(--t-3xl); letter-spacing: -0.03em; line-height: 1; }
.geld-big span { color: var(--muted); font-size: var(--t-m); }
.geld-total .meta { margin: var(--s-2) 0 0; }

/* a bar: filled up to --v, a 3 px ink tick at today's place in the month */
.geld-bar { position: relative; height: 1.25rem; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.geld-bar.small { height: 0.75rem; }
.geld-bar i { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: var(--accent); }
.geld-bar b { position: absolute; top: 0; bottom: 0; left: var(--v); width: 3px; margin-left: -1.5px; background: var(--text); }
.geld-bar.over i, .geld-pots .over .geld-bar i { background: var(--bad); }

.geld-add { margin-bottom: var(--s-2); }
.geld-add input.qty { flex-basis: 5.5rem; }
.geld-quick { display: grid; gap: var(--s-2); margin: 0 0 var(--s-3); }
.geld-quick .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.geld-quick .chips::-webkit-scrollbar { display: none; }
.geld-quick .chip { white-space: nowrap; }
.geld-quick .meta { margin: 0 var(--s-1); }
.geld-added { margin-top: var(--s-2); }

.geld-pots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.geld-pots li { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-l); background: var(--surface); }
.geld-pot-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.geld-pot-head strong { font-family: var(--display); font-size: var(--t-l); font-weight: 700; letter-spacing: -0.01em; }
.geld-pot-head span { font-family: var(--display); font-weight: 700; white-space: nowrap; }
.geld-pot-head small { font-family: var(--font); font-weight: 400; color: var(--muted); }
.geld-left { color: var(--muted); font-size: var(--t-s); }
.geld-pots .over .geld-left { color: var(--bad); font-weight: 600; }

.geld-shares { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); width: 100%; padding: 0; border: 0; background: none; color: inherit;
               text-align: left; cursor: pointer; }
.geld-share { display: flex; align-items: center; gap: var(--s-3); min-height: 4.5rem; padding: var(--s-3); border-radius: var(--r-l); background: var(--surface); }
.geld-share > span:last-child { display: grid; min-width: 0; }
.geld-share strong { font-family: var(--display); font-size: var(--t-l); font-weight: 800; letter-spacing: -0.01em; }
.geld-share small { color: var(--muted); font-size: var(--t-s); overflow-wrap: anywhere; }
.geld-share .who-avatar.w { background: var(--lila); }
.geld-settle { margin: var(--s-2) var(--s-1) 0; }

.geld-expenses li { padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4); }
.geld-expenses .name { display: grid; gap: 0.1rem; }
.geld-expenses .name .meta { text-align: left; }
.geld-amount { font-family: var(--display); font-weight: 700; white-space: nowrap; }
.geld-expenses button.bad.small { min-height: 2.25rem; margin-right: var(--s-1); padding: 0 var(--s-3); }

.geld-lines { margin-bottom: var(--s-2); border-radius: var(--r-l); background: var(--surface); }
.geld-lines summary { display: flex; align-items: center; gap: var(--s-2); min-height: 3.5rem; padding: 0 var(--s-4); cursor: pointer; list-style: none; }
.geld-lines summary::-webkit-details-marker { display: none; }
.geld-lines summary strong { flex: 1; font-weight: 600; }
.geld-lines summary span { font-family: var(--display); font-weight: 700; }
.geld-lines summary::after { content: "▾"; color: var(--muted); }
.geld-lines[open] summary::after { content: "▴"; }
.geld-lines ul { list-style: none; margin: 0; padding: 0 var(--s-2) var(--s-2); display: grid; gap: var(--s-1); }
.geld-lines li button { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); width: 100%; min-height: var(--tap);
                        padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-m); background: var(--bg); color: var(--text); text-align: left; }
.geld-lines li button span:first-child { overflow-wrap: anywhere; }
.geld-lines li button span:last-child { white-space: nowrap; font-weight: 600; }
.geld-lines li small { margin-left: var(--s-2); padding: 0.1rem var(--s-2); border-radius: var(--r-pill); background: var(--accent-soft); font-size: var(--t-xs); font-weight: 600; }
.geld button.secondary.wide { margin-top: var(--s-2); }

.geld-private { font-size: var(--t-s); }

.geld-sheet form { display: grid; gap: var(--s-2); }
.geld-sheet .label { margin: var(--s-3) 0 0; }
.geld-sheet input:not([type]), .geld-sheet input[inputmode] { width: 100%; box-sizing: border-box; background: var(--bg); }
.page h2.geld-sheet-title { margin: 0 0 var(--s-1); font-family: var(--display); font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.geld-estimate { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); margin-top: var(--s-2); }
.geld-estimate input { width: 1.25rem; min-height: 1.25rem; height: 1.25rem; padding: 0; accent-color: var(--accent); }
.geld-sheet-foot { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-3); }
.geld-split { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.geld-split span { display: flex; justify-content: space-between; }
.geld-split strong { font-family: var(--display); font-weight: 800; }