/* All questionnaire screens fit within a desktop viewport like the reference. */
@media (min-width:701px){
  /* Footer is a separate bottom region on every quiz step. */
  #app:has(.quiz){min-height:100vh;display:flex;flex-direction:column}
  #app:has(.quiz) > .footer{margin-top:auto!important;flex:0 0 auto}

  /* One compact navigation scale across every quiz screen. */
  .quizHero .progress{top:12px!important;width:min(48vw,620px)!important;gap:10px!important}
  .quizHero .progress button{width:30px!important;height:30px!important;flex-basis:30px!important;border-width:1px!important;font-size:21px!important;padding-bottom:2px!important}
  .quizHero .bars{gap:5px!important}
  .quizHero .bars i{height:3px!important}
  .quizHero .gift{width:30px!important;height:30px!important;border-width:1px!important;font-size:16px!important}
  .quizHero .art{
    will-change:transform;
  }
  .quizHero:not(.art-mood) .art{animation:quizArtDesktopFloat 4s ease-in-out infinite!important}

  body:has(.quiz){min-height:100vh;overflow:hidden}
  body.pickerOpen{overflow:visible!important}
  .quizHero{height:54vh!important;min-height:0!important}
  .quizHero .art{top:92px!important;width:440px!important;height:360px!important}
  .quizHero.art-date .art{width:500px!important;height:350px!important;top:96px!important}
  .quizHero.art-mood .art,.quizHero.art-orbit .art{width:470px!important;height:350px!important;top:92px!important}
  .quizHero.art-moon .art,.quizHero.art-cosmos .art{width:430px!important;height:350px!important;top:92px!important}

  .quiz{width:640px!important;max-width:calc(100vw - 48px)!important;min-height:calc(46vh - 42px);padding:30px 20px 8px!important}
  .quiz h2{font-size:34px!important;line-height:1.05!important;margin:0 0 10px!important}
  .quiz .sub{font-size:16px!important;line-height:1.25!important;margin:0!important}
  .quiz .cards{max-width:460px!important;gap:10px!important}
  .quiz .choice{min-height:92px!important;border-radius:12px!important;font-size:14px!important}
  .quiz .choice span{font-size:32px!important;margin:6px!important}
  .quiz .gender{grid-template-columns:repeat(2,125px)!important}
  .quiz .moodCards{grid-template-columns:repeat(3,125px)!important}
  .quiz .fields.compact{width:100%!important;max-width:480px!important;gap:18px!important;margin:26px 0 0!important}
  .quiz:has(.fields.compact){max-width:640px!important}
  .quiz .fields.compact .picker{width:145px!important;flex:0 0 145px!important}
  .quiz .fields.compact .pick-head{height:72px!important;padding:0 16px!important;border-radius:12px!important;font-size:16px!important;box-shadow:0 7px 18px rgba(43,22,91,.10)!important}
  .quiz .fields.compact .pick-head span{font-size:24px!important}
  .quiz .fields.compact .pick-list{top:71px!important;border-radius:0 0 12px 12px!important}
  .quiz .fields.compact .pick-list button{padding:10px 15px!important;font-size:15px!important}
  .quiz .fields:not(.compact) select{width:130px!important;padding:13px!important;font-size:15px!important}
  .quiz .text{padding:14px!important;font-size:15px!important}
  .quiz .check{margin-top:14px!important;font-size:14px!important}
  .quiz .action{width:330px!important;margin:34px auto 0!important;padding:13px!important;border-radius:30px!important;font-size:20px!important}
  .footer{padding:8px 20px!important;font-size:11px!important}

  /* Mood screen uses the regular quiz shell so the navigation and artwork
     remain visible and interactive. */
  .quiz:has(.moodCards){
    width:100vw!important;
    max-width:100vw!important;
    text-align:center;
  }
  .quiz .moodCards{
    width:540px!important;
    max-width:calc(100vw - 48px)!important;
    grid-template-columns:repeat(3,160px)!important;
    justify-content:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .quiz .moodCards .choice{
    min-height:138px!important;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    padding:12px 10px 10px!important;
    line-height:1;
  }
  .quiz .moodCards .choiceIcon{
    width:72px!important;
    height:72px!important;
    flex:0 0 72px;
    margin:0!important;
  }
  /* Keep the curved colour boundary at one fixed height on every step. */
  .quizHero.art-mood{height:54vh!important;min-height:0!important}
  .quizHero.art-mood .progress{top:12px!important;width:min(48vw,620px)!important;gap:10px!important}
  .quizHero.art-mood .progress button{width:30px!important;height:30px!important;flex-basis:30px!important;border-width:1px!important;font-size:21px!important;padding-bottom:2px!important}
  .quizHero.art-mood .bars{gap:5px!important}
  .quizHero.art-mood .bars i{height:3px!important}
  .quizHero.art-mood .gift{width:30px!important;height:30px!important;border-width:1px!important;font-size:16px!important}
  .quizHero.art-mood .art{
    top:50%!important;
    width:310px!important;
    height:230px!important;
    transform:translate(-50%,-50%)!important;
    animation:moodSunFloat 3.6s ease-in-out infinite!important;
  }
  .quiz:has(.moodCards){min-height:calc(71vh - 42px)!important;padding-top:14px!important}
  body:has(.moodCards){overflow-y:auto!important;overflow-x:hidden!important}

  /* Date selection follows the same centre axis as the mood screen. */
  .quiz:has(.fields.compact){
    width:100vw!important;
    max-width:100vw!important;
    text-align:center;
  }
  .quiz:has(.fields.compact) .sub{margin-left:auto!important;margin-right:auto!important;}
  .quiz .fields.compact{justify-content:center!important;margin-left:auto!important;margin-right:auto!important;}
  .quiz .fields.compact .picker.open .pick-list{
    top:71px!important;
    bottom:auto!important;
    max-height:156px!important;
    overflow-y:scroll!important;
    border:2px solid #382266!important;
    border-top:0!important;
    border-radius:0 0 12px 12px!important;
  }
  .quiz .fields.compact .picker.open .pick-head{border-radius:12px 12px 0 0!important;}
}

@keyframes moodSunFloat{
  0%,100%{transform:translate(-50%,-50%) translateY(0)}
  50%{transform:translate(-50%,-50%) translateY(-22px)}
}

@keyframes quizArtRaisedFloat{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-16px)}
}

