:root{
  --ink:#14181d; --muted:#5f6b78; --line:#dde3ea; --bg:#f5f7f9; --card:#fff;
  --brand:#1b3a5c; --brand2:#2c6fa8; --ok:#137a4b; --warn:#8a5a00; --warnbg:#fff5e0;
  --dangerbg:#fdecec; --danger:#a51b1b; --cost:#7a3fa8; --sell:#0f5c37;
  --radius:8px;
}
*{box-sizing:border-box}
html,body{max-width:100%}
body{margin:0;overflow-x:hidden;font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%}
a{color:var(--brand2);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:21px;margin:0 0 2px;overflow-wrap:anywhere}
h2{font-size:16px;margin:0}
h3{font-size:14px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}

/* ---------------------------------------------------------------- the nav
   A dark rail with the sections grouped the way the work runs, per the LoopLogics
   layout Jay sent (1 Sep). --accent is set per page: it follows whichever BUSINESS
   the job belongs to, so a Wet2Dry job reads navy and a Project Plus one magenta,
   while the layout and type never move. A list spanning all three stays neutral. */
header.top{background:#14171c;color:#fff;position:fixed;top:0;left:0;bottom:0;
  width:198px;padding:16px 0 12px;display:flex;flex-direction:column;gap:1px;
  z-index:20;overflow-y:auto}
header.top .brand{color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em;
  padding:0 16px 4px;display:block}
