/* ============================================================
   PHREE SKIN — /quiz  ·  FULL-SCREEN immersive (premium Typeform)
   One question fills the viewport at a time, centered, on light glass.
   Fixed top bar with 7-dot Braille progress · thumb-reachable footer.
   Locked to the brand system: Stolzl · sky #73B3CE for price/accent only ·
   brand-black CTA · glass · Braille dot grid · attribute-driven motion.
   ============================================================ */

/* the quiz owns the whole viewport — no page scroll, no chrome */
html.quiz-html, body.quiz-page{ height:100%; overflow:hidden; overscroll-behavior:none; }
body.quiz-page{ background:var(--paper); }

/* ---------- shell ---------- */
.quiz{
  position:fixed; inset:0;
  height:100svh; width:100%;
  overflow:hidden; background:var(--paper);
  display:grid;
  grid-template-rows:auto 1fr auto;   /* bar · stage · foot */
}

/* atmosphere */
.quiz__glow{
  position:absolute; top:-24%; left:50%; transform:translateX(-50%);
  width:min(1200px,150%); height:82%;
  background:radial-gradient(ellipse at center, var(--sky-soft), transparent 62%);
  opacity:.9; z-index:0; pointer-events:none;
}
.quiz__dots{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.5; pointer-events:none; }

/* ---------- top bar (fixed row 1) ---------- */
.quiz__bar{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(1rem,2.6vw,1.5rem) var(--gutter);
  padding-top:calc(clamp(1rem,2.6vw,1.5rem) + env(safe-area-inset-top));
}
.quiz__brand{ display:inline-flex; align-items:center; gap:.6rem; color:var(--ink); }
.quiz__brand-mark{ width:30px; height:23px; color:var(--ink); flex:none; }
.quiz__brand-mark svg{ width:100%; height:100%; display:block; }
.quiz__brand-word{ font-weight:var(--fw-med); font-size:.82rem; letter-spacing:.16em; display:flex; gap:.35em; }
.quiz__brand-word b{ font-weight:var(--fw-light); opacity:.5; }

/* 7-dot Braille progress — the header centrepiece */
.quiz__progress{ display:inline-flex; align-items:center; gap:.55rem; }
.quiz__progress .qdot{
  width:11px; height:11px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--line-2);
  transition:background .5s var(--e-seed), border-color .5s var(--e-seed),
             transform .5s var(--e-back), box-shadow .5s var(--e-seed);
}
.quiz__progress .qdot.is-on{ background:var(--sky); border-color:var(--sky); box-shadow:0 0 0 4px var(--sky-soft); }
.quiz__progress .qdot.is-now{ transform:scale(1.32); box-shadow:0 0 0 5px var(--sky-soft); }

/* exit / step-count (top-right) */
.quiz__exit{
  display:inline-flex; align-items:center; gap:.7rem; color:var(--muted);
  transition:color .3s;
}
.quiz__exit:hover{ color:var(--ink); }
.quiz__exit-t{ font-variant-numeric:tabular-nums; font-size:.9rem; display:inline-flex; align-items:baseline; gap:.15em; }
.quiz__exit-t b{ color:var(--ink); font-weight:var(--fw-med); font-size:1rem; }
.quiz__exit-t span{ opacity:.6; }
.quiz__exit-x{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; font-size:.8rem; color:var(--ink-2);
  transition:border-color .3s, background .3s, color .3s;
}
.quiz__exit:hover .quiz__exit-x{ border-color:var(--ink); color:var(--ink); }

/* Typeform-style thin fill at the very top edge */
.quiz__bar-fill{
  position:absolute; top:0; left:0; right:0; height:3px; z-index:6;
  background:var(--sky-soft);
}
.quiz__bar-fill i{
  display:block; height:100%; width:12%;
  background:linear-gradient(90deg, var(--sky), var(--sky-deep));
  border-radius:0 3px 3px 0;
  transition:width .6s var(--e-seed);
}

