/*
 * แถบหัวถาวร · แถบแท็บ · ปฏิทินเลือกคืน  (ui/header.js + แถบแท็บใน app.js)
 *
 * ไฟล์แยกโดยตั้งใจ: app.css เป็นไฟล์ที่ทุกแพ็กเกจอยากแตะ กติกาของงานชุดนี้คือ
 * หนึ่งไฟล์ CSS ต่อหนึ่งแพ็กเกจ (layout.css วางบรรทัดฐานนี้ไว้แล้ว)
 *
 * CSP เป็น style-src 'self' — ค่าที่คำนวณได้ต้องมาทาง data-* + CSSOM เท่านั้น
 * ทุกอย่างในไฟล์นี้เป็นความกว้างคงที่ จึงไม่มีอะไรต้องคำนวณเลย
 *
 * เป้าสัมผัสขั้นต่ำ 44px ทุกอัน รวมลูกศรของตัวเลื่อนซึ่งเป็นจุดที่กฎนี้ถูกลืมบ่อยที่สุด
 * (ลูกศรเล็กดู "เรียบร้อย" บนจอคอม แล้วกดไม่โดนบนโทรศัพท์ในที่มืด)
 */

/* ───────── รางของกริดต้องไม่ถูกแถบหัวเป็นคนกำหนด ─────────
 *
 * #app เป็นกริดคอลัมน์เดียว ความกว้างของรางมาจาก "min-content ที่มากที่สุด" ของลูกทั้งสาม
 * ลูกกริดมี min-width: auto เป็นค่าเริ่มต้น ซึ่งแปลว่า "ห้ามหดต่ำกว่าเนื้อในของฉัน"
 * .topbar-row เป็น flex แบบ nowrap แถบหัวจึงประกาศ min-content ราว 329px
 * ที่จอ 320px รางเลยกลายเป็น 329px แล้ว **ทุกแถวถูกยืดตามราง** — แถบหัว ท้ายจอ และ #view
 * รายงานว่ากว้าง 329 ทั้งที่เนื้อในของแต่ละอันพอดีอยู่แล้ว (สแกนลูกทุกตัวแล้ว ไม่มีอะไรล้นจริง)
 *
 * แถวเดียวที่ตั้งรางผิด จึงลงโทษทุกหน้าจอในแอปพร้อมกัน ไม่ใช่แค่หน้าตัวเอง
 * และมันมองไม่เห็นจากภาพหน้าจอ เพราะไม่มีอะไร "ดูล้น" — มีแต่ของที่ถูกตัดไป 9px
 *
 * แก้ที่ min-width ไม่ใช่ปล่อยให้ .topbar-row ขึ้นบรรทัดใหม่:
 * ชื่อร้านถูกออกแบบให้ตัดด้วย ellipsis มาตั้งแต่ต้น (ดูคอมเมนต์ที่ .venue-pick ใน app.css)
 * เพราะบรรทัดที่สองดันแถบหัวสูงขึ้น 22px แล้วผังโต๊ะก็เตี้ยลงตามในทุกหน้าจอ
 *
 * ใส่ให้ลูกกริดทั้งสาม ไม่ใช่เฉพาะ #topbar — แพ็กเกจถัดไปที่วางแถว nowrap ไว้ใน #view
 * จะได้ไม่เปิดบั๊กเดิมขึ้นมาใหม่ ของที่กว้างกว่าจอต้องเลื่อนในกล่องของตัวเอง (overflow-x: auto)
 * ซึ่งเป็นกฎที่ประกาศไว้แล้วในสัญญาของ ui/tabs.js
 */
#app { min-width: 0; }
#app > * { min-width: 0; }

