/* P1R6CU-R6 — Questionnaire intrinsic responsive composition.
   The questionnaire-step container, not a device viewport, decides compact presentation. */

@container questionnaire-step (max-width: 40rem) {
  #step-health-questionnaire .content-body {
    padding: 1.125rem 1rem .75rem;
  }

  #health-questionnaire-form {
    gap: .875rem;
  }

  #health-questionnaire-form .questionnaire-progress,
  #health-questionnaire-form .questionnaire-section-card {
    padding: .875rem;
    border-radius: var(--radius-lg);
  }

  #health-questionnaire-form .questionnaire-progress {
    position: sticky;
    top: var(--public-shell-topbar-block);
    z-index: 8;
    gap: .5rem;
    padding: .8125rem .875rem;
    box-shadow: var(--shadow-sm);
  }

  #health-questionnaire-form .questionnaire-progress__head {
    gap: var(--public-space-xs);
  }

  #health-questionnaire-form .questionnaire-progress__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #health-questionnaire-form .questionnaire-progress__hint,
  #health-questionnaire-form .questionnaire-section-card__description {
    font-size: .82rem;
  }

  #health-questionnaire-form .questionnaire-section-card {
    overflow: visible;
  }

  #health-questionnaire-form .questionnaire-section-card__header {
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: .5rem;
  }

  #health-questionnaire-form .questionnaire-section-card__title {
    overflow-wrap: anywhere;
  }

  #health-questionnaire-form .questionnaire-section-card__description {
    max-width: 100%;
  }

  #health-questionnaire-form .questionnaire-section-card__status {
    max-width: 6.9rem;
    padding: .3125rem .5rem;
    font-size: .7rem;
    line-height: 1.05;
  }

  #health-questionnaire-form .form-label-accordion.questionnaire-question__summary {
    align-items: flex-start;
    padding: .875rem .875rem .5rem;
  }

  #health-questionnaire-form .details-content {
    padding: 0 .875rem .875rem;
  }

  #health-questionnaire-form .questionnaire-question__meta {
    gap: .25rem;
  }

  #health-questionnaire-form .questionnaire-section-card__answer {
    grid-template-columns: 1fr;
    gap: .125rem;
  }

  #health-questionnaire-form .choice-group--binary,
  #health-questionnaire-form .questionnaire-binary-choice-group {
    max-width: 100%;
  }

  #health-questionnaire-form .choice-group--binary .radio-option,
  #health-questionnaire-form .choice-group--binary .checkbox-option,
  #health-questionnaire-form .questionnaire-binary-choice-group .radio-option,
  #health-questionnaire-form .questionnaire-binary-choice-group .checkbox-option {
    min-width: 4rem;
    padding: .4375rem .8125rem;
  }

  #health-questionnaire-form .questionnaire-progress-footer {
    position: static;
    z-index: auto;
    align-items: stretch;
    flex-direction: column;
    margin-top: .125rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }

  #health-questionnaire-form .questionnaire-progress-footer__jump,
  #health-questionnaire-form .questionnaire-ready-cta .btn,
  #health-questionnaire-form .questionnaire-ready-cta button {
    width: 100%;
  }

  #health-questionnaire-form .questionnaire-ready-cta {
    align-items: stretch;
    flex-direction: column;
  }

  #step-health-questionnaire .action-buttons {
    padding-inline: 1rem;
  }
}

@container questionnaire-step (max-width: 22rem) {
  #health-questionnaire-form .questionnaire-progress {
    gap: .375rem;
    padding: .6875rem .75rem;
  }

  #health-questionnaire-form .questionnaire-progress__hint {
    display: none;
  }

  #health-questionnaire-form .choice-group--binary,
  #health-questionnaire-form .questionnaire-binary-choice-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #health-questionnaire-form .choice-group--binary .radio-option,
  #health-questionnaire-form .choice-group--binary .checkbox-option,
  #health-questionnaire-form .questionnaire-binary-choice-group .radio-option,
  #health-questionnaire-form .questionnaire-binary-choice-group .checkbox-option {
    min-width: 0;
  }

  #health-questionnaire-form .questionnaire-section-card__header {
    column-gap: .375rem;
  }

  #health-questionnaire-form .questionnaire-section-card__status {
    max-width: 6.2rem;
    padding-inline: .4375rem;
    font-size: .66rem;
  }
}