/* ===================================================== */
/* pulseAI - Assessment Experience                       */
/* Full-screen shell used by assessment and participant  */
/* Light enterprise theme — pulseAI Master Brand          */
/* Guidelines v3. This file had its own standalone dark   */
/* :root (not inherited from workspace.css); rewritten     */
/* with the same calibrated ink scale used there.          */
/* ===================================================== */

:root{
  --bg:#FFFFFF;--red:#F75C5C;
  --panel:#F8F9FA;--card-bg:#FFFFFF;
  --ow:#4D4D4F;
  --ow80:#606062;
  --ow70:#69696B;
  --ow60:#717173;
  --ow50:#777779;
  --ow40:#7D7D7F;
  --ow35:#858587;
  --ow30:#8D8D8F;
  --ow20:#9D9D9F;
  --ow15:rgba(77,77,79,0.15);
  --ow08:rgba(77,77,79,0.08);
  --ow04:rgba(77,77,79,0.04);
  --border:#E2E8F0;
  --border-m:#CBD5E1;
  --surface:rgba(77,77,79,0.03);
  --surface-h:rgba(77,77,79,0.05);
  --cyan:#0E7C91;
  --cyan-soft:rgba(14,124,145,0.14);
  --green:#1E8E5A;
  --danger:#C0392B;
  --red-soft:rgba(247,92,92,0.14);
  --font:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family:var(--font);background:var(--bg);color:var(--ow);
  min-height:100vh;-webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
button{font-family:var(--font);cursor:pointer;border:none;background:none}

/* ===================================================== */
/* Shell                                                 */
/* ===================================================== */
.as-shell{
  min-height:100vh;
  display:flex;flex-direction:column;
}

/* ===================================================== */
/* Header                                                */
/* ===================================================== */
.as-header{
  padding:17px 40px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  z-index:20;flex-shrink:0;
}
.as-logo{height:18px;width:auto;opacity:1;display:block}
.as-header-step{
  font-size:11px;font-weight:600;letter-spacing:-.01em;
  color:var(--ow30);
}
.as-header-exit{
  font-size:11.5px;font-weight:600;color:var(--ow30);
  cursor:pointer;transition:color .15s;
}
.as-header-exit:hover{color:var(--ow50)}

/* ===================================================== */
/* Progress bar                                          */
/* ===================================================== */
.as-progress{
  height:2px;background:var(--border);flex-shrink:0;
}
.as-progress-fill{
  height:100%;background:var(--red);
  transition:width .55s cubic-bezier(.4,0,.2,1);
}

/* ===================================================== */
/* Body / canvas                                         */
/* ===================================================== */
.as-body{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:52px 24px 56px;
}
.as-inner{width:100%;max-width:620px}

/* ===================================================== */
/* Welcome screen                                        */
/* ===================================================== */
.as-welcome{
  padding:20px 0 0;
}
.as-welcome-over{
  font-size:8px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ow30);margin-bottom:18px;display:block;
}
.as-welcome-title{
  font-size:clamp(22px,3.2vw,32px);font-weight:900;
  letter-spacing:-.055em;line-height:.95;
  color:var(--ow);margin-bottom:16px;
}
.as-welcome-title span{color:var(--red)}
.as-welcome-desc{
  font-size:13.5px;color:var(--ow50);line-height:1.75;
  margin-bottom:28px;max-width:480px;
}
.as-pillars{
  display:flex;gap:7px;flex-wrap:wrap;margin-bottom:32px;
}
.as-pillar-tag{
  font-size:9.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--ow30);padding:4px 10px;
  border:1px solid var(--border);border-radius:100px;
  background:var(--surface);
}
.as-divider{
  height:1px;background:var(--border);margin-bottom:28px;
}
.as-meta{
  display:flex;gap:24px;margin-bottom:32px;
}
.as-meta-item{
  display:flex;flex-direction:column;gap:3px;
}
.as-meta-label{
  font-size:7px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ow30);
}
.as-meta-val{
  font-size:13px;font-weight:600;color:var(--ow80);
}

/* ===================================================== */
/* Question screen                                       */
/* ===================================================== */
.as-q-screen{display:none}
.as-q-screen.active{display:block;animation:fadeUp .28s ease both}

