/* ============================================================
   PrairieOps — Service Project workspace (SP-2)
   Ported VERBATIM from the approved mockup
   (mockups/service-project-workspace.html), scoped under .sp-overlay
   and sp- prefixed so it never collides with app styles. Bronze accent
   uses the app brand var. Full-page overlay (mirrors .task-detail-overlay
   open/close), not the mockup's phone frame.
   ============================================================ */

.sp-overlay{
  position:fixed; inset:0; z-index:400; background:#0b0b0c; color:#e8e8ec;
  display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .22s cubic-bezier(.2,.8,.2,1);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sp-bronze:var(--brand,#c49060);
}
.sp-overlay.open{ transform:translateY(0); }
.sp-overlay *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
.sp-overlay{
  --sp-nav:#1c1c20; --sp-card:#141417; --sp-card2:#1a1a1e; --sp-text:#e8e8ec;
  --sp-muted:#8c8c93; --sp-line:#2a2a30;
  --sp-not:#6b6b73; --sp-prog:#5b8def; --sp-block:#e0a24a; --sp-done:#4caf7d;
  --sp-cancel:#5a5a61; --sp-danger:#d9544e;
}

.sp-topbar{display:flex;align-items:center;gap:10px;padding:14px;background:var(--sp-nav);
  border-bottom:1px solid var(--sp-line);flex:0 0 auto;padding-top:max(14px,env(safe-area-inset-top))}
.sp-back{color:var(--sp-muted);font-size:24px;line-height:1;cursor:pointer;width:26px}
.sp-topttl{font-size:15px;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--sp-bronze);color:var(--sp-bronze);
  background:transparent;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;cursor:pointer}
.sp-pill:active{background:rgba(196,144,96,.08)}

.sp-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sp-scroll::-webkit-scrollbar{display:none}

.sp-phead{padding:16px 16px 12px;border-bottom:1px solid var(--sp-line)}
.sp-phead h1{font-size:19px;margin:0 0 4px;font-weight:650;line-height:1.25}
.sp-phead .sp-sub{font-size:12.5px;color:var(--sp-muted);margin-bottom:12px}
.sp-statusrow{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.sp-openbadge{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--sp-done);
  border:1px solid rgba(76,175,125,.4);border-radius:6px;padding:2px 8px;text-transform:uppercase}
.sp-openbadge.closed{color:var(--sp-muted);border-color:var(--sp-line)}
.sp-robanner{font-size:11px;color:var(--sp-muted);background:var(--sp-card);border:1px solid var(--sp-line);
  border-radius:8px;padding:7px 10px;margin-top:4px}
.sp-counts{display:flex;gap:14px;font-size:12px;color:var(--sp-muted);padding-top:2px;flex-wrap:wrap}
.sp-counts b{color:var(--sp-text);font-weight:600}
.sp-counts .sp-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}
.sp-meta{font-size:12px;color:var(--sp-muted)}
.sp-meta .sp-who{color:var(--sp-text)}

.sp-tabs{display:flex;padding:0 8px;background:var(--sp-nav);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--sp-line)}
.sp-tab{flex:1;text-align:center;padding:12px 0;font-size:13px;color:var(--sp-muted);cursor:pointer;
  border-bottom:2px solid transparent;font-weight:600}
.sp-tab.active{color:var(--sp-text);border-bottom-color:var(--sp-bronze)}

.sp-list{padding:10px 12px calc(108px + env(safe-area-inset-bottom,0px))}
.sp-job{background:var(--sp-card);border:1px solid var(--sp-line);border-radius:12px;padding:12px 13px;margin-bottom:9px;cursor:pointer}
.sp-job:active{background:var(--sp-card2)}
.sp-job .sp-jt{display:flex;align-items:flex-start;gap:8px}
.sp-job .sp-jtitle{flex:1;font-size:14px;font-weight:600;line-height:1.3}
.sp-job.cancelled .sp-jtitle{color:var(--sp-cancel);text-decoration:line-through}
.sp-spill{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border-radius:6px;
  padding:3px 8px;white-space:nowrap;border:1px solid;flex:0 0 auto}
