/* Budget (bg-*): only what docs/ui-design/frs.css does not already give the .m-* components. The by-month workspaces, Compare
   and the dialogs keep plan.css, plan-le.css and plan-compare.css. */
.bg-chip { height: 20px; font-size: 11.5px; margin-left: 2px; }
.m-seg button .bg-chip::before { width: 5px; height: 5px; }
.bg-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bg-why, .bg-fail { max-width: 340px; }
.bg-fail { color: var(--bad); }
.bg-note { display: block; }
.m-banner .ico .ic { width: 18px; height: 18px; }

/* the summary grid */
.bg-card { overflow: hidden; }
.bg-table th.bg-ach { width: 180px; }
.bg-table td { white-space: nowrap; }
.bg-ach-c { display: flex; align-items: center; gap: 8px; }
.bg-ach-c .m-meter { flex: 1; min-width: 60px; }
.bg-ach-c .t-sm { width: 44px; text-align: right; }
.bg-table td.m-up { color: var(--ok); }
.bg-table td.m-down { color: var(--bad); }
.bg-table tr.total td { background: #faf9f7; }

/* empty state */
.bg-empty { display: flex; flex-direction: column; align-items: center; gap: 28px; padding-top: 48px; }
.bg-empty-t { font-size: 17px; line-height: 24px; font-weight: 600; }
.bg-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 880px; }
.bg-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-1); text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .2s ease, transform .2s var(--ease); }
.bg-opt:hover { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(105, 58, 148, .10); transform: translateY(-2px); }
.bg-opt .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-deep); }
.bg-opt .ico .ic { width: 22px; height: 22px; }
.bg-opt b { font-size: 17px; font-weight: 600; }
.bg-tpl { display: flex; justify-content: center; margin-top: -12px; }
a.m-btn { text-decoration: none; }

.bg-skel { display: grid; gap: 12px; }
.bg-skel i { display: block; height: 72px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--sunken) 25%, #e9e6e1 50%, var(--sunken) 75%); background-size: 200% 100%; animation: m-shimmer 1.6s linear infinite; }

@media (max-width: 760px) {
  .bg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bg-kpis .m-kpi { padding: 14px 14px 12px; }
  .bg-kpis .fig { font-size: 24px; line-height: 28px; }
  .bg-table th.bg-ach { width: 130px; }
  .bg-opts { grid-template-columns: minmax(0, 1fr); }
}