/* ───────── ข้อความสำหรับโปรแกรมอ่านหน้าจอ ─────────
 *
 * .sr (app.css) เป็น position: absolute โดยไม่มี left/top
 * ตำแหน่งของมันจึงเป็น "ตำแหน่งสถิต" คือจุดที่มันจะอยู่ถ้ายังอยู่ในสายการไหล
 * ถ้าไม่มีบรรพบุรุษตัวไหน position ไม่ใช่ static บล็อกอ้างอิงคือทั้งหน้าเอกสาร
 * ข้อความที่ตำแหน่งสถิตอยู่ไกลขวา (เช่นในตารางที่เลื่อนได้) จึงยืดหน้าออกไปจนสุด
 * โดยที่ body กับ #view ยังรายงานความกว้างเท่าเดิม — หน้าเลื่อนซ้ายขวาโดยไม่มีอะไรให้เห็น
 *
 * ตรึงไว้ที่มุมบนซ้ายของบล็อกอ้างอิงเสมอ: มันขนาด 1px และถูก clip อยู่แล้ว มองไม่เห็นทั้งคู่
 * และโปรแกรมอ่านหน้าจออ่านตามลำดับใน DOM ไม่ใช่ตามพิกัด ความหมายจึงไม่เปลี่ยน
 * แก้ตรงนี้ทีเดียวแทนที่จะให้ทุกแพ็กเกจไปใส่ position: relative ให้พ่อของตัวเองทีละจุด
 * (ถ้าจุดไหนพลาด อาการคือหน้าเลื่อนข้างโดยไม่มีสาเหตุที่มองเห็น ซึ่งหายากที่สุด)
 */
.sr { left: 0; top: 0; }

/* ───────── แถวบน ───────── */

/* ชื่อร้านเป็นทางเข้าหน้าตั้งค่าและทางสลับสาขา แต่ของเดิมสูง 36px ซึ่งต่ำกว่าเป้าสัมผัสขั้นต่ำ
   ตอนนี้มันอยู่บนแถบที่ถูกกดทุกคืน จึงต้องเท่ากับปุ่มอื่นบนแถบเดียวกัน
   ตัวหนังสือยังเท่าเดิม — ที่โตขึ้นคือพื้นที่รับนิ้ว ไม่ใช่ขนาดที่ตาเห็น */
.topbar .venue-pick { min-height: 44px; }

/* ───────── ตัวเลื่อนวันและรอบขาย ───────── */

.hdr-steps {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 6px;
}

.step {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  min-width: 0;
}
/* ตัวเลื่อนวันกินทั้งแถวเมื่ออยู่ตัวเดียว และหดให้ตัวเลื่อนรอบขายมานั่งข้าง ๆ ได้เมื่อมีรอบ
   basis ต้องเล็กพอให้สองตัวอยู่แถวเดียวกันที่ 390px (ตามภาพที่เจ้าของส่งมา)
   ถ้าไม่พอจริง ๆ มันจะขึ้นบรรทัดใหม่เอง ซึ่งอ่านได้อยู่ ไม่ใช่พัง */
.step--date { flex: 1 1 140px; }
.step--round { flex: 1 1 120px; }

.step-arrow {
  /* 44px คือพื้น ไม่ใช่เพดาน — นี่คือปุ่มที่ถูกกดบ่อยที่สุดในแอปรองจากโต๊ะ */
  min-width: 44px; min-height: 44px;
  flex: none;
  background: none; border: 0;
  color: var(--ink-dim); font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.step-arrow:active:not(:disabled) { background: var(--accent-wash); color: var(--sel-text); }
.step-arrow:disabled { opacity: .3; }

.step-label {
  flex: 1 1 auto; min-width: 0;
  min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  background: none; border: 0;
  padding: 0 4px;
  color: var(--ink);
}
.step-label b {
  font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
  /* ไทยห้าม letter-spacing และต้องการที่หายใจแนวตั้ง */
  line-height: 1.75;
}
.step-label small { font-size: 10.5px; color: var(--ink-mute); line-height: 1.2; margin-top: -3px; }
.step-label:not(.is-static):active { background: var(--accent-wash); }
.step-label.is-static { cursor: default; }

/* ───────── ยอดรวม + ปุ่มสองปุ่ม ───────── */

.hdr-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin-top: 8px;
}

