/* Scanning a code into a search box (static/js/scan.js): the camera button, shown only where the
   page may use the camera (html.can-scan), and the camera's sheet. */
.scan-button { display: none; flex: none; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0;
               border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; }
html.can-scan .scan-button { display: inline-grid; }
.scan-button svg { width: 20px; height: 20px; }
.scan-button:hover { background: rgba(127, 127, 127, .16); }
.scan-button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
:is(#header, .topbar) .header-search .scan-button { width: 28px; height: 28px; margin-right: -6px;
                                                   color: rgba(255, 255, 255, .85); }
:is(#header, .topbar) .header-search .scan-button svg { width: 18px; height: 18px; }
.nav-search .nav-search-form button.scan-button { width: 40px; height: 40px; padding: 0; background: none;
                                                  color: var(--um-muted); }
.nav-search .nav-search-form button.scan-button svg { width: 22px; height: 22px; }
#changelist-search .scan-button { width: 32px; height: 32px; vertical-align: middle; color: var(--body-quiet-color); }

.scanner { width: min(92vw, 480px); max-height: 92vh; padding: 12px; border: 0; border-radius: 14px;
           background: var(--surface, var(--body-bg, #fff)); color: var(--text, var(--body-fg, #1d1d1b));
           box-shadow: 0 12px 40px rgb(0 0 0 / .35); }
.scanner::backdrop { background: rgb(0 0 0 / .6); }
.scanner-view { position: relative; aspect-ratio: 3 / 4; max-height: 70vh; margin: 0 auto; overflow: hidden;
                border-radius: 10px; background: #000; }
.scanner-view video { display: block; width: 100%; height: 100%; object-fit: cover; }
.scanner-frame { position: absolute; inset: 22% 14%; border: 3px solid rgb(255 255 255 / .9); border-radius: 12px;
                 box-shadow: 0 0 0 999px rgb(0 0 0 / .28); }
.scanner.failed .scanner-view { display: none; }
.scanner-note { margin: 10px 2px; font-size: 15px; text-align: center; }
.scanner-close { display: block; width: 100%; min-height: 44px; font: inherit; font-weight: 600; cursor: pointer;
                 border: 1px solid var(--border, var(--border-color, #ccc)); border-radius: 10px;
                 background: var(--bg, var(--darkened-bg, #f4f4f2)); color: inherit; }
@media (min-width: 768px) { .scanner-view { aspect-ratio: 4 / 3; } }