/* Stax Projects — client progress page. Inherits theme variables; redeclares
   fallbacks so it also works if a different theme is active. */
.stax-progress{
  --navy:#102A56;--ink:#0B1E40;--sky:#38BDF8;--sky-deep:#0EA5E9;
  --ice:#EFF6FF;--ice-2:#F4F7FC;--slate:#5B6B86;
  --border-card:rgba(16,42,86,.10);--sky-12:rgba(56,189,248,.12);
  --font-heading:'Quicksand',ui-rounded,system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  --shadow-card:0 8px 24px rgba(16,42,86,.08);
  --ease:cubic-bezier(.22,1,.36,1);
  font-family:var(--font-body);color:var(--slate);background:var(--ice-2);
  min-height:70vh;padding:56px 20px 96px;
}
.stax-progress *{box-sizing:border-box;}
.sp-container{max-width:820px;margin:0 auto;}
.stax-progress h1,.stax-progress h2{font-family:var(--font-heading);color:var(--navy);margin:0;}
.stax-progress .eyebrow{display:inline-block;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-deep);}
.stax-progress .tag{display:inline-flex;align-self:flex-start;font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--sky-12);color:var(--sky-deep);}

/* buttons (mirror theme) */
.stax-progress .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:600;border-radius:999px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .24s var(--ease),background .24s var(--ease),box-shadow .24s var(--ease);}
.stax-progress .btn-sm{padding:8px 16px;font-size:14px;}
.stax-progress .btn-lg{padding:14px 26px;font-size:16px;}
.stax-progress .btn-primary{background:var(--navy);color:#fff;}
.stax-progress .btn-primary:hover{background:#0d2249;transform:translateY(-2px);box-shadow:var(--shadow-card);}
.stax-progress .btn-secondary{background:transparent;color:var(--navy);border-color:var(--navy);}
.stax-progress .btn-secondary:hover{background:var(--ice);}

/* header */
.sp-head{margin-bottom:28px;}
.sp-back{display:inline-block;font-family:var(--font-heading);font-weight:700;font-size:18px;color:var(--navy);text-decoration:none;margin-bottom:22px;opacity:.7;}
.sp-back:hover{opacity:1;}
.sp-head h1{font-size:clamp(30px,5vw,44px);letter-spacing:-.02em;margin:12px 0 6px;}
.sp-client{font-size:16px;margin:0;color:var(--slate);}

/* cards */
.sp-card{background:#fff;border:1px solid var(--border-card);border-radius:20px;box-shadow:var(--shadow-card);padding:26px;margin-bottom:22px;}

/* progress bar */
.sp-bar-card .sp-bar-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;}
.sp-bar-label{font-weight:600;color:var(--navy);font-size:15px;}
.sp-bar-pct{font-family:var(--font-heading);font-weight:700;font-size:32px;color:var(--navy);letter-spacing:-.02em;}
.sp-bar{height:14px;background:var(--ice);border-radius:999px;overflow:hidden;}
.sp-bar-fill{height:100%;background:var(--sky);border-radius:999px;transition:width .6s var(--ease);}
.sp-progress-form{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap;border-top:1px dashed var(--border-card);padding-top:16px;}
.sp-progress-form label{font-weight:600;color:var(--navy);font-size:14px;}
.sp-progress-form input[type=range]{flex:1;min-width:180px;accent-color:var(--sky-deep);}
.sp-progress-form output{font-weight:600;color:var(--sky-deep);min-width:44px;}

/* admin note */
.sp-admin-note{background:#EFF6FF;border:1px solid var(--border-card);border-radius:14px;padding:14px 18px;font-size:14px;color:var(--navy);margin-bottom:22px;}
.sp-warn{color:#E0533D;}

/* forms */
.stax-progress label{display:block;font-weight:600;color:var(--navy);font-size:14px;margin-bottom:6px;}
.stax-progress textarea,.stax-progress input[type=text],.stax-progress input[type=date],.stax-progress input[type=number],.stax-progress input[type=password],.stax-progress select,.stax-progress input[type=file]{
  width:100%;font-family:var(--font-body);font-size:15px;color:var(--navy);
  border:1.5px solid var(--border-card);border-radius:12px;padding:11px 14px;background:#fff;
}
.stax-progress textarea:focus,.stax-progress input:focus,.stax-progress select:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-12);}
.sp-add h2{font-size:22px;margin-bottom:16px;}
.sp-add-form>label{margin-top:0;}
.sp-add-form textarea{margin-bottom:14px;}
.sp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;}
.sp-row-bottom{grid-template-columns:2fr 1fr;}
.sp-add-form button{margin-top:6px;}

/* updates */
.sp-updates h2{font-size:24px;margin:6px 0 18px;}
.sp-empty{color:var(--slate);font-size:16px;}
.sp-phase{margin-bottom:24px;}
.sp-phase-head{margin-bottom:12px;}
.sp-tasklist{list-style:none;margin:0;padding:0;position:relative;}
.sp-task{background:#fff;border:1px solid var(--border-card);border-radius:16px;box-shadow:var(--shadow-card);padding:18px 20px;margin-bottom:12px;}
.sp-task-row{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
.sp-status{font-weight:600;font-size:12px;padding:4px 11px;border-radius:999px;}
.sp-date{font-size:13px;color:var(--slate);}
.sp-del{margin-left:auto;font-size:13px;color:#E0533D;text-decoration:none;}
.sp-del:hover{text-decoration:underline;}
.sp-task-text{margin:0;font-size:15.5px;line-height:1.6;color:#26344d;}
.sp-task-img{display:block;margin-top:12px;}
.sp-task-img img{max-width:260px;border-radius:12px;border:1px solid var(--border-card);}

/* comments */
.sp-comments{margin-top:10px;}
.sp-comments h2{font-size:24px;margin:6px 0 16px;}
.sp-comment-list{display:flex;flex-direction:column;gap:12px;margin-bottom:22px;}
.sp-comment{padding:14px 18px;border-radius:16px;max-width:88%;}
.sp-comment.is-admin{background:var(--navy);color:#fff;align-self:flex-start;border-bottom-left-radius:4px;}
.sp-comment.is-client{background:#fff;border:1px solid var(--border-card);align-self:flex-end;border-bottom-right-radius:4px;}
.sp-comment-head{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;margin-bottom:5px;opacity:.85;}
.sp-comment.is-admin .sp-comment-head{color:rgba(255,255,255,.8);}
.sp-comment.is-client .sp-comment-head strong{color:var(--navy);}
.sp-comment p{margin:0;font-size:15px;line-height:1.55;}
.sp-comment-form{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--border-card);border-radius:18px;padding:20px;box-shadow:var(--shadow-card);}
.sp-comment-form button{align-self:flex-start;}

/* gate */
.sp-gate{background:#fff;border:1px solid var(--border-card);border-radius:24px;box-shadow:var(--shadow-card);padding:48px 36px;text-align:center;max-width:460px;margin:10px auto;}
.sp-lock{font-size:40px;margin-bottom:10px;}
.sp-gate h2{font-size:26px;margin-bottom:10px;}
.sp-gate p{font-size:16px;line-height:1.6;margin:0 auto 22px;max-width:360px;}
.sp-gate-form{display:flex;flex-direction:column;gap:12px;}
.sp-gate-form input{text-align:center;}
.sp-error{color:#E0533D;font-weight:600;}

@media(max-width:620px){
  .sp-row,.sp-row-bottom{grid-template-columns:1fr;}
  .sp-comment{max-width:100%;}
}