/* rwyrd v4 · Budget per progetto (budget4.jsx). Barra unica: speso pieno · da pagare tinto · libero = traccia. Colori solo da token. */
.bg-bar{position:relative;display:flex;height:10px;border-radius:999px;background:var(--surface-2,rgba(127,127,127,.14));overflow:hidden}
.bg-bar.h{height:14px}
.bg-bar.sm{height:6px;flex:1;min-width:60px}
.bg-bar i{display:block;height:100%}
.bg-bar i.s{background:var(--accent)}
.bg-bar i.p{background:color-mix(in oklab,var(--accent) 35%,transparent)}
.bg-bar i.o{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--err);border-radius:2px}
.bg-leg{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 12.5px/18px var(--font);color:var(--ink-2,var(--ink))}
.bg-leg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.bg-leg b{font-weight:600;color:var(--ink)}
.bg-leg i{width:8px;height:8px;border-radius:999px;display:inline-block}
.bg-leg i.s{background:var(--accent)}.bg-leg i.p{background:color-mix(in oklab,var(--accent) 35%,transparent)}.bg-leg i.f{background:var(--surface-2,rgba(127,127,127,.2));box-shadow:inset 0 0 0 1px var(--line)}
.bg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.bg-card{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:16px 18px;border-radius:var(--r-lg,20px);border:1px solid var(--line);background:var(--surface);cursor:pointer;min-width:0}
.bg-card:hover{background:var(--hover,rgba(127,127,127,.06))}
.bg-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bg-card-h{display:flex;align-items:center;gap:12px;min-width:0}
.bg-card-h .main{display:flex;flex-direction:column;min-width:0;flex:1}
.bg-card-h .main b{font:600 15px/20px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg-card-h .main .t-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg-card-n{display:flex;align-items:baseline;gap:8px}
.bg-card-n b{font:600 24px/30px var(--font)}
.bg-proj{display:flex;align-items:center;gap:6px;margin:-4px 0 12px;flex-wrap:wrap}
.bg-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.bg-hero>div:first-child{display:flex;flex-direction:column;gap:2px}
.bg-hero .t-display{font-size:34px;line-height:40px}
.bg-secs{display:flex;flex-direction:column}
.bg-sec{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(80px,2fr) minmax(110px,auto) minmax(96px,auto);align-items:center;gap:14px;padding:8px 10px;margin:0 -10px;border-radius:12px;cursor:pointer;font:500 13.5px/20px var(--font)}
.bg-sec:hover{background:var(--hover,rgba(127,127,127,.06))}
.bg-sec:focus-visible{outline:2px solid var(--accent)}
.bg-sec .nm{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg-sec .v,.bg-sec .r{text-align:right;white-space:nowrap}
.bg-sec .r{color:var(--ink-3,var(--ink));opacity:.8}
.bg-sec .r.err{color:var(--err);opacity:1;font-weight:600}
.bg-grp{margin:0 0 16px}
.bg-grp-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 4px 8px;font:600 14px/20px var(--font)}
.bg-grp-h>span:first-child{display:inline-flex;align-items:center;gap:8px}
.bg-amt{display:flex;align-items:center;gap:10px;white-space:nowrap}
.bg-amt>.t-sub{min-width:0}
.bg-fee{margin:0 0 12px}
.bg-acts{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.bg-tgt{display:flex;align-items:center;gap:10px}
.bg-tgt .nm{flex:1;display:flex;align-items:center;gap:8px;font:500 13.5px/20px var(--font);min-width:0}
@media (max-width:900px){.bg-sec{grid-template-columns:1fr auto;grid-template-areas:"n v" "b b" "r r";gap:6px 12px}
  .bg-sec .nm{grid-area:n}.bg-sec .v{grid-area:v}.bg-sec .bg-bar{grid-area:b}.bg-sec .r{grid-area:r;text-align:left}}
@media (max-width:700px){.bg-list{grid-template-columns:1fr}.bg-amt .t-sub{display:none}.bg-amt{gap:6px}.bg-hero .t-display{font-size:28px;line-height:34px}
  .bg-tgt{flex-wrap:wrap}}
/* ritorno (ROI): incassato pieno con area 8%, speso grigio, proiezione tratteggiata, linea del pareggio */
.bg-chart{position:relative;height:188px;padding:18px 0 20px}
.bg-chart svg{display:block;width:100%;height:150px;overflow:visible}
.bg-chart path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.bg-chart .el{stroke:var(--accent);stroke-width:2}
.bg-chart .ea{fill:color-mix(in oklab,var(--accent) 8%,transparent);stroke:none}
.bg-chart .sp{stroke:var(--ink-3,rgba(127,127,127,.7));stroke-width:1.5}
.bg-chart .pj{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 4;opacity:.8}
.bg-chart .tg{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke}
.bg-chart .bg-tgl{position:absolute;right:0;line-height:16px;white-space:nowrap;font:500 11.5px/16px var(--font);color:var(--ink-3,var(--ink));background:var(--surface);padding:0 0 0 6px}
.bg-ax{position:absolute;left:0;right:0;bottom:0;height:16px;font:500 11.5px/16px var(--font);color:var(--ink-3,var(--ink))}
.bg-ax span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.bg-ax span:first-child{transform:none}.bg-ax span:last-child{transform:translateX(-100%)}
.bg-leg i.k{background:var(--ink-3,rgba(127,127,127,.7))}
.bg-leg i.j{background:none;border-top:2px dashed var(--accent);border-radius:0;height:0;width:12px}
.bg-res{display:flex;flex-direction:column;gap:2px}
.bg-res+.bg-res{margin-top:8px}