/* ============================================================
   Notes workspace + monthly budget
   ============================================================ */
.notes-meta { font-size: 12.5px; color: var(--fg-faint); padding: 0 2px; }
.notes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap); align-items: start;
}
.note {
  position: relative; display: flex; background: var(--bg-1);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-card);
}
.note.pinned { border-color: var(--note-c); }
.note-bar { width: 4px; flex: none; background: var(--note-c); }
.note-body { flex: 1; min-width: 0; padding: 15px 16px 13px; display: flex; flex-direction: column; gap: 9px; }
.note-head { display: flex; align-items: flex-start; gap: 10px; }
.note-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; flex: 1; }
.note-pin { flex: none; background: transparent; border: 0; color: var(--fg-ghost); cursor: pointer;
  padding: 3px; border-radius: 6px; display: grid; place-items: center; transition: .12s ease; }
.note-pin:hover { color: var(--fg-muted); background: var(--bg-2); }
.note-pin.on { color: var(--note-c); }
.note-text { font-size: 12.5px; line-height: 1.6; color: var(--fg-muted); white-space: pre-wrap; word-break: break-word; }
.note-foot { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.note-date { font-size: 11px; color: var(--fg-ghost); }
.note-edit { margin-left: auto; background: transparent; border: 0; color: var(--fg-faint);
  font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.note-edit:hover { color: var(--fg); background: var(--bg-2); }

.note-title-input {
  width: 100%; background: transparent; border: 0; outline: none; color: var(--fg);
  font-family: var(--font); font-size: 14.5px; font-weight: 600; padding: 0;
}
.note-title-input::placeholder { color: var(--fg-ghost); }
.note-text-input {
  width: 100%; background: var(--bg-0); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  outline: none; color: var(--fg); font-family: var(--font); font-size: 12.5px; line-height: 1.6;
  padding: 9px 11px; resize: none; min-height: 88px; overflow: hidden;
}
.note-text-input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-dim); }
/* row wraps so the Delete/Done buttons never overflow a narrow note card */
.note-edit-row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.note-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.nc-dot { width: 17px; height: 17px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 1px var(--line) inset; transition: transform .1s ease; flex: none; }
.nc-dot:hover { transform: scale(1.12); }
.nc-dot.on { border-color: var(--bg-1); box-shadow: 0 0 0 2px var(--fg); }
/* keep the two buttons together, pushed to the right; they wrap as a unit */
.note-edit-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.note-edit-row .spacer { flex: 1; }

/* ---- monthly DCA budget (cryptoasset) ---- */
.budget-head { display: flex; align-items: center; gap: 12px; padding: 16px var(--pad) 0; }
.budget-total { display: flex; align-items: baseline; gap: 10px; padding: 10px var(--pad) 4px; flex-wrap: wrap; }
.budget-total .bt-amt { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.budget-total .bt-input {
  width: 130px; height: 40px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.budget-total .bt-label { font-size: 12px; color: var(--fg-faint); }
.budget-bar { display: flex; height: 12px; border-radius: 7px; overflow: hidden; gap: 2px; margin: 8px var(--pad) 0; background: var(--bg-0); }
.budget-bar .bb-seg { transition: width .3s ease; min-width: 2px; }
.budget-bar .bb-rest { flex: 1; background: repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 5px, transparent 5px, transparent 10px); }

.budget-rows { padding: 12px var(--pad) 4px; display: flex; flex-direction: column; }
.budget-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--line-soft); }
.budget-row:first-child { border-top: 0; }
.budget-row .br-name { font-size: 13px; font-weight: 600; }
.budget-row .br-sym { font-size: 11px; color: var(--fg-faint); }
.budget-row .br-track { height: 6px; background: var(--bg-0); border-radius: 4px; overflow: hidden; }
.budget-row .br-fill { height: 100%; border-radius: 4px; transition: width .3s ease; }
.budget-row .br-input { width: 104px; }
.budget-row .br-pct { width: 46px; text-align: right; font-size: 12px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }

.budget-foot { display: flex; align-items: center; gap: 10px; padding: 12px var(--pad) var(--pad); }
.budget-status { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.budget-status.ok { color: var(--gain); }
.budget-status.over { color: var(--loss); }
.budget-status.under { color: var(--fg-faint); }
.budget-foot .spacer { flex: 1; }

@media (max-width: 560px) {
  .budget-row { grid-template-columns: auto 1fr auto; }
  .budget-row .br-track { display: none; }
}