.sp-s-not_started{color:var(--sp-not);border-color:#39393f}
.sp-s-in_progress{color:var(--sp-prog);border-color:rgba(91,141,239,.4)}
.sp-s-blocked{color:var(--sp-block);border-color:rgba(224,162,58,.45)}
.sp-s-done{color:var(--sp-done);border-color:rgba(76,175,125,.4)}
.sp-s-cancelled{color:var(--sp-cancel);border-color:#2f2f35}
.sp-job .sp-jmeta{font-size:11.5px;color:var(--sp-muted);margin-top:7px}
.sp-job .sp-jmeta .sp-lead{color:var(--sp-text)}
.sp-job .sp-blockwhy{font-size:11.5px;color:var(--sp-block);margin-top:6px}

.sp-feed{padding:12px 14px calc(108px + env(safe-area-inset-bottom,0px))}
.sp-ev{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--sp-line)}
.sp-ev .sp-icn{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;border:1px solid var(--sp-line);background:var(--sp-card)}
.sp-ev .sp-body{flex:1;font-size:13px;line-height:1.4}
.sp-ev .sp-body .sp-nm{font-weight:600}
.sp-ev .sp-body .sp-t{color:var(--sp-muted);font-size:11px;margin-top:3px}
.sp-ev .sp-body .sp-txt{color:var(--sp-text);margin-top:2px}
.sp-ev .sp-body .sp-arrow{color:var(--sp-muted)}
.sp-feedhint{font-size:11px;color:var(--sp-muted);padding:0 2px 12px;line-height:1.5}

/* parts tab */
.sp-ptab{padding:12px 14px calc(108px + env(safe-area-inset-bottom,0px))}
.sp-xlink{font-size:11.5px;color:var(--sp-muted);line-height:1.5;background:var(--sp-card);border:1px dashed var(--sp-line);border-radius:10px;padding:11px 12px;margin-bottom:14px}
.sp-xlink b{color:var(--sp-bronze)}
.sp-psec{margin-bottom:18px}
.sp-psec h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--sp-muted);margin:0 0 8px}
.sp-prow{background:var(--sp-card);border:1px solid var(--sp-line);border-radius:10px;padding:11px 12px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.sp-prow .sp-pn{flex:1}
.sp-prow .sp-nmn{font-size:13.5px;font-weight:600}
.sp-prow .sp-psub{font-size:11px;color:var(--sp-muted);margin-top:2px}
.sp-prow .sp-qty{font-size:13px;font-weight:700}
.sp-tagn{font-size:10px;font-weight:700;text-transform:uppercase;border-radius:5px;padding:2px 7px;border:1px solid;white-space:nowrap}
.sp-tagn.needed{color:var(--sp-block);border-color:rgba(224,162,58,.4)}
.sp-tagn.stock{color:var(--sp-prog);border-color:rgba(91,141,239,.35)}

.sp-compose{position:absolute;left:0;right:0;bottom:0;background:var(--sp-nav);border-top:1px solid var(--sp-line);
  padding:10px 12px max(10px,env(safe-area-inset-bottom));display:flex;gap:8px;align-items:center;z-index:7}
.sp-compose input{flex:1;background:var(--sp-card);border:1px solid var(--sp-line);border-radius:999px;
  color:var(--sp-text);padding:10px 14px;font-size:13px;outline:none}
.sp-compose .sp-send{color:var(--sp-bronze);font-weight:700;font-size:13px;cursor:pointer;padding:6px}
.sp-compose .sp-send[disabled]{opacity:.3}

.sp-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .18s;z-index:20}
.sp-scrim.show{opacity:1;pointer-events:auto}
.sp-tray{position:absolute;left:0;right:0;bottom:0;background:var(--sp-nav);border-top:1px solid var(--sp-line);
  border-radius:18px 18px 0 0;transform:translateY(100%);transition:transform .22s cubic-bezier(.2,.8,.2,1);
  z-index:21;padding:8px 14px max(16px,env(safe-area-inset-bottom));max-height:86%;overflow-y:auto}
