/* Finance workspace (DEV-341): Job cost, Commitments, Change orders, Pay apps, Invoices, Receivables, WIP & forecast.
   Every Finance tool root carries .gch-fin (modules/finance.js), so the shared gx-* kit in jobs.css (KPI tiles, gx-t
   tables) applies here too. Tables are hairlines on --bg2 with tabular numerals; money never wraps (it shrinks:
   exact, whole dollars, then k/M). No status fills. Orange only where something needs a decision. */

.gch-fin{padding-bottom:var(--s8)}
.gch-fin .fm{white-space:nowrap;font-variant-numeric:tabular-nums}
.gch-fin .fm.is-none{color:var(--mid)}
.gch-fin .mid{color:var(--mid)}
.gch-fin .is-over{color:var(--danger)}

/* tiles: the gx-kpi tile, sized for six on a laptop */
.gch-fin .fin-kpis{margin:0 var(--gut);background:var(--bg2)}
.gch-fin .fin-kpis.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gch-fin .fin-kpis.is-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.gch-fin .fin-kpis .gx-kpi .v{font-size:24px;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.gch-fin .fin-kpis .gx-kpi .s{white-space:normal;line-height:1.35}
.gch-fin .fin-kpis .gx-kpi.is-act .v{color:var(--o-txt)}
.gch-fin .fin-kpis .gx-kpi.is-act{box-shadow:inset 0 2px 0 var(--o)}

/* sections and disclosures */
.gch-fin .fin-sec{margin:var(--s6) var(--gut) 0;min-width:0}
.gch-fin .fin-sh{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s2) var(--s3);margin-bottom:var(--s2)}
.gch-fin .fin-sh h2{font-size:15px;font-weight:600}
.gch-fin .fin-sh .mid{font-size:13px}
.gch-fin .fin-dx{margin:var(--s6) var(--gut) 0;border-top:1px solid var(--line)}
.gch-fin .fin-dx > summary{display:flex;align-items:center;gap:var(--s2);min-height:44px;cursor:pointer;list-style:none}
.gch-fin .fin-dx > summary::-webkit-details-marker{display:none}
.gch-fin .fin-dx > summary .car{flex:none;width:16px;height:16px;color:var(--mid);transition:transform .12s}
.gch-fin .fin-dx:not([open]) > summary .car{transform:rotate(-90deg)}
.gch-fin .fin-dx > summary .t{font-size:14.5px;font-weight:600}
.gch-fin .fin-dx > summary .s{font-size:13px;color:var(--mid)}
.gch-fin .fin-dxb{padding:var(--s2) 0 var(--s3)}
.gch-fin .fin-dx .fin-dx,.gch-fin .fin-dxb .fin-sec{margin-left:0;margin-right:0}
.gch-fin .fin-empty{margin:var(--s6) var(--gut)}
.gch-fin .fin-note{margin:var(--s2) 0;font-size:13px;color:var(--ink2)}
.gch-fin .fin-co{display:flex;flex-direction:column;min-height:0;flex:1}
.gch-fin .fin-co > .gch-list{flex:none;min-height:280px}

/* tables: gx-t with a fixed layout, the first column pinned when the table scrolls sideways */
.gch-fin .fin-scroll{overflow-x:auto;min-width:0;border:1px solid var(--line)}
.gch-fin .fin-t{font-size:13.5px}
.gch-fin .fin-t :is(th,td){height:38px;padding:3px var(--s2);overflow:hidden}
.gch-fin .fin-t thead th{height:auto;padding-top:8px;padding-bottom:8px;white-space:normal;line-height:1.25;vertical-align:bottom;font-size:12px;letter-spacing:0;text-transform:none;word-break:keep-all;overflow-wrap:normal;hyphens:none}
.gch-fin .fin-t tbody th[scope=row],.gch-fin .fin-t tfoot th{text-align:left;font-weight:600;white-space:nowrap}
/* the kit styles every th as a column head; row heads and the footer read as body text */
.gch-fin .fin-t :is(tbody,tfoot) th{height:38px;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--bg2);border-bottom:1px solid var(--line);vertical-align:middle}
.gch-fin .fin-t tr.fin-grp th{font-size:12.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis}
.gch-fin .fin-t .c-desc span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gch-fin .fin-t tfoot :is(th,td){border-top:1px solid var(--line2);border-bottom:0;font-weight:600;background:var(--bg)}
.gch-fin .fin-t col.w-code{width:78px}
.gch-fin .fin-t col.w-m{width:92px}
.gch-fin .fin-t col.w-ctc{width:128px}
.gch-fin .fin-t col.w-item{width:52px}
.gch-fin .fin-t col.w-pct{width:56px}
.gch-fin .fin-t col.w-job{width:220px}
/* The ledger fits a laptop with the rail open (about 1000px): Description keeps about 160px, Approved changes
   give space, and amounts shrink by column. Narrower than that (a phone) it scrolls with Code pinned. */
