/* =============================================================
   money.css — "Money" panel (#panel-money)
   -------------------------------------------------------------
   The panel is a 3-page swiper (Group budget / My budget / My
   checklist) reusing the .map-pager/.map-page/.map-dot pager
   classes from css/map.css — those are the shared pager language,
   not Map-only. Contains: the summary stat cards + status pill
   (.stat-*, .status-pill/.status-good/-warn/-over), the
   cost-breakdown donut + legend (.donut*, .legend*), the
   per-category accordions (.cat-*), each line item (.item*), the
   add/edit/delete editor (.budget-*), the settlement summary
   (.settlement-*), optional-extra checkbox row (.opt-toggle), the
   in/out stamp (unused by current markup but kept — .stamp*), the
   alternative switch (.alt-toggle/.alt-btn), the personal budget
   page bits (.personal-*), and the personal checklist page
   (.checklist-*). Data comes from the API via js/api-data.js.
   Rendered by js/render-money.js (+ js/render-checklist.js for
   page 3), which recompute and re-render on every interaction.
   ============================================================= */
/* ============ MONEY ============ */
#panel-money{ padding-inline:0; padding-bottom:0 }
.stat-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px}
.stat-card{ background:var(--paper); border-radius:var(--radius-md); box-shadow:var(--shadow); padding:14px 15px}
.stat-card .n{ font-family:var(--font-mono); font-size:22px; font-weight:600; color:var(--ink)}
.stat-card .l{ font-size:11px; color:var(--ink-45); text-transform:uppercase; letter-spacing:.05em; margin-top:2px}
.stat-card.wide{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between}
.status-pill{ font-family:var(--font-mono); font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:999px}
.status-good{background:var(--teal-10); color:var(--teal)}
.status-warn{background:var(--gold-10); color:var(--gold-text)}
.status-over{background:var(--buoy-10); color:var(--buoy)}

