/* `.late` IS THE TAB STRIP'S RED COUNT (shell.css), and nothing else in the app draws that bubble.
   Inside the page, a window or the band it is only a marker - a late date, a late card - and
   inheriting the bubble stretched a pill round the dates in Working to and Expected finish.
   :where() keeps this at the plain class's weight, and it stands FIRST in this file, so every
   rule after it - a chip's rounded shape and padding, a card's own - wins over it. Placed
   last, it flattened the Late chip into a square (PJ, 28 September 2026). */
:where(#app, #modal, #subbar) .late{font-size:inherit;font-weight:inherit;border-radius:0;padding:0;background:none;color:inherit}

/* ============================================================================
   The Starter tracker (Procurement & Logistics > Tracker). Its own file so that
   taking the starter out is deleting files rather than editing shared ones.
   Everything here builds on shell.css: .mwrap, .phead, .card.tbl, .mtb, .bnd.
   ========================================================================== */

/* ---- the word beside the tab name ------------------------------------- */
.tbadge{font-size:8.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
 padding:1px 6px 1px;border-radius:999px;line-height:1.5;flex:none;align-self:flex-start;
 margin:-5px 0 0 -3px;background:var(--gold-light);color:var(--goldtxt);
 border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
body.dark .tbadge{background:#4a3c17;color:#f0cd77;border-color:#6b5621}

/* ---- the explorer, the Tracker pill's left column ------------------------ */
/* Inside the page, beside the table and under the pill menu, so the tabs, the bar and
   the pills keep their full width and never move. The page does not scroll; the
   explorer and the table each scroll on their own. */
#app:has(.trklay){overflow:hidden;display:flex;flex-direction:column}
.trklay{flex:1;min-height:0;display:flex;gap:14px;margin-top:-11px}
.trklay>.mwrap{flex:1;min-width:0;min-height:0;margin-top:0}
.card.trtree{flex:none;width:244px;padding:0;display:flex;flex-direction:column;min-height:0;
 overflow:hidden;background:var(--bg)}
.trtree.shut{flex:none;width:48px;display:flex;flex-direction:column;align-items:center;gap:4px;
 padding:4px 0 8px;border:1px solid var(--line);border-radius:12px;overflow-y:auto}
.trsdiv{width:24px;height:1px;background:var(--line);margin:3px 0 2px;flex:none}
/* shut: one mark per project, its short name under it */
.trsp{display:flex;flex-direction:column;align-items:center;gap:2px;width:40px;padding:5px 0 4px;flex:none;
 border:1px solid transparent;border-radius:8px;background:none;color:var(--faint);cursor:pointer;font-family:inherit}
.trsp span{font-size:8.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);max-width:38px;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trsp:hover{background:var(--exbg)}
.trsp:hover svg{color:var(--gold)}
.trsp.on{background:var(--gold-light);border-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.trsp.on svg,.trsp.on span{color:var(--goldtxt)}
body.dark .trsp.on{background:#3d3219;border-color:#5a4a22}
.trhead{display:flex;align-items:center;padding:8px 6px 2px 8px;flex:none}
.trlbl{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:6px 9px 4px 4px;white-space:nowrap}
.trx{margin-left:auto;display:inline-flex;border:none;background:none;color:var(--faint);
 padding:4px;border-radius:6px;cursor:pointer;transform:rotate(90deg)}
.trx:hover{color:var(--gold);background:var(--exbg)}
.trbody{flex:1;min-height:0;overflow-y:auto;padding:2px 8px 12px}
.trrow{display:flex;align-items:center;gap:7px;height:29px;padding:0 8px 0 4px;border-radius:7px;
 border:1px solid transparent;cursor:pointer;color:var(--muted);min-width:0}
.trrow svg{flex:none;color:var(--faint)}
.trrow .trt{font-size:12px;color:var(--txt);min-width:0;flex:1;white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis}
.trrow.l1{padding-left:18px}
.trrow.l2{padding-left:32px;height:27px}
.trrow.l2 .trt{font-size:11.5px;color:var(--muted)}
.trrow.l0 .trt{font-weight:600}
.trrow:hover{background:var(--exbg)}
.trrow:hover svg{color:var(--gold)}
.trrow.on{background:var(--gold-light);border-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.trrow.on svg{color:var(--goldtxt)}
.trrow.on .trt{color:var(--goldtxt);font-weight:600}
body.dark .trrow.on{background:#3d3219;border-color:#5a4a22}
.trn{font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums;flex:none}
.trtog,.trtog0{flex:none;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}
.trtog{border:none;background:none;padding:0;color:var(--faint);cursor:pointer;border-radius:4px;
 transform:rotate(-90deg);transition:transform .12s}
.trtog.open{transform:none}
.trtog:hover{color:var(--gold)}
.trone{width:32px;height:32px;justify-content:center;padding:0}
/* a row's own actions - add the next thing down, edit this one - appear on hover, and
   stay on the selected row so the obvious next step is always visible */
.trac{display:none;align-items:center;gap:1px;flex:none;margin-right:-4px}
.trrow:hover .trac,.trrow.on .trac{display:inline-flex}
.trrow:hover .trn,.trrow.on .trn{display:none}
.trab{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;
 border:none;background:none;color:var(--faint);border-radius:5px;cursor:pointer}
.trab:hover{color:var(--goldtxt);background:var(--bg);box-shadow:0 0 0 1px var(--line2)}
.trhead .trnew{margin-left:auto}
/* THE ONE TOGGLE, in both states. Selected (gold) while the explorer is open, plain while
   it is shut - it was a <button> that never cleared the browser's own grey fill, so it
   read as selected all the time. */
.trtgl{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;padding:0;flex:none;
 border:1px solid transparent;border-radius:7px;background:none;color:var(--faint);cursor:pointer}
.trtgl:hover{color:var(--gold);background:var(--exbg)}
.trtgl.on{color:var(--goldtxt);background:var(--gold-light);border-color:color-mix(in srgb,var(--gold) 35%,transparent)}
body.dark .trtgl.on{background:#3d3219;border-color:#5a4a22}
.trhead .trtgl{margin-left:auto}
.trhead .trnew+.trtgl{margin-left:4px}
.trnone{font-size:11.5px;color:var(--faint);padding:6px 8px}
/* where the explorer has you, at the head of the page */
.trcrumb{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);
 min-width:0;flex-wrap:wrap}
.trcrumb b{color:var(--txt)}
.trcl{font:inherit;color:var(--muted);background:none;border:none;padding:1px 3px;margin:0 -3px;
 border-radius:5px;cursor:pointer}
.trcl:hover{color:var(--goldtxt);background:var(--gold-light);text-decoration:underline;
 text-underline-offset:2px}
body.dark .trcl:hover{background:#3d3219}
.trcrumb .sep{display:inline-flex;color:var(--faint);transform:rotate(-90deg)}
.trcrumb+.pcount{margin-left:6px}

/* ---- the register ------------------------------------------------------ */
/* It scrolls inside its own card, both ways, so the heading and the first two
   columns can stay put the way the frozen panes do in the workbook. */
/* The card takes exactly the height that is left, rather than a guessed max-height:
   a guess that ran 34px over let the PAGE scroll too, so the wheel moved the window
   and the table's own sideways scrollbar sat below the screen. On this page #app
   does not scroll at all; the card is the only thing that does. */
#app:has(.trkfill){overflow:hidden;display:flex;flex-direction:column}
#app:has(.trkfill)>.statestrip{flex:none}
.mwrap.trkfill{flex:1;min-height:0;display:flex;flex-direction:column}
.mwrap.trkfill>.phead{flex:none}
/* `.card.tbl` sets overflow:hidden with overflow-x:auto and outranks a lone class, so
   this is written at the same weight: without it the card scrolled sideways and
   ignored the wheel up and down. */
.card.tbl.trkwrap{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.mtb.trk{width:max-content;min-width:100%}
.mtb.trk th{position:sticky;top:0;z-index:2;white-space:normal;vertical-align:bottom}
.mtb.trk td{white-space:nowrap;vertical-align:middle;text-align:left}
.mtb.trk td.n{text-align:right}
/* THE STICKY COLUMNS WEAR THE TABLE'S OWN COLOUR. PJ, 29 September 2026: "why is the table colour fill
   different across headers to that of the table?" The rows are transparent over the card, so the
   sticky ID and Item cells take the card colour, and every heading does too. WAS: the sticky cells
   in the page colour and the other headings in it as well, so both showed as a block of their own. */
.mtb.trk .tc0,.mtb.trk .tc1{position:sticky;background:var(--card);z-index:1}
.mtb.trk thead th{background:var(--card)}
.mtb.trk th.tc0,.mtb.trk th.tc1{z-index:3;background:var(--card)}
.mtb.trk .tc0{left:0;min-width:96px;width:96px}
.mtb.trk .tc1{left:96px;min-width:250px;max-width:320px;overflow:hidden;text-overflow:ellipsis;
 box-shadow:inset -1px 0 0 var(--line)}
.mtb.trk tbody tr:hover .tc0,.mtb.trk tbody tr:hover .tc1{background:var(--exbg)}
.mtb.trk tr.pkg .nm{font-weight:400}
.mtb.trk tr.sub .nm{padding-left:26px;color:var(--txt)}
.mtb.trk tr.bnd td{position:sticky;left:0}
/* a package, inside its sub-work's band */
.mtb.trk tr.bnd.pk td{padding-left:26px;color:var(--goldtxt);background:color-mix(in srgb,var(--gold-light) 55%,var(--bg))}
body.dark .mtb.trk tr.bnd.pk td{background:#2e2716}
.mtb.trk .dt{font-variant-numeric:tabular-nums;color:var(--muted);min-width:78px}
.mtb.trk .dt.late{color:var(--today);}
.mtb.trk .n{min-width:64px}
.mtb.trk .cm{max-width:260px;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.mtb.trk .mono{min-width:0}
.mtb.trk td.tcstage{min-width:300px}
.xl{color:var(--faint);font-style:normal}

/* Status: whether the item is in trouble */
.tst{display:inline-block;font-size:10.5px;font-weight:600;border-radius:5px;padding:1px 7px;white-space:nowrap}
.tst.ok{color:var(--ok-tx);background:var(--sg-green)}
.tst.late{color:var(--today);background:color-mix(in srgb,var(--today) 13%,var(--bg))}
.tst.done{color:var(--info);background:var(--sg-blue)}
.tst.none{color:var(--faint);background:none;font-weight:400;padding-left:0}
/* waiting on somebody else - an approval (F-286) - in the gold the approval chip waits in */
.tst.wait{color:var(--goldtxt);background:var(--gold-light)}
body.dark .tst.wait{background:#3d3219}
/* overall progress, a bar and the number */
.tpg{display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums;color:var(--muted);font-size:11.5px}
.tpgb{display:block;width:64px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.tpgb i{display:block;height:100%;background:var(--ok-tx);opacity:.8}
.mtb.trk td.tcprog{min-width:120px}

/* a filter on every heading, like a pivot table: the mark, and the list it opens */
.thf{display:inline-flex;align-items:center;gap:5px}
.tfbtn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;
 border:none;border-radius:4px;background:none;color:var(--faint);opacity:.55;cursor:pointer}
.mtb.trk th:hover .tfbtn{opacity:1}
.tfbtn:hover{color:var(--gold);background:var(--exbg);opacity:1}
.tfbtn.on{color:var(--bg);background:var(--gold);opacity:1}
.tfbtn.open{box-shadow:0 0 0 1px var(--gold)}
.tcfm{position:fixed;z-index:60;min-width:220px;max-width:320px;padding:6px;background:var(--bg);
 border:1px solid var(--line2);border-radius:10px;box-shadow:0 12px 30px rgba(10,9,8,.18);
 display:flex;flex-direction:column;font-size:12px;letter-spacing:0;text-transform:none}
.tcfh{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:4px 8px 2px}
.tcfl{max-height:280px;overflow-y:auto;border-top:1px solid var(--line);margin-top:2px;padding-top:2px}
.tcfm .tcoli .trn{margin-left:auto;padding-left:10px}
.tcoli.all{font-weight:600}
.tfclear{font:inherit;font-size:11px;color:var(--goldtxt);background:var(--gold-light);border:1px solid
 color-mix(in srgb,var(--gold) 40%,transparent);border-radius:999px;padding:4px 11px;cursor:pointer}
body.dark .tfclear{background:#3d3219}

/* a column's right edge, to drag */
.mtb.trk th{position:sticky}
.trs{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:4}
.trs:hover,body.trsz .trs{background:linear-gradient(to right,transparent 3px,var(--gold) 3px,var(--gold) 4px,transparent 4px)}
body.trsz,body.trsz *{cursor:col-resize !important;user-select:none}
.mtb.trk td.nm{overflow:hidden;text-overflow:ellipsis}

/* items waiting on payments */
.twp{font:inherit;font-size:11px;color:var(--info);background:var(--sg-blue);border:1px solid
 color-mix(in srgb,var(--info) 30%,transparent);border-radius:999px;padding:4px 11px;cursor:pointer}
.twp.on{color:var(--txt);background:var(--bg);border-color:var(--line2)}
.twpnote{font-size:11px;color:var(--info)}

/* an item's importance, and why a payment has its priority */
.tim{display:inline-block;font-size:10px;font-weight:600;border-radius:4px;padding:0 6px;white-space:nowrap}
.tim.cp{color:#fff;background:var(--today)}
.tim.hi{color:var(--goldtxt);background:var(--gold-light)}
.mtb.tpay td.why{color:var(--muted);font-size:11.5px;white-space:normal;min-width:200px;max-width:320px}

/* an item's payments, one mark each */
.tpm{display:inline-block;font-size:10px;font-weight:600;border-radius:4px;padding:0 6px;margin-right:3px;white-space:nowrap}
.tpm.paid{color:var(--ok-tx);background:var(--sg-green)}
.tpm.due{color:var(--today);background:color-mix(in srgb,var(--today) 13%,var(--bg))}
.tpm.sch{color:var(--muted);background:var(--exbg)}
.tpm.acc{color:var(--info);background:var(--sg-blue)}

/* the payment list */
.tpr{display:inline-block;font-size:10.5px;font-weight:600;border-radius:5px;padding:1px 7px;white-space:nowrap}
.tpr.crit{color:#fff;background:var(--today)}
.tpr.now{color:var(--today);background:color-mix(in srgb,var(--today) 13%,var(--bg))}
.tpr.soon{color:var(--goldtxt);background:var(--gold-light)}
.tpr.sched{color:var(--muted);background:var(--exbg)}
.tpr.paid{color:var(--ok-tx);background:var(--sg-green)}
body.dark .tpr.soon{background:#3d3219}
.tbk{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);
 border-radius:4px;padding:0 4px;margin-left:4px}
.treach{display:inline-flex;align-items:center;gap:4px;color:var(--ok-tx)}
.mtb.tpay tr.paidrow td{color:var(--faint)}
.mtb.tpay td{white-space:nowrap}

/* the Columns menu in the band */
.tcolw{position:relative;display:inline-flex}
.tcolbtn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit}
.tcolbtn.on{border-color:var(--gold)}
.tcolm{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;padding:6px;
 background:var(--bg);border:1px solid var(--line2);border-radius:10px;box-shadow:0 12px 30px rgba(10,9,8,.18);
 display:flex;flex-direction:column}
.tcoli{display:flex;align-items:center;gap:9px;font-size:12px;padding:5px 8px;border-radius:6px;cursor:pointer;color:var(--txt)}
.tcoli:hover{background:var(--exbg)}
.tcoli.lock{color:var(--faint);cursor:default}
.tcoli input{accent-color:var(--gold);margin:0}
.tcolr{margin-top:4px;border:none;border-top:1px solid var(--line);background:none;font:inherit;font-size:11px;
 color:var(--muted);padding:7px 8px 3px;text-align:left;cursor:pointer}
.tcolr:hover{color:var(--goldtxt)}

/* where an item is along its gates: one mark per gate, beside the Stage choice */
.tstg{display:inline-flex;align-items:center;gap:8px}
.tgt{display:inline-flex;align-items:center;gap:2px;flex:none}
.tgt i{display:block;width:7px;height:10px;border-radius:2px;background:var(--line2)}
.tgt i.d{background:var(--ok-tx);opacity:.75}
.tgt i.c{background:var(--gold);width:12px}
.tgt i.l{background:var(--today);width:12px}
.tgt.none{width:0}

/* the two choices made in the table itself */
.tsel{font-family:inherit;font-size:11.5px;color:var(--txt);background:transparent;
 border:1px solid transparent;border-radius:6px;padding:2px 4px;cursor:pointer;max-width:190px}
.tsel:hover,.tsel:focus{border-color:var(--line2);background:var(--bg);outline:none}
.tsel.ph{color:var(--faint)}
body.dark .tsel option{background:var(--card);color:var(--txt)}

/* ---- payment status: the workbook's own colours ------------------------ */
.tpay{display:inline-block;font-size:10.5px;font-weight:600;border-radius:5px;padding:1px 7px;
 border:1px solid transparent;white-space:nowrap}
select.tpay{padding:2px 4px}
select.tpay.ph{font-weight:400}
.tpay.rfq {color:#60497A;background:#E4DFEC}
.tpay.eng {color:#1F4E79;background:#DDEBF7}
.tpay.cred{color:#3F3F3F;background:#D9D9D9}
.tpay.np  {color:#C00000;background:#F8D7DA}
.tpay.dp  {color:#7F6000;background:#FFE699}
.tpay.msd {color:#1F6F6F;background:#DAEEF3}
.tpay.msp {color:#1E7145;background:#D9F2E3}
.tpay.paid{color:#375623;background:#E2EFDA}
.tpay.lco {color:#C55A11;background:#FCE4D6}
.tpay.lcs {color:#7F6000;background:#FFF2CC}
.tpay.lch {color:#375623;background:#C6E0B4}
body.dark .tpay.rfq {color:#cdb8e6;background:#3b3148}
body.dark .tpay.eng {color:#a9c8ea;background:#243a52}
body.dark .tpay.cred{color:#d4d1ca;background:#3d3b37}
body.dark .tpay.np  {color:#f0a09a;background:#4d2624}
body.dark .tpay.dp  {color:#f0cd77;background:#4d3f17}
body.dark .tpay.msd {color:#9fd6d6;background:#1f4040}
body.dark .tpay.msp {color:#9fdcb8;background:#1f4030}
body.dark .tpay.paid{color:#c2dd9c;background:#34432a}
body.dark .tpay.lco {color:#f2b58a;background:#4d3020}
body.dark .tpay.lcs {color:#ead9a0;background:#443b22}
body.dark .tpay.lch {color:#b9dc98;background:#2f4a24}

/* ---- gates and suppliers ------------------------------------------------ */
.mtb.trkg .nm,.mtb.trks .nm{font-weight:400}
.mtb.trkg .cm,.mtb.trks .cm{color:var(--muted);max-width:340px}
.mtb.trkg .act,.mtb.trks .act{white-space:nowrap;width:96px}
.mtb.trkg .ico[disabled]{opacity:.15;cursor:default}
.mtb.trkg .up{display:inline-flex;transform:rotate(180deg)}
.tsst{font-size:10.5px;font-weight:600;border-radius:5px;padding:1px 7px}
.tsst.approved{color:var(--ok-tx);background:var(--sg-green)}
.tsst.prospect{color:var(--info);background:var(--sg-blue)}
.tsst.onhold{color:var(--today);background:color-mix(in srgb,var(--today) 14%,var(--bg))}

/* ---- the windows ---------------------------------------------------------- */
.trkwin .mgrp+.mgrp{margin-top:14px}
.trkwin .mgrp[hidden]{display:none}
.trkwin textarea.etx{resize:vertical;font-family:inherit}
.trkwin .trnewarea{margin-top:6px}
.trkwin select option.pk{color:var(--muted)}
.mtb.trksteps td{padding:3px 4px}
.mtb.trksteps .etx{font-size:11.5px;padding:4px 6px;min-width:0;width:100%}
.mtb.trksteps td:nth-child(1){width:74px}
.mtb.trksteps td:nth-child(2){min-width:170px}
.mtb.trksteps td:nth-child(3){min-width:150px}
.mtb.trksteps td:nth-child(6){width:70px}

/* ---- one height for the pill bar on every tracker tab ---------------------
   PJ, 28 September 2026: "the height of the pull menu section differs between procurement
   tracker, payment tracker, and again, logistics tracker... it should be the same across all
   tabs." It took the height of whatever was in it - 42px with a drop-down or a search, less
   with a line of text - so it jumped as the tabs and pills changed. It is 42px, the tallest,
   on every tracker page, whatever it holds. */
#main:has(.trklay, .mtb.trkg, .mtb.trks, .mtb.tpay, .pd) #subbar{height:42px;min-height:42px;max-height:42px;
 box-sizing:border-box;align-items:center}


/* ---- documents: a paperclip on each gate, and the list it opens ---- */
.tdocb{display:inline-flex;align-items:center;gap:3px;border:1px solid transparent;border-radius:6px;background:none;
 color:var(--faint);padding:2px 5px;cursor:pointer;font:inherit;font-size:10.5px}
.tdocb:hover{color:var(--gold);background:var(--exbg)}
.tdocb.has{color:var(--info)}
.tdocb.open{border-color:var(--gold);color:var(--goldtxt)}
.mtb.trkgl tr.tdocr td{background:var(--card);padding:6px 10px 8px}
.tdocp{display:flex;flex-direction:column;gap:4px}
.tdoc{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.tdoc svg{color:var(--info);flex:none}
.tdoc .tdt{font-size:10px;font-weight:600;color:var(--info);background:var(--sg-blue);border-radius:4px;padding:0 6px;white-space:nowrap}
.tdoc .trcl{color:var(--txt)}
.tdoc .tdm{color:var(--faint);font-size:10.5px;margin-left:auto;white-space:nowrap}
.tdoc.gone{opacity:.55}
.tdoc.gone .trcl{text-decoration:line-through}
.tdadd{display:flex;align-items:center;gap:8px;margin-top:4px}
.tdadd .vsel{max-width:200px;font-size:11px}
.tdbtn{cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:11px}
.tdc{display:inline-flex;align-items:center;gap:3px;color:var(--info);font-size:11px}
.mtb.trk td.tcdocs{min-width:56px}

/* ---- approvals ---- */
.tapc{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;border-radius:4px;padding:0 6px;white-space:nowrap;
 color:var(--muted);background:var(--exbg)}
.tapc.pending{color:var(--goldtxt);background:var(--gold-light)}
.tapc.approved{color:var(--ok-tx);background:var(--sg-green)}
.tapc.rejected{color:var(--today);background:color-mix(in srgb,var(--today) 13%,var(--bg))}
body.dark .tapc.pending{background:#3d3219}
.tappanel{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:2px 0 8px;background:var(--bg)}
.tapt{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--txt);margin-bottom:6px}
.tapt svg{color:var(--gold)}
.tapsub{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.tapsub .etx{font-size:11.5px}
.tapsub .btn{align-self:flex-start}
.tapwho{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:11px;color:var(--muted)}
.tapwho .tchk{font-size:11.5px}
.tapr{border-top:1px solid var(--line);padding:6px 0 2px;font-size:11px;color:var(--muted)}
.taph{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.taph b{color:var(--txt);font-weight:600}
.tapa{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.tapp{font-size:10px;border-radius:4px;padding:0 6px;white-space:nowrap;background:var(--exbg);color:var(--muted);margin-right:3px}
.tapp.approved{color:var(--ok-tx);background:var(--sg-green)}
.tapp.rejected{color:var(--today);background:color-mix(in srgb,var(--today) 13%,var(--bg))}
.tapn{font-size:11px;color:var(--txt);margin:2px 0}
.tapd{font-size:10.5px;color:var(--faint)}
.tapw{font:inherit;font-size:11px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:none;color:#fff;background:var(--today);
 border:none;border-radius:999px;padding:4px 11px;cursor:pointer}
.tro{font-size:12px;color:var(--txt);padding:5px 0}

/* ---- the Dashboard (pdash.js): projects, four numbers, four panels - one screen ---- */
#app:has(.pd){overflow:auto}
.trklay .pdside{flex:1;min-width:0;overflow:auto}
.pd{display:flex;flex-direction:column;gap:10px}
/* the projects, as the band's pull menu */
.pdpjs{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
.pdpj{font:inherit;flex:0 0 auto;display:flex;align-items:center;gap:6px;max-width:240px;background:var(--bg);border:1px solid var(--line);
 border-radius:999px;padding:2px 10px 2px 3px;height:28px;box-sizing:border-box;cursor:pointer;color:var(--txt)}
.pdpj b{font-size:9.5px;font-weight:600;letter-spacing:.04em;background:var(--exbg);color:var(--muted);border-radius:999px;padding:3px 7px}
.pdpj span{font-size:11.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdpj em{font-style:normal;font-size:10.5px;color:var(--faint);display:inline-flex;white-space:nowrap}
.pdpj em.bad{color:var(--today);font-weight:600} .pdpj em.good{color:var(--ok-tx)}
.pdpj:hover{border-color:var(--gold)}
.pdpj.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--bg))}
.pdpj.on b{background:var(--gold);color:#fff}
.pdkpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:900px){.pdkpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pdk{font:inherit;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:9px 14px 10px;cursor:pointer;
 display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;color:var(--txt);
 border-left:4px solid var(--line2);transition:border-color .12s,background .12s}
.pdk span{grid-column:1 / -1;font-size:11.5px;color:var(--muted)}
.pdk b{font-size:26px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.pdk i{font-style:normal;font-size:10.5px;color:var(--faint);min-width:0}
.pdk:hover{background:var(--exbg)}
.pdk.bad{border-left-color:var(--today)} .pdk.bad b{color:var(--today)}
.pdk.warn{border-left-color:var(--gold)} .pdk.warn b{color:var(--goldtxt)}
.pdk.good{border-left-color:var(--ok-tx)}
.pdk.on{background:color-mix(in srgb,var(--gold) 12%,var(--bg));border-color:var(--gold);border-left-width:4px}
.pdgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a a d" "b c d";gap:10px;align-items:stretch}
@media (max-width:1100px){.pdgrid{grid-template-columns:1fr;grid-template-areas:"a" "d" "b" "c"}}
.pdp{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;min-width:0;min-height:0}
.pdp.a{grid-area:a} .pdp.b{grid-area:b} .pdp.c{grid-area:c}
/* the list takes the height the other panels make, and scrolls inside it, rather than making the page taller */
.pdp.d{grid-area:d;contain:size}
@media (max-width:1100px){.pdp.d{contain:none;max-height:520px}}
.pdp-h{display:flex;align-items:baseline;gap:8px;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.pdp-h em,.pdp-h i{font-style:normal;letter-spacing:0;text-transform:none;font-size:10.5px;margin-left:auto}
.pdp-h em{background:var(--exbg);color:var(--muted);border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums}
.pdp-b{flex:1;min-height:0;display:flex;flex-direction:column}
.pdp.d .pdp-b{overflow:hidden}
.pdsvg{width:100%;height:auto;display:block}
.pdg{stroke:var(--line);stroke-width:1}
.pdt{font-size:10px;fill:var(--faint);font-family:inherit}
.pdt.n{font-size:11px;fill:var(--muted);font-weight:600}
.pdt.bad{fill:var(--today);font-weight:600}
/* the S-curve */
/* THE S-CURVE'S COLOURS. PJ, 28 September 2026: "have a look at that colour scheme... both the
   light and the dark... it would be nice." The plan is a cool slate with a faint wash under it,
   so it reads as a shape to be measured against; what is done is Alensy gold, deepening towards
   today over a warm wash; today's point breathes. Each colour is set twice, once per theme. */
.pdcurve{--pd-plan:#8193ad;--pd-planw:.10;--pd-g0:#e4c77c;--pd-g1:#b8892b;--pd-wash:.30;--pd-grid:rgba(0,0,0,.07);--pd-lab:#fff}
body.dark .pdcurve{--pd-plan:#8ea4c6;--pd-planw:.14;--pd-g0:#b8923f;--pd-g1:#f0cf7a;--pd-wash:.24;--pd-grid:rgba(255,255,255,.07);--pd-lab:var(--card)}
.pdcurve .pdg{stroke:var(--pd-grid)}
.pdg.soft{stroke-dasharray:2 5}
.pdtoday{stroke:var(--muted);stroke-width:1;opacity:.3}
.pdt.today{font-size:8.5px;letter-spacing:.14em;fill:var(--muted)}
.pdparea{fill:url(#pdwashp)}
.pdp0{stop-color:var(--pd-plan);stop-opacity:var(--pd-planw)} .pdp1{stop-color:var(--pd-plan);stop-opacity:0}
.pdplan{fill:none;stroke:var(--pd-plan);stroke-width:1.7;stroke-dasharray:5 5;stroke-linecap:round;opacity:.9}
.pdarea{fill:url(#pdwash)}
.pdw0{stop-color:var(--pd-g1);stop-opacity:var(--pd-wash)} .pdw1{stop-color:var(--pd-g1);stop-opacity:0}
.pdl0{stop-color:var(--pd-g0)} .pdl1{stop-color:var(--pd-g1)}
.pdact{fill:none;stroke:url(#pdline);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pddot{fill:var(--pd-g1);stroke:var(--bg);stroke-width:2.2}
.pdhalo{fill:var(--pd-g1);opacity:.18;transform-box:fill-box;transform-origin:center;animation:pdbreathe 2.8s ease-in-out infinite}
@keyframes pdbreathe{0%,100%{transform:scale(.8);opacity:.22}50%{transform:scale(1.35);opacity:.06}}
@media (prefers-reduced-motion:reduce){.pdhalo{animation:none}}
.pdpdot{fill:var(--bg);stroke:var(--pd-plan);stroke-width:1.8}
.pdlab rect{fill:var(--pd-lab);stroke:var(--line);filter:drop-shadow(0 3px 8px rgba(0,0,0,.10))}
.pdlab-a{font-size:13px;font-weight:600;fill:var(--goldtxt);font-family:inherit}
.pdlab-b{font-size:10px;fill:var(--muted);font-family:inherit} .pdlab-b.bad{fill:var(--today)} .pdlab-b.good{fill:var(--ok-tx)}
.pdhov{fill:transparent} .pdhov:hover{fill:color-mix(in srgb,var(--gold) 7%,transparent)}
.pdleg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-bottom:2px}
.pdleg .pl,.pdleg .ac,.pdleg .un{display:inline-block;width:16px;height:0;border-top:2px dashed #8193ad;margin-left:6px}
.pdleg .pl{margin-left:0}
.pdleg .ac{border-top:3px solid #c99a3a;border-radius:2px} 
.pdleg i{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--faint)}
.pdnone{font-size:12px;color:var(--faint);padding:14px 4px}
.pdnone.sm{padding:4px 2px;font-size:11.5px}
.pdnone.good{color:var(--ok-tx);display:flex;align-items:center;gap:8px}
.pdkey{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:10.5px;color:var(--muted);margin-top:6px}
.pdsw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-left:6px;background:var(--line2)}
.pdsw:first-child{margin-left:0}
.pdsw.l,.pdsw.crit{background:var(--today)} .pdsw.h,.pdsw.soon{background:var(--gold)} .pdsw.o{background:var(--info);opacity:.5}
.pdsw.now{background:color-mix(in srgb,var(--today) 45%,var(--bg))} .pdsw.sched{background:var(--line2)}
.pdk-n{margin-left:auto;color:var(--faint)}
.pdr.crit{fill:var(--today)} .pdr.now{fill:color-mix(in srgb,var(--today) 45%,var(--bg))} .pdr.soon{fill:var(--gold)} .pdr.sched{fill:var(--line2)}
.pdhit{fill:transparent;cursor:pointer} .pdhit:hover{fill:color-mix(in srgb,var(--gold) 8%,transparent)}
.pdhit.on{fill:color-mix(in srgb,var(--gold) 16%,transparent)}
.pdnecks{display:flex;flex-direction:column;gap:2px}
.pdn{font:inherit;text-align:left;background:none;border:1px solid transparent;border-radius:8px;padding:4px 7px;cursor:pointer;color:var(--txt);
 display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center}
.pdn:hover{background:var(--exbg)}
.pdn.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--bg))}
.pdn-t{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.pdn-t em{font-style:normal;font-size:9.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.pdn-tag{font-size:9.5px;color:#fff;background:var(--today);border-radius:999px;padding:1px 7px}
.pdn b{font-size:11.5px;font-weight:600;white-space:nowrap} .pdn b.bad{color:var(--today)} .pdn b.good{color:var(--ok-tx);font-weight:500}
.pdn-m{grid-column:1 / -1;display:flex;align-items:center;gap:8px;min-width:0}
.pdn-bar{flex:0 0 38%;display:flex;height:7px;border-radius:4px;background:var(--gridline);overflow:hidden}
.pdn-bar span{height:100%} .pdn-bar .l{background:var(--today)} .pdn-bar .h{background:var(--gold)} .pdn-bar .o{background:var(--info);opacity:.5}
.pdn i{flex:1;font-style:normal;font-size:10.5px;color:var(--faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdwhos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pdsub{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:11.5px;font-weight:600;margin:2px 0 4px}
.pdsub i{font-style:normal;font-weight:400;font-size:10.5px;color:var(--faint)}
.pdwho{font:inherit;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:8px;padding:4px 7px;cursor:pointer;color:var(--txt);
 display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;align-items:center}
.pdwho:hover{background:var(--exbg)}
.pdwho.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--bg))}
.pdwho span{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdwho b{font-size:12px;font-variant-numeric:tabular-nums;background:var(--exbg);border-radius:999px;padding:0 7px}
.pdwho i{grid-column:1 / -1;font-style:normal;font-size:10.5px;color:var(--faint)}
.pdfocus{display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--gold) 12%,var(--bg));border-radius:8px;padding:5px 6px 5px 10px;margin-bottom:4px}
.pdfocus span{font-size:12px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdlink{font:inherit;font-size:11px;margin-left:auto;background:none;border:none;color:var(--goldtxt);cursor:pointer;white-space:nowrap}
.pdx{font:inherit;background:none;border:none;cursor:pointer;color:var(--muted);display:inline-flex;padding:3px;border-radius:6px;margin-left:auto}
.pdx:hover{background:var(--bg)}
.pdlink + .pdx{margin-left:0}
.pdlist{display:flex;flex-direction:column;overflow-y:auto;min-height:0}
.pdli{font:inherit;text-align:left;background:none;border:none;border-bottom:1px solid var(--gridline);padding:6px 2px;cursor:pointer;
 display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;color:var(--txt)}
.pdli:hover{background:var(--exbg)}
.pdli .pdw{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdli i{grid-column:2;font-style:normal;font-size:10.5px;color:var(--faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdmore{font-size:10.5px;color:var(--faint);padding:6px 2px}

/* ---- My dashboard (mydash.js): four tiles on one screen, a list per tab ---- */
.swrap.md{max-width:none}
.mdgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:4px;align-items:start}
/* minmax(0,1fr) and min-width:0 (F-273): with a plain 1fr the tiles kept their widest line and ran past a narrow window */
@media (max-width:1100px){.mdgrid{grid-template-columns:minmax(0,1fr)}}
.mdgrid>.mdt{min-width:0}
.mdt{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--txt)}
.mdt-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mdt-h svg{color:var(--gold)}
.mdt-h b{font-size:12.5px;font-weight:600}
.mdt button{font:inherit;background:none;border:none;text-align:left;cursor:pointer;color:inherit;padding:0}
.mdt-big{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--muted) !important;padding:4px 0 8px !important}
.mdt-big span{font-size:30px;font-weight:600;line-height:1;color:var(--faint);font-variant-numeric:tabular-nums}
.mdt-big.on span{color:var(--today)}
.mdt-big:hover{color:var(--goldtxt) !important}
.mdt-pills{display:flex;flex-direction:column;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:8px}
.mdt-p{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted) !important;padding:5px 0 !important}
.mdt-p b{margin-left:auto;font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums}
.mdt-p b.ovd{color:var(--today)}
.mdt-p:hover span{color:var(--goldtxt)}
.mdt-b{display:flex;flex-direction:column;gap:4px;min-width:0}
.mdt-l{display:flex;gap:10px;align-items:baseline;font-size:12px;min-width:0;padding:2px 0 !important}
.mdt-l span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.mdt-l i{font-style:normal;color:var(--faint);font-size:11px;white-space:nowrap;flex:none}
.mdt-l i.ovd{color:var(--today)}
.mdt-l:hover span{color:var(--goldtxt)}
.mdt-e{font-size:12px;color:var(--ok-tx)}
.mtb tr.mdhl td{background:color-mix(in srgb,var(--gold-light) 55%,var(--bg))}
body.dark .mtb tr.mdhl td{background:#2e2716}
.mtb .mdyes{padding:3px 10px;font-size:11px}
.mdadd{display:flex;gap:8px;margin:0 0 10px}
.mdadd .etx[data-mdtitle]{flex:1;min-width:0}
.mdadd .etx[type=date]{width:150px}
.mdlist{padding:4px 12px}
.mdrow{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--gridline);font-size:12.5px;color:var(--txt);cursor:default}
.mdrow:last-child{border-bottom:none}
.mdrow[data-tapopen]{cursor:pointer}
.mdrow input{accent-color:var(--gold);margin:0}
.mdrow .mdtt{flex:1;min-width:0}
.mdrow .mdmeta{color:var(--faint);font-size:11px;white-space:nowrap}
.mdrow .mdmeta.ovd{color:var(--today)}
.mdrow.done .mdtt{color:var(--faint);text-decoration:line-through}
.mdrow.mdhl{background:color-mix(in srgb,var(--gold-light) 55%,var(--bg));border-radius:8px;padding:8px 10px;margin:4px 0;border-bottom:none}
.mdk svg{color:var(--gold)}
.tapp.wait.me{color:#fff;background:var(--today)}

/* ---- approvals on My dashboard: what waits on you leads; what you decided folds away ---- */
.tdash-wait{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.tdash-card{display:flex;align-items:center;gap:14px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
 border-left:4px solid var(--gold);border-radius:10px;background:color-mix(in srgb,var(--gold-light) 60%,var(--bg))}
body.dark .tdash-card{background:#2e2716}
.tdash-main{flex:1;min-width:0}
.tdash-t{font-size:13px;color:var(--txt)}
.tdash-s{font-size:11.5px;color:var(--muted);margin-top:2px}
.tdash-n{font-size:11.5px;color:var(--txt);margin-top:4px;font-style:normal}
.tdash-act{display:flex;gap:8px;flex:none}
.tdash-none{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ok-tx);padding:6px 2px 12px}
.tdash-sub{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:10px 2px 4px}
.tdash-line{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:3px 2px}
.tdash-line .trcl{margin-left:auto}
.tdash-fold{font:inherit;font-size:11.5px;color:var(--muted);background:none;border:none;padding:10px 2px 4px;cursor:pointer}
.tdash-fold:hover{color:var(--goldtxt)}
.tdash-done{opacity:.75}

/* ---- a term: On account, and its payment lines ---- */
.trkwin .tchk{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:0;text-transform:none;color:var(--txt);cursor:pointer}
.trkwin .tchk input{accent-color:var(--gold);margin:0}
/* A TICK BOX INSIDE A FIELD STAYS A TICK BOX (F-289). `.modal .fld label` - the small upper-case field caption - is
   weightier than `.trkwin .tchk` and won, so the Terms window's "On account" read as a floating caption. */
.modal .trkwin .fld label.tchk{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:0;text-transform:none;color:var(--txt);margin:0}
.trkwin .mgrp[hidden]{display:none}
.mtb.tterm td:nth-child(1){min-width:140px}
.mtb.tterm td:nth-child(2){min-width:180px}
.mtb.tterm td:nth-child(3){min-width:190px}

/* ---- the explorer's row above every project ---- */
.trrow.trall .trt{font-weight:600}
.trsep{height:1px;background:var(--line);margin:4px 6px}

/* ---- the item window: larger, 16:9, and the person may resize it --------- */
.modalwrap.sticky .modal.ratio.x-rwide,.modal.ratio.x-rwide{
 --mw:min(1280px,calc(100vw - 48px),calc(88vh * 16 / 9));
 width:var(--mw);height:calc(var(--mw) * 9 / 16);max-height:92vh;max-width:calc(100vw - 24px);
 min-width:720px;min-height:420px;resize:both;overflow:hidden}
.modal.ratio.x-rwide .mbody{flex:1;min-height:0;overflow:auto}
.trkwin.tw{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(440px,1.3fr);gap:22px;align-items:start}
.trkwin.tw .twl,.trkwin.tw .twr{min-width:0}
.trkwin .mgrid.tw2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.trkwin .mgrid.tw2 .fld.w2{grid-column:span 2}
.trkwin .modal .fld,.trkwin .fld{margin-bottom:9px}
.trkmore{margin-top:4px;border-top:1px solid var(--line);padding-top:8px}
.trkmore summary{cursor:pointer;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
 list-style:none;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.trkmore summary::before{content:'\25B8';font-size:10px}
.trkmore[open] summary::before{content:'\25BE'}
.trkmore summary:hover{color:var(--gold)}
.tgnote{font-size:10.5px;letter-spacing:0;text-transform:none;color:var(--faint);margin-left:10px;font-weight:400}
.mtb.trkgl{width:100%;font-size:11.5px;table-layout:fixed}
/* THE COLUMNS ARE THE HEADER'S (F-288). The widths were on body cells by position, and an unticked gate's row
   joins its three date cells into one - so the cell after it, the documents button, took a 128px date width and
   the columns moved while gates were being ticked (the live walkthrough, 29 September 2026). A fixed layout takes
   every width from the header row, so each row keeps the same columns whatever it holds. */
.mtb.trkgl th:nth-child(1),.mtb.trkgl th:nth-child(3){width:28px}
.mtb.trkgl th:nth-child(4),.mtb.trkgl th:nth-child(5){width:128px}
.mtb.trkgl th:nth-child(6){width:62px}
.mtb.trkgl th:nth-child(7){width:40px}
.mtb.trkgl td.gn{overflow-wrap:anywhere}
.mtb.trkgl td{padding:2px 5px;vertical-align:middle}
.mtb.trkgl th{padding:5px}
.mtb.trkgl tr.off td.gn{color:var(--faint)}
.mtb.trkgl tr.on td.gn{color:var(--txt)}
.mtb.trkgl tr.sub td.gn{padding-left:22px}
.mtb.trkgl td:nth-child(1),.mtb.trkgl td:nth-child(3){width:26px;text-align:center}
.mtb.trkgl input[type=checkbox],.mtb.trkgl input[type=radio]{accent-color:var(--gold);margin:0}
.mtb.trkgl .etx{font-size:11px;padding:3px 5px;width:100%}
.mtb.trkgl .etx.tpc{width:52px}
.mtb.trkgl td:nth-child(4),.mtb.trkgl td:nth-child(5){width:128px}
@media (max-width:980px){.trkwin.tw{grid-template-columns:1fr}}
/* the payment schedule under the gates: the type and the gate need their room */
#trkPays .mtb.trksteps td:nth-child(1){width:auto;min-width:132px}
#trkPays .mtb.trksteps td:nth-child(2){min-width:120px}
#trkPays .mtb.trksteps td:nth-child(3){min-width:170px}

/* ---- the rows' type -------------------------------------------------------
   PJ, 28 September 2026: the item names were bold and "they should all simply be the
   same... call it brightness or darkness." So: one size, one weight, no italics, and
   emphasis by tone alone. What a tracker is ABOUT is full ink - the item in procurement
   and logistics, the payment and whom it is to in payments; what describes it is grey -
   IDs, dates, notes. Colour is kept for trouble and state: late, a chip, a gate reached.
   WAS: item names at weight 600, workbook notes in italics. */
.mtb.trk td{font-size:12px;font-weight:400;color:var(--muted)}
.mtb.trk td.nm,.mtb.trk .tsel{color:var(--txt)}
.mtb.trk td.mono,.mtb.trk td .mono{color:var(--faint);font-size:11.5px}
.mtb.trk td.dt{color:var(--muted)}
.mtb.trk td.dt.late{color:var(--today)}
/* payments: the payment and the supplier carry the row; the item it is for supports it */
.mtb.tpay td.nm{color:var(--txt)}
.mtb.tpay td.tsup{color:var(--txt)}
.mtb.tpay tr.paidrow td,.mtb.tpay tr.paidrow td.nm,.mtb.tpay tr.paidrow td.tsup{color:var(--faint)}

/* ---- My dashboard: tasks, approvals and notifications, as cards ---- */
.mdtasks{display:flex;flex-direction:column;min-height:0}
.mdbar{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.mdbar .mdadd{flex:1;margin:0;min-width:0}
.mdlist{padding:4px 12px 8px}
.mdg{display:flex;align-items:center;gap:8px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:12px 2px 4px}
.mdg span{font-size:10.5px;letter-spacing:0;background:var(--exbg);color:var(--muted);border-radius:999px;padding:0 7px}
.mdg.ovd{color:var(--today)}
.mdc{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);
 margin:0 0 6px;font-size:12.5px;color:var(--txt);cursor:pointer;min-width:0}
.mdc:hover{border-color:var(--gold)}
.mdc.flat{border-color:transparent;border-bottom:1px solid var(--gridline);border-radius:0;margin:0;padding:8px 4px}
.mdc.flat:hover{background:var(--exbg);border-color:transparent;border-bottom-color:var(--gridline)}
.mdc input{accent-color:var(--gold);margin:0;flex:none;width:15px;height:15px;cursor:pointer}
.mdc-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdc-t i{display:block;font-style:normal;font-size:11px;color:var(--faint);overflow:hidden;text-overflow:ellipsis}
.mdc-m{display:flex;align-items:center;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.mdc-m i{font-style:normal;font-size:11px;color:var(--faint);white-space:nowrap}
.mdc-m i.ovd{color:var(--today);font-weight:600}
.mdc.done .mdc-t{color:var(--faint);text-decoration:line-through}
.mdc.appr{background:color-mix(in srgb,var(--gold-light) 45%,var(--bg))}
.mdf{font-size:10px;border-radius:999px;padding:1px 7px;white-space:nowrap}
.mdf.imp{background:color-mix(in srgb,var(--gold) 22%,var(--bg));color:var(--goldtxt)}
.mdf.urg{background:color-mix(in srgb,var(--today) 16%,var(--bg));color:var(--today)}
.mdf.doing{background:color-mix(in srgb,var(--info) 18%,var(--bg));color:var(--info)}
/* the matrix: urgent across, important down */
.mdmx{display:grid;grid-template-columns:22px repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(2,minmax(0,1fr));gap:10px;flex:1;min-height:0}
.mdax{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:center}
.mdax.x1{grid-column:2;grid-row:1} .mdax.x2{grid-column:3;grid-row:1}
.mdax.y1,.mdax.y2{grid-column:1;writing-mode:vertical-rl;transform:rotate(180deg);align-self:center}
.mdax.y1{grid-row:2} .mdax.y2{grid-row:3}
.mdq,.mdbc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;min-height:0;min-width:0}
.mdq.q1{grid-column:2;grid-row:2;border-top:3px solid var(--today)} .mdq.q2{grid-column:3;grid-row:2;border-top:3px solid var(--gold)}
.mdq.q3{grid-column:2;grid-row:3;border-top:3px solid var(--info)} .mdq.q4{grid-column:3;grid-row:3;border-top:3px solid var(--line2)}
.mdq-h{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.mdq-h b{font-size:12.5px;font-weight:600}
.mdq-h i{font-style:normal;font-size:10.5px;color:var(--faint)}
.mdq-h span{margin-left:auto;font-size:11px;background:var(--exbg);color:var(--muted);border-radius:999px;padding:0 8px}
.mdq-b{overflow-y:auto;min-height:0}
.mdq .mdc,.mdbc .mdc{flex-wrap:wrap}
.mdq .mdc-m,.mdbc .mdc-m{justify-content:flex-start;flex-basis:100%;padding-left:25px}
.mdbd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:1;min-height:0}
@media (max-width:900px){.mdmx{grid-template-columns:1fr;grid-template-rows:none}.mdax{display:none}
 .mdq.q1,.mdq.q2,.mdq.q3,.mdq.q4{grid-column:1;grid-row:auto}.mdbd{grid-template-columns:1fr}}
/* approvals and notifications */
.mdac .tapc{flex:none}
.mdac .tbk{margin-left:4px}
.mdac.mine{border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.mdac .mdyes{margin-left:4px}
.mdn-i{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--exbg);color:var(--muted)}
.mdn.unread .mdn-i{background:color-mix(in srgb,var(--gold) 20%,var(--bg));color:var(--goldtxt)}
.mdn.unread .mdc-t{font-weight:600}
.mdn.unread .mdc-t i{font-weight:400}
.mdn{cursor:default}
/* the task window */
.mdflags{display:flex;flex-direction:column;gap:6px}
.mdchk{display:flex;align-items:flex-start;gap:8px;font-size:12px}
.mdchk input{accent-color:var(--gold);margin-top:2px}
.mdchk b{font-weight:600} .mdchk i{display:block;font-style:normal;color:var(--faint);font-size:11px}
.mdpoint{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);background:var(--exbg);border-radius:10px;padding:7px 10px;margin:0 0 10px}
.mdpoint svg{color:var(--gold)}
.mdpoint .btn{padding:3px 10px;font-size:11.5px}

/* the count on a My dashboard tab: a small balloon at the top right of its name */
.tab .tbub{position:relative;top:-7px;margin-left:1px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:999px;
 background:var(--today);color:#fff;font-size:9.5px;font-weight:600;line-height:16px;text-align:center;font-variant-numeric:tabular-nums}

/* ---- the health view (tracker.js, trkHealth) ---- */
.thl{display:inline-block;font-size:10.5px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap}
.thl.late{color:#fff;background:var(--today)}
.thl.wait{color:var(--goldtxt);background:color-mix(in srgb,var(--gold) 24%,var(--bg))}
.thl.risk{color:#9a5b00;background:color-mix(in srgb,#f0a020 22%,var(--bg))}
body.dark .thl.risk{color:#f5c26b}
.thl.nodate{color:var(--muted);background:var(--exbg);font-weight:500}
.thl.ok{color:var(--ok-tx);background:var(--sg-green)}
.thl.none{color:var(--faint);background:none;font-weight:400;padding-left:0}
.thl.done{color:var(--info);background:var(--sg-blue)}
.mtb.trk tr[class*=" h-"] td.tc0{box-shadow:inset 3px 0 0 var(--line2)}
.mtb.trk tr.h-late td.tc0{box-shadow:inset 3px 0 0 var(--today)}
.mtb.trk tr.h-wait td.tc0{box-shadow:inset 3px 0 0 var(--gold)}
.mtb.trk tr.h-risk td.tc0{box-shadow:inset 3px 0 0 #f0a020}
.mtb.trk tr.h-ok td.tc0{box-shadow:inset 3px 0 0 var(--ok-tx)}
.mtb.trk tr.h-done td.tc0{box-shadow:inset 3px 0 0 var(--info)}
.mtb.trk tr.h-late td{background:color-mix(in srgb,var(--today) 4%,var(--bg))}
.mtb.trk tr.h-done td{color:var(--faint)}
.tjr{display:inline-flex;align-items:center;gap:8px;min-width:0}
.tjr .tgt i{height:12px}
.tjr-t{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tjr-t i{font-style:normal;color:var(--faint)}
.tjr-p{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.tnx{display:inline-flex;flex-direction:column;line-height:1.25}
.tnx b{font-weight:500;font-size:12px}
.tnx i{font-style:normal;font-size:10.5px;color:var(--faint)}
.tnx.tn-late i{color:var(--today);font-weight:600} .tnx.tn-risk i{color:#b36b00;font-weight:600}
body.dark .tnx.tn-risk i{color:#f5c26b}
.thsum{display:inline-flex;gap:5px;margin-left:10px;vertical-align:middle}
.thsum .thl{font-size:9.5px;padding:1px 7px;text-transform:none;letter-spacing:0}

/* ---- Gates, Suppliers and Approvals pages: cards, not tables ---- */
.trkpage{overflow-y:auto;min-height:0}
/* gates: a journey down a line */
.tgj{display:flex;flex-direction:column;gap:8px;max-width:1180px}
.tgc{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) 190px auto;gap:14px;align-items:center;
 background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 14px 10px 0;cursor:pointer}
.tgc:hover{border-color:var(--gold)}
.tgc.haslate{border-left:3px solid var(--today)}
.tgc-n{justify-self:center;width:28px;height:28px;border-radius:50%;background:var(--card);border:2px solid var(--line2);display:flex;align-items:center;
 justify-content:center;font-size:11.5px;font-weight:600;color:var(--muted);margin-left:2px;position:relative;z-index:1}
.tgc.haslate .tgc-n{border-color:var(--today);color:var(--today)}
.tgc-b{min-width:0}
.tgc-t{display:flex;align-items:center;gap:8px}
.tgc-t b{font-size:13px;font-weight:600}
.tgc-m{font-size:11.5px;color:var(--muted);margin-top:2px}
.tgc-f{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.tgf{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;border-radius:999px;padding:2px 9px;background:var(--exbg);color:var(--muted);white-space:nowrap}
.tgf svg{flex:none}
.tgf.ap{background:color-mix(in srgb,var(--gold) 18%,var(--bg));color:var(--goldtxt)}
.tgf.ho{background:color-mix(in srgb,var(--info) 14%,var(--bg));color:var(--info)}
.tgf.py{background:color-mix(in srgb,var(--ok-tx) 13%,var(--bg));color:var(--ok-tx)}
.tgw{display:inline-block;width:40px;height:5px;border-radius:3px;background:var(--gridline);overflow:hidden}
.tgw i{display:block;height:100%;background:var(--gold)}
.tgc-s{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline}
.tgc-s b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.tgc-s span{font-size:11px;color:var(--muted)}
.tgc-s em,.tgc-s i{grid-column:1 / -1;font-style:normal;font-size:10.5px}
.tgc-s em.bad{color:var(--today);font-weight:600} .tgc-s em.good{color:var(--ok-tx)}
.tgc-s i{color:var(--faint)}
.tgc-e{grid-column:1 / -1;font-size:11px;color:var(--faint)}
.tgc-a{display:flex;align-items:center;gap:2px}
@media (max-width:900px){.tgc{grid-template-columns:32px minmax(0,1fr)}.tgc-s,.tgc-a{grid-column:2}}
/* suppliers: cards in groups */
.tsw{display:flex;flex-direction:column;gap:4px}
.tsg .mdg{padding-top:8px}
.tsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.tsc{background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--line2);border-radius:12px;padding:11px 13px;cursor:pointer;
 display:flex;flex-direction:column;gap:8px;min-width:0}
.tsc:hover{border-color:var(--gold)}
.tsc.late{border-top-color:var(--today)} .tsc.wait{border-top-color:var(--gold)} .tsc.ok{border-top-color:var(--ok-tx)}
.tsc-h{display:flex;align-items:center;gap:10px;min-width:0}
.tsc-av{flex:none;width:34px;height:34px;border-radius:10px;background:var(--exbg);color:var(--muted);display:flex;align-items:center;justify-content:center;
 font-size:12px;font-weight:600;letter-spacing:.03em}
.tsc.late .tsc-av{background:color-mix(in srgb,var(--today) 14%,var(--bg));color:var(--today)}
.tsc.wait .tsc-av{background:color-mix(in srgb,var(--gold) 20%,var(--bg));color:var(--goldtxt)}
.tsc.ok .tsc-av{background:var(--sg-green);color:var(--ok-tx)}
.tsc-nm{flex:1;min-width:0}
.tsc-nm b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsc-nm i{display:block;font-style:normal;font-size:11px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsc-s{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--muted)}
.tsc-s b{color:var(--txt);font-weight:600}
.tsc-s .bad,.tsc-s .bad b{color:var(--today)} .tsc-s .warn,.tsc-s .warn b{color:var(--goldtxt)} .tsc-s .good,.tsc-s .good b{color:var(--ok-tx)}
.tsc-s .good{display:inline-flex;align-items:center;gap:4px}
.tsc-s .idle,.tsc-c .idle{color:var(--faint)}
.tsc-c{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:var(--muted);border-top:1px solid var(--gridline);padding-top:7px;min-width:0}
.tsc-c span{display:inline-flex;align-items:center;gap:4px}
.tsc-c a{color:var(--muted);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tsc-c a:hover{color:var(--goldtxt)}
.pcount b.bad{color:var(--today)} .pcount b.warn{color:var(--goldtxt)}
/* approvals: numbers, who, cards */
.takpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:10px}
@media (max-width:900px){.takpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tak{background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--line2);border-radius:12px;padding:9px 14px}
.tak b{display:block;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.tak span{font-size:11.5px;color:var(--muted)}
.tak.bad{border-left-color:var(--today)} .tak.bad b{color:var(--today)}
.tak.warn{border-left-color:var(--gold)} .tak.warn b{color:var(--goldtxt)} .tak.good{border-left-color:var(--ok-tx)}
.tawho{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px;font-size:11.5px;color:var(--muted)}
.tawb{font:inherit;display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 11px;cursor:pointer;color:var(--txt);font-size:11.5px}
.tawb b{font-size:11px;background:var(--exbg);border-radius:999px;padding:0 6px}
.tawb i{font-style:normal;font-size:10.5px;color:var(--faint)}
.tawb:hover{border-color:var(--gold)}
.tawb.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--bg))}
.tawb.me{border-color:color-mix(in srgb,var(--today) 45%,var(--line))}
.mdac.old{border-left:3px solid var(--today)}
.mdac .mdc-m i{display:inline-flex;align-items:center;gap:3px}


/* suppliers as a list: one line each, grouped under a strong heading */
.tsg{margin-bottom:12px}
.tsg-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--txt);padding:6px 0 7px 10px;margin-bottom:6px;
 border-left:3px solid var(--gold);border-bottom:1px solid var(--line)}
.tsg-h span{font-size:11px;font-weight:500;background:var(--exbg);color:var(--muted);border-radius:999px;padding:0 8px}
.tslist{background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tsl{display:grid;grid-template-columns:30px minmax(180px,1.3fr) minmax(160px,1.2fr) minmax(200px,1.6fr) 20px;gap:12px;align-items:center;
 padding:7px 12px;border-bottom:1px solid var(--gridline);cursor:pointer;min-width:0;border-left:3px solid transparent}
.tsl:last-child{border-bottom:none}
.tsl:hover{background:var(--exbg)}
.tsl.late{border-left-color:var(--today)} .tsl.wait{border-left-color:var(--gold)}
.tsl-av{width:28px;height:28px;border-radius:8px;background:var(--exbg);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600}
.tsl.late .tsl-av{background:color-mix(in srgb,var(--today) 14%,var(--bg));color:var(--today)}
.tsl.wait .tsl-av{background:color-mix(in srgb,var(--gold) 20%,var(--bg));color:var(--goldtxt)}
.tsl.ok .tsl-av{background:var(--sg-green);color:var(--ok-tx)}
.tsl-nm,.tsl-ct{min-width:0;display:flex;flex-direction:column}
.tsl-nm b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsl-ct{font-size:12px}
.tsl-nm i,.tsl-ct i{font-style:normal;font-size:10.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsl-ct a{color:var(--faint);text-decoration:none} .tsl-ct a:hover{color:var(--goldtxt)}
.tsl-st{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);min-width:0}
.tsl-n{color:var(--txt)} .tsl-p{color:var(--faint)}
.tsl .idle{color:var(--faint)}
@media (max-width:900px){.tsl{grid-template-columns:30px minmax(0,1fr) 20px}.tsl-ct,.tsl-st{grid-column:2}}

/* the Overview's Updates panel: quiet, no counts */
.mdup .mdt-h i{font-style:normal;font-size:10.5px;color:var(--faint);margin-left:auto}
.mdup-l{display:flex;align-items:flex-start;gap:9px;padding:6px 0;border-bottom:1px solid var(--gridline);min-width:0}
.mdup-l:last-child{border-bottom:none}
.mdup .mdn-i{width:24px;height:24px}
.mdup-t{flex:1;min-width:0;font-size:12px}
.mdup-t i{display:block;font-style:normal;font-size:10.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdup-a{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:10.5px;color:var(--faint);white-space:nowrap}

/* ---- signing (sign.js): the document on the left, the sign-off sheet on the right ---- */
.modal.sgwin .mbody{padding-bottom:6px}
.sgw{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);gap:14px;height:100%;min-height:0}
@media (max-width:900px){.sgw{grid-template-columns:1fr}}
.sgdoc{display:flex;flex-direction:column;min-height:0;min-width:0}
.sgtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.sgtab{font:inherit;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer;color:var(--muted)}
.sgtab.on{border-color:var(--gold);color:var(--txt);background:color-mix(in srgb,var(--gold) 12%,var(--bg))}
.sgview{flex:1;min-height:420px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--exbg);display:flex}
.sgview iframe{flex:1;border:0;width:100%;min-height:420px;background:#fff}
.sgimg{flex:1;overflow:auto;display:flex;justify-content:center;padding:10px}.sgimg img{max-width:100%;height:auto}
.sgload,.sgnodoc{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--muted);font-size:12px;padding:24px;max-width:340px}
.sgnodoc b{color:var(--txt)}
.sgside{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0}
.sgside textarea{flex:none}
.sgsheet{flex:1;min-height:0;overflow-y:auto;background:#fffdf8;color:#1b1b1b;border:1px solid var(--line);border-radius:4px;padding:16px 18px;
 box-shadow:0 1px 3px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.05)}
body.dark .sgsheet{background:#f7f3ea}
.sgsh-h{display:flex;align-items:baseline;gap:10px;border-bottom:2px solid var(--gold);padding-bottom:7px;margin-bottom:10px}
.sgsh-h span:first-child{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#888}
.sgsh-h b{font-size:15px;font-weight:600}
.sgsh-h .tapc{margin-left:auto}
.sgmeta{display:grid;grid-template-columns:86px minmax(0,1fr);gap:3px 12px;margin:0 0 14px;font-size:11.5px}
.sgmeta dt{color:#888} .sgmeta dd{margin:0;min-width:0;overflow-wrap:anywhere}
.sgblocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.sgb{border:1px solid #ddd6c8;border-radius:6px;padding:8px 10px;background:#fff}
.sgb.mine{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent)}
.sgb.rejected{border-color:color-mix(in srgb,var(--today) 50%,#ddd)}
.sgbox{height:74px;border-bottom:1px solid #999;display:flex;align-items:flex-end;justify-content:flex-start;margin-bottom:6px}
.sgbox img{max-height:70px;max-width:100%}
.sgwait,.sgno{font-size:11px;color:#aaa;font-style:italic;padding-bottom:6px}
.sgrej{font-size:13px;font-weight:600;color:var(--today);padding-bottom:6px;letter-spacing:.04em;text-transform:uppercase}
.sghere{font:inherit;width:100%;height:62px;margin-bottom:4px;border:1.5px dashed var(--gold);border-radius:6px;background:color-mix(in srgb,var(--gold) 8%,#fff);
 color:var(--goldtxt);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.sghere:hover{background:color-mix(in srgb,var(--gold) 16%,#fff)}
.sgname b{display:block;font-size:12px;font-weight:600}
.sgname i{display:block;font-style:normal;font-size:10.5px;color:#888}
.sgdate{font-size:10.5px;color:#555;margin-top:2px}
.sgwhy{font-size:11px;color:var(--today);margin-top:4px}
.sgb:has(.sgpad){grid-column:1 / -1}
.sgb .sgbox:has(.sgpad){height:auto;border-bottom:none}
.sgpad{width:100%;display:flex;flex-direction:column;gap:6px}
.sgpad canvas{width:100%;height:130px;background:#fff;border:1px dashed #bbb;border-radius:6px;touch-action:none;cursor:crosshair}
.sgpad-b{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sgpad-b .etx{flex:1;min-width:140px}
.sgpad i{font-style:normal;font-size:10.5px;color:#999}
.sgtrail{margin-top:16px}
.sgtr-h{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#888;border-top:1px solid #e5dfd2;padding-top:10px;margin-bottom:6px}
.sgtr{list-style:none;margin:0;padding:0;font-size:11.5px}
.sgtr li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;padding:4px 0;border-left:2px solid #e5dfd2;padding-left:10px;margin-left:3px}
.sgtr li.approved{border-left-color:var(--ok-tx)} .sgtr li.rejected{border-left-color:var(--today)}
.sgtr-w{color:#888;font-variant-numeric:tabular-nums}
.sgtr-t i{display:block;font-style:normal;color:#777;font-size:10.5px;overflow-wrap:anywhere}
.sgfl{display:flex;gap:6px;flex-wrap:wrap}
.sgtab.sgfull{margin-left:auto;color:var(--goldtxt)}

/* the supplier card's working parts (trkSupsPage, card) */
.tsgrid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.tsc{gap:7px;padding:10px 12px}
.tsc-nx{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);background:var(--exbg);border-radius:7px;padding:4px 8px;min-width:0}
.tsc-nx span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsc-nx b{font-weight:600;color:var(--txt);white-space:nowrap} .tsc-nx b.bad{color:var(--today)}
.tsc-its{display:flex;flex-direction:column;gap:3px;font-size:11.5px}
.tsc-it{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:7px;align-items:center}
.tsc-dot{width:8px;height:8px;border-radius:50%;background:var(--line2)}
.tsc-dot.late{background:var(--today)} .tsc-dot.wait{background:var(--gold)} .tsc-dot.risk{background:#f0a020}
.tsc-dot.ok{background:var(--ok-tx)} .tsc-dot.done{background:var(--info)} .tsc-dot.nodate{background:var(--line2)} .tsc-dot.none{background:transparent;border:1px solid var(--line2)}
.tsc-in{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsc-ig{font-size:10.5px;color:var(--faint);white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.tsc-more{font-size:10.5px;color:var(--faint);padding-left:15px}
.tsc-pay{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}

/* a supplier's work under each project (trkSupByProject) */
.tsc-pj{display:flex;align-items:center;gap:6px;font-size:11px;margin-top:3px;min-width:0}
.tsc-pj:first-child{margin-top:0}
.tsc-pj b{font-weight:600;font-size:11.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsc-pj i{margin-left:auto;font-style:normal;color:var(--faint);white-space:nowrap}
.tsc-pj em{font-style:normal;color:var(--today);font-weight:600}
.tsc-pc{flex:none;font-size:9.5px;font-weight:600;letter-spacing:.04em;background:color-mix(in srgb,var(--gold) 18%,var(--bg));color:var(--goldtxt);border-radius:5px;padding:1px 6px}
.tsc-pj.other{cursor:pointer;opacity:.75;border-top:1px dashed var(--gridline);padding-top:4px}
.tsc-pj.other:hover{opacity:1}
.tsc-pj.other .tsc-pc{background:var(--exbg);color:var(--muted)}
.tsc-pj + .tsc-it,.tsc-it + .tsc-it{margin-left:2px}
.tsl-pjs{display:inline-flex;flex-wrap:wrap;gap:4px}
.tsl-pj{font-size:11px;background:var(--exbg);border-radius:6px;padding:1px 7px;color:var(--txt);white-space:nowrap}
.tsl-pj b{font-weight:600;color:var(--goldtxt);font-size:10px;letter-spacing:.04em}
.tsl-pj em{font-style:normal;color:var(--today);font-weight:600}
.tsl-pj.other{opacity:.7}

/* the baseline: a steady ink line, and its window */
.pdcurve{--pd-base:#3f4d63} body.dark .pdcurve{--pd-base:#d5dde9}
.pdbase{fill:none;stroke:var(--pd-base);stroke-width:1.6;stroke-linecap:round;opacity:.75}
.pdbdot{fill:var(--pd-base);opacity:.85}
.pdlab-b.bl{fill:var(--muted)} .pdlab-b.bl.bad{fill:var(--today)} .pdlab-b.bl.good{fill:var(--ok-tx)}
.pdleg .bl{display:inline-block;width:16px;height:0;border-top:2px solid #3f4d63;margin-left:0;margin-right:0}
body.dark .pdleg .bl{border-top-color:#d5dde9}
.pdleg .bl + .pl,.pdleg span.bl ~ .pl{margin-left:6px}
.pdbb{font:inherit;font-size:10.5px;letter-spacing:0;text-transform:none;display:inline-flex;align-items:center;gap:5px;margin-left:auto;
 background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 10px;cursor:pointer;color:var(--muted)}
.pdbb:hover{border-color:var(--gold);color:var(--txt)}
.pdbb.on{color:var(--txt);border-color:color-mix(in srgb,var(--gold) 50%,var(--line))}
.pdbnow{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);background:var(--exbg);border-radius:8px;padding:7px 10px;margin:0 0 10px}
.pdbopt{display:flex;flex-direction:column;gap:8px}
.pdbo{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.pdbo:has(input:checked){border-color:var(--gold);background:color-mix(in srgb,var(--gold) 7%,var(--bg))}
.pdbo input{accent-color:var(--gold);margin-top:3px}
.pdbo b{display:block;font-size:12.5px;font-weight:600}
.pdbo i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
.pdbf{display:none;flex-wrap:wrap;gap:10px;margin-top:8px}
.pdbo:has(input:checked) .pdbf{display:flex}
.pdbf label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--faint)}

.pdbf label:has([data-pdb="scope"]){min-width:220px}
.pdbms{flex-basis:100%;display:flex;flex-direction:column;gap:6px;margin-top:4px}
.pdbms-h{font-size:11px;font-weight:600;color:var(--txt)} .pdbms-h i{display:inline;margin-left:6px;font-weight:400;color:var(--faint)}
#pdbMs{display:flex;flex-direction:column;gap:6px}
.pdbm{display:flex;align-items:center;gap:6px}
.pdbm input[type=number]{width:70px}
.pdbm span{font-size:11px;color:var(--faint)}
.pdbms .mbtn{align-self:flex-start}

/* a hand-over waiting for someone in the department to take it */
.mdc.team{border-left:3px solid var(--info)}
.mdc.team .mdk svg{color:var(--info)}
.mdtake{padding:3px 10px;font-size:11.5px}

/* my signature */
.sgcur{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:11.5px;color:var(--muted)}
.sgcur img{max-height:80px;max-width:320px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px}
.sgup{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.sgchg{font-size:10.5px;margin-top:4px}

/* ---- the board (trkBoardPage): the columns share the width; an empty gate folds away ---- */
.tboard{flex:1;min-height:0;display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.tbcol{flex:1 1 0;min-width:150px;display:flex;flex-direction:column;min-height:0;background:var(--card);border:1px solid var(--line);border-radius:12px;border-top:3px solid var(--line2);transition:border-color .1s,background .1s}
.tbcol.haslate{border-top-color:var(--today)}
.tbcol.empty{flex:0 0 38px;min-width:38px}
.tbcol.empty .tbcol-h{writing-mode:vertical-rl;transform:rotate(180deg);border-bottom:none;padding:10px 0;align-items:center;justify-content:flex-end;height:100%;box-sizing:border-box}
.tbcol.empty .tbcol-h b{font-weight:500;color:var(--faint);font-size:11px;white-space:nowrap}
.tbcol.empty .tbcol-b{display:none}
.tbcol.over{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,var(--card))}
.tbcol.empty.over{flex-basis:150px}
.tbcol-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;padding:8px 9px 6px;border-bottom:1px solid var(--line)}
.tbcol-h b{font-size:11.5px;font-weight:600;min-width:0}
.tbcol-h span{font-size:10.5px;background:var(--exbg);color:var(--muted);border-radius:999px;padding:0 6px}
.tbcol-h em{font-style:normal;font-size:10px;font-weight:600} .tbcol-h em.bad{color:var(--today)} .tbcol-h em.warn{color:var(--goldtxt)}
.tbcol-b{flex:1;min-height:0;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:5px}
.tbcd{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:7px;padding:5px 7px;cursor:pointer}
.tbcd[draggable="true"]{cursor:grab}
.tbcd.dragging{opacity:.45}
.tbcd:hover{border-color:var(--gold)}
.tbcd.h-late{border-left-color:var(--today)} .tbcd.h-wait{border-left-color:var(--gold)} .tbcd.h-risk{border-left-color:#f0a020} .tbcd.h-ok{border-left-color:var(--ok-tx)}
.tbcd-t{font-size:11.5px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tbcd-t .mono{font-size:10px;color:var(--faint)}
.tbcd-m{display:flex;align-items:center;gap:5px;margin-top:4px;flex-wrap:wrap}
.tbcd-m .thl{font-size:9px;padding:1px 6px}
.tbcd-m i{font-style:normal;font-size:10px;color:var(--faint)}
.tbcd-s{font-size:10px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ONE SCREEN AT ANY HEIGHT: the page is the height of the window, and when there is not room for
   everything the two lower panels scroll inside themselves rather than the page growing. Found by
   the walkthrough test at a 563px-high window (29 September 2026). */
.pd{height:100%;min-height:0}
.pdgrid{flex:1;min-height:0;grid-template-rows:auto minmax(0,1fr)}
.pdp.b,.pdp.c{min-height:0;overflow:hidden}
.pdp.b .pdp-b,.pdp.c .pdp-b{overflow-y:auto}
@media (max-width:1100px){.pd{height:auto}.pdgrid{grid-template-rows:none}}
/* ...but never squeezed useless: the lower panels keep 180px, and the curve gives up height first */
.pdgrid{grid-template-rows:auto minmax(180px,1fr)}
.pdp.a .pdsvg{max-height:max(150px, calc(100vh - 520px))}

/* the attachment viewer (trkDocView): over everything, gone with a click outside it */
.tdview{position:fixed;inset:0;z-index:10000;background:rgba(10,10,10,.55);display:flex;align-items:center;justify-content:center;padding:28px;
 animation:tdvin .12s ease-out}
@keyframes tdvin{from{opacity:0}to{opacity:1}}
.tdv-card{width:min(1100px,100%);height:min(88vh,100%);background:var(--card);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;
 overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.tdv-h{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);min-width:0}
.tdv-h b{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tdv-h i{font-style:normal;font-size:11px;color:var(--faint);margin-right:auto;white-space:nowrap}
.tdv-b{flex:1;min-height:0;display:flex;background:var(--exbg)}
.tdv-b iframe{flex:1;border:0;background:#fff}

/* the tasks board: four columns, drag between them */
.mdbd{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.mdbd{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mdbc.over{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 7%,var(--card))}
.mdbc .mdc[draggable="true"]{cursor:grab}
.mdc.dragging{opacity:.45}
.mdf.waiting{background:color-mix(in srgb,var(--muted) 18%,var(--bg));color:var(--muted)}

/* the item's history (history.js) */
.hsw{display:flex;flex-direction:column;gap:10px;min-height:0;height:100%}
.hsum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.hsref{font-size:13px;color:var(--txt)} .hsref .mono{color:var(--faint);margin-right:4px}
.hsnows{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.hsnow{background:var(--exbg);border-radius:999px;padding:2px 9px;color:var(--txt);font-size:11px}
.hsnow em,.hse-t em{font-style:normal;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--goldtxt);margin-right:5px}
.hsf{display:flex;gap:6px;flex-wrap:wrap}
.hsk{font:inherit;font-size:11.5px;display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 11px;cursor:pointer;color:var(--muted)}
.hsk span{font-size:10.5px;background:var(--exbg);border-radius:999px;padding:0 6px}
.hsk.on{border-color:var(--gold);color:var(--txt);background:color-mix(in srgb,var(--gold) 12%,var(--bg))}
.hsl{flex:1;min-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:4px 12px 10px;background:var(--bg)}
.hsday{position:sticky;top:0;background:var(--bg);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:10px 0 4px;z-index:1}
.hse{display:grid;grid-template-columns:24px 42px minmax(0,1fr);gap:8px;align-items:start;padding:6px 0;border-bottom:1px solid var(--gridline)}
.hse-i{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--exbg);color:var(--muted)}
.hse.appr .hse-i{background:color-mix(in srgb,var(--gold) 20%,var(--bg));color:var(--goldtxt)}
.hse.doc .hse-i{background:color-mix(in srgb,var(--info) 16%,var(--bg));color:var(--info)}
.hse.pay .hse-i{background:color-mix(in srgb,var(--ok-tx) 14%,var(--bg));color:var(--ok-tx)}
.hse-w{font-size:11px;color:var(--faint);padding-top:3px;font-variant-numeric:tabular-nums}
.hse-t{font-size:12.5px}
.hse-n{font-size:11px;color:var(--faint);margin-top:1px;overflow-wrap:anywhere}
.hse-a{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px}
.hse-sig{max-height:46px;max-width:180px;background:#fff;border:1px solid var(--line);border-radius:4px}
.hsdoc{font:inherit;font-size:11px;display:inline-flex;align-items:center;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:2px 8px;cursor:pointer;color:var(--txt)}
.hsdoc:hover{border-color:var(--gold)} .hsdoc.gone{opacity:.6;text-decoration:line-through} .hsdoc.sheet{color:var(--goldtxt)}

/* missing a supporting document */
.tdmiss{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--today);background:color-mix(in srgb,var(--today) 12%,var(--bg));
 border-radius:999px;padding:1px 7px;margin-left:4px;white-space:nowrap}
.tbcd .tdmiss{margin:4px 0 0}
.tgf.dc{background:color-mix(in srgb,var(--info) 12%,var(--bg));color:var(--info)}
.hse.warn .hse-i{background:color-mix(in srgb,var(--today) 16%,var(--bg));color:var(--today)}
.hse.warn .hse-t{color:var(--today)}

/* the gate's window (trkGateWin) */
.tgx{display:flex;flex-direction:column;gap:12px}
.tgx-s{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.tgx-h{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--goldtxt);font-weight:600}
.tgx-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:12px}
.tgx-note{margin:-4px 0 0;font-size:11px;color:var(--faint)}
.tgx-sw{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.tgx-sw input{position:absolute;opacity:0;pointer-events:none}
.tgx-knob{flex:none;width:34px;height:20px;border-radius:999px;background:var(--line2);position:relative;transition:background .15s;margin-top:1px}
.tgx-knob::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.tgx-sw:has(input:checked){border-color:color-mix(in srgb,var(--gold) 55%,var(--line));background:color-mix(in srgb,var(--gold) 7%,var(--bg))}
.tgx-sw:has(input:checked) .tgx-knob{background:var(--gold)}
.tgx-sw:has(input:checked) .tgx-knob::after{left:16px}
.tgx-sw b{display:block;font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--txt)}
.tgx-sw i{display:block;font-style:normal;font-size:11px;color:var(--faint);text-transform:none;letter-spacing:0}
.tgx-who{display:flex;flex-direction:column;gap:6px;transition:opacity .15s}
.tgx-s:not(:has(.tgx-sw input:checked)) .tgx-who{opacity:.4;pointer-events:none}
.tgx-sub{font-size:11.5px;font-weight:600;color:var(--txt)} .tgx-sub i{font-style:normal;font-weight:400;font-size:10.5px;color:var(--faint);margin-left:6px}
.tgx-ppl{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.tgx-p{display:flex;align-items:center;gap:9px;padding:6px 10px;border:1px solid var(--line);border-radius:9px;cursor:pointer;text-transform:none;letter-spacing:0}
.tgx-p input{accent-color:var(--gold);margin:0;flex:none}
.tgx-p:has(input:checked){border-color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,var(--bg))}
.tgx-av{flex:none;width:26px;height:26px;border-radius:50%;background:var(--exbg);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600}
.tgx-p:has(input:checked) .tgx-av{background:var(--gold);color:#fff}
.tgx-p b{display:block;font-size:12px;font-weight:600;color:var(--txt)} .tgx-p i{display:block;font-style:normal;font-size:10.5px;color:var(--faint)}
@media (max-width:700px){.tgx-row{grid-template-columns:1fr}}
.trkwin.tgx{display:flex;flex-direction:column;gap:12px;width:100%;grid-template-columns:none}
.tgx .tgx-s{width:100%;box-sizing:border-box}
.tgx .tgx-s,.tgx .trkmore{flex:none}
.trkwin.tgx{flex:none;overflow:visible;max-height:none}

/* the bill of materials preview (bom-edit.js) */
.btb tr.clk{cursor:pointer}
.bcpj{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.bcon td .bcb{display:inline-block;font-size:10px;background:var(--exbg);border-radius:5px;padding:0 6px;margin-right:3px}
.bcon .bca{font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--goldtxt);margin-left:4px}
.bcon .bcv{display:block;font-style:normal;font-size:10.5px;color:var(--faint)}
.bcon tr.bcg td{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--goldtxt);background:color-mix(in srgb,var(--gold-light) 35%,var(--bg));padding-top:8px}
.bcx{font-size:12px;text-transform:none;letter-spacing:0}

/* the bill of materials in the trackers' own explorer and table */
.trtree .bcode{color:var(--faint);font-size:11px;margin-right:2px}
.trrow .trn.late-n{color:var(--today);font-weight:600;margin-left:auto;margin-right:4px}
.trrow .trn.late-n + .trn{margin-left:0}
.mtb.bomt td.n{text-align:right;font-variant-numeric:tabular-nums}
.mtb.bomt .bcv{display:block;font-style:normal;font-size:10.5px;color:var(--faint)}
.mtb.bomt .bca{font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--goldtxt);margin-left:4px}
.mtb.bomt .bcb{display:inline-block;font-size:10px;background:var(--exbg);border-radius:5px;padding:0 6px;margin-right:3px}
.mtb.trk tr.h-done td.tc0{box-shadow:inset 3px 0 0 var(--info)}

/* the Bill of Materials' views (bom-views.js): the trackers' cards, boards and tables */
.mtb.bomm td.tc1{white-space:normal}
.mtb.bomt tr.bt0 td{font-weight:600;border-top:1px solid var(--line2)}
.mtb.bomt tr.bt1 td{color:var(--muted)}
.mtb.bomt .btl{display:inline-block;width:8px;height:8px;border-left:1px solid var(--line2);border-bottom:1px solid var(--line2);margin:0 6px 2px 0;vertical-align:middle}
.tbcd.h-done{border-left-color:var(--info)}
.tbcd-m b{font-size:11px;font-weight:600;color:var(--txt)}
.tbcol.hassoon{border-top-color:var(--gold)} .tbcol.hasdone{border-top-color:var(--info)}
.bomweeks .tbcol{min-width:118px}
.bomweeks .tbcol.empty{min-width:30px;flex-basis:30px}
.mtb.bomx th.bxc{text-align:right;min-width:62px;white-space:normal;vertical-align:bottom}
.mtb.bomx th.bxc em{display:block;font-style:normal;font-weight:400;font-size:10px;letter-spacing:0;text-transform:none;color:var(--faint);
  max-width:92px;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtb.bomx td.bx{text-align:right;font-variant-numeric:tabular-nums;border-left:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.mtb.bomx td.bx.z{color:var(--faint)}
.mtb.bomx .bxt{text-align:right;border-left:1px solid var(--line2)}
.btn.bsw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative}
.btn.bsw input{position:absolute;opacity:0;pointer-events:none}
.btn.bsw .tgx-knob{width:26px;height:15px;margin:0}
.btn.bsw .tgx-knob::after{width:11px;height:11px}
.btn.bsw:has(input:checked){border-color:color-mix(in srgb,var(--gold) 55%,var(--line2));background:color-mix(in srgb,var(--gold) 8%,var(--bg))}
.btn.bsw:has(input:checked) .tgx-knob{background:var(--gold)}
.btn.bsw:has(input:checked) .tgx-knob::after{left:13px}
.btn.bsw:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:1px}
.tst.chg{background:var(--gold-light);color:var(--goldtxt)}
.mtb.bomt .z{color:var(--faint)}
.bomrs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.bomrs>div{display:flex;flex-direction:column;gap:3px;background:var(--exbg);border-radius:9px;padding:8px 10px;min-width:0}
.bomrs span:not(.tst){font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.bomrs b{font-size:13px}
.bomrs .tst{align-self:flex-start;white-space:normal}
.trtree.nohead .trbody{padding-top:8px}
.mtb.bomcmp td.bx.clk{cursor:pointer}
.mtb.bomcmp td.bx.clk:hover{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--goldtxt)}
.mtb.bomcmp th.bxc.on{box-shadow:inset 0 -2px 0 var(--gold);color:var(--goldtxt)}
.mtb.bomcmp td.bx.on{background:color-mix(in srgb,var(--gold) 7%,transparent)}
.mtb.bomcmp tr.shared td.tc0{box-shadow:inset 3px 0 0 var(--gold)}
.trtree .trsec{display:flex;align-items:center;justify-content:space-between;margin:12px 0 2px;padding:8px 4px 0 0;border-top:1px solid var(--line)}
.trtree .trsec .trlbl{padding-top:0}
.trcrumb .trcl0{color:var(--muted)}
.pcount .tst{margin-right:6px}
.mtb.bomcmp th.bxc.drf{color:var(--faint)}
.mtb.bomcmp th.bxc .bdr{font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--goldtxt)}
.mini.bdraft td{color:var(--faint)}