.gch-fin .fin-ledger{min-width:940px}
.gch-fin .fin-ledger col.w-code{width:88px}
.gch-fin .fin-ledger col.w-ap{width:72px}
.gch-fin .fin-ledger col.w-m{width:82px}
.gch-fin .fin-ledger col.w-ctc{width:112px}
.gch-fin .fin-ledger col.w-desc{width:auto}
.gch-fin .fin-g703{min-width:940px}
.gch-fin .fin-g703 col.w-m{width:92px}
.gch-fin .fin-g703 col.w-item{width:54px}
.gch-fin .fin-g703 col.w-pct{width:48px}
.gch-fin .fin-cco{min-width:880px}
.gch-fin .fin-t > * > tr > :first-child{position:sticky;left:0;z-index:1;background:var(--bg2)}
.gch-fin .fin-t > thead > tr > :first-child,.gch-fin .fin-t > tfoot > tr > :first-child{background:var(--bg)}
.gch-fin .fin-t tr.fin-xrow > td:first-child{position:static}
.gch-fin .fin-t tr.fin-grp > *{height:30px;background:var(--bg);color:var(--mid);font-size:12.5px;font-weight:600}
.gch-fin .fin-t tr.fin-grp th span{color:var(--ink2)}
.gch-fin .fin-t tr.fin-row:hover > *{background:var(--bg3)}
.gch-fin .fin-t tr.fin-row.is-open > *{border-bottom-color:transparent}
.gch-fin .fin-t tr.fin-xrow > td{padding:0 var(--s2) var(--s3);white-space:normal;height:auto;background:var(--bg2)}
.gch-fin .fin-exp{display:inline-flex;align-items:center;gap:4px;padding:0;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.gch-fin .fin-exp .i{width:14px;height:14px;color:var(--mid)}
.gch-fin .fin-exp b{font-weight:600;font-variant-numeric:tabular-nums}

/* cost to complete: the editable cell, its prior value, why? and the row history clock */
.gch-fin .fin-ctc{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:0}
.gch-fin .fin-ctc .l1,.gch-fin .fin-ctc .l2{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0;max-width:100%}
.gch-fin .fin-ctc .l2{font-size:11.5px}
.gch-fin .fin-ctc .was{flex:none;color:var(--mid);font-size:11.5px;white-space:nowrap}
.gch-fin .fin-cell{min-width:0;padding:1px 4px;background:none;border:1px dashed transparent;color:inherit;font:inherit;text-align:right;cursor:text}
.gch-fin tr:hover .fin-cell,.gch-fin .fin-cell:focus-visible{border-color:var(--line2)}
.gch-fin .fin-cell:hover,.gch-fin .fin-cell:focus-visible{border-style:solid;border-color:var(--edge)}
.gch-fin .fin-why{flex:0 1 auto;min-width:34px;max-width:100%;padding:0 5px;background:none;border:1px solid var(--o);font:inherit;font-size:11px;font-weight:600;line-height:1.35;color:var(--o-txt);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gch-fin .fin-why.is-set{border-color:transparent;padding:0;font-weight:400;color:var(--ink2);text-decoration:underline dotted;text-underline-offset:2px}
.gch-fin .fin-hb{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;padding:0;background:none;border:0;color:var(--mid);cursor:pointer}
.gch-fin .fin-hb .i{width:14px;height:14px}
.gch-fin .fin-hb:hover{color:var(--ink)}
.gch-fin .c-ctc{overflow:visible}
.gch-fin .is-editing{background:var(--bg3)}
.gch-fin .fin-in{width:100%;height:28px;padding:0 4px;text-align:right;font:inherit;font-variant-numeric:tabular-nums;background:var(--field);border:1px solid var(--line2);color:var(--ink)}
.gch-fin .fin-in:focus{outline:2px solid var(--o);outline-offset:-1px}
.gch-fin .fin-in::placeholder{color:var(--mid);font-size:12px}
.gch-fin .fin-g703 tr.is-blank > th,.gch-fin .fin-g703 tr.is-blank .c-desc{color:var(--ink2)}
.fin-whyp{display:flex;flex-direction:column;gap:6px;padding:var(--s3)}
.fin-whyp label{font-size:12.5px;font-weight:600}
.fin-whyp p{font-size:12.5px;font-variant-numeric:tabular-nums}
.fin-whyp input{width:100%}
.fin-whyp-f{display:flex;justify-content:flex-end;gap:var(--s2)}
.fin-hist{list-style:none;margin:var(--s2) 0 0;padding:0}
.fin-hist li{display:grid;grid-template-columns:130px 130px 1fr;gap:var(--s2);padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.fin-hist .when,.fin-hist .who{color:var(--mid)}

/* a code's drill-down: commitments, invoices, cost rows */
.gch-fin .fin-drill{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);padding-top:var(--s2)}
.gch-fin .fin-mini h3{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mid);margin-bottom:4px}
.gch-fin .fin-mini table,.fin-pt{width:100%;border-collapse:collapse;font-size:12.5px}
.gch-fin .fin-mini :is(th,td),.fin-pt :is(th,td){padding:4px 6px 4px 0;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.gch-fin .fin-mini th,.fin-pt th{height:auto;font-weight:600;color:var(--mid);font-size:11.5px;letter-spacing:0;text-transform:none;background:none;border-bottom:1px solid var(--line2)}
.gch-fin .fin-mini td{height:auto;font-size:12.5px;background:none}
.gch-fin .fin-mini .num,.fin-pt .num{text-align:right;font-variant-numeric:tabular-nums}
.fin-pt .fm{white-space:nowrap;font-variant-numeric:tabular-nums}
.fin-pt td .btn{margin-left:4px}
.gch-fin .fin-inl{margin-left:var(--s2);vertical-align:middle}

/* pay app page: back link, G702 summary, shortfall, G703 */
.gch-fin .fin-apph{padding:var(--s3) var(--gut) 0}
.gch-fin .fin-back{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--ink2);text-decoration:none}
.gch-fin .fin-back:hover{color:var(--ink)}
.gch-fin .fin-back .i{width:14px;height:14px}
.gch-fin .gch-phead .pill{margin-left:calc(-1 * var(--s1))}
.gch-fin .fin-g702{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);background:var(--bg2);margin:0}
.gch-fin .fin-g702 > div{min-width:0;padding:var(--s2) var(--s3);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.gch-fin .fin-g702 dt{font-size:12.5px;color:var(--ink2);line-height:1.3}
.gch-fin .fin-g702 dt .n{display:inline-block;min-width:1.4em;color:var(--mid);font-variant-numeric:tabular-nums}
.gch-fin .fin-g702 dd{margin:2px 0 0;font-size:18px;font-weight:600;white-space:nowrap;overflow:hidden}
.gch-fin .fin-g702 .is-big dd{font-size:22px}
.gch-fin .fin-short{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0 0;padding:var(--s2) var(--s3);border-left:2px solid var(--o);color:var(--o-txt);font-weight:600;font-size:13.5px}
.gch-fin .fin-short .i{width:16px;height:16px;flex:none}
.gch-fin .fin-short .btn{color:var(--ink)}
.gch-fin .fin-app{min-width:0}

/* panels inside Finance */
.gch-fin .gp-facts dd .fm{font-variant-numeric:tabular-nums}

/* charts (inline SVG with a table view twin) */
/* Chart series: blue, aqua, amber (the validated categorical slots that leave orange to decisions; checked all-pairs
   with the dataviz validator on each theme's surface). Light mode's aqua and amber sit under 3:1, so every chart
   carries direct labels and a table view. */
.gch-fin{--fc1:#3987e5;--fc2:#199e70;--fc3:#c98500;--fc-neg:#e66767;--fc-pos:#3987e5;--fc-grid:#2C2C2A;--fc-axis:#383835;--fc-de:#6B6B68}
html[data-theme="dim"] .gch-fin{--fc-grid:#35342F;--fc-axis:#45443E;--fc-de:#7C7972}
html[data-theme="light"] .gch-fin{--fc1:#2a78d6;--fc2:#1baf7a;--fc3:#eda100;--fc-neg:#e34948;--fc-pos:#2a78d6;--fc-grid:#DDDCD5;--fc-axis:#B2AFA5;--fc-de:#7C7A74}
.gch-fin .fin-charts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
.gch-fin .fin-chart h3{font-size:14px;font-weight:600}
.gch-fin .fin-chart .ch-s{font-size:12.5px;color:var(--mid)}
.gch-fin .fin-chart .lgd{display:flex;flex-wrap:wrap;gap:4px var(--s4);margin:6px 0 2px;font-size:12.5px;color:var(--ink2)}
.gch-fin .fin-chart .lgd i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.gch-fin .fin-chart .lgd i.is-dash{height:0;border-top:2px dashed var(--fc1);width:14px;vertical-align:3px}
.gch-fin .fin-chart svg{display:block;width:100%;height:auto;overflow:visible}
.gch-fin .fin-chart svg text{font-family:inherit;fill:var(--ink2);font-size:11px}
.gch-fin .fin-chart svg text.ax{fill:var(--mid)}
.gch-fin .fin-chart svg text.lb{fill:var(--ink);font-weight:600}
.gch-fin .fin-chart .ch-n{margin-top:4px;font-size:13px;color:var(--ink2)}
.gch-fin .fin-chart details{margin-top:6px}
.gch-fin .fin-chart details > summary{cursor:pointer;font-size:12.5px;color:var(--ink2);min-height:32px;display:flex;align-items:center}
.gch-fin .fin-chart .tw{overflow-x:auto}

/* WIP */
.gch-fin .fin-asof{display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--mid);white-space:nowrap}
.gch-fin .fin-exp .mid{font-weight:400}
.gch-fin .fin-asof select{width:auto;min-width:200px;font-size:14px}
.gch-fin .fin-wip{min-width:980px}
.gch-fin .fin-wip.has-div{min-width:1070px}
.gch-fin .fin-wip col.w-job{width:140px}
.gch-fin .fin-wip col.w-div{width:96px}
.gch-fin .fin-wip col.w-m{width:79px}
.gch-fin .fin-wip col.w-p{width:56px}
.gch-fin .fin-wip td.c-job .jobref.is-short{max-width:100%}
.gch-fin .fin-div{min-width:880px}
.gch-fin .fin-t td.c-job a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.gch-fin .fin-t td.c-job a:hover .nm{text-decoration:underline;text-underline-offset:2px}
.gch-fin .fin-t td.c-job,.gch-fin .fin-t th.c-job{position:sticky;left:0;z-index:1;background:var(--bg2)}
.gch-fin .fin-t tr.fin-closed > *{color:var(--ink2)}
.gch-fin .fin-t .fin-gap{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
.gch-fin .fin-t a.fin-num{color:inherit;text-decoration:none}
.gch-fin .fin-t a.fin-num:hover{text-decoration:underline;text-underline-offset:2px}
.gch-fin .fin-t tr.fin-grp th a{color:var(--ink2);text-decoration:none}
.gch-fin .fin-t tr.fin-grp th a:hover{color:var(--ink);text-decoration:underline}
.gch-fin .fin-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);background:var(--bg2)}
.gch-fin .fin-sum > a,.gch-fin .fin-sum > div{display:flex;flex-direction:column;gap:2px;padding:var(--s2) var(--s3);border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;color:inherit;min-width:0}
.gch-fin .fin-sum > a:hover{background:var(--bg3)}
.gch-fin .fin-sum .k{font-size:12.5px;color:var(--ink2)}
.gch-fin .fin-sum .v{font-size:18px;font-weight:600;white-space:nowrap;overflow:hidden}
.gch-fin .fin-sum .s{font-size:12px;color:var(--mid)}
.gch-fin .fin-disclaim{margin:var(--s6) var(--gut) 0;font-size:12.5px;color:var(--mid);max-width:900px}

/* laptop and phone */
@container gchmain (max-width:1180px){
  .gch-fin .fin-kpis.is-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gch-fin .fin-kpis.is-6 .gx-kpi:nth-child(4){border-left:0}
  .gch-fin .fin-kpis.is-6 .gx-kpi:nth-child(n+4){border-top:1px solid var(--line)}
  .gch-fin .fin-drill{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@container gchmain (max-width:900px){
  .gch-fin .fin-g702,.gch-fin .fin-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gch-fin .fin-kpis.is-4,.gch-fin .fin-kpis.is-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gch-fin .fin-kpis.is-4 .gx-kpi:nth-child(3),.gch-fin .fin-kpis.is-3 .gx-kpi:nth-child(3){border-left:0}
  .gch-fin .fin-kpis.is-4 .gx-kpi:nth-child(n+3),.gch-fin .fin-kpis.is-3 .gx-kpi:nth-child(n+3){border-top:1px solid var(--line)}
}
@container gchmain (max-width:700px){
  .gch-fin .fin-kpis.is-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gch-fin .fin-kpis.is-6 .gx-kpi:nth-child(odd){border-left:0}
  .gch-fin .fin-kpis.is-6 .gx-kpi:nth-child(4){border-left:1px solid var(--line)}
  .gch-fin .fin-kpis.is-6 .gx-kpi:nth-child(n+3){border-top:1px solid var(--line)}
  .gch-fin .fin-kpis .gx-kpi .v{font-size:20px}
  .gch-fin .fin-drill{grid-template-columns:minmax(0,1fr)}
  .gch-fin .fin-t tr > :first-child,.gch-fin .fin-t td.c-job,.gch-fin .fin-t th.c-job{box-shadow:1px 0 0 var(--line)}
  .gch-fin .fin-hist li{grid-template-columns:1fr}
  .gch-fin .fin-g702 dd{font-size:16px}
  .gch-fin .fin-g702 .is-big dd{font-size:18px}
}
/* A phone reads the charts as their tables (the table view opens there; modules/finance.js chartBox). */
@container gchmain (max-width:560px){
  .gch-fin .fin-chart svg{display:none}
  .gch-fin .fin-chart details > summary{display:none}
}

/* Finance amounts shown on other pages (the Overview's Money disclosure, the Home Money card) */
.fm{white-space:nowrap;font-variant-numeric:tabular-nums}