/* hyrise finance · Plan (static/finance/finance.js). Builds on app.py's tokens and kit: .secard, .cards, .tw, .lst,
   .segctl, .panel, .fparts, .pinfo. Linked next to finance.js at the end of app.HTML. --fin-sub is the page's small
   secondary text: 5.5:1 on white, 4.9:1 on the actual months' grey (the app's --mut-soft is too faint for text).
   --fin-pos / --fin-neg colour a sign where it is the message (finance.js finTone): the app's --pos / --neg a shade
   darker, as those read 4.57:1 (red) on white but 3.9–4.4:1 on the grid's grey year and actual cells; darker, 4.8:1
   and more on every one of them. */
:root{--fin-pos:color-mix(in srgb,var(--pos) 88%,#000);--fin-neg:color-mix(in srgb,var(--neg) 88%,#000)}

/* ---- the page: a pinned header (title, version, toggles; key numbers, save strip; the ruler, pinned rows) over three
   sections that fold. Every grid shares one column plan (finance.js finColPlan writes the --fin-* variables) and one
   sideways scroll ---- */
.fin-page{--fin-l:232px;--fin-m:72px;--fin-f:88px;--fin-w:1152px;--fin-rh:34px;--fin-sub:#5E6A79;position:relative}
html:has(#fin_hd){scroll-padding-top:calc(var(--fin-hdh,180px) + 8px)}      /* a focused cell is never under the header */
.fin-hd{position:sticky;top:0;z-index:12;margin:-24px -26px 0;padding:14px 26px 0;background:var(--bg);transition:box-shadow var(--dur) var(--ease)}
.fin-hd.stuck{box-shadow:0 1px 0 var(--line),0 8px 18px rgba(20,30,45,.06)}
.fin-r1{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.fin-h{margin:0 4px 0 0;font-size:var(--fs-xl)}
.fin-seg .seg button{padding:5px 11px;color:var(--txt)}   /* 6.8:1 on the grey track (the kit's --mut reads 4.1:1 there) */
.fin-seg .seg button.on{color:var(--ink)}
.fin-seg .seg button:focus-visible{box-shadow:0 0 0 3px var(--acc-soft)}
.fin-seg .fin-tc{color:#8A5300;font-weight:600}
.fin-ib{position:relative;margin:0;padding:6px 9px;line-height:1}
.fin-ib i{font-size:var(--fs-icon)}
.fin-ib.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fin-nb{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#E0A035;color:#1C2733;
  font-size:var(--fs-3xs);font-weight:600;line-height:16px;text-align:center}
/* the title and its one line; the tabs (a pill per plan, its colour's dot; the open one outlined; in Compare a box to add
   it), then the year, € / €k, Compare and the ⋯ menu on the right */
:root{--fc:#7C5CC4;--bud:#86620A;--s1:#17A3B2;--s2:#A3326A;--s3:#5A6B00}   /* finance.js FIN_COL (fc = app.py's RCOL; --bud is the Budget's AA text gold, app.py's --bud): validated on light, every pair */
.fin-r1{align-items:baseline}
.fin-r1 .fin-def{margin:0}
.fin-tabs{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:10px}
.fin-tabl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.fin-tab{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--card);border-radius:999px;font-size:var(--fs-sm);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.fin-tab:hover{background:var(--hover)}
.fin-tab.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.fin-tab.add{background:var(--seg-bg)}
.fin-tabn{display:inline-flex;align-items:center;gap:7px;margin:0;padding:6px 13px;border:0;border-radius:999px;background:none;font:inherit;
  font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
.fin-tabn:focus-visible,.fin-tnew:focus-visible{outline:0;box-shadow:0 0 0 3px var(--acc-soft)}
.fin-tab.ro .fin-tabn{color:var(--txt)}
.fin-tdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.fin-tnm{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.fin-tlk{font-size:var(--fs-3xs);line-height:1}
.fin-tcb{margin:0 -5px 0 11px;width:14px;height:14px;accent-color:var(--ink);cursor:pointer}
button.fin-tnew{padding:6px 13px;border-style:dashed;font:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--fin-sub);cursor:pointer}
.fin-tr{margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.fin-tr .bs{margin:0}
.fin-cmpb.on{border-color:var(--ink);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--ink)}
.fin-mnb{padding:4px 11px;font-size:var(--fs-icon-lg);line-height:1;letter-spacing:1px}
.fin-mnb.on{background:var(--seg-bg)}
.ddpop.fin-mnpop{left:auto;right:0;min-width:236px;padding:6px}
button.ddrow.fin-mi{width:100%;margin:0;border:0;background:none;font:inherit;font-size:var(--fs-sm);text-align:left;color:var(--txt)}
button.ddrow.fin-mi:hover,button.ddrow.fin-mi:focus-visible{outline:0;background:var(--seg-bg);color:var(--ink);box-shadow:none}
button.ddrow.fin-mi.fin-vdel{color:var(--neg)}
.fin-vsep{height:1px;background:var(--line-soft);margin:6px 2px}

/* the impact strip: the year's five figures, each against the Forecast and the Budget; undo, redo and the save status */
.fin-imp{display:flex;align-items:stretch;margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.fin-ik{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;margin:0;padding:9px 14px;border:0;
  border-right:1px solid var(--line-soft);border-radius:0;background:none;font:inherit;text-align:left;cursor:pointer}
.fin-ik:hover{background:var(--hover)} .fin-ik:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--acc-soft)}
.fin-bud .fin-ik{cursor:default} .fin-bud .fin-ik:hover{background:none}
.fin-ik{overflow:hidden}
.fin-ik .fin-kf{flex-direction:column;align-items:flex-start;gap:0;max-width:100%;font-size:var(--fs-xs);color:var(--fin-sub);white-space:nowrap}
.fin-ik .fin-kf>span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.fin-ik .fin-kf .pos{color:var(--fin-pos)} .fin-ik .fin-kf .neg{color:var(--fin-neg)}
.fin-ops{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:0 12px;font-size:var(--fs-xs);color:var(--fin-sub);white-space:nowrap}
.fin-ops .warn{color:#8A5300} .fin-ops .neg{color:var(--fin-neg)}
.fin-ob{margin:0;padding:3px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);font:inherit;font-size:var(--fs-sm);line-height:1.2;color:var(--txt);cursor:pointer}
.fin-ob:hover{border-color:var(--mut-soft);color:var(--ink)} .fin-ob:disabled{opacity:.4;cursor:default}
.fin-st{min-width:96px}
.fin-kl{font-size:var(--fs-xs);color:var(--fin-sub);white-space:nowrap} .fin-ik .fin-kl{white-space:normal;line-height:1.3}   /* "Revenue · 2027 landing" wraps in a narrow strip (chat open) instead of being cut */
.fin-kv{font-size:var(--fs-lg);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}
.fin-kv.pos{color:var(--fin-pos)} .fin-kv.neg{color:var(--fin-neg)} .fin-kw{color:var(--fin-sub);font-weight:500}
.fin-kf{display:flex;gap:6px;align-items:baseline;min-height:16px}
.fin-ks{font-size:var(--fs-xs);color:var(--fin-sub);white-space:nowrap}
.fin-kd{font-size:var(--fs-xs);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-kd.up{color:var(--fin-pos)} .fin-kd.dn{color:var(--fin-neg)}   /* on the header's grey: the darker shade keeps 4.5:1 */
.fin-page.fin-wait .fin-kv{opacity:.55;transition:opacity var(--dur) var(--ease)}

/* the ruler: the page's one month header, on the columns every grid below shares; the pinned rows under it */
.fin-rl{margin:12px 0 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card) var(--radius-card) 0 0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.fin-rl table.fin-grid th{background-color:var(--card);color:var(--txt);font-weight:500;font-size:var(--fs-sm);padding:5px 6px;border:0;box-shadow:none}
.fin-rl tr.fin-rb th{padding:3px 6px;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-align:left;white-space:nowrap;overflow:hidden}
.fin-rl tr.fin-rb th .fin-bnt{font-weight:500;letter-spacing:.02em;text-transform:none}
.fin-rl tr.fin-rb th.fin-rc{color:var(--ink);font-size:var(--fs-sm);letter-spacing:0;text-transform:none}
.fin-rl th.fin-band.act{background:#DCE3EC;color:#2E4058}
.fin-rl th.fin-band.fc{background:repeating-linear-gradient(135deg,#FFF9EE 0 6px,#FFF3DE 6px 12px);color:#8A5300}
.fin-rl tr.fin-rm th{box-shadow:inset 0 -1px 0 var(--line)}
.fin-rl tr.fin-rm th.fa{background-color:#E9EEF4}
.fin-rl tr.fin-rb th.fin-fy{vertical-align:bottom;padding:5px 5px 6px;color:var(--ink);font-size:var(--fs-sm);font-weight:600;letter-spacing:0;text-transform:none;text-align:right;
  background:var(--seg-bg);box-shadow:inset 1px 0 0 var(--line),inset 0 -1px 0 var(--line)}
.fin-rl th.fin-ru{color:var(--fin-sub);font-weight:600}
.fin-rl tr.fin-pinr td{background-color:#FFFCF4}
.fin-rl tr.fin-pinr td.fa{background-color:#F3F5F8}
.fin-rl tr.fin-pinr td:first-child{background-color:#FFFCF4}
.fin-rl tr.fin-pin0 td:first-child{color:var(--fin-sub)}

/* the sections: a card each, its bar folding it */
.fin-sec{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;scroll-margin-top:2px}   /* on top of the page's scroll padding: just under the header */
.fin-rl+.fin-sec,.fin-hd+.fin-sec{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;border-top:0}
.fin-bar{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;min-height:52px;padding:8px 14px 8px 12px;cursor:pointer}
.fin-bt{display:inline-flex;align-items:center;gap:6px;margin:0;padding:4px 6px;border:0;border-radius:6px;background:none;font:inherit;
  font-size:var(--fs-base);font-weight:600;color:var(--ink);cursor:pointer}
.fin-bt i{font-size:var(--fs-icon);color:var(--fin-sub)}
.fin-bt:hover{background:var(--hover)} .fin-bt:focus-visible{outline:0;box-shadow:0 0 0 3px var(--acc-soft)}
.fin-bar .chip{cursor:default}
.chip.fin-cw,.chip.fin-lt{background:#EEF1F5;color:#39475A}
.fin-br{margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.fin-br .b,.fin-br .bs{margin:0}
.fin-sum{font-size:var(--fs-sm);color:var(--fin-sub);font-variant-numeric:tabular-nums}
.fin-sum b{color:var(--ink);font-weight:600;margin-left:4px}
.fin-chartb.on{background:var(--hover);border-color:var(--mut-soft);color:var(--ink)}
.fin-sb{border-top:1px solid var(--line-soft)}
.fin-sb[hidden]{display:none}
.fin-skel{height:220px;margin:14px;border-radius:var(--radius)}
.fin-sec.shut .fin-cbox{display:none}
.fin-chartbox{position:relative;height:150px;padding:10px 14px 6px}
.fin-cbox:not(:empty){border-top:1px solid var(--line-soft)}
.fin-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:9px 14px;border-top:1px solid var(--line-soft);font-size:var(--fs-sm);color:var(--fin-sub)}
.fin-legend .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;border:1px solid var(--line)}
.fin-legend .sw.act{background:#DCE3EC;border-color:#AEBACB} .fin-legend .sw.fc{background:#FFF3DE;border-color:#EBCF9C} .fin-legend .sw.chg{background:#FFE9C2;border-color:#EDB04A}
.fin-legend .fin-lsw{display:none} .fin-page.fin-live .fin-legend .fin-lsw{display:inline}
.fin-plegend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:9px 14px 0;font-size:var(--fs-sm);color:var(--fin-sub)}
.fin-plegend span{display:inline-flex;align-items:center;gap:5px}
.fin-plegend .sw{width:14px;height:3px;border-radius:0;display:inline-block}
.fin-plegend .sw.bar{width:10px;height:10px;border-radius:2px}
.empty.fin-fail{display:flex;flex-direction:column;align-items:center;gap:6px}
.empty.fin-fail b{color:var(--ink);font-weight:600} .empty.fin-fail .bs{margin:6px 0 0}

/* ---- the grids: one column plan (a label column, a month, a year's total), the label column pinned while the grid
   scrolls sideways — every grid at once (the ruler's scrollbar shows where; each grid's own is hidden) ---- */
.fin-x{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-padding-left:var(--fin-l)}
.fin-sec .fin-x{scrollbar-width:none} .fin-sec .fin-x::-webkit-scrollbar{display:none}
table.fin-grid{table-layout:fixed;width:var(--fin-w);min-width:0;border-collapse:separate;border-spacing:0}
table.fin-grid col.fl{width:var(--fin-l)} table.fin-grid col.fm{width:var(--fin-m)} table.fin-grid col.ff{width:var(--fin-f)}
/* every row one text line, every grid's rows one height (--fin-rh): the labels never wrap, the ⓘ says the rest */
table.fin-grid th,table.fin-grid td{position:static;padding:6px 4px;font-size:var(--fs-md);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-align:right}
table.fin-grid tbody td{height:var(--fin-rh)}
table.fin-grid td{border-top:1px solid var(--line-soft);color:var(--txt)}
table.fin-grid tbody tr:first-child td{border-top:0}
table.fin-grid th:first-child,table.fin-grid td:first-child{position:sticky;left:0;z-index:1;background-color:var(--card);text-align:left;
  padding-left:12px;box-shadow:inset -1px 0 0 var(--line);font-variant-numeric:normal;color:var(--ink)}
table.fin-grid thead.fin-th{display:none}
table.fin-grid td.coly,table.fin-grid th.coly{background-color:var(--seg-bg);font-weight:600;color:var(--ink);box-shadow:inset 1px 0 0 var(--line)}
table.fin-grid th.fa,table.fin-grid td.fa{background-color:#F1F4F8}
table.fin-grid .fdiv{border-left:2px solid #7D8BA1}
table.fin-grid td.clk{cursor:pointer} table.fin-grid td.clk:hover{background-color:var(--line-soft)}
table.fin-grid td.fin-low{box-shadow:inset 0 0 0 2px var(--neg);font-weight:600}
table.fin-pl td[data-m]{user-select:none}
@media (max-width:1529px){ table.fin-grid th,table.fin-grid td{font-size:var(--fs-sm)} }
/* the label, one line: the name (a toggle when the row opens, a button when it opens its panel), a muted tag where it
   fits, the ⓘ right after it; the pin sits over the label's right end (it takes no room from the name) */
.fin-lw{position:relative;display:flex;align-items:center;min-width:0;overflow:hidden}
.fin-rn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-rt{display:inline-flex;align-items:center;min-width:0;max-width:100%;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.fin-rt:hover{color:var(--ink)} .fin-rt:focus-visible{outline:0;box-shadow:0 0 0 2px var(--acc-soft);border-radius:4px}
.fin-rt .bkchev{flex-shrink:0;color:var(--fin-sub)}
.fin-nm{min-width:0;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-nm:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mut-soft)}
.fin-nm:focus-visible{outline:0;box-shadow:0 0 0 2px var(--acc-soft);border-radius:4px}
.fin-nm.fin-new{color:var(--fin-sub);font-style:italic}
.fin-tag{flex-shrink:0;margin-left:6px;padding:0 5px;border-radius:4px;background:#EEF1F5;color:var(--fin-sub);font-size:var(--fs-2xs);font-weight:500;line-height:1.55}
.fin-lw.fin-notag .fin-tag:not(.fin-tro){display:none}
/* the ⓘ: muted, on the row's hover and on keyboard focus (always on a touch screen); a click opens its callout */
.fin-i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin:0 0 0 3px;padding:0;border:0;border-radius:50%;
  background:none;color:var(--fin-sub);cursor:pointer;line-height:1;opacity:0}
.fin-i i{font-size:var(--fs-icon-sm)}
tr:hover .fin-i,.fin-i:focus-visible,.fin-i[aria-expanded="true"],.panel .fin-i{opacity:1}
.fin-i:hover,.fin-i[aria-expanded="true"]{color:var(--ink);background:var(--hover)}
.fin-i:focus-visible{outline:0;box-shadow:0 0 0 2px var(--acc-soft)}
.fin-pin{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0;padding:1px 3px;border:0;border-radius:4px;background:var(--card);color:var(--fin-sub);cursor:pointer;line-height:1;opacity:0}
.fin-pin i{font-size:var(--fs-icon-sm)}
tr:hover .fin-pin,.fin-pin:focus-visible,.fin-pin.on{opacity:1}
.fin-pin:hover{color:var(--ink);background:var(--hover)} .fin-pin.on{color:#B86E00}
tr.fsec .fin-pin{background:#F6F7F9} tr.fteams .fin-pin,tr.fin-grand .fin-pin{background:#FBFBFC} .fin-rl tr.fin-pinr .fin-pin{background:#FFFCF4}
@media (hover:none){ .fin-i{opacity:1} }
/* the callout / Levers box (finance.js finPop*), one at a time, over everything but a dialog; its live region */
.fin-pop{position:fixed;z-index:45;max-width:min(340px,calc(100vw - 16px));padding:10px 12px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 10px 30px rgba(20,30,45,.16);font-size:var(--fs-sm);line-height:1.45;color:var(--txt);text-align:left;white-space:normal}
.fin-pop[hidden]{display:none}
.fin-pop .fin-pop1{display:block;margin-bottom:2px;color:var(--ink);font-weight:600}
.fin-pop .fin-popl{display:block}
.fin-pop .fin-popa{display:flex;justify-content:flex-end;margin-top:8px}
.fin-pop .fin-popa .bs{margin:0;padding:4px 12px}
.fin-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fin-pop.fin-lev{max-width:min(460px,calc(100vw - 16px));padding:10px 12px 6px}
.fin-levw{max-height:min(420px,calc(100vh - 160px));overflow:auto;margin:8px -4px 0}
table.fin-levt{width:100%;border-collapse:collapse;table-layout:auto}
table.fin-levt th,table.fin-levt td{position:static;padding:4px 6px;font-size:var(--fs-sm);text-align:right;white-space:nowrap;border:0;background:none}
table.fin-levt th{color:var(--fin-sub);font-weight:500;border-bottom:1px solid var(--line)}
table.fin-levt th:first-child,table.fin-levt td:first-child{text-align:left;color:var(--ink)}
table.fin-levt td:first-child{white-space:normal;min-width:150px}
table.fin-levt td{border-top:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
table.fin-levt tbody tr:first-child td{border-top:0}
table.fin-levt .fin-levn{display:block;font-weight:500}
table.fin-levt .fin-levs{display:block;font-size:var(--fs-xs);color:var(--fin-sub)}
table.fin-levt tr.fin-levoff td{color:var(--fin-sub)} table.fin-levt tr.fin-levoff .fin-levn{color:var(--fin-sub);font-weight:400}
.fin-levb{display:inline-flex;align-items:center;gap:6px} .fin-levb i{font-size:var(--fs-icon-sm)}
.fin-levb.on{background:var(--hover);border-color:var(--mut-soft);color:var(--ink)}
table.fin-grid td.fin-l.d1{padding-left:28px} table.fin-grid td.fin-l.d2{padding-left:44px} table.fin-grid td.fin-l.d3{padding-left:60px}
/* rows: sections shaded and bold, lines plain, subtotals bold with a rule above, EBITDA and the month-end cash the strongest */
table.fin-grid tr.fsec td,table.fin-grid tr.fin-grp td{color:var(--ink);font-weight:600;background-color:#F6F7F9}
table.fin-grid tr.fsec td.fa,table.fin-grid tr.fin-grp td.fa{background-color:#E9EDF3}
table.fin-grid tr.fsec td.coly,table.fin-grid tr.fin-grp td.coly{background-color:#EDEEF1}
table.fin-grid tr.fsec td:first-child,table.fin-grid tr.fin-grp td:first-child{background-color:#F6F7F9}
table.fin-grid tr.fline td{color:var(--txt)} table.fin-grid tr.fline td:first-child{color:var(--txt)}
table.fin-grid tr.totrow td,table.fin-grid tr.fin-bal td{color:var(--ink);font-weight:600;border-top:1px solid #C9CFD9}
table.fin-grid tr.fin-grand td{border-top:2px solid var(--ink);padding-top:5px;background-color:#FBFBFC}   /* the rule's extra pixel off the padding: one row height */
table.fin-grid tr.fin-grand td.fa{background-color:#EEF1F6} table.fin-grid tr.fin-grand td.coly{background-color:#ECEDF1}
table.fin-grid tr.fteams td{color:var(--ink);font-weight:500;background-color:#FBFBFC}
table.fin-grid tr.fteams td.fa{background-color:#F2F4F8}
table.fin-grid tr.fteam td{color:var(--txt);font-weight:500} table.fin-grid tr.fteam td.fa{font-weight:500}
table.fin-grid tr.fperson td{color:var(--txt)} table.fin-grid tr.fsub td{color:var(--mut);font-style:italic}
table.fin-grid tr.fteam td.fin-l .fin-rn{font-weight:500} table.fin-grid td .est{margin-left:3px;font-size:var(--fs-xs);font-weight:400;font-style:italic;color:var(--mut)}
/* the sign where it is the message: text colour only, over any row's ink (a moved cell keeps its amber corner) */
table.fin-grid tbody tr td.pos{color:var(--fin-pos)} table.fin-grid tbody tr td.neg{color:var(--fin-neg)}
/* a selected block of cells */
table.fin-grid td.fin-sel,table.fin-grid td.fin-sel.fa,table.fin-grid td.fin-sel.coly{background:#DCEAFB!important;box-shadow:inset 0 0 0 1px #A9C8EE}
table.fin-ed td.fin-sel input{background:transparent}
.chip.fin-act{background:#DCE3EC;color:#2E4058} .chip.fin-fc{background:repeating-linear-gradient(135deg,#FFF9EE 0 5px,#FFF1D9 5px 10px);color:#8A5300}
/* the probe finance.js sizes the columns with */
table.fin-probe{position:absolute;left:-9999px;top:0;visibility:hidden;width:auto}
table.fin-probe td{overflow:visible}

/* ---- the Inputs grids (Revenue, People, Costs): editable cells, borderless until hovered or focused, amber once
   changed; an actual month greyed, "–" where the books have nothing. A cell's figure ends 4 px from its column's edge,
   as the P&L's below it ---- */
table.fin-ed td.fin-c{padding:2px 1px}
table.fin-ed td.fin-c input{width:100%;min-width:0;padding:3px 2px;border:1px solid transparent;border-radius:5px;background:transparent;box-shadow:none;
  text-align:right;font:inherit;font-size:inherit;font-variant-numeric:tabular-nums;color:var(--ink)}
table.fin-ed td.fin-c input:hover{border-color:var(--line);background:#fff}
table.fin-ed td.fin-c input:focus{background:#fff;border-color:var(--acc-strong);box-shadow:0 0 0 2px var(--acc-soft)}
table.fin-ed td.fin-c input[readonly]{color:var(--fin-sub);cursor:default}
table.fin-ed td.fin-c input[readonly]:hover{border-color:transparent;background:transparent}
table.fin-ed td.fin-c input[readonly]:focus{border-color:#AEBACB;box-shadow:none;background:transparent}
table.fin-ed td.fin-c input::placeholder{color:#6B7686}   /* the rule's rate: grey, and still 4.6:1 */
table.fin-ed td.fin-na input,table.fin-grid td.fin-na{text-align:center;color:var(--fin-sub)}
table.fin-ed td.fin-chg,table.fin-ed td.fin-chg.fa{background:#FFF1D6;box-shadow:inset 0 0 0 1px #F2C45A}
table.fin-ed td.fin-chg input{font-weight:600} table.fin-ed td.fin-chg input:hover{background:#FFF7E8}   /* a changed cell stays amber under the mouse */
/* a person's or cost's month typed for that month only: a quiet dot in its corner (the tooltip says what Delete does) */
table.fin-ed td.fin-c.fin-ov{position:relative}
table.fin-ed td.fin-c.fin-ov::after,.fin-legend .sw.fin-lov::after{content:"";position:absolute;right:4px;top:4px;width:5px;height:5px;border-radius:50%;background:#5F6F86;pointer-events:none}
.fin-legend .sw.fin-lov{position:relative;background:#fff} .fin-legend .sw.fin-lov::after{right:1px;top:1px}
/* a month off a person's payroll, or a tax the model works out: closed */
table.fin-ed td.fin-out input,table.fin-ed td.fin-tax input{cursor:default}
table.fin-ed td.fin-tax input{font-style:italic}
/* People: Heads first, the teams' and the others' rows as groups; Costs: the first line below EBITDA ruled off */
table.fin-grid tr.fin-hds td{color:var(--ink);font-weight:600}
table.fin-grid tr.fin-below td{border-top:1px solid #C9CFD9}
table.fin-grid tr.fin-addr td{padding-top:2px;padding-bottom:2px;border-top:1px solid var(--line-soft);background-color:var(--card)}
.fin-add1{display:inline-flex;align-items:center;gap:5px;margin:0;padding:2px 6px 2px 2px;border:0;border-radius:5px;background:none;
  font:inherit;font-weight:500;color:var(--ink);cursor:pointer}
.fin-add1 i{font-size:var(--fs-icon-sm)} .fin-add1:hover{background:var(--line-soft)} .fin-add1:focus-visible{outline:0;box-shadow:0 0 0 2px var(--acc-soft)}
/* moved by an unsaved change: an amber corner, "was …" in its tooltip */
table.fin-grid td.fin-lchg,.fin-legend .sw.fin-lmk{background-image:linear-gradient(225deg,#E0A035 0 5px,transparent 5px)}
.fin-legend .sw.fin-lmk{background-color:#fff}
/* Compared against another version (finance.js finVs*), amber — the fill, the corner, the square — is "differs from
   it", and a cell not saved yet takes the save strip's dot (its top-left corner: a typed month's keeps the top right);
   a row that version lacks is tagged "new", a paired row with other fields has its name underlined; the Inputs tabs
   count the rows that differ beside the square; the rows only that version has end the legend */
table.fin-ed td.fin-c.fin-uns{position:relative}
table.fin-ed td.fin-c.fin-uns::before{content:"";position:absolute;left:4px;top:4px;width:6px;height:6px;border-radius:50%;background:#E0A035;pointer-events:none}
.fin-legend .sw.fin-luns{width:7px;height:7px;border:0;border-radius:50%;background:#E0A035;vertical-align:0}
.fin-legend .fin-lx{margin-left:auto;display:inline-flex;align-items:center;color:var(--txt)}
.fin-legend .fin-lx .fin-i{opacity:1}
.fin-tag.fin-tnew{background:#FFF1D6;color:#8A5300}
.fin-tag.fin-tro{background:#E8F4EE;color:#157F50}
/* a series the books fill (the booked training base): greyed like an actual month, nothing to type */
table.fin-grid td.fin-ro input{background:transparent;color:var(--fin-sub);cursor:default}
/* the one line under the Forecast's title */
.fin-def{margin:2px 0 6px;font-size:var(--fs-sm);color:var(--fin-sub);line-height:1.4}
/* Changes: the saves of the version on screen, one line each (finance.js finHist*) */
.fin-hist{margin:0 0 10px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.fin-hist[hidden]{display:none}
.fin-hist-r+.fin-hist-r{border-top:1px solid var(--line-soft)}
.fin-hist-l{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:7px 0;font-size:var(--fs-md);color:var(--txt)}
.fin-hist-w{flex-shrink:0;white-space:nowrap} .fin-hist-w b{font-weight:600;color:var(--ink)}
.fin-hist-t{flex:1 1 280px;min-width:0;color:var(--ink)} .fin-hist-c b{font-weight:600}
.fin-hist-t .fin-dot{color:var(--fin-sub)}
.fin-hist-m{border:0;background:none;padding:0 2px;color:var(--fin-sub);font:inherit;text-decoration:underline;cursor:pointer}
.chip.fin-hist-fx{background:var(--hover);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-hist .fin-hist-b{margin:0;padding:3px 10px;font-size:var(--fs-sm)}
.fin-hist-d{padding:0 0 8px}
.fin-hist-0{padding:8px 0;color:var(--fin-sub)}
.fin-hist-0 .bs{margin:0 0 0 6px}
.fin-chgb i{font-size:var(--fs-icon-sm)}
.fin-nm.fin-nmx,.fin-rn.fin-nmx{text-decoration:underline dotted #C98A1C;text-underline-offset:3px}
.fin-seg .fin-tx{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:#8A5300;font-weight:600;font-variant-numeric:tabular-nums}
.fin-seg .fin-tx i{display:inline-block;width:8px;height:8px;border-radius:2px;background:#FFE9C2;border:1px solid #EDB04A}

/* ---- the known payments (Settings): a list table with inputs in its cells ---- */
table.fin-tb th,table.fin-tb td{padding:5px 4px;vertical-align:middle}
table.fin-tb th[title]{text-decoration:underline dotted #9AA6B8;text-underline-offset:3px;cursor:help}
table.fin-tb input,table.fin-tb select{padding:5px 7px;font-size:var(--fs-md)}   /* the fields' widths in em: they follow the type scale */
table.fin-tb input.fin-name{width:16em}
table.fin-tb input.fin-num{width:6.5em;text-align:right;font-variant-numeric:tabular-nums}
table.fin-tb input[type=month]{width:9em;font-variant-numeric:normal}
table.fin-tb tr.fin-chg td{background:#FFF7E8}

/* ---- Settings (the side panel): the rules, the sheet fixes folded, the known payments ---- */
.fin-drawer{margin-top:10px}
.fin-rules{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
.fin-rules .secard{margin:0;padding:11px 12px}
.secard.fin-rule>h3{margin:0 0 8px;line-height:1.45}
.secard.fin-rule>h3[title]{text-decoration:underline dotted #9AA6B8;text-underline-offset:3px;cursor:help;width:fit-content}
table.fin-kv td{padding:5px 6px;font-size:var(--fs-md)}
table.fin-kv td:first-child{color:var(--txt);white-space:normal}
table.fin-kv td.fin-pv{white-space:nowrap;width:1%}
table.fin-kv input{width:96px;text-align:right;padding:5px 8px;font-variant-numeric:tabular-nums}
table.fin-fac td{padding:4px 3px} table.fin-fac td:first-child{padding-left:0} table.fin-fac input{width:64px;padding:5px 6px} table.fin-fac .fin-sfx{min-width:0;margin-left:2px}
table.fin-kv .fin-pro{display:inline-block;width:96px;box-sizing:border-box;padding:5px 8px;text-align:right;font-variant-numeric:tabular-nums;color:var(--fin-sub)}
table.fin-kv input[readonly]{background:var(--bg);color:var(--fin-sub)}
table.fin-kv tr.fin-chg td,table.fin-kv.fin-chg td{background:#FFF7E8}
.fin-sfx{display:inline-block;min-width:40px;margin-left:6px;font-size:var(--fs-sm);color:var(--fin-sub);text-align:left}
table.fin-tiers{margin-bottom:6px} table.fin-tiers td input{width:104px}
.fin-add{margin:4px 0 8px!important}
table.fin-q{table-layout:auto;width:auto}
table.fin-q th,table.fin-q td{padding:4px 5px;font-size:var(--fs-sm)}
table.fin-q td.fin-c input{width:62px;padding:4px 5px;text-align:right;font-variant-numeric:tabular-nums}
table.fin-q td.fin-chg{background:#FFF1D6}
table.fin-q td.fa input{background:var(--bg);color:var(--fin-sub)}
b.fin-zero{color:var(--fin-sub);font-weight:500}
.fin-effw{color:var(--fin-sub);font-size:var(--fs-sm)}
.panel h3.fin-kph{margin:18px 0 8px;font-size:var(--fs-md)}
.panel table.fin-kp input.fin-name{width:100%} .panel table.fin-kp input.fin-num{width:7.5em} .panel table.fin-kp input[type=month]{width:8.5em}
.panel table.fin-kp td.tl{width:auto}

/* ---- the side panel: a number's working ---- */
.panel:has(#fin_pn) .sech,.panel:has(#fin_drw) .sech{color:#5E6A79}   /* the kit's --mut-soft captions read 2.5:1 */
.panel .fin-amt .fin-big{font-size:var(--fs-xl);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.panel .fin-amt .fin-big.pos{color:var(--fin-pos)} .panel .fin-amt .fin-big.neg{color:var(--fin-neg)}
.panel a.fin-back{color:var(--ink);font-weight:500;cursor:pointer}
.panel .fin-how{border-left:3px solid var(--line);padding:2px 0 2px 12px;margin-top:4px}
.panel .fin-howr{display:flex;gap:8px;padding:3px 0;font-size:var(--fs-base);color:var(--ink);line-height:1.5}
.panel .fin-op,.panel .fparts .fin-op{display:inline-block;width:14px;flex-shrink:0;font-style:normal;font-weight:600;color:var(--fin-sub);text-align:center}
.panel .fparts .fin-op{margin-right:6px}
.panel .fin-split{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.panel .fparts{border:1px solid var(--line);border-radius:var(--radius);margin-top:8px}
.panel .fparts .r{display:flex;justify-content:space-between;gap:10px;padding:7px 11px;border-top:1px solid var(--line-soft);font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.panel .fparts .r:first-child{border-top:0} .panel .fparts .r:last-child{font-weight:600;color:var(--ink);background:var(--bg)}
.panel .fparts.fin-inb .r:last-child{font-weight:400;color:var(--txt);background:none}
.panel .fparts.fin-inb .r span:last-child{color:var(--ink);font-weight:500;white-space:nowrap}
.panel .fparts .r.clk{cursor:pointer} .panel .fparts .r.clk:hover{background:var(--hover)}
.panel a.fin-src{display:inline-flex;align-items:center;gap:4px;margin-top:8px;color:var(--ink);font-weight:500;font-size:var(--fs-md);cursor:pointer}
/* the bank payments behind an actual cash number: date · payee · amount, biggest first, the total at the foot */
.panel .fparts.fin-pay .r.fin-payr{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:8px}
.panel .fin-payd{color:var(--fin-sub);white-space:nowrap}
.panel .fin-payp{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.panel .fin-paya{white-space:nowrap}
.panel .fparts.fin-pay .r.fin-payh{background:var(--bg);font-weight:600;color:var(--ink)}
.panel .fparts.fin-pay .r.fin-payh .subnote{font-weight:400}
.panel .fparts.fin-pay .r.fin-pay0{color:var(--fin-sub)}
.panel .fin-pp .subnote{margin:6px 0 0}

/* ---- Compare (finance.js finCmp*): a sub-row per plan added under every row, its values toned against the open
   plan's; the card of what differs, a fold per plan; the TL;DR of the drivers ---- */
.fin-note{margin:10px 0 0;line-height:1.5}
table.fin-grid tr.fin-cmpr td{height:auto;padding-top:1px;padding-bottom:3px;border-top:0;font-size:var(--fs-xs);font-weight:400;color:var(--fin-sub);background-color:transparent}
table.fin-grid tr.fin-cmpr td.coly{background-color:var(--seg-bg)}
table.fin-grid tr.fin-cmpr td.fa{background-color:#F6F8FA}
table.fin-grid tr.fin-cmpr td.pos{color:var(--fin-pos)} table.fin-grid tr.fin-cmpr td.neg{color:var(--fin-neg)}
table.fin-grid tr.fin-cmpr td.fin-l .fin-rn{font-weight:500;color:var(--fin-sub)}
.fin-csw{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;flex-shrink:0;vertical-align:middle}
.fin-legend .sw.fin-lcmp{border-radius:50%;width:8px;height:8px}
.fin-hd+.fin-cmpc:not(:empty) .fin-cmpcard{margin-top:0;border-top:0;border-radius:0 0 var(--radius-card) var(--radius-card)}
.fin-hd+.fin-cmpc:empty+.fin-sec{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;border-top:0}
.fin-cmph{cursor:default;min-height:44px}
.fin-cmpt{padding:4px 6px;font-weight:600;color:var(--ink)}
.fin-cmpbody{padding:0 16px 6px;border-top:1px solid var(--line-soft)}
details.fin-cmpd{padding:9px 0}
details.fin-cmpd+details.fin-cmpd{border-top:1px solid var(--line-soft)}
details.fin-cmpd>summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--fs-md);color:var(--ink);list-style-position:inside}
details.fin-cmpd>summary b{font-weight:600}
.fin-cmps{font-size:var(--fs-sm);color:var(--fin-sub)} .fin-cmps b.pos{color:var(--fin-pos)} .fin-cmps b.neg{color:var(--fin-neg)}
.fin-cmpdb{padding:10px 0 4px 16px}
.fin-cmpdb .pos{color:var(--fin-pos)} .fin-cmpdb .neg{color:var(--fin-neg)}
.fin-none{padding:14px 16px;font-size:var(--fs-sm);color:var(--fin-sub)}
/* the FY column's field: the year typed, the months follow */
table.fin-ed td.fin-fyc{padding:2px 1px;position:relative}
table.fin-ed td.fin-fyc input{width:100%;min-width:0;padding:3px 3px;border:1px solid transparent;border-radius:5px;background:transparent;box-shadow:none;
  text-align:right;font:inherit;font-size:inherit;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
table.fin-ed td.fin-fyc input:hover{border-color:var(--line);background:#fff}
table.fin-ed td.fin-fyc input:focus{background:#fff;border-color:var(--acc-strong);box-shadow:0 0 0 2px var(--acc-soft);outline:0}
table.fin-ed td.fin-fyc .fin-fyo{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:var(--fs-xs);color:var(--fin-sub);pointer-events:none}
p.fin-sc-tl{margin:0 0 10px;font-size:var(--fs-md);color:var(--ink)}
ul.fin-sc-dr{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;max-width:560px}
ul.fin-sc-dr li{display:flex;justify-content:space-between;gap:16px;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
ul.fin-sc-dr li .fin-sc-dl{color:var(--ink)}
ul.fin-sc-dr li.fin-sc-rest{color:var(--fin-sub);border-top:1px solid var(--line,#E4E7EC);padding-top:6px}
details.fin-sc-all{margin-top:4px}
details.fin-sc-all>summary{cursor:pointer;color:var(--fin-sub);font-size:var(--fs-md);margin-bottom:10px}

/* ---- the page's own dialog (finDlg: a title, the line, a name field, the buttons) ---- */
dialog#dlg.fin-dlg{max-width:480px}
dialog#dlg .fin-dlgt{margin:0 0 6px;font-size:var(--fs-lg);font-weight:600;line-height:1.35;color:var(--ink)}
dialog#dlg .fin-dlgn{display:block;margin:0 0 4px;font-size:var(--fs-sm);color:var(--fin-sub,#5E6A79)}
dialog#dlg .fin-dlgacts{align-items:center;flex-wrap:wrap}
dialog#dlg .fin-dlgl{margin-right:auto;font-size:var(--fs-md);color:var(--mut);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
dialog#dlg .fin-dlgl:hover{color:var(--ink)}

/* ---- the side panel's editor (finPe*): the inputs behind a forecast number, changed in place ---- */
.panel #fin_pn .fin-big{transition:opacity var(--dur) var(--ease)} .panel #fin_pn.fin-busy .fin-big{opacity:.4}
.panel .fin-amt .fin-wasr span:last-child{color:#8A5300;font-variant-numeric:tabular-nums}
.panel .fin-amt .fin-wasr b{font-weight:600}
.panel .fin-perr{display:flex;gap:6px;align-items:flex-start;margin:8px 0 0;color:#8A5300}
.panel .fin-pe .sech.fin-sub{margin:16px 0 6px}
.panel .fin-pe .fin-penote{margin:6px 0 0;line-height:1.5}
.panel .fin-pe .fin-er{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:7px 11px;
  border-top:1px solid var(--line-soft);font-size:var(--fs-md)}
.panel .fin-pe .fin-edb>.fin-er:first-child{border-top:0}
.panel .fin-pe .fin-er.fin-chg{background:#FFF7E8}
.panel .fin-pe .fin-el{min-width:0;color:var(--txt);line-height:1.35}
.panel .fin-pe .fin-el .subnote{display:block;font-size:var(--fs-xs);margin-top:1px}
.panel .fin-pe .fin-ei{display:inline-flex;align-items:center;gap:6px;justify-self:end}
.panel .fin-pe .fin-ei input{width:112px;padding:5px 8px;text-align:right;font-variant-numeric:tabular-nums}
.panel .fin-pe .fin-ei input[type=month]{width:156px;text-align:left}
.panel .fin-pe .fin-ei b{font-weight:500;color:var(--ink);white-space:nowrap}
.panel .fin-pe .fin-ei .fin-sfx{min-width:0;margin:0;white-space:nowrap}
.panel .fin-pe input.fin-bad,.panel .fin-pe input.fin-bad:focus{border-color:var(--neg);box-shadow:0 0 0 3px #FCEEEE}
.panel .fin-pe .fin-was{grid-column:1/-1;justify-self:end;font-size:var(--fs-xs);color:#8A5300;text-align:right;line-height:1.4}
.panel .fin-pe .fin-was:empty{display:none}
.panel .fin-pe .fin-mode{grid-column:1/-1;justify-self:end;margin-top:3px}
.panel .fin-pe .fin-only .fin-mode,.panel .fin-pe .fin-only .fin-sea{display:none}
.panel .fin-pe .fin-escope{background:var(--bg)}
.panel .fin-pe .seg button{padding:4px 10px}
.panel .fin-pe .fin-ec{border:1px solid var(--line);border-radius:var(--radius);margin-top:8px;overflow:hidden}
.panel .fin-pe .fin-ec.fin-chg{border-color:#F0D6A4}
.panel .fin-pe .fin-eh{display:flex;flex-direction:column;gap:1px;padding:8px 11px 6px;font-size:var(--fs-md)}
.panel .fin-pe .fin-eh b{color:var(--ink);font-weight:600}
.panel .fin-pe .fin-eb{display:flex;justify-content:flex-end;gap:6px;padding:2px 11px 9px}
.panel .fin-pe .fin-eb button{margin:0}
.panel .fin-pe .fin-ex{margin:0;padding:3px 8px}
.panel .fin-pe .fin-eadd{margin:8px 0 0}
.panel .fin-pe .fin-epsum{font-size:var(--fs-md);color:var(--txt)}
.panel .fin-pe .fin-form{border:1px dashed #CFD5DE;border-radius:var(--radius);background:var(--bg);padding:10px 11px 2px;margin-top:8px}
.panel .fin-pe .fin-fh{font-size:var(--fs-sm);font-weight:600;color:var(--ink);margin-bottom:6px}
.panel .fin-pe .fin-form input,.panel .fin-pe .fin-form select{margin-bottom:6px}
.panel .fin-pe .fin-frow{display:flex;gap:8px} .panel .fin-pe .fin-frow>*{flex:1;min-width:0}
.panel .fin-pe .fin-form .fin-eb{padding:4px 0 8px}
.panel .fin-pe .fin-elinks{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.panel .fin-pe .fin-eh a.fin-ehn{color:var(--ink);font-weight:600;cursor:pointer;width:fit-content}
.panel .fin-pe .fin-eh a.fin-ehn:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* a person's or a cost's panel (finRowPanel): the row's fields, its raises or changes, its typed months, Remove */
.panel #fin_rp_h:focus{outline:0}                   /* the panel's heading takes the focus as it opens: read out, not ringed */
.panel .fin-rp label.fin-el{display:block;margin:0;font-size:inherit;color:var(--txt)}
.panel .fin-rp .fin-ei input.fin-rpw{width:220px;text-align:left}
.panel .fin-rp .fin-ei select{width:220px;padding:5px 8px}
.panel .fin-rp .fin-rpl .fin-el{display:flex;align-items:center;gap:8px}
.panel .fin-rp .fin-rpl .fin-el input[type=month]{width:150px;padding:5px 8px}
.panel .fin-rp .sech.fin-chgh{color:#8A5300}
.panel .fin-rp .fin-rpdel{justify-content:flex-start;padding:16px 0 0}
.panel .fin-rp .fin-rpdel .danger{color:var(--neg);border-color:#F1C9C9} .panel .fin-rp .fin-rpdel .danger:hover{background:#FCEEEE;border-color:var(--neg)}
/* The open side panel (app.py's .panel: 480 px at the right, above the page) covers the header's save strip, so the
   panel carries it too, pinned at its foot. The header itself never moves for the panel: a click that closes the panel
   on its way down must land where it was aimed. */

@media (min-width:761px) and (max-width:1024px){
  .fin-hd{margin:-18px -16px 0;padding:12px 16px 0}   /* the tablet's main padding (app.py) */
}
/* ---- a phone: the page reads only — the key numbers, the cash chart, the sections folded; each section's grid
   scrolls on its own under its own month header (no ruler, no pinned rows) ---- */
@media (max-width:760px){
  html:has(#fin_hd){scroll-padding-top:0}
  /* .fin-ph's sticky offset is app.py's plain .phead rule now (same fix, every panel) — nothing finance-only left to say here */
  .fin-hd{position:static;margin:0;padding:0;background:none;box-shadow:none}
  .fin-r1{gap:8px}
  .fin-kl{white-space:normal}
  .fin-rl,.fin-pin{display:none}
  .fin-hd+.fin-sec,.fin-hd+.fin-cmpc:empty+.fin-sec,.fin-sec{margin-top:12px;border-top:1px solid var(--line);border-radius:var(--radius-card)}
  .fin-hd+.fin-cmpc:not(:empty) .fin-cmpcard{margin-top:12px;border-top:1px solid var(--line);border-radius:var(--radius-card)}
  .fin-r1{flex-direction:column;align-items:flex-start;gap:2px}
  .fin-tabl{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none} .fin-tabl::-webkit-scrollbar{display:none}
  .fin-tab{flex-shrink:0}
  .fin-tr{margin-left:0;width:100%;gap:6px}
  .fin-tr .segsel{padding:6px 8px}
  .fin-tr .dd.fin-mn{margin-left:auto}
  .fin-imp{flex-wrap:wrap}
  .fin-ik{flex:1 1 45%;padding:9px 12px;border-bottom:1px solid var(--line-soft)}
  .fin-ik .fin-kl{white-space:normal}
  .fin-ops{flex:1 1 100%;padding:8px 12px}
  .fin-sec.shut .fin-cbox{display:block}             /* the cash chart shows with the section folded */
  .fin-chartbox{height:170px}
  .fin-sec .fin-x{scrollbar-width:thin} .fin-sec .fin-x::-webkit-scrollbar{display:block}
  table.fin-grid thead.fin-th{display:table-header-group}
  table.fin-grid thead.fin-th th{background-color:var(--card);color:var(--fin-sub);font-size:var(--fs-sm);font-weight:500;box-shadow:inset 0 -1px 0 var(--line)}
  table.fin-grid thead.fin-th th.coly{background-color:var(--seg-bg);color:var(--ink)}
  table.fin-grid th:first-child,table.fin-grid td:first-child{padding-left:10px}
  table.fin-grid td.fin-l.d1{padding-left:20px} table.fin-grid td.fin-l.d2{padding-left:30px} table.fin-grid td.fin-l.d3{padding-left:40px}
  table.fin-ed td.fin-c input{width:100%;font-size:16px;padding:3px 2px;line-height:1.25}
  table.fin-ed td.fin-c input[readonly]{font-size:var(--fs-sm)}   /* a phone reads only: its figures as the rows around them (no field to zoom into) */
  .fin-i{position:relative;width:24px;height:20px}   /* a finger's target (24 px tall with ::before), in one row height */
  .fin-i::before{content:"";position:absolute;inset:-2px 0}
  table.fin-tb[data-l] input.fin-name,table.fin-tb[data-l] input.fin-num,table.fin-tb[data-l] input[type=month],table.fin-tb[data-l] select{width:100%}
  .panel .fin-rp .fin-ei input.fin-rpw,.panel .fin-rp .fin-ei select{width:180px;font-size:16px}
  .fin-pop,.fin-pop.fin-lev{max-width:calc(100vw - 24px)}
  table.fin-kv input{width:96px}
  .fin-sfx{min-width:0}
  dialog#dlg .fin-dlgacts button{flex:1 1 auto}
  dialog#dlg .fin-dlgl{flex-basis:100%;margin:0 0 6px}
  .panel .fin-pe .fin-ei input{width:96px;font-size:16px}       /* 16px: a phone does not zoom into the field */
  .panel .fin-pe .fin-ei input[type=month]{width:140px}
  .panel .fin-pe .fin-form input,.panel .fin-pe .fin-form select{font-size:16px}
}

/* ---- the records behind an actual P&L number (static/finance/drill.js): groups with their count and total, each
   opening into date · who · what · amount, the total at the foot tying to the cell ---- */
.panel .fin-dp{margin-top:4px}
.panel .fin-drhd{display:flex;align-items:baseline;gap:10px}
.panel .fin-drhd .sech{flex:1}
.panel a.fin-drback{color:var(--ink);font-weight:500;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap}
.panel .fin-drl{border:1px solid var(--line);border-radius:var(--radius);margin-top:8px;overflow:hidden}
.panel .fin-drg+.fin-drg{border-top:1px solid var(--line-soft)}
.panel .fin-drh{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:8px 11px;border:0;border-radius:0;background:none;
  font:inherit;font-size:var(--fs-md);color:var(--ink);text-align:left;cursor:pointer;font-variant-numeric:tabular-nums}
.panel .fin-drh:hover{background:var(--hover)}
.panel .fin-drh.fin-drh0{cursor:default} .panel .fin-drh.fin-drh0:hover{background:none}
.panel .fin-drh .ti{font-size:var(--fs-icon-sm);color:var(--fin-sub,#5E6A79);transition:transform var(--dur) var(--ease)}
.panel .fin-drg.open .fin-drh .ti{transform:rotate(90deg)}
.panel .fin-drsp{display:inline-block;width:14px;flex-shrink:0}
.panel .fin-drn{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel .fin-drc{color:var(--fin-sub,#5E6A79);font-size:var(--fs-sm);white-space:nowrap}
.panel .fin-dra{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.panel .fin-drh .fin-dra{min-width:96px;font-weight:500}
.panel .fin-drb{background:var(--bg);border-top:1px solid var(--line-soft)}
.panel .fin-drr{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:6px 11px 6px 33px;
  border-top:1px solid var(--line-soft);font-size:var(--fs-sm);color:var(--txt)}
.panel .fin-drr:first-child{border-top:0}
.panel .fin-drr.clk{cursor:pointer} .panel .fin-drr.clk:hover{background:var(--card)}
.panel .fin-drd{color:var(--fin-sub,#5E6A79);white-space:nowrap}
.panel .fin-drw{min-width:0;overflow-wrap:anywhere}
.panel .fin-drw b{font-weight:500;color:var(--ink);margin-right:6px}
.panel .fin-drx{color:var(--txt)}
.panel .fin-drw b+.fin-drx{display:block;color:var(--fin-sub,#5E6A79);font-size:var(--fs-xs)}
.panel .fin-drgo{margin-left:4px;font-size:var(--fs-icon-sm);color:var(--fin-sub,#5E6A79);vertical-align:-1px}
.panel .fin-drr.clk:hover .fin-drgo{color:var(--ink)}
.panel .fin-drr.fin-drhid .fin-drw{color:var(--fin-sub,#5E6A79);font-style:italic}
.panel button.fin-drm{display:block;width:100%;margin:0;padding:6px 11px 7px 33px;border:0;border-top:1px solid var(--line-soft);
  border-radius:0;background:none;color:var(--ink);font:inherit;font-size:var(--fs-sm);font-weight:500;text-align:left;cursor:pointer}
.panel .fin-drg.fin-drgap .fin-drn{color:var(--warn)}
.panel .fin-drt{display:flex;justify-content:space-between;gap:10px;padding:8px 11px;border-top:1px solid var(--line);background:var(--bg);
  font-size:var(--fs-md);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.panel p.fin-drnote{margin:8px 0 0;line-height:1.45}
@media (max-width:760px){
  .panel .fin-drr{grid-template-columns:44px minmax(0,1fr) auto;padding-left:24px}
  .panel .fin-drh .fin-dra{min-width:0}
}

/* ---- what two plans assume differently (finScDiffHtml), and the approve / adopt dialogs (finScBudget, finScAdopt) ---- */
.fin-sc-n{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--seg-bg);color:var(--txt);font-size:var(--fs-xs);
  font-weight:600;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.fin-sc-vs{font-weight:400;color:var(--fin-sub)}
.fin-sc-fx .neg{color:var(--fin-neg)} .fin-sc-fx .pos{color:var(--fin-pos)}
.fin-df{display:flex;flex-direction:column;gap:12px}
.fin-df-h{margin:0 0 2px;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fin-sub)}
.fin-df-r{display:grid;grid-template-columns:minmax(150px,30%) minmax(0,1fr);gap:2px 16px;padding:6px 0;border-top:1px solid var(--line-soft);
  font-size:var(--fs-md);line-height:1.45}
.fin-df-h+.fin-df-r{border-top:0}
.fin-df-r b{font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.fin-df-r span{color:var(--txt);overflow-wrap:anywhere}
p.fin-sc-d0{margin:0;color:var(--fin-sub);font-size:var(--fs-md)}
/* the confirm dialogs: before → after, and what changes, in a box that scrolls */
dialog#dlg.fin-sc-wide{max-width:560px}
dialog#dlg label.fin-sc-adopt{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-size:var(--fs-md);color:var(--ink);cursor:pointer}
dialog#dlg label.fin-sc-adopt input{accent-color:var(--acc-strong);width:15px;height:15px}
dialog#dlg details.fin-sc-since{margin:0 0 14px;padding:8px 12px;border-radius:var(--radius);background:#FFF3DA;color:#5A3B08}
dialog#dlg details.fin-sc-since>summary{margin:0;color:inherit}
dialog#dlg details.fin-sc-since ul{margin:8px 0 0;padding-left:18px}
dialog#dlg p.fin-sc-alert{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:8px 10px;border-radius:var(--radius);background:#FFF3DA;color:#5A3B08;
  font-size:var(--fs-md);white-space:normal}
dialog#dlg p.fin-sc-alert i{margin-top:2px;font-size:var(--fs-icon-sm)}
.fin-sc-fxs{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--radius)}
.fin-sc-fx{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;gap:4px 12px;align-items:baseline;padding:8px 11px;font-size:var(--fs-md)}
.fin-sc-fx+.fin-sc-fx{border-top:1px solid var(--line-soft)}
.fin-sc-fxl{color:var(--txt)}
.fin-sc-fxv{color:var(--txt);white-space:nowrap}
.fin-sc-fxv b{font-weight:600;color:var(--ink)}
.fin-sc-fxd{text-align:right;white-space:nowrap;font-size:var(--fs-sm)}
.fin-sc-dh{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.fin-sc-dbox{max-height:min(38vh,300px);overflow:auto;margin:0 0 16px;padding:6px 12px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);gap:8px}
.fin-sc-dbox .fin-df-r{grid-template-columns:minmax(0,1fr);gap:0;padding:5px 0;font-size:var(--fs-sm)}
dialog#dlg .fin-sc-d0{margin:0 0 16px}
/* a phone: what differs in one column, the dialogs' figures stacked */
@media (max-width:760px){
  .fin-df-r{grid-template-columns:minmax(0,1fr);gap:1px}
  .fin-sc-fx{grid-template-columns:minmax(0,1fr) auto;padding:8px 10px}
  .fin-sc-fxv{grid-column:1/-1;grid-row:2}
  .fin-sc-fxd{grid-column:2;grid-row:1}
}