/* project.css — หน้าอัปคลิป · เลือกงาน · สถานะประมวลผล
   ยึด design system: เส้น 1px แทนเงา · card 8px / ปุ่ม 5px · แดง #E31837 เท่านั้น */

/* ── อัปคลิป ─────────────────────────────────────── */

/* เลย์เอาต์ 2 คอลัมน์ — เนื้อหาหลักซ้าย / ข้อมูลประกอบขวา
   ⚠️ minmax(0,...) จำเป็น ไม่งั้นชื่อไฟล์ยาว ๆ ดันคอลัมน์จนล้นจอ */
.up-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:var(--s6);
  align-items:start;
}
.up-main{min-width:0;display:flex;flex-direction:column;gap:var(--s6)}
.up-side{min-width:0;display:flex;flex-direction:column;gap:var(--s4)}

/* ── ขั้นตอน 1-2-3-4 ─────────────────────────────
   การ์ดกลุ่ม: border รอบนอก 1 อัน + เส้นคั่นภายใน (ตาม design system) */
/**
 * ⚠️⚠️ เส้นคั่นภายในกริดวาดด้วย box-shadow บนตัว item — ห้ามใช้ 2 วิธีนี้:
 *
 *   ❌ border ราย item + nth-child : ยุบคอลัมน์เมื่อไร เส้นลอยผิดตำแหน่งทันที
 *   ❌ gap:1px + background เป็นสีเส้น : ช่องที่ auto-fit เหลือว่าง
 *      จะกลายเป็น "แถบสีเทาใหญ่" กลางการ์ด (เจอจริงตอน tips มี 4 ใบใน 3 คอลัมน์)
 *
 *   ✅ box-shadow 1px ขวา+ล่างของทุก item แล้วให้ container ครอบด้วย overflow:hidden
 *      → เส้นริมนอกถูก clip ทิ้ง · ช่องว่างไม่มี element = ไม่มีเส้น
 *      ถูกต้องเองทุกจำนวนใบและทุก breakpoint โดยไม่ต้องเขียนกฎไล่แก้
 */
.up-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  border-radius:var(--rad);
  background:var(--panel);
  list-style:none;
  margin:0;padding:0;
  overflow:hidden;
}
.up-step{
  display:flex;align-items:flex-start;gap:10px;
  padding:16px 14px;
  min-width:0;
  background:var(--panel);
  box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line);
}
.up-step-n{
  width:24px;height:24px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--line-2);
  border-radius:50%;
  font-size:12px;font-weight:600;color:var(--ink-3);
}
.up-step strong{display:block;font-size:13px;font-weight:600;color:var(--ink-2)}
.up-step p{margin:3px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
/* ขั้นที่กำลังทำอยู่ — แดงตัวเดียวในหน้า ไม่ให้แย่งสายตากับปุ่ม */
.up-step.is-now .up-step-n{background:var(--red);border-color:var(--red);color:#fff}
.up-step.is-now strong{color:var(--ink)}

.up-wrap{max-width:none}

/* ── หัวข้อ section ย่อย ───────────────────────── */
.up-sec-title{
  display:flex;align-items:center;gap:8px;
  margin:0 0 var(--s3);
  font-size:15px;font-weight:700;color:var(--ink);
}
.up-sec-title > i{color:var(--red);font-size:16px}

/* ── เคล็ดลับ ────────────────────────────────── */
.up-tip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border:1px solid var(--line);
  border-radius:var(--rad);
  background:var(--panel);
  overflow:hidden;   /* clip เส้นริมนอก (ดูเหตุผลเต็มที่ .up-steps) */
}
.up-tip{
  padding:16px;min-width:0;background:var(--panel);
  box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line);
}
.up-tip > i{font-size:19px;color:var(--ink-3);display:block;margin-bottom:8px}
.up-tip strong{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:4px}
.up-tip p{margin:0;font-size:12px;line-height:1.6;color:var(--ink-2)}

