/* The camera scanner (qr-scanner.js), on every camera page, public and back
   office. The script builds .scan-view (the picture, the aiming square and
   the outline canvas), .scan-tools, .scan-status, .scan-wrong and
   .scan-debug inside the page's camera panel. The square's colours sit over
   the camera picture, so they are fixed rather than themed: yellow while it
   looks, green on a read, red for a code the page cannot use. */
.scan-view{ position:relative; width:100%; max-width:28rem; margin-top:var(--sp-2, .75rem); border-radius:12px; overflow:hidden; background:#000; aspect-ratio:1 / 1; }
.scan-view[hidden]{ display:none; }
.scan-view > video[playsinline]{ display:block; width:100%; height:100%; max-width:none; margin:0; border-radius:0; object-fit:cover; }
.scan-square{ position:absolute; left:50%; top:50%; width:68%; aspect-ratio:1 / 1; transform:translate(-50%, -50%); pointer-events:none; }
.scan-corner{ position:absolute; width:22%; height:22%; border:0 solid #f5c400; transition:border-color .15s ease; }
.scan-corner--tl{ left:0; top:0; border-left-width:5px; border-top-width:5px; border-top-left-radius:10px; }
.scan-corner--tr{ right:0; top:0; border-right-width:5px; border-top-width:5px; border-top-right-radius:10px; }
.scan-corner--bl{ left:0; bottom:0; border-left-width:5px; border-bottom-width:5px; border-bottom-left-radius:10px; }
.scan-corner--br{ right:0; bottom:0; border-right-width:5px; border-bottom-width:5px; border-bottom-right-radius:10px; }
.scan-view.is-looking .scan-square{ animation:scan-pulse 1.6s ease-in-out infinite; }
.scan-view.is-read .scan-corner{ border-color:#1c7a4a; }
.scan-view.is-wrong .scan-corner{ border-color:#b5341f; }
.scan-outline{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
@keyframes scan-pulse{
  0%, 100%{ opacity:1; transform:translate(-50%, -50%) scale(1); }
  50%{ opacity:.65; transform:translate(-50%, -50%) scale(.96); }
}
@media (prefers-reduced-motion: reduce){
  .scan-view.is-looking .scan-square{ animation:none; }
}

.scan-tools{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.scan-tools:not(:has(button:not([hidden]))){ display:none; }
.scan-tools .btn, .scan-open, .scan-btn, [data-scan-into]{ min-height:44px; }
.scan-status{ margin:.5rem 0 0; font-size:.95rem; min-height:1.4em; }
.scan-status:empty{ display:none; }
[data-state="read"] .scan-status{ color:var(--ok, #1c7a4a); font-weight:600; }
[data-state="wrong"] .scan-status{ color:var(--danger, #b5341f); font-weight:600; }
.scan-wrong{ margin:.5rem 0 0; }
.scan-wrong[hidden]{ display:none; }
.scan-open{ display:inline-flex; align-items:center; justify-content:center; width:100%; max-width:28rem; }
.scan-debug{ margin:.5rem 0 0; font:12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break:break-word; opacity:.85; }
.scan-debug[hidden]{ display:none; }

/* The camera panel a data-scan-into button opens on a page without one. */
.scan-into-panel{ margin:var(--sp-2, .75rem) 0; max-width:28rem; }
.scan-into-panel[hidden]{ display:none; }

/* The repot tool's camera is a dark overlay. */
.repot-cam .scan-status, .repot-cam .scan-debug{ color:#fff; }
.repot-cam .scan-view{ max-width:min(28rem, 55vh); flex-shrink:0; }

/* The two camera panels that carried their own inline sizes. */
.cam-panel--narrow{ margin:var(--sp-3, 1rem) 0; max-width:24em; }

/* The public /scan page. */
.scan-public{ max-width:36rem; }
.scan-public .scan-view{ max-width:none; }
.scan-public-type{ margin-top:var(--sp-4, 1.5rem); }
.scan-public-type .scan-public-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.scan-public-type input{ flex:1 1 12rem; min-height:44px; text-transform:uppercase; letter-spacing:.04em; }
.scan-public-type .btn{ min-height:44px; }