/* Full-screen mobile application experience. */
@media (max-width: 680px) {
  :root { --page-pad: 1rem; }

  html { overflow-x: hidden; }
  body { min-height: 100svh; overflow-x: hidden; overflow-y: auto; }

  .topbar {
    height: calc(60px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    background: linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.72), transparent);
  }

  .brand { gap: .45rem; font-size: .74rem; letter-spacing: -.02em; text-transform: none; }
  .brand img { width: 25px !important; height: 30px !important; }
  .progress-copy { font-size: .64rem; }
  .progress-track { top: calc(59px + env(safe-area-inset-top)); right: 1rem; left: 1rem; }

  .quiz-shell {
    min-height: 100svh;
    place-items: center start;
    padding: calc(6.5rem + env(safe-area-inset-top)) 1rem calc(6rem + env(safe-area-inset-bottom));
  }

  #quiz-form,
  .question-stage { width: 100%; }
  .question-number,
  .eyebrow { margin-bottom: .9rem; font-size: .59rem; }

  .question-title {
    max-width: 100%;
    margin-bottom: 1.55rem;
    font-size: clamp(2.15rem, 10.6vw, 3.35rem);
    line-height: .98;
    letter-spacing: -.055em;
    text-wrap: pretty;
  }

  .choices {
    display: grid;
    max-height: none;
    grid-template-columns: 1fr;
    gap: .55rem;
    margin-bottom: 1.25rem;
    padding: 0;
    overflow: visible;
  }

  .choice {
    min-height: 60px;
    padding: .8rem .85rem;
    border-radius: 0;
    background: rgba(255,255,255,.025);
  }

  .choice-key { flex-basis: 28px; height: 28px; border-radius: 0; }
  .choice-copy { font-size: .9rem; }
  .text-answer { min-height: 58px; margin-bottom: 1.3rem; font-size: 1.25rem; }
  textarea.text-answer { min-height: 120px; }

  .primary-button {
    width: 100%;
    min-height: 58px;
    justify-content: space-between;
    padding: 0 1rem;
    border-radius: 0;
    font-size: .7rem;
  }

  .error-message { font-size: .72rem; }
  .footer { right: 1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom)); left: 1rem; }
  .nav-button { min-height: 44px; }
  .keyboard-hint { display: none; }

  .completion-card h1 {
    margin-bottom: 1.6rem;
    font-size: clamp(2.7rem, 12.8vw, 4rem);
    line-height: .91;
  }

  .completion-card p { font-size: .95rem; }

  body:has(.calendar-panel) { overflow-y: auto; }
  .quiz-shell:has(.calendar-panel) {
    display: block;
    min-height: 100svh;
    padding: calc(5.8rem + env(safe-area-inset-top)) 0 calc(2rem + env(safe-area-inset-bottom));
  }

  #quiz-form:has(.calendar-panel) { width: 100%; }
  .calendar-panel { display: block; }
  .calendar-copy { padding: 0 1rem; }
  .calendar-copy .question-title { font-size: clamp(2.45rem, 11.5vw, 3.6rem); }
  .calendar-note { margin-bottom: 1.4rem; font-size: .9rem; }
  .calendar-email { margin-bottom: 1.5rem; font-size: .8rem; }

  .calendar-embed {
    width: 100%;
    min-height: 760px;
    height: 760px;
    overflow: hidden;
    border-inline: 0;
    border-radius: 0;
  }

  .booking-frame,
  .booking-frame iframe,
  .calendar-placeholder {
    min-height: 760px;
    height: 760px;
  }
}

@media (max-width: 380px), (max-height: 690px) and (max-width: 680px) {
  .quiz-shell:not(:has(.calendar-panel)) {
    place-items: start;
    padding-top: calc(5.4rem + env(safe-area-inset-top));
  }

  .question-title { font-size: clamp(1.95rem, 9.6vw, 2.75rem); }
  .choice { min-height: 54px; }
}