/* ===========================================================
   Wellbeing Test (GAD-7), quiz flow + results + email preview
   Loads on top of site.css; uses the same brand tokens.
   =========================================================== */

.quiz-hero{
  background:linear-gradient(180deg,#eef4e8 0%,var(--bg) 60%);
  padding:56px 0 88px;min-height:calc(100vh - 104px);
}
.quiz-shell{
  max-width:720px;margin:0 auto;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:44px 48px 40px;position:relative;
}

/* ---------- progress ---------- */
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:30px;min-height:24px;}
.quiz-step-label{font-family:var(--body);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:.72rem;color:var(--green-deep);}
.quiz-bar{flex:1;height:6px;border-radius:999px;background:var(--green-soft);overflow:hidden;}
.quiz-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--green-bright));
  border-radius:999px;width:0;transition:width .45s cubic-bezier(.4,0.2,1);}

/* ---------- screens (no entrance animation: always visible) ---------- */
.quiz-screen{opacity:1;}

/* ---------- intro ---------- */
.quiz-intro .eyebrow{margin-bottom:.7em;}
.quiz-intro h1{font-size:clamp(1.9rem,4vw,2.7rem);margin:0 0 .4em;}
.quiz-intro .lead{color:var(--ink-soft);margin-bottom:1.6em;}
.quiz-assure{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:14px;}
.quiz-assure li{position:relative;padding-left:38px;color:var(--ink);font-size:1.02rem;}
.quiz-assure li::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  background:var(--green-soft);box-shadow:inset 0 0 0 2px var(--green);}
.quiz-assure li::after{content:"";position:absolute;left:8px;top:8px;width:9px;height:5px;
  border-left:2px solid var(--green-deep);border-bottom:2px solid var(--green-deep);transform:rotate(-45deg);}

/* ---------- question ---------- */
.quiz-q-pre{font-family:var(--body);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  font-size:.78rem;color:var(--ink-soft);margin:0 0 .5em;}
.quiz-q{font-family:var(--head);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);line-height:1.2;
  color:var(--ink);margin:0 0 28px;}
.quiz-opts{display:grid;gap:12px;margin-bottom:32px;}
.quiz-opt{display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  background:var(--white);border:2px solid var(--line);border-radius:var(--radius);
  padding:16px 20px;font-family:var(--body);font-size:1.08rem;font-weight:600;color:var(--ink);
  transition:border-color .16s,background .16s,transform .12s,box-shadow .16s;}
.quiz-opt:hover{border-color:var(--leaf-light);background:var(--bg);}
.quiz-opt .dot{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);
  display:grid;place-items:center;transition:border-color .16s,background .16s;}
.quiz-opt .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:transparent;transition:background .16s;}
.quiz-opt.is-sel{border-color:var(--green);background:var(--green-soft);box-shadow:var(--shadow-sm);}
.quiz-opt.is-sel .dot{border-color:var(--green-deep);}
.quiz-opt.is-sel .dot::after{background:var(--green-deep);}

/* ---------- nav row ---------- */
.quiz-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.quiz-back{background:none;border:0;cursor:pointer;font-family:var(--body);font-weight:700;
  font-size:1rem;color:var(--ink-soft);padding:.6em .2em;transition:color .16s;}
.quiz-back:hover{color:var(--green-deep);}
.quiz-back[hidden]{visibility:hidden;}

/* ---------- email capture ---------- */
.quiz-form{display:grid;gap:18px;margin:8px 0 26px;}
.field label{display:block;font-weight:800;font-size:.92rem;color:var(--ink);margin-bottom:.5em;}
.field input{width:100%;font-family:var(--body);font-size:1.05rem;color:var(--ink);
  padding:.85em 1em;border:2px solid var(--line);border-radius:14px;background:var(--white);transition:border-color .16s;}
.field input:focus{outline:none;border-color:var(--green);}
.field input.invalid{border-color:#cf5b41;}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--ink-soft);}
.consent input{margin-top:4px;width:18px;height:18px;accent-color:var(--green-deep);flex-shrink:0;}
.field-err{color:#b5462f;font-size:.86rem;margin-top:.4em;display:none;}
.field-err.show{display:block;}

/* ---------- results ---------- */
.res-head{text-align:center;margin-bottom:8px;}
.res-score{font-family:var(--head);font-weight:800;line-height:1;color:var(--green-deep);
  font-size:clamp(3rem,9vw,4.6rem);margin:.1em 0 0;}
.res-score small{font-size:.34em;color:var(--ink-soft);font-weight:700;}
.res-chip{display:inline-block;font-weight:800;font-size:.86rem;letter-spacing:.04em;
  padding:.5em 1.1em;border-radius:999px;margin:14px 0 4px;}
.res-chip[data-band="minimal"]{background:#e4f3df;color:#1f7a3a;}
.res-chip[data-band="mild"]{background:#eaf3d6;color:#5a7a1f;}
.res-chip[data-band="moderate"]{background:#fbeede;color:#a5631f;}
.res-chip[data-band="severe"]{background:#fbe3de;color:#b5462f;}

/* scale bar */
.res-scale{margin:26px 0 10px;}
.res-scale-track{position:relative;height:12px;border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,#7cc35a 0 24%,#cdd95a 24% 48%,#edb45a 48% 71%,#e07a5a 71% 100%);}
.res-scale-mark{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;
  border:3px solid var(--ink);transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0.18);transition:left .6s ease;}
.res-scale-ticks{display:flex;justify-content:space-between;font-size:.74rem;color:var(--ink-soft);
  font-weight:700;margin-top:8px;}

.res-body{margin:24px 0;font-size:1.06rem;color:var(--ink);}
.res-body p{margin:0 0 1em;}
.res-rec{background:var(--green-soft);border:1px solid var(--leaf-light);border-radius:var(--radius);
  padding:22px 24px;margin:6px 0 24px;}
.res-rec h3{margin:0 0 .3em;font-size:1.12rem;color:var(--green-deep);}
.res-rec p{margin:0 0 .8em;color:var(--ink);font-size:1rem;}
.res-rec a.rec-link{font-weight:800;color:var(--green-deep);text-decoration:underline;text-underline-offset:3px;}

.res-crisis{background:#fbeeee;border:1px solid #f3d6d6;border-radius:14px;padding:16px 20px;margin:0 0 24px;
  font-size:.95rem;color:#7a3326;}
.res-crisis strong{color:#b5462f;}

.res-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:6px 0 30px;}

/* email preview */
.email-preview-wrap{margin-top:14px;border-top:1px dashed var(--line);padding-top:28px;}
.email-preview-head{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:.9rem;
  font-weight:700;margin-bottom:14px;justify-content:center;text-align:center;}
.email-preview-head svg{width:18px;height:18px;color:var(--green-deep);}
.email-frame{border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);background:#f1efe8;}
.email-frame .email-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#e7e4da;border-bottom:1px solid #dcd8cc;}
.email-frame .email-bar i{width:11px;height:11px;border-radius:50%;display:block;}
.email-frame .email-bar i:nth-child(1){background:#e07a5a;}
.email-frame .email-bar i:nth-child(2){background:#e8c45a;}
.email-frame .email-bar i:nth-child(3){background:#7cc35a;}
.email-frame .email-bar span{margin-left:8px;font-size:.8rem;color:#6b6f64;font-weight:700;}
.email-frame iframe{width:100%;height:760px;border:0;display:block;background:#fff;}

.res-fine{font-size:.82rem;color:var(--ink-soft);text-align:center;margin-top:22px;line-height:1.6;}

@media(max-width:620px){
  .quiz-shell{padding:30px 22px 30px;}
  .email-frame iframe{height:820px;}
}