:root{
  --copal-ink:#111111;
  --copal-muted:#6f6a62;
  --copal-line:#e8e1d7;
  --copal-soft:#f7f4ee;
  --copal-card:#ffffff;
  --copal-shadow:0 28px 80px rgba(25,20,14,.08);
  --copal-radius:28px;
}
.copal-shell,.copal-shell *{box-sizing:border-box}
.copal-shell{
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding:24px;
  color:var(--copal-ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.copal-product-card{
  background:rgba(255,255,255,.9);
  border:1px solid var(--copal-line);
  border-radius:var(--copal-radius);
  box-shadow:var(--copal-shadow);
  padding:28px;
}
.copal-start-card{max-width:860px;margin:0 auto}.copal-flow{min-height:420px}.copal-screen{animation:copal-enter .18s ease both}.copal-home-screen{padding:56px 12px;text-align:center;max-width:760px;margin:0 auto}.copal-eyebrow{margin:0 0 12px;color:var(--copal-muted);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800}.copal-screen h1,.copal-goal-hero h1{font-size:clamp(38px,7vw,72px);line-height:.94;letter-spacing:-.07em;margin:0 0 18px}.copal-page-head h2,.copal-section-card h2,.copal-today-card h2,.copal-progress-summary h2{font-size:clamp(24px,4vw,38px);line-height:1;letter-spacing:-.05em;margin:0 0 12px}.copal-lead,.copal-page-head p{max-width:620px;margin:0 auto 28px;color:var(--copal-muted);font-size:17px;line-height:1.65}.copal-muted{color:var(--copal-muted)}
.copal-steps{display:flex;gap:8px;list-style:none;margin:0 0 28px;padding:0}.copal-steps li{position:relative;flex:1;height:4px;border-radius:999px;background:#e9e1d6}.copal-steps li.is-active,.copal-steps li.is-done{background:var(--copal-ink)}.copal-steps span{position:absolute;top:10px;left:0;font-size:11px;color:var(--copal-muted);white-space:nowrap}.copal-steps li.is-active span,.copal-steps li.is-done span{color:var(--copal-ink);font-weight:700}
.copal-goal-input-card,.copal-answer-card{border:1px solid var(--copal-line);background:#fff;border-radius:24px;padding:16px;text-align:left;box-shadow:0 10px 30px rgba(25,20,14,.04)}.copal-goal-input-card label{display:block;font-size:13px;font-weight:800;color:var(--copal-muted);margin:0 0 10px}.copal-input-row{display:flex;gap:10px}.copal-input-row input,.copal-answer-card textarea{width:100%;border:1px solid var(--copal-line);background:#fff;border-radius:18px;color:var(--copal-ink);font-size:17px;outline:0;padding:16px 17px}.copal-answer-card textarea{display:block;resize:vertical;min-height:150px;line-height:1.55}.copal-input-row input:focus,.copal-answer-card textarea:focus{border-color:var(--copal-ink);box-shadow:0 0 0 4px rgba(17,17,17,.07)}.copal-button{appearance:none;border:0;border-radius:18px;background:var(--copal-ink);color:#fff;cursor:pointer;font-size:15px;font-weight:800;padding:16px 22px;white-space:nowrap}.copal-button.ghost{background:#fff;color:var(--copal-ink);border:1px solid var(--copal-line)}.copal-button:hover{transform:translateY(-1px)}
.copal-clarify-screen,.copal-blueprint-screen,.copal-dashboard-screen{padding:36px 6px}.copal-clarify-screen h1{font-size:clamp(30px,6vw,58px);max-width:760px}.copal-wizard-actions{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:14px;flex-wrap:wrap}.copal-blueprint-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}.copal-section-card{background:#fff;border:1px solid var(--copal-line);border-radius:24px;padding:22px}.copal-section-card p{color:var(--copal-muted);line-height:1.65;margin:0}.copal-clean-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}.copal-clean-list li{position:relative;padding-left:20px;color:var(--copal-muted);line-height:1.5}.copal-clean-list li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:999px;background:var(--copal-ink)}
.copal-today-card{background:var(--copal-ink);color:#fff;border-radius:28px;padding:28px;margin:20px 0}.copal-today-card .copal-eyebrow{color:rgba(255,255,255,.58)}.copal-today-card p{color:rgba(255,255,255,.72);line-height:1.65;margin:8px 0 0}.copal-output-box{margin-top:18px;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:14px 16px;background:rgba(255,255,255,.06)}.copal-output-box strong{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px}.copal-output-box span{display:block;color:#fff}.copal-today-card .copal-button.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.copal-goal-hero{padding:16px 0 20px}.copal-progress-hero{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:16px}.copal-progress-hero strong{font-size:42px;letter-spacing:-.06em}.copal-progress-bar{height:10px;background:#eee5da;border-radius:999px;overflow:hidden}.copal-progress-bar i{display:block;height:100%;background:var(--copal-ink);border-radius:999px}.copal-today-card .copal-progress-bar{background:rgba(255,255,255,.14)}.copal-today-card .copal-progress-bar i{background:#fff}
.copal-milestones{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}.copal-milestones li{display:flex;gap:12px;align-items:flex-start;padding:14px 15px;border:1px solid var(--copal-line);border-radius:16px;background:#fff;color:var(--copal-ink);line-height:1.45}.copal-milestones li span{width:19px;height:19px;border-radius:999px;border:2px solid #cfc7bc;display:inline-block;flex:0 0 auto;margin-top:1px}.copal-milestones li.is-doing span{border-color:var(--copal-ink);background:linear-gradient(90deg,var(--copal-ink) 50%,transparent 50%)}.copal-milestones li.is-done span{border-color:var(--copal-ink);background:var(--copal-ink);position:relative}.copal-milestones li.is-done span:after{content:'✓';position:absolute;color:#fff;font-size:12px;left:3px;top:-1px}.copal-goal-list{display:grid;gap:14px;margin-top:22px}.copal-goal-item{display:grid;grid-template-columns:1fr 170px;gap:18px;align-items:center;border:1px solid var(--copal-line);border-radius:22px;background:#fff;padding:20px}.copal-goal-item h3{font-size:22px;line-height:1.05;letter-spacing:-.04em;margin:7px 0}.copal-status-pill{display:inline-flex;margin:0;border:1px solid var(--copal-line);border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--copal-muted)}.copal-next-line{margin:0;color:var(--copal-muted)}.copal-progress-block span{font-weight:900;font-size:26px;letter-spacing:-.04em}.copal-progress-block .copal-progress-bar{margin-top:8px}.copal-empty-state{background:#fff;border:1px solid var(--copal-line);border-radius:22px;padding:22px}.copal-error{margin-top:14px;color:#8a1f11;background:#fff2f0;border:1px solid #ffd5cf;padding:13px 15px;border-radius:16px}.copal-loading,.copal-mini-loading{display:inline-flex;align-items:center;gap:10px;color:var(--copal-muted);font-weight:700}.copal-loading span,.copal-mini-loading:before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid #d9d0c4;border-top-color:var(--copal-ink);animation:copal-spin .8s linear infinite}@keyframes copal-spin{to{transform:rotate(360deg)}}@keyframes copal-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Admin compatibility */.copal-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.copal-stat{font-size:42px;margin:0}.copal-admin-goal-system .copal-progress,.copal-progress{height:10px;background:#eee5da;border-radius:999px;overflow:hidden}.copal-progress span{display:block;height:100%;background:var(--copal-ink)}.copal-admin-milestones{margin-left:0;padding-left:0;list-style:none}.copal-admin-milestones li{padding:8px 0;border-bottom:1px solid #e5e7eb}
@media(max-width:720px){.copal-shell{padding:14px}.copal-product-card{padding:18px;border-radius:24px}.copal-home-screen{padding:36px 0}.copal-steps span{display:none}.copal-input-row,.copal-goal-item,.copal-progress-hero{grid-template-columns:1fr;display:grid}.copal-button{width:100%}.copal-blueprint-grid{grid-template-columns:1fr}.copal-wizard-actions{display:grid;grid-template-columns:1fr;width:100%}.copal-screen h1,.copal-goal-hero h1{font-size:clamp(34px,12vw,54px)}.copal-today-card,.copal-section-card{border-radius:22px;padding:20px}.copal-flow{min-height:360px}}

/* Phase 5 — User Validation */
.copal-validation-card textarea {
  width: 100%;
  margin-top: 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 14px;
  padding: 12px 14px;
  font: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.copal-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.copal-success {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(34, 197, 94, .10);
  color: #166534;
  font-weight: 700;
}
.copal-metric-large{font-size:44px;font-weight:800;letter-spacing:-.04em;margin:8px 0 4px}.copal-checklist{margin:0;padding-left:20px}.copal-checklist li{margin:6px 0}.copal-admin-wrap .widefat td,.copal-admin-wrap .widefat th{vertical-align:top}.copal-admin-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:22px;margin:18px 0;box-shadow:0 8px 24px rgba(15,23,42,.04)}

/* Phase 7: Desktop Webapp Workspace */
.copal-desktop-app,.copal-desktop-app *{box-sizing:border-box}
.copal-desktop-app{
  --desktop-border:#e8e1d7;
  --desktop-soft:#f7f4ee;
  --desktop-ink:#111111;
  --desktop-muted:#746f67;
  width:min(1440px,calc(100vw - 32px));
  min-height:calc(100vh - 48px);
  margin:24px auto;
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  background:#fff;
  border:1px solid var(--desktop-border);
  border-radius:32px;
  box-shadow:0 28px 90px rgba(25,20,14,.09);
  overflow:hidden;
  color:var(--desktop-ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.copal-desktop-sidebar{
  background:linear-gradient(180deg,#fbf8f2,#f5efe5);
  border-right:1px solid var(--desktop-border);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:22px;
  min-height:760px;
}
.copal-desktop-brand{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.copal-desktop-brand span{font-size:22px;font-weight:900;letter-spacing:-.04em}
.copal-desktop-brand small{color:var(--desktop-muted);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding-top:6px}
.copal-desktop-new-goal{background:rgba(255,255,255,.72);border:1px solid var(--desktop-border);border-radius:22px;padding:14px;display:grid;gap:10px}
.copal-desktop-new-goal label,.copal-desktop-section-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:var(--desktop-muted);margin:0}
.copal-desktop-new-goal input{width:100%;border:1px solid var(--desktop-border);border-radius:16px;padding:13px 14px;background:#fff;font-size:14px;outline:none}
.copal-desktop-goals{display:grid;gap:10px;align-content:start;overflow:auto;padding-right:2px}
.copal-desktop-goal{width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:18px;padding:14px;display:grid;gap:6px;cursor:pointer;color:var(--desktop-ink)}
.copal-desktop-goal:hover,.copal-desktop-goal.is-active{background:#fff;border-color:var(--desktop-border);box-shadow:0 10px 30px rgba(25,20,14,.05)}
.copal-desktop-goal span{font-size:14px;font-weight:850;line-height:1.25}
.copal-desktop-goal small,.copal-desktop-empty{font-size:12px;color:var(--desktop-muted);line-height:1.35}
.copal-desktop-main{background:#fff;min-width:0;padding:28px;overflow:auto}
.copal-desktop-welcome{min-height:680px;display:grid;align-content:center;justify-items:center;text-align:center;padding:48px}
.copal-desktop-welcome h1{font-size:clamp(52px,7vw,94px);letter-spacing:-.08em;line-height:.9;margin:0 0 18px}
.copal-desktop-welcome p:not(.copal-eyebrow){max-width:580px;color:var(--desktop-muted);font-size:18px;line-height:1.65;margin:0}
.copal-desktop-goal-workspace{display:grid;gap:24px}
.copal-desktop-workspace-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:8px 0 24px;border-bottom:1px solid var(--desktop-border)}
.copal-desktop-workspace-head h1{font-size:clamp(38px,4.8vw,72px);letter-spacing:-.075em;line-height:.94;margin:0 0 12px;max-width:860px}
.copal-desktop-progress-ring{width:124px;height:124px;border-radius:50%;border:1px solid var(--desktop-border);background:var(--desktop-soft);display:grid;place-content:center;text-align:center;flex:0 0 auto}
.copal-desktop-progress-ring strong{font-size:30px;letter-spacing:-.05em;line-height:1;font-weight:950}
.copal-desktop-progress-ring span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--desktop-muted);font-weight:850;margin-top:5px}
.copal-desktop-content-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.copal-desktop-panel{border:1px solid var(--desktop-border);border-radius:28px;background:#fff;padding:24px;box-shadow:0 16px 48px rgba(25,20,14,.05)}
.copal-desktop-blueprint-panel{display:grid;gap:22px}
.copal-desktop-panel h2{font-size:30px;letter-spacing:-.055em;line-height:1;margin:0 0 14px}
.copal-desktop-block{border-top:1px solid var(--desktop-border);padding-top:18px}
.copal-desktop-block:first-of-type{border-top:0;padding-top:0}
.copal-desktop-block h3,.copal-desktop-progress-box h3{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--desktop-muted);font-weight:900;margin:0 0 10px}
.copal-desktop-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.copal-desktop-list li{position:relative;padding-left:18px;color:#2b2722;line-height:1.5}
.copal-desktop-list li:before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:#111}
.copal-desktop-action-panel{position:sticky;top:24px;display:grid;gap:16px;background:linear-gradient(180deg,#111,#27221b);color:#fff;border-color:#111}
.copal-desktop-action-panel .copal-eyebrow,.copal-desktop-action-panel p{color:rgba(255,255,255,.72)}
.copal-desktop-action-panel h2{font-size:34px;color:#fff;margin-bottom:2px}
.copal-desktop-action-panel .copal-output-box{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}
.copal-desktop-action-panel .copal-output-box span{color:rgba(255,255,255,.8)}
.copal-desktop-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.copal-desktop-actions .copal-button.ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.18)}
.copal-desktop-progress-box{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;margin-top:4px}
.copal-desktop-progress-box .copal-progress-bar{background:rgba(255,255,255,.16)}
.copal-desktop-progress-box .copal-progress-bar i{background:#fff}
.copal-desktop-result .copal-mini-loading,.copal-desktop-result .copal-success,.copal-desktop-result .copal-error{border-radius:14px;padding:10px 12px;font-size:13px;background:rgba(255,255,255,.1);color:#fff}
@media (max-width: 1024px){
  .copal-desktop-app{grid-template-columns:1fr;width:min(100%,calc(100vw - 20px));margin:10px auto;border-radius:24px}
  .copal-desktop-sidebar{min-height:auto;border-right:0;border-bottom:1px solid var(--desktop-border)}
  .copal-desktop-goals{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));max-height:none}
  .copal-desktop-content-grid{grid-template-columns:1fr}
  .copal-desktop-action-panel{position:static}
}
@media (max-width: 640px){
  .copal-desktop-main,.copal-desktop-sidebar{padding:16px}
  .copal-desktop-workspace-head{display:grid}
  .copal-desktop-progress-ring{width:104px;height:104px}
  .copal-desktop-actions{grid-template-columns:1fr}
}


/* Phase 8: Desktop Workspace should behave like a real webapp, not a mobile card. */
.copal-desktop-app{
  width:100vw !important;
  max-width:none !important;
  min-height:100vh !important;
  height:100vh;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  grid-template-columns:320px minmax(0,1fr) !important;
}
.copal-desktop-sidebar{
  min-height:100vh !important;
  height:100vh;
  overflow:auto;
  padding:24px !important;
}
.copal-desktop-main{
  height:100vh;
  overflow:auto;
  padding:32px !important;
}
.copal-desktop-content-grid{
  grid-template-columns:minmax(0,1fr) 400px !important;
  gap:28px !important;
}
.copal-desktop-workspace-head h1{
  max-width:980px;
}
.copal-desktop-panel{
  border-radius:24px;
}
.copal-desktop-welcome{
  min-height:calc(100vh - 64px);
}
@media (min-width: 1440px){
  .copal-desktop-app{
    grid-template-columns:340px minmax(0,1fr) !important;
  }
  .copal-desktop-content-grid{
    grid-template-columns:minmax(0,1fr) 420px !important;
  }
}
@media (max-width: 960px){
  body:has(.copal-desktop-app){overflow:auto;}
  .copal-desktop-app{
    width:100% !important;
    min-height:100vh !important;
    height:auto;
    grid-template-columns:1fr !important;
  }
  .copal-desktop-sidebar{
    height:auto;
    min-height:auto !important;
    border-right:0;
    border-bottom:1px solid var(--desktop-border);
  }
  .copal-desktop-main{
    height:auto;
    min-height:70vh;
  }
  .copal-desktop-content-grid{
    grid-template-columns:1fr !important;
  }
  .copal-desktop-action-panel{position:static;}
}


/* Phase 9: definitive desktop webapp layout fix.
   This uses fixed positioning so the desktop app cannot be squeezed by any WordPress theme container. */
html.copal-desktop-html,
body.copal-desktop-runtime,
body.copal-desktop-page{
  margin:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  background:#fff !important;
}
body.copal-desktop-runtime #wpadminbar ~ *,
body.copal-desktop-page #wpadminbar ~ *{ }
.copal-desktop-app{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  width:100vw !important;
  max-width:none !important;
  min-width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  max-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  display:grid !important;
  grid-template-columns:320px minmax(0,1fr) !important;
  overflow:hidden !important;
  background:#fff !important;
}
body.admin-bar .copal-desktop-app{
  top:32px !important;
  height:calc(100vh - 32px) !important;
  min-height:calc(100vh - 32px) !important;
}
.copal-desktop-sidebar{
  width:320px !important;
  height:100% !important;
  min-height:0 !important;
  overflow:auto !important;
}
.copal-desktop-main{
  width:100% !important;
  min-width:0 !important;
  height:100% !important;
  min-height:0 !important;
  overflow:auto !important;
}
.copal-desktop-content-grid{
  grid-template-columns:minmax(560px,1fr) 420px !important;
}
@media (min-width: 1280px){
  .copal-desktop-app{grid-template-columns:340px minmax(0,1fr) !important;}
  .copal-desktop-sidebar{width:340px !important;}
}
@media (max-width: 960px){
  html.copal-desktop-html,body.copal-desktop-runtime,body.copal-desktop-page{overflow:auto !important;}
  .copal-desktop-app{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:100vh !important;
    max-height:none !important;
    grid-template-columns:1fr !important;
  }
  body.admin-bar .copal-desktop-app{top:0 !important;height:auto !important;min-height:100vh !important;}
  .copal-desktop-sidebar{width:100% !important;height:auto !important;}
  .copal-desktop-main{height:auto !important;min-height:70vh !important;}
  .copal-desktop-content-grid{grid-template-columns:1fr !important;}
}
@media screen and (max-width:782px){
  body.admin-bar .copal-desktop-app{top:46px !important;height:calc(100vh - 46px) !important;min-height:calc(100vh - 46px) !important;}
}