header.top .brand b{color:var(--accent)}
header.top .brand i{color:var(--accent);font-style:normal}
header.top .bizmark{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--accent);padding:0 16px 10px;display:block;font-weight:700}
header.top .navhead{font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  color:#6a727e;padding:15px 16px 5px;font-weight:700}
header.top a.navlink{color:#c3c9d2;font-weight:600;font-size:13.5px;
  padding:9px 16px;margin:0 8px;border-radius:8px;display:flex;gap:10px;
  align-items:center;text-decoration:none}
header.top a.navlink:hover{background:rgba(255,255,255,.06);color:#fff}
header.top a.navlink.on{background:var(--accent);color:#fff}
header.top .ni{opacity:.85;width:15px;display:inline-block;text-align:center}
header.top .spacer{flex:1}
header.top .signedin{font-size:11.5px;color:#8b93a0;padding:10px 16px 0;line-height:1.5}
header.top .signedin a{display:block;color:var(--accent);font-weight:600;font-size:11.5px;
  padding:2px 0 0;text-decoration:none}
header.top .tag{font-size:10px;background:#20242c;padding:7px 10px;margin:10px 12px 0;
  border-radius:8px;color:#8b93a0;line-height:1.4;display:block}

.wrap{max-width:1800px;margin:0 auto;padding:16px 16px 16px 214px}

@media (max-width:900px){
  /* A fixed rail eats a phone screen — back to a strip across the top. */
  header.top{position:sticky;flex-direction:row;width:auto;inset:0 0 auto 0;
    padding:8px 10px;gap:4px;align-items:center;flex-wrap:wrap;overflow:visible}
  header.top .brand{padding:0 8px 0 0;font-size:14px}
  header.top .navhead,header.top .tag,header.top .ni{display:none}
  header.top a.navlink{padding:5px 9px;margin:0;font-size:12.5px}
  .wrap{padding:12px}
}
}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;margin-bottom:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1 1 200px}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.right{text-align:right}
.nowrap{white-space:nowrap}

label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:3px}
input,select,textarea{width:100%;padding:8px 9px;border:1px solid var(--line);
  border-radius:6px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand2);outline-offset:-1px}
textarea{min-height:64px}
button,.btn{display:inline-block;padding:8px 13px;border:1px solid var(--brand);
  background:var(--brand);color:#fff;border-radius:6px;font:inherit;font-weight:600;
  cursor:pointer;text-align:center}
button:hover,.btn:hover{background:var(--brand2);border-color:var(--brand2);text-decoration:none}
.btn.sec{background:#fff;color:var(--brand);border-color:var(--line)}
.btn.sec:hover{background:#eef3f8;color:var(--brand)}
.btn.sm{padding:4px 9px;font-size:12px;font-weight:600}
.btn.danger{background:#fff;color:var(--danger);border-color:#e8c4c4}

/* Wide tables scroll inside their own box -- the page body never scrolls sideways. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table{width:100%;border-collapse:collapse}
th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  text-align:left;padding:6px 7px;border-bottom:2px solid var(--line);font-weight:700}
td{padding:6px 7px;border-bottom:1px solid #eef1f5;vertical-align:top}
tr.excluded td{color:#98a4b0;background:#fafbfc}
tr.excluded td.desc{text-decoration:line-through}
.badge{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.04em;vertical-align:middle}
.badge.exc{background:#eceff3;color:#5f6b78;border:1px solid #dde3ea}
.badge.prov{background:#fff5e0;color:var(--warn);border:1px solid #f0dcae}
.badge.inh{background:#eef3f8;color:var(--brand2);border:1px solid #cfe0ef}
.badge.ovr{background:#e6f4ec;color:var(--ok);border:1px solid #bfe0cd}

.money-cost{color:var(--cost);font-variant-numeric:tabular-nums}
.money-sell{color:var(--sell);font-weight:700;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

.alert{padding:9px 12px;border-radius:6px;margin-bottom:10px;font-size:13.5px;border:1px solid}
.alert.danger{background:var(--dangerbg);border-color:#f0c4c4;color:var(--danger)}
.alert.warn{background:var(--warnbg);border-color:#f0dcae;color:var(--warn)}
.alert.info{background:#eef3f8;border-color:#cfe0ef;color:var(--brand)}
.alert.ok{background:#e6f4ec;border-color:#bfe0cd;color:var(--ok)}

.totalbar{display:flex;gap:0;flex-wrap:wrap;background:var(--brand);color:#fff;
  border-radius:var(--radius);overflow:hidden;margin-bottom:14px}
.totalbar div{flex:1 1 140px;padding:11px 14px;border-right:1px solid rgba(255,255,255,.16)}
.totalbar div:last-child{border-right:0}
.totalbar .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.75}
.totalbar .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.totalbar .v.sell{color:#9be8c0}

.sechead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  border-bottom:2px solid var(--line);padding-bottom:8px;margin-bottom:8px}
.sechead .grow{flex:1 1 200px}
.marginbox{display:flex;gap:6px;align-items:center;background:#f7f9fb;border:1px solid var(--line);
  padding:5px 8px;border-radius:6px}
.marginbox input{width:74px;padding:4px 6px}
.marginbox .lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase}

details.addline{margin-top:8px}
details.addline summary{cursor:pointer;font-weight:600;color:var(--brand2);font-size:13px;
  padding:5px 0;list-style:none}
details.addline summary::-webkit-details-marker{display:none}
details.addline summary:before{content:"+ ";font-weight:700}

.grid6{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.span2{grid-column:span 2}
.span3{grid-column:span 3}
.span6{grid-column:span 6}

.hint{font-size:12px;color:var(--muted);margin-top:4px}
.kbd{background:#eef1f5;border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:12px}

/* rate picker */
.picker{position:relative}
.pickres{position:absolute;z-index:30;left:0;right:0;top:100%;background:#fff;
  border:1px solid var(--line);border-radius:6px;max-height:260px;overflow:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.13)}
.pickres div{padding:7px 9px;cursor:pointer;border-bottom:1px solid #f0f3f6;font-size:13px}
.pickres div:hover{background:#eef3f8}
.pickres .c{color:var(--muted);font-size:11px}

@media(max-width:820px){
  .wrap{padding:10px}
  .grid6,.grid4,.grid3{grid-template-columns:repeat(2,1fr)}
  .span2,.span3,.span6{grid-column:span 2}
  .totalbar div{flex:1 1 50%}
  .hide-sm{display:none}
  table,th,td{font-size:13px}
  td,th{padding:5px 4px}
  h1{font-size:18px}
}

/* ------------------------------------------------------------------- WHS --- */
/* Status pills. Missing and expired share the loudest treatment on purpose:
   a subbie nobody collected a certificate from is not a milder problem than one
   whose certificate lapsed last week. */
.st{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;border:1px solid}
.st.ok{background:#e6f4ec;color:var(--ok);border-color:#bfe0cd}
.st.warn{background:var(--warnbg);color:var(--warn);border-color:#f0dcae}
.st.danger{background:var(--dangerbg);color:var(--danger);border-color:#e8b4b4}
.st.muted{background:#eceff3;color:var(--muted);border-color:#dde3ea}
tr.bad td{background:#fdf4f4}
tr.bad td:first-child{box-shadow:inset 3px 0 0 var(--danger)}

.tiles{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tile{flex:1 1 150px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 13px;text-align:left}
.tile .n{font-size:26px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.tile .l{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:3px}
.tile.bad{border-color:#e8b4b4;background:var(--dangerbg)}
.tile.bad .n{color:var(--danger)}
.tile.warn{border-color:#f0dcae;background:var(--warnbg)}
.tile.warn .n{color:var(--warn)}
.tile.good{border-color:#bfe0cd;background:#e6f4ec}
.tile.good .n{color:var(--ok)}
.tile a{display:block;color:inherit}
.tile a:hover{text-decoration:none}

.asat{font-size:12px;color:var(--muted);margin:-2px 0 12px}
.reqrow td{vertical-align:middle}
.docmeta{font-size:12px;color:var(--muted)}
.swmsbody{white-space:pre-wrap;font-size:13px;line-height:1.5;background:#f7f9fb;
  border:1px solid var(--line);border-radius:6px;padding:9px 11px;margin:0 0 8px}
.covgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 14px;margin:4px 0 8px}
.covgrid label{font-weight:500;font-size:13px;color:var(--ink);display:flex;gap:7px;
  align-items:flex-start;text-transform:none;letter-spacing:0}
.covgrid input{width:auto;margin-top:3px;flex:0 0 auto}
.gap{color:var(--danger);font-weight:700}
@media(max-width:820px){ .covgrid{grid-template-columns:1fr} }

/* ------------------------------------------------------------ chat panel */
#chattoggle{position:fixed;right:14px;bottom:14px;z-index:60;border:0;border-radius:24px;
  padding:11px 17px;background:var(--brand,#1b3a5c);color:#fff;font-weight:700;font-size:14px;
  cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.28)}
#chatpanel{position:fixed;top:0;right:0;bottom:0;width:390px;max-width:100%;z-index:70;
  background:#fff;border-left:1px solid var(--line,#d7dee6);display:flex;flex-direction:column;
  box-shadow:-8px 0 28px rgba(0,0,0,.12)}
#chatpanel[hidden]{display:none}
body.chat-open .wrap{padding-right:406px}
#chatpanel .ch{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--line,#d7dee6);background:#f7f9fb}
#chatpanel .ch b{font-size:14px}
#chatpanel .ch .x{margin-left:auto;cursor:pointer;border:0;background:none;font-size:19px;
  line-height:1;color:var(--muted,#6b7a8c);padding:2px 6px}
#chatlog{flex:1 1 auto;overflow:auto;padding:10px 12px;font-size:13px}
#chatlog .you{background:#eef3f8;border-radius:9px 9px 2px 9px;padding:6px 9px;margin:9px 0 5px auto;
  max-width:88%;width:fit-content;font-weight:600}
#chatlog .did{border-left:3px solid #2f8f4e;background:#f4faf6;border-radius:0 7px 7px 0;
  padding:7px 9px;margin:0 0 6px 0}
#chatlog .nope{border-left:3px solid #b5452f;background:#fdf4f2;border-radius:0 7px 7px 0;
  padding:7px 9px;margin:0 0 6px 0}
#chatlog .warnrow{border-left:3px solid #c98a12;background:#fdf8ec;border-radius:0 7px 7px 0;
  padding:6px 9px;margin:0 0 6px 0;font-size:12px}
#chatlog .moved{font-size:11.5px;color:var(--muted,#6b7a8c);margin-top:3px;font-variant-numeric:tabular-nums}
#chatlog .moved b{color:#14202b}
#chatlog .q{border-left:3px solid #4a6f96;background:#f5f8fb;border-radius:0 7px 7px 0;
  padding:7px 9px;margin:0 0 6px 0}
#chatlog .sug{margin-top:5px;display:flex;flex-wrap:wrap;gap:5px}
#chatlog .sug button,#chatex button{border:1px solid var(--line,#d7dee6);background:#fff;
  border-radius:12px;padding:3px 9px;font-size:11.5px;cursor:pointer;color:#24425f;text-align:left}
#chatlog .sug button:hover,#chatex button:hover{background:#eef3f8}
#chatlog .undo{margin-top:6px}
#chatlog .empty{color:var(--muted,#6b7a8c);padding:8px 0}
#chatform{border-top:1px solid var(--line,#d7dee6);padding:9px 11px;background:#fbfcfd}
#chattext{width:100%;height:56px;resize:vertical;font:inherit;font-size:13px;padding:6px 8px}
#chatform .r{display:flex;gap:7px;align-items:center;margin-top:6px}
#chatform .r .muted{font-size:11px}
#chatex{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
@media(max-width:1199px){
  body.chat-open .wrap{padding-right:10px}
  #chatpanel{width:100%;top:auto;height:78vh;border-left:0;border-top:1px solid var(--line,#d7dee6)}
}

/* ------------------------------------------------- DOCUMENTS & PHOTOS --- */
/* Job tab strip. The counts are on the tabs because "how many photos has this
   job got" is answered by looking, not by clicking. */
.jobtabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:2px solid var(--line);
  margin:10px 0 14px}
.jobtabs a{padding:7px 13px;font-weight:600;font-size:13.5px;color:var(--muted);
  border:1px solid transparent;border-bottom:0;border-radius:7px 7px 0 0;margin-bottom:-2px}
.jobtabs a:hover{background:#eef3f8;text-decoration:none}
.jobtabs a.on{background:#fff;color:var(--brand);border-color:var(--line);
  border-bottom:2px solid #fff}
.jobtabs .n{display:inline-block;background:#eef1f5;color:var(--muted);font-size:11px;
  font-weight:800;padding:0 6px;border-radius:20px;margin-left:3px;
  font-variant-numeric:tabular-nums}
.jobtabs a.on .n{background:var(--brand);color:#fff}

/* Folder list down the side, counts on the right, exactly like the screenshot. */
.docsplit{display:flex;gap:14px;align-items:flex-start}
.docsplit .folders{flex:0 0 250px;padding:8px}
.docsplit .docmain{flex:1 1 460px;min-width:0}
.fold{display:flex;gap:8px;align-items:baseline;padding:5px 8px;border-radius:6px;
  color:var(--ink);font-size:13.5px}
.fold:hover{background:#eef3f8;text-decoration:none}
.fold.on{background:var(--brand);color:#fff;font-weight:700}
.fold .fn{flex:1 1 auto;overflow-wrap:anywhere}
.fold .fc{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums}
.fold.on .fc{color:#cfe2f5}
.foldgroup{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:800;margin:11px 0 3px;padding:0 8px;border-top:1px solid var(--line);
  padding-top:9px}
.foldnote{font-size:11.5px;color:var(--warn);padding:1px 8px 4px}
.foldmore summary{cursor:pointer;font-size:12px;color:var(--brand2);padding:7px 8px}
.chip{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;
  margin:2px 3px 0 0;border:1px solid}
.chip.purpose{background:#eef3f8;color:var(--brand2);border-color:#cfe0ef}
.chip.trade{background:#f3eef8;color:var(--cost);border-color:#ddd0ea}
.chip.none{background:var(--warnbg);color:var(--warn);border-color:#f0dcae}
.catgroup{margin-top:6px}
.catgroup b{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.catboxes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px 12px;margin:3px 0 4px}
.catboxes label{display:flex;gap:6px;align-items:center;font-weight:500;font-size:12.5px;
  color:var(--ink);text-transform:none;letter-spacing:0;margin:0}
.catboxes input{width:auto;flex:0 0 auto}
summary.addfold{cursor:pointer;font-weight:600;color:var(--brand2);font-size:13px}

/* Photo grid. Thumbnails only -- 200 phone photos at full size is 1.5 GB. */
.stagebar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.stagebtn{display:inline-block;padding:5px 11px;border:1px solid var(--line);background:#fff;
  border-radius:20px;font-size:12.5px;font-weight:600;color:var(--brand)}
.stagebtn:hover{background:#eef3f8;text-decoration:none}
.stagebtn.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.stagebtn.flat{color:var(--muted);cursor:default}
.stagebtn .n{font-variant-numeric:tabular-nums;opacity:.7;font-weight:800}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.ph{display:block;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:#fff;color:var(--ink)}
.ph:hover{border-color:var(--brand2);text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.10)}
.ph .pimg{display:block;aspect-ratio:4/3;background:#eceff3;overflow:hidden}
.ph .pimg img{width:100%;height:100%;object-fit:cover;display:block}
.ph .pmeta{display:block;padding:6px 8px 8px}
.ph .pd{display:block;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;
  margin-bottom:3px}
.ph .pc{display:block;font-size:12.5px;margin-top:4px;overflow-wrap:anywhere}
.ph .approx{color:var(--warn);font-weight:800}
.photoview{padding:8px;text-align:center;background:#20262d}
.photoview img{max-width:100%;max-height:74vh;border-radius:6px}
@media(max-width:820px){
  .docsplit{flex-direction:column}
  .docsplit .folders{flex:1 1 auto;width:100%}
  .catboxes{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* The date goes ON the photo. Two different facts wear the same shape -- a date
   off the camera is evidence of when the work looked like that, an upload date is
   not -- so both are labelled and the upload one is amber, never quietly shown as
   if it were the day the photo was shot. */
.pday{margin-bottom:16px}
.pdayhead{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:9px}
.pdayhead h4{margin:0;font-size:15px;font-weight:800;letter-spacing:-.01em}
.pdayn{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pdaywarn{font-size:11.5px;color:var(--warn);font-weight:600}
.uploadedword{color:var(--warn)}
.ph .pimg{position:relative}
.pstamp{position:absolute;left:0;right:0;bottom:0;padding:9px 7px 4px;
  font-size:11px;font-weight:700;color:#fff;letter-spacing:.01em;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));
  text-shadow:0 1px 2px rgba(0,0,0,.65);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pstamp.uploaded{color:#ffd98a}
h2.phdate{font-size:17px;margin:0 0 9px}
h2.phdate.uploaded{color:var(--warn)}

/* labour hours + hourly cost, editable straight in the row */
td.labcell{padding:2px 4px}
input.lin{width:66px;padding:3px 5px;text-align:right;font-variant-numeric:tabular-nums;
  border:1px solid var(--line,#d7dee6);border-radius:4px;background:#fff;font-size:13px}
input.lin::placeholder{color:#b3bfcc}
input.lin:focus{outline:2px solid #4a86c5;outline-offset:-1px;background:#fbfdff}
input.lin.bad{border-color:#c0563c;background:#fdf3f0}
.badge.bad{background:#fbe3dc;color:#8f3a26;border:1px solid #e6b4a4}
.warntext{color:#9c4326}
@media(max-width:820px){ input.lin{width:52px} }

/* material and labour, shown the same way: qty @ rate, and what the side comes to */
td.amtcell{padding:3px 5px;white-space:nowrap;font-variant-numeric:tabular-nums}
td.amtcell .u{display:inline-block;min-width:20px;color:var(--muted,#6b7a8c);font-size:11px;
  margin-left:2px;text-align:left}
td.amtcell .at{color:#9aa8b6;margin:0 3px;font-size:11px}
td.amtcell .cur{color:var(--muted,#6b7a8c);font-size:11px}
td.amtcell .sub{font-size:11px;color:var(--muted,#6b7a8c);margin-top:2px}
th .colsub{font-weight:400;font-size:10px;color:var(--muted,#6b7a8c);text-transform:none;
  letter-spacing:0}
@media(max-width:820px){
  td.amtcell{white-space:normal}
  td.amtcell .at{display:none}
}

/* drag to reorder */
.grip{display:inline-block;cursor:grab;color:#9aa8b6;letter-spacing:-2px;font-size:13px;
  padding:2px 3px;touch-action:none;user-select:none;-webkit-user-select:none;line-height:1}
.grip:hover{color:var(--brand2,#24425f)}
.grip.big{font-size:17px;padding:6px 6px 6px 0;align-self:flex-start}
.card.sec{transition:box-shadow .12s}
tr.ln.dragging,.card.sec.dragging{opacity:.65;box-shadow:0 6px 20px rgba(0,0,0,.22);
  outline:2px dashed #4a86c5;outline-offset:-2px}
tr.ln.dragging td{background:#eef3f8}
body.dragging-now{cursor:grabbing;user-select:none;-webkit-user-select:none}
body.dragging-now .grip{cursor:grabbing}
.movebox{display:flex;gap:2px;margin-left:6px}
.btn.mv{padding:2px 6px;min-width:24px;line-height:1.3}
#draghint{margin:2px 0 10px}
@media(max-width:820px){ .grip.big{font-size:20px;padding:8px 8px 8px 0} .btn.mv{padding:4px 8px} }

/* ---------------------------------------------------------------- programme
   The bar chart. Percentages, not pixels, so it reflows on a phone; the whole
   thing scrolls sideways inside its own box rather than pushing the page wide. */
.gantt{margin:.6rem 0;overflow-x:auto}
.gaxis{position:relative;height:1.2rem;border-bottom:1px solid #d8dee5;margin-left:12rem}
.gtick{position:absolute;top:0;font-size:.72rem;color:#7a838c;transform:translateX(-50%)}
.gtoday{position:absolute;top:0;bottom:-1000px;width:2px;background:#c0392b;opacity:.55;z-index:2}
.grow{display:flex;align-items:center;gap:.5rem;padding:.12rem 0}
.glabel{width:12rem;flex:0 0 12rem;font-size:.82rem;overflow:hidden;
        text-overflow:ellipsis;white-space:nowrap}
.gtrack{position:relative;flex:1 1 auto;height:1.15rem;background:#f2f5f8;
        border-radius:3px;min-width:16rem}
.gbar{position:absolute;top:.1rem;height:.95rem;background:#5b8db8;border-radius:3px;
      overflow:hidden}
.gbar.crit{background:#c0392b}
.gbar.done{background:#7fa87f}
.gbar.late{background:#d98b30}
.gfill{height:100%;background:rgba(255,255,255,.45)}
.gtail{position:absolute;top:.1rem;height:.95rem;border-radius:3px;
       background:repeating-linear-gradient(45deg,#e8c4bd,#e8c4bd 3px,#f7ecea 3px,#f7ecea 6px)}
.gkey{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;
      background:#5b8db8;vertical-align:middle;margin-right:.15rem}
.gkey.crit{background:#c0392b}
.gkey.done{background:#7fa87f}
.gkey.late{background:#d98b30}
.gkey.tail{background:repeating-linear-gradient(45deg,#e8c4bd,#e8c4bd 3px,#f7ecea 3px,#f7ecea 6px)}
@media (max-width:700px){
  .glabel{width:7rem;flex:0 0 7rem;font-size:.75rem}
  .gaxis{margin-left:7rem}
}

/* ------------------------------------------------------------------- jobs
   The spent bar. Green until it is nearly gone, amber near the end, red over. */
.sbar{display:inline-block;width:5rem;height:.55rem;background:#eef2f6;
      border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:.3rem}
.sfill{height:100%}
.sfill.good{background:#5b8db8}
.sfill.warn{background:#d98b30}
.sfill.bad{background:#c0392b}

/* ---------------------------------------------------------- progress claims
   The percentage box and its % sign have to sit on one line. Left to itself the
   sign wraps under the input and the column reads as two rows per section. */
.pctcell{white-space:nowrap;display:inline-flex;align-items:baseline;gap:3px}
.pctcell input{width:58px;text-align:right;font-variant-numeric:tabular-nums}

/* The claim summary. Right-aligned and tabular so the figures line up under each
   other -- a column of money you cannot scan down is a column nobody checks. */
table.claimtot{width:100%;max-width:520px;margin:14px 0 4px;border-collapse:collapse}
table.claimtot td{padding:5px 2px;text-align:right;font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--line)}
table.claimtot td.k{text-align:left;color:var(--muted)}
table.claimtot tr.sub td{font-weight:700;color:var(--ink)}
table.claimtot tr.grand td{font-size:15px;font-weight:700;padding-top:9px;
  border-top:2px solid var(--brand);border-bottom:none;color:var(--brand)}

/* Claim actions sit in a row, and deleting a draft is never the loudest thing on
   the screen -- it goes last and stays quiet. */
.claimacts{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:14px}
.claimacts form{margin:0}

/* Estimate line tables: description takes the slack, numbers stay narrow and on
   one line -- otherwise the description column collapses to one word per row. */
table.lines td.desc, table.lines th:nth-child(2){width:100%;min-width:300px}
table.lines td:not(.desc), table.lines th:not(:nth-child(2)){white-space:nowrap}