/* All new rules are restricted to #plan. The month workspace is unchanged. */
#plan .plan-value-row{display:grid;grid-template-columns:26px minmax(220px,1fr) 190px 260px 300px;gap:6px;align-items:center}
#plan .plan-value-row>.actions{width:300px;max-width:300px;justify-content:flex-end;margin:0}
#plan .plan-value-row>strong{justify-self:stretch}
#plan .plan-value-row>span:not(.drag-handle):not(.drag-spacer){white-space:nowrap}
#plan .month-expense-items{padding-inline:0}
#plan .plan-column-heading{font-size:var(--ops-fs-table-head);font-weight:700;padding:8px 14px;color:var(--muted)}
#plan .plan-effective{font-variant-numeric:tabular-nums}
#plan .month-section-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#plan .plan-value-row .month-planned-value{font-variant-numeric:tabular-nums;text-align:right}
@media(max-width:1100px) and (min-width:721px){
 #plan .plan-value-row{grid-template-columns:26px minmax(180px,1fr) 160px 220px 250px}
 #plan .plan-value-row>.actions{width:250px;max-width:250px}
}
@media(max-width:720px){
 #plan .plan-column-heading{display:none}
 #plan .plan-value-row{grid-template-columns:26px minmax(0,1fr)}
 #plan .plan-value-row>.month-planned-value,#plan .plan-value-row>.plan-effective{grid-column:2/-1}
 #plan .plan-value-row>.actions{grid-column:2/-1;width:auto;max-width:none;justify-content:flex-start}
 #plan .month-section-head{align-items:flex-start;flex-wrap:wrap}
 #plan .month-section-head-actions{width:100%;justify-content:space-between}
}

#plan .plan-summary-details{width:min(680px,calc(100% - 24px));max-height:85dvh;overflow-y:auto;border:1px solid var(--border);border-radius:17px;padding:20px;color:var(--text);background:var(--card)}
#plan .plan-summary-details::backdrop{background:#1c2a3499}
#plan .plan-summary-details p{line-height:1.7;color:var(--muted)}
@media(max-width:720px){#plan .plan-summary-details{padding:15px}}

#plan .plan-rows{display:block}