.sp-tray.show{transform:translateY(0)}
.sp-grab{width:38px;height:4px;border-radius:2px;background:#3a3a40;margin:8px auto 12px}
.sp-tray h3{margin:0 0 2px;font-size:15px}
.sp-tray .sp-tsub{font-size:12px;color:var(--sp-muted);margin-bottom:14px;line-height:1.45}
.sp-act{display:flex;align-items:center;gap:12px;width:100%;background:var(--sp-card);border:1px solid var(--sp-line);
  color:var(--sp-text);border-radius:12px;padding:14px;font-size:14px;font-weight:600;margin-bottom:9px;cursor:pointer;text-align:left}
.sp-act:active{background:var(--sp-card2)}
.sp-act .sp-k{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.sp-act small{display:block;font-weight:400;color:var(--sp-muted);font-size:11.5px;margin-top:2px}
.sp-act.danger{color:var(--sp-danger)}
.sp-act[disabled]{opacity:.34;cursor:not-allowed}
.sp-trayinput{width:100%;background:var(--sp-card);border:1px solid var(--sp-line);border-radius:12px;color:var(--sp-text);
  padding:12px;font-size:13px;outline:none;margin-bottom:10px;font-family:inherit}
.sp-footacts{display:flex;gap:10px;border-top:1px solid var(--sp-line);margin-top:6px;padding-top:12px}
.sp-footacts .sp-fa{flex:1;text-align:center;padding:11px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--sp-line);color:var(--sp-muted)}
.sp-footacts .sp-fa.go{border-color:var(--sp-bronze);color:var(--sp-bronze)}

.sp-toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:#26262b;
  border:1px solid var(--sp-line);color:var(--sp-text);font-size:12.5px;padding:10px 16px;border-radius:10px;
  opacity:0;transition:.2s;z-index:40;max-width:88%;text-align:center;line-height:1.4}
.sp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.sp-toast.warn{border-color:rgba(224,162,58,.6)}

/* bottom dock — matched 1:1 to the app's mobile #sidebar (theme-v2.css Fix 2/3):
   bg #1c1c1e, top hairline, 8px top + (26px+safe-area) bottom padding, subtle
   vertical divider between items, 24px (2-line) label reserve. */
.sp-dock{position:absolute;left:0;right:0;bottom:0;z-index:8;background:#1c1c1e;border-top:1px solid rgba(255,255,255,0.08)}
.sp-navrow{display:flex;padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px)) 0}
.sp-navrow .sp-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:50px;padding:6px;color:#fff;background:transparent;border:0;cursor:pointer;font-family:inherit}
.sp-navrow .sp-nav-item + .sp-nav-item{border-left:1px solid rgba(255,255,255,0.055)}
.sp-navrow .sp-nav-item:active{opacity:.6}
.sp-navrow .sp-nav-icon{height:22px;display:flex;align-items:center;justify-content:center}
.sp-navrow .sp-nav-icon svg{width:22px;height:22px;display:block}
.sp-navrow .sp-nav-label{font-size:10px;font-weight:500;color:#fff;line-height:1.2;text-align:center}

.sp-hidden{display:none!important}
.sp-gate{padding:40px 24px;text-align:center;color:var(--sp-muted)}
.sp-gate .sp-big{font-size:15px;color:var(--sp-text);margin-bottom:8px}

/* Service Project card on the Service Board (buildServiceProjectCard) */
.service-project-card{border-color:rgba(196,144,96,.5)!important}
.service-project-card .sp-card-tag{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand,#c49060);border:1px solid rgba(196,144,96,.45);border-radius:5px;padding:2px 7px;display:inline-block;margin-bottom:8px}
.service-project-card .sp-card-title{font-size:14.5px;font-weight:600;margin-bottom:5px}
.service-project-card .sp-card-meta{font-size:12px;color:#8c8c93}