/* مدرک‌های هر جعبه.
   دو شبکه روی این صفحه هست و هر دو یک قاعده دارند: عکس بزرگ‌ترین چیز روی کارت است. کل دلیل
   وجود این صفحه دیدن پشت سر هم عکس‌هاست، پس هر پیکسلی که به زیرنویس برود از همان کم می‌شود. */

.box-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; margin:16px 0 26px; }
.box-card { margin:0; }
.box-open { display:block; width:100%; text-align:start; padding:14px 15px; border:1px solid #2c2745; border-radius:13px;
  background:#161329; color:inherit; cursor:pointer; font:inherit; transition:border-color .15s, background .15s; }
.box-open:hover { border-color:#5b52a8; background:#1b1733; }
.box-card.selected .box-open { border-color:#7d6ff0; background:#1e1a38; }
.box-open .eyebrow { margin:0 0 4px; font-size:11.5px; color:#8f89aa; }
.box-open h3 { margin:0 0 8px; font-size:14.5px; line-height:1.75; color:#efecff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.box-open small { color:#7d7896; font-size:11.5px; }

.box-numbers { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
.box-numbers span { padding:2px 8px; border-radius:99px; background:#ffffff0d; color:#a9a3c4; font-size:11.5px; }
.box-numbers .ok { background:#2bd18a1f; color:#7fe3b8; }
.box-numbers .neutral { background:#f0b4291f; color:#f0c76a; }
.box-numbers .bad { background:#ff5d7326; color:#ff9aa8; }

.box-heading { align-items:flex-start; }
.box-heading h2 { margin:2px 0 6px; }
.box-heading-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.box-heading-actions .text-button { margin:0; }

/* شبکهٔ مدرک‌ها. عرض ستون از روی یک اسکرین‌شات گوشی انتخاب شده و نه از روی جای خالی صفحه:
   باریک‌تر از این، نوار زیر پست خوانده نمی‌شود و صفحه کار خودش را نمی‌کند. */
.box-proofs { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px; margin:16px 0 30px; }
.box-proof { margin:0; padding:0; border:1px solid #2c2745; border-radius:13px; overflow:hidden; background:#161329; }
.box-proof.ok { border-color:#2bd18a4d; }
.box-proof.bad { border-color:#ff5d734d; }
.box-proof.neutral { border-color:#f0b4294d; }
.box-shot { display:block; background:#0d0b18; }
.box-shot img { display:block; width:100%; max-height:360px; object-fit:contain; }
.box-shot.empty { display:flex; align-items:center; justify-content:center; min-height:120px; padding:14px; text-align:center; }
.box-shot.empty span { color:#6f6a8a; font-size:12px; line-height:1.8; }

.box-proof-body { padding:11px 12px 13px; }
.box-proof-body h4 { margin:0 0 6px; font-size:13px; color:#efecff; }
.box-proof-line { margin:0 0 4px; font-size:12px; line-height:1.85; color:#9d97ba; }
.box-proof-line.machine { color:#7f9db0; }
.box-proof-line.quote { color:#b6b0d0; background:#ffffff0a; border-radius:8px; padding:6px 8px; }
.box-proof-body small { color:#6f6a8a; font-size:11px; }
.box-badge { display:inline-block; padding:1px 7px; border-radius:99px; font-size:11px; }
.box-badge.ok { background:#2bd18a1f; color:#7fe3b8; }
.box-badge.neutral { background:#f0b4291f; color:#f0c76a; }
.box-badge.bad { background:#ff5d7326; color:#ff9aa8; }

/* دکمهٔ فیلتر روی این صفحه یک عدد هم دارد. عدد کم‌رنگ‌تر از برچسب است تا اول اسم ردیف خوانده
   شود و بعد تعدادش، نه برعکس. */
[data-box-filter] b { font-weight:600; opacity:.65; margin-inline-start:3px; }

/* فرم رد. بسته و کم‌رنگ تا وقتی کسی نخواهدش: روی صفحه‌ای که صد کارت دارد، صد جعبهٔ متن باز
   یعنی عکس‌ها از صفحه بیرون می‌روند. */
.box-reject { margin-top:9px; border-top:1px solid #2c2745; padding-top:8px; }
.box-reject > summary { cursor:pointer; color:#c98a97; font-size:12px; list-style:none; }
.box-reject > summary::-webkit-details-marker { display:none; }
.box-reject > summary::before { content:'✕'; margin-inline-end:5px; opacity:.7; }
.box-reject > summary:hover { color:#ff9aa8; }
.box-reject label { display:block; margin:8px 0 7px; color:#8f89aa; font-size:11.5px; line-height:1.8; }
.box-reject textarea { width:100%; margin-top:4px; border:1px solid #36304f; border-radius:9px; padding:8px 9px;
  background:#110f21; color:#fff; font:inherit; font-size:12px; resize:vertical; }
.box-reject .button { width:100%; font-size:12px; padding:8px 10px; }
.box-reject .form-status { margin-top:6px; color:#9d97ba; font-size:11.5px; line-height:1.8; }
/* کارتی که همین حالا رد شد. رنگ می‌گیرد و کم‌رنگ می‌شود تا در یک شبکهٔ صدتایی معلوم باشد کجا
   بوده‌ای، بی‌آنکه جایش عوض شود و رشتهٔ نگاه کردن پاره شود. */
.box-proof.box-rejected { opacity:.55; }
.box-proof.box-rejected .box-reject { display:none; }

@media (max-width:640px) {
  .box-proofs { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .box-list { grid-template-columns:1fr; }
}