.counts { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.counts b { font-size: 17px; font-weight: 600; color: var(--ink); }
.counts > span > span { font-size: 12px; color: var(--ink-mute); margin-left: 4px; }
.counts .warn b { color: var(--accent-text); }   /* บรอนซ์ดิบเป็นตัวหนังสือบนพื้นสว่าง = 2.76:1 */
/* ตัวเลข "เสี่ยง" ที่แตะได้ (UX 19 ต.ค. M3) — หน้าตาเหมือนตัวเลขข้าง ๆ + เส้นใต้ประ บอกว่ากดได้
   ขยายพื้นที่รับนิ้วด้วย padding แล้วหักคืนด้วย margin ลบ แถวจึงไม่สูงขึ้น */
.counts-btn {
  display: inline-flex; align-items: baseline; gap: 0;
  padding: 10px 6px; margin: -10px -6px;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
}
.counts-btn > span { font-size: 12px; color: var(--ink-mute); margin-left: 4px; text-decoration: underline dotted; text-underline-offset: 3px; }
.counts-btn:active { background: var(--accent-wash); border-radius: 8px; }

/* การจองกับจำนวนหัวเป็นกลุ่มสายตาเดียว ไม่ใช่สองตัวเลขที่ต้องเอามาเทียบกันในหัว */
.counts-pair { display: inline-flex; align-items: baseline; gap: 4px; }
.counts-pair i { font-style: normal; font-size: 15px; color: var(--sel-text); }

.hdr-acts { display: flex; gap: 8px; flex: none; }
.hdr-act {
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px;
  white-space: nowrap;
}
.hdr-plus { font-size: 13px; line-height: 1; }

/* ───────── แถบ "กำลังดูคืนอื่น" ───────── */

.hdr-ro {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--accent-wash-faint);
  border: 1px dashed var(--line);
  font-size: 12.5px; color: var(--ink-dim);
  line-height: 1.75;
}
.hdr-ro--past { border-style: solid; }
.hdr-ro span { min-width: 0; }
.hdr-ro-back {
  margin-left: auto; flex: none;
  min-height: 44px; padding: 0 12px;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--sel-text); font-size: 13px;
}

/* ───────── แถบเตือนของระบบ (อีเมลขาออกที่ส่งไม่ออก) ─────────
   อยู่ในแถบหัว ไม่ใช่ท้ายจอ ด้วยเหตุผลที่วัดได้: ปุ่มลอย "＋ รับจอง" ถูกตรึงไว้ที่
   bottom: 116px ซึ่งเป็นความสูงของท้ายจอ ณ ตอนที่มันถูกเขียน · แถบที่เพิ่มเข้าไป
   ในท้ายจอทำให้ท้ายจอสูงขึ้น แล้วปุ่มลอยก็ทับคำว่า "ไปหน้าข้อความ" พอดี
   (เห็นจากภาพ .e2e-fix-shots/C-sysbar-en.png รอบแรก ทั้งที่ตัวเลขบอกว่าไม่ล้นจอ)
   ที่นี่มันอยู่ในกระแสปกติของแถบหัว ไม่มีอะไรลอยทับ และเห็นได้จากทุกหน้า

   ใช้รูปแบบเดียวกับ .hdr-ro ซึ่งเป็นแถบประกาศสภาพอีกใบในแถบหัวเดียวกัน
   ต่างกันที่สี — อันนี้คือ "มีอะไรต้องไปทำ" ไม่ใช่ "คืนนี้อ่านอย่างเดียว" */
.sysbar {
  /* ตัดบรรทัด ไม่ใช่ปล่อยให้ป้ายถูกเฉือน — ประโยคไทยยาวกว่าอังกฤษราว 20%
     และ "ไปหน้าข้อความ ›" คือสิ่งเดียวที่บอกว่าแถบนี้กดได้ ถ้ามันหายไปครึ่งคำ
     แถบก็กลายเป็นป้ายบ่น · กฎเดียวกับชิปโซน (ดู .pickzones ใน app.css) */
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  width: 100%; text-align: left;
  margin-top: 8px; padding: 6px 10px;
  min-height: var(--tap);
  border-radius: var(--r-sm);
  background: var(--danger-wash);
  border: 1px solid var(--danger);
  font-size: 12.5px; color: var(--ink);
  line-height: 1.75;
}
.sysbar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }
.sysbar > span:not(.sysbar-go) { min-width: 0; }
.sysbar-go { margin-left: auto; flex: none; color: var(--accent-text); white-space: nowrap; }