.as-q-over{
  font-size:7.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ow30);margin-bottom:12px;display:block;
}
.as-q-text{
  font-size:clamp(16px,2vw,20px);font-weight:700;
  letter-spacing:-.03em;line-height:1.35;
  color:var(--ow);margin-bottom:26px;
}
.as-options{
  display:flex;flex-direction:column;gap:8px;
}
.as-opt{
  display:flex;align-items:flex-start;gap:14px;
  padding:13px 16px;
  border:1px solid var(--border);border-radius:9px;
  background:var(--surface);
  cursor:pointer;
  transition:border-color .14s,background .14s;
  user-select:none;
}
.as-opt:hover{border-color:var(--border-m);background:var(--surface-h)}
.as-opt.sel{border-color:var(--red);background:rgba(247,92,92,.07)}
.as-opt-num{
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--border-m);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:var(--ow30);
  transition:border-color .14s,color .14s,background .14s;
  margin-top:1px;
}
.as-opt.sel .as-opt-num{
  border-color:var(--red);color:var(--red);
  background:rgba(247,92,92,.12);
}
.as-opt-text{
  font-size:12.5px;color:var(--ow50);line-height:1.55;
  transition:color .14s;
}
.as-opt.sel .as-opt-text{color:var(--ow80)}

/* ===================================================== */
/* Navigation                                            */
/* ===================================================== */
.as-nav{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:32px;gap:12px;
}
.as-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 22px;
  font-size:12.5px;font-weight:700;letter-spacing:-.01em;
  border-radius:8px;cursor:pointer;border:none;
  transition:all .15s;white-space:nowrap;
  /* Default: primary red — always override with modifier class */
  background:var(--red);color:#fff;
}
.as-btn:hover{background:#E14545}
.as-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;pointer-events:none}
/* Explicit primary modifier (no visual difference — for clarity in markup) */
.as-btn-primary{background:var(--red);color:#fff}
.as-btn-primary:hover{background:#E14545}
.as-btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;pointer-events:none}
/* Ghost: visible secondary */
.as-btn-ghost{
  background:transparent;
  color:var(--ow);
  border:1px solid var(--ow);
}
.as-btn-ghost:hover{background:var(--surface-h);color:var(--ow);border-color:var(--ow)}
.as-btn-ghost:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.as-nav-spacer{flex:1}

/* ===================================================== */
/* Pillar transition card                                */
/* ===================================================== */
.as-pillar-break{
  display:none;
  border:1px solid var(--border);border-radius:10px;
  padding:28px 28px 26px;
  background:var(--surface);margin-bottom:24px;
  border-left:2px solid var(--red);
}
.as-pillar-break.active{display:block;animation:fadeUp .3s ease both}
.as-pillar-break-num{
  font-size:8px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:6px;display:block;
}
.as-pillar-break-name{
  font-size:16px;font-weight:800;letter-spacing:-.03em;color:var(--ow);
  margin-bottom:6px;
}
.as-pillar-break-desc{font-size:12.5px;color:var(--ow50);line-height:1.65}

/* ===================================================== */
/* Completion screen                                     */
/* ===================================================== */
.as-complete{
  display:none;text-align:center;padding:32px 0;
  animation:fadeUp .35s ease both;
}
.as-complete.active{display:block}
.as-complete-over{
  font-size:8px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:20px;display:block;
}
.as-complete-title{
  font-size:clamp(20px,3vw,28px);font-weight:900;
  letter-spacing:-.05em;color:var(--ow);margin-bottom:14px;line-height:1;
}
.as-complete-desc{
  font-size:13px;color:var(--ow50);line-height:1.75;
  margin-bottom:32px;max-width:440px;margin-left:auto;margin-right:auto;
}
.as-complete-score{
  display:inline-block;
  font-size:72px;font-weight:900;letter-spacing:-.08em;
  color:var(--ow);margin-bottom:4px;line-height:1;
}
.as-complete-score-label{
  font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ow30);display:block;margin-bottom:32px;
}

/* ===================================================== */
/* Participant identity screen                           */
/* ===================================================== */
.as-id-card{
  border:1px solid var(--border);border-radius:10px;
  padding:32px;background:var(--surface);
  text-align:center;margin-bottom:24px;
}
.as-id-over{
  font-size:8px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ow30);margin-bottom:14px;display:block;
}
.as-id-title{
  font-size:18px;font-weight:800;letter-spacing:-.035em;color:var(--ow);
  margin-bottom:10px;
}
.as-id-desc{font-size:12.5px;color:var(--ow50);line-height:1.65;margin-bottom:22px}
.as-input{
  width:100%;padding:11px 14px;
  background:var(--panel);
  border:1px solid var(--border);border-radius:7px;
  color:var(--ow);font-family:var(--font);font-size:13.5px;
  outline:none;transition:border-color .15s;
  margin-bottom:12px;
  color-scheme:light;-webkit-appearance:none;appearance:none;
}
.as-input:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.as-input::placeholder{color:var(--ow30)}

