/* Capture and evidence (Bundle A, round 5): the camera overlays, the defect tile, the sheets for
   No, snag, reading, amend and share. Loads after app-admin.css. Uses the tokens in app.css. */

/* D6: every top-left viewfinder overlay stacks in one column, so nothing prints over anything */
.vf-tl { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 2; pointer-events: none; }
.vf-tl:empty { display: none; }
.vf:has(.cam-ctx .chip) .vf-tl { right: 138px; }
.glove .vf:has(.cam-ctx .chip) .vf-tl { right: 150px; }
.vf-tl > .vf-chip, .vf-tl > .vf-off, .vf-tl > .rec { position: static; inset: auto; transform: none; max-width: 100%; }
.vf .cam-ctx { top: 10px !important; }
/* while recording, the lens pill gives way to the transcript */
.vf.rec-on .cam-pill { display: none; }
.vf.rec-on .rec-tr { bottom: 64px; }

/* F4, F2-4: the defect / extra tile is pinned at the left edge, outside the scroller, so it is
   always in reach without a swipe. D12: slot names are the full label, wrapped, never cut. */
.slots-bar { flex: none; display: flex; align-items: flex-start; }
.slots-bar > .slot-x { flex: none; margin: 12px 0 6px 14px; padding-right: 10px; box-shadow: 1px 0 0 rgba(255,255,255,.14); }
.slots-bar > .slots { flex: 1 1 auto; min-width: 0; padding-left: 12px; }
.slots-bar .slot-l { display: block; max-width: 72px; overflow-wrap: break-word; }
.slot-x .slot-img { outline-style: dashed; }
.slot-x .slot-img .ic { width: 22px; height: 22px; color: #c9c9c7; }
.slot-x.next .slot-img { outline-style: solid; }
.slot-x.next .slot-img .ic { color: #f5f5f5; }

/* a field with a dictate button beside it */
.field > .field-row { display: flex; gap: 8px; align-items: flex-start; font-size: inherit; color: inherit; }
.field-row textarea, .field-row input { flex: 1 1 auto; min-width: 0; }
.field-row .icon-btn { flex: none; width: 48px; height: 48px; border: 1px solid var(--line-2); }
.field > span small { font-size: 11px; color: var(--muted); margin-left: 6px; }

/* F5: what a snag blocks */
.snag-blocks { max-height: 240px; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.snag-blocks .row b, .am-checks .row b { font-weight: 400; font-size: 14px; }
.am-checks .row { min-height: 52px; }
.am-checks .row small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* F18, B6, B7: the reading sheet */
.sheet-reading .sec-h { margin: 12px var(--gutter) 2px; }
.sheet-reading .chips-wrap { padding-top: 2px; padding-bottom: 4px; }
.rd-pre { display: flex; gap: 10px; align-items: flex-start; margin: 6px var(--gutter) 2px; padding: 10px 12px; background: var(--bg); font-size: 13px; line-height: 1.45; color: var(--fg-2); }
.rd-pre .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.rd-pre b { color: var(--fg); font-weight: 500; }
.rd-big.amber, .rd-big.bad { padding-left: 10px; box-shadow: inset 4px 0 0 #f59e0b; }
.rd-big.bad { box-shadow: inset 4px 0 0 #ff6257; }
.rd-note.amber { color: var(--fg); }
.rd-note.bad { color: var(--fg); font-weight: 500; }

/* F6: the comments composer keeps Send inside the gutter */
.sheet-comments .composer { gap: 4px; }
.sheet-comments .composer input { flex: 1 1 0; min-width: 0; width: 0; }
.sheet-comments .composer > .chip, .sheet-comments .composer > .icon-btn { flex: none; }
.sheet-comments .composer > .chip { padding-left: 12px; padding-right: 12px; }

/* D1: on the single-shot evidence camera (B5, a No, a meter) the shutter is the next step */
.cam .shutter.due { box-shadow: inset 0 0 0 3px var(--next); }

/* F3-1: answered rows fold into one summary line, so the row still needed sits above the keypad */
.rd-sum { display: flex; align-items: center; gap: 10px; width: calc(100% - 2 * var(--gutter)); margin: 8px var(--gutter) 2px; padding: 8px 12px; min-height: 52px; background: var(--bg); color: var(--fg); text-align: left; font-size: 14px; line-height: 1.35; }
.rd-sum .ic { width: 18px; height: 18px; flex: none; color: var(--fg-2); }
.rd-sum .grow { min-width: 0; }
.rd-sum small { display: block; font-size: 12px; color: var(--muted); }
.rd-sum b { font-weight: 500; }
.rd-sum-c { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--fg-2); }
.rd-sum-c .ic { width: 14px; height: 14px; }
.rd-row .sec-h small { display: inline; margin-left: 6px; font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--warn); }
.rd-row.rd-open { box-shadow: inset 3px 0 0 var(--next); }
/* the readout with the meter photo beside it, always above the keypad */
.rd-read { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px var(--gutter) 0; }
.rd-read .rd-big.rd-fixed { margin: 0; min-width: 0; }
.rd-cam { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; background: var(--chip); color: var(--fg); font-size: 14px; }
.rd-cam .ic { width: 20px; height: 20px; }
.rd-cam.on { padding: 0; background: none; gap: 4px; }
.rd-cam-b { position: relative; width: 48px; height: 48px; padding: 0; overflow: hidden; }
.rd-cam-b img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-cam-b i { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; display: grid; place-items: center; background: var(--ok); color: #fff; border-radius: 50%; }
.rd-cam-b i .ic { width: 11px; height: 11px; }
.rd-cam-x { width: 44px; height: 48px; display: grid; place-items: center; color: var(--muted); }
.rd-cam-x .ic { width: 18px; height: 18px; }
/* a footer that names the missing field is a live button: it shows you the row */
.sh-foot .btn.rd-need { flex: 1 1 auto; border: 1px dashed var(--line-2); background: none; color: var(--fg-2); }

/* B3-18: New site, the people who release hold points, and who releases each one */
.np-add { margin: 4px 0 6px; }
.np-add-row { display: flex; align-items: flex-end; gap: 8px; margin: 0 var(--gutter); }
.np-add-row .field { flex: 1 1 auto; min-width: 0; padding-left: 0; padding-right: 0; }
.np-add-row .btn { flex: none; min-height: 48px; margin-bottom: 8px; }
.np-holds { margin: 4px 0 8px; }
.np-hold { padding: 8px 0 4px; border-top: 1px solid var(--line); }
.np-hold > p { margin: 0 var(--gutter) 4px; font-size: 15px; }
.np-hold > p b { display: block; font-weight: 500; }
.np-hold > p small { display: block; font-size: 13px; color: var(--muted); }
/* the plan on step 3: who releases a hold goes under its name, so the name is never squeezed */
.np-stages li:has(small) { flex-wrap: wrap; row-gap: 0; padding: 8px 0; }
.np-stages li small { flex-basis: calc(100% - 30px); margin-left: 30px; font-size: 13px; color: var(--muted); }