@keyframes quizArtDesktopFloat{
  0%,100%{transform:translateX(-50%) translateY(2%)}
  50%{transform:translateX(-50%) translateY(calc(2% - 16px))}
}

@keyframes quizArtMobileFloat{
  0%,100%{transform:translateX(-50%) translateY(5%)}
  50%{transform:translateX(-50%) translateY(calc(5% - 12px))}
}

/* Keep date drop-downs above the action button and make every value reachable. */
@media (min-width:701px){
  .quiz:has(.fields.compact){overflow:visible!important}
  body:has(.fields.compact).pickerOpen{overflow:hidden!important}
  .quiz .fields.compact{position:relative;z-index:20}
  .quiz .fields.compact .picker{z-index:1}
  .quiz .fields.compact .picker.open{z-index:1000}
  .quiz .fields.compact .picker.open .pick-list{
    z-index:1001!important;
    max-height:140px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    pointer-events:auto!important;
  }
  .quiz:has(.fields.compact) .action{position:relative;z-index:0!important}
}

@media (max-width:700px){
  #app:has(.quiz){min-height:100dvh;display:flex;flex-direction:column}
  #app:has(.quiz) > .footer{margin-top:auto!important;flex:0 0 auto}
  .quizHero:not(.art-mood) .art{animation:quizArtMobileFloat 4s ease-in-out infinite!important;will-change:transform}
  .fields.compact{position:relative;z-index:20}
  .fields.compact .picker.open{z-index:1000}
  .fields.compact .picker.open .pick-list{
    z-index:1001!important;
    max-height:220px!important;
    overflow-y:auto!important;
    pointer-events:auto!important;
  }
}

/* Custom gift icon supplied for the quiz progress bar. */
.quizHero .gift{
  /* The supplied PNG replaces the emoji, so it needs its own box.  Without
     one the zero-sized text node collapses and the gift disappears. */
  display:block!important;
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  font-size:0!important;
  background-image:url('assets/progress-gift.png')!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:58%!important;
  filter:invert(72%) sepia(35%) saturate(720%) hue-rotate(294deg) brightness(101%) contrast(99%)!important;
}

@media(max-width:700px){
  .quizHero .gift{flex-basis:34px!important;width:34px!important;height:34px!important;background-size:72%!important}
}

/* One layout frame for every quiz step.  The previous per-screen widths made
   the date view align to the left at some browser/device widths. */
#app:has(.quiz){
  width:min(100%, 640px)!important;
  max-width:640px!important;
  min-width:0!important;
  margin-inline:auto!important;
}
#app:has(.quiz) .quizHero,
#app:has(.quiz) .quiz,
#app:has(.quiz) .footer{
  width:100%!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#app:has(.quiz) .quiz{
  min-width:0!important;
  padding-left:clamp(20px, 6vw, 32px)!important;
  padding-right:clamp(20px, 6vw, 32px)!important;
}
#app:has(.quiz) .fields.compact{
  display:grid!important;
  grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  width:100%!important;
  max-width:none!important;
  gap:clamp(10px, 2.5vw, 18px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#app:has(.quiz) .fields.compact .picker{
  width:auto!important;
  min-width:0!important;
  flex:none!important;
}

/* Overlap the white quiz surface by one pixel so the curved hero transition
   has no grey seam at the join. */
.quizHero + .quiz{
  position:relative;
  z-index:1;
  margin-top:-1px!important;
  background:#f7f7f7;
}

@media(min-width:701px){
  #app:has(.quiz) .quiz{width:100%!important;max-width:100%!important}
}

/* One clean gift marker in the progress bar — no duplicate illustration,
   coloured frame, or oval backdrop. */
.quizHero .gift{
  display:grid!important;
  place-items:center!important;
  flex:0 0 58px!important;
  width:58px!important;
  height:58px!important;
  padding:0!important;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  filter:none!important;
  font-size:48px!important;
  line-height:1!important;
}
@media(max-width:700px){
  .quizHero .gift{flex-basis:40px!important;width:40px!important;height:40px!important;font-size:34px!important}
}

/* Use the same cosmic purple gradient as the final value-chart screen on
   every quiz hero, including the first screen. */
#app .hero{
  background-color:#12062f!important;
  background-image:linear-gradient(180deg,#12062f 0%,#1b0b43 13%,#2c1760 37%,#544085 68%,#a38ec3 100%)!important;
  background-position:center!important;
  background-size:cover!important;
}

/* The purple hero is edge-to-edge; only the form itself stays in a readable
   centred column on desktop. */
#app:has(.quiz){width:100%!important;max-width:none!important;margin:0!important}
#app:has(.quiz) .hero{width:100%!important;max-width:none!important}
#app:has(.quiz) .footer{width:100%!important;max-width:none!important}
@media(min-width:701px){
  #app:has(.quiz) .quiz{
    width:min(640px,calc(100% - 48px))!important;
    max-width:640px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Restore the supplied present asset and give it the same navigation footprint
   as the back control. */
.quizHero .gift{
  display:grid!important;
  place-items:center!important;
  flex:0 0 58px!important;
  width:58px!important;
  height:58px!important;
  padding:0!important;
  overflow:hidden!important;
  font-size:0!important;
  line-height:1!important;
  background:url('assets/progress-gift.png') center/56% no-repeat!important;
  border:0!important;
  border-radius:0!important;
  filter:invert(68%) sepia(53%) saturate(672%) hue-rotate(297deg) brightness(102%) contrast(101%)!important;
}
@media(max-width:700px){
  .quizHero .gift{flex-basis:52px!important;width:52px!important;height:52px!important;background-size:56%!important}
}

/* Test 1 personalisation questions only.  They can be taller than a short
   desktop viewport, so never inherit the old quiz-level scroll lock. */
body:has(.personalCards){overflow-x:hidden!important;overflow-y:auto!important}
#app:has(.personalCards){min-height:100dvh!important;display:flex!important;flex-direction:column!important}
#app:has(.personalCards) .quiz{
  width:min(760px,calc(100% - 32px))!important;
  max-width:760px!important;
  min-height:0!important;
  margin-inline:auto!important;
  padding:clamp(34px,5vw,68px) clamp(16px,4vw,32px) 52px!important;
  text-align:center!important;
}
#app:has(.personalCards) .quiz h2{
  max-width:24ch!important;
  margin:0 auto 16px!important;
  font-size:clamp(32px,4.1vw,54px)!important;
  line-height:1.08!important;
  text-align:center!important;
}
#app:has(.personalCards) .quiz .sub{
  max-width:52ch!important;
  margin:0 auto 24px!important;
  font-size:clamp(16px,2vw,21px)!important;
  line-height:1.4!important;
  text-align:center!important;
}
#app:has(.personalCards) .personalCards{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  max-width:640px!important;
  margin:0 auto!important;
  gap:18px!important;
}
#app:has(.personalCards) .personalCards .personalChoice{
  min-height:clamp(126px,13vw,158px)!important;
  padding:18px!important;
  font-size:clamp(15px,1.7vw,20px)!important;
  line-height:1.22!important;
}
#app:has(.personalCards) .personalCards .personalChoiceIcon{
  margin:0 0 10px!important;
  font-size:clamp(28px,3vw,38px)!important;
}
body:has(.personalCards) .quizHero .art{animation:none!important;will-change:auto!important}
@media(max-width:520px){
  #app:has(.personalCards) .quiz{width:min(100% - 24px,560px)!important;padding:30px 12px 42px!important}
  #app:has(.personalCards) .quiz h2{font-size:clamp(30px,10vw,40px)!important}
  #app:has(.personalCards) .personalCards{grid-template-columns:1fr!important;max-width:420px!important;gap:12px!important}
  #app:has(.personalCards) .personalCards .personalChoice{min-height:104px!important;font-size:17px!important}
}

/* One navigation system for every quiz screen.  Keep the mood step on the
   same compact desktop scale as the date step, and frame the supplied gift
   asset in a circle rather than a coloured square. */
@media(min-width:701px){
  .quizHero.art-mood .progress{
    top:12px!important;
    width:min(48vw,620px)!important;
    max-width:48vw!important;
    gap:10px!important;
  }
  .quizHero.art-mood .progress button{
    width:30px!important;
    height:30px!important;
    flex-basis:30px!important;
    border-width:1px!important;
    font-size:21px!important;
    padding-bottom:2px!important;
  }
  .quizHero.art-mood .bars{gap:5px!important}
  .quizHero.art-mood .bars i{height:3px!important}
  .quizHero .gift,
  .quizHero.art-mood .gift{
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
    padding:0!important;
    font-size:0!important;
    line-height:1!important;
    background:url('assets/progress-gift.png') center/58% no-repeat!important;
    border:1px solid #ff7893!important;
    border-radius:50%!important;
    filter:invert(68%) sepia(53%) saturate(672%) hue-rotate(297deg) brightness(102%) contrast(101%)!important;
  }
}
@media(max-width:700px){
  .quizHero .gift{
    flex:0 0 52px!important;
    width:52px!important;
    height:52px!important;
    padding:0!important;
    font-size:0!important;
    line-height:1!important;
    background:url('assets/progress-gift.png') center/58% no-repeat!important;
    border:2px solid #ff7893!important;
    border-radius:50%!important;
    filter:invert(68%) sepia(53%) saturate(672%) hue-rotate(297deg) brightness(102%) contrast(101%)!important;
  }
}

/* Keep the mood step's progress bar identical to the date step. */
@media(min-width:701px){
  .quizHero.art-mood .progress{
    top:12px!important;
    width:min(48vw,620px)!important;
    max-width:48vw!important;
    gap:10px!important;
  }
  .quizHero.art-mood .progress button{
    width:30px!important;
    height:30px!important;
    flex-basis:30px!important;
    border-width:1px!important;
    font-size:21px!important;
    padding-bottom:2px!important;
  }
  .quizHero.art-mood .bars{gap:5px!important}
  .quizHero.art-mood .bars i{height:3px!important}
}

/* Both controls have the same circular footprint; the gift itself remains the
   supplied pink icon inside a transparent red outline. */
@media(min-width:701px){
  .quizHero .gift,
  .quizHero.art-mood .gift{
    flex-basis:30px!important;
    width:30px!important;
    height:30px!important;
    background:url('assets/progress-gift.png') center/58% no-repeat!important;
    border:1px solid #ff7893!important;
    border-radius:50%!important;
    filter:invert(68%) sepia(53%) saturate(672%) hue-rotate(297deg) brightness(102%) contrast(101%)!important;
  }
}

/* The mood screen used a separate, smaller navigation scale. Match it to the
   rest of the quiz steps. */
@media(min-width:701px){
  .quizHero.art-mood .progress{
    top:40px!important;
    width:min(74vw,930px)!important;
    max-width:74vw!important;
    gap:20px!important;
  }
  .quizHero.art-mood .progress button{
    width:58px!important;
    height:58px!important;
    flex-basis:58px!important;
    border-width:2px!important;
    font-size:38px!important;
    padding-bottom:5px!important;
  }
  .quizHero.art-mood .bars{gap:10px!important}
  .quizHero.art-mood .bars i{height:4px!important}
  .quizHero.art-mood .gift{
    flex-basis:42px!important;
    width:42px!important;
    height:42px!important;
    font-size:32px!important;
    line-height:42px!important;
    border:0!important;
    background:none!important;
    filter:none!important;
  }
}

/* Final navigation icon rule: the supplied asset is used consistently on
   every quiz step, including the mood screen. */
.quizHero .gift{
  display:grid!important;
  place-items:center!important;
  flex:0 0 58px!important;
  width:58px!important;
  height:58px!important;
  padding:0!important;
  overflow:hidden!important;
  font-size:0!important;
  line-height:1!important;
  background:url('assets/progress-gift.png') center/56% no-repeat!important;
  border:0!important;
  border-radius:0!important;
  filter:invert(68%) sepia(53%) saturate(672%) hue-rotate(297deg) brightness(102%) contrast(101%)!important;
}
@media(min-width:701px){
  .quizHero.art-mood .gift{
    flex-basis:58px!important;
    width:58px!important;
    height:58px!important;
    font-size:0!important;
    line-height:1!important;
    background:url('assets/progress-gift.png') center/56% no-repeat!important;
    filter:invert(68%) sepia(53%) saturate(672%) hue-rotate(297deg) brightness(102%) contrast(101%)!important;
  }
}
@media(max-width:700px){
  .quizHero .gift{flex-basis:52px!important;width:52px!important;height:52px!important;background-size:56%!important}
}