/* --- barcode scan ------------------------------------------------------- */ .scan-mode { margin: 16px 16px 0; } .scan-shutter { margin: 0 16px 16px; } .scan-camera { position: relative; margin: 16px; background: var(--ink-fixed); border: 2px solid var(--ink); box-shadow: var(--shadow-md); aspect-ratio: 3 / 4; overflow: hidden; } .scan-camera video { width: 100%; height: 100%; object-fit: cover; } /* Live camera feed: the hint text sits over real video, so it stays cream in both schemes (same reasoning as the hero scrim). */ .scan-camera__hint { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; color: var(--cream-fixed); font: 700 12px/1 var(--mono); letter-spacing: 0.5px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } .scan-rows { margin: 0; padding: 0; list-style: none; } .scan-row + .scan-row { border-top: 1px solid var(--line); } .scan-row__body { display: flex; align-items: center; gap: 10px; padding: 10px 0; } .scan-row__main { flex: 1; min-width: 0; } .scan-row__main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 45px in the box itself, no halo: 13px font + 14px×2 padding + 2px×2 border. */ .scan-row__dismiss { padding: 14px 12px; } .results-scroll { margin-top: 12px; max-height: 320px; overflow-y: auto; border: 2px solid var(--ink); background: var(--surface); } .results { list-style: none; margin: 0; padding: 0; } .results li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); } .results li:first-child { border-top: none; } .result-main { flex: 1; min-width: 0; } .result-main strong { font-weight: 700; } .load-more { text-align: center; margin: 8px 0; }