/* Expenses (daily spending log) card. Split out of styles.css — which is at
   its 500-line cap — following the same per-feature stylesheet convention as
   checklist.css. Reuses the shared palette/vocabulary rather than
   re-declaring it: rows are `.entry-row`/`.entry-icon`/`.entry-body`/
   `.entry-title-row`/`.entry-title`/`.entry-price`/`.entry-sub`/
   `.entry-actions` (day editor), the total banner is `.costs-total` (costs
   panel), and the add/edit form reuses `.cost-section`-era `.participants`/
   `.part-item`/`.part-check` plus the generic `.form-row`/`.form-actions`. */

.expenses-section { display: flex; flex-direction: column; }
.expenses-actions { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; }
.expenses-actions .btn { white-space: nowrap; }
.expenses-sort { min-width: 8.5rem; }

.expenses-total { margin-bottom: 1rem; }

.expenses-days { display: flex; flex-direction: column; gap: 1.1rem; }
.expenses-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.expenses-day-total { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); padding: 0.1rem 0.5rem; border-radius: 999px; }

.expenses-flat { margin-top: 0.2rem; }

.expenses-form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

@media (max-width: 480px) {
  .expenses-actions { flex-wrap: wrap; }
}