/* Layout: summary tiles on top, then one reorderable list of jobs that expand in place into editable detail. */
:root{
  --bg:#f2f4f6; --card:#ffffff; --ink:#18212b; --muted:#5d6a78; --line:#dde3e9; --soft:#eef2f6;
  --accent:#1f5fae; --accent-ink:#ffffff; --accent-soft:#e3edf9;
  --good:#1d7a4f; --good-soft:#dff3e8; --warn:#9a5b00; --warn-soft:#fbefd9; --bad:#b4332b; --bad-soft:#fbe4e2;
  --violet:#6b4fb8; --violet-soft:#ece6fa; --grey-soft:#e9edf1;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#11161c; --card:#1a2129; --ink:#e6ebf0; --muted:#98a5b3; --line:#2b3540; --soft:#212a34;
  --accent:#6aa6ee; --accent-ink:#0d1620; --accent-soft:#1d2e45;
  --good:#5cc994; --good-soft:#173527; --warn:#e7aa4b; --warn-soft:#3a2b12; --bad:#f08178; --bad-soft:#3d1d1b;
  --violet:#b39cf3; --violet-soft:#2b2343; --grey-soft:#252e38; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#11161c; --card:#1a2129; --ink:#e6ebf0; --muted:#98a5b3; --line:#2b3540; --soft:#212a34;
  --accent:#6aa6ee; --accent-ink:#0d1620; --accent-soft:#1d2e45;
  --good:#5cc994; --good-soft:#173527; --warn:#e7aa4b; --warn-soft:#3a2b12; --bad:#f08178; --bad-soft:#3d1d1b;
  --violet:#b39cf3; --violet-soft:#2b2343; --grey-soft:#252e38; color-scheme:dark;}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--body)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:24px 20px 80px;display:grid;gap:18px}
.top{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.title{font:700 30px/1.15 var(--display);border:1px solid transparent;background:transparent;border-radius:8px;padding:2px 6px;margin-left:-7px;width:min(560px,100%)}
.title:hover{border-color:var(--line)}
.sub{color:var(--muted);font-size:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.save{display:inline-flex;gap:6px;align-items:center}
.save::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--good)}
.save.busy::before{background:var(--warn)}
.save.warn{color:var(--bad)}
.save.warn::before{background:var(--bad)}
.linkbtn{background:none;border:0;color:var(--accent);text-decoration:underline;padding:0}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:8px 14px;font-weight:600}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:4px}
.tile .lab{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tile .val{font:700 24px/1.2 var(--display);font-variant-numeric:tabular-nums}
.tile .val.neg{color:var(--bad)}
.tile .note{font-size:13px;color:var(--muted)}
.tile input.val{border:1px dashed var(--line);border-radius:8px;background:var(--soft);padding:2px 8px;width:100%}
.bar{height:8px;border-radius:5px;background:var(--grey-soft);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--good);border-radius:5px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tab{background:none;border:0;padding:10px 14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--ink);border-color:var(--accent)}
.wrap>section{display:grid;gap:12px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.toolbar select,.toolbar input{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:6px 10px}
.toolbar input{flex:1;min-width:160px}
.hint{font-size:13px;color:var(--muted);margin:0}
ol.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.job{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--grey-soft);border-radius:12px}
.job.over-top{box-shadow:0 -3px 0 var(--accent)}
.job.over-bottom{box-shadow:0 3px 0 var(--accent)}
.job.dragging{opacity:.45}
.head{display:flex;align-items:center;gap:8px;padding:8px 10px}
.grip{cursor:grab;color:var(--muted);user-select:none;padding:4px 2px;letter-spacing:-2px;font-weight:700}
.num{width:26px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600;font-size:13px}
.toggle{flex:1;min-width:0;background:none;border:0;text-align:left;padding:4px;border-radius:8px}
.toggle:hover{background:var(--soft)}
.sumline{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.jname{font-weight:700;font-size:16px}
.meta{font-size:13px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.meta .tbd{font-style:italic}
.tag{font-size:12px;font-weight:600;border-radius:6px;padding:1px 7px;background:var(--soft);color:var(--muted)}
select.status{border:0;border-radius:999px;padding:5px 10px;font-size:13px;font-weight:700;max-width:150px}
.moves{display:flex;gap:2px}
.moves button{border:1px solid var(--line);background:var(--card);border-radius:8px;width:30px;height:30px;color:var(--muted)}
.moves button:hover{color:var(--ink);border-color:var(--accent)}
.st-todo{--sc:var(--muted);--ss:var(--grey-soft)}
.st-planning{--sc:var(--violet);--ss:var(--violet-soft)}
.st-quote{--sc:var(--warn);--ss:var(--warn-soft)}
.st-scheduled{--sc:var(--accent);--ss:var(--accent-soft)}
.st-progress{--sc:var(--accent);--ss:var(--accent-soft)}
.st-hold{--sc:var(--bad);--ss:var(--bad-soft)}
.st-done{--sc:var(--good);--ss:var(--good-soft)}
.job[class*="st-"]{border-left-color:var(--sc)}
select.status{background:var(--ss);color:var(--sc)}
.job.st-done .jname{text-decoration:line-through;text-decoration-color:var(--muted)}
.panel{border-top:1px solid var(--line);padding:16px;display:grid;gap:18px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
label.f{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
label.f.wide{grid-column:1/-1}
.panel input,.panel textarea,.panel select{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:7px 9px;font-size:14px;font-weight:400;color:var(--ink);width:100%}
.panel textarea{min-height:70px;resize:vertical}
.sect{display:grid;gap:8px}
.sect h3{margin:0;font:700 15px/1.2 var(--display);display:flex;justify-content:space-between;align-items:baseline;gap:8px;text-wrap:balance}
.sect h3 small{font:500 13px var(--body);color:var(--muted)}
.rows{display:grid;gap:6px}
.r{display:grid;gap:6px;align-items:center}
.r.m{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px}
.r.c{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 32px}
.r.t{grid-template-columns:22px minmax(0,1fr) 32px}
.r.hdr{font-size:12px;font-weight:600;color:var(--muted)}
.r.tot{font-weight:700;font-variant-numeric:tabular-nums;padding:2px 0}
.r.tot span{padding-left:10px}
.x{border:0;background:none;color:var(--muted);font-size:18px;border-radius:6px;height:32px}
.x:hover{color:var(--bad);background:var(--bad-soft)}
.add{justify-self:start;border:1px dashed var(--line);background:none;border-radius:8px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--accent)}
.add:hover{border-color:var(--accent)}
.r.t input[type=checkbox]{width:18px;height:18px;accent-color:var(--good)}
.r.t.done input[type=text]{text-decoration:line-through;color:var(--muted)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.danger{border:1px solid var(--line);background:none;border-radius:8px;padding:6px 12px;color:var(--bad);font-weight:600;font-size:13px}
.danger.arm{background:var(--bad);color:#fff;border-color:var(--bad)}
.empty{background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:28px;text-align:center;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:12px}
.scroll{overflow-x:auto}
.gantt{min-width:640px;display:grid;gap:6px;position:relative}
.g-row{display:grid;grid-template-columns:190px 1fr;gap:10px;align-items:center}
.g-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;border:0;text-align:left;padding:0;color:var(--ink)}
.g-name:hover{color:var(--accent)}
.g-track{position:relative;height:24px;background:var(--soft);border-radius:6px}
.g-bar{position:absolute;top:3px;bottom:3px;border-radius:5px;background:var(--sc);min-width:8px}
.g-months{position:relative;height:20px;font-size:12px;color:var(--muted)}
.g-months span{position:absolute;top:0;border-left:1px solid var(--line);padding-left:4px;height:100%;white-space:nowrap}
.g-today{position:absolute;top:0;bottom:0;width:2px;background:var(--bad);opacity:.6;pointer-events:none}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--sc);margin-right:5px;vertical-align:-1px}
table.bt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:560px}
.bt th,.bt td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.bt th{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.bt td.n,.bt th.n{text-align:right}
.bt tr.area td{background:var(--soft);font-weight:700}
.bt tr.total td{font-weight:700;border-top:2px solid var(--ink);border-bottom:0}
.bt .over{color:var(--bad)} .bt .under{color:var(--good)}
.bt button{background:none;border:0;padding:0;color:var(--ink);text-align:left}
.bt button:hover{color:var(--accent);text-decoration:underline}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;z-index:9}
@media (max-width:560px){
  .wrap{padding:16px 14px 60px}
  .title{font-size:24px}
  .head{flex-wrap:wrap}
  .toggle{flex-basis:calc(100% - 70px)}
  .num{width:auto}
  select.status{margin-left:56px}
  .moves{margin-left:auto}
  .r.c{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px}
  .r.c .ci{grid-column:1/-1}
  .r.c.hdr{display:none}
  .r.m{grid-template-columns:minmax(0,1fr) 32px}
  .r.m input:first-child{grid-column:1/-1;font-weight:600}
  .panel input,.panel textarea,.panel select,.toolbar input,.toolbar select,.tile input.val{font-size:16px}
  .g-row{grid-template-columns:120px 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- added for the server version ---------- */
.top-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.14);min-width:230px;padding:6px;z-index:5;display:grid}
.menu-pop button,.menu-pop .mi{background:none;border:0;text-align:left;padding:9px 12px;border-radius:8px;font-weight:500}
.menu-pop button:hover{background:var(--soft)}
.menu-pop .who{font-size:13px;color:var(--muted);padding:8px 12px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.menu-pop .sep{border-top:1px solid var(--line);margin:4px 0}
.menu-pop button[aria-current="true"]{font-weight:700}
.menu-pop button[aria-current="true"]::after{content:" ✓";color:var(--accent)}
.role-pill{font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--warn-soft);color:var(--warn)}
.auth{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;width:min(380px,100%);display:grid;gap:14px}
.auth h1{margin:0;font:700 26px/1.2 var(--display)}
.auth p{margin:0;color:var(--muted);font-size:14px}
.auth label{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.auth input{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:10px 12px;font-size:16px;color:var(--ink)}
.auth .err{color:var(--bad);font-size:14px;font-weight:600;min-height:1em}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;place-items:center;padding:16px;z-index:8}
.modal{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;width:min(440px,100%);display:grid;gap:12px;max-height:calc(100vh - 32px);overflow:auto}
.modal h2{margin:0;font:700 20px/1.2 var(--display)}
.modal label{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.modal input,.modal select,.modal textarea{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:9px 11px;color:var(--ink);font-size:15px}
.modal .row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.modal .err{color:var(--bad);font-size:14px;font-weight:600}
.edited{font-size:12px;color:var(--muted)}
[disabled]{cursor:default}
.panel input[disabled],.panel textarea[disabled],.panel select[disabled]{background:transparent;border-style:dashed;opacity:1;color:var(--ink)}
@media (max-width:560px){.auth input,.modal input,.modal select,.modal textarea{font-size:16px}}
.sheet{width:min(560px,100%);gap:14px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sheet-head .x{width:36px}
.sheet-body{display:grid;gap:12px}
.sheet-body h3{margin:6px 0 0;font:700 15px/1.2 var(--display)}
ul.people,ul.feed{list-style:none;margin:0;padding:0;display:grid;gap:0}
ul.people li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
ul.people small{color:var(--muted)}
ul.people .acts{display:flex;gap:8px;align-items:center}
ul.people select{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:5px 8px;color:var(--ink)}
ul.feed li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;display:grid;gap:2px}
.invite-form{display:grid;gap:10px}
.invite-form label{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.invite-form input,.invite-form select{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:9px 11px;color:var(--ink);font-size:15px}
.linkbox{background:var(--accent-soft);border-radius:12px;padding:12px;display:grid;gap:8px}
.linkbox p{margin:0;font-size:14px}
.linkbox input{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:8px 10px;color:var(--ink);font-size:13px;width:100%}
.linkbox .row{display:flex;gap:8px;flex-wrap:wrap}
a.btn{text-decoration:none;color:inherit;display:inline-block}
.auth form .linkbtn{justify-self:center;font-size:14px}
@media (max-width:560px){.invite-form input,.invite-form select,ul.people select{font-size:16px}}

/* ---------- stage 3: vendors, contracts, payments ---------- */
.tabs{overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{white-space:nowrap}
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--warn);color:var(--card);font-size:11px;font-weight:800;margin-left:3px;vertical-align:1px}
.pill{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:1px 8px;background:var(--ss);color:var(--sc);text-transform:capitalize;white-space:nowrap}
.warn-t{color:var(--warn);font-weight:600}
.list>li.grp{font:700 13px/1.2 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:10px 4px 0}
.list>li.grp small{text-transform:none;letter-spacing:0;font-weight:500;margin-left:6px}
ul.mini{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
ul.mini li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
ul.mini .meta{display:inline}
.card.alert{border-color:var(--warn);background:var(--warn-soft)}
.card.alert h3{margin:0;font:700 16px/1.2 var(--display);color:var(--warn)}
table.kv{border-collapse:collapse;width:100%;max-width:440px;font-variant-numeric:tabular-nums;font-size:14px}
.kv td{padding:5px 0;border-bottom:1px solid var(--line)}
.kv td.n{text-align:right}
.kv tr.b td{font-weight:700}
.kv tr.warnrow td{color:var(--warn);font-weight:600;border-bottom:0}
.kv .over,.bt td.over{color:var(--bad)}
.co{display:grid;grid-template-columns:34px minmax(0,2fr) minmax(0,.9fr) minmax(0,1fr) auto 32px;gap:6px;align-items:center;padding:4px;border-radius:8px}
.co.pend{background:var(--warn-soft)}
.co-n{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.co-state{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.co-state small{color:var(--muted)}
.btn.ok{background:var(--good);border-color:var(--good);color:#fff;padding:5px 12px}
.btn.no{color:var(--bad);padding:5px 12px}
.panel .actions{display:flex;gap:8px;flex-wrap:wrap}
.bt .why{font-size:12px;color:var(--bad);font-weight:500}
.bt td.flag{width:1%}
.modal label[hidden]{display:none}
@media (max-width:560px){
  .co{grid-template-columns:30px minmax(0,1fr) 32px}
  .co input[data-f="description"]{grid-column:2/3}
  .co input[data-f="amount"],.co input[data-f="requested_date"],.co .co-state{grid-column:2/-1}
  .co>.x,.co>span:last-child{grid-column:3;grid-row:1}
}
.job.cc .jname{text-decoration:none}