/* screens-upload.css · ช่องแนบไฟล์กลาง (components/upload.html · c/upload · upload.js) + ไฟล์ใต้บันทึกใน timeline · M17 lane U
   token สีจาก themes.css เท่านั้น (สว่าง/มืดตามชุดสี) · เป้ากดอย่างน้อย 44 px บนจอสัมผัส (WCAG 2.5.8 ขั้นต่ำ 24 px) · โฟกัสใช้ --ring */

.up { display: grid; gap: 8px; min-width: 0; font-size: var(--fs-sm); }
.up-lbl { font-weight: 600; color: var(--ink); }
.up-zone {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0;
  padding: 12px; border: 1.5px dashed var(--input); border-radius: var(--r-md); background: var(--surf2);
}
.up.is-over .up-zone { border-color: var(--brand); background: var(--sel); }
.up-in { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.up-btn { min-height: 44px; cursor: pointer; }
.up-btn .ico { width: 16px; height: 16px; }
.up-in:focus-visible + .up-btn { outline: 2px solid var(--ring); outline-offset: 2px; }
.up-hint { flex: 1 1 14rem; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }

.up-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.up-list:empty { display: none; }
.up-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "th name x" "th meta x";
  align-items: center; column-gap: 10px; row-gap: 2px;
  padding: 6px 6px 6px 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surf);
}
.up-thumb { grid-area: th; width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; background: var(--surf2); }
.up-doc { display: inline-grid; place-items: center; color: var(--ink2); }
.up-doc .ico { width: 20px; height: 20px; }
.up-name { grid-area: name; min-width: 0; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.up-meta { grid-area: meta; min-width: 0; font-size: var(--fs-xs); overflow-wrap: anywhere; }
.up-bar { grid-area: meta; width: 100%; height: 6px; margin-top: 18px; accent-color: var(--brand); }
.up-x { grid-area: x; min-width: 44px; min-height: 44px; font-size: 1.25rem; line-height: 1; }
.up-x .ico { width: 16px; height: 16px; }
.up-item.is-done { border-color: var(--line); }
.up-item.is-err { border-color: var(--p1); background: var(--p1-bg); }
.up-item.is-err .up-meta { color: var(--p1-fg); font-size: var(--fs-sm); }
.up-item.is-err .up-name { color: var(--p1-fg); }
.up-item.is-err:not(:has(.up-thumb)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name x" "meta x"; }

.up-opts { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.up-opt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ไม่มี JS: ช่องเลือกไฟล์ไม่มี name (ส่งไปกับฟอร์มไม่ได้) → ซ่อน + บอกทางเลือก · มี JS (html[data-js] จาก app.js) = ซ่อนข้อความ */
.up-nojs { margin: 0; }
html[data-js] .up-nojs { display: none; }
html:not([data-js]) .up-zone, html:not([data-js]) .up-opts { display: none; }
/* ช่องเลือกไฟล์ของฟอร์มที่รับไฟล์โดยตรงได้ (ตอบกลับในพอร์ทัล) = ใช้เฉพาะตอนไม่มี JS */
html[data-js] .up-fallback { display: none; }
.pt-proof { margin-top: 8px; }
.pt-proof > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--fg); }

/* กล่องลงบันทึก (records/detail · screens-core: ชิ้นในกล่องเว้นขอบเอง 16 px · จอแคบ 12 px) */
.rec-composer .up { margin: 10px 16px 0; }
@media (max-width: 640px) { .rec-composer .up { margin: 10px 12px 0; } }
.rec-composer .up-lbl { font-weight: 500; color: var(--ink2); }

/* ไฟล์ที่แนบมากับบันทึก (ใต้ข้อความใน timeline) */
.tl-files { margin: 6px 0 0; }
.tl-file { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; overflow-wrap: anywhere; }
.tl-thumb { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--line); background: var(--surf2); }

/* พอร์ทัล: ปุ่มเลือกไฟล์เต็มความกว้างบนจอแคบ */
@media (max-width: 640px) {
  .up-zone { padding: 10px; }
  .up-btn { flex: 1 1 100%; justify-content: center; }
}

/* เป้ากด 44 px ทุกขนาดจอ (ชนะกฎ .btn ของจอแคบที่ลดเหลือ 40 px · วัดจริง M17 lane U) */
.up .up-btn, .up .up-x { min-height: 44px; }
.up .up-x { min-width: 44px; }