.cbcf{--cf-bg:var(--card,#fff);--cf-ink:var(--ink,#20232a);--cf-muted:var(--mut2,#667085);--cf-line:var(--line,#e7e9ee);--cf-soft:var(--panel,#f3f4f6);background:var(--cf-bg);color:var(--cf-ink);border-radius:18px;padding:20px;min-width:0;font-family:inherit;box-sizing:border-box;container-type:inline-size}
.cbcf *{box-sizing:border-box}.cbcf button{font:inherit;cursor:pointer}.cbcf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.cbcf-title{margin:0!important;font-size:14px!important;color:inherit!important}.cbcf-period{display:flex;background:var(--cf-soft);border:1px solid var(--cf-line);border-radius:30px;padding:4px;gap:2px}.cbcf-period button{background:none;border:0;color:var(--cf-muted);font-size:10px;padding:8px 12px;border-radius:22px}.cbcf-period button[aria-pressed=true]{background:var(--cf-ink);color:var(--cf-bg)}
.cbcf-totals{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:24px 0 18px}.cbcf-stat{display:grid;gap:7px;min-width:0}.cbcf-stat small{font-size:11px;color:var(--cf-muted)}.cbcf-stat strong{font-size:clamp(22px,4.5cqi,36px);line-height:1.2;letter-spacing:-.7px}.cbcf-stat>span,.cbcf-ratio>span{font-size:10px;color:var(--cf-muted)}.cbcf-stat.expenses strong{color:#c74a5e}.cbcf-ratio{display:grid;gap:7px;margin-left:auto}.cbcf-ratio strong{font-size:24px}
.cbcf-legend{display:flex;gap:18px;font-size:10px;color:var(--cf-muted);margin-bottom:6px}.cbcf-legend span{display:flex;gap:6px;align-items:center}.cbcf-legend i{height:8px;width:8px;border-radius:3px;background:#76a5fa}.cbcf-legend i.expenses{background:#ec8391}
.cbcf-plot{height:220px;display:flex;gap:4px;align-items:stretch;padding-top:12px;border-bottom:1px solid var(--cf-line);background:repeating-linear-gradient(to top,transparent 0,transparent 49px,var(--cf-line) 50px);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.cbcf-column{display:flex;flex:1 0 18px;min-width:18px;flex-direction:column;justify-content:flex-end;align-items:stretch;position:relative;padding-bottom:28px}.cbcf-pair{height:100%;width:100%;max-width:80px;margin-inline:auto;display:flex;align-items:flex-end;gap:3px;min-height:0}.cbcf .cbcf-pair .cbcf-bar{position:relative;flex:1 1 0;width:0;min-width:0;height:var(--height);min-height:3px;border:0;border-radius:5px 5px 2px 2px;background:linear-gradient(#89b4ff,#528be9);color:#fff;padding:0}.cbcf .cbcf-pair .cbcf-bar.expenses{background:linear-gradient(#f8a6aa,#e46a78)}.cbcf .cbcf-pair .cbcf-bar.empty{height:2px!important;min-height:2px;background:var(--cf-line)!important;border-radius:2px}.cbcf-bar span{display:none}.cbcf-column small{position:absolute;bottom:8px;width:100%;text-align:center;font-size:9px;color:var(--cf-muted)}.cbcf-note{margin:10px 0 0;font-size:10px;line-height:1.6;color:var(--cf-muted)}.cbcf button:focus-visible{outline:2px solid #528be9;outline-offset:3px}
.cb-obsidian:not(.cb-obsidian-light) .cbcf{--cf-bg:#101112;--cf-ink:#f1f1f3;--cf-muted:#aeb0b7;--cf-line:#292b30;--cf-soft:#191a1c}.cb-obsidian:not(.cb-obsidian-light) .cbcf-stat.expenses strong{color:#f39aa4}
#view-dash .ob-revenue:has(.cbcf),#view-dash .card.ie:has(.cbcf),#view-dash .mac2-card.mac2-chart:has(.cbcf){padding:0!important;overflow:hidden}.cbcf-plot:has(.cbcf-column:nth-child(20)) .cbcf-column:nth-child(even) small{visibility:hidden}
@container(max-width:550px){.cbcf-totals{gap:18px}.cbcf-stat strong{font-size:24px}.cbcf-ratio{margin-left:0}.cbcf-ratio strong{font-size:22px}}
@media(max-width:600px){.cbcf{padding:16px}.cbcf-plot{height:190px}.cbcf-period button{padding:8px}}

/* Exact amounts remain visible above both series, including very short bars. */
.cbcf .cbcf-column{flex-basis:104px;min-width:104px}
.cbcf .cbcf-pair{max-width:none;gap:8px}
.cbcf .cbcf-plot{padding-top:30px;gap:12px}
.cbcf .cbcf-pair .cbcf-bar .cbcf-bar-value{display:block;position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);width:max-content;max-width:none;color:#3874ca;font-size:10px;font-weight:650;line-height:1.2;white-space:nowrap;pointer-events:none}
.cbcf .cbcf-pair .cbcf-bar.expenses .cbcf-bar-value{color:#c74a5e}
.cbcf .cbcf-pair .cbcf-bar.empty .cbcf-bar-value{display:none}
.cb-obsidian:not(.cb-obsidian-light) .cbcf .cbcf-pair .cbcf-bar .cbcf-bar-value{color:#9dbfff}
.cb-obsidian:not(.cb-obsidian-light) .cbcf .cbcf-pair .cbcf-bar.expenses .cbcf-bar-value{color:#f5a1af}

/* Let the replacement chart determine its card and dashboard row height. */
html body #view-dash .d2:has(.cbcf){grid-template-rows:auto auto auto!important}
html body #view-dash :is(.card.ie,.mac2-chart,.ob-revenue):has(.cbcf){height:auto!important;min-height:450px!important;max-height:none!important;align-self:stretch}
html body #view-dash :is(.card.ie,.mac2-chart,.ob-revenue)>.cbcf{height:auto!important;min-height:450px;max-height:none;overflow:visible}
html body #view-dash .cbcf-plot{flex-shrink:0;height:240px}
@media(max-width:600px){html body #view-dash :is(.card.ie,.mac2-chart,.ob-revenue):has(.cbcf),html body #view-dash :is(.card.ie,.mac2-chart,.ob-revenue)>.cbcf{min-height:430px!important}html body #view-dash .cbcf-plot{height:220px}}

/* Follow the selected theme accent; the green theme uses deep green and mint. */
.cbcf{--cf-income:var(--g2,#1c7c4c);--cf-expense:color-mix(in srgb,var(--g2,#1c7c4c) 42%,var(--cf-bg));--cf-label:var(--g1,#0c4b2d)}
.cbcf .cbcf-period button[aria-pressed=true]{background:var(--cf-income);color:#fff}
.cbcf .cbcf-legend i.income{background:var(--cf-income)}
.cbcf .cbcf-legend i.expenses{background:var(--cf-expense)}
.cbcf .cbcf-pair .cbcf-bar.income{background:linear-gradient(color-mix(in srgb,var(--cf-income) 78%,#fff),var(--cf-income))}
.cbcf .cbcf-pair .cbcf-bar.expenses{background:linear-gradient(color-mix(in srgb,var(--cf-expense) 82%,#fff),var(--cf-expense))}
.cbcf .cbcf-stat.income strong{color:var(--cf-income)}
.cbcf .cbcf-stat.expenses strong,.cb-obsidian:not(.cb-obsidian-light) .cbcf .cbcf-stat.expenses strong{color:var(--cf-label)}
.cbcf .cbcf-pair .cbcf-bar .cbcf-bar-value,.cbcf .cbcf-pair .cbcf-bar.expenses .cbcf-bar-value,.cb-obsidian:not(.cb-obsidian-light) .cbcf .cbcf-pair .cbcf-bar .cbcf-bar-value,.cb-obsidian:not(.cb-obsidian-light) .cbcf .cbcf-pair .cbcf-bar.expenses .cbcf-bar-value{color:var(--cf-label)}
.cbcf button:focus-visible{outline-color:var(--cf-income)}

/* Expense-only plot, with the income summary retained above it. */
.cbcf.expenses-only .cbcf-column{flex-basis:64px;min-width:64px}
.cbcf.expenses-only .cbcf-pair{max-width:42px;gap:0}
.cbcf.expenses-only .cbcf-pair .cbcf-bar.expenses{background:linear-gradient(color-mix(in srgb,var(--cf-income) 78%,#fff),var(--cf-income))}
.cbcf.expenses-only .cbcf-legend i.expenses{background:var(--cf-income)}

.cbcf-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cbcf .cbcf-stat strong{font-size:clamp(21px,3.5cqi,34px);overflow-wrap:anywhere}
.cbcf .cbcf-stat.net-position strong{color:var(--cf-label)}
.cbcf .cbcf-ratio{grid-column:1/-1;display:flex;gap:8px;align-items:baseline;margin-left:0}
.cbcf .cbcf-ratio strong{font-size:20px}
@container(max-width:460px){.cbcf-totals{gap:12px}.cbcf .cbcf-stat strong{font-size:18px}.cbcf-stat small{font-size:10px}.cbcf-stat>span{font-size:9px}}