/* ---------- stage (row 2) — the step area ---------- */
.quiz__stage{
  position:relative; z-index:2;
  display:grid;                 /* every step stacked in one cell */
  min-height:0;                 /* let it shrink inside the grid */
  overflow:hidden;
}
.qstep{
  grid-area:1 / 1;              /* all steps occupy the same cell */
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,3vh,2.5rem) var(--gutter);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(30px);
  transition:opacity .5s var(--e-seed), transform .6s var(--e-out), visibility 0s linear .6s;
  overflow-y:auto;             /* long steps (form) scroll within the stage, never the page */
}
.qstep.is-active{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
  transition:opacity .55s var(--e-seed), transform .6s var(--e-out), visibility 0s;
}
.qstep.is-leave{ transform:translateY(-26px); }

.qstep__in{ width:100%; max-width:640px; margin-block:auto; }
.qstep__in--form{ max-width:480px; }

.qstep__kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:var(--t-eyebrow); text-transform:uppercase; letter-spacing:.2em;
  color:var(--sky-deep); font-weight:var(--fw-med); margin-bottom:1rem;
}
.qstep__kicker .d{ width:.42em; height:.42em; border-radius:50%; background:var(--sky); flex:none; }
.qstep__q{
  font-size:clamp(2rem,1.3rem + 3.2vw,3.4rem); color:var(--ink);
  line-height:1.02; margin-bottom:.7rem; text-wrap:balance;
}
.qstep__hint{ color:var(--muted); font-size:var(--t-lead); margin-bottom:clamp(1.6rem,4vh,2.4rem); max-width:44ch; }