/* ── การ์ดคอลัมน์ขวา ─────────────────────────── */
.up-card{
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--rad);
  background:var(--panel);
}
.up-card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:12px;
}
.up-card-head .klabel{margin:0}
.up-card-more{font-size:12px;font-weight:500;color:var(--ink-2)}
.up-card-more:hover{color:var(--red)}
.up-card h3{margin:6px 0 6px;font-size:15px;font-weight:700;color:var(--ink)}
.up-card > p{margin:0 0 14px;font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.up-card-note{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.up-card-accent{border-color:var(--red);background:var(--red-soft)}

/* ── สิทธิ์ของแพ็กเกจ ────────────────────────── */
.up-limits{list-style:none;margin:0 0 14px;padding:0}
.up-limits li{
  display:flex;align-items:center;gap:9px;
  padding:8px 0;
  font-size:12.5px;color:var(--ink-2);
  border-bottom:1px solid var(--line);
}
.up-limits li:last-child{border-bottom:none}
.up-limits li > i{font-size:14px;color:var(--green);flex:none}
.up-limits li > span{flex:1;min-width:0}
.up-limits li > b{font-weight:600;color:var(--ink)}
/* สิทธิ์ที่แพ็กเกจนี้ยังไม่ได้ — จางลงแต่ยังอ่านออก (ไม่ใช้ opacity ที่ทำให้ตกเกณฑ์ contrast) */
.up-limits li.is-off{color:var(--ink-3)}
.up-limits li.is-off > i{color:var(--ink-3)}

/* ── งานล่าสุด ─────────────────────────────── */
.up-recent{list-style:none;margin:0;padding:0}
.up-recent li{border-bottom:1px solid var(--line)}
.up-recent li:last-child{border-bottom:none}
.up-recent a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;
  font-size:12.5px;color:var(--ink-2);
}
.up-recent a:hover .up-recent-name{color:var(--red)}
.up-recent-name{
  min-width:0;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--ink);font-weight:500;
}

