/* =====================================================
   css/budget-wizard.css — the budget setup wizard, which lives
   inside toolkit.html as the #setup view (it used to be the
   separate budget-calculator.html page; Trello W4 merged the two).
   Prefix: bc-. Every rule is scoped to .bc-* classes so nothing here
   reaches the dashboard around it. Tokens come from css/main.css.
   ===================================================== */

/* ── View switch: while the wizard is open (toolkit.html#setup) the
   dashboard around it is hidden, so the page is one task at a time. ── */
body.bc-open .dash-layout > :not(#setup) { display: none !important; }

/* ── Wrapper ── */
.bc-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 0 24px;
  padding-inline: 16px;
}

/* ── Top bar ── */
.bc-topbar {
  width: 100%;
  max-width: 600px;
  padding: 24px 0 16px;
  display: flex;
  align-items: center;
}
.bc-exit {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap);
  padding-inline: 4px;
  font-size: 1rem; font-weight: 700; color: var(--color-primary);
  border-radius: var(--radius-sm);
}
.bc-exit:hover { text-decoration: underline; }

/* ── Progress bar ── */
.bc-progress-area {
  position: sticky;
  top: var(--header-h, 0px);   /* below the sticky site header (js/nav.js) */
  z-index: 20;
  background: var(--color-bg);
  width: 100%;
  max-width: 600px;
  padding: 10px 0 14px;
}
.bc-progress-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.bc-progress-track {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}
.bc-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  width: 0%;
  transition: width 0.35s ease;
}

/* ── Card ── */
.bc-card {
  width: 100%;
  max-width: 600px;
  background: #ffffff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 40px 48px;
}

/* ── Screen management ── */
.bc-screen { animation: bcFadeIn 0.24s ease forwards; }
.bc-hidden { display: none !important; }
@keyframes bcFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Step title ── */
.bc-step-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}
.bc-step-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 6px;
  line-height: 1.3;
}
.bc-step-sub {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 24px;
  line-height: 1.5;
}

/* ── Welcome ── */
.bc-welcome-wrap {
  text-align: center;
  padding: 12px 0 8px;
}
.bc-welcome-icon { font-size: 64px; color: var(--color-primary); line-height: 1; margin-bottom: 18px; }
.bc-welcome-title { font-family: var(--font-display); font-size: 1.625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); margin: 0 0 12px; }
.bc-welcome-sub {
  font-size: 16px; color: var(--color-text-muted); line-height: 1.65;
  margin: 0 0 32px; max-width: 440px; margin-inline-start: auto; margin-inline-end: auto;
}
.bc-welcome-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 54px; padding: 0 40px;
  background: var(--color-primary); color: #fff;
  border: none; border-radius: var(--radius-md);
  font-size: 17px; font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  box-shadow: var(--shadow-primary);
  transition: background 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.bc-welcome-btn:hover:not(:disabled) { background: var(--color-primary-hover); }
.bc-welcome-btn:active:not(:disabled) { transform: translateY(1px); }
.bc-welcome-btn:disabled { opacity: 0.8; cursor: default; }

/* ── Form elements ── */
.bc-field { margin-bottom: 18px; }
.bc-label {
  display: block;
  font-size: 14px; font-weight: 500;
  color: var(--color-text-muted); margin-bottom: 7px;
}
.bc-input-wrap { position: relative; }
.bc-currency {
  position: absolute;
  inset-inline-start: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px; font-weight: 600;
  color: var(--color-text-muted); pointer-events: none;
}
.bc-input {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  font-size: 16px; color: var(--color-text);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bc-input.bc-with-currency { padding-inline-start: 46px; }
.bc-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-ring);
}
.bc-input.bc-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
}
.bc-hint {
  font-size: 12px; color: var(--color-text-muted);
  margin-top: 5px; line-height: 1.4;
}

/* ── Pill buttons ── */
.bc-pill-group { display: flex; flex-wrap: wrap; gap: 10px; }
.bc-pill-group.bc-vert { flex-direction: column; gap: 9px; }
/* Visually hidden but still focusable — display:none would remove the
   radios from the keyboard tab order and lock keyboard users out. */
.bc-pill-input {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}
.bc-pill-label:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-ring);
}
.bc-pill-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border: 1.5px solid var(--color-border); border-radius: 50px;
  cursor: pointer; font-size: 15px; font-weight: 500;
  color: var(--color-text); background: #fff;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.bc-pill-group.bc-vert .bc-pill-label { border-radius: var(--radius-md); padding: 14px 18px; }
