/* ==================================================================
   Job progress: the bar on a row, the daily ask, and the phase list.
   Status carries a shape as well as a colour — a bar that is late is
   also striped, and an overdue phase wears a word — because colour on
   its own is not a signal everyone can read.
   ================================================================== */

/* the bar that rides on a job row */
#bpx .bpp-bar{display:flex;align-items:center;gap:8px}
#bpx .bpp-track{flex:1;min-width:52px;height:8px;border-radius:99px;background:var(--soft);overflow:hidden}
#bpx .bpp-track i{display:block;height:100%;border-radius:99px;background:var(--bpc-s1,#2f6bff);transition:width .35s ease}
#bpx .bpp-bar b{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);min-width:32px;text-align:right}
#bpx .bpp-bar.done .bpp-track i{background:#0f7a3d}
/* late is striped as well as amber, so the state survives a colourblind
   reader and a black-and-white print */
#bpx .bpp-bar.late .bpp-track i{background:repeating-linear-gradient(135deg,#b45309 0 6px,#d08a3f 6px 12px)}
#bpx .bpp-sub{font-size:11.5px;color:var(--grey);margin-top:3px}
#bpx .bpp-late{font-style:normal;font-weight:650;color:#b45309}
#bpx.bpx-dark .bpp-late{color:#e0a555}
@media(prefers-reduced-motion:reduce){#bpx .bpp-track i{transition:none}}

/* ---------- the daily ask ---------- */
#bpx .bpp-ask{border:1px solid #f0c98a;background:#fffaf2;border-radius:14px;padding:15px 16px;margin-bottom:16px}
#bpx.bpx-dark .bpp-ask{border-color:#5a4426;background:#221a10}
#bpx .bpp-ask-h{display:flex;gap:12px;align-items:flex-start}
#bpx .bpp-ask-h .ms{font-size:24px;color:#b45309;flex:none}
#bpx.bpx-dark .bpp-ask-h .ms{color:#e0a555}
#bpx .bpp-ask-h b{display:block;font-size:14.5px}
#bpx .bpp-ask-h span{display:block;font-size:12.5px;line-height:1.55;color:var(--grey);margin-top:3px}
#bpx .bpp-ask-rows{display:flex;flex-direction:column;gap:7px;margin-top:12px}
#bpx .bpp-ask-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--card,#fff);border:1px solid var(--line);border-radius:11px;padding:9px 12px}
#bpx .bpp-ask-w{flex:1;min-width:180px}
#bpx .bpp-ask-w b{display:block;font-size:13.5px}
#bpx .bpp-ask-w span{display:block;font-size:11.5px;color:var(--grey);margin-top:1px}
#bpx .bpp-ask-b{display:flex;gap:7px;flex:none}

/* ---------- the phase list ---------- */
#bpx .bpp-panel{display:flex;flex-direction:column;gap:14px}
#bpx .bpp-phases{display:flex;flex-direction:column;gap:6px}
#bpx .bpp-ph{display:flex;align-items:center;gap:11px;border:1px solid var(--line);
  border-radius:11px;padding:9px 12px;background:var(--card,#fff)}
#bpx .bpp-ph.done{background:linear-gradient(0deg,rgba(15,122,61,.05),rgba(15,122,61,.05)),var(--card,#fff);border-color:#9fd9b8}
#bpx .bpp-ph.late{border-color:#f0c98a;background:linear-gradient(0deg,rgba(180,83,9,.05),rgba(180,83,9,.05)),var(--card,#fff)}
#bpx .bpp-ph-t{flex:1;min-width:0}
#bpx .bpp-ph-t b{display:block;font-size:13.5px}
#bpx .bpp-ph.done .bpp-ph-t b{text-decoration:line-through;text-decoration-color:var(--grey-l,var(--grey));color:var(--grey)}
#bpx .bpp-ph-t span{display:block;font-size:11.5px;color:var(--grey);margin-top:1px}
#bpx .bpp-tick{flex:none;width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line);
  background:var(--card,#fff);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
#bpx .bpp-tick .ms{font-size:16px;color:#fff}
#bpx .bpp-ph.done .bpp-tick{background:#0f7a3d;border-color:#0f7a3d}
#bpx .bpp-tick:hover{border-color:var(--blue)}
#bpx .bpp-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:10px}
#bpx .bpp-foot .bpx-mut{margin-left:auto;font-size:12px}

#bpx .bpp-none{border:1px dashed var(--line);border-radius:12px;padding:18px;background:var(--tint,#f4f6fa)}
#bpx .bpp-none b{display:block;font-size:14px}
#bpx .bpp-none span{display:block;font-size:12.5px;line-height:1.55;color:var(--grey);margin:4px 0 12px}

/* ---------- how many days did it slip ---------- */
#bpx .bpp-slip{display:flex;gap:9px;margin:12px 0 4px}
#bpx .bpp-slipbtn{flex:1;border:1px solid var(--line);border-radius:12px;background:var(--card,#fff);
  padding:12px 8px;cursor:pointer;font:inherit;color:inherit;text-align:center}
#bpx .bpp-slipbtn:hover{border-color:var(--blue);background:var(--blue-l,#eef4ff)}
#bpx .bpp-slipbtn b{display:block;font-size:21px;font-weight:750;letter-spacing:-.02em}
#bpx .bpp-slipbtn span{display:block;font-size:11.5px;color:var(--grey);margin-top:2px}
#bpx .bpp-after{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
#bpx .bpp-after .bpx-btn{margin:0;width:auto;flex:1;min-width:170px}

@media(max-width:560px){
  #bpx .bpp-ask-b{width:100%}
  #bpx .bpp-ask-b .bpx-rowbtn{flex:1}
}

/* ---------- the phase editor ---------- */
#bpx .bpp-ed{display:flex;flex-direction:column;gap:6px}
#bpx .bpp-er{display:grid;grid-template-columns:22px minmax(0,1fr) 92px 170px auto;gap:8px;align-items:center}
#bpx .bpp-er-n{font-size:12px;font-weight:600;color:var(--grey);text-align:center}
#bpx .bpp-er input{margin:0 !important;width:100%;box-sizing:border-box}
#bpx .bpp-er-d,#bpx .bpp-er-dl{display:flex;align-items:center;gap:6px;margin:0 !important;font-size:12px;color:var(--grey);font-weight:500}
#bpx .bpp-er-d input{width:56px}
#bpx .bpp-er-dl span{white-space:nowrap}
#bpx .bpp-er-mv{display:flex;gap:4px}
#bpx .bpp-er-mv button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-size:13px;line-height:1}
#bpx .bpp-er-mv button:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
#bpx .bpp-er-mv button:disabled{opacity:.35;cursor:default}
#bpx .bpp-ed-acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
#bpx .bpp-ed-acts .bpx-rowbtn{margin:0}
#bpx .bpp-ed-save{display:flex !important;align-items:center;gap:8px;font-weight:500 !important;margin-top:14px !important}
@media(max-width:640px){#bpx .bpp-er{grid-template-columns:22px 1fr 92px;}#bpx .bpp-er-dl{grid-column:2/4}#bpx .bpp-er-mv{grid-column:2/4}}
#bpx label.bpp-ed-save{display:flex !important;flex-direction:row;justify-content:flex-start;gap:8px;width:auto}
#bpx label.bpp-ed-save input{width:auto !important;margin:0 !important;flex:none}