/* ───────── แถบแท็บ: จำนวนแท็บไม่คงที่อีกต่อไป ───────── */

/* ของเดิมเป็น grid 3 คอลัมน์ตายตัว ซึ่งใช้ไม่ได้เมื่อจำนวนแท็บมาจากทะเบียน
   flex + flex:1 ให้ผลเดียวกันโดยไม่ต้องรู้จำนวนล่วงหน้า และไม่ต้องคำนวณผ่าน CSSOM */
.tabs { display: flex; }
.tabs > a, .tabs > .tab-more { flex: 1 1 0; min-width: 0; }
.tabs a { padding: 0 2px; }
.tabs a b {
  font-size: 13.5px;
  /* ป้ายยาวถูกตัดแทนที่จะดันแถบให้เลื่อนแนวนอน — หน้าจอต้องไม่เลื่อนซ้ายขวาเด็ดขาด
     แต่ "Reser…" อ่านไม่ออกในห้องมืด การตัดจึงเป็นตาข่ายกันตก ไม่ใช่การออกแบบ
     ป้ายที่ถูกต้องคือป้ายที่สั้นพอตั้งแต่ต้น — งบไว้ที่ ~9 ตัวอักษร (ดูสัญญาใน ui/tabs.js) */
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; text-align: center;
  letter-spacing: 0;
}
/* โทรศัพท์แนวตั้ง: หกแท็บกับปุ่ม ⋯ เหลือช่องละราว 52px
   ลดขนาดตัวอักษรลงหนึ่งขั้นได้ตัวอักษรเพิ่มราวสองตัวโดยยังอ่านออกที่ระยะแขน
   เป้าสัมผัสไม่เปลี่ยน — ความสูงของช่องเป็นตัวกำหนด ไม่ใช่ขนาดตัวอักษร */
@media (max-width: 430px) {
  .tabs a b, .tabs .tab-more b { font-size: 12px; }
  .tabs a { padding: 0 1px; }

  /* ───── ยอดรวม + ปุ่มสองปุ่ม อยู่บรรทัดเดียวกัน ─────
     บนจอ 390px แถวนี้ขึ้นสองบรรทัดเสมอ (ยอดรวมบรรทัดหนึ่ง ปุ่มอีกบรรทัดหนึ่ง) = 80px
     ทั้งที่มันคือแถวเดียวกันของงานเดียวกัน 36px ที่ได้คืนมาไปเป็นความสูงของผังโต๊ะ
     ซึ่งบนมือถือคือของหายากที่สุดในหน้า (วัดแล้ว: ผังได้ 35% ของจอที่ 360×640)

     ความสูงของเป้าสัมผัสไม่ลด — .hdr-act ยังเป็น min-height 44px เท่าเดิม
     ที่เล็กลงคือขนาดตัวอักษรกับช่องไฟ ซึ่งไม่ใช่ขนาดของเป้า */
  .hdr-foot { flex-wrap: nowrap; gap: 8px; }
  /* ยอดรวมยังขึ้นบรรทัดใหม่ของตัวเองได้ ห้ามตัดทิ้ง
     ลองแบบ nowrap + overflow: hidden แล้ว ได้ "13 seate…" กับ "0 at risk" ที่หายไปทั้งก้อน
     บนจอ 360px — ตัวเลข "เสี่ยง" คือตัวเลขที่คนหน้าประตูต้องเห็น ไม่ใช่ตัวที่ยอมสละก่อน
     (ยาวไม่เท่ากันทุกภาษาและโตเป็นสามหลักได้ การตัดจึงพังคนละแบบในแต่ละคืน) */
  .counts { gap: 3px 10px; flex-wrap: wrap; }
  .counts b { font-size: 15px; }
  .counts-pair i { font-size: 13px; }
  .counts > span > span { font-size: 11px; margin-left: 3px; }
  .counts-btn > span { font-size: 11px; margin-left: 3px; }
  .hdr-acts { gap: 6px; }
  .hdr-act { padding: 0 11px; font-size: 13px; }
}
.tab-more {
  min-height: 56px;
  background: none; border: 0; border-top: 2px solid transparent;
  color: var(--ink-dim);
}
.tab-more b { font-size: 18px; font-weight: 500; letter-spacing: 0; }
.tab-more.is-cur { border-top-color: var(--bronze); color: var(--sel-text); }

