/* ===== คำขอ PR on a phone (2026-10-02, Kuang: "easy to check and work on mobile") =====
   Loaded from base.html after style.css + shell.css, in its own file for the reason shell.css is:
   it never collides with what other work appends to style.css.

   SCOPE. Every phone rule sits under `.prq-m`, a class the four คำขอ PR templates put on <main>
   through base.html's `main_class` block (pr_requests / requests / pr_request_detail /
   pr_request_form). No other page carries it, so no other page changes. Section 1 below is the only
   part that applies at every width: the attached-file list static/prq-phone.js builds, and the
   three phone-only elements, which it keeps hidden on a desktop.

   HOW. The desktop markup is unchanged; a phone re-lays it out. A list / item table becomes one
   card per row (`display: block` on the same <tr>/<td>, captions from `data-label`, cells named by
   `data-c`), so the server-side suites that read the HTML still see the same rows. A list's first
   cell is addressed as `td.td-doc` and carries NO new attribute: test_worklist.py reads
   `<td class="td-doc"><a href="/pr-requests/N"` off the page.

   Breakpoint: 640px, the one style.css already uses most.
   Rules of the pass: nothing scrolls sideways except the tab strip; every typed control is 16px
   (anything smaller makes iOS Safari zoom the page on focus); buttons, selects and fields are 44px
   tall and no tap target is under 40; Thai text keeps a 1.5 line height so stacked vowels and tone marks are never clipped;
   extra badges and extra header buttons WRAP (other features add them). ===== */

/* ---------- 1. every width ---------- */

/* phone-only pieces: present in the markup, shown by section 2. The toggle's selector has to
   outrank style.css's `.filter-card .btn { display: inline-flex }` (<= 700px), or the button
   would show, doing nothing, on a 641-700px screen. */
.prq-jump, .prq-file-hint, .filter-card .btn.prq-filter-toggle { display: none; }
/* where the phone's bottom bar jumps to: zero height, so the desktop page does not move */
.prq-anchor { display: block; height: 0; scroll-margin-top: 76px; }
#prq-fields-edit { scroll-margin-top: 76px; }

/* The attached-file list (prq-phone.js): every pick is kept, each with its own ✕. */
.prqf-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.prqf-list:empty { display: none; }
.prqf-item { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); font-size: 0.85rem; font-weight: 400; color: var(--text); line-height: 1.5; }
.prqf-thumb { flex: none; width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--brand-050); }
.prqf-ico { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--brand-050); font-size: 1.1rem; }
.prqf-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.prqf-size { flex: none; color: var(--ink-muted); font-size: 0.78rem; white-space: nowrap; }
.prqf-x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--danger);
  font-size: 1rem; line-height: 1; cursor: pointer; }
.prqf-x:hover { background: var(--danger-bg); }
.prqf-sum { font-size: 0.8rem; color: var(--ink-muted); line-height: 1.5; }
.prqf-sum b { color: var(--brand-text); }
.prqf-err { font-size: 0.82rem; line-height: 1.5; color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger);
  border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; }
.prqf-busy { font-size: 0.85rem; font-weight: 600; color: var(--brand-text); line-height: 1.5; }
form.is-uploading button[type=submit] { opacity: 0.6; cursor: progress; }

/* Each file goes up on its own as it is picked (prq-phone.js 1a, 2026-10-05). Its row gets a
   second line: where it is (รอส่ง / กำลังส่ง 42% with a bar / ✓ ส่งแล้ว / ⚠️ ส่งไม่สำเร็จ) and what the
   sender can do (ลองอีกครั้ง, ส่งสำเนาย่อแทน, ส่งไฟล์ต้นฉบับแทน). The row may wrap for that line only —
   the name's basis is 0, so a long name still shares the first line with the size and the ✕
   instead of pushing them down. */
.prqf-item { flex-wrap: wrap; }
.prqf-item > .prqf-name { flex: 1 1 0; }
.prqf-note { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.8rem;
  line-height: 1.5; color: var(--ink-muted); }
