/* survey.css — CSS เฉพาะของโปรเจกต์ survey (ต่อยอดจาก template.css ห้ามแก้ token)
   โหลดหลัง template.css เสมอ */

/* หน้าแบบสอบถามใช้บนมือถือเป็นหลัก: ช่องกรอกสูงพอกดง่าย และ 16px กัน iOS ซูมเอง */
.form-page .input, .form-page .select, .form-page textarea.input {
  min-height: 44px; font-size: 16px;
}
.form-page textarea.input { padding: var(--s2) var(--s3); min-height: 96px; resize: vertical; line-height: 1.5; }
.form-page .field label { font-size: 14px; }
.btn-full { width: 100%; min-height: 48px; font-size: 16px; }

/* หัวแบบสอบถาม: บล็อกน้ำเงินแบบเดียวกับ login-brand ของ template */
.form-brand { background: var(--brand); color: #fff; padding: var(--s5); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.form-brand .org { font-size: 12px; opacity: .85; letter-spacing: .06em; }
.form-brand h1 { font-size: 19px; margin-top: 2px; line-height: 1.35; }
.form-brand .sub { font-size: 13px; opacity: .92; margin-top: var(--s2); }
.form-brand .chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.form-brand .chip {
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: 2px var(--s3); font-size: 12px; font-weight: 600;
}

/* แถวงานข้อ 4: ชื่องาน + นาที/วัน */
.task-row { display: flex; gap: var(--s2); }
.task-row .t-name { flex: 1; }
.task-row .t-min { width: 104px; }

/* กล่องหัวข้อจุดไอเดียใต้คำถาม */
.idea-box {
  background: var(--brand-soft); border: 1px dashed var(--brand-line);
  border-radius: var(--r); padding: var(--s2) var(--s3);
}
.idea-box .idea-label { font-size: 12px; color: var(--brand-dark); font-weight: 600; margin-bottom: var(--s2); }
.idea-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.idea-chip {
  min-height: 34px; padding: var(--s1) var(--s3); font-size: 13px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 999px;
}
.idea-chip:hover { border-color: var(--brand); color: var(--brand-dark); }

/* กราฟแท่งแนวนอน (HTML/CSS ข้อมูลจริงจากฐานข้อมูล) */
.bar-row { display: flex; flex-direction: column; gap: 2px; padding: var(--s1) 0; }
.bar-row .bar-label { display: flex; justify-content: space-between; gap: var(--s2); font-size: 13px; }
.bar-row .bar-val { color: var(--ink-soft); white-space: nowrap; font-size: 12px; }
.bar-track { background: var(--brand-soft); border-radius: 5px; height: 14px; overflow: hidden; }
.bar-fill { background: var(--brand); height: 100%; border-radius: 5px; min-width: 3px; }
.bar-fill.alt { background: var(--ok); }

/* แท็บอ่านคำตอบรายข้อ */
.tabs { display: flex; gap: var(--s2); flex-wrap: wrap; }
.tab-btn {
  min-height: 32px; padding: var(--s1) var(--s3); font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-soft);
}
.tab-btn:hover { background: var(--tint); color: var(--ink); }
.tab-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.qa-item { border-left: 3px solid var(--brand-line); padding: var(--s1) var(--s3); margin-bottom: var(--s3); }
.qa-item .qa-text { white-space: pre-wrap; font-size: 13px; }
.qa-item .qa-meta { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

/* อื่นๆ */
.muted { color: var(--ink-soft); font-size: 12px; }
.footer-note { text-align: center; color: var(--ink-soft); font-size: 12px; padding: var(--s4) 0 var(--s6); }
.ai-summary { white-space: pre-wrap; font-size: 13px; }