/* เรดาร์รถไฟ — โหมดรายการบนมือถือ (เจ้าของ 3 ต.ค. 2569: กด "ขบวน" ที่เมนูล่างแล้วรายการเริ่มเกือบล่างจอ ต้องเลื่อนผ่านหัวแผง/ปุ่มลัด/แท็บ)
   app.js syncPanelMode(): แผงที่กางขึ้น (เมนูล่าง/ที่จับ/ลาก) = #panel[data-mode="list"] เสมอ · ย่อ (peek) = หน้าแรก
   (3 ต.ค.: เจ้าของลากแผงขึ้นเองแล้วรายการยังอยู่ล่างจอ) · ปุ่มลัดเหลือแถวเดียวปัดได้ · สถานะเดินรถเข้าจากแถบสถานะบนแผนที่ (แท็บครบ)
   แนวตั้ง: ช่องค้นหา + ชิปสรุปอยู่นอกส่วนที่เลื่อน (.views) จึงติดบนเสมอ · แนวนอน: เลื่อนทั้งแผ่นเหมือนเดิม (จอเตี้ย ติดบนแล้วรายการเหลือนิดเดียว)
   จอใหญ่ (≥ 900 px) และโหมดเด็ก (ไม่มีเมนูล่าง) ไม่เปลี่ยน */
@media (max-width: 899px) {
  /* เมนูล่างทำหน้าที่แทนแท็บ · ปุ่มลัด/ลิงก์หน้าเว็บ/ปุ่ม ? ภาษา ธีม อยู่หน้าแรกของแผง */
  html:not(.kid) .panel[data-mode="list"] .tabs,
  html:not(.kid) .panel[data-mode="list"] .page-links,
  html:not(.kid) .panel[data-mode="list"] .brand-logo,
  html:not(.kid) .panel[data-mode="list"] #helpBtn,
  html:not(.kid) .panel[data-mode="list"] .lang-btn,
  html:not(.kid) .panel[data-mode="list"] #themeBtn {
    display: none;
  }

  /* ปุ่มลัดแถวเดียว ปัดซ้าย-ขวาได้ (3 ต.ค.: แผงที่ลากขึ้นเองก็เป็นโหมดรายการแล้ว ปุ่มลัดต้องยังอยู่ครบ ไม่ซ่อน) */
  html:not(.kid) .panel[data-mode="list"] .quick {
    display: flex;
    gap: 6px;
    margin: 6px 0 0;
    padding: 0 16px 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  html:not(.kid) .panel[data-mode="list"] .quick::-webkit-scrollbar {
    display: none;
  }

  html:not(.kid) .panel[data-mode="list"] .quick > .chip-btn {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 12px;
  }

  /* หัวแผงแถวเดียว 40 px: ชื่อเว็บ · ที่จับ v (กลางแถว) · ป้ายอัปเดต — ต่างคนต่างมีพื้นที่แตะ 40 px ไม่ทับกัน
     (เดิมที่จับอยู่แถวบนของตัวเอง + พื้นที่แตะยื่นลงมาทับแถวถัดไป) · แตะชื่อเว็บ = เหมือนแตะที่จับ (sheetDrag) */
  html:not(.kid) .panel[data-mode="list"] .panel-grip {
    position: absolute;
    top: 4px;
    left: calc(50% - 32px);
    z-index: 3;
    width: 64px;
    height: 40px;
    min-height: 0;
    padding: 0;
  }

  html:not(.kid) .panel[data-mode="list"] .panel-grip::after {
    inset: 0;
  }

  html:not(.kid) .panel[data-mode="list"] .brand {
    grid-template-areas: "title . live";
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    gap: 0 6px;
    align-items: center;
    min-height: 48px;
    padding: 4px 16px;
  }

  html:not(.kid) .panel[data-mode="list"] .brand h1 {
    font-size: 16px;
    line-height: 1.2;
  }

  /* ป้ายอัปเดต (แตะ = อัปเดต) ชิดขวา สูง 40 px · วันที่อยู่หน้าแรก · ข้อความยาว (ล่าช้า/ลองใหม่) ขึ้น 2 บรรทัดแทนการตัด */
  html:not(.kid) .panel[data-mode="list"] .brand .live {
    justify-self: end;
    min-height: 40px;
    margin: 0;
    white-space: normal;
  }

  html:not(.kid) .panel[data-mode="list"] .live-date {
    display: none;
  }

  html:not(.kid) .panel[data-mode="list"] #liveLabel {
    line-height: 1.2;
    text-overflow: clip;
  }

  /* ตัวเลขสรุป → ชิปแถวเดียว "45 กำลังวิ่ง" (ปุ่มเดิม แตะกรองได้เหมือนเดิม) · ไม่พอจริงๆ ขึ้นแถวสอง ไม่ตัดข้อความ */
  html:not(.kid) .panel[data-mode="list"] .stats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
  }

  html:not(.kid) .panel[data-mode="list"] .stat {
    flex: 1 1 auto;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 7px;
    border-radius: 999px;
  }

  html:not(.kid) .panel[data-mode="list"] .stat b {
    font-size: 16px;
    line-height: 1;
  }

  html:not(.kid) .panel[data-mode="list"] .stat span {
    overflow: visible;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* ตัวกรองประเภท: แถวเดียวปัดซ้ายขวา (เดิมขึ้น 2–3 แถว ดันรายการลง) */
  html:not(.kid) .panel[data-mode="list"] .views {
    margin-top: 4px;
  }

  html:not(.kid) .panel[data-mode="list"] .filters {
    flex-wrap: nowrap;
    padding: 3px 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  html:not(.kid) .panel[data-mode="list"] .filters::-webkit-scrollbar {
    display: none;
  }

  html:not(.kid) .panel[data-mode="list"] .fchip {
    flex: none;
  }

  /* จำนวน + สวิตช์ แถวเดียว: ป้ายสวิตช์ยาวขึ้น 2 บรรทัดแทนการซ้อนสวิตช์ 2 แถว */
  html:not(.kid) .panel[data-mode="list"] .list-head {
    padding: 0 8px;
  }

  html:not(.kid) .panel[data-mode="list"] .switches {
    flex-wrap: nowrap;
    gap: 12px;
  }

  html:not(.kid) .panel[data-mode="list"] .switch {
    gap: 6px;
    line-height: 1.2;
  }
}

/* จอแคบ (ไทย < 375 px · อังกฤษ < 410 px) + แผ่นด้านซ้ายแนวนอน: ชิปแถวเดียวไม่พอ → 4 ช่องเท่ากัน ตัวเลขบน ป้ายล่าง (สูง 40 px) */
@media (max-width: 374px), (max-width: 899px) and (max-height: 500px) and (orientation: landscape) and (min-aspect-ratio: 4/3) {
  html:not(.kid) .panel[data-mode="list"] .stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  html:not(.kid) .panel[data-mode="list"] .stat {
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    border-radius: 12px;
  }

  html:not(.kid) .panel[data-mode="list"] .stat span {
    font-size: 11px;
    white-space: normal;
  }
}

@media (max-width: 409px), (max-width: 899px) and (max-height: 500px) and (orientation: landscape) and (min-aspect-ratio: 4/3) {
  html[lang="en"]:not(.kid) .panel[data-mode="list"] .stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  html[lang="en"]:not(.kid) .panel[data-mode="list"] .stat {
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    border-radius: 12px;
  }

  html[lang="en"]:not(.kid) .panel[data-mode="list"] .stat span {
    font-size: 11px;
    white-space: normal;
  }
}