/* Budget & finance tab (ui-budget.js). Builds on ui-site.css (.site, .site-kpis, .site-steps, .site-check, .site-chips, .site-drop)
   and the theme tokens from theme-modern.css / theme-switcher.css, so it follows all four themes. */
:root{
  /* budget heads: ink-blue family + teal + neutrals (no violet, red/amber/green stay for status) */
  --fin-h1:var(--m-blue,#155DFC);
  --fin-h2:#0E8F96;
  --fin-h3:#5B8DEF;
  --fin-h4:#A1A1AA;
  --fin-h5:#8B95A5;
  --fin-h6:#C3CAD5;
  --fin-comm:repeating-linear-gradient(135deg,var(--m-amber,#E17100) 0 2px,color-mix(in srgb,var(--m-amber,#E17100) 25%,transparent) 2px 5px);
}
.fin .c-ok{color:var(--m-green,#00A63E)}
.fin .c-bad{color:var(--m-red,#E7000B)}

/* top bar: section switch + tools */
.fin-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.fin-subnav{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--m-border,#E5E5E5);border-radius:var(--m-radius-sm,8px);background:var(--m-panel,#fff);overflow-x:auto;max-width:100%}
.fin-subnav button{border:0;background:transparent;color:var(--m-muted,#737373);font:500 13px var(--m-font,inherit);padding:7px 12px;border-radius:calc(var(--m-radius-sm,8px) - 2px);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:background .15s ease-out,color .15s ease-out}
.fin-subnav button:hover{color:var(--m-text,#0A0A0A);background:var(--m-hover,#F4F4F5)}
.fin-subnav button[aria-selected="true"]{background:var(--m-blue,#155DFC);color:#fff}
.fin-subnav button:focus-visible{outline:2px solid var(--m-blue,#155DFC);outline-offset:2px}
.fin-subnav .nb{font-size:11px;font-variant-numeric:tabular-nums;opacity:.8;border-radius:4px;padding:0 5px;background:color-mix(in srgb,currentColor 14%,transparent)}
.fin-tools{display:flex;gap:6px}
.fin-tools .btn svg,.fin .btn.small svg{vertical-align:-2px}

/* hero: forecast profit + revenue / cost / cash bars */
.fin-hero{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:28px;align-items:start;padding:20px 22px}
.fin-hero-l{display:flex;flex-direction:column;gap:6px;min-width:0}
.fin-hero-l .l{font-size:12.5px;color:var(--m-muted,#737373);font-weight:500}
.fin-hero-l .big{font-size:40px;line-height:1.05;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--m-text,#0A0A0A)}
.fin-hero-l .big.neg{color:var(--m-red,#E7000B)}
.fin-hero-l .s{font-size:12.5px;color:var(--m-muted,#737373);font-variant-numeric:tabular-nums}
.fin-verdict{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:center;margin-top:8px;padding:9px 11px;border-radius:var(--m-radius-sm,8px);border:1px solid;font-size:12.5px;line-height:1.4}
.fin-verdict b{font-weight:600}
.fin-verdict span{grid-column:2;color:var(--m-text,#0A0A0A);opacity:.85}
.fin-verdict.v-ok{background:var(--m-green-50,#F0FDF4);border-color:var(--m-green-200,#B9F8CF);color:var(--m-green,#00A63E)}
.fin-verdict.v-warn{background:var(--m-amber-50,#FFFBEB);border-color:var(--m-amber-200,#FEE685);color:var(--m-amber,#E17100)}
.fin-verdict.v-bad{background:var(--m-red-50,#FEF2F2);border-color:var(--m-red-200,#FFC9C9);color:var(--m-red,#E7000B)}
.fin-verdict.v-none{background:var(--m-blue-50,#EFF6FF);border-color:var(--m-blue-200,#BEDBFF);color:var(--m-blue,#155DFC)}
.fin-method{display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:500}
.fin select{border:1px solid var(--m-border,#E5E5E5);border-radius:6px;padding:4px 6px;font-size:12.5px;background:var(--m-panel,#fff);color:var(--m-text,#0A0A0A);max-width:100%}
.fin select:focus-visible,.fin input:focus-visible{outline:2px solid var(--m-blue,#155DFC);outline-offset:0}
.fin-hero-r{display:flex;flex-direction:column;gap:18px;min-width:0}
.fin-mhead{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--m-muted,#737373);margin-bottom:6px;flex-wrap:wrap}
.fin-mhead b{color:var(--m-text,#0A0A0A);font-weight:600}
.fin-mhead .num{color:var(--m-text,#0A0A0A);font-weight:600}
.fin-mwrap{position:relative}
.fin-mbar{display:flex;height:16px;border-radius:4px;background:var(--site-empty,#EEF1F5);overflow:hidden}
.fin-mbar i{display:block;height:100%;flex:none}
.fin-mbar i.pend{background:var(--site-pend-stripe,repeating-linear-gradient(135deg,#E17100 0 2px,transparent 2px 5px))}
.fin-mbar i.comm,.fin-hbar i.comm,.sw.comm{background:var(--fin-comm)}
.fin-marker{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px solid var(--m-blue,#155DFC);transform:translateX(-1px)}
.fin-marker::before{content:"";position:absolute;top:-4px;left:-5px;border:4px solid transparent;border-top:5px solid var(--m-blue,#155DFC)}
.sw.mk{width:2px!important;background:var(--m-blue,#155DFC);border-radius:0}
.fin-mleg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:7px;font-size:12px;color:var(--m-muted,#737373);align-items:center}
.fin-mleg span{display:inline-flex;align-items:center;font-variant-numeric:tabular-nums}
.fin-mleg .sw{flex:none}
@media(max-width:1000px){.fin-hero{grid-template-columns:minmax(0,1fr);gap:20px;padding:16px}}

/* six-cell KPI strip (reuses .site-kpis) */
.fin-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
.fin-kpis.fin-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.fin-kpis .v small{font-size:13px;font-weight:500;color:var(--m-muted,#737373);margin-left:2px}
.fin-kpis .v.c-bad{color:var(--m-red,#E7000B)} .fin-kpis .v.c-ok{color:var(--m-green,#00A63E)}
@media(min-width:1101px) and (max-width:1300px){.fin-kpis:not(.fin-5){grid-template-columns:repeat(3,minmax(0,1fr))}.fin-kpis:not(.fin-5)>div{border-top:1px solid var(--m-border,#E4E4E7)}.fin-kpis:not(.fin-5)>div:nth-child(-n+3){border-top:0}.fin-kpis:not(.fin-5)>div:nth-child(3n+1){border-left:0}}
@media(max-width:1100px){.fin-kpis,.fin-kpis.fin-5{grid-template-columns:repeat(2,minmax(0,1fr))}.fin-kpis>div{border-left:0;border-top:1px solid var(--m-border,#E4E4E7)}.fin-kpis>div:nth-child(-n+2){border-top:0}.fin-kpis>div:nth-child(even){border-left:1px solid var(--m-border,#E4E4E7)}.fin-kpis>div:nth-child(3){border-top:1px solid var(--m-border,#E4E4E7)}}
@media(max-width:420px){.site-kpis.fin-kpis .v{font-size:20px}.fin-kpis>div{padding:12px}}

/* budget-against-actual table */
.fin-heads td{vertical-align:middle}
.fin-hn{font-weight:600}
.fin-hbar{position:relative;height:10px;border-radius:3px;background:var(--site-empty,#EEF1F5);overflow:visible;margin-bottom:2px}
.fin-hbar i{position:absolute;top:0;bottom:0;border-radius:3px}
.fin-hbar i.a{left:0}
.fin-hbar b{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--m-blue,#155DFC);transform:translateX(-1px)}
.fin-key-mk{display:inline-block;width:2px;height:10px;background:var(--m-blue,#155DFC);vertical-align:-1px;margin:0 2px}
.fin .tb tr.fin-profit td{border-top:1px solid var(--m-border,#E5E5E5)}
.fin .tb tr.tot td{font-weight:600}
.fin .tb tr.fin-guess td{background:var(--m-amber-50,#FFFBEB)}
.fin .linkish{border:0;background:none;padding:0;font:inherit;color:var(--m-blue,#155DFC);cursor:pointer;text-align:left}
.fin .linkish:hover{text-decoration:underline}
.fin .linkish:focus-visible{outline:2px solid var(--m-blue,#155DFC);outline-offset:2px}

/* charts */
.fin-chart svg{display:block;width:100%;min-width:620px}
.fin-chart text{font-family:var(--m-font,inherit);font-size:11px;fill:var(--m-muted,#71717A);font-variant-numeric:tabular-nums}
.fin-chart text.m{font-size:10.5px;fill:var(--m-text,#0A0A0A)}
.fin-chart text.lab{font-size:11.5px;font-weight:600;fill:var(--m-text,#0A0A0A)}
.fin-chart text.lab.bad{fill:var(--m-red,#E7000B)} .fin-chart text.lab.good{fill:var(--m-green,#00A63E)} .fin-chart text.ev-t{fill:var(--m-blue,#155DFC)}
.fin-chart .grid{stroke:var(--m-border-soft,#F0F0F0)}
.fin-chart .pv{fill:none;stroke:var(--m-muted,#737373);stroke-width:1.5;stroke-dasharray:5 4}
.fin-chart .ev{fill:none;stroke:var(--m-blue,#155DFC);stroke-width:2.4}
.fin-chart .ac{fill:none;stroke:var(--m-text,#0A0A0A);stroke-width:2.4}
.fin-chart .ev-dot{fill:var(--m-blue,#155DFC)} .fin-chart .ac-dot{fill:var(--m-text,#0A0A0A)}
.fin-chart .bac{stroke:var(--m-text,#0A0A0A);stroke-width:1;stroke-dasharray:2 3;opacity:.6}
.fin-chart .eac{stroke:var(--m-red,#E7000B);stroke-width:1.2;stroke-dasharray:6 3}
.fin-chart .today{stroke:var(--m-amber,#E17100);stroke-width:1.2}

/* forms */
.fin-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px}
.fin-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:var(--m-text,#404040);min-width:0}
.fin-form label .help{font-weight:400}
.fin-form .w2{grid-column:span 2}
.fin-form input,.fin-form select{border:1px solid var(--m-border,#E5E5E5);border-radius:6px;padding:7px 9px;font-size:13px;background:var(--m-panel,#fff);color:var(--m-text,#0A0A0A);width:100%;min-height:36px}
.fin-form .unit{position:relative}
.fin-form .unit input{padding-right:30px;text-align:right;font-variant-numeric:tabular-nums}
.fin-form .unit span{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:11.5px;color:var(--m-muted,#71717A);pointer-events:none}
.fin-form input:disabled,.fin-form select:disabled{background:var(--m-hover,#F4F4F5);color:var(--m-muted,#71717A)}
@media(max-width:1100px){.fin-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fin-form.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){.fin-form{grid-template-columns:minmax(0,1fr)}.fin-form .w2{grid-column:auto}.fin-form input,.fin-form select{min-height:44px}}

/* side layouts, intro, source list */
.fin-side{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:1000px){.fin-side{grid-template-columns:minmax(0,1fr)}}
.fin-seed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--m-border,#E4E4E7);border-radius:var(--m-radius-sm,8px);margin-top:14px}
.fin-seed>div{padding:12px 14px;border-left:1px solid var(--m-border,#E4E4E7);display:flex;flex-direction:column;gap:2px;min-width:0}
.fin-seed>div:first-child{border-left:0}
.fin-seed .l{font-size:12px;color:var(--m-muted,#71717A);font-weight:500}
.fin-seed b{font-size:18px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
@media(max-width:900px){.fin-seed{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fin-seed>div:nth-child(3){border-left:0}.fin-seed>div:nth-child(n+3){border-top:1px solid var(--m-border,#E4E4E7)}}
@media(max-width:480px){.fin-seed{grid-template-columns:minmax(0,1fr)}.fin-seed>div{border-left:0;border-top:1px solid var(--m-border,#E4E4E7)}.fin-seed>div:first-child{border-top:0}}
.fin-dl{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:6px 16px;font-size:13px;margin:0}
.fin-dl dt{color:var(--m-muted,#71717A)} .fin-dl dd{margin:0;text-align:right;overflow-wrap:anywhere}
.fin-foot{text-align:right;margin-top:-4px}
.fin .tb td.desc .help{display:block}
@media(max-width:640px){.fin .hm{display:none}.fin .tb td.desc{min-width:150px}.fin-top{flex-direction:column;align-items:stretch}.fin-tools{justify-content:flex-end}}
.fin .mref{display:none}
@media(max-width:640px){.fin .mref{display:table-cell}}
@media(prefers-reduced-motion:reduce){.fin-subnav button{transition:none}}

/* print: the open section only, A4 landscape */
@media print{
  @page{size:A4 landscape;margin:12mm}
  #sidebar,#topbar,#foot,#chat-fab,.fin-subnav,.fin-tools,.fin-form,.site-drop,.fin .btn,#toast-root,#modal-root{display:none!important}
  body.modern{display:block;background:#fff} #main{margin:0;border:0}
  .fin .card{break-inside:avoid;box-shadow:none}
  .fin .scroll{max-height:none!important;overflow:visible!important}
  .fin-foot{text-align:left}
}
.fin-heads th,.fin-heads td{padding-left:8px;padding-right:8px}
/* stage margin bars, cash forecast */
.fin-sbar{display:flex;flex-direction:column;gap:3px}
.fin-sbar i{display:block;height:6px;border-radius:3px}
.fin-sbar i.rv{background:var(--m-blue,#155DFC)} .fin-sbar i.ct{background:var(--m-text,#0A0A0A);opacity:.75}
.fin-chart .zero{stroke:var(--m-muted,#737373);stroke-width:1}
.fin-chart rect.in{fill:var(--m-green,#00A63E);opacity:.8} .fin-chart rect.out{fill:var(--fin-h5)}
.fin-cf .cum{fill:none;stroke:var(--m-text,#0A0A0A);stroke-width:2}
.fin-cf circle.pos{fill:var(--m-text,#0A0A0A)} .fin-cf circle.neg{fill:var(--m-red,#E7000B)}
.fin details summary{cursor:pointer;color:var(--m-blue,#155DFC);font-size:12.5px}
.fin-stage .sw{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:4px}
.fin-stagesel{display:flex;align-items:center;gap:6px;margin-top:3px}
.fin-stagesel select{font-size:11.5px;padding:2px 4px;max-width:260px;color:var(--m-muted,#737373)}
/* dashboard snapshot */
.fin-dash{margin-bottom:16px}
.fin-dash h3{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.fin-dash-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fin-dash-g>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.fin-dash-g .l{font-size:12px;color:var(--m-muted,#737373);font-weight:500}
.fin-dash-g b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
@media(max-width:760px){.fin-dash-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fin-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:1400px){.fin-pair{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.fin-dl{grid-template-columns:minmax(0,1fr);gap:2px}.fin-dl dd{text-align:left;margin-bottom:8px;font-weight:600}}
/* PlusBrains mark as the assistant's icon (Ask PlusBrains button, sidebar entry, chat header) */
.pb-ai{width:15px;height:15px;flex:none;display:inline-block;vertical-align:-3px}
#chat-fab .pb-ai{margin-right:7px;color:#fff}
.sb-search .pb-ai{color:var(--sb-fg,#141414)}
.pb-ai-h{display:flex;align-items:center;gap:9px}
.pb-ai-h .pb-ai{width:20px;height:20px;color:#fff}
/* "Ask PlusBrains" wordmark: Plus bold, Brains orange italic serif (font loaded by pb-credit.js; Georgia fallback) */
.pb-ask b{font-weight:800;letter-spacing:-.02em}
.pb-ask i{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:1.12em;color:#FF6A2B;letter-spacing:0}
.sb-search .pb-ask{color:var(--sb-muted,#737373)} .sb-search .pb-ask b{color:var(--sb-fg,#0A0A0A)}
/* Ask PlusBrains button: ink background in every theme so the orange "Brains" stays readable */
#chat-fab{background:#141414!important;border-color:#141414!important;color:#fff;box-shadow:0 6px 20px rgb(20 20 20 / .28)!important}
#chat-fab:hover{background:#2A2A2A!important;border-color:#2A2A2A!important}
#chat-fab:focus-visible{outline:2px solid #FF6A2B;outline-offset:2px}