.prqf-note__text { min-width: 0; overflow-wrap: anywhere; }
.prqf-note--busy { color: var(--brand-text); font-weight: 600; }
.prqf-note--ok { color: var(--success); }
.prqf-note--fail { color: var(--danger); font-weight: 600; }
.prqf-bar { flex: 1 1 100%; display: block; height: 4px; border-radius: 2px; background: var(--surface-sunken); overflow: hidden; }
.prqf-bar > i { display: block; height: 100%; width: 0; background: var(--brand-600); transition: width 0.2s linear; }
.prqf-alt { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--success); font: inherit;
  font-size: 0.8rem; font-weight: 600; line-height: 1.5; padding: 2px 10px; cursor: pointer; }
.prqf-alt:hover { background: var(--surface-hover); }
.prqf-sum__busy { color: var(--brand-text); font-weight: 600; }
.prqf-sum__fail { color: var(--danger); font-weight: 600; }
.prqf-sum__ok { color: var(--success); }
/* what a reduced copy is — shown only where one is on offer for a file that needs a decision, or in use */
.prqf-hint { font-size: 0.8rem; font-weight: 400; line-height: 1.5; color: var(--ink-muted); overflow-wrap: anywhere; }
/* waiting for files to arrive / for the sender to decide about one: the submit buttons are disabled */
form.is-staging button[type=submit] { opacity: 0.6; cursor: progress; }
form.is-stuck button[type=submit] { opacity: 0.6; cursor: not-allowed; }
/* A staged file is no longer IN the input, so the browser's own "No file chosen" beside the button
   would contradict the list under it: that read-out is hidden, the button keeps its label. */
html.prqf-on input[type=file][data-stage-url] { color: transparent; }
html.prqf-on input[type=file][data-stage-url]::file-selector-button { color: var(--text); }
/* On the request page: a stored file that is a reduced copy says so, and who holds the original. A
   line of its own under the file, in every list that shows files (per item, the request's, a message's). */
.prq-shrunk { flex: 1 1 100%; display: block; font-size: 0.76rem; font-weight: 400; line-height: 1.5; color: var(--ink-muted);
  overflow-wrap: anywhere; }
/* The two quiet lines of 2026-10-12 — "ดูได้อย่างเดียว — คำขอนี้เป็นของ …" above a colleague's request,
   and the note above คำขอของฉัน that it now holds the department's requests too: a line of their own,
   clear of the card under them. */
.prq-readonly, .prq-dept-note { margin: 0 0 8px; line-height: 1.5; }
/* Cancel by category (2026-10-12): the sentence inside the ยกเลิกคำขอ box that says which category
   gives this person the right — a block of its own above the reason, on every width. */
.prq-cancel-why { display: block; margin: 0 0 10px; line-height: 1.5; }
/* …and that box (only that one — the head's and the requester's box is left exactly as it was) is a
   block on every width, so the card's padding holds the sentence, the reason and the button. */
details[data-prq-cancel-group] > form.collapse-body.inline-form { display: block; }
details[data-prq-cancel-group] > form.collapse-body.inline-form .btn { margin-top: 10px; }
/* หมายเหตุของคำขอ (2026-10-12): the list of notes above the conversation and the plain forms that
   write, edit and delete one. The note cards are style.css's .remark-item and the folded แก้ไข / ลบ
   its .note-tools (the Approval page's); only what is this section's own is here. The forms are
   NOT .remark-form — that class is how prq.js and the phone check find the comment box. */
.prq-notes .remark-list { margin-bottom: 0.75rem; }
.prq-notes .remark-meta .badge { margin-left: 2px; }
.prq-note-form { margin: 0; }
.prq-note-form textarea { width: 100%; padding: 0.75rem 1rem; font-size: 0.95rem; border: 2px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--text); font-family: inherit; resize: vertical;
  margin-bottom: 0.6rem; }
.prq-note-form textarea:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.prq-notes .note-tool__form textarea { background: var(--surface); }
/* the list replaces the comment box's plain "N files: a, b" read-out, which could not remove one
   (the item editor's own preview simply stays empty: its listener stands down, see the partial) */