/* ── รูปแบบไฟล์ที่รองรับ ──────────────────────── */
.up-formats{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.up-formats li{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;color:var(--ink-2);
}
.up-formats li > i{font-size:13px;color:var(--ink-3)}

/* ── จอกลาง: คอลัมน์ขวาลงมาอยู่ล่าง ──────────── */
@media (max-width:1080px){
  .up-layout{grid-template-columns:1fr}
  .up-side{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:var(--s4);
  }
}
/* 💡 ไม่ต้องแก้เส้นคั่นตอนยุบคอลัมน์ — gap จัดการให้เองแล้ว */
@media (max-width:760px){
  .up-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:420px){
  .up-steps{grid-template-columns:1fr}
}

.up-drop{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:260px;
  padding:32px 24px;
  border:1px dashed var(--line-2);
  border-radius:8px;
  background:var(--panel-2);
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
/* ⚠️ display:flex ด้านบนเป็น author rule → ชนะ UA `[hidden]{display:none}`
   ถ้าไม่มีบรรทัดนี้ upload.js สั่ง drop.hidden=true แล้วกล่องยังโชว์ ทับกับแถบ progress
   (มีกฎกลาง [hidden] ที่ base.css แล้ว บรรทัดนี้กันพลาดซ้ำอีกชั้น) */
.up-drop[hidden]{display:none}
.up-drop:hover,
.up-drop.over{border-color:var(--red);background:var(--red-soft)}
.up-drop:focus-visible{
  /* ❌ ไม่ใช้ outline — ธีมใช้ ring */
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-soft);
}
.up-drop > i{font-size:42px;color:var(--ink-3);margin-bottom:6px}
.up-drop h3{margin:0;font-size:15.5px;font-weight:600;color:var(--ink)}
.up-hint{margin:0;font-size:12.5px;color:var(--ink-2)}
.up-guest{
  margin:10px 0 0;
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  font-size:12px;
  color:var(--green);
}

/* ── ระหว่างอัป ──────────────────────────────────── */
.up-busy{
  padding:20px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
}
.up-file{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.up-file > i{font-size:24px;color:var(--ink-3)}
.up-file > div{flex:1;min-width:0}
.up-name{
  font-size:13.5px;font-weight:600;color:var(--ink);
  /* ชื่อไฟล์ยาว ๆ ห้ามดันปุ่มยกเลิกหลุดจอ */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.up-meta{font-size:12px;color:var(--ink-3);margin-top:2px}

/* ⚠️ .up-bar ย้ายไป base.css แล้ว ห้ามประกาศซ้ำที่นี่
   editor ใช้แถบนี้ตอนเบิร์นด้วย (render.js) แต่ไม่ได้โหลด project.css
   → เคยไม่มี height/background = แถบ progress ล่องหนตลอดการเบิร์น */
.up-status{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  font-size:12.5px;
  color:var(--ink-2);
}

/* ── เลือกงาน ────────────────────────────────────── */
.choose-wrap{max-width:640px}

.choose-clip{
  display:flex;
  gap:14px;
  align-items:center;
  padding:12px;
  margin-bottom:20px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
}
.choose-clip video{
  width:96px;
  height:96px;
  border-radius:5px;
  background:var(--panel-3);
  object-fit:cover;
  flex:none;
}
.choose-meta{min-width:0}
.choose-name{
  font-size:14.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.choose-sub{margin-top:4px;font-size:12.5px;color:var(--ink-3)}

/* การ์ดกลุ่ม .modes/.mode — ⚠️ นิยามอยู่ที่ layout.css ที่เดียว (แหล่งความจริงเดียว)
   ตรงนี้เหลือเฉพาะลูกที่มีแต่หน้า choose/admin-billing ใช้ */
.mode input{
  /* ซ่อน radio ดิบ แต่ยังต้องโฟกัสได้ด้วยคีย์บอร์ด */
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}
.mode input:focus-visible ~ .mode-ic{
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-soft);
}
.mode-ic{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  flex:none;
  border:1px solid var(--line-2);
  border-radius:5px;
  background:var(--panel);
  font-size:17px;
  color:var(--ink-2);
}
.mode.on .mode-ic{border-color:var(--red);color:var(--red)}
.mode-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.mode-title{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14px;font-weight:600;color:var(--ink);
}
.mode-desc{font-size:12.5px;line-height:1.55;color:var(--ink-2)}

.cut-adv{
  padding:14px 16px;
  margin-bottom:16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
}
.cut-adv summary{
  cursor:pointer;
  font-size:13.5px;
  font-weight:500;
  color:var(--ink-2);
  list-style:none;
}
.cut-adv summary::-webkit-details-marker{display:none}
.cut-adv summary:hover{color:var(--ink)}
.cut-adv[open] summary{margin-bottom:14px;color:var(--ink)}
.range-ends{
  display:flex;
  justify-content:space-between;
  margin-top:4px;
  font-size:11.5px;
  color:var(--ink-3);
}

/* ── สถานะประมวลผล ───────────────────────────────── */
.st-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60dvh;
  padding:24px 0;
}
.st-card{
  width:100%;
  max-width:440px;
  padding:32px 28px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  text-align:center;
}
.st-ring{
  display:flex;
  align-items:center;
  justify-content:center;
  width:66px;height:66px;
  margin:0 auto 18px;
  border:1px solid var(--line-2);
  border-radius:50%;
  background:var(--panel-2);
  font-size:26px;
  color:var(--red);
  animation:st-pulse 1.8s ease-in-out infinite;
}
.st-ring.is-error{color:var(--red);animation:none;border-color:var(--red)}
@keyframes st-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%    {transform:scale(1.06);opacity:.75}
}
.st-title{margin:8px 0 6px;font-size:19px;font-weight:700;color:var(--ink)}
.st-sub{margin:0 0 18px;font-size:13.5px;color:var(--ink-2)}

/* ── งานที่กำลังทำ ─────────────────────────────────
   บอกให้ชัดว่าเป็นคลิปไหน — เปิดหลายแท็บพร้อมกันได้ */
.st-job{
  display:flex;align-items:center;gap:10px;
  margin:-6px 0 22px;padding-bottom:16px;
  border-bottom:1px solid var(--line);
  text-align:left;
}
.st-job > i{font-size:18px;color:var(--ink-3);flex:none}
.st-job-txt{min-width:0}
.st-job-name{
  font-size:13.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.st-job-meta{display:flex;gap:10px;margin-top:2px;font-size:11.5px;color:var(--ink-3)}

/* ── แถบความคืบหน้า ─────────────────────────────── */
.st-progress{margin-bottom:4px}
.st-progress-meta{
  display:flex;justify-content:space-between;
  margin-top:7px;font-size:12px;color:var(--ink-3);
}

/* ── ขั้นตอน ─────────────────────────────────────
   ⚠️ ใช้ไอคอนบอกสถานะ ไม่พึ่งสีอย่างเดียว — ตาบอดสีต้องอ่านออกด้วย */
.st-steps{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line);
  text-align:left;
}
.st-step{
  position:relative;
  display:flex;align-items:center;gap:11px;
  padding:7px 0;
  font-size:13px;color:var(--ink-3);
  transition:color .2s ease;
}
/* เส้นเชื่อมระหว่างขั้น — ทำให้อ่านเป็นลำดับ ไม่ใช่รายการลอย ๆ */
.st-step:not(:last-child)::before{
  content:"";position:absolute;
  left:10px;top:29px;bottom:-3px;width:1px;
  background:var(--line-2);
}
.st-step.done:not(:last-child)::before{background:var(--green);opacity:.45}
.st-dot{
  width:21px;height:21px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--line-2);
  border-radius:50%;
  background:var(--panel);
  font-size:11px;color:transparent;
  transition:border-color .2s ease,background .2s ease;
}
.st-step-label{min-width:0}

