/* Labels & scanning (2026-10-28). Linked from index.html, or added on demand
   by assets/js/scanner.js (ensureLabelsCss). Uses the tokens in styles.css. */

/* ---- label dialog -------------------------------------------------------- */
.sl-label-methods { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-1); }
.sl-label-method {
  display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer;
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.sl-label-method:has(input:checked) { border-color: var(--brand-border); background: var(--brand-soft); }
.sl-label-method input { margin-top: 3px; }
.sl-label-method .hint { margin-top: 2px; }
.hint.sl-ok { color: var(--ok); }
.hint.sl-warn { color: var(--warn); }

/* ---- a row or card a scan pointed at (?focus=<id>) ----------------------- */
.sl-focus { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }
tr.sl-focus > td { background: var(--brand-soft); }

/* ---- the reading box a device label opens -------------------------------- */
.sl-reading-card .input { font-size: 18px; min-height: 44px; }
.sl-reading-card .btn { min-height: 44px; }

/* ---- scanner overlay ----------------------------------------------------- */
dialog.sl-scanner {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #000; color: #fff; overflow: hidden;
}
dialog.sl-scanner[open] { display: flex; flex-direction: column; }
dialog.sl-scanner::backdrop { background: #000; }
.sl-scan-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.sl-scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.sl-scan-reticle {
  position: absolute; left: 50%; top: 50%; width: min(72vw, 60vh, 340px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border: 3px solid rgba(255, 255, 255, .92);
  border-radius: var(--r-lg); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); pointer-events: none;
}
.sl-scan-top {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: var(--sp-2);
  padding: calc(env(safe-area-inset-top, 0px) + var(--sp-3)) var(--sp-4) var(--sp-3);
  background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); font-size: var(--fs-md);
}
.sl-scan-bottom {
  padding: var(--sp-3) var(--sp-4) calc(env(safe-area-inset-bottom, 0px) + var(--sp-4));
  background: rgba(0, 0, 0, .86);
}
.sl-scan-status { min-height: 2.8em; font-size: var(--fs-md); line-height: 1.4; }
.sl-scan-status.is-ok { color: #8fe3c4; }
.sl-scan-status.is-warn { color: #ffd38a; }
.sl-scan-status.is-danger { color: #ffb4b8; }
.sl-scan-manual { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.sl-scan-manual .input { flex: 1; min-width: 0; font-size: 16px; } /* 16px stops iOS zooming */

/* ---- "several records match" chooser ------------------------------------- */
.sl-match-list { gap: var(--sp-2); }
.sl-match { justify-content: flex-start; text-align: left; gap: var(--sp-3); }

@media print {
  dialog.sl-scanner { display: none !important; }
}