html.prqf-on [data-comment-file-names] { display: none; }
/* inside the comment box's flex row the list takes a row of its own */
.remark-attach > .prqf-list { flex: 1 1 100%; order: 5; margin-top: 0; }

/* ---------- 2. the phone ---------- */
@media (max-width: 640px) {

  /* -- page frame: a little more room for the cards -- */
  .prq-m { padding-left: 12px; padding-right: 12px; }
  .prq-m .card:not(details) { padding: 14px; }
  .prq-m .page-toolbar { margin-bottom: 0.6rem; }
  .prq-m .page-toolbar .section-sub { display: none; }       /* explanation only; desktop keeps it */
  .prq-m .section-sub { font-size: 0.78rem; line-height: 1.5; }
  .prq-m .footnote { font-size: 0.8rem; line-height: 1.6; }
  .prq-m .badge { white-space: normal; line-height: 1.5; }   /* a long badge wraps, never overflows */
  .prq-m .chip { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
  .prq-m .prq-pr { line-height: 1.5; }

  /* -- collapsible cards: the caption reads as a title + a subtitle, not three squeezed columns -- */
  .prq-m details.card > summary { display: block; position: relative; padding: 14px 44px 14px 14px; min-height: 48px;
    line-height: 1.5; }
  .prq-m details.card > summary::after { position: absolute; right: 14px; top: 14px; margin: 0; }
  .prq-m details.card > summary .muted { display: block; font-weight: 400; font-size: 0.78rem; }
  .prq-m details.card > .collapse-body { padding: 0 14px 14px; }
  .prq-m details:not(.card):not(.owner-picker) > summary { padding: 10px 0; cursor: pointer; }   /* a picker keeps its box padding */    /* a 44px target */

  /* -- typed controls: 16px (no iOS zoom), 44px tall, never wider than their card -- */
  .prq-m input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
  .prq-m select, .prq-m textarea { font-size: 16px; min-height: 44px; max-width: 100%; }
  .prq-m textarea { min-height: 84px; line-height: 1.5; }
  .prq-m select { padding-top: 0.55rem; padding-bottom: 0.55rem; }
  .prq-m .field label { line-height: 1.5; }
  .prq-m .field input[type=file], .prq-m .item-upload input[type=file] { width: 100%; max-width: none; min-height: 48px;
    padding: 0.6rem; font-size: 0.9rem; border: 2px dashed var(--border); border-radius: 8px; background: var(--bg);
    color: var(--muted); }
  .prq-m .prq-file-hint { display: block; flex: 1 1 100%; font-size: 0.78rem; color: var(--ink-muted); line-height: 1.5; }

  /* -- buttons and other tap targets -- */
  .prq-m .btn { min-height: 44px; white-space: normal; text-align: center; line-height: 1.4; }
  .prq-m .btn-sm { padding: 8px 14px; font-size: 0.9rem; }
  .prq-m .card form .btn-primary, .prq-m form.card .btn-primary { width: 100%; min-height: 48px; font-size: 1rem; }
  .prq-m .inline-actions { gap: 8px; }
  .prq-m .dl-link { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 10px; }
  /* the row's buttons (ลองอีกครั้ง / ส่งสำเนาย่อแทน / ส่งไฟล์ต้นฉบับแทน) are tap targets */
  .prq-m .prqf-alt { min-height: 40px; padding: 6px 12px; font-size: 0.85rem; }
  .prq-m .prqf-note { font-size: 0.82rem; }
  .prq-m .prqf-hint { font-size: 0.82rem; }
  .prq-m .prq-shrunk { font-size: 0.8rem; }
  .prq-m .attach-del__ask { min-width: 44px; padding: 8px; }
  .prq-m .attach-del__confirm { gap: 8px; }
  .prq-m .mention-item { min-height: 44px; align-items: center; padding: 10px 12px; }
  .prq-m .mention-chip { padding: 0 2px 0 12px; font-size: 0.9rem; }
  .prq-m .mention-chip button { min-width: 40px; min-height: 40px; }
  .prq-m .prqbot-fab { min-width: 44px; min-height: 44px; justify-content: center; }
  .prq-m .prqbot__close { min-width: 40px; min-height: 40px; }
  .prq-m .prqbot__chip { min-height: 40px; }
  /* a tooltip does not exist on a phone: the "?" is replaced by its explanation, shown outright */
  .prq-m .help-dot { display: none; }
  .prq-m .filter-card .help-note[hidden] { display: block !important; }
  .prq-m .filter-card form.is-collapsed ~ .help-note { display: none !important; }

  /* -- tabs: still one scrolling strip, but it says there is more (prq-phone.js sets has-more-*) -- */
  .prq-m .tabs { margin-bottom: 10px; gap: 2px; }
  .prq-m .tab { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; }
  .prq-m .tabs.has-more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
  .prq-m .tabs.has-more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent); }
  .prq-m .tabs.has-more-l.has-more-r {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }

  /* -- list filters: one row (search · ค้นหา · ตัวกรอง); ประเภท / สถานะงาน fold behind ตัวกรอง -- */
  .prq-m .card.filter-card { padding: 10px 12px; margin-bottom: 10px; }
  .prq-m .filter-card .form-inline { gap: 8px; align-items: flex-end; }
  .prq-m .filter-card .form-inline > .field.grow { order: 1; flex: 1 1 0; min-width: 0; }
  .prq-m .filter-card .form-inline > .field.grow > label { position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }      /* the placeholder says it */
  .prq-m .filter-card input[type=search] { padding: 0.55rem 0.7rem; }
  .prq-m .filter-card .form-inline > .btn-primary { order: 2; width: auto; flex: 0 0 auto; min-height: 44px;
    padding-left: 12px; padding-right: 12px; font-size: 0.9rem; }
  .prq-m .filter-card .form-inline > .prq-filter-toggle { order: 3; display: inline-flex; width: auto; flex: 0 0 auto;
    padding-left: 10px; padding-right: 10px; gap: 4px; }
  .prq-m .filter-card .prq-filter-toggle::after { content: "▾"; color: var(--ink-subtle); }
  .prq-m .filter-card .prq-filter-toggle[aria-expanded=true]::after { content: "▴"; }
  .prq-m .filter-card .form-inline > .field:not(.grow) { order: 4; flex: 1 1 100%; }
  .prq-m .filter-card .form-inline > a.btn { order: 5; width: 100%; }
  .prq-m .filter-card form.is-collapsed > .field:not(.grow) { display: none; }
  /* คำขอของฉัน (2026-10-12) has ONE filter, ผู้ขอ, and no search box: the select and its button share
     a row, the caption stays above the select, ล้างตัวกรอง takes the row below. */
  .prq-m .filter-card.prq-req-filter .form-inline > .field:not(.grow) { order: 1; flex: 1 1 0; min-width: 0; }
  .prq-m .filter-card.prq-req-filter select { width: 100%; }

  /* -- lists: one card per request, nothing to scroll sideways -- */
  .prq-m .card.prq-cards-wrap { background: none; box-shadow: none; padding: 0; border-radius: 0; overflow: visible; }
  .prq-m .prq-cards, .prq-m .prq-cards > tbody { display: block; width: 100%; min-width: 0; }
  .prq-m .prq-cards tr:first-child { display: none; }                  /* the column headers */
  .prq-m .prq-cards tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; position: relative;
    background: var(--surface); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); padding: 12px 14px;
    margin-bottom: 10px; }
  .prq-m .prq-cards tr.wl-row-overdue { background: var(--danger-surface);
    box-shadow: 0 0 0 1px var(--danger); }
  .prq-m .prq-cards tr > td { display: block; flex: 1 1 100%; min-width: 0; max-width: none; padding: 0; border: 0;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.55; font-size: 0.9rem; }
  .prq-m .prq-cards tr > td.empty-cell { padding: 0.6rem 0; }
  /* line 1: the number (+ its PR numbers) on the left, the status on the right. The kind badge
     sits with the other badges at the foot: number + kind + the longest status do not fit one
     line at 360-390px, and a status that jumps between two places is harder to scan. */
  .prq-m .prq-cards td.td-doc { order: 1; flex: 1 1 0; font-size: 0.95rem; }
  .prq-m .prq-cards td.td-doc > a:first-child { white-space: nowrap; }
  .prq-m .prq-cards td[data-c=status] { order: 3; flex: 0 1 auto; max-width: 62%; text-align: right; }
  .prq-m .prq-cards td[data-c=kind] { order: 7; flex: 0 1 auto; }
  .prq-m .prq-cards td[data-c=status] .stage { margin-top: 4px; }
  /* Hold's reason under its badge (2026-10-02): no wider than the longest status badge, or the
     number beside it loses its source mark to a second line */
  .prq-m .prq-cards td[data-c=status] .hold-why { max-width: 160px; margin-left: auto; }
  .prq-m .prq-cards td[data-c=title] { order: 4; font-size: 1rem; font-weight: 600; color: var(--ink); }
  .prq-m .prq-cards td[data-c=title] .muted { font-size: 0.8rem; font-weight: 400; }
  /* captioned rows: the caption the column header used to carry, then the value */
  .prq-m .prq-cards td[data-label] { order: 5; position: relative; padding-left: 5.4rem; min-height: 1.55em; }
  .prq-m .prq-cards td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 1px;
    width: 5rem; color: var(--ink-muted); font-size: 0.78rem; line-height: 1.7; white-space: nowrap; }
  .prq-m .prq-cards td.td-pay:has(> .muted:only-child) { display: none; }    /* no PO yet: no row */
  .prq-m .prq-cards td[data-c=info] { order: 8; flex: 0 1 auto; }
  .prq-m .prq-cards td[data-c=age] { order: 9; flex: 0 1 auto; padding-left: 0; }
  .prq-m .prq-cards td[data-c=age]::before { position: static; display: inline; width: auto; margin-right: 6px; }
  /* number, % and total on one line, the bar under them */
  .prq-m .prq-cards .pay--compact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; font-size: 0.82rem; }
  .prq-m .prq-cards .pay--compact .pay-bar { order: 5; flex: 1 1 100%; max-width: 180px; margin-top: 2px; }
  /* the whole card opens the request: the number's link is stretched over it, and every other
     link in the card (a PR number, a PO in TRCloud, a badge that links) stays above that */
  .prq-m .prq-cards td.td-doc > a:first-child::after { content: ""; position: absolute; inset: 0; z-index: 1;
    border-radius: 12px; }
  .prq-m .prq-cards td.td-doc > a:first-child:focus-visible::after { outline: 2px solid var(--primary); }
  .prq-m .prq-cards td a:not(:first-child), .prq-m .prq-cards td:not(.td-doc) a,
  .prq-m .prq-cards td.td-doc .prq-pr a { position: relative; z-index: 2; }
  .prq-m .prq-cards tr:active { background: var(--surface-sunken); }
  /* the copy button sits above the stretched number link, so a tap on it copies and does not open the request */
  .prq-m .ref-copy { position: relative; z-index: 2; width: 40px; height: 40px; min-width: 40px; margin: -10px 0 -10px 2px; }
  .prq-m .ref-copy svg { width: 18px; height: 18px; }

  /* -- request page: the header card -- */
  .prq-m .detail-head .section-title { font-size: 1rem; gap: 6px; line-height: 1.5; }
  .prq-m .detail-head .inline-actions { width: 100%; }
  .prq-m .detail-head .inline-actions .btn { flex: 1 1 auto; }           /* extra buttons wrap */
  .prq-m #prq-head-view { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .prq-m .detail-grid .item .k { line-height: 1.5; }
  /* forms stack: one labelled control per row */
  .prq-m form .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 0; }
  .prq-m form .detail-grid > .field, .prq-m form .detail-grid > .item { margin-bottom: 14px; }
  .prq-m form > .field { margin-bottom: 14px; }
  .prq-m .readonly-value { padding: 0.2rem 0; }
  .prq-m .stage-inputs input { width: 7rem; }

  /* -- Overall Work Status: a short vertical list instead of a sideways strip -- */
  .prq-m .wmap__row { flex-direction: column; gap: 4px; padding: 0; overflow: visible; }
  .prq-m .wmap__step { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0;
    max-width: none; padding: 6px 10px; }
  .prq-m .wmap__step + .wmap__step::before { display: none; }
  .prq-m .wmap__mark { flex: 0 0 1.3em; line-height: 1.5; }
  .prq-m .wmap__label { flex: 0 1 auto; line-height: 1.5; }
  .prq-m .wmap__who { flex: 1 1 auto; text-align: right; line-height: 1.5; }
  .prq-m .wmap__note { flex: 1 1 100%; padding-left: calc(1.3em + 8px); line-height: 1.5; }

  /* -- งานรายรายการ: one card per item, full-width labelled controls, ONE save for all of them -- */
  .prq-m form.wl-table-wrap, .prq-m .form-field-table, .prq-m .collapse-body > .wl-table-wrap { overflow: visible; }
  .prq-m .prq-item-work, .prq-m .prq-item-work > tbody, .prq-m .prq-items, .prq-m .prq-items > tbody,
  .prq-m .prq-audit, .prq-m .prq-audit > tbody { display: block; width: 100%; min-width: 0; }
  .prq-m .prq-item-work tr:first-child, .prq-m .prq-items tr:first-child, .prq-m .prq-audit tr:first-child { display: none; }
  .prq-m .prq-item-work tr, .prq-m .prq-items tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px;
    position: relative; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-sunken); padding: 12px;
    margin-bottom: 10px; }
  .prq-m .prq-item-work tr > td, .prq-m .prq-items tr > td { display: block; flex: 1 1 100%; min-width: 0; padding: 0;
    border: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.55; }
  .prq-m .prq-item-work td:empty, .prq-m .prq-items td:empty { display: none; }
  .prq-m .prq-item-work td[data-c=no], .prq-m .prq-items td[data-c=no] { flex: 0 0 auto; font-weight: 700;
    color: var(--brand-text); }
  .prq-m .prq-item-work td[data-c=no]::after, .prq-m .prq-items td[data-c=no]::after { content: "."; }
  .prq-m .prq-item-work td[data-c=name], .prq-m .prq-items td[data-c=name] { flex: 1 1 0; font-weight: 600; }
  .prq-m .prq-item-work td[data-c=name] { padding-right: 48px; }       /* room for the 🗑 */
  .prq-m .prq-item-work td[data-c=del] { position: absolute; top: 6px; right: 6px; flex: none; width: auto; }
  .prq-m .prq-item-work td[data-c=del] .btn { min-width: 44px; padding: 8px; }
  .prq-m .prq-item-work td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px;
    color: var(--muted); font-size: 0.8rem; font-weight: 600; line-height: 1.5; }
  .prq-m .prq-item-work td[data-c=due] { font-size: 0.9rem; }
  .prq-m .prq-item-work td[data-c=due]::before { display: inline; margin: 0 6px 0 0; }
  .prq-m .prq-item-work select, .prq-m .prq-item-work input[type=date], .prq-m .prq-item-work input[type=text] {
    width: 100%; padding: 0.55rem 0.7rem; border: 2px solid var(--border); border-radius: 8px; background: var(--surface);
    color: var(--text); font-family: inherit; }
  .prq-m .prq-item-work .iw-doc { gap: 8px; }
  .prq-m .prq-item-work .iw-doc + .iw-doc { margin-top: 8px; }
  .prq-m .prq-item-work .iw-doc > span { flex: 0 0 26px; font-size: 0.82rem; }
  .prq-m .prq-item-work .iw-doc > input[type=text] { flex: 1 1 auto; width: auto; min-width: 0; }
  .prq-m .prq-pr-hint { margin: 4px 0 4px 34px; font-size: 0.78rem; line-height: 1.5; }

  /* -- the read-only item list of the request (ข้อมูลคำขอ) -- */
  .prq-m .prq-items tr > td { font-size: 0.9rem; }
  .prq-m .prq-items td[data-label] { position: relative; padding-left: 5.4rem; min-height: 1.55em; }
  .prq-m .prq-items td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 1px;
    width: 5rem; color: var(--ink-muted); font-size: 0.78rem; line-height: 1.7; white-space: nowrap; }
  .prq-m .prq-items td[data-c=qty] { flex: 0 1 auto; }
  .prq-m .prq-items td[data-c=unit] { flex: 1 1 0; }
  .prq-m .prq-items td[data-c=files] { padding-left: 0; }
  .prq-m .prq-items td[data-c=files]::before { position: static; display: block; width: auto; margin-bottom: 4px; }
  .prq-m .item-files { gap: 8px 10px; }
  .prq-m .item-files a { font-size: 0.9rem; }
  .prq-m .item-upload { display: flex; flex-wrap: wrap; width: 100%; gap: 8px; margin-top: 10px; }
  .prq-m .item-upload .btn { width: 100%; }
  .prq-m .attach-item { font-size: 0.9rem; gap: 8px 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
  .prq-m .attach-item:last-child { border-bottom: 0; }
  .prq-m .attach-move select { max-width: 100%; padding: 0.4rem 0.5rem; border: 2px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text); }
  .prq-m .collapse-body > form.inline-form, .prq-m form.collapse-body.inline-form { display: block; }
  .prq-m .collapse-body > form.inline-form .btn, .prq-m form.collapse-body.inline-form .btn { width: 100%; margin-top: 10px; }

  /* -- ประวัติการแก้ไข: each change is a short block -- */
  .prq-m .prq-audit tr { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .prq-m .prq-audit tr > td { display: block; flex: 1 1 100%; min-width: 0; padding: 0; border: 0; white-space: normal;
    overflow-wrap: anywhere; line-height: 1.55; font-size: 0.9rem; }
  .prq-m .prq-audit td[data-c=when] { flex: 0 0 auto; color: var(--ink-muted); font-size: 0.78rem; }
  .prq-m .prq-audit td[data-c=by] { flex: 1 1 0; color: var(--ink-muted); font-size: 0.78rem; }
  .prq-m .prq-audit td[data-c=by] > div { display: inline; margin-left: 4px; }
  .prq-m .prq-audit td[data-c=field] { font-weight: 600; }
  .prq-m .prq-audit td[data-c=reason]:empty { display: none; }
  .prq-m .prq-audit td[data-c=reason]::before { content: attr(data-label) " "; color: var(--ink-muted); font-size: 0.78rem; }

  /* -- ข้อความ: the comment box -- */
  .prq-m .remark-item { padding: 10px 12px; }
  .prq-m .remark-text { line-height: 1.6; }
  .prq-m .remark-attach { gap: 8px; margin: 8px 0; }

  /* -- หมายเหตุของคำขอ: แก้ไข / ลบ stay thumb-sized pills (the 44px rule for a plain <details>
        summary, above, would take their side padding), and each folded form's button is a full row -- */
  .prq-m .prq-notes .note-tool > summary { min-height: 40px; padding: 4px 16px; font-size: 0.86rem; line-height: 1.5; }
  .prq-m .prq-notes .note-tool__form .btn { width: 100%; }
  .prq-m .prq-notes .note-tool__ask { line-height: 1.6; }
  .prq-m .prq-notes .remark-meta { line-height: 1.6; }
  .prq-m .prq-note-form .inline-actions > .footnote { flex: 1 1 100%; margin-top: 0; }

  /* -- new-request form: item rows -- */
  .prq-m .item-row { padding: 12px; }
  .prq-m .item-row .item-row__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .prq-m .item-row__grid > .field:nth-child(1), .prq-m .item-row__grid > .field:nth-child(2),
  .prq-m .item-row__grid > .field:nth-child(5) { grid-column: 1 / -1; }
  .prq-m .item-row__files { margin-top: 2px; }
  .prq-m input.time-24 { max-width: 10rem; }
  .prq-m .kind-explain { line-height: 1.6; }

  /* -- the bottom bar of the request page: jump to what a person on a phone came to do.
        ถามบอท sits IN the bar (its right end) on this page, so nothing floats over the forms. -- */
  .prq-m .prq-jump { display: flex; gap: 4px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    padding: 4px 62px calc(4px + env(safe-area-inset-bottom, 0px)) 6px; background: var(--surface);
    border-top: 1px solid var(--border); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); }
  /* a fixed 48px row: the save buttons above ride at a fixed offset from it, so a label may never
     wrap and make the bar taller — the count is a small bubble on the icon, not beside the word */
  .prq-m .prq-jump a { flex: 1 1 0; min-width: 0; height: 48px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; position: relative; border-radius: 8px; color: var(--ink);
    text-decoration: none; font-size: 0.74rem; font-weight: 600; line-height: 1.5; text-align: center;
    white-space: nowrap; overflow: hidden; }
  .prq-m .prq-jump a > span[aria-hidden] { font-size: 1.1rem; line-height: 1.3; }
  .prq-m .prq-jump a:active { background: var(--primary-light); color: var(--brand-text); }
  .prq-m .prq-jump .tab-count { position: absolute; top: 1px; left: calc(50% + 8px); margin: 0; padding: 0 5px;
    font-size: 0.64rem; line-height: 1.5; background: var(--primary); color: var(--on-brand); }
  .prq-m--detail .prqbot-fab { right: 8px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: none; }
  .prq-m--detail .prqbot { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); max-height: 72vh; }
  /* the bar is 57px tall: the page scrolls its last card clear of it */
  .prq-m.prq-m--detail { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* -- the two work forms of the request page: what is changed most comes first, and the ONE
        save button of each form rides above the bar while that form is on screen -- */
  .prq-m--detail form.card > .detail-grid > .field:has(> select[name=status]) { order: -6; }
  .prq-m--detail form.card > .detail-grid > [data-status-field=waiting_info] { order: -5; }
  /* the reason boxes of Hold and Cancelled (2026-10-02): directly under the status that asks for them */
  .prq-m--detail form.card > .detail-grid > [data-status-field=hold],
  .prq-m--detail form.card > .detail-grid > [data-status-field=cancelled] { order: -5; }
  .prq-m--detail form.card > .detail-grid > [data-status-field=waiting_delivery] { order: -4; }
  .prq-m--detail form.card > .detail-grid > .field:has(> input[name=pr_number]) { order: -3; }
  .prq-m--detail form.card > .detail-grid > .field:has(> input[name=po_number]) { order: -2; }
  .prq-m--detail form.card > .inline-actions { display: contents; }
  .prq-m--detail form.card > .inline-actions > .footnote { display: block; margin-top: 8px; }
  .prq-m--detail form.card > .inline-actions > .btn-primary { display: flex; position: sticky; z-index: 4;
    bottom: calc(65px + env(safe-area-inset-bottom, 0px)); margin-top: 6px; box-shadow: 0 0 0 8px var(--surface); }

  /* typing: the keyboard has the bottom of the screen — the bar gets out of its way and the save
     button goes back to its place at the end of the form */
  .prq-m:has(input:not([type=file]):not([type=checkbox]):focus, textarea:focus) .prq-jump { display: none; }
  .prq-m--detail:has(input:not([type=file]):not([type=checkbox]):focus, textarea:focus) form.card > .inline-actions > .btn-primary {
    position: static; }
}

/* the narrowest phones: keep a card's number and its source mark on one line beside the status */
@media (max-width: 370px) {
  .prq-m .prq-cards tr { padding-left: 10px; padding-right: 10px; }
  .prq-m .prq-cards td.td-doc { font-size: 0.88rem; }
}