/* ───────── ป้ายแดง "รอคนในร้านลงมือ" (0071 · คำขอจองที่ยังไม่มีใครตอบ) ─────────
   สีแดงเพราะมันคือสิ่งเดียวบนแถบล่างที่ "ถ้าไม่มีใครทำ จะไม่มีใครทำ" — ต่างจากกระดิ่ง (บรอนซ์)
   ซึ่งเป็น "เกิดอะไรขึ้น" และหายไปเมื่อกดดูแล้ว · ป้ายนี้หายเมื่อคำขอถูกตอบเท่านั้น
   โทเคนสามที่ (มืด · media สว่าง · data-theme สว่าง) ด้วยเหตุผลเดียวกับหัวข้อธีมของ app.css
   คอนทราสต์: มืด #1F1F1F บน #E0785C = 6.1:1 · สว่าง #FFFFFF บน #B23C1E = 6.4:1 */
:root { --wait-bg: #E0785C; --wait-ink: #1F1F1F; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --wait-bg: #B23C1E; --wait-ink: #FFFFFF; }
}
:root[data-theme="light"] { --wait-bg: #B23C1E; --wait-ink: #FFFFFF; }
.tab-badge {
  display: inline-block; flex: none;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px; background: var(--wait-bg); color: var(--wait-ink);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 2px;
  font-variant-numeric: tabular-nums;
}
/* บนปุ่ม ⋯ ป้ายลอยที่มุมขวาบนของสัญลักษณ์ ไม่ดันจุดสามจุดออกจากกลาง */
.tab-more { position: relative; }
.tab-more .tab-badge { position: absolute; top: 6px; left: calc(50% + 6px); margin: 0; }
.tabs a .tab-badge { vertical-align: 1px; }
/* แถวในแผ่น ⋯ — ป้ายชิดขวา ตัวเลขไม่วิ่งตามความยาวของชื่อหน้า */
.more-row .tab-badge { margin-left: auto; font-size: 12px; min-width: 22px; height: 22px; line-height: 22px; }

.more-list { display: grid; gap: 8px; }
.more-row {
  min-height: var(--tap);
  display: flex; align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink);
  font-size: 15px;
}
.more-row.is-cur { border-color: var(--bronze); color: var(--sel-text); }
/* ออกจากระบบ — แถวสุดท้ายของเมนู ⋯ แยกด้วยช่องไฟ · กดครั้งแรกเปลี่ยนเป็นสีอันตราย "กดอีกครั้ง" */
.more-out { margin-top: 10px; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.more-out small { font-size: 12px; color: var(--ink-mute); }
.more-out.is-armed { border-color: var(--danger); color: var(--danger-text); }

/* ───────── ปฏิทินเลือกคืน ───────── */

.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.cal-head b { font-size: 15px; color: var(--ink); line-height: 1.75; }
.cal-head .step-arrow { border: 1px solid var(--line); border-radius: 999px; }

.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: 11px; color: var(--ink-mute); text-align: center;
  margin-bottom: 4px;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-pad { min-height: 44px; }
.cal-day {
  min-height: 44px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.cal-day:disabled { opacity: .25; }
/* วันที่ร้านปิดยังกดได้ (ดูย้อนหลังได้) แต่ต้องแยกออกด้วยเส้น ไม่ใช่ด้วยสีอย่างเดียว —
   กฎเดียวกับสถานะโต๊ะใน ui/floor.js เพราะจอนี้ถูกอ่านในห้องมืด */
.cal-day.is-shut { border-style: dashed; border-color: var(--line); color: var(--ink-mute); }
.cal-day.is-today { border-color: var(--line); color: var(--sel-text); }
.cal-day.is-sel { background: var(--bronze); color: var(--on-accent); font-weight: 600; border-color: var(--bronze); }

/* ═══════════════════════════════════════════════════════════════════════════
 *  ป้ายแจ้งเตือน (0056) — ปุ่มเดียวบนแถบหัว กับตัวเลขบนมัน
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ไม่มีอะไรในบล็อกนี้ที่ "เด้ง" · ไม่มี animation ไม่มี keyframes ไม่มีอะไรกะพริบ
 * เจ้าของเพิ่งสั่งแก้เรื่องหน้าจอขยับกลางงาน และตัวแจ้งเตือนที่ชิงสายตา
 * คือบั๊กเดียวกันในเสื้อผ้าชุดใหม่ (เหตุผลเต็มอยู่หัวไฟล์ js/ui/alerts.js)
 *
 * ── ความกว้างต้องคงที่ ไม่ว่าตัวเลขจะเป็นเท่าไหร่ ──
 * ปุ่มนี้อยู่ใน .topbar-row ซึ่งเป็น flex nowrap ที่คับอยู่แล้วที่ 390px
 * ถ้าความกว้างของมันเปลี่ยนตามจำนวนหลัก ทั้งแถวจะขยับทุกครั้งที่มีคนจองเข้ามา
 * — ซึ่งคือการขยับหน้าจอระหว่างที่คนกำลังจะแตะปุ่มข้าง ๆ พอดี
 * ตัวเลขจึงลอยอยู่บนมุม (absolute) ไม่ได้อยู่ในสายการไหล และ js ตัดที่ "9+"
 */
.bell {
  position: relative;
  align-self: center; flex: none;
  /* ไอคอนต้องอยู่กลางวงเสมอ — เดิม .bell-ico เป็นบล็อกในปุ่ม เลยชิดซ้ายตาม padding ตั้งต้นของปุ่ม
     (เบราว์เซอร์ละแบบ · iPhone เห็นระฆังเบี้ยวไปซ้าย 5.5px · เจ้าของ 20 ต.ค. "ระฆังใน tableory มันเบี้ยวอะ") */
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  min-height: 44px; min-width: 44px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-dim); background: none; font-size: 15px; line-height: 1;
}
.bell:active { background: var(--accent-wash); }
.bell--on { border-color: var(--bronze); color: var(--accent-text); }
.bell-ico { display: block; }
.bell-n {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--bronze); color: var(--on-accent);
  font-size: 11px; line-height: 18px; text-align: center;
  /* ตัวเลขบนวงกลมเล็ก ต้องไม่ถูกตัวอักษรไทยข้างล่างดันจนเบี้ยว — ป้ายนี้เป็นเลขล้วนเสมอ */
  font-variant-numeric: tabular-nums;
}