.donut-wrap{ display:flex; align-items:center; gap:22px; background:var(--paper); border-radius:var(--radius-md); box-shadow:var(--shadow); padding:20px; margin-bottom:16px}
.donut{ width:132px; height:132px; border-radius:50%; flex-shrink:0; position:relative;}
.donut::after{
  content:''; position:absolute; inset:20px; background:var(--paper); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.donut-center{ position:absolute; inset:20px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.donut-center .dc-n{ font-family:var(--font-mono); font-weight:700; font-size:16px}
.donut-center .dc-l{ font-size:9px; color:var(--ink-45); text-transform:uppercase; letter-spacing:.04em}
.legend{ flex:1; display:flex; flex-direction:column; gap:7px}
.leg-row{ display:flex; align-items:center; gap:8px; font-size:12px}
.leg-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0}
.leg-row .lname{flex:1; color:var(--ink-70)}
.leg-row .lval{ font-family:var(--font-mono); font-weight:600; color:var(--ink)}

.cat-accordion{ margin-bottom:10px}
.cat-head{
  width:100%; background:var(--paper); border:none; border-radius:var(--radius-md); box-shadow:var(--shadow);
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:10px;
}
.cat-head .ch-left{ display:flex; align-items:center; gap:10px}
.cat-swatch{ width:11px; height:11px; border-radius:3px; flex-shrink:0}
.cat-head h4{ margin:0; font-size:14.5px; font-weight:700}
.cat-head .ch-right{ display:flex; align-items:center; gap:8px}
.cat-head .ch-amt{ font-family:var(--font-mono); font-size:13.5px; font-weight:600}
.cat-body{ display:none; padding:6px 4px 2px}
.cat-accordion.open .cat-body{display:block}
.cat-accordion.open .chevron{transform:rotate(180deg)}
.item{
  background:var(--paper); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:11px 13px; margin-top:8px;
}
.item-top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.item-top .iname{ font-size:13px; font-weight:700}
.item-top .iamt{ font-family:var(--font-mono); font-size:13px; font-weight:600; white-space:nowrap}
.item-meta{ font-size:11.5px; color:var(--ink-45); margin-top:3px}
.item-note{ font-size:11.5px; color:var(--ink-70); font-style:italic; margin-top:4px}
.item-link{ font-size:11.5px; color:var(--channel); margin-top:6px; display:inline-block; text-decoration:none; border-bottom:1px solid var(--channel-10)}
.opt-toggle{ display:flex; align-items:center; gap:8px; margin-top:9px; padding-top:9px; border-top:1px dashed var(--line)}
.opt-toggle label{ font-size:12px; color:var(--ink-70); display:flex; align-items:center; gap:7px; cursor:pointer}
.opt-toggle input{ width:16px; height:16px; accent-color:var(--buoy); cursor:pointer}
.stamp{ font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.05em; padding:2px 7px; border-radius:4px; text-transform:uppercase}
.stamp.in{ background:var(--sage-10); color:var(--sage)}
.stamp.out{ background:var(--grey-10); color:var(--grey-text)}
.alt-toggle{ margin-top:9px; padding-top:9px; border-top:1px dashed var(--line); display:flex; gap:6px}
.alt-btn{ flex:1; border:1px solid var(--line); background:var(--mist); border-radius:8px; padding:8px 8px; font-size:11px; font-weight:600; cursor:pointer; color:var(--ink-70); text-align:center}
.alt-btn.active{ background:var(--ink); color:var(--paper); border-color:var(--ink)}
.alt-btn:disabled{cursor:not-allowed; opacity:.55}

.budget-editor{margin-bottom:16px}
.budget-editor-card{
  background:var(--paper); border-radius:var(--radius-md); box-shadow:var(--shadow);
  padding:13px 14px; display:flex; flex-direction:column; gap:12px;
}
.budget-editor-title{font-size:13px; font-weight:800; color:var(--ink)}
.budget-editor-meta{font-size:11.5px; color:var(--ink-45); margin-top:3px}
.budget-editor-primary,
.budget-editor-secondary,
.budget-editor-danger{
  border:0; border-radius:var(--radius-sm); min-height:38px; padding:0 12px;
  font-size:12px; font-weight:800; cursor:pointer;
}
.budget-editor-primary{background:var(--ink); color:var(--paper)}
.budget-editor-secondary{background:var(--mist); color:var(--ink-70)}
.budget-editor-danger{background:var(--buoy-10); color:var(--buoy)}
.budget-editor-primary:disabled,
.budget-editor-secondary:disabled,
.budget-editor-danger:disabled{cursor:wait; opacity:.62}
.budget-editor-status{font-size:11.5px; color:var(--ink-70); margin-top:8px; padding-left:2px}
.budget-editor-form{display:block}
.budget-form-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px}
.budget-form-grid{display:grid; grid-template-columns:1fr; gap:10px}
.budget-form-grid label,
.budget-form-check{
  display:flex; flex-direction:column; gap:6px;
  color:var(--ink-45); font:700 10.5px/1 var(--font-mono);
  letter-spacing:.05em; text-transform:uppercase;
}
.budget-form-grid input,
.budget-form-grid select,
.budget-form-grid textarea{
  width:100%; border:1px solid var(--field-border); border-radius:var(--radius-sm);
  background:var(--field); color:var(--ink);
  font:600 13px/1.2 var(--font-body); padding:10px 11px; text-transform:none; letter-spacing:0;
}
.budget-form-grid textarea{min-height:74px; resize:vertical}
.budget-form-grid input:focus,
.budget-form-grid select:focus,
.budget-form-grid textarea:focus{outline:2px solid rgba(255,106,61,.2); border-color:var(--buoy)}
.budget-form-check{
  flex-direction:row; align-items:center; gap:8px; margin-top:12px;
  color:var(--ink-70); font-family:var(--font-body); font-size:12px; letter-spacing:0; text-transform:none;
}
.budget-form-check input{width:16px; height:16px; accent-color:var(--buoy)}
.budget-form-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.item-actions{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.item-actions button{
  border:1px solid var(--line); border-radius:7px; background:var(--mist);
  color:var(--ink-70); min-height:30px; padding:0 9px;
  font-size:11px; font-weight:800; cursor:pointer;
}
.item-actions button:hover{border-color:var(--buoy); color:var(--ink)}

.settlement-view{margin-bottom:16px}
.settlement-card{
  background:var(--paper); border-radius:var(--radius-md); box-shadow:var(--shadow);
  padding:13px 14px;
}
.settlement-head{
  display:flex; flex-direction:column; gap:10px;
  padding-bottom:11px; border-bottom:1px solid var(--line);
}
.settlement-totals{display:flex; flex-wrap:wrap; gap:7px}
.settlement-totals span{
  background:var(--mist); border-radius:999px; color:var(--ink-70);
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  padding:6px 9px;
}
.settlement-list{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.settlement-row{
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 11px;
}
.settlement-route{font-size:12.5px; font-weight:800; color:var(--ink)}
.settlement-route span{color:var(--ink-45); font-family:var(--font-mono)}
.settlement-note{font-size:11.5px; color:var(--ink-45); margin-top:3px}
.settlement-amount{display:flex; flex-direction:column; align-items:flex-end; gap:5px}
.settlement-amount b{font-family:var(--font-mono); font-size:13px}
.settlement-status{
  border-radius:999px; font-family:var(--font-mono); font-size:9.5px;
  font-weight:800; line-height:1; padding:4px 7px; text-transform:uppercase;
}
.settlement-status.pending{background:var(--gold-10); color:var(--gold-text)}
.settlement-status.paid{background:var(--teal-10); color:var(--teal)}
.settlement-status.cancelled{background:var(--grey-10); color:var(--grey-text)}
.settlement-empty{
  color:var(--ink-45); font-size:12px; border:1px dashed var(--line);
  border-radius:var(--radius-sm); padding:11px;
}

/* ============ PERSONAL BUDGET (page 2) ============ */
.personal-summary{ margin-bottom:14px }
.personal-items{ padding-bottom:8px }

/* ============ PERSONAL CHECKLIST (page 3) ============ */
.checklist-progress-card{ background:var(--paper); border-radius:var(--radius-md); box-shadow:var(--shadow); padding:13px 14px; margin-bottom:10px }
.checklist-progress-row{ display:flex; justify-content:space-between; align-items:baseline }
.checklist-count{ font-size:13px; font-weight:800 }
.checklist-pct{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-45) }
.checklist-bar{ height:6px; border-radius:999px; background:var(--mist); border:1px solid var(--line); margin-top:9px; overflow:hidden }
.checklist-bar span{ display:block; height:100%; border-radius:999px; background:var(--teal); transition:width .25s ease }
.checklist-add{ display:flex; gap:6px; margin-bottom:12px }
.checklist-add input{
  border:1px solid var(--field-border); border-radius:var(--radius-sm); background:var(--field);
  color:var(--ink); font:600 13px/1.2 var(--font-body); padding:10px 11px; min-width:0;
}
.checklist-add input[name="label"]{ flex:1.6 }
.checklist-add input[name="category"]{ flex:1 }
.checklist-add input:focus{ outline:2px solid rgba(255,106,61,.2); border-color:var(--buoy) }
.checklist-add button{ border:0; border-radius:var(--radius-sm); background:var(--ink); color:var(--paper); font-size:12px; font-weight:800; padding:0 14px; cursor:pointer }
.checklist-add button:disabled{ cursor:wait; opacity:.62 }
.checklist-status{ font-size:11.5px; color:var(--ink-70); margin:-6px 0 10px; padding-left:2px }
.checklist-group{ margin-bottom:12px }
.checklist-cat{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin:0 0 6px 2px }
.checklist-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--paper); border-radius:var(--radius-sm); box-shadow:var(--shadow);
  padding:10px 12px; margin-top:6px;
}
.checklist-tick{ display:flex; align-items:center; gap:10px; flex:1; cursor:pointer; min-width:0 }
.checklist-tick input{ width:17px; height:17px; accent-color:var(--teal); cursor:pointer; flex-shrink:0 }
.checklist-tick span{ font-size:13px; font-weight:600; line-height:1.3; overflow-wrap:anywhere }
.checklist-row.done .checklist-tick span{ text-decoration:line-through; color:var(--ink-45) }
.checklist-row-actions{ display:flex; gap:4px }
.checklist-row-actions button{ border:0; background:none; color:var(--ink-45); font-size:13px; cursor:pointer; padding:4px 6px; border-radius:6px }
.checklist-row-actions button:hover{ background:var(--mist); color:var(--ink) }
.checklist-row.editing input{
  flex:1; border:1px solid var(--field-border); border-radius:var(--radius-sm);
  font:600 13px/1.2 var(--font-body); padding:8px 10px; min-width:0;
}
.checklist-row.editing button{ border:0; border-radius:7px; font-size:11px; font-weight:800; padding:8px 10px; cursor:pointer; background:var(--ink); color:var(--paper) }
.checklist-row.editing button[data-checklist-action="cancel"]{ background:var(--mist); color:var(--ink-70) }