.st-step.now{color:var(--ink);font-weight:600}
.st-step.now .st-dot{
  border-color:var(--red);background:var(--red);color:#fff;
  animation:st-pulse 1.4s ease-in-out infinite;
}
.st-step.done{color:var(--ink-2)}
.st-step.done .st-dot{border-color:var(--green);background:var(--green);color:#fff}

/* ── กล่องข้อความบอกว่าปิดหน้าได้ / ห้ามปิด ─────────── */
.st-note{
  display:flex;align-items:flex-start;gap:9px;
  margin:20px 0 12px;padding:12px 13px;
  border:1px solid var(--line);
  border-radius:var(--rad-s);
  background:var(--panel-2);
  text-align:left;
}
.st-note > i{font-size:15px;color:var(--ink-3);flex:none;margin-top:1px}
.st-note strong{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.st-note p{margin:2px 0 0;font-size:12px;line-height:1.55;color:var(--ink-2)}
/* guest — ปิดแท็บแล้วงานหายจริง ๆ จึงต้องเตือนให้เห็นชัดกว่าปกติ */
.st-note-warn{border-color:var(--amber);background:var(--amber-soft)}
.st-note-warn > i{color:var(--amber)}

.st-note-sm{margin:6px 0 0;font-size:12px;line-height:1.6;color:var(--ink-3)}

.st-fail{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.st-fail h2{margin:6px 0 8px;font-size:16px;font-weight:700;color:var(--ink)}
.st-fail p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.st-fail-actions{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin-top:16px;
}

/* ── มือถือ ──────────────────────────────────────── */
@media (max-width:600px){
  .up-drop{min-height:200px;padding:24px 16px}
  .up-drop > i{font-size:34px}
  .choose-clip{flex-direction:column;align-items:stretch;text-align:center}
  .choose-clip video{width:100%;height:160px}
  .st-fail-actions .btn{flex:1;min-width:140px}
}

@media (prefers-reduced-motion:reduce){
  /* ⚠️ .now ยังต้องแยกจาก .done ให้ออกโดยไม่พึ่งการเคลื่อนไหว
     → ตัดแค่ animation ส่วนสี/ไอคอนยังบอกสถานะได้ครบ */
  .st-ring,.st-step.now .st-dot{animation:none}
  .st-step{transition:none}
  .st-dot{transition:none}
}