/* ───────── แผ่น "ตั้งแต่ครั้งล่าสุดที่ดู" ───────── */

/* บรรทัดสรุปแยกตามชนิด — สิ่งแรกที่ตาเห็น ไม่ใช่ตัวเลขรวม
   "จองออนไลน์ 6 · ยกเลิก 2 · ตอบกลับ 1" บอกว่าต้องทำอะไรต่อ เลข 9 ไม่บอก */
.al-sum { font-size: 14px; color: var(--ink); margin: 0 0 10px; line-height: 1.75; }
.al-first, .al-more { margin: 8px 0 0; }

.al-list { display: flex; flex-direction: column; gap: 6px; }

.al-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--ink); text-align: left;
  /* ข้อความไทยอยู่ในทุกแถว (ป้ายชนิดเหตุการณ์) — 1.75 คือพื้นของทั้งแอป */
  line-height: 1.75;
}
.al-row:active { background: var(--accent-wash); }

/* ชนิดเหตุการณ์คือสิ่งที่ตาไล่หา จึงเป็นเส้นสีที่ขอบซ้าย ไม่ใช่พื้นหลังทั้งแถว
   พื้นหลังสี่สีในรายการเดียวอ่านเหมือนตารางรหัสสี ซึ่งต้องจำก่อนถึงจะอ่านได้ */