.bc-pill-label:hover { border-color: var(--color-primary); background: var(--color-bg); }
.bc-pill-label.bc-sel { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ── "Add another" rows + user-added rows (custom options) ── */
.bc-add-row { display: flex; gap: 8px; margin: 4px 0 18px; }
.bc-add-input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  font-size: 14px;
}
.bc-add-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 18px;
  background: var(--color-bg);
  color: var(--color-primary);
  border: 1.5px dashed var(--color-accent);
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bc-add-btn:hover { background: var(--color-bg-info); border-color: var(--color-primary); }
.bc-add-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-ring);
}
.bc-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.bc-chip-x {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%;
  color: var(--color-text-muted); font-size: 15px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bc-chip-x:hover { background: rgba(217, 48, 37, 0.1); color: var(--error); }
.bc-other-wrap { margin-top: 10px; }

/* ── Save-salary quick action (Step 1) ── */
.bc-salary-save {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: #EEF4FB;
  border: 1.5px solid var(--color-bg-info);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-top: 8px;
}
.bc-salary-save.show { display: flex; }
.bc-salary-save-msg {
  flex: 1;
  min-width: 170px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.bc-salary-save-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  background: var(--color-primary); color: #fff;
  border: none; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bc-salary-save-btn:hover:not(:disabled) { background: var(--color-primary-hover); }
.bc-salary-save-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.bc-salary-save.saved {
  border-color: rgba(26, 158, 92, 0.4);
  background: rgba(26, 158, 92, 0.07);
}
.bc-salary-save.saved .bc-salary-save-msg { color: var(--success-accent); font-weight: 500; }
.bc-salary-save.error {
  border-color: rgba(217, 48, 37, 0.35);
  background: rgba(217, 48, 37, 0.06);
}
.bc-salary-save.error .bc-salary-save-msg { color: var(--error); }
.bc-spin-sm {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bcSpin 0.65s linear infinite;
}

/* ── Divider within card ── */
.bc-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 20px 0;
}

/* ── Section heading ── */
.bc-section-head {
  font-size: 13px; font-weight: 600;
  color: var(--color-text-muted); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 14px;
}

/* ── Error inline ── */
.bc-err {
  display: none;
  font-size: 13px; color: var(--error);
  margin-top: 8px; align-items: center; gap: 5px;
}
.bc-err.show { display: flex; }
.bc-err i { font-size: 15px; flex-shrink: 0; }

/* ── Savings textarea ── */
.bc-textarea {
  width: 100%; min-height: 80px; resize: vertical;
  background: #fff; border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); padding: 13px 16px;
  font-size: 15px; color: var(--color-text);
  font-family: var(--font-sans);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.bc-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-ring); }

/* ── Nav buttons ── */
.bc-nav {
  position: sticky;
  bottom: var(--tabbar-on, 0px); z-index: 20;   /* above the mobile tab bar */
  background: var(--color-bg);
  width: 100%; max-width: 600px;
  display: flex; gap: 12px;
  padding: 16px 0 28px;
}
.bc-btn-back {
  height: 52px; padding: 0 22px;
  background: transparent; color: var(--color-text-muted);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  font-size: 15px; font-weight: 500;
  font-family: var(--font-sans); cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.bc-btn-back:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-bg); }
.bc-btn-back.bc-ghost { visibility: hidden; pointer-events: none; }

.bc-btn-next {
  flex: 1; height: 52px;
  background: var(--color-primary); color: #fff;
  border: none; border-radius: var(--radius-md);
  font-size: 16px; font-weight: 600;
  font-family: var(--font-sans); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--shadow-primary);
  transition: background 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.bc-btn-next:hover:not(:disabled) { background: var(--color-primary-hover); }
.bc-btn-next:active:not(:disabled) { transform: translateY(1px); }
.bc-btn-next:disabled { opacity: 0.7; cursor: not-allowed; box-shadow: none; }

/* ── Spinner ── */
.bc-spin {
  width: 17px; height: 17px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bcSpin 0.65s linear infinite;
}
@keyframes bcSpin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════
   SUMMARY SCREEN → FINANCIAL DASHBOARD
   Presentation only — every figure comes from the same buildSummary()
   maths that fed the old receipt view. Prefix: bc-dash / bc-*.
   ══════════════════════════════════════ */
