/* ============================================================
   hscheck.css — ส่วนเฉพาะของหน้าค้นพิกัดก่อนแอด
   ต่อท้าย template.css (ธีมมาตรฐานบ้าน sirirak) — ห้ามแก้ค่าในไฟล์ธีม ให้เขียนเพิ่มที่นี่
   สีและระยะห่างใช้ตัวแปรของธีมเท่านั้น
   ============================================================ */

.page { max-width: 820px; }

.req { color: var(--danger); font-weight: 700; }
.en { font-weight: 400; color: var(--ink-faint); font-size: 12px; }

/* ผู้ใช้จริงเกือบทั้งหมดใช้มือถือ — ช่องกรอกสูงพอให้นิ้วกด และตัวอักษร 16px กัน iPhone ซูมหน้าเองตอนแตะช่อง */
.hs-input { min-height: 44px; font-size: 16px; }
.hs-coderow { display: flex; gap: var(--s2); }
.hs-coderow .btn { min-height: 44px; padding: 0 var(--s5); }

.hs-stack { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.hs-stack:empty { display: none; }
#suggest:empty, #out:empty { display: none; }

.flash-body { display: flex; flex-direction: column; gap: var(--s2); flex: 1; min-width: 0; }
.flash-body ul { margin: 0; padding-left: var(--s4); }
.flash-title { font-weight: 700; font-size: 14px; }
.hs-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* รายการตัวเลือกเลขพิกัด (กดแล้วเช็คเลขนั้น) */
.hs-sug {
  display: block; width: 100%; text-align: left; color: var(--ink);
  background: var(--card); border: 0; border-bottom: 1px solid var(--line);
  padding: var(--s3) var(--s4);
}
.hs-sug:hover { background: var(--tint); }
.hs-sug:last-of-type { border-bottom: 0; }
.hs-sugtop { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.hs-code { font-size: 16px; font-weight: 700; }
.hs-fmt { color: var(--ink-faint); font-size: 12px; }
.hs-cat { color: var(--danger); font-size: 12px; font-weight: 600; }

/* คำอธิบายพิกัดเป็นลำดับขั้น + คำแปลไทยใต้แต่ละบรรทัด */
.hs-hier { margin-top: var(--s1); font-size: 13px; }
.hs-row:first-child > div:first-child, .hs-row:last-child > div:first-child { font-weight: 600; }
.hs-th { color: var(--brand); font-size: 12px; }

/* ผลเช็คเลขพิกัด */
.hs-result { display: flex; flex-direction: column; gap: var(--s2); }
.hs-verdict { font-size: 22px; font-weight: 700; line-height: 1.3; }
.hs-verdict.forbidden { color: var(--danger); }
.hs-verdict.ok { color: var(--ok); }
.hs-verdict.notfound, .hs-verdict.incomplete { color: var(--warn); }
.hs-label { font-size: 12px; color: var(--ink-soft); }

/* รายการแบบย่อ (เลขข้างเคียง · ลิสต์ทั้งหมด) */
.hs-item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s2); align-items: center;
  width: 100%; text-align: left; color: var(--ink);
  background: var(--card); border: 0; border-bottom: 1px solid var(--line);
  padding: var(--s2) var(--s4); min-height: 44px;
}
.hs-item:hover { background: var(--tint); }
.hs-item .hs-tail, .hs-item .hs-th, .hs-item .hs-cat { grid-column: 1 / -1; }
.hs-tail { font-size: 12px; color: var(--ink-soft); }

details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
#allbody details { border-top: 1px solid var(--line); }
#allbody details > summary { padding: var(--s2) var(--s4); cursor: pointer; font-weight: 600; }

.hs-foot { text-align: center; font-size: 12px; color: var(--ink-faint); }

/* เข้าสู่ระบบ */
.login-form .btn { width: 100%; }
.user-chip form { margin: 0; }