/* ══════════════════════════════════════════════════════════════════
   Tableory · คิวรอโต๊ะ (P6)

   ไฟล์แยกเพราะ css/app.css มีเจ้าของอยู่ และหนึ่งไฟล์ต่อหนึ่งแพ็กเกจคือกติกาของรอบนี้
   ต้องโหลด "หลัง" app.css เสมอ — ทุกสีในไฟล์นี้เป็นโทเคนของ app.css ทั้งหมด
   จึงตามธีมสว่าง/มืดเองโดยไม่ต้องประกาศชุดสีซ้ำ และไม่มีสีดิบสักค่าเดียวในไฟล์นี้

   สภาพการใช้งานที่ทุกกฎในไฟล์นี้อ้างถึง:
   ยืนอยู่ที่ประตู ห้าทุ่ม ในที่มืด ถือโทรศัพท์มือเดียว
   ══════════════════════════════════════════════════════════════════ */

.wl { padding-bottom: 4px; }

/* ───────── หัวเรื่อง: สามแท็บ · ค้นหา · ยอดรวม ───────── */

.wl-head { position: sticky; top: 0; z-index: 5; background: var(--ground); padding-top: 2px; }

/* .daybar ของ app.css สูง 40px ซึ่งต่ำกว่าเป้าสัมผัสขั้นต่ำของหน้านี้
   แถบสามแท็บนี้ถูกกดบ่อยที่สุดในหน้า และถูกกดด้วยนิ้วโป้งข้างเดียวขณะยืนอยู่ที่ประตู */
.wl-states button { min-height: var(--tap); }

/* ตัวเลขบนแท็บอ่านสำคัญกว่าป้าย — โฮสต์กวาดตาหา "เหลือกี่กลุ่ม" ไม่ใช่หาคำว่า Active */
.wl-states button .num { color: var(--accent-text); font-weight: 600; margin-left: 4px; }
.wl-states button[aria-pressed="true"] .num { color: var(--sel-text); }

.wl-find { display: flex; gap: 8px; align-items: stretch; padding-bottom: 8px; }

/* ช่องค้นหาต้องกินความกว้างที่เหลือทั้งหมด ไม่ใช่ความกว้างมาตรฐานของ input
   คนที่พิมพ์อยู่ตรงนี้กำลังหาคนจากชื่อที่จำได้ครึ่งเดียว */
.wl-q {
  flex: 1 1 auto; min-width: 0;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 16px;            /* ต่ำกว่า 16px แล้ว iOS จะซูมหน้าเข้าตอนโฟกัส */
  font-family: var(--font);
}
.wl-q:focus { border-color: var(--bronze); outline: none; }
.wl-q::placeholder { color: var(--ink-mute); }

.wl-filter {
  flex: 0 0 auto;
  min-width: var(--tap); min-height: var(--tap);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-dim);
  font-size: 17px;
}
/* ตัวกรองที่ "เปิดอยู่" ต้องมองออกโดยไม่ต้องกดเข้าไปดู
   ไม่งั้นจะมีคนสงสัยว่าทำไมคิวหายไปครึ่งหนึ่ง แล้วไปหาสาเหตุผิดที่ */
.wl-filter.is-on { border-color: var(--bronze); color: var(--sel-text); background: var(--accent-wash); }

.wl-sum { padding-bottom: 6px; }

/* ───────── แถบถังจำนวนคน ─────────
   นี่คือตัวควบคุมหลักของหน้านี้ ไม่ใช่ของประดับ จึงอยู่ในระดับสายตาถัดจากแท็บ
   ถังที่เป็นศูนย์ยังอยู่บนแถบเสมอ (`1–2 0`) เพราะตำแหน่งที่คงที่คือสิ่งที่ทำให้กดถูกในที่มืด */
.wl-bks {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 2px 0 12px;
  scrollbar-width: none;
}
.wl-bks::-webkit-scrollbar { display: none; }

.wl-bk {
  flex: 0 0 auto;
  min-height: var(--tap); min-width: 64px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  line-height: 1.25;
}
.wl-bk b { font-size: 12px; font-weight: 500; color: var(--ink-dim); }
.wl-bk .num { font-size: 16px; font-weight: 600; }
.wl-bk[aria-pressed="true"] {
  border-color: var(--bronze); background: var(--accent-wash); color: var(--sel-text);
}
.wl-bk[aria-pressed="true"] b { color: var(--sel-text); }