/* ===================================================== */
/* Multi-select options                                  */
/* ===================================================== */
.as-options[data-multi] .as-opt-num{
  border-radius:3px;font-size:0;
  width:16px;height:16px;margin-top:3px;
  background:transparent;
}
.as-options[data-multi] .as-opt.sel .as-opt-num{
  background:var(--red);border-color:var(--red);
}
.as-options[data-multi] .as-opt.sel .as-opt-num::after{
  content:'✓';font-size:9px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  line-height:16px;width:16px;
}

/* ===================================================== */
/* Scale component (0–5 or 0–10)                        */
/* ===================================================== */
.as-scale-wrap{margin-bottom:8px}
.as-scale-labels{
  display:flex;justify-content:space-between;
  font-size:9px;font-weight:600;letter-spacing:.06em;
  color:var(--ow30);margin-bottom:8px;
}
.as-scale{display:flex;gap:8px;flex-wrap:wrap}
.as-scale-btn{
  width:44px;height:44px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--ow50);font-weight:700;font-size:15px;
  cursor:pointer;transition:border-color .14s,background .14s,color .14s;
  font-family:var(--font);
}
.as-scale-btn:hover{border-color:var(--border-m);color:var(--ow);background:var(--surface-h)}
.as-scale-btn.sel{border-color:var(--red);background:rgba(247,92,92,.08);color:var(--ow)}

/* ===================================================== */
/* Select / Dropdown                                     */
/* ===================================================== */
.as-select-wrap{position:relative}
.as-select-wrap::after{
  content:'↓';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:11px;color:var(--ow30);pointer-events:none;
}
.as-select{
  width:100%;padding:11px 36px 11px 14px;
  background:var(--panel);
  border:1px solid var(--border);border-radius:8px;
  color:var(--ow);font-family:var(--font);font-size:13.5px;
  outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;
  color-scheme:light;
  transition:border-color .15s;
}
.as-select:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.as-select option{background:var(--panel);color:var(--ow)}

/* ===================================================== */
/* Consent checkbox                                      */
/* ===================================================== */
.as-consent{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px 18px;border:1px solid var(--border);
  border-radius:9px;background:var(--surface);cursor:pointer;
  transition:border-color .14s;
}
.as-consent.checked{border-color:var(--red)}
.as-consent-box{
  width:20px;height:20px;border-radius:4px;flex-shrink:0;
  border:1px solid var(--border-m);margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  transition:all .14s;
}
.as-consent.checked .as-consent-box{background:var(--red);border-color:var(--red)}
.as-consent-check{font-size:11px;color:#fff;line-height:1;display:none}
.as-consent.checked .as-consent-check{display:block}
.as-consent-text{font-size:12px;color:var(--ow50);line-height:1.65}

/* ===================================================== */
/* Domain section header (8 Pillar)                     */
/* ===================================================== */
.as-domain-bar{
  border-left:2px solid var(--red);padding:12px 16px;
  background:var(--surface);border-radius:0 8px 8px 0;
  margin-bottom:20px;border:1px solid var(--border);
  border-left:2px solid var(--red);
}
.as-domain-num{
  font-size:7.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin-bottom:4px;display:block;
}
.as-domain-name{font-size:14px;font-weight:800;letter-spacing:-.03em;color:var(--ow)}

/* ===================================================== */
/* Text / email input                                    */
/* ===================================================== */
.as-field{margin-bottom:16px}
.as-field-label{
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ow30);margin-bottom:7px;display:block;
}
.as-textarea{
  width:100%;padding:11px 14px;
  background:var(--panel);
  border:1px solid var(--border);border-radius:7px;
  color:var(--ow);font-family:var(--font);font-size:13.5px;
  outline:none;transition:border-color .15s;resize:vertical;
  min-height:80px;
}
.as-textarea:focus{border-color:var(--red)}
.as-textarea::placeholder{color:var(--ow30)}

/* ===================================================== */
/* Locked/pending state                                  */
/* ===================================================== */
.as-locked{
  border:1px solid var(--border);border-radius:10px;
  padding:32px;background:var(--surface);text-align:center;
  opacity:.55;
}
.as-locked-icon{
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
}
.as-locked-title{font-size:16px;font-weight:800;letter-spacing:-.03em;color:var(--ow);margin-bottom:8px}
.as-locked-desc{font-size:12.5px;color:var(--ow50);line-height:1.7}

/* ===================================================== */
/* Animations                                            */
/* ===================================================== */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===================================================== */
/* Responsive                                            */
/* ===================================================== */
@media(max-width:640px){
  .as-header{padding:15px 20px}
  .as-body{padding:36px 20px 40px}
  .as-meta{flex-wrap:wrap;gap:16px}
}