/* This inspection shortcut belongs to ALT and is independent of app themes. */
.alt-device-preview{position:fixed;right:14px;bottom:88px;z-index:96;display:flex;align-items:center;gap:7px;padding:8px 11px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:11px;box-shadow:0 4px 20px #0002;text-decoration:none;font:500 11px/1.2 Sarabun,sans-serif}
.alt-device-preview svg{width:19px;height:19px}.alt-device-preview:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(min-width:1025px){.alt-device-preview{bottom:16px}}

.alt-lab-entry{display:block;margin:10px 0 14px;color:var(--blue);font-size:13px;text-decoration:none}
/* ช่วงแท็บเล็ต: แถบล่างแคปซูลแบบโทรศัพท์ + เนื้อหาเต็มจอ
   24 ต.ค. 69 · เจ้าของ (ภาพ iPad แนวนอน มีแถบข้างแบบคอม): "ทำให้ไอแพดแนวนอนปุ่มเหมือนในโทรศัพท์"
   ขาที่สอง: iPad จริงแนวนอนกว้าง 1080–1366 ใช้นิ้ว (pointer:coarse) — เดิมเกิน 1023 จึงได้แถบข้างของ alt.css
   desktop.css เลื่อนไปเริ่ม 1025 ให้ 1024 (iPad แนวนอนในหน้าตรวจหน้าจอบนคอม) อยู่ช่วงนี้ด้วย */
@media(min-width:600px) and (max-width:1024px),(min-width:600px) and (max-width:1366px) and (pointer:coarse){
 /* 26 ต.ค. 69 · เจ้าของ (ภาพ iPad แนวนอน): "ในไอแพดปุ่มเมื่อกดไม่ไปอยู่ฝั่งซ้าย" — กฎแถบล่างแบบมือถือข้างล่างบังคับด้วย !important
    เลยทับค่าที่ผู้ใช้เลือก "ด้านซ้าย" เองด้วย · ตอนนี้บังคับเฉพาะ "อัตโนมัติ" กับ "ด้านล่าง" (data-nav-pref มาจาก applyNav ใน app.js)
    เลือก "ด้านซ้าย" เอง = ได้แถบข้างแบบจอกว้างของ alt.css เหมือนก่อน 24 ต.ค. */
 :root body:not(.login-mode) .stage{padding:0;display:block;width:100%;max-width:none;height:100dvh}
 :root body:not(.login-mode) .phone{width:100%;max-width:none;height:100dvh;border:0;border-radius:0}
 :root body:not(.login-mode) .stage-note{display:none}
 :root body:not(.login-mode) .screen{padding-inline:clamp(28px,6vw,70px)}
 /* 26 ต.ค. 69 · เจ้าของ (ภาพกระดานอันดับบนจอกว้าง ~770px): "ทำให้มันเต็มหน้าจอสิ" — ระยะขอบข้างบนนี้โดนจอกระดานด้วย
    จอกระดานออกแบบเต็มขอบ (พื้นแสงออโรราด้านบน + แผ่นสีด้านล่าง) จึงเหลือช่องว่างข้างละ ~46px และเห็นเส้นตัดครึ่งจอของพื้นหลังตัวจอ
    → จอนี้ไม่มีระยะขอบข้าง พื้นเต็มจอ · ของข้างในยังอยู่ในคอลัมน์ 680px กลางจอ (padding ของชั้นหน้า/หลัง ไม่ใช่ max-width
    ของลูก — ของตกแต่งที่วาง inset:0 ในชั้นหลังยังกินเต็มกว้าง) · มือถือไม่โดน (ขอบในยังเป็น 16px เดิมของ board.css เป็นอย่างน้อย) */
 :root body:not(.login-mode) #scr-board.screen{padding-inline:0}
 :root body:not(.login-mode) #scr-board :is(.bd-bg,.bd-sheet){padding-inline:max(16px,calc((100% - 680px) / 2 + 16px))}
 :root:not([data-nav-pref="side"]) body:not(.login-mode) .tabbar{max-width:650px;margin-inline:auto;left:0;right:0}
 :root body:not(.login-mode) :is(.th-grid,.mt-grid){grid-template-columns:repeat(3,minmax(0,1fr))}
 :root body:not(.login-mode) #menuBody{max-width:760px;margin-inline:auto}
 :root:not([data-nav-pref="side"]) body:not(.login-mode) .screens{margin-left:0!important}
 :root body:not(.login-mode) .as-card{left:0;right:0;bottom:0;width:auto;max-width:none}
 :root:not([data-nav-pref="side"]) body:not(.login-mode) .tabbar{top:auto!important;bottom:14px!important;width:calc(100% - 56px)!important;height:68px!important;min-height:0;flex-direction:row!important;justify-content:space-around;padding:6px 10px!important;transform:none!important}
 :root:not([data-nav-pref="side"]) body:not(.login-mode) .tabbar .tab{flex:1;min-height:48px!important;height:auto!important;padding:3px!important;gap:3px!important}
 /* 24 ต.ค. 69 · ป้าย "เพิ่ม" ต่ำกว่าป้ายอื่น 10px — ช่วงนี้แอปตั้ง data-nav="side" กฎแถบข้างใน alt.css จึงขยายปุ่มเป็น 42px
    ทับ 38px ที่ไม่มี !important และ margin:0 ทำให้ทั้งก้อนกินที่ในผัง (42 เทียบไอคอน 22) ดันป้ายลงครึ่งหนึ่งของส่วนต่าง
    แบบเดียวกับมือถือ: 38 − 13 − 3 = 22 เท่าไอคอนพอดี ส่วนที่เกินโผล่ขึ้นเหนือแถว ไม่ดันอะไร */
 :root:not([data-nav-pref="side"]) body:not(.login-mode) .tabbar .scan-dot{width:38px!important;height:38px!important;margin:-13px 0 -3px!important}
 :root:not([data-nav-pref="side"]) body:not(.login-mode) #scr-menu{padding-bottom:96px!important}
 /* 26 ต.ค. 69 · fitcheck (devtools/fitcheck.mjs) ที่ 1024×768: ของชิ้นสุดท้ายของเกือบทุกจออยู่ใต้แถบล่าง กดไม่ได้
    (ออกจากระบบ · สมุดเควส · ส่งคำถาม · ของในห้อง) — ขนาดนี้แอปยังอยู่โหมดแถบข้าง จอจึงเว้นล่างแค่ 28px (alt.css)
    แต่แถบล่างลอยสูง 68 ห่างขอบ 14 = บัง 82px → เว้นที่ให้แถบทุกจอ (หน้าแรกเว้นไว้ข้างบนแล้ว) · จอแชทตั้ง padding ด้วย id จึงต้องเขียนแยก */
 :root:not([data-nav-pref="side"]) body:not(.login-mode) .screens>.screen{padding-bottom:110px!important}
 :root:not([data-nav-pref="side"]) body:not(.login-mode) #scr-ai.screen{padding-bottom:92px!important}
 :root body:not(.login-mode) #menuBody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 18px;padding:22px 30px}
 :root body:not(.login-mode) #menuBody>:is(.td-head,.dc-line,.td-now,.td-clear,.td-ask,.td-tiles){grid-column:1/-1;margin-block:0}
 :root body:not(.login-mode) #menuBody>.td-railwrap{margin:0;align-self:center}
 /* 24 ต.ค. 69 · เจ้าของ (ภาพไทล์แท็บเล็ต): "ใส่กรอบให้เหมือนโทรศัพท์ ทำให้มันเต็มขึ้นหน่อย"
    เดิมบีบกรอบเหลือ 44px วงกลม แต่ชิปขาวข้างใน 39px (ไอคอน 23 + ขอบ 8×2) กินเกือบหมด กรอบใสจึงหายไป
    โทรศัพท์: กรอบ 60 มุม 17 ชิป 35 เห็นขอบกรอบรอบชิป → ทรงเดียวกัน ขยายเป็น 72 ให้เต็มช่องที่กว้างกว่า */
 /* 31 ต.ค. 69 · เจ้าของ (ภาพไทล์หกก้อนแถวเดียว ป้าย "ข้อคว" โดนตัด "เพื่อน/ฉัน" หักสองบรรทัด): ชิป 72 ข้างล่างออกแบบให้ป้ายอยู่ใต้ชิป
    แต่ทิศของไทล์ไม่ได้ตั้งที่นี่ — ถ้า desktop.css (ไทล์แนวนอน ชิป 36) มาด้วย ชิป 72 ยืนข้างป้ายในไทล์กว้าง ~120 ป้ายเหลือ ~30px
    → ตั้งทิศเองให้ครบชุด: ชิปบน ป้ายล่าง กลางไทล์ */
 :root body:not(.login-mode) #menuBody .tg-t{height:auto;min-height:0;gap:8px;flex-direction:column;justify-content:center;align-items:center}
 :root body:not(.login-mode) #menuBody .tg-lb2{text-align:center}
 :root body:not(.login-mode) #menuBody .tg-grid .tg-ic{width:72px;height:72px;aspect-ratio:1;border-radius:20px}
 :root body:not(.login-mode) #menuBody .tg-ic svg{width:24px;height:24px;padding:9px}
 :root body:not(.login-mode) #menuBody .tg-lb2{font-size:13px}
 /* 24 ต.ค. 69 · เจ้าของ (ภาพหน้าแรก ~900px ตอนกลางคืน): "แก้ให้มันตรง ... และทำให้เต็มจอ"
    เดิมก้อนที่ไม่อยู่ในรายชื่อเต็มแถวได้แค่คอลัมน์เดียว — ตอนกลางคืนแถบตัวเลขไม่ขึ้น การ์ดน้องฮูกจึงไม่มีคู่
    ค้างครึ่งซ้าย · รายการ "ที่เหลือของวันนี้" ก็ครึ่งซ้ายเสมอ · ขวาว่างเป็นช่อง ขอบขวาไม่ตรงกับก้อนอื่น
    และทุกก้อนโดนเพดาน 620px (กฎจอกว้าง ≥720 ใน alt.css) เนื้อหาจึงเกาะซ้ายในกรอบ 760 ขวาเว้นโหว่ 110px
    ตอนนี้: ทุกก้อนเต็มแถวเป็นค่าเริ่มต้น · แถบตัวเลขกับการ์ดน้องฮูกคู่กันเฉพาะตอนมีครบทั้งสองชิ้น
    ปลดเพดาน 620/760 · ขอบซ้ายขวาให้ .screen คุมที่เดียว (clamp 28–70px) — เนื้อหากว้างเต็มจอทุกขนาดในช่วงนี้ */
 :root body:not(.login-mode) #menuBody{max-width:none;padding-inline:0}
 :root body:not(.login-mode) #scr-menu .menu-body>*{max-width:none}
 :root body:not(.login-mode) #menuBody>*{grid-column:1/-1}
 :root body:not(.login-mode) #menuBody>.td-stats:has(+ .saih),:root body:not(.login-mode) #menuBody>.td-stats+.saih{grid-column:auto}
 /* 24 ต.ค. 69 · เจ้าของส่งภาพแท็บเล็ต (หน้าแรกใหม่: แถบบน + ชุดการ์ด) "ไม่ตรงกัน" — วัดที่ 768/820:
    · การ์ดงานในชุดการ์ดกว้าง 620 ในช่อง 676 — เพดาน 620px ของ today.css (≥720) จับ .td-now ที่ตอนนี้อยู่ใน .dk-slide
      ไม่ใช่ลูกชั้นแรกของ #menuBody แล้ว ข้อปลดเพดานข้างบนจึงไม่ถึง
    · แถบตัวเลขต่ำกว่าการ์ดน้องฮูก 14px — today.css ให้ .td-stats margin-top 14 แต่ .saih ไม่มี · ทั้งก้อนมี grid gap
      คุมระยะอยู่แล้ว margin ของแต่ละก้อนจึงซ้อนเป็นระยะไม่เท่ากัน → ล้าง margin แนวตั้งของทุกก้อน ให้ gap คุมที่เดียว
    · ปุ่มเพื่อน/ตั้งค่ามุมขวา right:10px นับจากขอบจอ แต่เนื้อหาช่วงนี้เว้นขอบ clamp(28px,6vw,70px) → ปุ่มหลุดแนว 36px
    · ตั้งเมนูเป็น "ด้านล่าง" ที่ 769–1023 แล้วแถบเวลาปลอมของกรอบโทรศัพท์โผล่ (ซ่อนแค่ ≤768 กับ data-nav=side) ดันทั้งจอลง 39px */
 :root body:not(.login-mode) #menuBody .dk-slide>*{max-width:none}
 :root body:not(.login-mode) #menuBody>*{margin-block:0}
 :root body:not(.login-mode) :is(.top-friends,.top-set){right:clamp(28px,6vw,70px)}
 :root body:not(.login-mode) .statusbar{display:none}
}
/* 31 ต.ค. 69 · เจ้าของ (ภาพใต้ปุ่ม "เสร็จ" / "ข้าม ไว้ทีหลัง" มีกล่องมืดว่าง ๆ): "ตรงนี้คืออะไรแก้ด้วย"
   แถบปุ่มฟอร์ม (.fm-bar) เว้นล่าง 75px ไว้ให้แถบแท็บลอย แล้วทาพื้น --scr ทึบทั้งก้อน · มือถือ (≤768) มีกฎแยกที่ลดเหลือ 12px
   แล้วปักเหนือแถบแท็บแทน แต่ช่วงแท็บเล็ตนี้ไม่มี → เหลือแผ่นทึบว่าง ๆ กว้างเท่าคอลัมน์ฟอร์ม ทับแสงฟุ้งของพื้นจอ เห็นเป็นกล่อง
   ตอนนี้: ปักเหนือแถบแท็บลอย (ล่าง 14 + สูง 68 + เว้น 8 = 90px) แบบเดียวกับมือถือ · เว้นล่างเหลือ 12px
   พื้นหลังยืดเต็มกว้างจอ (ไม่ใช่แค่คอลัมน์) = เงาจางท้ายจอ ไม่ใช่กล่อง · ตั้งเมนูเป็นด้านซ้าย = ไม่มีแถบล่าง ไม่ต้องเว้นที่
   เริ่มที่ 769 (ต่ำกว่านั้นแถบแท็บอยู่ในผังตามกฎมือถือของ alt.css) · แอปที่ติดตั้ง (standalone) ใช้กฎมือถืออยู่แล้ว ไม่แตะ */
@media (min-width:769px) and (max-width:1024px) and (display-mode:browser),(min-width:769px) and (max-width:1366px) and (pointer:coarse) and (display-mode:browser){
 /* sticky วัดจากขอบในของช่องเลื่อน — padding ล่าง 110 ของจอ (กฎแถบล่างข้างบน) ทำให้ bottom:90 กลายเป็น 200 ลอยห่างแถบแท็บ
    เนื้อฟอร์มโผล่ใต้ปุ่ม → จอนี้ไม่เว้นล่าง ให้แถบปุ่มเว้นข้างบนเท่าที่ยกตัว (margin-top) แทน แบบเดียวกับ --tb-under ของมือถือ
    เลื่อนสุดแล้วแถบปุ่มยกขึ้นมาทับช่องว่างนั้นพอดี ไม่ทับแถวสุดท้ายของฟอร์ม */
 :root:not([data-nav-pref="side"]) body:not(.login-mode) #scr-form.screen{padding-bottom:0!important}
 :root:not([data-nav-pref="side"]) body:not(.login-mode) #scr-form .fm-bar{bottom:90px;margin-top:90px;padding-bottom:12px;margin-inline:calc(-1 * clamp(28px,6vw,70px));padding-inline:calc(20px + clamp(28px,6vw,70px))}
 :root[data-nav-pref="side"] body:not(.login-mode) #scr-form .fm-bar{padding-bottom:16px}
}
/* 23 ต.ค. 69 · เจ้าของ: ปุ่มเยอะจนรก — ปุ่มลอย "ตรวจหน้าจอ" ทับป้ายไทล์หน้าแรกบนมือถือ/แท็บเล็ตทุกธีม
   ซ่อนที่ 1024px ลงมา · ยังเข้าได้จากลิงก์ "ตรวจหน้าจอ ALT" ในจอตั้งค่า (.alt-lab-entry) */
@media(max-width:1024px){.alt-device-preview{display:none}}