/* a11y.css — เข้าถึงได้ + กันเลย์เอาต์พังบนมือถือ
   ⚠️ โหลดท้ายสุดเสมอ เพื่อให้กฎในนี้ชนะ */

/* ── ข้ามไปเนื้อหาหลัก (คีย์บอร์ด/screen reader) ── */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:9999;
  padding:10px 16px;
  background:var(--red);
  color:#fff;
  border-radius:0 0 var(--rad-s) 0;
  font-size:13px;
  font-weight:600;
}
.skip-link:focus{left:0}

/* ── focus ที่มองเห็นได้เสมอ ────────────────────
   ❌ ห้ามใช้ outline (design system §Form) — ธีมใช้ box-shadow ring
   ⚠️ ring จาง 3px อย่างเดียวมองไม่เห็นบน element ที่ไม่มีเส้นขอบ (ลิงก์ / ปุ่ม ghost)
   จึงใช้ 2 ชั้น: เว้นระยะด้วยสีพื้น แล้วตามด้วยวงแดงทึบ = เห็นชัดทุกพื้นหลัง
   ใช้ :where() ให้ specificity = 0 เพื่อให้ component ที่มี ring ของตัวเองชนะเอง
   💡 ไม่กำหนด border-radius ตรงนี้ — box-shadow ตามรูปทรงจริงของ element อยู่แล้ว
      (ถ้าใส่จะไปทำให้ปุ่มกลมอย่าง .play กลายเป็นเหลี่ยมตอนโฟกัส) */
:where(a, button, summary, input, select, textarea, [tabindex], [role="button"]):focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--red);
}

/* element ที่ถูกซ่อนไว้ / ส่ง ring ต่อให้ตัวแทน — ไม่ต้องมี ring ของตัวเอง
   (.mode input → .mode-ic · .switch input → .slider · .chip-edit อยู่ใน .chip แล้ว) */
.mode input:focus-visible,
.switch input:focus-visible,
.chip-edit:focus-visible,
.sw.custom input[type=color]:focus-visible{box-shadow:none}

/* control ที่มีเส้นขอบเป็นของตัวเอง → ใช้สูตรตามสเปค: เปลี่ยน border + halo จาง */
.sw:focus-visible,
.ed-tool:focus-visible,
.tpl:focus-visible,
.seg button:focus-visible,
.styb:focus-visible,
.rail-b:focus-visible{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-soft), inset 0 0 0 1px var(--red);
}

/* ── screen reader only ────────────────────────── */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ── กฎมือถือ (บังคับ 100% ทุกหน้า) ────────────── */

/* ⚠️ ห้ามมี horizontal scroll ที่ body เด็ดขาด
   💡 ใช้ `clip` ไม่ใช่ `hidden` — `hidden` สร้าง scroll container ทำให้
   position:sticky ข้างใน (.sidebar, .topbar, .rail, .impersonate-bar, .ed-h) เพี้ยน
   ต้นเหตุจริงของการล้นคือ .shead .ghost (absolute + nowrap) ซึ่งตัดที่ .shead แล้ว
   บรรทัดนี้เหลือไว้เป็นตาข่ายกันพลาดชั้นสุดท้ายเท่านั้น */
html,body{overflow-x:clip;max-width:100%}

/* ⚠️ กันบิด — แก้อาการทับซ้อนบนจอแคบได้ราว 90% */
.content :where([class*="-grid"], [class*="-row"], .grid, .row-2, .statgrid) > *{min-width:0}

/* รูป/วิดีโอห้ามล้นกรอบ */
img, video, svg, canvas{max-width:100%}

/* ══ tap target ≥44×44 ══════════════════════════════════
   ⚠️ เดิมกฎนี้อยู่ใน @media (max-width:600px) เท่านั้น ซึ่งผิดเกณฑ์:
      เกณฑ์ 44px เป็นเรื่องของ "นิ้ว" ไม่ใช่ "ความกว้างจอ"
      → แท็บเล็ต และมือถือแนวนอน (iPhone 14 Pro Max = 932px)
        ตกกลับไปใช้ --h-md:40px ทั้งที่ยังกดด้วยนิ้วอยู่

   ย้ายมาผูกกับ pointer:coarse แทน (เหมือนที่ .zs-modal-close / .zs-login ทำถูกอยู่แล้ว)

   ⚠️ ❌ ห้ามใส่ .sw ตรงนี้ — swatch สีเป็นสี่เหลี่ยมจัตุรัส 25×25
   ถ้าให้แค่ min-height จะกลายเป็น 25×44 บิดเบี้ยว
   → ขยายทั้งกว้างและสูงที่ editor.css ใน @media (pointer:coarse) แทน */
@media (pointer:coarse){
  .btn, .iconbtn, .nav-item, .bn-item, .rail-b, .seg button, .styb{
    min-height:44px;
  }
  .iconbtn, .rail-b{min-width:44px}

  /* ⚠️ input ต้อง 16px — เล็กกว่านี้ iOS จะซูมหน้าจอตอนโฟกัส
     ครอบทุกอุปกรณ์สัมผัส ไม่ใช่แค่จอแคบ (iPad ก็ซูมเหมือนกัน)
     exclude ตัวที่มี UI ของตัวเองอยู่แล้ว */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea{font-size:16px}
}

@media (max-width:600px){
  /* grid ยุบเป็นคอลัมน์เดียว */
  .row-2, .statgrid{grid-template-columns:1fr}

  /* เผื่อ safe area ของ iPhone ที่มี bottom nav */
  body[data-authed="1"] .content{
    padding-bottom:calc(var(--bottomnav-h, 64px) + env(safe-area-inset-bottom) + 16px);
  }
}

/* ── ลดการเคลื่อนไหว ────────────────────────────
   ⚠️ ไม่ปิดทั้งหมดด้วย animation:none — บาง component พึ่ง animationend
   ใช้ค่าใกล้ศูนย์แทน ให้ event ยังยิงอยู่ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── contrast สูง ───────────────────────────────── */
@media (prefers-contrast:more){
  :root{--line:#000;--line-2:#000;--ink-2:#000;--ink-3:#333}
  [data-theme="dark"]{--line:#fff;--line-2:#fff;--ink-2:#fff;--ink-3:#ccc}
}

/* ── skeleton (โหลดข้อมูล) ──────────────────────── */
.skeleton{
  background:linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 50%, var(--panel-2) 75%);
  background-size:200% 100%;
  border-radius:var(--rad-s);
  animation:sk 1.4s ease-in-out infinite;
}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── spinner ────────────────────────────────────── */
.spin{display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── คลิปที่ถูกลิงก์มาจาก LINE ─────────────────── */
.proj.is-focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-soft);
}
.proj.is-expired{opacity:.72}
.clip-expired{
  margin:8px 0;
  font-size:12px;
  color:var(--amber);
  line-height:1.5;
}
.clip-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

/* ── 🚦 แถบเตือนคิวยาว ──────────────────────────── */
.queue-warn{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 13px;
  margin-bottom:16px;
  border:1px solid var(--amber);
  border-radius:var(--rad-s);
  background:var(--amber-soft);
  font-size:12.5px;
  line-height:1.55;
  color:var(--ink-2);
}