/* ───────── แถวหนึ่งกลุ่ม ─────────
   จำนวนคนอยู่ซ้ายสุดและใหญ่ที่สุดโดยตั้งใจ — มันคือค่าที่ถูกกวาดตาหา ไม่ใช่ชื่อ
   ชื่อมีไว้ตอนเดินไปเรียกเท่านั้น ซึ่งเกิดขึ้นหลังจากตัดสินใจไปแล้ว */
.wl-list { display: flex; flex-direction: column; gap: 6px; }

.wl-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 8px 12px 8px 10px;
  text-align: left;
  border: 1px solid var(--line);
  border-left: 3px solid var(--st-booked);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
}
.wl-row:active { background: var(--surface-2); }

.wl-party {
  font-size: 22px; font-weight: 600;
  text-align: center;
  color: var(--ink);
}

.wl-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wl-name {
  font-size: 15px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  /* ชื่อไทยต้องไม่ถูก tracking และบรรทัดต้องไม่ต่ำกว่า 1.75 — ทั้งคู่มาจากโทเคนของ app.css */
  letter-spacing: 0;
  line-height: var(--lh);
}
.wl-sub {
  font-size: 12px; color: var(--ink-mute);
  line-height: var(--lh);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wl-wait { font-size: 19px; font-weight: 600; color: var(--ink-dim); white-space: nowrap; }
.wl-wait small { font-size: 11px; font-weight: 400; margin-left: 2px; color: var(--ink-mute); }

/* รอนานเกินกว่าที่บอกแขกไว้
   แยกด้วย "เส้น" ก่อน แล้วค่อยด้วยสี — กฎเดียวกับผังโต๊ะ และด้วยเหตุผลเดียวกัน:
   จอที่ปรับความสว่างต่ำสุดในห้องมืด แยกสีไม่ออก แต่แยกเส้นทึบจากเส้นประออกได้เสมอ */
.wl-row.is-over { border-left-style: double; border-left-width: 6px; border-left-color: var(--st-overdue); }
.wl-row.is-over .wl-wait { color: var(--st-overdue); }

/* แถวที่คำสั่งยังไม่ได้ออกจากเครื่อง — ต้องดูต่างจากแถวที่บันทึกแล้ว
   ไม่งั้นโฮสต์จะเชื่อว่าส่งไปแล้ว ทั้งที่มันยังนอนอยู่ในคิวเพราะไม่มีสัญญาณ */
.wl-row.is-pending { border-style: dashed; border-left-style: dashed; }

/* แท็บที่จบแล้ว — เส้นซ้ายต้องไม่แย่งสายตาไปจากกลุ่มที่ยังรออยู่จริง */
.wl-list .wl-row[data-entry]:not(.is-over):not(.is-pending) { border-left-color: var(--st-booked); }

/* ───────── ชิปเลือกโต๊ะในแผ่นจัดที่นั่ง ─────────
   ใช้ .chip ของ app.css เป็นฐาน เติมแค่ความจุโต๊ะที่ต้องอ่านคู่กับชื่อโต๊ะ */
.chip--tbl { flex-direction: column; gap: 0; line-height: 1.2; }
.chip--tbl small { font-size: 10px; color: var(--ink-mute); }

/* ───────── ธีมสว่าง ─────────
   app.css ประกาศชุดสว่างด้วยการเขียนทับโทเคนสองที่ (media + data-theme)
   ไฟล์นี้ไม่มีสีดิบเลย จึงไม่ต้องประกาศอะไรซ้ำ — ยกเว้นพื้นของหัวเรื่องที่ sticky
   ซึ่งต้องทึบจริงทั้งสองธีม ไม่งั้นแถวจะวิ่งทะลุขึ้นมาเห็นใต้แถบค้นหา
   (--ground ถูกนิยามไว้ครบทั้งสองชุดแล้ว กฎด้านบนจึงถูกต้องอยู่แล้ว) */

/* คำตอบคำถามตอนจองบนใบคำขอ (0063) — คู่ป้าย/ค่า แบบเดียวกับ .au-pair ในแดชบอร์ด */
.rq-answers { margin: 4px 0 0; padding: 0; }
.rq-answers > div { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
.rq-answers dt { color: var(--ink-mute); min-width: 7.5em; flex: none; }
.rq-answers dd { margin: 0; color: var(--ink); word-break: break-word; line-height: var(--lh); }