/* หน้า "เข้าด้วยมือถือ" ของ Healthy (qr-login.html) · คัดลอกจาก apps/organize-v3/public/styles/qr-login.css (หน้าเดียวกันของ รพ.) · เสริม verify.css + verify-healthy.css
   ขั้นที่ 1 "ก่อนสแกน" + กล่องเตือนสีเหลืองอ่อนเมื่อมือถือยังไม่เข้าระบบ (เจ้าของระบบ 25 ต.ค. 2569)
   ไม่มีไฟล์โหมดมืด (ชื่อมี login · scripts/test-dark-mode.js) ข้อความในขั้นตอนจึงใช้สีตามการ์ด กล่องเตือนกำหนดสีพื้น+ตัวอักษรเองครบ อ่านได้ทั้งสองโหมด
   Taste (app screen): คำถามหลัก "ทำอะไรบนมือถือให้คอมนี้เข้าระบบ" → คิวอาร์ + เลข ใหญ่สุด · สถานะคิวอาร์อยู่ใต้คิวอาร์ · การ์ดกลางจอไม่มีที่ว่างค้างด้านล่าง */
.ql-shell {
  min-height: calc(100dvh - 48px);
  align-content: center;
  margin-block: 24px;
}
.ql-state {
  max-width: 220px;
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
}
.ql-steps {
  gap: 14px;
}
/* ขั้นที่ 1 ต้องทำก่อน แยกจากขั้นสแกนด้วยเส้นบาง (สีตามตัวอักษร ใช้ได้ทั้งโหมดสว่าง/มืด) */
.ql-step-pre {
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.ql-step-pre b {
  overflow-wrap: anywhere;
}
/* ป้าย "ก่อนสแกน" เด่นเหนือขั้นที่ 1 (เจ้าของระบบ 28 ต.ค. 2569) · พื้นเข้ม ตัวขาว อ่านได้ทั้งสองโหมด */
.ql-pre-badge {
  display: block;
  width: fit-content;
  margin-bottom: 6px;
  padding: 3px 14px;
  border-radius: 999px;
  background: #b45309;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgb(180 83 9 / 0.25);
}
/* ภาษาไทยไม่มีช่องว่างระหว่างคำ เบราว์เซอร์ตัดกลางคำได้ ("บนมือ|ถือ") */
.ql-keep {
  white-space: nowrap;
}
.ql-step-hint {
  display: block;
  margin-top: 2px;
  opacity: 0.72;
  font-size: 0.92rem;
  line-height: 1.45;
}
.ql-warn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  margin: 4px 0 0;
  padding: 12px 16px;
  border: 1px solid #f1d58a;
  border-radius: 14px;
  background: #fff8e1;
  color: #5c4300;
  font-size: 1rem;
  line-height: 1.55;
  text-align: left;
}
.ql-warn-icon {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: #b07a00;
}
@media (max-width: 640px) {
  .ql-shell {
    min-height: 0;
    margin-block: 18px 32px;
  }
  .ql-warn {
    padding: 12px 14px;
    font-size: 0.96rem;
  }
}
/* Healthy: กล่องเตือนและเส้นแบ่งใช้สีโทนเขียวของแอป */
.vf-healthy .ql-step-pre b {
  color: var(--health-primary-dark, #194e31);
}