/* "Scan Rust" dialog (js/scanner.js): screenshot paste/drop, live screen capture, calibration settings.
   Uses base.css tokens, .dlg, .tabs, .btn, .gene and .toast; only scanner-specific layout lives here. */

.dlg.scanner { width: min(760px, calc(100vw - 32px)); position: fixed; }
.scanner .dlg-head h2 { display: flex; align-items: center; gap: .5rem; }
.scanner .dlg-head .icon-btn { font-size: 1.4rem; line-height: 1; }
.scan-panel > * + * { margin-top: .75rem; }
.scan-sub { margin: 1.1rem 0 .4rem; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* drop zone */
.scan-drop {
  display: grid; gap: .45rem; padding: 1.1rem 1rem; text-align: center;
  border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--panel-2);
  transition: border-color .12s, background .12s;
}
.scan-drop.over { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.scan-drop p { margin: 0; }
.scan-drop-main { line-height: 2.1; }
.scan-drop .btn { vertical-align: middle; }

/* status line */
.scan-status { margin: .6rem 0 0; min-height: 1.4em; font-size: .9rem; color: var(--muted); }
.scan-status:empty { display: none; }
.scan-status.good { color: var(--good); }
.scan-status.warn { color: var(--warn); }
.scan-status.bad { color: var(--bad); }

/* the row area as read, with circles marked */
.scan-strip {
  display: block; max-width: 100%; height: auto; margin-inline: auto;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: #000;
}
.scan-result { display: grid; gap: .8rem; justify-items: center; }
.scan-result .btn-row { justify-content: center; }

/* six cropped circles, each with its letter as a button */
.scan-cells { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; --chip: 40px; }
.scan-cell { display: grid; justify-items: center; gap: .3rem; min-width: 52px; }
.scan-crop {
  width: 48px; height: 48px; border-radius: 50%; background: #000;
  box-shadow: 0 0 0 1px var(--line-strong);
}
.scan-cell.row2 .scan-crop { box-shadow: 0 0 0 2px var(--info); }
.gene.scan-letter {
  appearance: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.gene.scan-letter:hover { transform: translateY(-1px); filter: brightness(1.08); }
.gene.scan-letter:active { transform: translateY(1px); }
.gene.scan-letter.unsure { outline: 2px dashed var(--warn); outline-offset: 2px; }
.gene.scan-letter.unsure:focus-visible { outline-style: solid; outline-color: var(--focus); }
.scan-cell-note { min-height: 1.1em; color: var(--muted); font-size: .72rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .05em; }

/* live */
.scan-guide { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.scan-guide li + li { margin-top: .25rem; }
.scan-safe {
  margin: .7rem 0 0; padding: .55rem .75rem; border-left: 3px solid var(--good); border-radius: var(--radius);
  background: color-mix(in srgb, var(--good) 8%, transparent);
}
.scan-confirm {
  display: grid; gap: .6rem; justify-items: center; padding: .8rem;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 7%, transparent);
}
.scan-confirm p { margin: 0; }
.scan-added { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.scan-added li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* settings: frozen frame with the calibration box */
.scan-calib-wrap {
  max-height: min(55vh, 520px); overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: #000;
}
.scan-calib-canvas { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.scan-calib-canvas.full { width: auto; max-width: none; }
.scan-calib-canvas:focus-visible { outline-offset: -3px; }

/* toasts inside the dialog (the page's toast host sits under the modal backdrop) */
.scan-toasts {
  position: absolute; left: 50%; bottom: 64px; z-index: 2; transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; gap: .4rem;
  width: max-content; max-width: calc(100% - 24px); pointer-events: none;
}
.scan-toasts .toast { pointer-events: auto; }

@media (max-width: 520px) {
  .scan-cells { --chip: 34px; gap: .35rem; }
  .scan-cell { min-width: 44px; }
  .scan-crop { width: 40px; height: 40px; }
  .scan-drop { padding: .9rem .7rem; }
}