/* PULSE photo box (public/assets/photo-box.js). The component's own styles, never styles.css.
   A slot is a row: the label and its "N More Needed" line on the left, the boxes and the + on the right, wrapping
   under the label when there are too many to sit beside it. Each box is a square holding one photo. */
.pb-list { display:flex; flex-direction:column; gap:0.6rem; }
.ps-row { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.75rem; padding:0.55rem 0.65rem; border:1.5px dashed var(--border,#cbd5e1); border-radius:10px; background:var(--card,#fff); }
.ps-row.cond-hidden, .ps-row[hidden] { display:none; }
.ps-row.filled { border-style:solid; border-color:#d97706; }
.ps-row.pb-done { border-color:#16a34a; }
.ps-row .ps-head { flex:1 1 7.5rem; min-width:0; }
.ps-row .ps-label { display:block; font-size:0.82rem; font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
.ps-row .ps-req { display:block; font-size:0.68rem; font-weight:700; color:#991b1b; margin:0.1rem 0 0; }
.ps-row.pb-done .ps-req { color:#166534; }
.ps-row .pb-need { display:block; font-size:0.74rem; font-weight:700; color:#92400e; margin-top:0.2rem; }
.ps-row .pb-need:empty { display:none; }
.ps-row .ps-retake { display:inline-block; font-size:0.68rem; font-weight:700; color:#92400e; background:#fef3c7; border:1px solid #fcd34d; border-radius:6px; padding:0.05rem 0.3rem; margin-left:0.35rem; vertical-align:middle; }
.pb-boxes { display:flex; flex-wrap:wrap; gap:0.5rem; }
.pb-box { position:relative; flex:0 0 auto; width:4.5rem; height:4.5rem; overflow:hidden; border:1.5px dashed var(--border,#cbd5e1); border-radius:10px; background:var(--card,#fff); }
.pb-box.filled { border-style:solid; border-color:#16a34a; }
.pb-box .pb-tap { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--text-muted,#6b7280); font-size:0.78rem; font-weight:700; cursor:pointer; }
.pb-box .photo-thumb { position:absolute; inset:0; width:auto; height:auto; border:0; border-radius:0; display:block; }
.pb-box .photo-thumb img { display:block; width:100%; height:100%; object-fit:contain; }
.pb-box .photo-thumb button { position:absolute; z-index:3; top:2px; right:2px; width:22px; height:22px; padding:0; border-radius:50%; border:none; background:rgba(0,0,0,.6); color:#fff; font-size:15px; line-height:22px; cursor:pointer; }
.pb-plus { flex:0 0 auto; width:4.5rem; height:4.5rem; margin:0; padding:0; border:1.5px dashed var(--border,#cbd5e1); border-radius:10px; background:transparent; box-shadow:none; color:var(--text-muted,#6b7280); font-size:1.9rem; font-weight:700; line-height:1; cursor:pointer; }
.pb-plus:active, .pb-box .pb-tap:active { background:rgba(0,0,0,.05); }
/* The trash can's 40px tap target sits on the box's corner and reaches outside it, so it never covers the middle of the box. The box no longer clips; the photo does. */
.pb-box { overflow:visible; }
.pb-box .photo-thumb { overflow:hidden; border-radius:8px; }
.pb-box .pb-swap { position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; cursor:pointer; }
/* The swap button covers the whole photo, invisibly. `.pb-box .photo-thumb button` above (0,2,1) used to beat `.pb-box .pb-swap` (0,2,0), so the swap drew as a 22px dark dot in the photo's top left corner and only that dot opened Replace Photo (found by the return window's review at 375, 390 and 414 wide, inspection-qc-release-updates step 2). */
.pb-box .photo-thumb .pb-swap { top:0; right:0; bottom:0; left:0; width:100%; height:100%; border-radius:0; background:transparent; }
.pb-box .photo-thumb button[data-rm], .pb-box .pb-rmbox { position:absolute; z-index:3; top:-10px; right:-10px; width:40px; height:40px; min-width:40px; min-height:40px; padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pb-box .photo-thumb button[data-rm] svg, .pb-box .pb-rmbox svg { box-sizing:content-box; width:16px; height:16px; padding:5px; border-radius:50%; }
.pb-box .photo-thumb button[data-rm] svg { background:rgba(0,0,0,.6); color:#fff; }
.pb-box .pb-rmbox svg { background:rgba(0,0,0,.08); color:#991b1b; }
.pb-sheet { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(0,0,0,.55); }
.pb-sheet[hidden] { display:none; }
.pb-sheet-card { box-sizing:border-box; width:100%; max-width:22rem; padding:1.25rem; border-radius:14px; background:var(--card,#fff); color:var(--text,#111827); }
.pb-sheet-card h3 { margin:0 0 0.75rem; font-size:1.1rem; }
.pb-sheet .pulse-modal-actions { display:flex; flex-direction:column; gap:0.5rem; }
.pb-sheet .pulse-modal-btn { min-height:44px; padding:0.7rem; border:1px solid var(--border,#cbd5e1); border-radius:10px; font:inherit; font-weight:600; cursor:pointer; }
.pb-sheet .pulse-modal-btn-primary { background:var(--brand,#1e3a8a); border-color:transparent; color:#fff; }
.pb-sheet .pulse-modal-btn-secondary { background:#fff; color:var(--text,#111827); }
.pb-sheet .pulse-modal-btn-danger { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }