/* Keep the next step within reach without covering the last lines of the page. */
body[data-meta-screen="quiz"] {
  --quiz-action-space: 150px;
  padding-bottom: calc(var(--quiz-action-space) + env(safe-area-inset-bottom, 0px));
}

html {
  scroll-padding-bottom: calc(166px + env(safe-area-inset-bottom, 0px));
}

.quiz-actions {
  position: fixed;
  z-index: 100;
  inset: auto 0 0;
  bottom: var(--quiz-keyboard-inset, 0px);
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 12px max(18px, calc((100vw - 660px) / 2)) calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -7px 18px #202d2408;
}

body[data-meta-screen="quiz"].quiz-keyboard-open {
  padding-bottom: calc(var(--quiz-keyboard-action-space, 150px) + var(--quiz-keyboard-inset, 0px));
}

.quiz-keyboard-open .quiz-actions {
  padding-top: 8px;
  padding-bottom: 8px;
}

.quiz-keyboard-open .quiz-actions .continue {
  min-height: 48px;
  padding-block: 12px;
}

body[data-meta-screen="quiz"].quiz-keyboard-open .dj-privacy-panel {
  bottom: calc(var(--quiz-keyboard-action-space, 150px) + var(--quiz-keyboard-inset, 0px));
}

.quiz-keyboard-compact .quiz-actions {
  padding-block: 4px;
}

.quiz-keyboard-compact .quiz-actions .continue {
  min-height: 44px;
  padding-block: 8px;
}

.quiz-keyboard-compact .quiz-actions .text-button {
  display: none;
}

#profile-form > .quiz-actions,
.quiz-actions .continue,
.quiz-actions .text-button {
  margin: 0;
}

.quiz-actions .continue {
  min-height: 56px;
}

.quiz-actions .text-button {
  justify-self: center;
  min-height: 44px;
  padding-block: 10px;
}

.profile-input,
.choice,
.quiz-footer,
#review {
  scroll-margin-bottom: calc(166px + env(safe-area-inset-bottom, 0px));
}

/* Keep the quiz free of the persistent privacy-settings button. */
body[data-meta-screen="quiz"] .dj-privacy-settings {
  display: none;
}

body[data-meta-screen="quiz"] .dj-privacy-panel {
  bottom: calc(var(--quiz-action-space) + env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - var(--quiz-action-space) - env(safe-area-inset-bottom, 0px) - 24px);
}

@supports selector(body:has(*)) {
  body[data-meta-screen="quiz"] {
    --quiz-action-space: 102px;
  }

  body:has(#profile-view:not([hidden]) #profile-skip:not([hidden])),
  body:has(#result-view:not([hidden]) .quiz-actions .text-button:not([hidden])) {
    --quiz-action-space: 150px;
  }
}

@media (min-width: 481px) {
  .quiz-actions {
    padding-inline: max(24px, calc((100vw - 660px) / 2));
  }
}

@media (min-width: 900px) {
  .quiz-actions {
    padding-inline: calc((100vw - 580px) / 2);
  }
}