/* One scrollport follows the visible viewport; the scanner owns no page scroll. */
:root[data-warehouse-scanner-sheet-open],
:root[data-warehouse-scanner-sheet-open] body { overflow: hidden; }

#scanner-dialog.scanner-modal[open] {
  position: fixed;
  inset: auto;
  top: calc(var(--scanner-viewport-top, 0px) + 14px);
  left: calc(var(--scanner-viewport-left, 0px) + max(14px, (var(--scanner-viewport-width, 100vw) - 900px) / 2));
  width: min(900px, calc(var(--scanner-viewport-width, 100vw) - 28px));
  height: auto;
  min-height: 0;
  max-height: max(0px, calc(var(--scanner-viewport-height, 100dvh) - 28px));
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-top: var(--scanner-header-clearance, 140px);
  scroll-padding-bottom: calc(20px + var(--safe-bottom, 0px));
}
#scanner-dialog .scanner-shell { min-height: 0; }
#scanner-dialog .scanner-header {
  position: sticky;
  top: 0;
  z-index: 8;
  flex-shrink: 0;
  padding-block: 8px;
  background: var(--panel);
}
#scanner-dialog .scanner-header .icon-button {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  #scanner-dialog.scanner-modal[open] {
    top: var(--scanner-viewport-top, 0px);
    left: var(--scanner-viewport-left, 0px);
    width: var(--scanner-viewport-width, 100vw);
    height: var(--scanner-viewport-height, 100dvh);
    max-width: none;
    max-height: var(--scanner-viewport-height, 100dvh);
    border: 0;
    border-radius: 0;
    padding: calc(16px + var(--safe-top, 0px)) calc(16px + var(--safe-right, 0px)) calc(20px + var(--safe-bottom, 0px)) calc(16px + var(--safe-left, 0px));
  }
  #scanner-dialog.scanner-modal[open] .scanner-shell { padding: 0; }
}