/* ---------- options ---------- */
.qopts{ display:grid; gap:.75rem; }
.qopt{
  --stagI:0;
  display:flex; align-items:center; gap:1rem; width:100%; text-align:left;
  padding:1.1rem 1.15rem; border-radius:var(--r-card);
  cursor:pointer; color:var(--ink);
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, var(--sh-sm);
  transition:transform .45s var(--e-lift), box-shadow .45s var(--e-seed),
             border-color .35s var(--e-seed), background .35s;
  will-change:transform;
}
/* entrance stagger when a step activates */
.qstep.is-active .qopt{ animation:qopt-in .6s var(--e-out) both; animation-delay:calc(.1s + var(--stagI) * .07s); }
@keyframes qopt-in{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.qopt:hover{ transform:translateY(-2px); border-color:var(--sky-light); box-shadow:var(--sh-md); }
.qopt:focus-visible{ outline:none; border-color:var(--sky); box-shadow:0 0 0 3px var(--sky-soft), var(--sh-md); }
.qopt.is-picked{ border-color:var(--sky); background:var(--sky-soft); box-shadow:0 0 0 1px var(--sky) inset, var(--sh-md); }

/* the number key badge (also the 1-4 keyboard shortcut) */
.qopt__key{
  flex:none; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center;
  border:1px solid var(--line-2); background:var(--paper);
  font-size:.82rem; font-weight:var(--fw-med); color:var(--ink-2); font-variant-numeric:tabular-nums;
  transition:border-color .35s var(--e-seed), background .35s, color .35s;
}
.qopt:hover .qopt__key{ border-color:var(--sky-light); }
.qopt.is-picked .qopt__key{ border-color:var(--sky); background:var(--sky); color:#fff; }

.qopt__t{ flex:1; display:flex; flex-direction:column; gap:.12rem; min-width:0; }
.qopt__t b{ font-weight:var(--fw-med); font-size:1.06rem; letter-spacing:-.01em; }
.qopt__t em{ font-style:normal; font-size:.86rem; color:var(--muted); }

/* the pick mark — a single Braille dot that fills */
.qopt__mark{
  flex:none; width:24px; height:24px; border-radius:50%;
  border:1.5px solid var(--line-2); background:var(--paper);
  display:grid; place-items:center;
  transition:border-color .35s var(--e-seed), background .35s;
}
.qopt__mark i{ width:10px; height:10px; border-radius:50%; background:var(--sky); transform:scale(0); transition:transform .4s var(--e-back); }
.qopt:hover .qopt__mark{ border-color:var(--sky-light); }
.qopt.is-picked .qopt__mark{ border-color:var(--sky); }
.qopt.is-picked .qopt__mark i{ transform:scale(1); }

/* ---------- capture form ---------- */
.qform{ display:flex; flex-direction:column; gap:1rem; }
.qfield{ display:flex; flex-direction:column; gap:.4rem; }
.qfield__lab{ font-size:.82rem; color:var(--ink-2); font-weight:var(--fw-med); letter-spacing:.01em; }
.qfield input{
  width:100%; padding:1em 1.15em; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink);
  font-size:1.05rem;               /* >=16px so iOS never zooms on focus */
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.qfield input::placeholder{ color:var(--silver); }
.qfield input:focus{ outline:none; border-color:var(--sky); box-shadow:0 0 0 3px var(--sky-soft); }
.qfield.is-invalid input{ border-color:#c65b5b; box-shadow:0 0 0 3px rgba(198,91,91,.14); }
.qfield__err{
  font-size:.78rem; color:#c65b5b; opacity:0; height:0; overflow:hidden;
  transform:translateY(-4px); transition:opacity .3s, transform .3s;
}
.qfield.is-invalid .qfield__err{ opacity:1; height:auto; transform:none; }
.qform__go{ margin-top:.4rem; }
.qform__go .arw{ transition:transform .4s var(--e-out); }
.qform__go:hover .arw{ transform:translateX(4px); }
.qform__fine{ font-size:.76rem; color:var(--muted); max-width:42ch; }

/* ---------- footer controls (fixed row 3, thumb-reachable) ---------- */
.quiz__foot{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(.9rem,2.4vw,1.4rem) var(--gutter);
  padding-bottom:calc(clamp(.9rem,2.4vw,1.4rem) + env(safe-area-inset-bottom));
}
.quiz__back{
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-pill);
  color:var(--ink-2); font-size:.88rem; font-weight:var(--fw-med);
  padding:.65em 1.1em; transition:color .3s, border-color .3s, transform .4s var(--e-out), background .3s;
}
.quiz__back:hover{ color:var(--ink); border-color:var(--ink); transform:translateY(-1px); }
.quiz__back-arw{ font-size:.95em; }
.quiz__trust{
  display:inline-flex; align-items:center; gap:.55em; margin-left:auto;
  font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;
}
.quiz__trust .d{ width:.42em; height:.42em; border-radius:50%; background:var(--sky); flex:none; }

/* ============================================================
   RESULT — full-screen takeover
   ============================================================ */
.qresult{
  position:fixed; inset:0; z-index:20;
  display:grid; place-items:center;
  padding:clamp(1.2rem,4vh,3rem) var(--gutter);
  padding-top:calc(clamp(1.2rem,4vh,3rem) + env(safe-area-inset-top));
  padding-bottom:calc(clamp(1.2rem,4vh,3rem) + env(safe-area-inset-bottom));
  background:var(--paper);
  overflow-y:auto;
}
/* the [hidden] attribute must win over display:grid until the quiz finishes */
.qresult[hidden]{ display:none; }
.qresult::before{  /* same atmospheric glow behind the card */
  content:""; position:absolute; top:-20%; left:50%; transform:translateX(-50%);
  width:min(1100px,140%); height:80%;
  background:radial-gradient(ellipse at center, var(--sky-soft), transparent 62%);
  opacity:.85; pointer-events:none;
}
.qresult__shell{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1.5rem; width:100%; margin-block:auto; }
.qresult__card{
  display:grid; grid-template-columns:.82fr 1.18fr; gap:0; overflow:hidden;
  width:100%; max-width:880px; padding:0;
}
.qresult__media{ position:relative; background:var(--stone); overflow:hidden; min-height:100%; }
.qresult__media-in{ position:absolute; inset:0; }
.qresult__media img{ width:100%; height:100%; object-fit:cover; }
.qresult__badge{ position:absolute; top:1rem; left:1rem; z-index:2; }
.qresult__body{ padding:clamp(1.8rem,3.5vw,3rem); }
.qresult__t{ font-size:var(--t-h2); color:var(--ink); margin:.6rem 0 .8rem; }
.qresult__why{ color:var(--ink-2); font-size:var(--t-lead); max-width:40ch; margin-bottom:1.3rem; }
.qresult__pts{ list-style:none; display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.4rem; }
.qresult__pts li{ position:relative; padding-left:1.5rem; font-size:.92rem; color:var(--ink-2); }
.qresult__pts li::before{ content:"✓"; position:absolute; left:0; color:var(--sky-deep); font-weight:var(--fw-bold); }
.qresult__price{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem; }
.qresult__price .price{ font-size:1.5rem; }
.qresult__price .strike{ font-size:1.05rem; }
.qresult__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 1.5rem; }
.qresult__cta .arw{ transition:transform .4s var(--e-out); }
.qresult__cta .btn:hover .arw, .qresult__cta .tlink:hover .arw{ transform:translateX(4px); }
.qresult__sent{
  margin-top:1.2rem; font-size:.82rem; color:var(--sky-deep); font-weight:var(--fw-med);
  display:inline-flex; align-items:center; gap:.4em;
}
.qresult__sent::before{ content:"✓"; }

.quiz__restart{
  display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
  background:none; border:none; color:var(--muted); font-size:.84rem; font-weight:var(--fw-med);
  text-transform:uppercase; letter-spacing:.08em; transition:color .3s;
}
.quiz__restart:hover{ color:var(--ink); }
.quiz__restart .d{ width:.42em; height:.42em; border-radius:50%; background:var(--sky); flex:none; }

/* when done, the stage/foot fold away — result owns the screen */
.quiz.is-done .quiz__stage,
.quiz.is-done .quiz__foot,
.quiz.is-done .quiz__bar-fill{ display:none; }
.quiz.is-done .quiz__bar{ opacity:0; pointer-events:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:760px){
  .qresult__card{ grid-template-columns:1fr; max-width:440px; }
  .qresult__media{ aspect-ratio:16/10; min-height:auto; }
  .qresult__media-in{ position:relative; inset:auto; }
}

@media (max-width:600px){
  .quiz__brand-word{ display:none; }        /* keep the mark, drop the word — room for the dots */
  .quiz__progress{ gap:.45rem; }
  .quiz__progress .qdot{ width:9px; height:9px; }
  .qstep{ padding-inline:1.15rem; }
  .qstep__q{ margin-bottom:.5rem; }
  .qstep__hint{ font-size:var(--t-body); }
  .qopt{ padding:1rem 1rem; gap:.85rem; }
  .qopt__t em{ font-size:.82rem; }
  .qopt__key{ width:27px; height:27px; }
  .qopt__mark{ display:none; }               /* key badge is enough on mobile */
  .quiz__back-t{ display:none; }             /* arrow-only back button on tight widths */
  .quiz__back{ padding:.6em .8em; }
  .quiz__trust{ font-size:.72rem; }
}

/* very short viewports (landscape phones) — let the stage scroll rather than clip */
@media (max-height:560px){
  .qstep{ align-items:flex-start; }
  .qstep__in{ margin-block:0; }
  .qstep__q{ font-size:clamp(1.6rem,4vw,2.2rem); }
  .qstep__hint{ margin-bottom:1rem; }
  .qopts{ gap:.55rem; }
  .qopt{ padding:.8rem 1rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .qstep{ transition:opacity .2s linear, visibility 0s; transform:none !important; }
  .qstep.is-active .qopt{ animation:none; }
  .quiz__progress .qdot, .qopt, .qopt__mark i, .quiz__bar-fill i{ transition-duration:.15s; }
}