/**
 * 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}

/* Likert / rating: endpoint anchors align with columns 1 and N */
.likert-scale-wrap{width:100%;max-width:100%}
.likert-anchor-row,
.likert-scale-wrap .likert-btn-row,
.likert-scale-wrap .rating-row.likert-btn-row{
  display:grid;
  grid-template-columns:repeat(var(--likert-cols,7),minmax(32px,1fr));
  gap:6px;align-items:center;justify-items:center
}
.likert-anchor-row{margin-bottom:4px}
.likert-anchor{
  font-size:12px;color:#718096;font-weight:500;text-align:center;
  line-height:1.25;max-width:100%;word-break:break-word
}
.likert-anchor-min{grid-column:1}
.likert-anchor-max{grid-column:var(--likert-cols,7)}

/* Matrix: endpoint anchors sit above columns min and max */
.matrix-col-hd-inner{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.25}
.matrix-anchor-label{
  font-size:11px;font-weight:500;color:#718096;white-space:normal;
  max-width:72px;text-align:center;line-height:1.2
}
.matrix-col-num{font-size:12px;font-weight:600;color:#4a5568}

/* Drag-bucket categorize (login pretest category familiarity): left pool, right bins */
.drag-bucket-wrap{margin:6px 0 4px}
.drag-bucket-hint{margin:0 0 10px;font-size:12px;color:#718096;line-height:1.45}
.drag-bucket-layout{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(160px,6fr);gap:12px;align-items:stretch
}
.drag-bucket-pool{
  border:1.5px dashed #cbd5e0;border-radius:10px;padding:10px 12px;margin:0;
  background:#f7fafc;min-height:220px;transition:border-color .15s,background .15s;
  display:flex;flex-direction:column
}
.drag-bucket-pool.is-drop-target,.drag-bucket-bin.is-drop-target{
  border-color:#4299e1;background:#ebf8ff
}
.drag-bucket-pool-title,.drag-bucket-bin-title{
  font-size:12px;font-weight:700;color:#4a5568;margin-bottom:8px;flex-shrink:0
}
.drag-bucket-bins{
  display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;min-height:220px
}
.drag-bucket-bin{
  border:1.5px solid #e2e8f0;border-radius:10px;padding:10px;background:#fff;
  min-height:0;transition:border-color .15s,background .15s;
  display:flex;flex-direction:column
}
.drag-bucket-chips{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;min-height:28px;flex:1}
.drag-bucket-chip{
  display:inline-flex;align-items:flex-start;max-width:100%;text-align:left;
  padding:7px 10px;border:1px solid #cbd5e0;border-radius:8px;background:#fff;
  font-size:12px;line-height:1.35;color:#2d3748;cursor:grab;user-select:none;
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.drag-bucket-chip:hover{border-color:#63b3ed}
.drag-bucket-chip.is-selected{
  border-color:#3182ce;background:#ebf8ff;box-shadow:0 0 0 2px rgba(49,130,206,.25)
}
.drag-bucket-chip.is-dragging{opacity:.45}
.drag-bucket-empty{
  display:block;width:100%;font-size:12px;color:#a0aec0;padding:8px 2px;text-align:center
}
@media (max-width:640px){
  .drag-bucket-layout{grid-template-columns:1fr}
  .drag-bucket-pool,.drag-bucket-bins{min-height:0}
  .drag-bucket-bins{grid-template-rows:none}
  .drag-bucket-bin{min-height:96px}
}

.q-block{margin-bottom:20px;padding:14px 14px 12px;border-radius:9px;border:1.5px solid transparent;transition:border-color .2s,background .2s}
.q-block.error,.formal-attention-item.error{border-color:#fc8181;background:#fff5f5}
.q-block[hidden],.formal-attention-item[hidden],
.q-block.is-pretest-page-hidden,.formal-attention-item.is-pretest-page-hidden{
  display:none!important}
.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,
.in-round-preview-questions,
.student-modal-preview-dialog .formal-attention-questions,
.student-pretest-preview-sheet .login-pretest-questions {
  min-height: 0;
  background:
    linear-gradient(180deg, transparent calc(100% - 28px), rgba(49, 130, 206, 0.07) 100%) local,
    #fff local;
  background-attachment: local, scroll;
}

/* Login pre-test: plain background avoids scroll painting bugs in WebKit */
.login-pretest-questions {
  background: #fff;
}

/* ── 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: 0;
  max-height: min(calc(90vh - 200px), 720px);
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 0 16px;
  padding: 6px 10px 14px 4px;
}

#questionnaireModal .login-pretest-scroll-hint{
  flex-shrink:0;margin:0 0 12px
}
#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;
  }
}