/* Jobs module styles, plus the shared management kit (gx-*) used by Home, Overview and Jobs.
   All three modules are owned by the T4a worker, so the kit is scoped to their three tool roots, plus the Finance
   tools (.gch-fin, DEV-341), which use the same tiles and tables.
   Tokens and shared classes come from base.css. Orange only for "act here" / active; status is always a word. */

/* ------------------------------------------------------------------ kit: small pieces */
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-none{color:var(--mid)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-late{color:var(--danger);font-weight:600}

/* percent-complete meter: neutral fill on a tag-ground track, the number beside it */
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-pct{display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-bar{position:relative;display:inline-block;flex:none;width:64px;height:6px;background:var(--tag-bg);overflow:hidden}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink2)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-pct b{min-width:3.1em;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-pct.is-big .gx-bar{width:100%;height:8px}

/* schedule variance: always a word */
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-var{font-size:12.5px;font-weight:600;white-space:nowrap}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-var.is-late{color:var(--danger)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-var.is-ok{color:var(--ok)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-var.is-done,
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-var.is-plain{color:var(--mid);font-weight:500}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-fin{display:inline-flex;align-items:baseline;gap:var(--s2);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Which date a finish cell names when it is not substantial completion ("Final", "Finished"): K.finish, js/data/jobs.js */
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) :is(.gx-fin,.jb-due,.hm-fin) .d .k{font-weight:400;color:var(--mid)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-cnt{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-cnt b{font-weight:600}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-cnt .gx-late{font-size:12.5px}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-ms{display:inline-flex;align-items:baseline;gap:var(--s2);min-width:0;max-width:100%}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-ms .nm{min-width:0;white-space:normal;line-height:1.3}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-ms .d{flex:none;color:var(--mid);font-size:12.5px;font-variant-numeric:tabular-nums}

/* KPI strip: stat tiles split by one hairline; values in proportional figures */
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-kpi{display:flex;flex-direction:column;gap:2px;min-width:0;padding:var(--s3) var(--s4);border-left:1px solid var(--line);text-decoration:none;color:inherit}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-kpi:first-child{border-left:0}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) a.gx-kpi:hover{background:var(--bg2)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) a.gx-kpi:hover .k{color:var(--ink)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-kpi .k{font-size:13px;color:var(--ink2)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-kpi .v{font-size:30px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-kpi .v small{font-size:15px;font-weight:500;color:var(--mid);margin-left:4px;letter-spacing:0}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-kpi .s{font-size:12.5px;color:var(--mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* tracked-item row (Needs you, Overdue across the division) */
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it{display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:4px var(--s3);background:var(--bg2);border-bottom:1px solid var(--line);text-decoration:none;color:inherit;font-size:14px}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it:hover{background:var(--bg3)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it.is-mine{box-shadow:inset 2px 0 0 var(--o)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-tool{flex:none;display:inline-flex;color:var(--mid)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-tool .i{width:16px;height:16px}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-num{flex:none;width:96px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-t{flex:1 1 auto;min-width:0;line-height:1.3}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it.is-waiting .gx-it-t{color:var(--ink2)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-job{flex:none;width:176px;min-width:0;font-size:13.5px}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-job .jobref.is-short{max-width:200px}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-ball{flex:none;width:236px;min-width:0;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-due{flex:none;width:150px;font-size:13.5px}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-st{flex:none;min-width:172px;display:flex;justify-content:flex-end}

/* portfolio table (Home bands, division Overview) */
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-pf{min-width:0}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;background:var(--bg2)}
/* Fixed widths so every division band on Home lines its columns up with the others. */
:is(.gch-m-home,.gch-m-overview) .gx-t th.c-job{width:24%}
:is(.gch-m-home,.gch-m-overview) .gx-t th.c-phase{width:118px}
:is(.gch-m-home,.gch-m-overview) .gx-t th.c-pct{width:140px}
:is(.gch-m-home,.gch-m-overview) .gx-t th.c-fin{width:210px}
:is(.gch-m-home,.gch-m-overview) .gx-t th.c-n{width:104px}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t th{height:36px;padding:0 var(--s3);text-align:left;vertical-align:middle;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mid);background:var(--bg);border-bottom:1px solid var(--line2);white-space:nowrap}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t td{height:46px;padding:4px var(--s3);vertical-align:middle;border-bottom:1px solid var(--line);font-size:14px;white-space:nowrap}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t :is(th,td).num{text-align:right}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t th.num .gch-sort{flex-direction:row-reverse}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t tbody tr[data-href]{cursor:pointer}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t tbody tr[data-href]:hover > td{background:var(--bg3)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t td.c-job{overflow:hidden}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t td.c-job a{display:block;overflow:hidden;text-overflow:ellipsis;text-decoration:none;padding:6px 0}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t td.c-job a:hover .nm{text-decoration:underline;text-underline-offset:2px}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t td.c-job .nm{font-weight:500}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t td.c-next{overflow:hidden}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t td.c-fin{overflow:hidden}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t tr.ph-completed td.c-job .nm,
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t tr.ph-completed td.c-next{color:var(--ink2)}
:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-t tr.gx-t-none td{height:auto;background:var(--bg)}
@container gchmain (max-width:1180px){:is(.gch-m-home,.gch-m-overview) .gx-t .c-next{display:none}:is(.gch-m-home,.gch-m-overview) .gx-t th.c-job{width:auto}}
@container gchmain (max-width:900px){:is(.gch-m-home,.gch-m-overview) .gx-t .c-phase{display:none}}
/* Narrow: each job becomes a card — job on top, meter and finish, then the three counts with labels. */
@container gchmain (max-width:700px){
  :is(.gch-m-home,.gch-m-overview) .gx-t,:is(.gch-m-home,.gch-m-overview) .gx-t tbody{display:block}
  :is(.gch-m-home,.gch-m-overview) .gx-t thead{display:none}
  :is(.gch-m-home,.gch-m-overview) .gx-t tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px var(--s4);padding:10px var(--s3);border-bottom:1px solid var(--line)}
  :is(.gch-m-home,.gch-m-overview) .gx-t tbody td{display:block;height:auto;padding:0;border:0;background:none !important}
  :is(.gch-m-home,.gch-m-overview) .gx-t td.c-job{flex:1 0 100%;max-width:none;min-width:0}
  :is(.gch-m-home,.gch-m-overview) .gx-t td.c-job a{padding:0}
  :is(.gch-m-home,.gch-m-overview) .gx-t tbody tr::after{content:"";order:3;flex-basis:100%;height:0}
  :is(.gch-m-home,.gch-m-overview) .gx-t td.c-job{order:1}
  :is(.gch-m-home,.gch-m-overview) .gx-t td.c-pct,:is(.gch-m-home,.gch-m-overview) .gx-t td.c-fin{order:2}
  :is(.gch-m-home,.gch-m-overview) .gx-t td.c-n{order:4}
  :is(.gch-m-home,.gch-m-overview) .gx-t tr.ph-bidding td.c-n,:is(.gch-m-home,.gch-m-overview) .gx-t tr.ph-bidding td.c-pct{display:none}
  :is(.gch-m-home,.gch-m-overview) .gx-t td.c-n{font-size:13.5px}
  :is(.gch-m-home,.gch-m-overview) .gx-t td.c-n::before{content:attr(data-l) " ";color:var(--mid);font-size:12.5px}
  :is(.gch-m-home,.gch-m-overview) .gx-t td.c-phase,:is(.gch-m-home,.gch-m-overview) .gx-t td.c-next{display:none}
  :is(.gch-m-home,.gch-m-overview) .gx-t tbody tr:hover{background:var(--bg3)}
  :is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-kpi:nth-child(3){border-left:0}
  :is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-kpi:nth-child(n+3){border-top:1px solid var(--line)}
  :is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-kpi .v{font-size:26px}
  /* Two tiles a row on a phone: the sub line wraps rather than cutting "1 overdue" to "1 ov…". */
  :is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-kpi .s{white-space:normal;overflow:visible}
}
@container gchmain (max-width:1180px){:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-ball{display:none}}
@container gchmain (max-width:900px){:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-st,:is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-job{display:none}}
@container gchmain (max-width:560px){
  :is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it{flex-wrap:wrap;row-gap:0;padding:8px var(--s3)}
  :is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-num{width:auto}
  :is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-due{width:auto;margin-left:auto}
  :is(.gch-m-home,.gch-m-overview,.gch-m-jobs,.gch-fin) .gx-it-t{flex:1 0 100%;padding-left:28px;white-space:normal}
}

/* ------------------------------------------------------------------ Jobs table */
.gch-m-jobs .jb-phase{display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--mid);white-space:nowrap}
.gch-m-jobs .jb-phase select{width:auto;min-width:148px;font-size:14px}
.gch-m-jobs td.c-pin{width:44px;padding-right:0}
/* DEV-334: as a phone card the pin sits beside the job name instead of taking a row of its own above it. */
@container gchlist (max-width:560px){
  .gch-m-jobs .gch-pane tbody tr[data-key] > td.c-pin{grid-column:2;grid-row:1;align-self:start;width:auto}
  .gch-m-jobs .gch-pane tbody tr[data-key] > td.is-primary{grid-column:1;grid-row:1}
}
.gch-m-jobs .jb-pin{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;margin-left:-6px;background:none;border:1px solid transparent;color:var(--mid);cursor:pointer;position:relative}
.gch-m-jobs .jb-pin::after{content:"";position:absolute;inset:-6px}
.gch-m-jobs .jb-pin .i{width:16px;height:16px}
.gch-m-jobs .jb-pin:hover{border-color:var(--edge);color:var(--ink)}
.gch-m-jobs .jb-pin[aria-pressed="true"]{color:var(--o-txt)}
.gch-m-jobs tr:not(:hover) .jb-pin[aria-pressed="false"] .i{opacity:.45}
/* DEV-345: the row's ⋯ (Change division…), the same quiet square as the pin. */
.gch-m-jobs td.c-more{width:44px;padding-left:0;text-align:right}
.gch-m-jobs .jb-more{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;background:none;border:1px solid transparent;color:var(--mid);cursor:pointer}
.gch-m-jobs .jb-more .i{width:16px;height:16px}
.gch-m-jobs .jb-more:hover,.gch-m-jobs .jb-more[aria-expanded="true"]{border-color:var(--edge);color:var(--ink)}
.gch-m-jobs td.c-job a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;padding:6px 0}
.gch-m-jobs td.c-job a:hover{text-decoration-color:currentColor}
.gch-m-jobs td.c-job .jobref .nm{font-weight:500}
.gch-m-jobs td.c-phase{color:var(--ink)}
.gch-m-jobs tr.ph-completed td.c-phase{color:var(--mid)}
.gch-m-jobs .jb-due{display:inline-flex;flex-direction:column;line-height:1.3;font-variant-numeric:tabular-nums}
.gch-m-jobs .jb-due .d{font-weight:600}
.gch-m-jobs .jb-due .r{font-size:12.5px;color:var(--mid)}
.gch-m-jobs .jb-due .r.is-late{color:var(--danger);font-weight:600}
.gch-m-jobs .jb-due .r.is-ok{color:var(--ok)}
.gch-m-jobs td.c-pm,.gch-m-jobs td.c-owner{color:var(--ink)}
.gch-m-jobs .jb-new-sub{color:var(--mid)}

/* ================================================================== B5 (round 2): today's Jobs columns */
.gch-m-jobs .jb-tally{display:inline-grid;grid-template-columns:repeat(3,2.4em);font-variant-numeric:tabular-nums}
.gch-m-jobs .jb-tally b{text-align:right;font-weight:600}
.gch-m-jobs .jb-tally .t-ok{color:var(--ok)}
.gch-m-jobs .jb-tally .t-mid{color:var(--o-txt)}
.gch-m-jobs .jb-tally .t-hot{color:var(--danger)}
.gch-m-jobs .jb-tally .is-0{color:var(--mid);font-weight:400}
.gch-m-jobs thead th.c-scopes{line-height:1.1}
.gch-m-jobs thead th.c-scopes .gch-sort{height:22px}
.gch-m-jobs thead th.c-scopes::after{content:"in : review : remain";display:block;padding-bottom:2px;font-size:10.5px;letter-spacing:.04em;font-weight:500;color:var(--mid);white-space:nowrap}
.gch-m-jobs .jb-isu{display:inline-flex;align-items:center;gap:2px;margin-left:6px;font-size:12.5px;font-weight:600;color:var(--o-txt);vertical-align:middle;font-variant-numeric:tabular-nums}
.gch-m-jobs .jb-isu .i{width:14px;height:14px}
.gch-m-jobs td.c-job .gch-marker{margin-left:8px;vertical-align:middle}
.gch-m-jobs .jb-due .r.is-past{color:var(--danger)}
.gch-m-jobs .jb-due .r.is-near{color:var(--ink)}
.gch-m-jobs .jb-due .r b{font-weight:600}
.gch-m-jobs .jb-nodue,.gch-m-jobs .jb-na{color:var(--mid)}
.gch-m-jobs td.c-person{color:var(--ink)}
.gch-m-jobs .jb-empty-acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}

/* packages uploaded but not processed yet */
.gch-m-jobs .jb-drafts{flex:none;margin:0 var(--gut) var(--s3);border:1px solid var(--line2);background:var(--bg2)}
.gch-m-jobs .jb-drafts h2{padding:var(--s2) var(--s3);border-bottom:1px solid var(--line)}
.gch-m-jobs .jb-drafts h2 .n{margin-left:4px;color:var(--o-txt);font-variant-numeric:tabular-nums}
.gch-m-jobs .jb-drafts ul{list-style:none;margin:0;padding:0}
.gch-m-jobs .jb-drafts a{display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:4px var(--s3);text-decoration:none;border-top:1px solid var(--line)}
.gch-m-jobs .jb-drafts li:first-child a{border-top:0}
.gch-m-jobs .jb-drafts a:hover{background:var(--bg3)}
.gch-m-jobs .jb-drafts .i{width:16px;height:16px;color:var(--mid)}
.gch-m-jobs .jb-drafts b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gch-m-jobs .jb-drafts .mid{font-size:12.5px;white-space:nowrap}
.gch-m-jobs .jb-drafts .go{margin-left:auto;color:var(--o-txt);font-weight:600;font-size:13px;white-space:nowrap}

/* export dialog */
.jb-exp-dlg .ff-multi{max-height:176px;overflow-y:auto;gap:2px var(--s4)}
.jb-exp-dlg .ff-multi .ff-check{min-width:220px;font-size:13.5px}
.jb-exp-err{margin-top:var(--s3);font-size:13.5px;font-weight:600;color:var(--danger)}

/* ------------------------------------------------------------------ New job (package upload) */
.gch-m-jobs.nj-page{padding:0 var(--gut) var(--s12)}
.gch-m-jobs .nj-head{flex:none;display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;padding:var(--s4) 0}
.gch-m-jobs .nj-hl{display:flex;align-items:baseline;gap:var(--s4);min-width:0;flex:1 1 auto}
.gch-m-jobs .nj-back{flex:none;font-size:13.5px;color:var(--ink2);text-decoration:none;white-space:nowrap;padding:4px 0}
.gch-m-jobs .nj-back:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.gch-m-jobs .nj-head h1{position:relative;min-width:0;font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:-.01em;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gch-m-jobs .nj-h-out{position:absolute;left:0;top:0;white-space:nowrap;animation:nj-out .32s var(--ease) both}
.gch-m-jobs .nj-h-in{display:inline-block;animation:nj-in .32s var(--ease) both}
@keyframes nj-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes nj-in{from{opacity:0;transform:translateY(8px)}}
.gch-m-jobs .nj-allow{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--ink2);white-space:nowrap}
.gch-m-jobs .nj-allow b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.gch-m-jobs .nj-meter{position:relative;display:inline-block;width:88px;height:6px;background:var(--tag-bg)}
.gch-m-jobs .nj-meter i{position:absolute;left:0;top:0;bottom:0;background:var(--ink2)}
.gch-m-jobs .nj-work{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,1fr);gap:var(--s8);align-items:start}
.gch-m-jobs .nj-zone{position:relative}
.gch-m-jobs .nj-drop{width:100%;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s8);background:var(--bg2);border:1px dashed var(--edge);color:var(--ink);font:inherit;cursor:pointer;transition:border-color var(--t-hover) var(--ease),background var(--t-hover) var(--ease)}
.gch-m-jobs .nj-drop:not([disabled]):hover,.gch-m-jobs .nj-drop[data-dragging]{border-color:var(--o);background:var(--bg3)}
.gch-m-jobs .nj-drop:focus-visible{outline:1px solid var(--o);outline-offset:2px}
.gch-m-jobs .nj-drop[disabled]{cursor:not-allowed}
.gch-m-jobs .nj-sym{width:48px;height:48px;stroke:var(--o);stroke-width:2;stroke-linecap:square}
.gch-m-jobs .nj-title{font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:-.01em}
.gch-m-jobs .nj-choose{font-size:14px;color:var(--ink2)}
.gch-m-jobs .nj-limits{margin:var(--s2) 0 0;padding:0 var(--s2);font-size:12.5px;color:var(--mid);text-align:center}
/* Refused: the zone dims and says why inside itself (GH-406). */
.gch-m-jobs .nj-zone[data-blocked] .nj-drop{border-style:solid;border-color:var(--line2);justify-content:flex-start;padding-top:var(--s6)}
.gch-m-jobs .nj-zone[data-blocked] .nj-drop > *{opacity:.4}
.gch-m-jobs .nj-zone[data-blocked] .nj-sym{stroke:var(--mid)}
.gch-m-jobs .nj-zone[data-blocked] .nj-choose{display:none}
.gch-m-jobs .nj-blocked{position:absolute;left:0;right:0;bottom:var(--s6);display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:0 var(--s6);text-align:center}
.gch-m-jobs .nj-blocked p:first-child{max-width:46ch;font-size:14px;font-weight:600;color:var(--ink)}
.gch-m-jobs .nj-frozen{margin-top:var(--s3);font-size:13.5px;color:var(--ink2)}
.gch-m-jobs .nj-frozen a{color:var(--o-txt);font-weight:600}
/* DEV-345: Job number and Division above Job details, always in view. */
.gch-m-jobs .nj-top{margin-top:var(--s6)}
.gch-m-jobs .nj-divtag{display:flex;align-items:center;gap:6px;min-height:36px;font-size:13.5px;color:var(--mid)}
.gch-m-jobs .nj-divchg{padding:0;background:none;border:0;font:inherit;color:var(--ink2);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.gch-m-jobs .nj-divchg:hover{color:var(--ink)}
.gch-m-jobs .nj-details{margin-top:var(--s4);border-top:1px solid var(--line)}
.gch-m-jobs .nj-details > summary{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) 0;font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.gch-m-jobs .nj-details > summary::-webkit-details-marker{display:none}
.gch-m-jobs .nj-details > summary::before{content:"+";width:12px;color:var(--mid);font-weight:500}
.gch-m-jobs .nj-details[open] > summary::before{content:"\2212"}
.gch-m-jobs .nj-details > summary .mid{font-size:13px;font-weight:400}
.gch-m-jobs .nj-form{padding:var(--s2) 0 var(--s3)}
.gch-m-jobs .nj-custody{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.gch-m-jobs .nj-dstat{font-size:13px;color:var(--mid)}
.gch-m-jobs .nj-dstat:empty{display:none}
.gch-m-jobs .nj-docs{padding:var(--s4);background:var(--bg2);border:1px solid var(--line)}
.gch-m-jobs .nj-acts{display:flex;justify-content:flex-end;padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.gch-m-jobs .nj-acts .btn{min-width:188px;min-height:36px}
.gch-m-jobs .nj-files{list-style:none;margin:0;padding:0}
.gch-m-jobs .nj-files:empty::before{content:"No documents yet. Drop PDFs on the zone, or click it to choose them.";display:block;padding:var(--s4) 0;font-size:13.5px;color:var(--mid)}
.gch-m-jobs .nj-file{display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:center;gap:2px var(--s2);min-height:44px;padding:6px 0;border-bottom:1px solid var(--line)}
.gch-m-jobs .nj-fi{display:flex;align-items:baseline;gap:var(--s3);min-width:0}
.gch-m-jobs .nj-fi .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.gch-m-jobs .nj-fi .sz{flex:none;font-size:12.5px;color:var(--mid);font-variant-numeric:tabular-nums}
.gch-m-jobs .nj-fi .st{flex:none;font-size:12.5px;font-weight:600;color:var(--ok)}
.gch-m-jobs .nj-file.is-bad .st{color:var(--danger)}
.gch-m-jobs .nj-file.is-pending .st{color:var(--mid);font-weight:500}
.gch-m-jobs .nj-rm{width:32px;height:32px;padding:0;background:none;border:1px solid transparent;color:var(--mid);font-size:18px;line-height:1;cursor:pointer}
.gch-m-jobs .nj-rm:hover{border-color:var(--edge);color:var(--ink)}
.gch-m-jobs .nj-ferr{grid-column:1 / -1;font-size:12.5px;color:var(--danger)}
.gch-m-jobs .nj-err{margin-top:var(--s3);font-size:13.5px;font-weight:600;color:var(--danger)}
.gch-m-jobs .nj-prog{margin-top:var(--s3)}
.gch-m-jobs .nj-prog .bar{position:relative;display:block;height:4px;background:var(--tag-bg)}
.gch-m-jobs .nj-prog i{position:absolute;left:0;top:0;bottom:0;background:var(--o);transition:width .15s linear}
.gch-m-jobs .nj-status{margin-top:var(--s2);min-height:1.4em;font-size:13.5px;color:var(--ink2)}
.gch-m-jobs .nj-recover{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.gch-m-jobs .nj-msg{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);padding:var(--s6) 0;font-size:14.5px}
@container gchmain (max-width:980px){
  .gch-m-jobs .nj-work{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .gch-m-jobs .nj-drop{min-height:210px}
}
@container gchmain (max-width:600px){
  .gch-m-jobs .nj-head{gap:var(--s2)}
  .gch-m-jobs .nj-head h1{font-size:20px}
  .gch-m-jobs .nj-allow{margin-left:0}
  .gch-m-jobs .nj-drop{min-height:180px;padding:var(--s6) var(--s4)}
  .gch-m-jobs .nj-zone[data-blocked] .nj-drop{min-height:250px}
  .gch-m-jobs .nj-acts .btn{width:100%}
  .gch-m-jobs .nj-fi .sz{display:none}
  .gch-m-jobs .jb-drafts a{flex-wrap:wrap;gap:2px var(--s2);padding:8px var(--s3)}
  .gch-m-jobs .jb-drafts b{flex:1 1 calc(100% - 32px)}
  .gch-m-jobs .jb-drafts .mid{padding-left:24px}
}

/* ================================================================== B5: global shell items (js/shell.js)
   Kept here because shell.js has no stylesheet of its own; every selector below is shell-level. */
.gch-beta{flex:none;display:flex;align-items:center;justify-content:center;gap:var(--s2);min-height:30px;padding:3px var(--s4);background:var(--flag-bg);border-bottom:1px solid var(--line2);font-size:13px;color:var(--ink2);text-align:center}
.gch-beta i{flex:none;width:6px;height:6px;background:var(--o)}
.gch-beta b{color:var(--ink);font-weight:600}
.gch-beta-x{flex:none;margin-left:var(--s3);padding:2px 8px;background:none;border:1px solid transparent;color:var(--ink2);font:inherit;font-size:12.5px;cursor:pointer}
.gch-beta-x:hover{border-color:var(--edge);color:var(--ink)}
.gch-toast{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s2);align-items:start}
.gch-toast > span{grid-column:1}
.gch-toast-note{grid-column:1;margin-top:2px;font-size:12.5px;color:var(--mid)}
.gch-toast-x{grid-column:2;grid-row:1 / span 2;display:inline-grid;place-items:center;width:26px;height:26px;margin:-4px -8px -4px 0;padding:0;background:none;border:1px solid transparent;color:var(--mid);cursor:pointer}
.gch-toast-x:hover{border-color:var(--edge);color:var(--ink)}
.gch-toast-x .i{width:14px;height:14px}
.gch-save{position:fixed;right:var(--gut);bottom:48px;z-index:90;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ok);pointer-events:none}
.gch-save svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gch-save[data-state=saving] circle{stroke-dasharray:30 14;transform-box:fill-box;transform-origin:center;animation:gch-save-spin .7s linear infinite}
.gch-save[data-state=saving] path{display:none}
.gch-save[data-state=saved]{animation:gch-save-fade 1.2s ease-out both}
.gch-save[data-state=saved] circle{opacity:.35}
@keyframes gch-save-spin{to{transform:rotate(360deg)}}
@keyframes gch-save-fade{0%,20%{opacity:1}100%{opacity:0}}
.gch-nf-page{align-items:flex-start}
.gch-nf{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);max-width:640px;padding:var(--s12) var(--gut)}
.gch-nf h1{font-family:var(--disp);font-size:24px;font-weight:700;letter-spacing:-.01em}
.gch-nf p{font-size:14.5px;color:var(--ink2)}
.gch-acct .acct-out{white-space:nowrap}
.acct-ctx{display:block;margin-top:var(--s3);padding:var(--s2) var(--s3);background:var(--bg3);font-size:13px;color:var(--ink2);line-height:1.5;overflow-wrap:anywhere}
.acct-ctx b{font-weight:600;color:var(--ink)}
.acct-ack{display:grid;grid-template-columns:auto 1fr;gap:8px var(--s4);margin:var(--s4) 0 0}
.acct-ack div{display:contents}
.acct-ack dt{font-size:13px;color:var(--mid)}
.acct-ack dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.pb-web{text-decoration:none}
@media (max-width:759px){
  .gch-beta{justify-content:flex-start;text-align:left;font-size:12px;padding:3px var(--s3)}
  .gch-beta-more{display:none}
  .gch-beta-x{margin-left:auto}
  .gch-save{bottom:100px}
}
.gch-m-jobs .nj-acts .btn-p[disabled]{background:transparent;border-color:var(--line2);color:var(--mid);opacity:1;filter:none}
/* The public demo's New job (DEV-343): what Create job needs, and the way to an account. */
.gch-m-jobs .nj-demo{max-width:64ch}
.gch-m-jobs .nj-demo h2{font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:-.01em}
.gch-m-jobs .nj-demo p{line-height:1.5;color:var(--ink2)}
.gch-m-jobs .nj-demo-acts{display:flex;flex-wrap:wrap;gap:var(--s3)}