#bc-s9.bc-dashboard { padding-top: 2px; }

.bc-dash-head { margin-bottom: 18px; }
.bc-dash-head .bc-step-title { margin-bottom: 4px; }

/* ── 1 · AI Financial Overview ── */
.bc-ai-card {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-info);
  background: linear-gradient(135deg, #EAF2FF 0%, #F7FAFF 100%);
  padding: 24px 26px;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.bc-ai-card.bc-in { opacity: 1; transform: translateY(0); }
.bc-ai-card[data-status="healthy"] { background: linear-gradient(135deg, #E5F5EC 0%, #F4FBF7 100%); border-color: rgba(4,120,87,0.20); }
.bc-ai-card[data-status="caution"] { background: linear-gradient(135deg, #FDF3E4 0%, #FFFBF3 100%); border-color: rgba(180,83,9,0.22); }
.bc-ai-card[data-status="risk"]    { background: linear-gradient(135deg, #FDEDEB 0%, #FFF6F5 100%); border-color: rgba(217,48,37,0.20); }

.bc-ai-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bc-ai-avatar {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  box-shadow: 0 4px 12px -2px rgba(37,99,235,0.45);
}
.bc-ai-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bc-ai-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-primary);
}
.bc-ai-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600; color: var(--color-text);
}
.bc-ai-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.bc-ai-card[data-status="healthy"] .bc-ai-dot { background: var(--success-accent); box-shadow: 0 0 0 4px rgba(26,158,92,0.18); }
.bc-ai-card[data-status="caution"] .bc-ai-dot { background: var(--warning-accent); box-shadow: 0 0 0 4px rgba(232,164,74,0.20); }
.bc-ai-card[data-status="risk"]    .bc-ai-dot { background: var(--error);          box-shadow: 0 0 0 4px rgba(217,48,37,0.18); }
.bc-ai-card[data-status="neutral"] .bc-ai-dot { background: var(--color-accent);    box-shadow: 0 0 0 4px rgba(62,123,255,0.18); }
/* Bulleted overview — one plain idea per line, an icon per bullet for
   quick scanning without reading. First bullet is the health verdict. */
.bc-ai-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.bc-ai-item {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 16px; line-height: 1.5; color: var(--color-text-mid);
}
.bc-ai-item:first-child { font-size: 18px; font-weight: 700; color: var(--color-text); }
.bc-ai-text strong { color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.bc-ai-ico {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.bc-ai-ico.good { background: var(--success-tint); color: var(--success); }
.bc-ai-ico.info { background: var(--blue-100);     color: var(--color-primary); }
.bc-ai-ico.tip  { background: var(--warning-tint); color: var(--warning); }
.bc-ai-ico.warn { background: var(--error-tint);   color: var(--error); }
.bc-ai-ico.love { background: #FDEBF3;             color: #DB2777; }

/* ── Dashboard grid: chart (left) + KPIs (right) ── */
.bc-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 26px;
  align-items: start;
  margin-bottom: 34px;
}

/* ── 2 · Donut chart card ── */
.bc-chart-card {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 22px 20px 18px;
  box-shadow: var(--shadow-sm);
}
.bc-chart-card-head {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-muted);
  margin: 0 0 16px;
}
.bc-donut-wrap {
  position: relative;
  width: 220px; max-width: 100%;
  margin: 0 auto 6px;
  aspect-ratio: 1 / 1;
}
.bc-donut { width: 100%; height: 100%; display: block; overflow: visible; }
.bc-slice {
  fill: none;
  stroke-width: 26;
  stroke-linecap: butt;
  cursor: pointer;
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
  transition: stroke-dasharray .8s cubic-bezier(.22,.61,.36,1),
              stroke-width .22s ease, opacity .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.bc-slice:focus { outline: none; }
.bc-slice:focus-visible { stroke-width: 31; }
.bc-donut.bc-focusing .bc-slice { opacity: .32; }
.bc-donut.bc-focusing .bc-slice.bc-on { opacity: 1; stroke-width: 31; }
.bc-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
  padding: 0 18px;
}
.bc-donut-center-label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.02em; }
.bc-donut-center-val {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; color: var(--color-text);
  line-height: 1.15; margin-top: 3px; font-variant-numeric: tabular-nums;
}
.bc-donut-center-sub { font-size: 11.5px; color: var(--color-text-faint); margin-top: 4px; line-height: 1.3; }

/* Floating insight card (updates on hover / tap) */
.bc-insight {
  margin-top: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-muted);
  padding: 14px 16px;
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.bc-insight.bc-pop { animation: bcInsightPop .32s ease; }
@keyframes bcInsightPop { from { transform: scale(.98); opacity: .6; } to { transform: scale(1); opacity: 1; } }
.bc-insight-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.bc-insight-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
}
.bc-insight-name { font-size: 15.5px; font-weight: 700; color: var(--color-text); }
.bc-insight-fig {
  margin-inline-start: auto; text-align: end;
  font-size: 16px; font-weight: 700; color: var(--color-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bc-insight-fig small { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.bc-insight-note { font-size: 14px; line-height: 1.55; color: var(--color-text-mid); margin: 7px 0 0; }

/* Legend — shows the biggest few categories only (the rest live in the
   chart tap detail + the "See all details" list, so nothing is listed
   twice). Larger text + swatches for easy reading. */
.bc-legend {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  margin-top: 18px;
}
.bc-legend-item {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 9px 10px;
  border-radius: 10px; cursor: pointer; text-align: start; width: 100%;
  min-width: 0;   /* grid/flex items don't shrink below content by default — without this the row overflows its column instead of truncating */
  font-family: var(--font-sans); font-size: 14.5px; color: var(--color-text-mid);
  transition: background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.bc-legend-item:hover { background: var(--color-bg-muted); }
.bc-legend-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-ring); }
.bc-legend-item.bc-on { background: var(--color-bg-info); color: var(--color-text); font-weight: 600; }
.bc-legend-dot { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.bc-legend-label {
  flex: 1 1 auto; min-width: 0;   /* lets ellipsis actually engage instead of pushing the % out */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bc-legend-pct { flex-shrink: 0; margin-inline-start: 4px; font-weight: 700; font-size: 15px; color: var(--color-text); font-variant-numeric: tabular-nums; }
.bc-legend-more {
  grid-column: 1 / -1; margin: 4px 0 0; padding: 2px 4px;
  font-size: 13px; color: var(--color-text-muted); line-height: 1.4;
}

/* ── 3 · KPI cards ──
   Two big HERO numbers (the ones that matter at a glance) sit above a
   row of smaller secondary figures, instead of one dense grid. */
.bc-kpi-col { display: flex; flex-direction: column; gap: 16px; }
.bc-kpi-hero { display: flex; flex-direction: column; gap: 16px; }
.bc-kpi-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; }

.bc-kpi {
  position: relative; overflow: hidden; min-width: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-soft);
  box-shadow: var(--shadow-xs);
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease,
              box-shadow .2s ease, border-color .2s ease;
}
.bc-kpi.bc-in { opacity: 1; transform: translateY(0); }
.bc-kpi:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: var(--color-border-info); }
.bc-kpi-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bc-kpi-icon {
  border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.bc-kpi-label { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--color-text-muted); line-height: 1.3; }
.bc-kpi-val {
  font-family: var(--font-display); font-weight: 700; color: var(--color-text);
  line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.bc-kpi-sub { color: var(--color-text-faint); line-height: 1.4; }

/* HERO — dominant numbers, generous padding + tap target */
.bc-kpi.bc-hero { padding: 22px 22px; }
.bc-kpi.bc-hero .bc-kpi-top { margin-bottom: 14px; }
.bc-kpi.bc-hero .bc-kpi-icon { width: 40px; height: 40px; font-size: 21px; }
.bc-kpi.bc-hero .bc-kpi-label { font-size: 15.5px; }
.bc-kpi.bc-hero .bc-kpi-val { font-size: 38px; }
.bc-kpi.bc-hero .bc-kpi-sub { font-size: 13px; margin-top: 6px; }

/* MINI — smaller secondary figures */
.bc-kpi.bc-mini { padding: 13px 12px; }
.bc-kpi.bc-mini .bc-kpi-top { margin-bottom: 9px; gap: 6px; }
.bc-kpi.bc-mini .bc-kpi-icon { width: 24px; height: 24px; font-size: 13px; }
.bc-kpi.bc-mini .bc-kpi-label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-kpi.bc-mini .bc-kpi-val { font-size: 19px; }

/* tinted accents per KPI role */
.bc-kpi[data-tone="income"]  .bc-kpi-icon { background: var(--blue-100);     color: var(--color-primary); }
.bc-kpi[data-tone="expense"] .bc-kpi-icon { background: #FDECEC;             color: var(--error); }
.bc-kpi[data-tone="surplus"] .bc-kpi-icon { background: var(--success-tint); color: var(--success); }
.bc-kpi[data-tone="deficit"] .bc-kpi-icon { background: #FDECEC;             color: var(--error); }
.bc-kpi[data-tone="send"]    .bc-kpi-icon { background: var(--cyan-100);     color: #0E7490; }
.bc-kpi[data-tone="save"]    .bc-kpi-icon { background: var(--success-tint); color: var(--success-accent); }
.bc-kpi[data-tone="surplus"] .bc-kpi-val { color: var(--success); }
.bc-kpi[data-tone="deficit"] .bc-kpi-val { color: var(--error); }
.bc-kpi[data-tone="send"]    .bc-kpi-val { color: #0E7490; }

/* ── 4 · "See all details" accordion (the advanced layer) ── */
.bc-breakdown { margin-top: 8px; }
.bc-breakdown-head {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-muted); margin: 0 0 14px;
}
.bc-accordion { display: flex; flex-direction: column; gap: 10px; }
.bc-acc-item {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.bc-acc-item.bc-open { border-color: var(--color-border-info); box-shadow: var(--shadow-xs); }
.bc-acc-btn {
  width: 100%; display: flex; align-items: center; gap: 13px;
  padding: 17px 17px; background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); text-align: start;
  -webkit-tap-highlight-color: transparent;
}
.bc-acc-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-ring); border-radius: var(--radius-md); }
.bc-acc-dot { width: 15px; height: 15px; border-radius: 5px; flex-shrink: 0; }
.bc-acc-name { font-size: 16.5px; font-weight: 600; color: var(--color-text); }
.bc-acc-amt {
  margin-inline-start: auto; font-size: 16.5px; font-weight: 700; color: var(--color-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bc-acc-chev { color: var(--color-text-faint); font-size: 19px; transition: transform .25s ease; flex-shrink: 0; }
.bc-acc-item.bc-open .bc-acc-chev { transform: rotate(180deg); }
.bc-acc-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.bc-acc-item.bc-open .bc-acc-panel { grid-template-rows: 1fr; }
.bc-acc-panel-inner { overflow: hidden; }
.bc-acc-body { padding-block: 2px 18px; padding-inline: 45px 17px; }
/* Big simple percentage instead of a small "share of income" label */
.bc-acc-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.bc-acc-meta-pct { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; }
.bc-acc-meta-lbl { font-size: 13.5px; color: var(--color-text-muted); }
.bc-acc-bar { height: 9px; border-radius: 5px; background: var(--color-border-light); overflow: hidden; }
.bc-acc-bar-fill { height: 100%; border-radius: 5px; width: 0%; transition: width .7s cubic-bezier(.22,.61,.36,1); }
.bc-acc-insight { font-size: 14px; line-height: 1.55; color: var(--color-text-mid); margin: 12px 0 0; }

/* Save error inline */
.bc-save-err {
  display: none;
  align-items: center; gap: 8px;
  font-size: 14px; color: var(--error);
  background: rgba(217,48,37,0.07);
  border: 1px solid rgba(217,48,37,0.2);
  border-radius: var(--radius-md); padding: 12px 16px;
  margin-top: 18px; line-height: 1.4;
}
.bc-save-err.show { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .bc-ai-card, .bc-kpi, .bc-slice, .bc-acc-bar-fill, .bc-acc-panel { transition: none !important; }
  .bc-insight.bc-pop { animation: none; }
}

/* ── Summary screen breathes wider than the wizard steps ── */
.bc-setup.bc-summary-active .bc-card,
.bc-setup.bc-summary-active .bc-topbar,
.bc-setup.bc-summary-active .bc-progress-area,
.bc-setup.bc-summary-active .bc-nav { max-width: 920px; }

/* ── Responsive ──
   Below 860px the chart and KPI column stack; the mini figures keep
   auto-fitting, and the hero numbers stay full-width and dominant. */
@media (max-width: 860px) {
  .bc-dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bc-card { padding: 28px 22px; border-radius: var(--radius-lg); }
  .bc-step-title { font-size: 20px; }
  .bc-topbar { padding: 16px 0 10px; }
  .bc-legend { grid-template-columns: 1fr; }
  .bc-kpi.bc-hero .bc-kpi-val { font-size: 34px; }
}
@media (max-width: 440px) {
  .bc-donut-wrap { width: 190px; }
}