.al-row--cancel { border-left: 3px solid var(--rust-light); }
.al-row--change { border-left: 3px solid var(--bronze); }
.al-row--reply  { border-left: 3px solid var(--sage); }

.al-kind { font-weight: 600; font-size: 14px; }
.al-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: var(--ink-dim); font-size: 13px; }
.al-ref { font-size: 12px; color: var(--ink-mute); }
.al-marks { display: flex; gap: 6px; margin-left: auto; }
.al-marks i {
  font-style: normal; font-size: 11px; line-height: 1.75;
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-mute);
}
.al-empty { padding: 8px 0; }
.al-empty p { margin: 0 0 6px; line-height: 1.75; }

/* ───────── จอกว้าง (คอม · iPad แนวนอน) หน้าผังโต๊ะ: แถบหัวเหลือแถวเดียว ─────────
   เจ้าของ 19 ต.ค. (ภาพจอคอม): "ยังแสดงโต้ะไม่ครบนะ ดูตรง รอบๆ บาร์สิ" — ผังได้แค่ 432px จากจอ 900px
   เพราะแถบหัวสามแถว (ร้าน/นาฬิกา · วันที่ · ยอดรวม/ปุ่ม) กินไปราว 170px ทั้งที่จอกว้างวางเรียงกันได้แถวเดียว
   ไม่แตะ HTML: .topbar-row กับ .hdr-foot เป็น display: contents ลูกของมันจึงเรียงแถวเดียวกับตัวเลื่อนวัน
   ลำดับ: ร้าน · วันที่ · ยอดรวม ……… วอล์กอิน · รับจอง · นาฬิกา · แจ้งเตือน · ภาษา · ธีม
   ของที่ไม่ได้มีทุกคืน (แถบดูคืนอื่น · แถบระบบติดขัด) ได้แถวของตัวเองด้านล่าง
   จอที่ไม่พอจริง (ชื่อสาขายาว · มีรอบขาย) ขึ้นบรรทัดใหม่เอง ไม่ล้น · หน้าอื่นยังเป็นคอลัมน์ 900px แบบเดิม
   1100px ต้องตรงกับ WIDE_FLOOR_PX ใน js/ui/floor.js */
@media (min-width: 1100px) {
  #app:has(.floor-row) .topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  #app:has(.floor-row) .topbar-row,
  #app:has(.floor-row) .hdr-foot { display: contents; }
  #app:has(.floor-row) .topbar .venue-seg,
  #app:has(.floor-row) .topbar .venue-pick { order: 1; }
  #app:has(.floor-row) .topbar .venue-seg-btn { padding: 0 12px; }
  /* ตัวเลื่อนวันยืดหดได้ 200–300px — การตัดบรรทัดคิดจากขนาดตั้งต้น ตั้ง 300 แล้ว iPad แนวนอน (1180)
     ปุ่มภาษา/ธีมตกไปแถวสองอยู่ลำพัง · 200px ยังพอให้ "จันทร์ 19 ต.ค." ไม่ถูกตัด */
  #app:has(.floor-row) .hdr-steps { order: 2; margin-top: 0; flex: 1 1 200px; max-width: 300px; flex-wrap: nowrap; }
  #app:has(.floor-row) .counts { order: 3; }
  #app:has(.floor-row) .hdr-acts { order: 4; margin-left: auto; }
  #app:has(.floor-row) .topbar-clock { order: 5; margin-right: 0; }   /* แถวเดียว: ตัวดันคือ .hdr-acts (margin-left:auto) */
  #app:has(.floor-row) .topbar .bell { order: 6; }
  #app:has(.floor-row) .topbar .langpick { order: 7; }
  #app:has(.floor-row) .topbar .themepick { order: 8; }
  #app:has(.floor-row) .hdr-ro,
  #app:has(.floor-row) .sysbar { order: 9; flex: 1 0 100%; margin-top: 0; }
}