/* =====================================================================
   MONEY PLAN — the few styles the Recurring, Goals, Categories, Payees
   and Rules screens need beyond money.css. Tokens only, so light and
   dark both work. Prefix: mp-.
   ===================================================================== */
.mp-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mp-sep { border-top: 1px solid var(--m-line); margin: 2px 0; }
.mp-star { border: 0; background: transparent; cursor: pointer; color: var(--m-faint); font-size: 14px; padding: 0 2px; line-height: 1; font-family: inherit; }
.mp-star.on { color: var(--m-warn); }
.mp-edit { color: var(--m-accent); font-weight: 600; }

/* recurring */
.mp-inst { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.mp-inst .m-progress { flex: 1; }
.mp-inst span { font-size: 11.5px; color: var(--m-muted); white-space: nowrap; }

/* goals */
.mp-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mp-goal-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.mp-goal-top .m-row-main { flex: 1; min-width: 0; }
.mp-goal-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.mp-goal-fig { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 8px; font-size: 12.5px; }
.mp-goal-fig b { font-size: 15px; font-weight: 700; }
.mp-goal-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--m-muted); margin-top: 8px; }
.mp-goal-acts { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 12px; border-top: 1px solid var(--m-line-soft); padding-top: 10px; }

/* categories */
.mp-grouphead { display: flex; align-items: center; gap: 10px; padding: 12px 20px; cursor: pointer; }
.mp-grouphead:hover { background: var(--m-surface-2); }
.mp-grouphead .n { font-weight: 600; font-size: 13px; }
.mp-grouphead .k { font-size: 11px; color: var(--m-faint); margin-right: auto; }
.mp-grouphead svg.i { color: var(--m-faint); transition: transform .12s; }
.mp-grouphead.collapsed svg.i.mp-chev { transform: rotate(-90deg); }
.mp-grouplist { border-top: 1px solid var(--m-line-soft); }
.mp-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-picker .m-btn.icon { padding: 6px; }
.mp-preview { display: flex; align-items: center; gap: 10px; }

/* rules */
.mp-rules { display: flex; flex-direction: column; gap: 10px; }
.mp-rule { cursor: pointer; padding: 14px 16px; }
.mp-rule:hover { border-color: var(--m-faint); }
.mp-rule.sel { border-color: var(--m-accent); box-shadow: 0 0 0 1px var(--m-accent); }
.mp-rule-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mp-rule-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-rule-top .m-toggle { margin-left: auto; }
.mp-rule-when { font-size: 12px; color: var(--m-muted); margin-top: 6px; line-height: 1.45; }
.mp-rule-when b { font-weight: 600; font-size: 10.5px; letter-spacing: .04em; color: var(--m-faint); }
.mp-rule-then { font-size: 12px; color: var(--m-accent); font-weight: 500; margin-top: 4px; }
.mp-rule.off .mp-rule-name, .mp-rule.off .mp-rule-when, .mp-rule.off .mp-rule-then { opacity: .5; }
.mp-editor { position: sticky; top: 72px; }
.mp-when { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--m-muted); flex-wrap: wrap; }
.mp-cond { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 6px; align-items: center; }
@media (max-width: 600px) { .mp-cond { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }