/* ============================================================
   Skin assessment overlay.

   Design notes
   ------------
   The resting *open* state is plain opacity:1 with no transition
   dependency — the entrance is an animation on the panel, not a
   transition on the overlay. An overlay only visible once a
   transition finishes is invisible in any throttled or
   interrupted frame, which is what the ported version did.

   The ground is the page itself, blurred, rather than a flat
   pine slab. It keeps the reader oriented — they can still see
   where they were — and reads as a layer over the site rather
   than a jump to a different one.

   One question per screen, answers as full-width rows. Rows read
   better than pills at eight options and give a 56px target
   without special mobile handling.
   ============================================================ */

.quiz-overlay[hidden]{display:none}

.quiz-overlay{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  background:rgba(28,31,24,.62);
  -webkit-backdrop-filter:blur(26px) saturate(.9);
          backdrop-filter:blur(26px) saturate(.9);
  opacity:0;
}
body.quiz-open .quiz-overlay{opacity:1}
body.quiz-open{overflow:hidden}

/* ---- progress ---- */
.quiz-progress{
  position:sticky;top:0;height:2px;flex:none;z-index:2;
  background:rgba(247,244,238,.14);
}
#quizProgress{
  display:block;height:100%;width:0;
  background:var(--sage-on-dark);
  transition:width .55s cubic-bezier(.2,.7,.2,1);
}

/* ---- head ---- */
.quiz-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 0;flex:none;
}
.quiz-head #quizStepLabel{
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(247,244,238,.72);
}
.quiz-close{
  width:44px;height:44px;border-radius:999px;flex:none;
  border:1px solid rgba(247,244,238,.28);
  color:var(--bone);background:transparent;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .3s, background .3s, transform .3s;
}
.quiz-close:hover{border-color:rgba(247,244,238,.7);background:rgba(247,244,238,.08)}
.quiz-close:active{transform:scale(.94)}
.quiz-close svg{width:14px;height:14px}
.quiz-close:focus-visible{outline:2px solid var(--sage-on-dark);outline-offset:3px}

/* ---- body ---- */
.quiz-body{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:12px 0 max(56px, env(safe-area-inset-bottom));
}

.quiz-panel{
  width:min(680px,100%);margin:0 auto;position:relative;
  background:#22261E;
  border:1px solid rgba(247,244,238,.14);
  border-radius:24px;
  padding:clamp(28px,4.4vw,52px);
  box-shadow:0 2px 8px rgba(0,0,0,.3), 0 40px 90px -30px rgba(0,0,0,.7);
  animation:quiz-in .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes quiz-in{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to  {opacity:1;transform:none}
}

.quiz-ghost{
  position:absolute;top:clamp(18px,3.4vw,34px);right:clamp(22px,4vw,44px);
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(2.6rem,6vw,4.6rem);line-height:1;
  color:var(--bone);opacity:.07;font-weight:400;
  pointer-events:none;letter-spacing:-.02em;
}
.quiz-eyebrow{
  display:block;margin-bottom:16px;
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sage-on-dark);
}
.quiz-step h2,.quiz-result h2{
  color:var(--bone);
  font-size:clamp(1.6rem,3.4vw,2.3rem);
  line-height:1.14;letter-spacing:-.015em;
  max-width:17ch;margin-bottom:28px;
}

/* ---- answers: full rows, hairline separated ---- */
.quiz-chips{display:flex;flex-direction:column}
.quiz-chip{
  position:relative;
  display:flex;align-items:center;
  width:100%;min-height:56px;
  padding:14px 40px 14px 0;
  background:transparent;border:0;
  border-top:1px solid rgba(247,244,238,.12);
  color:var(--bone);text-align:left;
  font-size:1.02rem;line-height:1.35;
  transition:padding-left .3s cubic-bezier(.2,.7,.2,1), color .3s;
}
.quiz-chips .quiz-chip:last-child{border-bottom:1px solid rgba(247,244,238,.12)}
.quiz-chip::after{
  content:"";position:absolute;right:6px;top:50%;
  width:7px;height:7px;margin-top:-4px;
  border-right:1.5px solid var(--sage-on-dark);
  border-top:1.5px solid var(--sage-on-dark);
  transform:rotate(45deg) scale(.6);opacity:0;
  transition:opacity .3s, transform .3s cubic-bezier(.2,.7,.2,1);
}
.quiz-chip:hover{padding-left:16px;color:var(--sage-on-dark)}
.quiz-chip:hover::after{opacity:1;transform:rotate(45deg) scale(1)}
.quiz-chip:active{padding-left:20px}
.quiz-chip:focus-visible{outline:2px solid var(--sage-on-dark);outline-offset:2px;border-radius:8px}

.quiz-back{margin-top:30px;display:inline-block;color:rgba(247,244,238,.7)}
.quiz-back:hover{color:var(--bone)}

/* ---- result ---- */
.quiz-result h2{margin-bottom:12px}
.quiz-result > p{
  color:var(--bone-dim);max-width:44ch;
  font-size:.97rem;line-height:1.6;margin-bottom:28px;
}
.quiz-recs{margin:0 0 32px}
.quiz-rec{
  position:relative;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  width:100%;min-height:64px;
  padding:16px 0;
  background:transparent;border:0;
  border-top:1px solid rgba(247,244,238,.12);
  text-align:left;
  transition:padding-left .3s cubic-bezier(.2,.7,.2,1);
}
.quiz-recs .quiz-rec:last-child{border-bottom:1px solid rgba(247,244,238,.12)}
.quiz-rec b{
  font-family:'Expose',sans-serif;font-weight:500;
  font-size:1.22rem;color:var(--bone);
  transition:color .3s;
}
.quiz-rec span{
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;letter-spacing:.06em;
  color:rgba(247,244,238,.62);white-space:nowrap;flex:none;
}
.quiz-rec:hover{padding-left:14px}
.quiz-rec:hover b{color:var(--sage-on-dark)}
.quiz-rec:focus-visible{outline:2px solid var(--sage-on-dark);outline-offset:2px;border-radius:8px}

.quiz-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.quiz-actions .link-line{color:rgba(247,244,238,.72)}
.quiz-actions .link-line:hover{color:var(--bone)}

/* ---- phones ---- */
@media (max-width:600px){
  .quiz-body{align-items:flex-start;padding-top:4px}
  .quiz-panel{border-radius:20px;padding:26px 22px 30px}
  .quiz-ghost{display:none}
  .quiz-step h2,.quiz-result h2{font-size:1.5rem;max-width:none;margin-bottom:22px}
  .quiz-chip{font-size:1rem;min-height:58px}
  .quiz-actions{gap:18px}
  .quiz-actions .btn{width:100%;justify-content:space-between}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .quiz-panel{animation:none}
  #quizProgress,.quiz-chip,.quiz-rec,.quiz-close{transition:none}
}