/**
 * Shared questionnaire layout: wider PC modals + visible scrollbars.
 * Linked from experiment, login, and admin pages.
 */

/* Scale / choice blocks (login pretest uses these without full experiment.css) */
.rating-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rating-btn{width:36px;height:36px;border:1.5px solid #e2e8f0;border-radius:7px;
  background:#fff;cursor:pointer;font-size:13px;font-weight:600;color:#4a5568;transition:all .15s}
.rating-btn:hover{border-color:#3182ce;color:#3182ce}
.rating-btn.active{background:#3182ce;border-color:#3182ce;color:#fff}
.q-block{margin-bottom:20px;padding:14px 14px 12px;border-radius:9px;border:1.5px solid transparent}
.q-text{font-size:14px;font-weight:600;color:#2d3748;margin-bottom:10px;line-height:1.5}
.q-required-mark{color:#e53e3e;margin-left:3px;font-size:13px}

/* ── Prominent scrollbar (all questionnaire scroll areas) ── */
.questionnaire-scroll,
.questionnaire-panel-list,
#questionnaireModal #questionsList,
.formal-attention-questions,
.formal-briefing-body,
.login-pretest-questions,
.login-commitment-list,
.in-round-preview-questions,
.student-modal-preview-dialog .formal-attention-questions,
.student-pretest-preview-sheet .login-pretest-questions,
.admin-preview-modal-body .student-modal-preview-dialog,
.admin-preview-modal-body .student-pretest-preview-sheet .login-pretest-questions {
  scrollbar-width: auto;
  scrollbar-color: #64748b #e8eef4;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.questionnaire-scroll::-webkit-scrollbar,
.questionnaire-panel-list::-webkit-scrollbar,
#questionnaireModal #questionsList::-webkit-scrollbar,
.formal-attention-questions::-webkit-scrollbar,
.formal-briefing-body::-webkit-scrollbar,
.login-pretest-questions::-webkit-scrollbar,
.login-commitment-list::-webkit-scrollbar,
.in-round-preview-questions::-webkit-scrollbar,
.student-modal-preview-dialog .formal-attention-questions::-webkit-scrollbar,
.student-pretest-preview-sheet .login-pretest-questions::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.questionnaire-scroll::-webkit-scrollbar-track,
.questionnaire-panel-list::-webkit-scrollbar-track,
#questionnaireModal #questionsList::-webkit-scrollbar-track,
.formal-attention-questions::-webkit-scrollbar-track,
.formal-briefing-body::-webkit-scrollbar-track,
.login-pretest-questions::-webkit-scrollbar-track,
.login-commitment-list::-webkit-scrollbar-track,
.in-round-preview-questions::-webkit-scrollbar-track,
.student-modal-preview-dialog .formal-attention-questions::-webkit-scrollbar-track,
.student-pretest-preview-sheet .login-pretest-questions::-webkit-scrollbar-track {
  background: #e8eef4;
  border-radius: 10px;
  margin: 6px 0;
}

.questionnaire-scroll::-webkit-scrollbar-thumb,
.questionnaire-panel-list::-webkit-scrollbar-thumb,
#questionnaireModal #questionsList::-webkit-scrollbar-thumb,
.formal-attention-questions::-webkit-scrollbar-thumb,
.formal-briefing-body::-webkit-scrollbar-thumb,
.login-pretest-questions::-webkit-scrollbar-thumb,
.login-commitment-list::-webkit-scrollbar-thumb,
.in-round-preview-questions::-webkit-scrollbar-thumb,
.student-modal-preview-dialog .formal-attention-questions::-webkit-scrollbar-thumb,
.student-pretest-preview-sheet .login-pretest-questions::-webkit-scrollbar-thumb {
  background: #64748b;
  border-radius: 10px;
  border: 3px solid #e8eef4;
  min-height: 48px;
}

.questionnaire-scroll::-webkit-scrollbar-thumb:hover,
.questionnaire-panel-list::-webkit-scrollbar-thumb:hover,
#questionnaireModal #questionsList::-webkit-scrollbar-thumb:hover,
.formal-attention-questions::-webkit-scrollbar-thumb:hover,
.formal-briefing-body::-webkit-scrollbar-thumb:hover,
.login-pretest-questions::-webkit-scrollbar-thumb:hover,
.login-commitment-list::-webkit-scrollbar-thumb:hover,
.in-round-preview-questions::-webkit-scrollbar-thumb:hover,
.student-modal-preview-dialog .formal-attention-questions::-webkit-scrollbar-thumb:hover,
.student-pretest-preview-sheet .login-pretest-questions::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Subtle bottom fade: hints that more questions are below */
.questionnaire-scroll,
#questionnaireModal #questionsList,
.formal-attention-questions,
.login-pretest-questions,
.in-round-preview-questions,
.student-modal-preview-dialog .formal-attention-questions,
.student-pretest-preview-sheet .login-pretest-questions {
  background:
    linear-gradient(180deg, transparent calc(100% - 28px), rgba(49, 130, 206, 0.07) 100%) local,
    #fff local;
  background-attachment: local, scroll;
}

/* ── In-round / post-test questionnaire modal (wider on PC) ── */
#questionnaireModal .modal {
  max-width: min(920px, 94vw);
  width: 100%;
  max-height: min(90vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 28px 32px 22px;
}

#questionnaireModal .modal h2,
#questionnaireModal .q-timer-bar {
  flex-shrink: 0;
}

#questionnaireModal #questionsList {
  flex: 1 1 auto;
  min-height: 140px;
  max-height: min(calc(90vh - 200px), 720px);
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 0 16px;
  padding: 6px 10px 14px 4px;
}

#questionnaireModal .modal-footer {
  flex-shrink: 0;
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid #edf2f7;
}

/* Matrix tables benefit from extra horizontal room */
#questionnaireModal .matrix-table {
  min-width: 380px;
}

@media (min-width: 900px) {
  #questionnaireModal .likert-end-label {
    max-width: 140px;
  }
}