/* ── todo-box：卡片右邊的三個框（黃＝要找錢、藍＝要找人、綠＝要找項目） ── */
.todo-boxes{display:grid;gap:var(--sp-5);min-width:0}
.todo-box{--c:var(--line);--ci:var(--ink-2);--cb:var(--surface-2);border:2px solid var(--c);border-radius:var(--r-md);background:var(--cb);min-width:0;overflow:hidden}
.todo-box.tb-m{--c:var(--money);--ci:var(--money-ink);--cb:var(--money-bg)}
.todo-box.tb-p{--c:var(--people);--ci:var(--people-ink);--cb:var(--people-bg)}
.todo-box.tb-j{--c:var(--project);--ci:var(--project-ink);--cb:var(--project-bg)}
.tb-head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-5) var(--sp-1) var(--sp-1)}
.tb-head h3{margin:0;font-size:var(--fs-md);font-weight:900;color:var(--ci);line-height:var(--lh-tight);white-space:nowrap}
.tb-cnt{margin-left:auto;font-size:var(--fs-cap);color:var(--ink-2);white-space:nowrap}
.box-grip{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);border:0;border-radius:var(--r-sm);
  background:none;color:var(--ci);cursor:grab;touch-action:none}
.box-grip:hover{background:var(--surface)}
.todo-box.ds-dragging{background:var(--surface)}

.tb-list{list-style:none;margin:0;padding:0 var(--sp-3) var(--sp-3);display:grid;gap:var(--sp-2)}
.tb-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);min-width:0}
.tb-item.is-open{border-color:var(--c);box-shadow:0 0 0 1px var(--c)}
.tb-sum{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--sp-3);align-items:center;width:100%;min-height:var(--tap);
  padding:var(--sp-3) var(--sp-5);border:0;background:none;text-align:left;border-radius:var(--r-md)}
.tb-sum:hover{background:var(--surface-2)}
.tb-t{font-size:var(--fs-body);font-weight:700;line-height:var(--lh-tight);overflow-wrap:anywhere}
.tb-meta{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3);font-size:var(--fs-cap);color:var(--ink-3);line-height:var(--lh-tight)}
.tb-money{color:var(--ok-ink);font-weight:700;font-variant-numeric:tabular-nums}
.tb-chev{grid-column:2;grid-row:1/3;color:var(--ink-3);font-size:var(--fs-md);transition:transform var(--dur) var(--ease)}
.tb-item.is-open .tb-chev{transform:rotate(90deg)}
.tb-detail{padding:var(--sp-2) var(--sp-5) var(--sp-5);border-top:1px solid var(--line-2);animation:tb-in var(--dur) var(--ease)}
@keyframes tb-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tb-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-4);flex-wrap:wrap}
.tb-save{font-size:var(--fs-cap);color:var(--ink-3);min-height:1.5em}
.tb-save.is-saved{color:var(--ok-ink);font-weight:700}
.tb-save.is-saved::before{content:"✓ "}
.tb-save.is-error{color:var(--bad-ink);font-weight:700}
.tb-retry{margin-left:var(--sp-3);min-height:var(--tap);padding:0 var(--sp-5);border:1px solid var(--bad);border-radius:7px;background:var(--surface);color:var(--bad-ink);font-weight:700;font-size:var(--fs-sm)}
.tb-empty{margin:0;padding:var(--sp-1) var(--sp-5) var(--sp-4);font-size:var(--fs-sm);color:var(--ink-2)}
.tb-done-toggle{display:block;margin:0 var(--sp-3) var(--sp-3);min-height:var(--tap);padding:0 var(--sp-3);border:0;background:none;color:var(--ci);font-weight:700;font-size:var(--fs-sm);text-decoration:underline;text-underline-offset:3px}
.tb-done .tb-t{color:var(--ink-2)}
.tb-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2);padding:0 var(--sp-3) var(--sp-3)}
.tb-add input{min-width:0;min-height:var(--tap);padding:var(--sp-2) var(--sp-4);border:1px dashed var(--c);border-radius:7px;background:var(--surface);font-size:var(--fs-body)}
.tb-add .btn{padding:0 var(--sp-5);white-space:nowrap}